react native appsync s3

ネイティブAppSync S3を反応します

このアプリを使用すると、ユーザーは次のことを行うことができます。

• プラットフォームにサインアップします。
• エキスポを使用したデバイスライブラリにアクセスします。
• AWS S3に写真をアップロードします。
• Amazon Dynamodbに写真レコードを保存します。
• プラットフォームに写真を表示します。

前提条件

• 博覧会CLI

  • 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 Amplify依存関係を追加します。

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

# or

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

3. AWS Amplifyプロジェクトを初期化します。

 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ユーザープールとID3バケットを作成し、各ユーザーの写真を保存するAmazon S3 Bucket、および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ネイティブアプリを起動します。

 expo start --ios

# or

expo start --android

3. 新しいユーザーを作成します。

• このアプリは、AWS Amplifyのauthenticator （HOC）を使用して高次コンポーネントを使用して、認証フローを実行します。サインアップ、サインアップの確認、ユーザーのサインインを実行します。

4. 写真を追加して表示します。

• アプリケーションが正常に実行された場合は、追加ボタンを押し、デバイスライブラリへのアクセスを許可し、デバイスから画像を選択できるようになります。これにより、写真がS3にアップロードされ、GraphQL呼び出しが作成され、RecordがDynamoDBに入力されます。

• その後、更新ボタンを押して画面に画像を表示できます。

貢献する

• このプロジェクトには多くの改善が必要です。私が成長して改善するのを手伝ってくれませんか？