Cree una aplicación móvil React Native sin servidor con AWS Amplify

Configure un entorno de desarrollo React Native.

Para obtener instrucciones, consulte Configurar el entorno de desarrollo en la documentación de React Native.

Cree y ejecute la aplicación móvil ToDoList React Native en el simulador de iOS.

Cree los servicios de backend necesarios para respaldar la aplicación en Amplify.

Para la configuración de la ToDoList aplicación utilizada en este patrón, aplique el siguiente ejemplo de configuración.

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 en la documentación de Amplify Dev Center.

Cree un servicio de autenticación de Amazon Cognito.

Para la configuración de la ToDoList aplicación utilizada en este patrón, aplique el siguiente ejemplo de configuración.

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

Implemente el servicio de Amazon Cognito en la nube de AWS.

amplify console

Instala las bibliotecas Amplify necesarias para React Native y las CocoaPods dependencias para iOS.

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)

Actualice el archivo de punto de entrada de la aplicación para usar el componente de orden superior (HOC) withAuthenticator.

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);

Pruebe la configuración del servicio de autenticación.

En el simulador de iOS, haga lo siguiente:

Cree una AppSync API de AWS y una base de datos de DynamoDB.

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
}

Implemente la AppSync API de AWS.

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

 ? 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

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-. 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: