As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá. # Crie um aplicativo móvel React Native de tecnologia sem servidor usando o AWS Amplify *Deekshitulu Pentakota, Amazon Web Services* ## Resumo Esse padrão mostra como criar um backend de tecnologia sem servidor para um aplicativo móvel React Native usando o AWS Amplify e os seguintes serviços da AWS: + AWS AppSync + Amazon Cognito + Amazon DynamoDB Depois de configurar e implantar o backend do aplicativo usando o Amplify, o Amazon Cognito autentica os usuários do aplicativo e os autoriza a acessar o aplicativo. AppSync Em seguida, a AWS interage com o aplicativo de front-end e com uma tabela de back-end do DynamoDB para criar e buscar dados. **nota** Esse padrão usa um aplicativo simples ToDoList "" como exemplo, mas você pode usar um procedimento semelhante para criar qualquer aplicativo móvel React Native. ## Pré-requisitos e limitações **Pré-requisitos ** + Uma conta AWS ativa + [Amplify Command Line Interface (Amplify CLI)](https://docs.amplify.aws/cli/start/install/), instalada e configurada + XCode (qualquer versão) + Microsoft Visual Studio (qualquer versão, qualquer editor de código, qualquer editor de texto) + Familiaridade com o Amplify + Familiaridade com o Amazon Cognito + Familiaridade com a AWS AppSync + Familiaridade com o DynamoDB + Familiaridade com Node.js + Familiaridade com o npm + Familiaridade com React e React Native + Familiaridade com JavaScript e ( ECMAScript 6) ES6 + Familiaridade com o GraphQL ## Arquitetura O diagrama a seguir mostra um exemplo de arquitetura para executar o backend de um aplicativo móvel React Native na Nuvem AWS: ![Fluxo de trabalho para executar uma aplicação móvel com React Native usando os serviços da AWS.](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/images/pattern-img/c95e0150-5762-4c90-946c-efa3a22913e4/images/5beff5f9-9d14-49dc-a046-b74e5bfbd13f.png) O diagrama mostra a seguinte arquitetura: 1. O Amazon Cognito autentica os usuários do aplicativo e os autoriza a acessar o aplicativo. 1. Para criar e buscar dados, a AWS AppSync usa uma API GraphQL para interagir com o aplicativo de front-end e uma tabela de back-end do DynamoDB. ## Ferramentas **Serviços da AWS** + O [AWS Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html) é um conjunto de ferramentas e recursos desenvolvidos especificamente para permitir aos desenvolvedores de frontend para a web e dispositivos móveis criarem aplicações de full-stack de forma rápida e fácil na AWS. + AppSyncA [AWS](https://docs.aws.amazon.com/appsync/latest/devguide/what-is-appsync.html) fornece uma interface GraphQL escalável que ajuda os desenvolvedores de aplicativos a combinar dados de várias fontes, incluindo Amazon DynamoDB, AWS Lambda e HTTP. APIs + O [Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) fornece autenticação, autorização e gerenciamento de usuários para suas aplicações Web e móveis. + O [Amazon DynamoDB](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/Introduction.html) é um serviço de banco de dados NoSQL totalmente gerenciado que fornece performance rápida, previsível e escalável. **Código ** O código do aplicativo de amostra usado nesse padrão está disponível no ios-todo-app repositório GitHub [aws-amplify-react-native-](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app). Para usar os arquivos de amostra, siga as instruções na seção **Épicos** desse padrão. ## Épicos ### Crie e execute seu aplicativo React Native | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Configurar um ambiente de desenvolvimento React Native. | Para obter instruções, consulte [Configurando o ambiente de desenvolvimento](https://reactnative.dev/docs/next/environment-setup) na documentação do React Native. | Desenvolvedor de aplicativos | | Crie e execute o aplicativo móvel ToDoList React Native no iOS Simulator. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | Desenvolvedor de aplicativos | ### Inicializar um ambiente de backend para a aplicação | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Crie os serviços de backend necessários para oferecer suporte ao aplicativo no Amplify. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Para a configuração do ToDoList aplicativo usada nesse padrão, aplique o exemplo de configuração a seguir.
**Exemplo de configurações do aplicativo 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

Para obter mais informações, consulte [Criar um novo backend do Amplify](https://docs.amplify.aws/lib/project-setup/create-application/q/platform/js/#create-a-new-amplify-backend) na documentação do Amplify Dev Center.O `amplify init` comando provisiona os seguintes recursos usando a [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/pt_br/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | Desenvolvedor de aplicativos | ### Adicione a autenticação do Amazon Cognito ao seu aplicativo Amplify React Native | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Crie um serviço de autenticação do Amazon Cognito. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Para a configuração do ToDoList aplicativo usada nesse padrão, aplique o exemplo de configuração a seguir.
**Exemplo de configurações do serviço de autenticação**
? 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
O comando`amplify add auth` cria as pastas necessárias, os arquivos e os arquivos de dependência em uma pasta local (**amplify**) localizada no diretório raiz do projeto. Para a configuração do ToDoList aplicativo usada nesse padrão, o **aws-exports.js** é criado para essa finalidade. | Desenvolvedor de aplicativos | | Implante o serviço do Amazon Cognito na Nuvem AWS. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Para visualizar os serviços implantados no seu projeto, acesse o console do Amplify executando o seguinte comando:`amplify console` | Desenvolvedor de aplicativos | | Instale as bibliotecas Amplify necessárias para o React Native e as CocoaPods dependências para iOS. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | Desenvolvedor de aplicativos | | Importe e configure o serviço Amplify. | No arquivo de ponto de entrada do aplicativo (por exemplo, **App.js**), importe e carregue o arquivo de configuração do serviço Amplify inserindo as seguintes linhas de código:
import Amplify from 'aws-amplify'
import config from './src/aws-exports'
Amplify.configure(config)
Se ocorrer um erro após importar o serviço Amplify no arquivo de entrada da aplicação, interrompa a aplicação. Em seguida, abra XCode e selecione **ToDoListAmplifyo.xcworkspace** na pasta iOS do projeto e execute o aplicativo. | Desenvolvedor de aplicativos | | Atualize o arquivo de ponto de entrada do seu aplicativo para usar o componente withAuthenticator Higher-Order (HOC). | O HOC`withAuthenticator` fornece fluxos de login, cadastro e recuperação de senha na aplicação com apenas algumas linhas de código. Para obter mais informações, consulte [Opção 1: usar componentes de interface de usuário pré-criados](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components) no Amplify Dev Center. Além disso, [componentes de ordem superior na documentação](https://reactjs.org/docs/higher-order-components.html) do React.[See the AWS documentation website for more details](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)**Exemplo de código 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);
No simulador iOS, a aplicação mostra a tela de login disponibilizada pelo serviço Amazon Cognito. | Desenvolvedor de aplicativos | | Teste a configuração do serviço de autenticação. | No iOS Simulator, faça o seguinte:[See the AWS documentation website for more details](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Você também pode abrir o [console do Amazon Cognito](https://console.aws.amazon.com/cognito/) e verificar se um novo usuário foi criado, ou não, no **Banco de identidades**. | Desenvolvedor de aplicativos | ### Conecte uma AppSync API da AWS e um banco de dados do DynamoDB ao aplicativo | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Crie uma AppSync API da AWS e um banco de dados do DynamoDB. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Para a configuração do ToDoList aplicativo usada nesse padrão, aplique o exemplo de configuração a seguir.
**Exemplo de configurações de API e banco de dados**
? 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

**Exemplo de esquema GraphQL**
 type Todo @model {
   id: ID!
   name: String!
   description: String
}
| Desenvolvedor de aplicativos | | Implante a AppSync API da AWS. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Para a configuração do ToDoList aplicativo usada nesse padrão, aplique o exemplo de configuração a seguir.
**Exemplo de configurações AppSync da API AWS**A configuração a seguir cria a API GraphQL na AWS AppSync e uma tabela **Todo** no 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
| Desenvolvedor de aplicativos | | Conecte o front-end do aplicativo à AppSync API da AWS. | Para usar o ToDoList aplicativo de exemplo fornecido nesse padrão, copie o código do arquivo **App.js** no ios-todo-app GitHub repositório [aws-amplify-react-native-](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app). Em seguida, integre o código de exemplo em seu ambiente local.
O código de exemplo fornecido no arquivo **App.js** do repositório faz o seguinte:[See the AWS documentation website for more details](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | Desenvolvedor de aplicativos | ## 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/) (documentação do React)