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。

• 然后，您可以按“刷新”按钮在屏幕上显示图片。

贡献

• 该项目需要大量改进。帮助我成长和改进吗？