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。

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

• 您可以喜歡/不同，並標記其他用戶圖片，並刪除自己的圖片。

想貢獻嗎？

• 如果您喜歡這個項目，請通過發送拉動請求來幫助我成長和改進？