Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés. # Cree una aplicación móvil React Native sin servidor con AWS Amplify *Deekshitulu Pentakota, Amazon Web Services* ## Resumen Este patrón muestra cómo crear un backend sin servidor para una aplicación móvil React Native mediante AWS Amplify y los siguientes servicios de AWS: + AWS AppSync + Amazon Cognito + Amazon DynamoDB Tras configurar e implementar el backend de la aplicación mediante Amplify, Amazon Cognito autentica a los usuarios y los autoriza a acceder a la aplicación. AppSync A continuación, AWS interactúa con la aplicación de interfaz y con una tabla de DynamoDB de backend para crear y obtener datos. **nota** En este patrón se utiliza una sencilla aplicación «ToDoList» como ejemplo, pero puede utilizar un procedimiento similar para crear cualquier aplicación móvil de React Native. ## Requisitos previos y limitaciones **Requisitos previos ** + Una cuenta de AWS activa + [Interfaz de la línea de comandos de Amplify (Amplify CLI)](https://docs.amplify.aws/cli/start/install/) instalada y configurada + XCode (cualquier versión) + Microsoft Visual Studio (cualquier versión, cualquier editor de código, cualquier editor de texto) + Familiaridad con Amplify + Familiaridad con Amazon Cognito + Familiaridad con AWS AppSync + Familiaridad con DynamoDB + Familiaridad con Node.js + Familiarización con npm + Familiaridad con React y React Native + Familiaridad con JavaScript y ( ECMAScript 6) ES6 + Familiaridad con GraphQL ## Arquitectura El siguiente diagrama muestra un ejemplo de arquitectura para ejecutar el backend de una aplicación móvil React Native en la nube de AWS: ![Flujo de trabajo para ejecutar una aplicación móvil de React Native con los servicios de AWS.](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/images/pattern-img/c95e0150-5762-4c90-946c-efa3a22913e4/images/5beff5f9-9d14-49dc-a046-b74e5bfbd13f.png) En el siguiente diagrama se muestra la arquitectura: 1. Amazon Cognito autentica a los usuarios y los autoriza a acceder a la aplicación. 1. Para crear y obtener datos, AWS AppSync utiliza una API de GraphQL para interactuar con la aplicación de frontend y una tabla de DynamoDB de backend. ## Tools (Herramientas) **Servicios de AWS** + [AWS Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html) es un conjunto de herramientas y características diseñadas específicamente que permiten a los desarrolladores web y móviles de frontend crear aplicaciones de pila completa en AWS de manera rápida. + [AWS AppSync](https://docs.aws.amazon.com/appsync/latest/devguide/what-is-appsync.html) proporciona una interfaz GraphQL escalable que ayuda a los desarrolladores de aplicaciones a combinar datos de varias fuentes, incluidas Amazon DynamoDB, AWS Lambda y HTTP. APIs + [Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) ofrece autenticación, autorización y administración de usuarios para aplicaciones móviles y web. + [Amazon DynamoDB](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/Introduction.html) es un servicio de base de datos de NoSQL completamente administrado que ofrece un rendimiento rápido, predecible y escalable. **Código** [El código de la aplicación de muestra que se utiliza en este patrón está disponible en el repositorio -. GitHub aws-amplify-react-native ios-todo-app](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app) Para usar los archivos de ejemplo, siga las instrucciones de la sección **Épica** de este patrón. ## Epics ### Cree y ejecute su aplicación React Native | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Configure un entorno de desarrollo React Native. | Para obtener instrucciones, consulte [Configurar el entorno de desarrollo](https://reactnative.dev/docs/next/environment-setup) en la documentación de React Native. | Desarrollador de aplicaciones | | Cree y ejecute la aplicación móvil ToDoList React Native en el simulador de iOS. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | Desarrollador de aplicaciones | ### Inicialice un nuevo entorno backend para la aplicación | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Cree los servicios de backend necesarios para respaldar la aplicación en Amplify. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Para la configuración de la ToDoList aplicación utilizada en este patrón, aplique la siguiente configuración de ejemplo.
**Ejemplo de ajustes de configuración de aplicación React Native en 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

Para obtener más información, consulte [Crear un nuevo backend de Amplify](https://docs.amplify.aws/lib/project-setup/create-application/q/platform/js/#create-a-new-amplify-backend) en la documentación de Amplify Dev Center.El `amplify init` comando aprovisiona los siguientes recursos mediante [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/es_es/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | Desarrollador de aplicaciones | ### Añada la autenticación de Amazon Cognito a su aplicación React Native de Amplify | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Cree un servicio de autenticación de Amazon Cognito. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Para la configuración de la ToDoList aplicación utilizada en este patrón, aplique la siguiente configuración de ejemplo.
**Ejemplo de ajustes de configuración del servicio de autenticación**
? 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
El comando `amplify add auth` crea las carpetas, archivos y archivos de dependencia necesarios en una carpeta local (**amplify**) dentro del directorio raíz del proyecto. Para la configuración de la ToDoList aplicación utilizada en este patrón, se crea el **archivo aws-exports.js** con este fin. | Desarrollador de aplicaciones | | Implemente el servicio de Amazon Cognito en la nube de AWS. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Para ver los servicios implementados en su proyecto, acceda a la consola de Amplify ejecutando el siguiente comando:`amplify console` | Desarrollador de aplicaciones | | Instala las bibliotecas Amplify necesarias para React Native y las CocoaPods dependencias para iOS. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | Desarrollador de aplicaciones | | Importe y configure el servicio Amplify. | En el archivo de punto de entrada de la aplicación (por ejemplo, **App.js**), importe y cargue el archivo de configuración del servicio Amplify introduciendo las siguientes líneas de código:
import Amplify from 'aws-amplify'
import config from './src/aws-exports'
Amplify.configure(config)
Si recibe un error después de importar el servicio Amplify en el archivo de punto de entrada de la aplicación, deténgala. A continuación, abre XCode y selecciona el **ToDoListAmplifyarchivo.xcworkspace** de la carpeta iOS del proyecto y ejecuta la aplicación. | Desarrollador de aplicaciones | | Actualice el archivo de punto de entrada de la aplicación para usar el componente de orden superior (HOC) withAuthenticator. | El HOC `withAuthenticator` proporciona flujos de trabajo para iniciar sesión, registrarse y recuperar contraseñas en su aplicación con unas pocas líneas de código. Para obtener más información, consulte [Opción 1: usar componentes de interfaz de usuario precompilados](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components) en Amplify Dev Center. También puede consultar [Componentes de orden superior](https://reactjs.org/docs/higher-order-components.html) en la documentación de React.[See the AWS documentation website for more details](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)**Ejemplo de código de HOC withAuthenticator**
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);
En el simulador de iOS, la aplicación muestra la pantalla de inicio de sesión que proporciona el servicio Amazon Cognito. | Desarrollador de aplicaciones | | Pruebe la configuración del servicio de autenticación. | En el simulador de iOS, haga lo siguiente:[See the AWS documentation website for more details](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)También puede abrir la [consola de Amazon Cognito](https://console.aws.amazon.com/cognito/) y comprobar si se ha creado un nuevo usuario en el **grupo de identidades**. | Desarrollador de aplicaciones | ### Conectar una AppSync API de AWS y una base de datos de DynamoDB a la aplicación | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Cree una AppSync API de AWS y una base de datos de DynamoDB. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Para la configuración de la ToDoList aplicación utilizada en este patrón, aplique la siguiente configuración de ejemplo.
**Ejemplo de ajustes de configuración de API y base de datos**
? 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

**Ejemplo de esquema de GraphQL**
 type Todo @model {
   id: ID!
   name: String!
   description: String
}
| Desarrollador de aplicaciones | | Implemente la AppSync API de AWS. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Para la configuración de la ToDoList aplicación utilizada en este patrón, aplique la siguiente configuración de ejemplo.
**Ejemplo de ajustes de configuración AppSync de la API de AWS**La siguiente configuración crea la API GraphQL en AWS AppSync y una tabla **Todo** en 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
| Desarrollador de aplicaciones | | Conecta la interfaz de la aplicación a la AppSync API de AWS. | Para usar la ToDoList aplicación de ejemplo que se proporciona en este patrón, copie el código del archivo **App.js** del ios-todo-app GitHub repositorio [aws-amplify-react-native-](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app). A continuación, integre el código de ejemplo en su entorno local.
El código de ejemplo proporcionado en el archivo **App.js** del repositorio hace lo siguiente:[See the AWS documentation website for more details](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | Desarrollador de aplicaciones | ## Recursos relacionados + [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/) (documentación de React)