Nozioni di base su AWS

Realizza un'applicazione React full-stack

Crea una semplice applicazione Web utilizzando AWS Amplify

Modulo 5: Aggiunta dello spazio di archiviazione

In questo modulo, aggiungerai l’archiviazione e la possibilità di associare un'immagine alle note nell'applicazione.

Panoramica

Ora che l'app delle note funziona, aggiungiamo la possibilità di associare un'immagine a ogni nota. In questo modulo, utilizzerai l'interfaccia a riga di comando e le librerie Amplify per creare un servizio di archiviazione grazie ad Amazon S3. Successivamente, aggiornerai lo schema GraphQL che hai creato nel modulo precedente per associare un'immagine a ogni nota. Infine, aggiornerai l'app React per abilitare le funzioni per caricare, recuperare ed effettuare il rendering dell'immagine.

Obiettivi

In questo modulo completerai le seguenti operazioni:
  • Creazione di un servizio di archiviazione
  • Aggiornare uno schema GraphQL
  • Aggiornamento dell'app React

Concetti chiave

Servizio di archiviazione: l'archiviazione e le query per i file come le immagini e i video sono un requisito comune per la maggior parte delle applicazioni. Un'opzione per farlo è effettuare la codifica Base64 del file e inviarlo come stringa da salvare nel database. Ma questo procedimento ha anche degli svantaggi, ad esempio il fatto che il file codificato è più grande del binario originale, le operazioni sono costose a livello di codice e i procedimenti di codifica e decodifica adeguati sono ulteriormente complessi. Un'altra opzione è avere un servizio di archiviazione specifico creato e ottimizzato per l’archiviazione del file. I servizi di archiviazione come Amazon S3 esistono per rendere il procedimento più facile, performante ed economico possibile.

 Tempo per il completamento

10 minuti

 Servizi utilizzati

Implementazione

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

    Ricorda di salvare il file.

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

    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);
    }

    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();
    }
    

    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 } },
      });
    }

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

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

    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>
    ))}

    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
  • Per testare l'app, esegui il comando di avvio:

    npm start

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

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

    Poi, premi il comando push di Amplify:

    amplify push

    Eliminare l'intero progetto

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

    amplify delete

Conclusione

Hai distribuito un'applicazione Web utilizzando AWS Amplify! Hai inserito l'autenticazione nella tua app per permettere agli utenti di iscriversi, registrarsi e gestire gli account. L'app ha anche un'API GraphQL scalabile configurata con un database Amazon DynamoDB per permettere agli utenti di creare ed eliminare note. Inoltre, hai aggiunto anche l’archiviazione dei file utilizzando Amazon S3 per permettere agli utenti di caricare le immagini e visualizzarle nella loro applicazioni.

Questa pagina è stata utile?

Congratulazioni!

Hai creato un'applicazione Web in AWS! Il passo successivo è approfondire le tecnologie specifiche di AWS e migliorare ulteriormente la tua applicazione.