Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra. # Créez une application mobile React Native sans serveur à l'aide d'AWS Amplify *Deekshitulu Pentakota, Amazon Web Services* ## Résumé Ce modèle montre comment créer un backend sans serveur pour une application mobile React Native à l'aide d'AWS Amplify et des services AWS suivants : + AWS AppSync + Amazon Cognito + Amazon DynamoDB Après avoir configuré et déployé le backend de l'application à l'aide d'Amplify, Amazon Cognito authentifie les utilisateurs de l'application et les autorise à accéder à l'application. AWS interagit AppSync ensuite avec l'application frontale et avec une table DynamoDB principale pour créer et récupérer des données. **Note** Ce modèle utilise une simple application « ToDoList » comme exemple, mais vous pouvez utiliser une procédure similaire pour créer n'importe quelle application mobile React Native. ## Conditions préalables et limitations **Conditions préalables** + Un compte AWS actif + [Interface de ligne de commande Amplify (Amplify CLI)](https://docs.amplify.aws/cli/start/install/), installée et configurée + XCode (n'importe quelle version) + Microsoft Visual Studio (n'importe quelle version, n'importe quel éditeur de code, n'importe quel éditeur de texte) + Connaissance d'Amplify + Connaissance d'Amazon Cognito + Connaissance d'AWS AppSync + Connaissance de DynamoDB + Connaissance de Node.js + Familiarité avec npm + Connaissance de React et React Native + Familiarité avec JavaScript et ( ECMAScript 6) ES6 + Connaissance de GraphQL ## Architecture Le schéma suivant montre un exemple d'architecture permettant d'exécuter le backend d'une application mobile React Native dans le cloud AWS : ![Flux de travail pour exécuter une application mobile React Native avec les services AWS.](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/images/pattern-img/c95e0150-5762-4c90-946c-efa3a22913e4/images/5beff5f9-9d14-49dc-a046-b74e5bfbd13f.png) Le schéma montre l'architecture suivante : 1. Amazon Cognito authentifie les utilisateurs de l'application et les autorise à accéder à l'application. 1. Pour créer et récupérer des données, AWS AppSync utilise une API GraphQL pour interagir avec l'application frontale et une table DynamoDB principale. ## Outils **Services AWS** + [AWS Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html) est un ensemble d'outils et de fonctionnalités spécialement conçus pour aider les développeurs web et mobiles frontaux à créer rapidement des applications complètes sur AWS. + [AWS AppSync](https://docs.aws.amazon.com/appsync/latest/devguide/what-is-appsync.html) fournit une interface GraphQL évolutive qui aide les développeurs d'applications à combiner des données provenant de plusieurs sources, notamment Amazon DynamoDB, AWS Lambda et HTTP. APIs + [Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) fournit des fonctionnalités d'authentification, d'autorisation et de gestion des utilisateurs pour les applications Web et mobiles. + [Amazon DynamoDB](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/Introduction.html) est un service de base de données NoSQL entièrement géré, offrant des performances rapides, prévisibles et évolutives. **Code** Le code de l'exemple d'application utilisé dans ce modèle est disponible dans le ios-todo-app référentiel GitHub [aws-amplify-react-native-](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app). Pour utiliser les fichiers d'exemple, suivez les instructions de la section **Epics** de ce modèle. ## Épopées ### Créez et exécutez votre application React Native | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Configurez un environnement de développement React Native. | Pour obtenir des instructions, consultez la section [Configuration de l'environnement de développement](https://reactnative.dev/docs/next/environment-setup) dans la documentation de React Native. | Développeur d’applications | | Créez et exécutez l'application mobile ToDoList React Native dans le simulateur iOS. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | Développeur d’applications | ### Initialisation d'un nouvel environnement principal pour l'application | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Créez les services principaux nécessaires pour prendre en charge l'application dans Amplify. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Pour la configuration de ToDoList l'application utilisée dans ce modèle, appliquez l'exemple de configuration suivant.
**Exemple de paramètres de configuration de l'application React Native Amplify**
? 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

Pour plus d'informations, consultez la section [Créer un nouveau backend Amplify](https://docs.amplify.aws/lib/project-setup/create-application/q/platform/js/#create-a-new-amplify-backend) dans la documentation Amplify Dev Center.La `amplify init` commande fournit les ressources suivantes à l'aide d'[AWS CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html) : [See the AWS documentation website for more details](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | Développeur d’applications | ### Ajoutez l'authentification Amazon Cognito à votre application Amplify React Native | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Créez un service d'authentification Amazon Cognito. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Pour la configuration de ToDoList l'application utilisée dans ce modèle, appliquez l'exemple de configuration suivant.
**Exemples de paramètres de configuration du service d'authentification**
? 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
La `amplify add auth` commande crée les dossiers, fichiers et fichiers de dépendance nécessaires dans un dossier local (**amplify) situé** dans le répertoire racine du projet. Pour la configuration de ToDoList l'application utilisée dans ce modèle, le **fichier aws-exports.js** est créé à cette fin. | Développeur d’applications | | Déployez le service Amazon Cognito sur le cloud AWS. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Pour voir les services déployés dans votre projet, accédez à la console Amplify en exécutant la commande suivante :`amplify console` | Développeur d’applications | | Installez les bibliothèques Amplify requises pour React Native et les CocoaPods dépendances pour iOS. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | Développeur d’applications | | Importez et configurez le service Amplify. | Dans le fichier du point d'entrée de l'application (par exemple, **App.js**), importez et chargez le fichier de configuration du service Amplify en saisissant les lignes de code suivantes :
import Amplify from 'aws-amplify'
import config from './src/aws-exports'
Amplify.configure(config)
Si vous recevez un message d'erreur après avoir importé le service Amplify dans le fichier de point d'entrée de l'application, arrêtez l'application. Ensuite, ouvrez XCode et sélectionnez le **ToDoListAmplifyfichier .xcworkspace** dans le dossier iOS du projet, puis exécutez l'application. | Développeur d’applications | | Mettez à jour le fichier de point d'entrée de votre application pour utiliser le composant WithAuthenticator Higher-Order (HOC). | Le `withAuthenticator` HOC fournit des flux de travail de connexion, d'inscription et de mot de passe oublié dans votre application en utilisant seulement quelques lignes de code. Pour plus d'informations, voir [Option 1 : Utiliser des composants d'interface utilisateur prédéfinis](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components) dans le centre de développement Amplify. Également, des [composants d'ordre supérieur](https://reactjs.org/docs/higher-order-components.html) dans la documentation de React.[See the AWS documentation website for more details](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)**Exemple de code WithAuthenticator HOC**
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);
Dans iOS Simulator, l'application affiche l'écran de connexion fourni par le service Amazon Cognito. | Développeur d’applications | | Testez la configuration du service d'authentification. | Dans iOS Simulator, procédez comme suit :[See the AWS documentation website for more details](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Vous pouvez également ouvrir la [console Amazon Cognito](https://console.aws.amazon.com/cognito/) et vérifier si un nouvel utilisateur a été créé dans le **pool d'identités ou non**. | Développeur d’applications | ### Connectez une AppSync API AWS et une base de données DynamoDB à l'application | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Créez une AppSync API AWS et une base de données DynamoDB. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Pour la configuration de ToDoList l'application utilisée dans ce modèle, appliquez l'exemple de configuration suivant.
**Exemples de paramètres de configuration d'API et de base de données**
? 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

**Exemple de schéma GraphQL**
 type Todo @model {
   id: ID!
   name: String!
   description: String
}
| Développeur d’applications | | Déployez l' AppSync API AWS. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Pour la configuration de ToDoList l'application utilisée dans ce modèle, appliquez l'exemple de configuration suivant.
**Exemple de paramètres de configuration de AppSync l'API AWS**La configuration suivante crée l'API GraphQL dans AWS AppSync et une table **Todo dans 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
| Développeur d’applications | | Connectez le frontend de l'application à l' AppSync API AWS. | Pour utiliser l'exemple d' ToDoList application fourni dans ce modèle, copiez le code du fichier **App.js** dans le ios-todo-app GitHub référentiel [aws-amplify-react-native-](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app). Intégrez ensuite l'exemple de code dans votre environnement local.
L'exemple de code fourni dans le fichier **App.js** du référentiel effectue les opérations suivantes :[See the AWS documentation website for more details](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | Développeur d’applications | ## Ressources connexes + [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](https://reactjs.org/) (documentation React)