Plush

豪华的

Plush是用于图片共享的全栈移动应用程序。它使用Expo并在前端进行反应本机，AWS放大为后端服务，并且API服务是使用GraphQL构建的。

演示

此处的应用程序功能的演示视频。

概述

注册/登录后，用户可以执行以下操作：

• 通过按标头中的相机图标来访问其移动设备库。
• 将图片上传到提要。
• 喜欢和与图片不同（来自其他用户及其自己的图片）。
• 通过拉动到刷新或按下标头中的重新加载按钮来刷新提要。
• 通过按“图像卡页脚”中的“选项”图标来标记不适当的内容。
• 从供稿中删除自己的图片。选项图标也可用。

应用流

• 用户使用开箱即用的AWS放大身份验证流进行身份验证。

• 用户将重定向到应用程序的唯一屏幕：feed。

• 当用户上传图片时：

  • 带有RNS3的PUT请求将将文件存储在AWS-S3存储桶中。
  • Apollo GraphQl突变将存储记录在DynamoDB图片表中。

• 当用户标记不适当的内容时：

  • AppSync客户端GraphQl突变将存储记录在DynamoDB标志表中。
  • 前端将对用户的提要隐藏该图片。

• 当用户喜欢/不利于图片时：

  • AppSync客户端GraphQl突变将在DynamoDB类似表中创建类似的实例。
  • AppSync客户端GraphQl突变将破坏DynamoDB类似表的实例。

• 当用户删除图片时：

  • 带有放大存储API的删除请求将从AWS-S3存储桶中删除关联的文件。
  • Apollo GraphQL突变将破坏DynamoDB图表表的记录。
  • 刷新提要以显示当前图片。

• 当用户刷新提要时：

  • AppSync客户端GraphQl查询将请求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/plush

cd plush

2. 将AWS放大依赖项添加到您的项目中。

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

# or

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

3. 初始化AWS放大项目。

 amplify init

4. 遵循与以下相同的说明。

5. 配置Amazon Cognito用户池以存储用户凭据。

 amplify add auth

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

6. 添加一个Amazon S3存储桶以存储图片。

 amplify add storage

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

7. 将GraphQL API添加到您的项目。

 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

• 该项目的模式位于src/graphql/schema.graphql上，看起来像这样：

 type Picture @model {
  id : ID !
  pictureOwnerId : String !
  pictureOwnerUsername : String !
  visibility : Visibility
  file : S3Object
  likes : [ Like ] @connection ( name : " PictureLikes " )
  flags : [ Flag ] @connection ( name : " PictureFlags " )
}

type Like @model {
  id : ID !
  likeOwnerId : String !
  likeOwnerUsername : String !
  picture : Picture @connection ( name : " PictureLikes " )
}

type Flag @model {
  id : ID !
  flagOwnerId : String !
  flagOwnerUsername : String !
  picture : Picture @connection ( name : " PictureFlags " )
}

type S3Object {
  bucket : String !
  region : String !
  key : String !
  uri : String !
}

enum Visibility {
  public
  private
}

• 图片，喜欢和标志都是用于存储用户输入数据的DynamoDB表。

8. 是时候将您的项目部署到云了吗？

 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 DynamedoDB存储元数据有关图片的元数据（即，桶名，喜欢，flags，flags，flags，flags，flags，land，所有者，日期创建日期等）。

运行应用程序

1. 安装客户端依赖。

 yarn

# or

npm install

2. 您将需要您的AWS IAM凭证才能访问您的S3存储桶。

• 在项目的src/myKeys.js文件中复制您的访问权限和秘密键。

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

• 保存更改。

3. 现在，您准备启动和测试应用程序。

 expo start --ios

# or

expo start --android

4. 创建一个新用户。

• 该应用程序使用AWS Amplify的高阶组件WiTA ARTENENTICATOR （HOC）执行身份验证流：注册，确认注册并登录用户。

5. 添加并显示图片。

• 如果应用程序成功运行，您应该能够按下相机图标，允许访问设备库，然后从设备中选择图片。这将将图片上传到S3，然后进行GraphQl调用，将记录输入DynamoDB。

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

• 您可以喜欢/不同，并标记其他用户图片，并删除自己的图片。

想贡献吗？

• 如果您喜欢这个项目，请通过发送拉动请求来帮助我成长和改进？