Erstellen Sie mithilfe von AWS Amplify eine serverlose mobile React Native-App

Erstellt von Deekshitulu Pentakota (AWS)

Übersicht

Dieses Muster zeigt, wie Sie mithilfe von AWS Amplify und den folgenden AWS-Services ein serverloses Backend für eine mobile React Native-App erstellen:

• AWS AppSync

• Amazon Cognito

• Amazon-DynamoDB

Nachdem Sie das Backend der App mithilfe von Amplify konfiguriert und bereitgestellt haben, authentifiziert Amazon Cognito App-Benutzer und autorisiert sie für den Zugriff auf die App. AWS interagiert AppSync dann mit der Frontend-App und mit einer DynamoDB-Backend-Tabelle, um Daten zu erstellen und abzurufen.

Anmerkung

Dieses Muster verwendet eine einfache App „ToDoList“ als Beispiel, aber Sie können ein ähnliches Verfahren verwenden, um jede beliebige mobile React Native-App zu erstellen.

Voraussetzungen und Einschränkungen

Voraussetzungen

• Ein aktives AWS-Konto

• Amplify Command Line Interface (Amplify CLI), installiert und konfiguriert

• XCode (jede Version)

• Microsoft Visual Studio (jede Version, jeder Code-Editor, jeder Texteditor)

• Vertrautheit mit Amplify

• Vertrautheit mit Amazon Cognito

• Vertrautheit mit AWS AppSync

• Vertrautheit mit DynamoDB

• Vertrautheit mit Node.js

• Vertrautheit mit npm

• Vertrautheit mit React und React Native

• Vertrautheit mit JavaScript und ECMAScript 6 () ES6

• Vertrautheit mit GraphQL

Architektur

Das folgende Diagramm zeigt eine Beispielarchitektur für die Ausführung des Backends einer mobilen React Native-App in der AWS-Cloud:

Das Diagramm zeigt die folgende Architektur:

1. Amazon Cognito authentifiziert App-Benutzer und autorisiert sie, auf die App zuzugreifen.

2. Um Daten zu erstellen und abzurufen, AppSync verwendet AWS eine GraphQL-API, um mit der Frontend-App und einer Backend-DynamoDB-Tabelle zu interagieren.

Tools

AWS-Services

• AWS Amplify ist eine Reihe von speziell entwickelten Tools und Funktionen, mit denen Frontend-Web- und Mobilentwickler schnell Full-Stack-Anwendungen auf AWS erstellen können.

• AWS AppSync bietet eine skalierbare GraphQL-Schnittstelle, mit der Anwendungsentwickler Daten aus mehreren Quellen kombinieren können, darunter Amazon DynamoDB, AWS Lambda und HTTP. APIs

• Amazon Cognito bietet Authentifizierung, Autorisierung und Benutzerverwaltung für Web- und mobile Apps.

• Amazon DynamoDB ist ein vollständig verwalteter NoSQL-Datenbank-Service, der schnelle und planbare Leistung mit nahtloser Skalierbarkeit bereitstellt.

Code

Der Code für die Beispielanwendung, die in diesem Muster verwendet wird, ist im ios-todo-app Repository GitHub aws-amplify-react-native- verfügbar. Um die Beispieldateien zu verwenden, folgen Sie den Anweisungen im Abschnitt Epics dieses Musters.

Epen

Erstelle deine React Native-App und führe sie aus

Aufgabe	Beschreibung	Erforderliche Fähigkeiten
Richten Sie eine React Native-Entwicklungsumgebung ein.	Anweisungen finden Sie unter Einrichten der Entwicklungsumgebung in der React Native-Dokumentation.	App-Developer
Erstellen Sie die mobile ToDoList React Native-App und führen Sie sie im iOS-Simulator aus.	Erstellen Sie ein neues React Native-Projektverzeichnis für mobile Apps in Ihrer lokalen Umgebung, indem Sie den folgenden Befehl in einem neuen Terminalfenster ausführen: npx react-native init ToDoListAmplify Navigieren Sie zum Stammverzeichnis des Projekts, indem Sie den folgenden Befehl ausführen: cd ToDoListAmplify Führen Sie die App aus, indem Sie den folgenden Befehl ausführen: npx react-native run-ios	App-Developer

Erstelle deine React Native-App und führe sie aus

Aufgabe	Beschreibung	Erforderliche Fähigkeiten
Richten Sie eine React Native-Entwicklungsumgebung ein.	Anweisungen finden Sie unter Einrichten der Entwicklungsumgebung in der React Native-Dokumentation.	App-Developer
Erstellen Sie die mobile ToDoList React Native-App und führen Sie sie im iOS-Simulator aus.	Erstellen Sie ein neues React Native-Projektverzeichnis für mobile Apps in Ihrer lokalen Umgebung, indem Sie den folgenden Befehl in einem neuen Terminalfenster ausführen: npx react-native init ToDoListAmplify Navigieren Sie zum Stammverzeichnis des Projekts, indem Sie den folgenden Befehl ausführen: cd ToDoListAmplify Führen Sie die App aus, indem Sie den folgenden Befehl ausführen: npx react-native run-ios	App-Developer

Initialisieren Sie eine neue Backend-Umgebung für die App

Aufgabe	Beschreibung	Erforderliche Fähigkeiten
Erstellen Sie die Backend-Dienste, die zur Unterstützung der App in Amplify erforderlich sind.	Führen Sie in Ihrer lokalen Umgebung den folgenden Befehl im Stammverzeichnis des Projekts aus () ToDoListAmplifyaus: amplify init Es wird eine Aufforderung angezeigt, in der Sie aufgefordert werden, Informationen zur App anzugeben. Geben Sie die erforderlichen Informationen basierend auf Ihrem Anwendungsfall ein. Drücken Sie anschließend die Eingabetaste. Wenden Sie für das in diesem Muster verwendete ToDoList App-Setup die folgende Beispielkonfiguration an. Beispiel für die Konfiguration der React Native Amplify App ? Name: ToDoListAmplify ? Environment: dev ? Default editor: Visual Studio Code ? App type: javascript ? Javascript framework: react-native ? Source Directory Path: src ? Distribution Directory Path: / ? Build Command: npm run-script build ? Start Command: npm run-script start ? Select the authentication method you want to use: AWS profile ? Please choose the profile you want to use: default Weitere Informationen finden Sie unter Erstellen eines neuen Amplify-Backends in der Amplify Dev Center-Dokumentation. Anmerkung Der amplify init Befehl stellt mithilfe von AWS die folgenden Ressourcen bereit CloudFormation:  AWS Identity and Access Management (IAM) -Rollen für authentifizierte und nicht authentifizierte Benutzer (Auth Role und Unauth Role) Ein Amazon Simple Storage Service (Amazon S3) -Bucket für die Bereitstellung (für die Beispiel-App dieses Musters, Amplify-Meta.json) Eine Backend-Umgebung in Amplify Hosting	App-Developer

Initialisieren Sie eine neue Backend-Umgebung für die App

Aufgabe	Beschreibung	Erforderliche Fähigkeiten
Erstellen Sie die Backend-Dienste, die zur Unterstützung der App in Amplify erforderlich sind.	Führen Sie in Ihrer lokalen Umgebung den folgenden Befehl im Stammverzeichnis des Projekts aus () ToDoListAmplifyaus: amplify init Es wird eine Aufforderung angezeigt, in der Sie aufgefordert werden, Informationen zur App anzugeben. Geben Sie die erforderlichen Informationen basierend auf Ihrem Anwendungsfall ein. Drücken Sie anschließend die Eingabetaste. Wenden Sie für das in diesem Muster verwendete ToDoList App-Setup die folgende Beispielkonfiguration an. Beispiel für die Konfiguration der React Native Amplify App ? Name: ToDoListAmplify ? Environment: dev ? Default editor: Visual Studio Code ? App type: javascript ? Javascript framework: react-native ? Source Directory Path: src ? Distribution Directory Path: / ? Build Command: npm run-script build ? Start Command: npm run-script start ? Select the authentication method you want to use: AWS profile ? Please choose the profile you want to use: default Weitere Informationen finden Sie unter Erstellen eines neuen Amplify-Backends in der Amplify Dev Center-Dokumentation. Anmerkung Der amplify init Befehl stellt mithilfe von AWS die folgenden Ressourcen bereit CloudFormation:  AWS Identity and Access Management (IAM) -Rollen für authentifizierte und nicht authentifizierte Benutzer (Auth Role und Unauth Role) Ein Amazon Simple Storage Service (Amazon S3) -Bucket für die Bereitstellung (für die Beispiel-App dieses Musters, Amplify-Meta.json) Eine Backend-Umgebung in Amplify Hosting	App-Developer

Fügen Sie Ihrer Amplify React Native-App die Amazon Cognito Cognito-Authentifizierung hinzu

Aufgabe	Beschreibung	Erforderliche Fähigkeiten
Erstellen Sie einen Amazon Cognito Cognito-Authentifizierungsservice.	Führen Sie in Ihrer lokalen Umgebung den folgenden Befehl im Stammverzeichnis des Projekts aus (ToDoListAmplify) aus: amplify add auth Es wird eine Aufforderung angezeigt, in der Sie aufgefordert werden, Informationen zu den Konfigurationseinstellungen des Authentifizierungsdienstes einzugeben. Geben Sie die erforderlichen Informationen basierend auf Ihrem Anwendungsfall ein. Drücken Sie anschließend die Eingabetaste. Wenden Sie für das in diesem Muster verwendete ToDoList App-Setup die folgende Beispielkonfiguration an. Beispiel für Konfigurationseinstellungen für den Authentifizierungsdienst ? Do you want to use the default authentication and security configuration? \ Default configuration ? How do you want users to be able to sign in? \ Username ? Do you want to configure advanced settings? \ No, I am done Anmerkung Der amplify add auth Befehl erstellt die erforderlichen Ordner, Dateien und Abhängigkeitsdateien in einem lokalen Ordner (Amplify) im Stammverzeichnis des Projekts. Für das in diesem Muster verwendete ToDoList App-Setup wird die Datei aws-exports.js zu diesem Zweck erstellt.	App-Developer
Stellen Sie den Amazon Cognito-Service in der AWS-Cloud bereit.	Führen Sie im Stammverzeichnis des Projekts den folgenden Amplify CLI-Befehl aus: amplify push Eine Aufforderung zur Bestätigung der Bereitstellung wird angezeigt. Geben Sie Ja ein. Drücken Sie anschließend die Eingabetaste. Anmerkung Um die in Ihrem Projekt bereitgestellten Dienste zu sehen, rufen Sie die Amplify-Konsole auf, indem Sie den folgenden Befehl ausführen: amplify console	App-Developer
Installieren Sie die erforderlichen Amplify-Bibliotheken für React Native und die CocoaPods Abhängigkeiten für iOS.	Installieren Sie die erforderlichen Amplify-Open-Source-Clientbibliotheken, indem Sie den folgenden Befehl im Stammverzeichnis des Projekts ausführen: npm install aws-amplify aws-amplify-react-native \ amazon-cognito-identity-js @react-native-community/netinfo \ @react-native-async-storage/async-storage Installieren Sie die erforderlichen CocoaPods Abhängigkeiten für iOS, indem Sie den folgenden Befehl ausführen: npx pod-install	App-Developer
Importieren und konfigurieren Sie den Amplify-Dienst.	Importieren und laden Sie in der Einstiegspunktdatei der App (z. B. App.js) die Konfigurationsdatei des Amplify-Dienstes, indem Sie die folgenden Codezeilen eingeben: import Amplify from 'aws-amplify' import config from './src/aws-exports' Amplify.configure(config) Anmerkung Wenn Sie nach dem Import des Amplify-Dienstes in die Einstiegspunktdatei der App eine Fehlermeldung erhalten, beenden Sie die App. Öffnen XCode Sie dann die ToDoListAmplifyDatei .xcworkspace aus dem iOS-Ordner des Projekts, wählen Sie sie aus und führen Sie die App aus.	App-Developer
Aktualisieren Sie die Einstiegspunktdatei Ihrer App, um die WithAuthenticator-Komponente höherer Ordnung (HOC) zu verwenden.	Anmerkung Der withAuthenticator HOC bietet Workflows zum Anmelden, Registrieren und Vergessen von Passwörtern in Ihrer App, wobei nur wenige Codezeilen verwendet werden. Weitere Informationen finden Sie unter Option 1: Verwenden Sie vorgefertigte UI-Komponenten im Amplify Dev Center. Außerdem Komponenten höherer Ordnung in der React-Dokumentation. Importieren Sie den withAuthenticator HOC in der Einstiegspunktdatei der App (z. B. App.js), indem Sie die folgenden Codezeilen eingeben: import { withAuthenticator } from 'aws-amplify-react-native' Exportieren Sie den WithAuthenticator-HOC, indem Sie den folgenden Code eingeben: export default withAuthenticator(App) Beispiel für den WITHAuthenticator HOC-Code import Amplify from 'aws-amplify' import config from './src/aws-exports' Amplify.configure(config) import { withAuthenticator } from 'aws-amplify-react-native'; const App = () => { return null; }; export default withAuthenticator(App); Anmerkung Im iOS-Simulator zeigt die App den Anmeldebildschirm an, der vom Amazon Cognito-Service bereitgestellt wird.	App-Developer
Testen Sie die Einrichtung des Authentifizierungsdienstes.	Gehen Sie im iOS-Simulator wie folgt vor: Erstellen Sie ein neues Konto in der App, indem Sie eine echte E-Mail-Adresse verwenden. Ein Bestätigungscode wird dann an die registrierte E-Mail gesendet. Überprüfen Sie das eingerichtete Konto mithilfe des Codes, den Sie in der Bestätigungs-E-Mail erhalten. Geben Sie den Benutzernamen und das Passwort ein, die Sie erstellt haben. Wählen Sie dann Anmelden. Ein Willkommensbildschirm wird angezeigt.   Anmerkung Sie können auch die Amazon Cognito Cognito-Konsole öffnen und überprüfen, ob ein neuer Benutzer im Identity Pool erstellt wurde oder nicht.	App-Developer

Fügen Sie Ihrer Amplify React Native-App die Amazon Cognito Cognito-Authentifizierung hinzu

Aufgabe	Beschreibung	Erforderliche Fähigkeiten
Erstellen Sie einen Amazon Cognito Cognito-Authentifizierungsservice.	Führen Sie in Ihrer lokalen Umgebung den folgenden Befehl im Stammverzeichnis des Projekts aus (ToDoListAmplify) aus: amplify add auth Es wird eine Aufforderung angezeigt, in der Sie aufgefordert werden, Informationen zu den Konfigurationseinstellungen des Authentifizierungsdienstes einzugeben. Geben Sie die erforderlichen Informationen basierend auf Ihrem Anwendungsfall ein. Drücken Sie anschließend die Eingabetaste. Wenden Sie für das in diesem Muster verwendete ToDoList App-Setup die folgende Beispielkonfiguration an. Beispiel für Konfigurationseinstellungen für den Authentifizierungsdienst ? Do you want to use the default authentication and security configuration? \ Default configuration ? How do you want users to be able to sign in? \ Username ? Do you want to configure advanced settings? \ No, I am done Anmerkung Der amplify add auth Befehl erstellt die erforderlichen Ordner, Dateien und Abhängigkeitsdateien in einem lokalen Ordner (Amplify) im Stammverzeichnis des Projekts. Für das in diesem Muster verwendete ToDoList App-Setup wird die Datei aws-exports.js zu diesem Zweck erstellt.	App-Developer
Stellen Sie den Amazon Cognito-Service in der AWS-Cloud bereit.	Führen Sie im Stammverzeichnis des Projekts den folgenden Amplify CLI-Befehl aus: amplify push Eine Aufforderung zur Bestätigung der Bereitstellung wird angezeigt. Geben Sie Ja ein. Drücken Sie anschließend die Eingabetaste. Anmerkung Um die in Ihrem Projekt bereitgestellten Dienste zu sehen, rufen Sie die Amplify-Konsole auf, indem Sie den folgenden Befehl ausführen: amplify console	App-Developer
Installieren Sie die erforderlichen Amplify-Bibliotheken für React Native und die CocoaPods Abhängigkeiten für iOS.	Installieren Sie die erforderlichen Amplify-Open-Source-Clientbibliotheken, indem Sie den folgenden Befehl im Stammverzeichnis des Projekts ausführen: npm install aws-amplify aws-amplify-react-native \ amazon-cognito-identity-js @react-native-community/netinfo \ @react-native-async-storage/async-storage Installieren Sie die erforderlichen CocoaPods Abhängigkeiten für iOS, indem Sie den folgenden Befehl ausführen: npx pod-install	App-Developer
Importieren und konfigurieren Sie den Amplify-Dienst.	Importieren und laden Sie in der Einstiegspunktdatei der App (z. B. App.js) die Konfigurationsdatei des Amplify-Dienstes, indem Sie die folgenden Codezeilen eingeben: import Amplify from 'aws-amplify' import config from './src/aws-exports' Amplify.configure(config) Anmerkung Wenn Sie nach dem Import des Amplify-Dienstes in die Einstiegspunktdatei der App eine Fehlermeldung erhalten, beenden Sie die App. Öffnen XCode Sie dann die ToDoListAmplifyDatei .xcworkspace aus dem iOS-Ordner des Projekts, wählen Sie sie aus und führen Sie die App aus.	App-Developer
Aktualisieren Sie die Einstiegspunktdatei Ihrer App, um die WithAuthenticator-Komponente höherer Ordnung (HOC) zu verwenden.	Anmerkung Der withAuthenticator HOC bietet Workflows zum Anmelden, Registrieren und Vergessen von Passwörtern in Ihrer App, wobei nur wenige Codezeilen verwendet werden. Weitere Informationen finden Sie unter Option 1: Verwenden Sie vorgefertigte UI-Komponenten im Amplify Dev Center. Außerdem Komponenten höherer Ordnung in der React-Dokumentation. Importieren Sie den withAuthenticator HOC in der Einstiegspunktdatei der App (z. B. App.js), indem Sie die folgenden Codezeilen eingeben: import { withAuthenticator } from 'aws-amplify-react-native' Exportieren Sie den WithAuthenticator-HOC, indem Sie den folgenden Code eingeben: export default withAuthenticator(App) Beispiel für den WITHAuthenticator HOC-Code import Amplify from 'aws-amplify' import config from './src/aws-exports' Amplify.configure(config) import { withAuthenticator } from 'aws-amplify-react-native'; const App = () => { return null; }; export default withAuthenticator(App); Anmerkung Im iOS-Simulator zeigt die App den Anmeldebildschirm an, der vom Amazon Cognito-Service bereitgestellt wird.	App-Developer
Testen Sie die Einrichtung des Authentifizierungsdienstes.	Gehen Sie im iOS-Simulator wie folgt vor: Erstellen Sie ein neues Konto in der App, indem Sie eine echte E-Mail-Adresse verwenden. Ein Bestätigungscode wird dann an die registrierte E-Mail gesendet. Überprüfen Sie das eingerichtete Konto mithilfe des Codes, den Sie in der Bestätigungs-E-Mail erhalten. Geben Sie den Benutzernamen und das Passwort ein, die Sie erstellt haben. Wählen Sie dann Anmelden. Ein Willkommensbildschirm wird angezeigt.   Anmerkung Sie können auch die Amazon Cognito Cognito-Konsole öffnen und überprüfen, ob ein neuer Benutzer im Identity Pool erstellt wurde oder nicht.	App-Developer

Eine AppSync AWS-API und eine DynamoDB-Datenbank mit der App Connect

Aufgabe	Beschreibung	Erforderliche Fähigkeiten
Erstellen Sie eine AppSync AWS-API und eine DynamoDB-Datenbank.	Fügen Sie Ihrer App eine AppSync AWS-API hinzu und stellen Sie automatisch eine DynamoDB-Datenbank bereit, indem Sie den folgenden Amplify-CLI-Befehl im Stammverzeichnis des Projekts ausführen: amplify add api Es wird eine Aufforderung angezeigt, in der Sie aufgefordert werden, Informationen zu den API- und Datenbankkonfigurationseinstellungen anzugeben. Geben Sie die erforderlichen Informationen basierend auf Ihrem Anwendungsfall ein. Drücken Sie anschließend die Eingabetaste. Die Amplify CLI öffnet die GraphQL-Schemadatei in Ihrem Texteditor. Wenden Sie für das in diesem Muster verwendete ToDoList App-Setup die folgende Beispielkonfiguration an. Beispiel für API- und Datenbankkonfigurationseinstellungen ? Please select from one of the below mentioned services: \ GraphQL ? Provide API name: todolistamplify ? Choose the default authorization type for the API \ Amazon Cognito User Pool Do you want to use the default authentication and security configuration ? Default configuration How do you want users to be able to sign in? \ Username Do you want to configure advanced settings? \ No, I am done. ? Do you want to configure advanced settings for the GraphQL API \ No, I am done. ? Do you have an annotated GraphQL schema? \ No ? Choose a schema template: \ Single object with fields (e.g., “Todo” with ID, name, description) ? Do you want to edit the schema now? \ Yes Beispiel für ein GraphQL-Schema type Todo @model { id: ID! name: String! description: String }	App-Developer
Stellen Sie die AppSync AWS-API bereit.	Führen Sie im Stammverzeichnis des Projekts den folgenden Amplify CLI-Befehl aus: amplify push Es wird eine Aufforderung angezeigt, in der Sie aufgefordert werden, weitere Informationen zu den API- und Datenbankkonfigurationseinstellungen anzugeben. Geben Sie die erforderlichen Informationen basierend auf Ihrem Anwendungsfall ein. Drücken Sie anschließend die Eingabetaste. Ihre App kann jetzt mit der AppSync AWS-API interagieren.  Wenden Sie für das in diesem Muster verwendete ToDoList App-Setup die folgende Beispielkonfiguration an. Beispiel für AppSync AWS-API-Konfigurationseinstellungen Anmerkung Die folgende Konfiguration erstellt die GraphQL-API in AWS AppSync und eine Todo-Tabelle in Dynamo DB. ? Are you sure you want to continue? Yes ? 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	App-Developer
Connect das Frontend der App mit der AppSync AWS-API.	Um die in diesem Muster bereitgestellte ToDoList Beispiel-App zu verwenden, kopieren Sie den Code aus der Datei App.js im ios-todo-app GitHub Repository aws-amplify-react-native-. Integrieren Sie dann den Beispielcode in Ihre lokale Umgebung. Der in der Datei App.js des Repositorys enthaltene Beispielcode bewirkt Folgendes: Zeigt das Formular zum Erstellen eines ToDo Elements mit den Feldern Titel und Beschreibung Zeigt die Liste der zu erledigenden Aufgaben an (Titel und Beschreibung) Postet Daten mithilfe von Methoden und ruft sie ab aws-amplify	App-Developer

Eine AppSync AWS-API und eine DynamoDB-Datenbank mit der App Connect

Aufgabe	Beschreibung	Erforderliche Fähigkeiten
Erstellen Sie eine AppSync AWS-API und eine DynamoDB-Datenbank.	Fügen Sie Ihrer App eine AppSync AWS-API hinzu und stellen Sie automatisch eine DynamoDB-Datenbank bereit, indem Sie den folgenden Amplify-CLI-Befehl im Stammverzeichnis des Projekts ausführen: amplify add api Es wird eine Aufforderung angezeigt, in der Sie aufgefordert werden, Informationen zu den API- und Datenbankkonfigurationseinstellungen anzugeben. Geben Sie die erforderlichen Informationen basierend auf Ihrem Anwendungsfall ein. Drücken Sie anschließend die Eingabetaste. Die Amplify CLI öffnet die GraphQL-Schemadatei in Ihrem Texteditor. Wenden Sie für das in diesem Muster verwendete ToDoList App-Setup die folgende Beispielkonfiguration an. Beispiel für API- und Datenbankkonfigurationseinstellungen ? Please select from one of the below mentioned services: \ GraphQL ? Provide API name: todolistamplify ? Choose the default authorization type for the API \ Amazon Cognito User Pool Do you want to use the default authentication and security configuration ? Default configuration How do you want users to be able to sign in? \ Username Do you want to configure advanced settings? \ No, I am done. ? Do you want to configure advanced settings for the GraphQL API \ No, I am done. ? Do you have an annotated GraphQL schema? \ No ? Choose a schema template: \ Single object with fields (e.g., “Todo” with ID, name, description) ? Do you want to edit the schema now? \ Yes Beispiel für ein GraphQL-Schema type Todo @model { id: ID! name: String! description: String }	App-Developer
Stellen Sie die AppSync AWS-API bereit.	Führen Sie im Stammverzeichnis des Projekts den folgenden Amplify CLI-Befehl aus: amplify push Es wird eine Aufforderung angezeigt, in der Sie aufgefordert werden, weitere Informationen zu den API- und Datenbankkonfigurationseinstellungen anzugeben. Geben Sie die erforderlichen Informationen basierend auf Ihrem Anwendungsfall ein. Drücken Sie anschließend die Eingabetaste. Ihre App kann jetzt mit der AppSync AWS-API interagieren.  Wenden Sie für das in diesem Muster verwendete ToDoList App-Setup die folgende Beispielkonfiguration an. Beispiel für AppSync AWS-API-Konfigurationseinstellungen Anmerkung Die folgende Konfiguration erstellt die GraphQL-API in AWS AppSync und eine Todo-Tabelle in Dynamo DB. ? Are you sure you want to continue? Yes ? 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	App-Developer
Connect das Frontend der App mit der AppSync AWS-API.	Um die in diesem Muster bereitgestellte ToDoList Beispiel-App zu verwenden, kopieren Sie den Code aus der Datei App.js im ios-todo-app GitHub Repository aws-amplify-react-native-. Integrieren Sie dann den Beispielcode in Ihre lokale Umgebung. Der in der Datei App.js des Repositorys enthaltene Beispielcode bewirkt Folgendes: Zeigt das Formular zum Erstellen eines ToDo Elements mit den Feldern Titel und Beschreibung Zeigt die Liste der zu erledigenden Aufgaben an (Titel und Beschreibung) Postet Daten mithilfe von Methoden und ruft sie ab aws-amplify	App-Developer

Zugehörige Ressourcen

• AWS Amplify

• Amazon Cognito

• AWS AppSync

• Amazon-DynamoDB

• React (React-Dokumentation)