Introducción a AWS

Cree una aplicación React

Cree una aplicación Web simple con AWS Amplify

Módulo 5: agregar almacenamiento

En este módulo, agregará almacenamiento y la capacidad de asociar una imagen con las notas en su aplicación.

Introducción

Ahora que tenemos una aplicación de notas en funcionamiento, agreguemos la capacidad de asociar una imagen a cada nota. En este módulo, usará la CLI y las bibliotecas de Amplify para crear un servicio de almacenamiento utilizando Amazon S3. Luego, actualizará el esquema GraphQL que creó en el módulo anterior para asociar una imagen a cada nota. Por último, actualizaremos la aplicación React para permitir la carga, la búsqueda y la recuperación de imágenes.

Lo que aprenderá

  • Crear el servicio de almacenamiento
  • Actualizar un esquema de GraphQL
  • Actualizar su aplicación React

Conceptos clave

Servicio de almacenamiento: el almacenamiento y la consulta de archivos como imágenes y videos es un requisito común para la mayoría de las aplicaciones. Una opción para hacer esto es codificar el archivo con Base64 y enviarlo como cadena para guardarle en la base de datos. Esto viene con desventajas como que el archivo codificado es más grande que el archivo binario original, la operación es costosa en términos informáticos y la codificación y decodificación adecuadas agregan complejidad. Otra opción es crear y optimizar un servicio de almacenamiento específicamente para el almacenamiento de archivos. Los servicios de almacenamiento como Amazon S3 existen para aportar la mayor facilidad, eficiencia y rentabilidad posible.

 Tiempo de realización

10 minutos

 Servicios utilizados

Implementación

  • Crear el servicio de almacenamiento

    Para agregar funcionalidad de almacenamiento a la imagen, usaremos la categoría de almacenamiento Amplify:

    amplify add storage
    
    ? Please select from one of the below mentioned services: Content
    ? Please provide a friendly name for your resource that will be used to label this category in the project: imagestorage
    ? Please provide bucket name: <your-unique-bucket-name>
    ? Who should have access: Auth users only
    ? What kind of access do you want for Authenticated users? create, read, update, delete
    ? Do you want to add a Lambda Trigger for your S3 Bucket? N
  • Actualizar el esquema de GraphQL

    Luego, abra amplify/backend/api/notesapp/schema.graphql y actualícelo con el siguiente esquema:

    type Note @model {
      id: ID!
      name: String!
      description: String
      image: String
    }
    

    Asegúrese de guardar el archivo.

  • Implementar el servicio de almacenamiento y las actualizaciones de API

    Ahora que se ha configurado el servicio de almacenamiento en forma local y que hemos actualizado el esquema GraphQL, podemos implementar las actualizaciones ejecutando el comando de envío de Amplify:

    amplify push --y
  • Actualizar la aplicación React

    Ahora que se ha actualizado el backend, actualicemos la aplicación React para agregar la funcionalidad para cargar y ver imágenes por una nota. Abra src/App.js y realice los siguientes cambios.

    a. Primero, agregue el tipo de almacenamiento para sus importaciones Amplify:

    import { API, Storage } from 'aws-amplify';

    b. En la función de aplicación principal, cree una nueva función onChange para manejar la carga de imagen:

    async function onChange(e) {
      if (!e.target.files[0]) return
      const file = e.target.files[0];
      setFormData({ ...formData, image: file.name });
      await Storage.put(file.name, file);
      fetchNotes();
    }
    

    c. Actualice la función fetchNotes para buscar una imagen si hay una imagen asociada con una nota:

    async function fetchNotes() {
      const apiData = await API.graphql({ query: listNotes });
      const notesFromAPI = apiData.data.listNotes.items;
      await Promise.all(notesFromAPI.map(async note => {
        if (note.image) {
          const image = await Storage.get(note.image);
          note.image = image;
        }
        return note;
      }))
      setNotes(apiData.data.listNotes.items);
    }
    

    d. Actualice la función createNote para agregar la imagen a la matriz de imagen local si se asocia una imagen con la nota:

    async function createNote() {
      if (!formData.name || !formData.description) return;
      await API.graphql({ query: createNoteMutation, variables: { input: formData } });
      if (formData.image) {
        const image = await Storage.get(formData.image);
        formData.image = image;
      }
      setNotes([ ...notes, formData ]);
      setFormData(initialFormState);
    }
    

    e. Agregue una entrada adicional al formulario en el bloque de retorno:

    <input
      type="file"
      onChange={onChange}
    />
    

    f. Cuando se asigna por la matriz de notas, se obtiene una imagen si existe:

    {
      notes.map(note => (
        <div key={note.id || note.name}>
          <h2>{note.name}</h2>
          <p>{note.description}</p>
          <button onClick={() => deleteNote(note)}>Delete note</button>
          {
            note.image && <img src={note.image} style={{width: 400}} />
          }
        </div>
      ))
    }
    
  • Ejecutar la aplicación

    Para probar la aplicación, ejecute el comando de inicio:

    npm start

    Ahora debería tener la opción de cargar una imagen para cada nota.

Conclusión

Ha implementado una aplicación Web con AWS Amplify. Ha agregado autenticación a su aplicación permitiendo que los usuarios se registren, inicien sesión y administren su cuenta. La aplicación también cuenta con una API GraphQL escalable configurada con una base de datos Amazon DynamoDB que permite que los usuarios creen y eliminen notas. También ha agregado almacenamiento de archivos mediante Amazon S3 permitiendo que los usuarios carguen imágenes y las vean en su aplicación.

  • Eliminación de recursos

    Eliminación de servicios individuales

    Para eliminar servicios individuales, puede usar el comando de eliminación de Amplify:

    amplify remove auth
    
    ? Choose the resource you would want to remove: <your-service-name>

    Luego, ejecute el comando de envío de Amplify:

    amplify push

    Eliminación de todo el proyecto

    Para eliminar el proyecto y los recursos asociados, puede ejecutar el comando de eliminación de Amplify:

    amplify delete

¿Este módulo le resultó útil?

Gracias
Indíquenos lo que le gustó.
Lamentamos haberlo decepcionado
¿Hay información desactualizada, confusa o inexacta? Ayúdenos a mejorar este tutorial con sus comentarios.

¡Felicitaciones!

¡Creó con éxito una aplicación Web en AWS! Como paso siguiente, profundice aún más en las tecnologías específicas de AWS y lleve su aplicación al siguiente nivel.