Plush

Peluche

La peluche est une application mobile complète pour le partage d'images. Il utilise Expo et React Native pour le frontal, AWS Amplify comme service back-end, et le service API est construit avec GraphQL.

Démo

Vidéo de démonstration des fonctionnalités de l'application ici.

Aperçu

Après s'inscrire / s'inscrire, les utilisateurs peuvent effectuer les éléments suivants:

• Donnez accès à leur bibliothèque d'appareils mobiles en appuyant sur l'icône de l'appareil photo dans l'en-tête.
• Téléchargez des photos sur le flux.
• Comme et contrairement aux photos (des autres utilisateurs et les leurs).
• Actualisez l'alimentation par pull-to-refresh ou en appuyant sur le bouton de rechargement dans l'en-tête.
• Flag de contenu inapproprié en appuyant sur l'icône Options dans le pied de page de la carte d'image.
• Retirez leurs propres photos du flux. Également disponible dans l'icône Options.

Flux d'applications

• Les utilisateurs sont authentifiés à l'aide de l'amplification de l'amplification de l'amplification AWS AWS.

• Les utilisateurs ont redirigé vers le seul écran de l'application: le flux.

• Lorsqu'un utilisateur télécharge une image:

  • Une demande de put avec RNS3 stockera le fichier dans un seau AWS-S3.
  • Une mutation Apollo GraphQL stockera un enregistrement dans une table d'image DynamoDB.

• Lorsqu'un utilisateur signale un contenu inapproprié:

  • Une mutation GraphQL client AppSync stockera un enregistrement dans une table de drapeau DynamoDB.
  • Le front-end masquera cette image du flux de l'utilisateur.

• Lorsqu'un utilisateur aime / souligne une image:

  • Une mutation GraphQL client AppSync créera une instance similaire dans une table DynamoDB.
  • Une mutation GraphQL client AppSync détruira cette instance comme la table DynamoDB.

• Lorsqu'un utilisateur supprime une image:

  • Une demande de suppression avec l'API de stockage Amplify supprimera le fichier associé du seau AWS-S3.
  • Une mutation Apollo GraphQL détruira l'enregistrement à partir de la table d'image DynamoDB.
  • Le flux est actualisé pour afficher les images actuelles.

• Lorsqu'un utilisateur actualise le flux:

  • Une requête GraphQL client AppSync demandera toutes les images actuelles stockées dans la table d'images DynamoDB.

Condition préalable

Pour exécuter cette application sur votre machine locale, vous avez besoin des outils suivants:

• EXPO CLI

  • npm install -g expo-cli

• Compte AWS

• Nœud js avec npm

• AWS Amplify CLI

  • npm install -g @aws-amplify/cli
  • amplify configure (lien pour une vidéo étape par étape).

Configuration du back-end

1. Clone ce repo à votre machine locale.

 git clone https://github.com/yhenni1989/plush

cd plush

2. Ajoutez AWS Amplifiez les dépendances à votre projet.

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

# or

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

3. Initialiser le projet AWS Amplify.

 amplify init

4. Suivez les mêmes instructions que ci-dessous.

5. Configurez un pool d'utilisateurs Amazon Cognito pour stocker les informations d'identification des utilisateurs.

 amplify add auth

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

6. Ajoutez un seau Amazon S3 pour stocker des photos.

 amplify add storage

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

7. Ajoutez une API GraphQL à votre projet.

 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

• Le schéma de ce projet, situé à SRC / GraphQL / Schema.GraphQL, ressemble à ceci:

 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
}

• L'image, comme et l'indicateur sont toutes les tables DynamoDB utilisées pour stocker les données de l'entrée des utilisateurs.

8. Il est temps de déployer votre projet sur le cloud ?.

 amplify push

 Do you want to generate code for your newly created GraphQL API: No.

L'AWS Amplify CLI créera un pool d'utilisateurs et un pool d'identité Amazon Cognito, un seau Amazon S3 pour stocker les images de chaque utilisateur et une AWS AppSync GraphQL qui utilise Amazon DynamoDB pour stocker les métadonnées sur les images (IE Nom de seau, likes, drapeaux, propriétaire, date de création ... etc.).

Exécution de l'application

1. Installez les dépendances des clients.

 yarn

# or

npm install

2. Vous aurez besoin de vos informations d'identification AWS IAM pour accéder à votre seau S3.

• Copiez vos clés d'accès et secrètes dans le fichier src/myKeys.js de votre projet.

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

• Enregistrez les modifications.

3. Vous êtes maintenant prêt à lancer et à tester l'application.

 expo start --ios

# or

expo start --android

4. Créer un nouvel utilisateur.

• L'application utilise le composant d'ordre supérieur avec Authenticator (HOC) à partir d'AWS Amplify pour effectuer le flux d'authentification: inscrivez-vous, confirmez l'inscription et connectez-vous aux utilisateurs.

5. Ajouter et afficher des images.

• Si l'application s'exécute avec succès, vous devriez pouvoir appuyer sur l'icône de l'appareil photo, permettez l'accès à la bibliothèque de périphériques et sélectionnez une image dans votre appareil. Cela téléchargera l'image sur S3, puis passera un appel GraphQL pour entrer l'enregistrement dans DynamoDB.

• Vous pouvez ensuite appuyer sur le bouton Actualiser pour afficher l'image à l'écran.

• Vous pouvez aimer / contrairement et signaler les autres photos des utilisateurs, et supprimer vos propres photos.

Vous voulez contribuer?

• Si vous aimez ce projet, aidez-moi à développer et à l'améliorer en envoyant des demandes de traction ?.