Zopher

React Aplicación nativa de Twitter con AWS Amplify and Expo

Este proyecto integra un front-end nativo React con un back-end de AWS Amplify que tiene autenticación de usuarios (AWS Cognito) y una API GraphQL (AWS APPSYNC) para operaciones CRUD entre el cliente y la base de datos (Amazon DynamodB).

Descripción general de la aplicación

• Los usuarios pueden registrarse/entrar en la aplicación.

• Los usuarios pueden crear publicaciones presionando el botón Agregar, escribiendo dentro del modal y presionando enviar.

• A los usuarios les puede gustar/a diferencia de las publicaciones.

• Los usuarios pueden eliminar sus propias publicaciones.

• Los usuarios pueden actualizar la alimentación de publicaciones por:

  • Presionando el botón de recarga.
  • Realización de un pull-to-refresh.

Requisitos previos

• Expo CLI

  • npm install -g expo-cli

• Cuenta de AWS

• Nodo JS con NPM

• AWS amplifica CLI

  • npm install -g @aws-amplify/cli
  • amplify configure (enlace para un video paso a paso).

Configuración del proyecto

1. Clone este repositorio a su máquina local.

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

cd Zopher

2. Agregue las dependencias de AWS Amplify a su proyecto.

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

# or

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

3. Inicializar el proyecto AWS Amplify.

 amplify init

Siga las mismas instrucciones que a continuación.

4. Configure un grupo de usuarios de Amazon Cognito para almacenar las credenciales de los usuarios.

 amplify add auth

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

5. Agregue el servicio API para usar GraphQL y almacene datos en Amazon Dynammodb.

 amplify add api

Siga la configuración a continuación.

6. Es hora de implementar su proyecto en AWS.

 amplify push

Después de unos minutos de operaciones automatizadas, la CLI Amplify creará un grupo de usuarios de Amazon Cognito y un grupo de identidad para almacenar los usuarios de crendenciales y una AWS APPSYNC GraphQL API para permitir operaciones CRUD entre el cliente y los servidores.

Ejecutando la aplicación

1. Instale las dependencias del cliente.

 yarn

# or

npm install

2. Inicie la aplicación React Native en su simulador en su directorio de proyecto.

 expo start --ios

# or

expo start --android

Tutorial paso a paso

• Mira el proceso de configuración completo en la historia media
• Enlace de video para la demostración aquí.