Plush

豪華

Plushは、写真を共有するためのフルスタックのモバイルアプリケーションです。フロントエンドにExpoとReactネイティブを使用し、AWSがバックエンドサービスとして増幅し、APIサービスはGraphQLで構築されています。

デモ

こちらのアプリ機能のデモビデオ。

概要

サインアップ/サインインした後、ユーザーは以下を実行できます。

• ヘッダーのカメラアイコンを押して、モバイルデバイスライブラリにアクセスできます。
• フィードに写真をアップロードします。
• 写真とは異なり（他のユーザーや自分のユーザーから）。
• Pull-to-Refreshまたはヘッダーのリロードボタンを押してフィードを更新します。
• 画像カードフッターのオプションアイコンを押して、不適切なコンテンツにフラグを立てます。
• フィードから自分の写真を削除します。オプションアイコンでも利用できます。

アプリフロー

• ユーザーは、認証フローを増幅するボックス外のボックスアウトを使用して認証されます。

• ユーザーは、アプリの唯一の画面にリダイレクトされています：フィード。

• ユーザーが画像をアップロードしたとき：

  • RNS3を使用したリクエストは、ファイルをAWS-S3バケットに保存します。
  • Apollo GraphQL変異は、DynamoDB画像テーブルにレコードを保存します。

• ユーザーが不適切なコンテンツにフラグを立てるとき：

  • AppSyncクライアントGraphQL変異は、DynamoDBフラグテーブルにレコードを保存します。
  • フロントエンドは、ユーザーのフィードからその写真を非表示にします。

• ユーザーが写真を気に入る/解き放つとき：

  • AppSyncクライアントGraphQL変異は、DynamoDBのようなテーブルに同様のインスタンスを作成します。
  • AppSyncクライアントのGraphQL変異は、DynamoDBのようなテーブルからのようなインスタンスを破壊します。

• ユーザーが画像を削除するとき：

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

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

# or

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

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

 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ユーザープールとID3バケツを作成し、各ユーザーの写真を保存するAmazon S3バケット、Amazon Dynamodbを使用してメタデータを写真（すなわち、バケット、フラグ、所有者、作成日など）を保存するAWS AppSync GraphQl APIを作成します。

アプリケーションの実行

1. クライアントの依存関係をインストールします。

 yarn

# or

npm install

2. S3バケットにアクセスするには、AWS IAM資格情報が必要です。

• プロジェクトのsrc/myKeys.jsファイルにアクセスと秘密の鍵をコピーします。

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

• 変更を保存します。

3. これで、アプリを起動およびテストする準備ができました。

 expo start --ios

# or

expo start --android

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

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

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

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

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

• 他のユーザーの写真とは異なり、違ってフラグを立てることができ、独自の写真を削除できます。

貢献したいですか？

• このプロジェクトが気に入ったら、プルリクエストを送信して成長して改善してください。