Plush

Felpa

Plush es una aplicación móvil completa para compartir imágenes. Utiliza Expo y React Native para la parte delantera, AWS se amplifica como el servicio de fondo, y el servicio API está construido con GraphQL.

Manifestación

Video de demostración de las funcionalidades de la aplicación aquí.

Descripción general

Después de registrarse/iniciar sesión, los usuarios pueden realizar lo siguiente:

• Dé acceso a su biblioteca de dispositivos móviles presionando el icono de la cámara en el encabezado.
• Sube imágenes al feed.
• Me gusta y a diferencia de las imágenes (de otros usuarios y las suyas).
• Actualice la alimentación con refresco o presionando el botón de recarga en el encabezado.
• Flajera Contenido inapropiado presionando el icono de opciones en el pie de página de la tarjeta de imagen.
• Retire sus propias imágenes del feed. También disponible en el icono de opciones.

Flujo de aplicaciones

• Los usuarios se autentican utilizando el flujo de autenticación de AWS de AWS fuera de la caja.

• Usuarios un redirigido a la única pantalla de la aplicación: el feed.

• Cuando un usuario sube una imagen:

  • Una solicitud PUT con RNS3 almacenará el archivo en un cubo AWS-S3.
  • Una mutación Apollo GraphQL almacenará un registro en una tabla de imágenes DynamoDB.

• Cuando un usuario marca el contenido inapropiado:

  • Una mutación GraphQL de cliente AppSync almacenará un registro en una tabla de bandera de Dynamodb.
  • El front-end ocultará esa imagen de la alimentación del usuario.

• Cuando a un usuario le gusta/no me gusta una imagen:

  • Una mutación GraphQL de cliente AppSync creará una instancia similar en una tabla DynamodB como.
  • Una mutación GraphQL del cliente AppSync lo destruirá como una instancia de la tabla DynamodB como.

• Cuando un usuario elimina una imagen:

  • Una solicitud de eliminación con la API de almacenamiento de Amplify eliminará el archivo asociado del cubo AWS-S3.
  • Una mutación Apollo GraphQL destruirá el registro de la tabla de imágenes DynamoDB.
  • La alimentación se actualiza para mostrar las imágenes actuales.

• Cuando un usuario actualiza el feed:

  • Una consulta GraphQL de Cliente AppSync solicitará todas las imágenes actuales almacenadas en la tabla de imágenes Dynamodb.

Requisitos previos

Para ejecutar esta aplicación en su máquina local, necesita las siguientes herramientas:

• 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 back-end

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

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

cd plush

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

4. Siga las mismas instrucciones que a continuación.

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

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

7. Agregue la API GraphQL a su proyecto.

 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

• El esquema para este proyecto, ubicado en SRC/Graphql/Schema.Graphql, se ve así:

 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
}

• La imagen, como, y la bandera, son todas las tablas DynamodB utilizadas para almacenar los datos de la entrada de los usuarios.

8. ¿Es hora de implementar su proyecto en la nube?

 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 e Identity Pool, un cubo de Amazon S3 para almacenar imágenes de cada usuarios y una AWS Appsync GraphQL API que usa Amazon Dynamodb para almacenar metadatos sobre las imágenes (es decir, nombre de balde, gustos, banderas, propietario, fecha de creación ...).

Ejecutando la aplicación

1. Instale las dependencias del cliente.

 yarn

# or

npm install

2. Necesitará sus credenciales de AWS IAM para acceder a su cubo S3.

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

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

• Guarde los cambios.

3. Ahora está listo para lanzar y probar la aplicación.

 expo start --ios

# or

expo start --android

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

5. Agregar y mostrar imágenes.

• Si la aplicación se ejecuta correctamente, debería poder presionar el icono de la cámara, 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.

• Puede gustar/a diferencia de y marcar imágenes de otros usuarios, y eliminar sus propias fotos.

¿Quieres contribuir?

• Si te gusta este proyecto, ayúdame a crecer y mejorarlo enviando solicitudes de extracción?