Bereitstellen einer Webanwendung auf Amazon Amplify

LEITFADEN FÜR DIE ERSTEN SCHRITTE

Modul 2: Aufbau des Frontends und Anbindung einer API

In diesem Modul lernen Sie, wie Sie eine API zu Ihrem Amplify-Projekt hinzufügen

Einführung

In diesem Modul werden Sie das Frontend für Ihre Webanwendung erstellen und eine Verbindung zu einer API (Application Programming Interface) mit GraphQL API herstellen. GraphQL ist eine Abfragesprache für APIs und hilft Ihnen beim Abrufen und Aktualisieren von Daten in Ihrer Anwendung.

Was Sie lernen werden

  • Erstellen einer einfachen React-Frontend-Anwendung
  • Aufrufen einer GraphQL-API aus Ihrer Anwendung
  • Aufrufen der API über das Frontend Ihrer Anwendung

 Benötigte Zeit

10 Minuten

 Voraussetzungen für das Modul

  • AWS-Konto mit Zugriff auf Administratorebene**
  • Empfohlener Browser: aktuelle Version von Chrome oder Firefox

[**] Innerhalb der letzten 24 Stunden erstellte Konten haben möglicherweise noch keinen Zugriff auf alle für dieses Tutorial erforderlichen Services.

Implementierung

Amplify-Bibliotheken installieren

Sie müssen die Amplify-React-Bibliothek @aws-amplify/ui-react (enthält die React-UI-Komponenten) installieren. 

Führen Sie den folgenden Befehl aus, um sie zu installieren:

npm install @aws-amplify/ui-react

Sie müssen nun das Frontend für Ihre Anwendung erstellen. Öffnen Sie die Datei src/App.js und ersetzen Sie ihren gesamten Inhalt durch den folgenden Code:

import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
import Amplify from 'aws-amplify';
import awsExports from './aws-exports';

Amplify.configure(awsExports);

function App() {
  return (
    <div>
      <h1>Notes App</h1>
      <AmplifySignOut />
    </div>
  );
}

export default withAuthenticator(App);

Anwendung testen

Jetzt können Sie Ihre Anwendung lokal ausführen, um sie zu testen:

npm start

Dadurch wird ein Entwicklungsserver auf http://localhost:3000 gestartet und die Seite in Ihrem Browser geöffnet. Sie werden aufgefordert, sich anzumelden, bevor Sie den Dienst nutzen können. Diese Daten werden in der Congnito-Datenbank Ihres Projekts gespeichert, und nur Sie haben Zugriff darauf. Wenn Sie angemeldet sind, zeigt die App nur eine Überschrift mit Notizen-App und eine Schaltfläche Sign In an, da Sie noch nichts zu ihr hinzugefügt haben. Als nächstes fügen Sie der Anwendung eine API hinzu. Mit ctrl + c können Sie den Server wieder anhalten.

gsg-build-amplify-2

Mit nur wenigen CLI-Befehlen und Codezeilen haben wir eine funktionierende Single-Page-Anwendung mit Login-Flow erstellt. Diese Anwendung ist nur ein Gerüst und die Anmeldung wird noch nicht funktionieren. Fahren Sie in den folgenden Abschnitten mit dem Hinzufügen von Funktionen zu Ihrer Anwendung fort.

Hinzufügen einer GraphQL API mit Amplify

Sie werden nun eine API zur Anwendung hinzufügen. Amplify verwendet AWS AppSync und Amazon DynamoDB, um GraphQL-APIs zu betreiben. AppSync ist ein verwalteter GraphQL-Service, der sich um unsere API kümmert, und Amazon DynamoDB ist eine NoSQL-Datenbank, die die Daten speichert, die unsere API verwenden wird.

Um die API hinzuzufügen, führen Sie amplify add api aus und wählen Sie die folgenden Optionen für die Fragen (Zeilen, die mit einem > Symbol beginnen) - während dieses Schrittes werden Fragen über den Autorisierungsanbieter gestellt, diese werden in einer zukünftigen Anleitung verwendet:

Ein GraphQL-Schema ist eine Darstellung eines Objekts und seiner Felder. Sie müssen Ihr GraphQL-Schema definieren, und Amplify erstellt die erforderliche DynamoDB-Tabelle und konfiguriert GraphQL, um die Lese-, Schreib-, Aktualisierungs- und Löschvorgänge für Sie durchzuführen. Öffnen Sie die Datei amplify/backend/api/amplifyapp/schema.graphql und ersetzen Sie den Inhalt durch den folgenden Text:

amplify add api

? Please select from one of the below mentioned services:
❯ GraphQL
  REST
? Provide API name: amplifyapp
? Choose the default authorization type for the API
  API key
❯ Amazon Cognito User Pool
  IAM
  OpenID Connect
? Do you want to configure advanced settings for the GraphQL API
? Do you want to use the default authentication and security configuration?
❯ Default configuration
  Default configuration with Social Provider (Federation)
  Manual configuration
  I want to learn more.
? How do you want users to be able to sign in?
 ◯ Email
❯◉ Username
 ◯ Phone number
? Do you want to configure advanced settings?
❯ No, I am done.
  Yes, I want to make some additional changes.
? Do you have an annotated GraphQL schema? No
? Choose a schema template:
❯ Single object with fields (e.g., “Todo” with ID, name, description)
  One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”)
  Objects with fine-grained access control (e.g., a project management app with owner-bas
ed authorization)
? Do you want to edit the schema now? Yes
Wenn Sie Ja eingegeben haben, um das Schema jetzt zu bearbeiten, sollte Ihr Standard-Editor die für den nächsten Abschnitt benötigte Datei öffnen.

Erstellen eines GraphQL-Schemas

Ein GraphQL-Schema ist eine Darstellung eines Objekts und seiner Felder. Sie müssen Ihr GraphQL-Schema definieren, und Amplify erstellt die erforderliche DynamoDB-Tabelle und konfiguriert GraphQL, um die Lese-, Schreib-, Aktualisierungs- und Löschvorgänge für Sie durchzuführen. Öffnen Sie die Datei amplify/backend/api/amplifyapp/schema.graphql und ersetzen Sie den Inhalt durch den folgenden Text:

type Note @model @auth(rules: [{ allow: owner }]) {
  id: ID!
  text: String!
}

Dieses Schema definiert einen Notiztyp mit id und Text als Pflichtfelder. Es enthält auch eine Direktive, die Teil der Amplify-GraphQL-Transformationsbibliothek ist:

@model: Ein mit @model annotierter Typ wird in DynamoDB gespeichert und verfügt über CRUDL-Vorgänge (create, read, update, delete, list), die automatisch für ihn erstellt werden.

@auth: Ein mit @auth annotierter Typ ist durch eine Reihe von Autorisierungsregeln geschützt. Hier verwenden wir die Berechtigung des Eigentümers, um sicherzustellen, dass nur der Eigentümer einer Notiz darauf zugreifen und sie ändern kann.

Anwendung bereitstellen

Sie sind nun bereit, Ihre Amplify-Webanwendung zu verteilen, indem Sie amplify push ausführen. Dadurch wird Ihre Anwendung für Sie auf Ihr AWS-Konto hochgeladen, und Amplify zeigt Ihnen die Änderungen an, die bereitgestellt werden, und fordert Sie auf, die Bereitstellung zu bestätigen:

✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev
    
┌──────────┬────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name      │ Operation │ Provider plugin   │
├──────────┼────────────────────┼───────────┼───────────────────┤
│ Auth     │ amplifyapp6177aede │ Create    │ awscloudformation │
├──────────┼────────────────────┼───────────┼───────────────────┤
│ Api      │ amplifyapp         │ Create    │ awscloudformation │
└──────────┴────────────────────┴───────────┴───────────────────┘
? Are you sure you want to continue? Yes

Nach der Bestätigung wählen Sie die Standardwerte für die Folgefragen aus, wenn Sie dazu aufgefordert werden:

? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2

Die Bereitstellung wird einige Minuten dauern, und Sie werden sehen, dass eine Liste von Ressourcen für Sie erstellt wird. Amplify hat die folgenden Maßnahmen ergriffen:

  • Erstellung einer GraphQL-API, die von AWS AppSync unterstützt wird, mit allen drei Arten von GraphQL-Vorgängen (Abfragen, Mutationen und Abonnements).
  • Generierung von Code im Ordner src/graphql/ unter Verwendung der GraphQL-Operationen, die zum Erstellen, Abrufen und Aktualisieren von Notizen erforderlich sind.
  • Erstellung einer DynamoDB-Tabelle zum Speichern aller mit unserer Anwendung erstellten Notizen.

Frontend aktualisieren, um API zu verwenden

Um die neue API zu verwenden, die Sie gerade bereitgestellt haben, aktualisieren Sie die Datei src/App.js, indem Sie den Inhalt durch den folgenden Code ersetzen:

import { Component } from 'react';
import Amplify, { API, graphqlOperation } from 'aws-amplify';
import { createNote, deleteNote } from './graphql/mutations';
import { listNotes } from './graphql/queries';

import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
import awsExports from './aws-exports';

Amplify.configure(awsExports);

class AddNote extends Component {
  constructor(props) {
    super(props);
    this.state = { text: '' };
  }

  handleChange = (event) => {
    this.setState({ text: event.target.value });
  }

  handleClick = () => {
    this.props.addNote(this.state);
    this.setState({ text: '' });
  }

  render() {
    return (
      <div style={styles.form}>
        <input
          value={this.state.text}
          onChange={this.handleChange}
          placeholder="New Note"
          style={styles.input}
        />
        <button onClick={this.handleClick} style={styles.addButton}>Add Note</button>
      </div>
    );
  }
}

class NotesList extends Component {
  render() {
    return (
      <div>
        {this.props.notes.map(note =>
          <div key={note.id} style={styles.note}>
            <p>{note.text}</p>
            <button onClick={() => { this.props.deleteNote(note) }} style={styles.deleteButton}>x</button>
          </div>
        )}
      </div>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { notes: [] };
  }

  async componentDidMount() {
    var result = await API.graphql(graphqlOperation(listNotes));
    this.setState({ notes: result.data.listNotes.items });
  }

  deleteNote = async (note) => {
    const id = {
      id: note.id
    };
    await API.graphql(graphqlOperation(deleteNote, { input: id }));
    this.setState({ notes: this.state.notes.filter(item => item.id !== note.id) });
  }

  addNote = async (note) => {
    var result = await API.graphql(graphqlOperation(createNote, { input: note }));
    this.state.notes.push(result.data.createNote);
    this.setState({ notes: this.state.notes });
  }

  render() {
    return (
      <div style={styles.container}>
        <h1>Notes App</h1>
        <AddNote addNote={this.addNote} />
        <NotesList notes={this.state.notes} deleteNote={this.deleteNote} />
        <AmplifySignOut />
      </div>
    );
  }
}

export default withAuthenticator(App);

const styles = {
  container: { width: 480, margin: '0 auto', padding: 20 },
  form: { display: 'flex', marginBottom: 15 },
  input: { flexGrow: 2, border: 'none', backgroundColor: '#ddd', padding: 12, fontSize: 18 },
  addButton: { backgroundColor: 'black', color: 'white', outline: 'none', padding: 12, fontSize: 18 },
  note: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 22, marginBottom: 15 },
  deleteButton: { fontSize: 18, fontWeight: 'bold' }
}

Sie haben jetzt eine funktionierende Anwendung. Die Anwendung kann nun mit der API kommunizieren, um Notizen zu speichern, zu aktualisieren oder zu löschen. Um es lokal zu testen, führen Sie zur Bestätigung erneut npm start aus.

gsg-build-amplify-3

Zusammenfassung

In diesem Modul haben Sie gelernt, wie Sie eine React-Frontend-Anwendung erstellen, ihr eine API hinzufügen und die API in Ihrem AWS-Konto bereitstellen. Im nächsten Modul lernen Sie, wie Sie das Frontend aus einem GitHub-Repository bereitstellen und eine CI/CD-Pipeline einrichten, um zukünftige Änderungen automatisch bereitzustellen.

Nächstes Thema: Einsatz automatisieren

Lassen Sie uns wissen, wie wir abgeschnitten haben.

Vielen Dank für Ihr Feedback
Wir freuen uns, dass diese Seite Ihnen geholfen hat. Würden Sie uns weitere Details mitteilen, damit wir uns weiter verbessern können?
Schließen
Vielen Dank für Ihr Feedback
Es tut uns leid, dass diese Seite Ihnen nicht weiterhelfen konnte. Würden Sie uns weitere Details mitteilen, damit wir uns weiter verbessern können?
Schließen