Implementierung

• Erstellen Sie den Speicher-Service

  Um Bildspeicherfunktionen hinzuzufügen, verwenden wir die Amplify-Speicherkategorie:
  

  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

• Aktualisieren des GraphQL-Schemas

  Öffnen Sie dann amplify/backend/api/notesapp/schema.graphql und aktualisieren Sie es mit dem folgenden Schema:

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

  Stellen Sie sicher, dass Sie die Datei speichern.
  

• Bereitstellung von Speicher-Service und API-Aktualisierungen

  Nun, da der Speicher-Service lokal konfiguriert wurde und wir das GraphQL-Schema aktualisiert haben, können wir die Updates durch Ausführen des Amplify-Push-Befehls bereitstellen:
  

  amplify push --y

• Aktualisieren der React-Anwendung

  Nun, da das Backend aktualisiert wurde, wollen wir die React-App aktualisieren, um die Funktionalität zum Hochladen und Anzeigen von Bildern für eine Notiz hinzuzufügen. Öffnen Sie src/App.js und nehmen Sie die folgenden Änderungen vor.

  a. Fügen Sie zunächst die Speicherklasse zu Ihren Amplify-Importen hinzu:

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

  b. Erstellen Sie in der Hauptfunktion der App eine neue Funktion onChange, um den Bild-Upload abzuwickeln:
  

  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. Aktualisieren Sie die Funktion fetchNotes, um ein Bild abzurufen, wenn ein Bild mit einer Notiz verknüpft ist:
  

  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. Aktualisieren Sie die Funktion createNote, um das Bild zum lokalen Bildarray hinzuzufügen, wenn ein Bild mit der Notiz verknüpft ist:

  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. Fügen Sie dem Formular im Rückgabeblock eine zusätzliche Eingabe hinzu:
  

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

  f. Rendern Sie beim Mapping über das Notizfeld ein Bild, wenn es existiert:
  

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

• Führen Sie die App aus

  Um die Anwendung zu testen, führen Sie den Startbefehl aus:
  

  npm start

  Sie sollten nun in der Lage sein, optional ein Bild für jede Notiz hochzuladen.
  

• Löschen der Ressourcen

  Entfernen einzelner Services

  Um einzelne Services zu entfernen, können Sie den Amplify remove-Befehl verwenden:

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

  Führen Sie dann den Amplify push-Befehl aus:
  

  amplify push

  Löschen des gesamten Projekts

  Um das Projekt und die zugehörigen Ressourcen zu löschen, können Sie den Befehl delete verstärken ausführen:

  amplify delete