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 von AWS Amplify eine serverlose mobile React Native-App *Deekshitulu Pentakota, Amazon Web Services* ## Zusammenfassung 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 "ToDoList" App 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)](https://docs.amplify.aws/cli/start/install/), 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: ![Workflow für die Ausführung einer mobilen React-Native-App mit AWS-Services.](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/images/pattern-img/c95e0150-5762-4c90-946c-efa3a22913e4/images/5beff5f9-9d14-49dc-a046-b74e5bfbd13f.png) Das Diagramm zeigt die folgende Architektur: 1. Amazon Cognito authentifiziert App-Benutzer und autorisiert sie, auf die App zuzugreifen. 1. 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](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html) 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](https://docs.aws.amazon.com/appsync/latest/devguide/what-is-appsync.html) 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](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) bietet Authentifizierung, Autorisierung und Benutzerverwaltung für Web- und mobile Apps. + [Amazon DynamoDB](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/Introduction.html) 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-](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app) 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 | Description | Erforderliche Fähigkeiten | | --- | --- | --- | | Richten Sie eine React Native-Entwicklungsumgebung ein. | Anweisungen finden Sie unter [Einrichten der Entwicklungsumgebung](https://reactnative.dev/docs/next/environment-setup) in der React Native-Dokumentation. | App-Developer | | Erstellen Sie die mobile ToDoList React Native-App und führen Sie sie im iOS-Simulator aus. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | App-Developer | ### Initialisieren Sie eine neue Backend-Umgebung für die App | Aufgabe | Description | Erforderliche Fähigkeiten | | --- | --- | --- | | Erstellen Sie die Backend-Dienste, die zur Unterstützung der App in Amplify erforderlich sind. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)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](https://docs.amplify.aws/lib/project-setup/create-application/q/platform/js/#create-a-new-amplify-backend) Dev Center-Dokumentation.Der `amplify init` Befehl stellt mithilfe von [AWS die folgenden Ressourcen bereit CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html): [See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | App-Developer | ### Fügen Sie Ihrer Amplify React Native-App die Amazon Cognito Cognito-Authentifizierung hinzu | Aufgabe | Description | Erforderliche Fähigkeiten | | --- | --- | --- | | Erstellen Sie einen Amazon Cognito Cognito-Authentifizierungsservice. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)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
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. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)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. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | 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)
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. | 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](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components) im Amplify Dev Center. Außerdem [Komponenten höherer Ordnung](https://reactjs.org/docs/higher-order-components.html) in der React-Dokumentation.[See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)**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);
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:[See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Sie können auch die [Amazon Cognito Cognito-Konsole](https://console.aws.amazon.com/cognito/) ö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 | Description | Erforderliche Fähigkeiten | | --- | --- | --- | | Erstellen Sie eine AppSync AWS-API und eine DynamoDB-Datenbank. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)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. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Wenden Sie für das in diesem Muster verwendete ToDoList App-Setup die folgende Beispielkonfiguration an.
**Beispiel für AppSync AWS-API-Konfigurationseinstellungen**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-](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app). Integrieren Sie dann den Beispielcode in Ihre lokale Umgebung.
Der in der Datei **App.js** des Repositorys enthaltene Beispielcode bewirkt Folgendes:[See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | App-Developer | ## Zugehörige Ressourcen + [AWS Amplify](https://aws.amazon.com/amplify/) + [Amazon Cognito](https://aws.amazon.com/cognito/) + [AWS AppSync](https://aws.amazon.com/appsync/) + [Amazon-DynamoDB](https://aws.amazon.com/dynamodb/) + [React (React-Dokumentation](https://reactjs.org/))