Zopher

React Native Twitter App avec AWS Amplify and Expo

Ce projet intègre un front-end frontal natif React avec un back-end AWS amplifier AWS qui a une authentification des utilisateurs (AWS Cognito) et une API GraphQL (AWS Appsync) pour les opérations CRUD entre le client et la base de données (Amazon DynamoDB).

Aperçu de l'application

• Les utilisateurs peuvent s'inscrire / in à l'application.

• Les utilisateurs peuvent créer des publications en appuyant sur le bouton Ajouter, en écrivant à l'intérieur du modal et en appuyant sur Soumettre.

• Les utilisateurs peuvent aimer / contrairement aux publications.

• Les utilisateurs peuvent supprimer leurs propres messages.

• Les utilisateurs peuvent mettre à jour les articles Feed par:

  • En appuyant sur le bouton de rechargement.
  • Effectuer un tracteur.

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/Zopher.git

cd Zopher

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 le service API pour utiliser GraphQL et stocker des données dans Amazon DynammoDB.

 amplify add api

Suivez la configuration ci-dessous.

6. Il est temps de déployer votre projet dans AWS.

 amplify push

Après quelques minutes d'opérations automatisées, l'amplification de la CLI créera un pool d'utilisateurs Amazon Cognito et un pool d'identité pour stocker les utilisateurs Crendentials et une API AWS AppSync GraphQL pour permettre des opérations CRUD entre le client et les serveurs.

Exécution de l'application

1. Installez les dépendances des clients.

 yarn

# or

npm install

2. Lancez l'application React Native dans votre simulateur sous votre répertoire de projet.

 expo start --ios

# or

expo start --android

Tutoriel étape par étape

• Découvrez le processus complet de configuration dans l'histoire moyenne
• Lien vidéo pour la démo ici.