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

  • Erstellen einer GraphQL-API und -Datenbank

    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.

  • Bereitstellen der API

    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
  • Schreiben von Front-End-Code zur Interaktion mit der API

    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.
  • Führen Sie die App aus

    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?

Vielen Dank
Bitte teilen Sie uns mit, was Ihnen gefallen hat.
Schließen
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.
Schließen

Speicher hinzufügen