react native appsync s3

React natif appsync s3

Cette application permet à l'utilisateur de faire ce qui suit:

• Inscrivez-vous / en la plate-forme.
• Accédez à la bibliothèque de périphériques à l'aide de l'EXPO.
• Téléchargez des photos sur AWS S3.
• Stockez les enregistrements des photos dans Amazon DynamoDB.
• Affichez les images de la plate-forme.

Condition préalable

• 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 projet

1. Clone ce repo à votre machine locale.

 git clone https://github.com/yhenni1989/react-native-appsync-s3.git

cd react-native-appsync-s3

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

Suivez les mêmes instructions que ci-dessous.

4. 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.

5. 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.

6. Ajoutez l'API AWS AppSync pour utiliser GraphQL et stocker des données dans 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. Déployez votre projet sur AWS.

 amplify push

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

L'AWS Amplify CLI créera un pool utilisateur Amazon Cognito et un pool d'identité, un seau Amazon S3 pour stocker les photos de chaque utilisateur et une AWS Appsync GraphQL qui utilise Amazon DynamoDB pour stocker des données.

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 avant d'exécuter la demande.

• 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 ;

• Enregistrer les modifications.

3. Lancez l'application React Native dans votre simulateur à partir du terminal dans le cadre de votre répertoire de projet.

 expo start --ios

# or

expo start --android

3. 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.

4. Ajouter et afficher des images.

• Si l'application s'exécute avec succès, vous devriez pouvoir appuyer sur le bouton Ajouter, permettre l'accès à la bibliothèque de périphériques et sélectionner 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.

Contribuer

• Ce projet a besoin de beaucoup d'amélioration. Aidez-moi à grandir et à l'améliorer ?.