react native appsync s3

React nativo AppSync S3

Esta aplicación permite al usuario hacer lo siguiente:

• Regístrese/In a la plataforma.
• Acceso a la biblioteca de dispositivos utilizando Expo.
• Sube fotos a AWS S3.
• Almacene los registros de imágenes en Amazon Dynamodb.
• Muestre las imágenes en la plataforma.

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/react-native-appsync-s3.git

cd react-native-appsync-s3

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 un cubo de Amazon S3 para almacenar imágenes.

 amplify add storage

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

6. Agregue la AWS APPSYNC API para usar GraphQL y almacenar datos en 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. Implemente su proyecto en el AWS.

 amplify push

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

El AWS Amplify CLI creará un grupo de usuarios de Amazon Cognito y un grupo de identidad, un cubo de Amazon S3 para almacenar fotos de cada usuarios y una AWS APPSYNC GraphQL API que utiliza Amazon Dynamodb para almacenar datos.

Ejecutando la aplicación

1. Instale las dependencias del cliente.

 yarn

# or

npm install

2. Necesitará sus credenciales de AWS IAM antes de ejecutar la aplicación.

• Copie su acceso y claves secretas en el archivo src/myKeys.js de su proyecto.

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

• Guardar cambios.

3. Inicie la aplicación React Native en su simulador desde el terminal en su directorio de proyecto.

 expo start --ios

# or

expo start --android

3. Crear un nuevo usuario.

• La aplicación utiliza el componente de orden superior con Authenticator (HOC) de AWS Amplify para realizar el flujo de autenticación: Regístrese, confirme Registrarse e Iniciar sesión en los usuarios.

4. Agregar y mostrar imágenes.

• Si la aplicación se ejecuta correctamente, debería poder presionar el botón Agregar, permitir el acceso a la biblioteca del dispositivo y seleccionar una imagen de su dispositivo. Esto cargará la imagen en S3 y luego hará una llamada GraphQL para ingresar el registro en DynamoDB.

• Luego puede presionar el botón Actualizar para mostrar la imagen en la pantalla.

Contribuir

• Este proyecto necesita mucha mejora. ¿Ayúdame a crecer y mejorarlo?