Nozioni di base su AWS

Creazione di un'applicazione React

Crea una semplice applicazione Web utilizzando AWS Amplify

Modulo 5: aggiungi storage

In questo modulo, aggiungerai storage e inserirai la possibilità di associare un'immagine alle note nell'app.

Introduzione

Ora che l'app delle note funziona, aggiungiamo la possibilità di associare un'immagine a ogni nota. In questo modulo, utilizzeremo la CLI e le librerie Amplify per creare un servizio di storage 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.

Avrai modo di approfondire i seguenti aspetti

  • Creare un servizio di storage
  • Aggiornare uno schema GraphQL
  • Aggiornare l'app React

Concetti chiave

Servizio di storage: 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 storage specifico creato e ottimizzato per lo storage del file. I servizi di storage come Amazon S3 esistono per rendere il procedimento più facile, performante ed economico possibile.

 Tempo richiesto per il completamento

10 minuti

 Servizi utilizzati

Implementazione

  • Creare il servizio di storage

    Per aggiungere una funzionalità di storage di immagini, utilizzeremo la categoria di storage 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
  • Aggiornare lo schema GraphQL

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

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

    Ricorda di salvare il file.

  • Distribuzione del servizio di storage e degli aggiornamenti dell'API

    Ora che il servizio di storage è stato configurato localmente e che abbiamo aggiornato lo schema GraphQL, possiamo distribuire gli aggiornamenti eseguendo il comando push Amplify:

    amplify push --y
  • Aggiornare l'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. Prima aggiungi la classe di Storage alle tue importazioni di Amplify:

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

    b. Nella funzione principale dell'app, crea una nuova funzione onChange per gestire il caricamento dell'immagine:

    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. 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 image = await Storage.get(note.image);
          note.image = image;
        }
        return note;
      }))
      setNotes(apiData.data.listNotes.items);
    }
    

    d. Aggiorna la funzione createNote per aggiungere l'immagine al vettore locale dell'immagine se è associata a una 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. Aggiungi un input aggiuntivo al modulo nel blocco di ritorno:

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

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

    {
      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>
      ))
    }
    
  • Eseguire l'app

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

    npm start

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

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 lo storage dei file utilizzando Amazon S3 per permettere agli utenti di caricare le immagini e visualizzarle nella loro app.

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

    Poi, premi il comando push di Amplify:

    amplify push

    Eliminare l'intero progetto

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

    amplify delete

Questo modulo è stato utile?

Grazie
Facci sapere cosa ti è piaciuto.
Chiudi
Spiacenti di non esserti stati d'aiuto
C'è qualcosa di obsoleto, ambiguo o approssimativo? Aiutaci a migliorare questo tutorial con il tuo feedback.
Chiudi

Complimenti!

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