Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà. # Crea un'app mobile React Native senza server utilizzando AWS Amplify *Deekshitulu Pentakota, Amazon Web Services* ## Riepilogo Questo modello mostra come creare un backend serverless per un'app mobile React Native utilizzando AWS Amplify e i seguenti servizi AWS: + AWS AppSync + Amazon Cognito + Amazon DynamoDB Dopo aver configurato e distribuito il backend dell'app utilizzando Amplify, Amazon Cognito autentica gli utenti dell'app e li autorizza ad accedere all'app. AWS interagisce AppSync quindi con l'app frontend e con una tabella DynamoDB di backend per creare e recuperare dati. **Nota** Questo modello utilizza una semplice app "ToDoList" come esempio, ma puoi utilizzare una procedura simile per creare qualsiasi app mobile React Native. ## Prerequisiti e limitazioni **Prerequisiti** + Un account AWS attivo + [Interfaccia a riga di comando Amplify (Amplify CLI), installata e configurata](https://docs.amplify.aws/cli/start/install/) + XCode (qualsiasi versione) + Microsoft Visual Studio (qualsiasi versione, qualsiasi editor di codice, qualsiasi editor di testo) + Familiarità con Amplify + Familiarità con Amazon Cognito + Familiarità con AWS AppSync + Familiarità con DynamoDB + Familiarità con Node.js + Familiarità con npm + Familiarità con React e React Native + Familiarità con JavaScript e ECMAScript 6 () ES6 + Familiarità con GraphQL ## Architecture Il diagramma seguente mostra un'architettura di esempio per l'esecuzione del backend di un'app mobile React Native nel cloud AWS: ![Flusso di lavoro per l'esecuzione di un'app mobile React Native con servizi AWS.](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/images/pattern-img/c95e0150-5762-4c90-946c-efa3a22913e4/images/5beff5f9-9d14-49dc-a046-b74e5bfbd13f.png) Il diagramma mostra la seguente architettura: 1. Amazon Cognito autentica gli utenti dell'app e li autorizza ad accedere all'app. 1. Per creare e recuperare dati, AWS AppSync utilizza un'API GraphQL per interagire con l'app frontend e una tabella DynamoDB di backend. ## Tools (Strumenti) **Servizi AWS** + [AWS Amplify è un set di strumenti e funzionalità appositamente progettati che aiuta gli sviluppatori web e mobili di frontend a creare rapidamente applicazioni complete su AWS](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html). + [AWS AppSync](https://docs.aws.amazon.com/appsync/latest/devguide/what-is-appsync.html) fornisce un'interfaccia GraphQL scalabile che aiuta gli sviluppatori di applicazioni a combinare dati provenienti da più fonti, tra cui Amazon DynamoDB, AWS Lambda e HTTP. APIs + [Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) fornisce autenticazione, autorizzazione e gestione degli utenti per app Web e mobili. + [Amazon DynamoDB](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/Introduction.html) è un servizio di database NoSQL interamente gestito che offre prestazioni elevate, prevedibili e scalabili. **Codice** Il codice per l'applicazione di esempio utilizzata in questo modello è disponibile nel ios-todo-app repository GitHub [aws-amplify-react-native-](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app). Per utilizzare i file di esempio, segui le istruzioni nella sezione **Epics** di questo pattern. ## Epiche ### Crea ed esegui la tua app React Native | Operazione | Description | Competenze richieste | | --- | --- | --- | | Configura un ambiente di sviluppo React Native. | Per istruzioni, consulta [Configurazione dell'ambiente di sviluppo](https://reactnative.dev/docs/next/environment-setup) nella documentazione di React Native. | Sviluppatore di app | | Crea ed esegui l'app mobile ToDoList React Native in iOS Simulator. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | Sviluppatore di app | ### Inizializza un nuovo ambiente di backend per l'app | Operazione | Description | Competenze richieste | | --- | --- | --- | | Crea i servizi di backend necessari per supportare l'app in Amplify. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Per la configurazione ToDoList dell'app utilizzata in questo modello, applica la seguente configurazione di esempio.
**Esempio di impostazioni di configurazione dell'app 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

Per ulteriori informazioni, consulta [Creare un nuovo backend Amplify nella documentazione di Amplify](https://docs.amplify.aws/lib/project-setup/create-application/q/platform/js/#create-a-new-amplify-backend) Dev Center.Il `amplify init` comando fornisce le seguenti risorse utilizzando [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/it_it/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | Sviluppatore di app | ### Aggiungi l'autenticazione Amazon Cognito alla tua app Amplify React Native | Operazione | Description | Competenze richieste | | --- | --- | --- | | Crea un servizio di autenticazione Amazon Cognito. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Per la configurazione ToDoList dell'app utilizzata in questo modello, applica la seguente configurazione di esempio.
**Esempio di impostazioni di configurazione del servizio di autenticazione**
? 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
Il `amplify add auth` comando crea le cartelle, i file e i file di dipendenza necessari in una cartella locale (**amplify**) all'interno della directory principale del progetto. Per la configurazione ToDoList dell'app utilizzata in questo schema, il **file aws-exports.js** viene creato a questo scopo. | Sviluppatore di app | | Distribuisci il servizio Amazon Cognito nel cloud AWS. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Per vedere i servizi distribuiti nel tuo progetto, vai alla console Amplify eseguendo il seguente comando:`amplify console` | Sviluppatore di app | | Installa le librerie Amplify richieste per React Native e le CocoaPods dipendenze per iOS. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | Sviluppatore di app | | Importa e configura il servizio Amplify. | Nel file del punto di ingresso dell'app (ad esempio, **App.js**), importa e carica il file di configurazione del servizio Amplify inserendo le seguenti righe di codice:
import Amplify from 'aws-amplify'
import config from './src/aws-exports'
Amplify.configure(config)
Se ricevi un errore dopo l'importazione del servizio Amplify nel file del punto di ingresso dell'app, interrompi l'app. Quindi, apri XCode e seleziona il **ToDoListAmplifyfile.xcworkspace** dalla cartella iOS del progetto ed esegui l'app. | Sviluppatore di app | | Aggiorna il file del punto di ingresso dell'app per utilizzare il componente WithAuthenticator Higher-order (HOC). | L'`withAuthenticator`HOC fornisce flussi di lavoro di accesso, registrazione e password dimenticata nell'app utilizzando solo poche righe di codice. Per ulteriori informazioni, consulta [Opzione 1: utilizzare componenti dell'interfaccia utente predefiniti](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components) in Amplify Dev Center. Inoltre, [componenti di ordine superiore](https://reactjs.org/docs/higher-order-components.html) nella documentazione di React.[See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)**Esempio di codice 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);
In iOS Simulator, l'app mostra la schermata di accesso fornita dal servizio Amazon Cognito. | Sviluppatore di app | | Verifica la configurazione del servizio di autenticazione. | In iOS Simulator, procedi come segue:[See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Puoi anche aprire la [console Amazon Cognito](https://console.aws.amazon.com/cognito/) e verificare se un nuovo utente è stato creato o meno nel **pool di identità**. | Sviluppatore di app | ### Connect un' AppSync API AWS e un database DynamoDB all'app | Operazione | Description | Competenze richieste | | --- | --- | --- | | Crea un' AppSync API AWS e un database DynamoDB. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Per la configurazione dell' ToDoList app utilizzata in questo modello, applica la seguente configurazione di esempio.
**Esempio di impostazioni di configurazione dell'API e del database**
? 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

**Esempio di schema GraphQL**
 type Todo @model {
   id: ID!
   name: String!
   description: String
}
| Sviluppatore di app | | Implementa l' AppSync API AWS. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)Per la configurazione ToDoList dell'app utilizzata in questo modello, applica la seguente configurazione di esempio.
**Esempio di impostazioni di configurazione AppSync dell'API AWS**La seguente configurazione crea l'API GraphQL in AWS AppSync e una tabella **Todo** 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
| Sviluppatore di app | | Connect il frontend dell'app all' AppSync API AWS. | Per utilizzare l' ToDoList app di esempio fornita in questo modello, copia il codice dal file **App.js** nel ios-todo-app GitHub repository [aws-amplify-react-native-](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app). Quindi, integra il codice di esempio nel tuo ambiente locale.
Il codice di esempio fornito nel file **App.js** del repository esegue le seguenti operazioni:[See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | Sviluppatore di app | ## Risorse correlate + [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/) (documentazione React)