react native appsync s3

기본 appsync S3에 반응합니다

이 앱은 사용자가 다음을 수행 할 수 있습니다.

• 플랫폼에 가입/입력하십시오.
• 엑스포를 사용하여 장치 라이브러리에 액세스하십시오.
• AWS S3에 사진을 업로드하십시오.
• Amazon DynamoDB에 그림 레코드를 저장하십시오.
• 플랫폼에 그림을 표시하십시오.

전제 조건

• 엑스포 클리

  • npm install -g expo-cli

• AWS 계정

• NPM이있는 노드 JS

• AWS는 CLI를 증폭시킵니다

  • npm install -g @aws-amplify/cli
  • amplify configure (단계별 비디오의 링크).

프로젝트 구성

1. 이 저장소를 로컬 컴퓨터에 복제하십시오.

 git clone https://github.com/yhenni1989/react-native-appsync-s3.git

cd react-native-appsync-s3

2. 프로젝트에 AWS 증폭 의존성을 추가하십시오.

 yarn add aws-amplify aws-amplify-react-native

# or

npm install aws-amplify aws-amplify-react-native

3. AWS 증폭 프로젝트를 초기화하십시오.

 amplify init

아래와 동일한 지침을 따르십시오.

4. 사용자 자격 증명을 저장하기 위해 Amazon Cognito 사용자 풀을 구성하십시오.

 amplify add auth

# When prompt, choose: Yes, use the default configuration.

5. Amazon S3 버킷을 추가하여 사진을 저장하십시오.

 amplify add storage

# Choose: Content (Images, audio, video, etc.)
# Give access to only authenticated users.
# Give users read/write acces.

6. AWS AppSync API를 추가하여 GraphQL을 사용하고 DynamMODB에 데이터를 저장하십시오.

 amplify add api

# Choose GraphQL as the API service. 
# Choose an authorization type for the API: Amazon Cognito User Pool
# Do you have an annotated GraphQL schema? Yes
# Provide your schema file path: src/graphQL/schema.graphql

7. 프로젝트를 AWS에 배포하십시오.

 amplify push

 Do you want to generate code for your newly created GraphQL API: No.

AWS Amplify CLI는 Amazon Cognito User Pool 및 Identity Pool, Amazon S3 버킷 및 각 사용자 사진 및 Amazon DynamoDB를 사용하여 데이터를 저장하는 AWS AppSync GraphQL API를 생성합니다.

응용 프로그램 실행

1. 클라이언트 종속성을 설치합니다.

 yarn

# or

npm install

2. 응용 프로그램을 실행하기 전에 AWS IAM 자격 증명이 필요합니다.

• 프로젝트의 src/myKeys.js 파일에 액세스 및 비밀 키를 복사하십시오.

 const keys = {
 accessKey : 'blablabla' ,
 secretKey : 'blablabla' ,
}
export default keys ;

• 변경 사항을 저장하십시오.

3. 프로젝트 디렉토리의 터미널에서 시뮬레이터에서 React Native 앱을 시작하십시오.

 expo start --ios

# or

expo start --android

3. 새 사용자를 만듭니다.

• 이 앱은 AWS Amplify의 HOC (High Order Component )를 사용하여 인증 흐름을 수행합니다. 가입, 가입 확인 및 가입자 사용자.

4. 사진을 추가하고 표시합니다.

• 애플리케이션이 성공적으로 실행되면 추가 버튼을 누르고 장치 라이브러리에 액세스를 허용 한 다음 장치에서 사진을 선택할 수 있어야합니다. 이렇게하면 그림을 S3에 업로드 한 다음 GraphQL 호출을 통해 레코드를 DynamODB에 입력합니다.

• 그런 다음 새로 고침 버튼을 눌러 화면에 그림을 표시 할 수 있습니다.

기여하다

• 이 프로젝트는 많은 개선이 필요합니다. 내가 성장하고 개선하도록 도와주세요?.