Crear una aplicación React de pila completa

Implementación

• Crear el servicio de almacenamiento

  Para agregar la funcionalidad de almacenamiento de imágenes, usaremos la categoría de almacenamiento Amplify. Puede mantener las selecciones predeterminadas para la mayoría de las opciones siguientes, pero asegúrese de seleccionar las opciones de creación/actualización, lectura y eliminación de forma individual pulsando la barra espaciadora de cada una de ellas antes de pulsar Enter (Entrar) para continuar con el mensaje.

  amplify add storage
  
  ? Select from one of the below mentioned services: Content (Images, audio, video, etc.)
  ? Provide a friendly name for your resource that will be used to label this category in the project: imagestorage
  ? 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/update, read, delete
  ? Do you want to add a Lambda Trigger for your S3 Bucket? (y/N) no

  Code snippet copied

  Copiar
• Actualizar el esquema de GraphQL

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

  type Note @model @auth(rules: [ { allow: public } ] ){
    id: ID!
    name: String!
    description: String
    image: String
  }

  Code snippet copied

  Copiar

  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

  Code snippet copied

  Copiar
• 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 la clase de almacenamiento y el componente de imagen a sus importaciones de Amplify:

  import { API, Storage } from 'aws-amplify';
  import {
    Button,
    Flex,
    Heading,
    Image,
    Text,
    TextField,
    View,
    withAuthenticator,
  } from '@aws-amplify/ui-react';

  Code snippet copied

  Copiar

  b. 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 url = await Storage.get(note.name);
          note.image = url;
        }
        return note;
      })
    );
    setNotes(notesFromAPI);
  }

  Code snippet copied

  Copiar

  c. 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(event) {
    event.preventDefault();
    const form = new FormData(event.target);
    const image = form.get("image");
    const data = {
      name: form.get("name"),
      description: form.get("description"),
      image: image.name,
    };
    if (!!data.image) await Storage.put(data.name, image);
    await API.graphql({
      query: createNoteMutation,
      variables: { input: data },
    });
    fetchNotes();
    event.target.reset();
  }
  

  Code snippet copied

  Copiar

  d. Actualice la función deleteNote para eliminar los archivos del almacenamiento cuando se eliminen las notas:

  async function deleteNote({ id, name }) {
    const newNotes = notes.filter((note) => note.id !== id);
    setNotes(newNotes);
    await Storage.remove(name);
    await API.graphql({
      query: deleteNoteMutation,
      variables: { input: { id } },
    });
  }

  Code snippet copied

  Copiar

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

  <View
    name="image"
    as="input"
    type="file"
    style={{ alignSelf: "end" }}
  />

  Code snippet copied

  Copiar

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

  {notes.map((note) => (
    <Flex
      key={note.id || note.name}
      direction="row"
      justifyContent="center"
      alignItems="center"
    >
      <Text as="strong" fontWeight={700}>
        {note.name}
      </Text>
      <Text as="span">{note.description}</Text>
      {note.image && (
        <Image
          src={note.image}
          alt={`visual aid for ${notes.name}`}
          style={{ width: 400 }}
        />
      )}
      <Button variation="link" onClick={() => deleteNote(note)}>
        Delete note
      </Button>
    </Flex>
  ))}

  Code snippet copied

  Copiar

  g. Confirme sus cambios e introdúzcalos en GitHub. ¡Luego espere a que se complete la compilación para ver su aplicación completa en vivo!

  git add .
  git commit -m "Added graphql and storage"
  git push origin main

  Code snippet copied

  Copiar
• Ejecutar la aplicación

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

  npm start

  Code snippet copied

  Copiar

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

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

  Code snippet copied

  Copiar

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

  amplify push

  Code snippet copied

  Copiar

  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

  Code snippet copied

  Copiar