Erste Schritte mit AWS

Erstellen einer React-Anwendung

Erstellen Sie eine einfache Web-Anwendung mit AWS Amplify

Modul 5: Speicher hinzufügen

In diesem Modul fügen Sie Speicherplatz hinzu und haben die Möglichkeit, ein Bild mit den Notizen in Ihrer App zu verknüpfen.

Einführung

Nun, da die Notizen-App funktioniert, wollen wir die Möglichkeit hinzufügen, jeder Notiz ein Bild zuzuordnen. In diesem Modul werden Sie die Amplify CLI und Bibliotheken verwenden, um einen Speicher-Service zu erstellen, der Amazon S3 nutzt. Sie aktualisieren dann das GraphQL-Schema, das Sie im vorherigen Modul erstellt haben, um jeder Notiz ein Bild zuzuordnen. Schließlich werden Sie die React-Anwendung aktualisieren, um das Hochladen, Abrufen und Rendern von Bildern zu ermöglichen.

Lerninhalte

  • Erstellen eines Speicher-Services
  • Aktualisieren eines GraphQL-Schemas
  • Aktualisieren Ihrer React-Anwendung

Wichtige Konzepte

Speicher-Service – Das Speichern und Abfragen von Dateien wie Bildern und Videos ist eine allgemeine Anforderung für die meisten Anwendungen. Eine Möglichkeit, dies zu tun, besteht darin, die Datei Base64 zu kodieren und als String zu senden, um sie in der Datenbank zu speichern. Dies bringt Nachteile mit sich, wie z. B. dass die kodierte Datei größer ist als die ursprüngliche Binärdatei, dass die Operation rechenintensiv ist und dass die Kodierung und Dekodierung komplizierter wird. Eine weitere Option ist ein speziell für die Dateiablage entwickelter und optimierter Service. Speicherdienste wie Amazon S3 existieren, um dies so einfach, performant und kostengünstig wie möglich zu machen.

 Veranschlagte Zeit

10 Minuten

 Verwendete Services

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.

Fazit

Sie haben eine Webanwendung mit AWS Amplify bereitgestellt! Sie haben Ihrer Anwendung eine Authentifizierung hinzugefügt, mit der Benutzer sich anmelden, einloggen und ihr Konto verwalten können. Die Anwendung verfügt außerdem über eine skalierbare GraphQL-API, die mit einer Amazon DynamoDB-Datenbank konfiguriert ist und es Benutzern ermöglicht, Notizen zu erstellen und zu löschen. Sie haben auch einen Dateispeicher mit Amazon S3 hinzugefügt, der es Benutzern ermöglicht, Bilder hochzuladen und in ihrer Anwendung anzusehen.

  • 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

War das Modul hilfreich?

Vielen Dank
Bitte teilen Sie uns mit, was Ihnen gefallen hat.
Es tut uns Leid Sie zu enttäuschen
Ist etwas veraltet, verwirrend oder ungenau? Bitte helfen Sie uns, dieses Tutorial zu verbessern, indem Sie Feedback geben.

Herzlichen Glückwunsch!

Sie haben eine Webanwendung auf AWS erstellt! Als großen nächsten Schritt sollten Sie tiefer in spezifische AWS-Technologien eintauchen und Ihre Anwendung auf die nächste Stufe bringen.