react native appsync s3

React本地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放大依賴項添加到您的項目中。

 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用戶池和身份池，一個Amazon S3存儲桶，用於存儲每個用戶照片以及AWS AppSync GraphQl API，該AppSync GraphQl API使用Amazon DynampiDB存儲數據。

運行應用程序

1. 安裝客戶端依賴。

 yarn

# or

npm install

2. 在運行應用程序之前，您將需要您的AWS IAM憑據。

• 在項目的src/myKeys.js文件中復制您的訪問權限和秘密鍵。

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

• 保存更改。

3. 從項目目錄下的終端中啟動React Antive應用程序。

 expo start --ios

# or

expo start --android

3. 創建一個新用戶。

• 該應用程序使用AWS Amplify的高階組件WiTA ARTENENTICATOR （HOC）執行身份驗證流：註冊，確認註冊並登錄用戶。

4. 添加並顯示圖片。

• 如果應用程序成功運行，您應該能夠按“添加”按鈕，允許訪問設備庫，然後從設備中選擇圖片。這將將圖片上傳到S3，然後進行GraphQl調用，將記錄輸入DynamoDB。

• 然後，您可以按“刷新”按鈕在屏幕上顯示圖片。

貢獻

• 該項目需要大量改進。幫助我成長和改進嗎？