Erste Schritte mit AWS

Erstellen einer React-Anwendung

Erstellen Sie eine einfache Web-Anwendung mit AWS Amplify

Modul 4: Hinzufügen einer GraphQL-API und einer Datenbank

In diesem Modul verwenden Sie die Amplify-CLI und -Bibliotheken zur Konfiguration und zum Hinzufügen einer GraphQL-API zu Ihrer Anwendung.

Einführung

Nachdem wir die Anwendung mit Authentifizierung erstellt und konfiguriert haben, fügen wir nun eine API hinzu.

In diesem Modul fügen Sie Ihrer Amplify-Anwendung unter Verwendung der Amplify-CLI und -Bibliotheken eine API hinzu. Die API, die Sie erstellen werden, ist eine GraphQL-API, die AWS AppSync (einen verwalteten GraphQL-Service) nutzt, der von Amazon DynamoDB (einer NoSQL-Datenbank) unterstützt wird. (Eine Einführung in GraphQL finden Sie auf dieser Seite.)

Die App, die wir bauen werden, wird eine Notiz-App sein, mit der Benutzer Notizen erstellen, löschen und auflisten können. Dieses Beispiel gibt Ihnen eine gute Idee, wie Sie viele beliebte Arten von CRUD+L-Anwendungen (Erstellen, Lesen, Aktualisieren, Löschen und Auflisten) erstellen können.

Lerninhalte

  • Erstellen und Bereitstellen einer GraphQL-API
  • Schreiben von Front-End-Code zur Interaktion mit der API

Wichtige Konzepte

API – Stellt eine Programmierschnittstelle zur Verfügung, die Kommunikation und Interaktionen zwischen mehreren Software-Vermittlern ermöglicht.

GraphQL – Eine Abfragesprache und serverseitige API-Implementierung auf der Grundlage einer typisierten Darstellung Ihrer Anwendung. Diese API-Darstellung wird unter Verwendung eines Schemas deklariert, das auf dem GraphQL-Typsystem basiert. (Weitere Informationen über GraphQL finden Sie auf dieser Seite.)

 Veranschlagte Zeit

15 Minuten

 Verwendete Services

Implementierung

  • a. Fügen Sie eine GraphQL-API zu Ihrer Anwendung hinzu, indem Sie den folgenden Befehl vom Stammverzeichnis Ihres Anwendungsverzeichnisses aus ausführen:

    amplify add api
    
    ? Please select from one of the below mentioned services: GraphQL
    ? Provide API name: notesapp
    ? Choose the default authorization type for the API: API Key
    ? Enter a description for the API key: demo
    ? After how many days from now the API key should expire: 7 (or your preferred expiration)
    ? Do you want to configure advanced settings for the GraphQL API: No, I am done.
    ? Do you have an annotated GraphQL schema?  No
    ? Do you want a guided schema creation?  Yes
    ? What best describes your project: Single object with fields
    ? Do you want to edit the schema now? Yes

    b. Öffnen Sie das GraphQL-Schema in Ihrem Texteditor: amplify/backend/api/myapi/schema.graphql.

    Aktualisieren Sie die Datei mit dem folgenden Schema:

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

    c. Speichern Sie die Datei. Gehen Sie dann zurück zur Befehlszeile und drücken Sie die Eingabetaste, um den API-Konfigurationsschritt abzuschließen.

  • Nun, da die API lokal konfiguriert wurde, ist es an der Zeit, sie bereitzustellen. Führen Sie dazu den Amplify push-Befehl aus:

    amplify push --y

    Dies wird 3 Dinge bewirken:

    1. Die AppSync-API erstellen
    2. Eine DynamoDB-Tabelle erstellen
    3. Erstellen Sie die lokalen GraphQL-Operationen in einem Ordner unter src/graphql, die Sie zur Abfrage der API verwenden können

    Um die GraphQL-API jederzeit in Ihrem Konto anzuzeigen, führen Sie den folgenden Befehl aus:

    amplify console api
    
    > Choose GraphQL
    

    Um die Amplify-Anwendung jederzeit in Ihrem Konto anzuzeigen, führen Sie den folgenden Befehl aus:

    amplify console
  • Nun, da das Backend bereitgestellt wurde, lassen Sie uns etwas Code schreiben, damit Benutzer Notizen erstellen, auflisten und löschen können.

    Aktualisieren Sie src/App.js mit dem folgenden Code:

    import React, { useState, useEffect } from 'react';
    import './App.css';
    import { API } from 'aws-amplify';
    import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
    import { listNotes } from './graphql/queries';
    import { createNote as createNoteMutation, deleteNote as deleteNoteMutation } from './graphql/mutations';
    
    const initialFormState = { name: '', description: '' }
    
    function App() {
      const [notes, setNotes] = useState([]);
      const [formData, setFormData] = useState(initialFormState);
    
      useEffect(() => {
        fetchNotes();
      }, []);
    
      async function fetchNotes() {
        const apiData = await API.graphql({ query: listNotes });
        setNotes(apiData.data.listNotes.items);
      }
    
      async function createNote() {
        if (!formData.name || !formData.description) return;
        await API.graphql({ query: createNoteMutation, variables: { input: formData } });
        setNotes([ ...notes, formData ]);
        setFormData(initialFormState);
      }
    
      async function deleteNote({ id }) {
        const newNotesArray = notes.filter(note => note.id !== id);
        setNotes(newNotesArray);
        await API.graphql({ query: deleteNoteMutation, variables: { input: { id } }});
      }
    
      return (
        <div className="App">
          <h1>My Notes App</h1>
          <input
            onChange={e => setFormData({ ...formData, 'name': e.target.value})}
            placeholder="Note name"
            value={formData.name}
          />
          <input
            onChange={e => setFormData({ ...formData, 'description': e.target.value})}
            placeholder="Note description"
            value={formData.description}
          />
          <button onClick={createNote}>Create Note</button>
          <div style={{marginBottom: 30}}>
            {
              notes.map(note => (
                <div key={note.id || note.name}>
                  <h2>{note.name}</h2>
                  <p>{note.description}</p>
                  <button onClick={() => deleteNote(note)}>Delete note</button>
                </div>
              ))
            }
          </div>
          <AmplifySignOut />
        </div>
      );
    }
    
    export default withAuthenticator(App);
    

    In unserer App gibt es 3 Hauptfunktionen:

    1. fetchNotes: Diese Funktion verwendet die API-Klasse, um eine Anfrage an die GraphQL-API zu senden und eine Liste von Notizen abzurufen.
    2. createNote: Diese Funktion verwendet auch die API-Klasse, um eine Mutation an die GraphQL-API zu senden. Der Hauptunterschied besteht darin, dass wir in dieser Funktion die Variablen übergeben, die für eine GraphQL-Mutation benötigt werden, so dass wir eine neue Notiz mit den Formulardaten erstellen können.
    3. deleteNote: Wie createNote sendet diese Funktion eine GraphQL-Mutation zusammen mit einigen Variablen, aber anstatt eine Notiz zu erstellen, löschen wir eine Notiz.
  • Um die Anwendung zu testen, führen Sie den Startbefehl aus:

    npm start

Fazit

Sie haben jetzt eine Notiz-App erstellt! Mit AWS Amplify haben Sie eine GraphQL-API hinzugefügt und die Erstellungs-, Lese- und Löschfunktionen in Ihrer Anwendung konfiguriert. Im nächsten Modul werden wir Ihrer App einen Speicher-Service hinzufügen.

War das Modul hilfreich?

Speicher hinzufügen