ReactNative 및 Amplify 포함 전자 상거래 애플리케이션 - 섹션 1

소개하다.

안녕하세요.AWS Amplify and React Native에 대한 전체 설명서를 읽으신 것을 환영합니다.본 강좌에서 우리는 간단한 전자상거래 응용 프로그램을 구축할 것이다.사용자는 이 앱에 로그인/등록할 수 있습니다.사용자는 자신의 제품을 추가할 수 있으며, 모든 사용자는 서로 다른 사용자가 추가한 제품을 볼 수 있다.
여기는 스피드 쇼입니다.

비록 이것은 매우 복잡한 응용 프로그램이 아니지만, 당신에게는 완벽한 입문 프로젝트가 될 것입니다.S3 스토리지, AWS AppSync API, Amazon Cognito 인증 등 다양한 AWS 서비스를 사용할 예정입니다.걱정하지 마세요. 제가 이따가 이것들을 상세하게 설명할게요.

선결 조건

향후 방해가 발생하지 않도록 다음 사전 요구 사항이 설치되어 있는지 확인합니다.

노드js v10.x 이상
npm v5.x 이상

Amplify CLI(버전 @4.40.1, 튜토리얼에서 사용한 내용)

안드로이드 스튜디오

ReactNatice CLI(버전 2.0.1)

구성도

다음 그림은 AWS 아키텍처를 보여줍니다.

AWS Amplify는 이러한 서로 다른 서비스를 더욱 쉽게 사용할 수 있도록 합니다.이전과 같이 백엔드 리소스는 Amplify에서 만들고 관리합니다.이 서비스들의 작용을 설명해 드리겠습니다.
따라서 Amplify는 백엔드 환경의 핵심입니다.Amplify에서 가리키는 화살표는 Amplify를 사용하여 서로 다른 자원을 연결하는 것을 의미합니다.제품마다 이미지가 하나씩 있어요.우리는 이 그림을 S3 메모리 통에 저장할 것이다.제품 상세 정보는 AWS에서 제공하는 NosQL 데이터베이스인 Amazon DynamoDB에 저장됩니다.이 데이터베이스와 대화하기 위해 AWS AppSync에서 제공하는 GraphQL API를 사용합니다.Amazon Cognito에서 인증을 처리합니다.

프로젝트 작성

Amplify CLI 설치 및 구성

이 자습서에서는 AWS Amplify CLI를 사용합니다.당신은 운행을 통해npm install -g @aws-amplify/[email protected]그리고 확대 설정을 실행해야 합니다.그러면 Amplify CLI가 설정됩니다.여기서 새 IAM 사용자를 설정합니다.IAM 사용자에게accessKeyId와 secretAccessKey를 제공하면 IAM 사용자의 설정을 완성할 수 있습니다.
문제가 발생한 경우 Amplify CLI 설치에 대한 기본 가이드https://docs.amplify.aws/cli/start/install를 참조하십시오.

새 네이티브 응용 프로그램 만들기

Amplify CLI를 설치하고 구성했으면 합니다.
ReactNative를 사용하려면 Android 개발 환경을 설정해야 합니다.이 기본 가이드https://reactnative.dev/docs/environment-setup를 참조하십시오.
Amplify Shop이라는 새 React 네이티브 애플리케이션을 만듭니다.npx react-native init amplify_shopreact native cli가 설치되어 있으면 npx 대신 사용할 수 있습니다.
새로 작성된 React 기본 프로젝트를 Android Studio를 사용하여 엽니다.Android Studio의 AVD 관리자를 사용하여 Android Emulator를 엽니다.프로젝트 디렉터리에서 이 두 명령을 실행합니다.npx react-native start
npx react-native run-android현재, React 원본 프로젝트는 안드로이드 시뮬레이터에서 실행되어야 합니다.만약 당신이 어떤 점에서 끊겼다면, 제가 전에 건의한 지침을 참고하세요.

확대 백엔드 초기화

우리 프로젝트를 위해 준비합시다.그리고 우리는 하나하나 서비스를 추가할 수 있다.
프로젝트 디렉토리에서 실행amplify init그런 다음 초기화한 항목에 대한 다음 정보를 입력하라는 메시지가 표시됩니다.
확대 항목을 초기화할 때,

aws에서 내보낸 파일을 만들었습니다.js는 src 디렉터리에 있습니다.이 파일은 앞으로 할당될 AWS 리소스/서비스를 결정하기 위해 관련 정보를 모두 저장합니다.

amplify라는 디렉터리를 만들었습니다.이 디렉토리를 사용하여 향후 사용할 서비스의 템플릿 및 구성 세부 정보를 저장합니다.이 디렉토리에서는 Amplify에서도 백엔드 모드를 저장합니다.

클라우드 프로젝트를 만들었습니다.콘솔 확대 명령을 사용하여 항목을 볼 수 있습니다.

다음에, 우리는 다음 명령을 실행해서 필요한 모든 의존 항목을 설치해야 한다.npm install aws-amplify aws-amplify-react-native amazon-cognito-identity-js @react-native-community/netinfoiOS에 pod 종속성을 설치해야 합니다.npx pod-install

확대 백엔드 구성

Amplify 프로젝트의 설정을 완성하려면 고급 구성 요소에서 Amplify를 설정해야 합니다.응용 프로그램에 다음 코드 줄을 추가합니다.js 또는 색인.js 파일은 이 작업을 완성할 것입니다.import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure({
...awsconfig,
Analytics: {
disabled: true,
},
});프로젝트 설정이 완료되었습니다.이제 이 서비스들을 하나씩 추가합시다.

Cognito 인증 추가

이제 Amplify보다 React 네이티브 애플리케이션에 인증을 추가하는 것이 더 쉽습니다.

등록 및 로그인 추가

프로젝트 디렉토리에서amplify add auth를 실행합니다.인증을 설정할 때 다음 정보를 제출합니다.
백엔드 변경 사항을 배치하려면amplify push를 실행하십시오.Amplify는 Cognito 사용자 풀을 생성하여 나머지 부분을 처리합니다.
Amplify Framework에서 제공하는 인증 UI 구성 요소는 전체 인증 프로세스를 제공합니다.
응용 프로그램에서js 파일,

인증서 구성 요소로 가져오기import { withAuthenticator } from 'aws-amplify-react-native'

withAuthenticator 모듈로 메인 모듈을 포장합니다.export default withAuthenticator(App)

프로그램을 실행할 때이 로그인 화면이 표시됩니다.새 사용자로 로그인을 시도합니다.이것은 너를 홈페이지로 안내할 것이다.새로 만든 사용자는 Cognito 사용자 풀에 저장됩니다.

로컬 탐색 추가

우리 프로그램은 두 개의 화면을 포함할 것이다.한 화면에는 제품 목록이 표시되고 다른 화면에는 신제품이 추가됩니다.이 두 개의 화면을 만듭니다.
src라는 새 디렉터리를 만듭니다.이 디렉터리에screens라는 폴더를 만듭니다.이 폴더 src/screens에ddproduct screen이라는 새javascript 파일 두 개를 만듭니다.js와 메인 화면입니다.나는 단지 이런 명명 관례를 더욱 좋아할 뿐이다.너는 어떤 관례도 사용할 수 있다.
다음 예제 코드를 복사하여 붙여넣습니다.페이지에 따라 기능 이름(기본 화면 및 AddProductScreen)과 제목을 변경하십시오.
디렉토리: src/screens/home.js, 제품 화면 추가.js

import React from 'react';
import {SafeAreaView, StatusBar, Text} from 'react-native';
const HomeScreen = (props) => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <Text>Home</Text>
      </SafeAreaView>
    </>
  );
};
export default HomeScreen;`

로컬 응용 프로그램에 내비게이션을 추가할 수 있는 여러 가지 방법이 있다.이 자습서에서는 React Navigation의 스택 탐색기 라이브러리를 사용합니다.우선, 우리는 npm를 사용하여 그것을 설치해야 한다.npm install @react-navigation/native추가된 타사 종속성을 모두 설치합니다.npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/stack링크는 React Native 0.60 이상부터 자동으로 표시됩니다.그래서 react native link를 실행할 필요가 없습니다.
Mac에서 iOS를 개발하려면 링크를 완성하기 위해 POD를 설치해야 합니다.npx pod-install iosReact Native Navigation 설치를 완료하려면 다음 가져오기를 응용 프로그램에 추가합니다.js 또는 색인.js 파일.import 'react-native-gesture-handler';이 강좌에서, 나는 다른 두 개의 스타일 라이브러리를 사용할 것이다.react native 요소와 react native vector 아이콘을 사용합니다.npm로 설치합시다.npm install react-native-elements
npm install react-native-vector-icons아이콘을 보기 위해서android/app/build에 다음 줄을 추가해야 합니다.그레델 서류.
적용: "./node modules/react native vector icons/fonts.gradle"
이러한 장애를 제거한 후 응용 프로그램에 들어간다.js 파일.우리는 이 프로그램을 사용할 것이다.js 파일, 저희 프로그램에서 내비게이션을 설정하는 데 사용됩니다.현재 코드를 다음 코드로 바꿉니다.
카탈로그: App.js

import React from 'react';
import {StyleSheet, View, TouchableOpacity} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';
import AddProductScreen from './src/screens/add-product-screen';
import HomeScreen from './src/screens/home-screen';
import {Button} from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
import {withAuthenticator} from 'aws-amplify-react-native';
const App: () => React$Node = () => {
  const Stack = createStackNavigator();
  return (
    <>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={({navigation}) => ({
              title: 'Home',
              headerStyle: {
                backgroundColor: '#ff9300',
              },
              headerRight: () => (
                <TouchableOpacity
                  style={styles.addButton}
                  onPress={() => navigation.navigate('AddProduct')}>
                  <Icon name={'plus'} size={20} color="#000000" />
                </TouchableOpacity>
              ),
            })}
          />
          <Stack.Screen
            name="AddProduct"
            buttonStyle={styles.addButton}
            component={AddProductScreen}
            options={{
              title: 'Add Product',
              headerStyle: {
                backgroundColor: '#ff9300',
              },
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
};
const styles = StyleSheet.create({
  addButton: {
    marginRight: 20,
  },
  logOutBtn: {
    marginLeft: 10,
  },
});
export default withAuthenticator(App);

이것은 내비게이션을 추가하는 가장 간단하고 가장 간단한 방법이다.우리는 스타크가 있다.네비게이션 구성 요소, 우리는 초기 노선을 제공할 수 있습니다.패키지 구성 요소에서, 우리는 창고를 사용하여 모든 화면을 정의할 수 있습니다.화면 구성 요소.
우리는 이 옵션을 사용하여 모든 화면의 제목을 정의할 수 있습니다.나는 방금 제목 오른쪽에 내비게이션 단추를 추가했다.AddProduct 화면으로 이동해야 합니다.
우리는 창고 내비게이션을 사용하기 때문에, 새 화면은 이전 화면의 맨 위에 불러옵니다.따라서 후퇴 버튼이 자동으로 추가됩니다.
자, 멈춰라. 거대한 정보다. 이 지식을 이해하고 응용해야 한다.다음 글에서, 우리는 이 교과서를 계속해서 확대 집적할 것이다.곧 뵙기를 기대합니다.