Erste Schritte mit AWS
Erstellen einer React-Anwendung
Erstellen Sie eine einfache Web-Anwendung mit AWS Amplify

API und Datenbank hinzufügen
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:
- Die AppSync-API erstellen
- Eine DynamoDB-Tabelle erstellen
- 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:
- fetchNotes: Diese Funktion verwendet die API-Klasse, um eine Anfrage an die GraphQL-API zu senden und eine Liste von Notizen abzurufen.
- 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.
- 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