Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.
Erstellen Sie mithilfe AWS von Amplify eine serverlose mobile React Native-App
Erstellt von Deekshitulu Pentakota () AWS
Code-Repository aws-amplify-react-native: - ios-todo-app | Umgebung: Produktion | Quelle: NA |
Ziel: AWS Amplify, Amazon Cognito AWS AppSync, Amazon DynamoDB | R-Typ: Re-Architect | Arbeitsaufwand: Open Source |
Technologien: Serverlos; Web- und mobile Apps | AWSDienste: AWS Amplify; Amazon Cognito AWS AppSync; Amazon DynamoDB |
Übersicht
Dieses Muster zeigt, wie Sie mithilfe von AWS Amplify und den folgenden Diensten ein serverloses Backend für eine mobile React Native-App erstellen: AWS
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 AppSync interagiert dann mit der Frontend-App und mit einer DynamoDB-Backend-Tabelle, um Daten zu erstellen und abzurufen.
Hinweis: 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 (AmplifyCLI), 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 den Betrieb des Backends einer mobilen React Native-App in der Cloud: AWS
Das Diagramm zeigt die folgende Architektur:
Amazon Cognito authentifiziert App-Benutzer und autorisiert sie, auf die App zuzugreifen.
Zum Erstellen und Abrufen von Daten AWS AppSync verwendet GraphQL API zur Interaktion mit der Frontend-App und einer Backend-DynamoDB-Tabelle.
AWSDienste
AWSAmplify ist eine Reihe von speziell entwickelten Tools und Funktionen, mit denen Frontend-Web- und Mobilentwickler schnell Full-Stack-Anwendungen erstellen können. AWS
AWS AppSyncbietet 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 Service ohne SQL Datenbank, der eine schnelle, vorhersehbare und skalierbare Leistung bietet.
Code
Der Code für die Beispielanwendung, die in diesem Muster verwendet wird, ist im Repository GitHub aws-amplify-react-native- ios-todo-app verfügbar. Um die Beispieldateien zu verwenden, folgen Sie den Anweisungen im Abschnitt Epics dieses Musters.
Epen
| 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 |
| 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. Hinweis: Der amplify init Befehl stellt die folgenden Ressourcen bereit, indem er verwendet: AWS CloudFormation AWSIdentity 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 |
| 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
Hinweis: 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 CLI Amplify-Befehl aus: amplify push
Eine Aufforderung zur Bestätigung der Bereitstellung wird angezeigt. Geben Sie Ja ein. Drücken Sie anschließend die Eingabetaste.
Hinweis: 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)
Hinweis: 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 Komponente withAuthenticator höherer Ordnung () zu verwenden. HOC | Hinweis: Die withAuthenticator HOC bietet Workflows zum Anmelden, Registrieren und Vergessen von Passwörtern in Ihrer App, wobei nur ein paar 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 in der Einstiegspunktdatei der App (z. B. App.js) die, withAuthenticator HOC indem Sie die folgenden Codezeilen eingeben: import { withAuthenticator } from 'aws-amplify-react-native'
Exportieren Sie die, withAuthenticator HOC indem Sie den folgenden Code eingeben: export default withAuthenticator(App)
withAuthenticator HOCCode-Beispiel 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);
Hinweis: In 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.
Hinweis: 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 |
| Aufgabe | Beschreibung | Erforderliche Fähigkeiten |
|---|
Erstellen Sie eine AWS AppSync API DynamoDB-Datenbank. | Fügen Sie Ihrer App eine AWS AppSync API hinzu und stellen Sie automatisch eine DynamoDB-Datenbank bereit, indem Sie den folgenden CLI Amplify-Befehl im Stammverzeichnis des Projekts ausführen: amplify add api
Es wird eine Aufforderung angezeigt, in der Sie aufgefordert werden, Informationen zu den Einstellungen API und zur Datenbankkonfiguration anzugeben. Geben Sie die erforderlichen Informationen basierend auf Ihrem Anwendungsfall ein. Drücken Sie anschließend die Eingabetaste. Das 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. Einstellungen für Beispiel API und Datenbankkonfiguration ? 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 das AWS AppSync API bereit. | Führen Sie im Stammverzeichnis des Projekts den folgenden CLI Amplify-Befehl aus: amplify push
Es wird eine Aufforderung angezeigt, in der Sie aufgefordert werden, weitere Informationen zu den Einstellungen API und zur Datenbankkonfiguration anzugeben. Geben Sie die erforderlichen Informationen basierend auf Ihrem Anwendungsfall ein. Drücken Sie anschließend die Eingabetaste. Ihre App kann jetzt mit dem interagieren AWS AppSync API.
Wenden Sie für das in diesem Muster verwendete ToDoList App-Setup die folgende Beispielkonfiguration an. AWS AppSync APIBeispielkonfigurationseinstellungen Hinweis: Die folgende Konfiguration erstellt 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 dem AWS AppSync 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
