Erstellen einer Full-Stack-React-Anwendung

Implementierung

• Erstellen des Speicher-Service

  Um die Speicherfunktion für Bilder hinzuzufügen, verwenden wir die Amplify-Speicherkategorie. Sie können die Standardeinstellungen für die meisten der unten aufgeführten Optionen beibehalten. Achten Sie jedoch darauf, die Optionen Erstellen/Aktualisieren, Lesen und Löschen einzeln auszuwählen, indem Sie jeweils die Leertaste drücken, bevor Sie die Eingabetaste drücken, um mit der Eingabeaufforderung fortzufahren.

  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

  Code snippet copied

  Kopieren
• Aktualisieren des GraphQL-Schemas

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

  type Note @model @auth(rules: [ { allow: public } ] ){
    id: ID!
    name: String!
    description: String
    image: String
  }

  Code snippet copied

  Kopieren

  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 Aktualisierungen durch Ausführen des Amplify-Push-Befehls bereitstellen:
  

  amplify push --y

  Code snippet copied

  Kopieren
• 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 und die Bild-Komponente zu Ihren Amplify-Importen hinzu:

  import { API, Storage } from 'aws-amplify';
  import {
    Button,
    Flex,
    Heading,
    Image,
    Text,
    TextField,
    View,
    withAuthenticator,
  } from '@aws-amplify/ui-react';

  Code snippet copied

  Kopieren

  b. Aktualisieren Sie die Funktion fetchNotes, um ein Bild abzurufen, wenn einer Notiz ein Bild zugeordnet 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 url = await Storage.get(note.name);
          note.image = url;
        }
        return note;
      })
    );
    setNotes(notesFromAPI);
  }

  Code snippet copied

  Kopieren

  c. Aktualisieren Sie die Funktion createNote, um das Bild zum lokalen Image-Array hinzuzufügen, wenn der Notiz ein Bild zugeordnet ist:

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

  Code snippet copied

  Kopieren

  d. Aktualisieren Sie die Funktion deleteNote, um beim Löschen von Notizen Dateien aus dem Speicher zu löschen:

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

  Code snippet copied

  Kopieren

  e. Fügen Sie dem Formular im Rückgabeblock eine zusätzliche Eingabe hinzu:
  

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

  Code snippet copied

  Kopieren

  f. Rendern Sie beim Zuordnen über das Notizen-Array ein Bild, falls vorhanden:
  

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

  Code snippet copied

  Kopieren

  g. Übernehmen Sie Ihre Änderungen und übertragen Sie sie auf GitHub. Warten Sie dann, bis die Erstellung abgeschlossen ist, um Ihre vollständige Anwendung live zu sehen!

  git add .
  git commit -m "Added graphql and storage"
  git push origin main

  Code snippet copied

  Kopieren
• Anwendung ausführen

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

  npm start

  Code snippet copied

  Kopieren

  Sie sollten nun in der Lage sein, optional für jede Notiz ein Bild 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>

  Code snippet copied

  Kopieren

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

  amplify push

  Code snippet copied

  Kopieren

  Löschen des gesamten Projekts

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

  amplify delete

  Code snippet copied

  Kopieren