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