Realizza un'applicazione React full-stack

Implementazione

• Creazione del servizio di archiviazione

  Per aggiungere una funzionalità di archiviazione di immagini, utilizzeremo la categoria di archiviazione Amplify. Puoi mantenere le selezioni predefinite per la maggior parte delle opzioni seguenti, ma assicurati di selezionare singolarmente le opzioni di creazione/aggiornamento, lettura ed eliminazione premendo la barra spaziatrice su ciascuna opzione prima di premere Invio per continuare con la richiesta.

  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

  Copia
• Aggiornamento dello schema GraphQL

  Poi, apri amplify/backend/api/notesapp/schema.graphql e aggiornalo con il seguente schema:

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

  Code snippet copied

  Copia

  Ricorda di salvare il file.
  

• Implementazione del servizio di archiviazione e degli aggiornamenti dell'API

  Ora che il servizio di archiviazione è stato configurato in locale e che abbiamo aggiornato lo schema GraphQL, possiamo implementare gli aggiornamenti eseguendo il comando push di Amplify:
  

  amplify push --y

  Code snippet copied

  Copia
• Aggiornamento dell'app React

  Ora che il back-end è stato aggiornato, dobbiamo aggiornare l'app React per aggiungere la funzionalità per caricare e visualizzare le immagini per una nota. Apri src/App.js e fai le seguenti modifiche.

  a. Per prima cosa aggiungi la classe Storage e il componente Image alle importazioni di Amplify:

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

  Code snippet copied

  Copia

  b. Aggiorna la funzione fetchNotes per recuperare un'immagine quando è associata a 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

  Copia

  c. Aggiorna la funzione createNote per aggiungere l'immagine al vettore locale dell'immagine se è associata a una 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

  Copia

  d. Aggiorna la funzione deleteNote per eliminare i file dalla memoria quando le note vengono eliminate:

  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

  Copia

  e. Aggiungi un input aggiuntivo al modulo nel blocco di ritorno:
  

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

  Code snippet copied

  Copia

  f. Durante la mappatura del vettore delle note, effettua il rendering dell'immagine, se esiste:
  

  {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

  Copia

  g. Effettua il commit delle modifiche e invia a GitHub. Quindi attendi il completamento della build per vedere la tua app completa dal vivo!

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

  Code snippet copied

  Copia
• Esecuzione dell'app

  Per testare l'app, esegui il comando di avvio:
  

  npm start

  Code snippet copied

  Copia

  Adesso dovresti essere in grado di caricare in modo facoltativo un'immagine per ogni nota.
  

• Eliminazione delle risorse

  Rimozione dei servizi individuali

  Per rimuovere i servizi individuali, puoi utilizzare i comandi di rimozione Amplify.

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

  Code snippet copied

  Copia

  Poi, premi il comando push di Amplify:
  

  amplify push

  Code snippet copied

  Copia

  Eliminare l'intero progetto

  Per eliminare il progetto e le risorse associate, puoi eseguire il comando di eliminazione di Amplify:

  amplify delete

  Code snippet copied

  Copia