Utilizzo di React Native con AWS Amplify per l'integrazione di Cloud Backend

Modellazione dati con GraphQL (AppSync)

La soluzione di dati principale di Amplify è GraphQL con AWS AppSync[[]. Fornisce un API flessibile con abbonamenti in tempo reale, autorizzazione in grana fine e sincronizzazione automatica dei dati.

amplify add api

Scegliere GraphQL e il CLI vi chiederà di definire lo schema. Amplify genera uno schema di esempio che è possibile modificare. Ad esempio, un semplice modello Todo:

type Todo @model {
 id: ID!
 name: String!
 description: String
 createdAt: AWSDateTime!
}

La direttiva crea automaticamente tabelle DynamoDB, risolutori e operazioni CRUD. Dopo aver spinto ([[]), Amplify genera file TypeScript/JavaScript (come e ]] che è possibile importare nella vostra app.

Esempio: Query and Mutate Data[

import { API, graphqlOperation } from 'aws-amplify';
import { listTodos } from './graphql/queries';
import { createTodo } from './graphql/mutations';

async function fetchTodos() {
 const result = await API.graphql(graphqlOperation(listTodos));
 return result.data.listTodos.items;
}

async function addTodo(name, description) {
 const todo = { name, description };
 const result = await API.graphql(graphqlOperation(createTodo, { input: todo }));
 return result.data.createTodo;
}

Per aggiornamenti in tempo reale, utilizzare gli abbonamenti:

import { onCreateTodo } from './graphql/subscriptions';

const subscription = API.graphql(graphqlOperation(onCreateTodo)).subscribe({
 next: (event) => console.log('New todo:', event.value.data.onCreateTodo),
});

Le API GraphQL supportano anche modelli di autorizzazione complessi utilizzando i gruppi Cognito, IAM o le chiavi API.

DataStore – Sincronizzazione Offline-First & Real-Time

Amplify DataStore è un potente motore che fornisce storage locale, risoluzione automatica dei conflitti e sincronizzazione senza interruzioni con il cloud (tramite AppSync). È ideale per applicazioni che necessitano di un supporto offline robusto senza scrivere logica di sincronizzazione personalizzata.

Per utilizzare DataStore, prima di definire i modelli utilizzando l'Amplify CLI (che genera una cartella ).

import { DataStore } from 'aws-amplify';
import { Todo } from './models';

async function saveTodo() {
 await DataStore.save(new Todo({
 name: 'Buy groceries',
 description: 'Milk, eggs, bread'
 }));
}

async function queryTodos() {
 const todos = await DataStore.query(Todo);
 return todos;
}

I conflitti (ad esempio, le modifiche offline da due dispositivi) vengono risolti utilizzando una strategia di ultima generazione, ma è possibile personalizzare la risoluzione dei conflitti con i gestori personalizzati.

Archiviazione di file e immagini (S3)

Amplify Storage semplifica i file caricati e scaricabili utilizzando Amazon S3. Per aggiungere storage:

amplify add storage

Scegli contenuti (immagini, audio, video, ecc.) e configura i livelli di accesso pubblico/privato. Quindi carica i file dalla tua app React Native:

import { Storage } from 'aws-amplify';

async function uploadPhoto(uri) {
 const response = await fetch(uri);
 const blob = await response.blob();
 const result = await Storage.put('photo.jpg', blob, {
 contentType: 'image/jpeg',
 });
 console.log('File uploaded at:', result.key);
}

Per recuperare un URL firmato per il display:

const imageUrl = await Storage.get('photo.jpg');
// Use imageUrl in an Image component

Amplify gestisce anche il ridimensionamento e la trasformazione (come la generazione di miniature) quando lo configurate tramite il CLI.

Funzioni senza server (Lambda)

Per la logica di backend personalizzata, Amplify si integra con AWS Lambda.

amplify add function

Scegli un modello (ad esempio, una semplice funzione CRUD o un'attività pianificata). Amplify creerà una funzione Lambda localmente e la infili con le tue API o altre risorse.Potete quindi invocare tramite l'API GraphQL (come un risolutore) o direttamente utilizzando la libreria Amplify Functions:

import { Func } from 'aws-amplify';

const result = await Func.invoke('myFunction', { input: 'data' });

Questo è ideale per attività come l'elaborazione di pagamento, la trasformazione di immagini o l'integrazione con API di terze parti.

Casi di utilizzo avanzate e migliori pratiche

Modalità off-line e risoluzione dei conflitti

Amplify DataStore gestisce in modo offline in modo trasparente, ma per le applicazioni di produzione si dovrebbe considerare:

• Strategie di risoluzione dei conflitti[[[] – DataStore utilizza una convalutazione ottimistica. Se due client modificano lo stesso record offline, il conflitto può essere risolto automaticamente (ultimo scrittore vince) o con logica personalizzata usando .
• Selettivo sincronizzazione[] – Utilizzare i predicati per sincronizzare solo un sottoinsieme di dati (ad esempio, “solo i todos dall'utente corrente”).
• Monitoring sync status[[ – Iscriviti a ] per sincronizzare i progressi e mostrare gli indicatori offline.

Autenticazione sicura con autenticazione multi-factor (MFA)

Amplify Auth supporta SMS o TOTP basato MFA. Abilita durante [, quindi nella tua app richiede agli utenti di impostare MFA dopo l'iscrizione. Esempio:

import { Auth } from 'aws-amplify';

async function setupMFA() {
 const user = await Auth.currentAuthenticatedUser();
 const code = await Auth.setupTOTP(user);
 // Show QR code to user
}

Notifiche in tempo reale con Amazon Pinpoint

Amplify si integra anche con Amazon Pinpoint per le notifiche push. Aggiungi analisi ([) e quindi utilizzare la categoria Notifiche:

import { Notifications } from 'aws-amplify';

Notifications.Push.onNotificationOpened((notification) => {
 console.log('Notification opened:', notification);
});

Questo funziona sia con iOS (APN) che Android (FCM).

Ottimizzazione delle prestazioni

• Dimensioni di bundle[[] – Utilizzare la formazione degli alberi: importare solo le categorie di cui hai bisogno (ad esempio ) invece dell'intera biblioteca.
• Piccole inizializzazione[ – Ritardo fino a quando l'applicazione ha caricato l'interfaccia utente critica.
• Paginazione dei dati[ – Quando si utilizzano le query GraphQL, implementare la paginazione basata sul cursore con e ] per evitare il caricamento di grandi set di dati.
• Immagini di compressione[] – Prima di caricare su S3, ridimensionare o comprimere le immagini sul lato client utilizzando librerie come .

Pitfalls comuni da evitare

• Non maneggiare lo stato di rete[[[] – Amplifica funziona offline, ma si dovrebbe ascoltare i cambiamenti di connettività e mostrare l'interfaccia utente appropriata.
• Over-fetching in GraphQL[[] – Specificare sempre i campi di cui hai bisogno nelle query.
• Ignorando le autorizzazioni IAM[ – Quando si utilizza l'aut basato su IAM (ad esempio, per l'accesso alle API pubbliche), assicurarsi che i ruoli Cognito Identity Pool abbiano le politiche giuste per AppSync e S3.
• Utilizzando il flusso di lavoro gestito da Expo[[] – Mentre Expo funziona, alcune funzionalità Amplify (come le notifiche push e alcuni moduli nativi) richiedono il flusso di lavoro nudo o EAS Build con plugin personalizzati.
• Skipping the CLI’s local testing[ – Usa [] per testare le API e le funzioni di GraphQL localmente prima di spingere al cloud.

Vantaggi di Combinare React Native con AWS Amplify

• Sviluppo accelerato[[] – Amplifica le risorse delle disposizioni e genera il codice client, in modo da poter concentrarsi sull'interfaccia utente.
• Scalability[] – Tutti i servizi (Cognito, AppSync, DynamoDB, S3) sono completamente gestiti e auto-scala per gestire milioni di utenti.
• Sicurezza del blocco[[[] – Amplify applica le best practice AWS come la crittografia a riposo, ruoli IAM e controllo di accesso in granito.
• Consistenza cromata[[] – Lo stesso backend funziona senza soluzione di continuità con React Native, iOS, Android e applicazioni web, riducendo la manutenzione in testa.
• Le prime funzionalità di Offline[] – DataStore offre un'esperienza offline pronta alla produzione senza codice personalizzato.
• Cost-efficace[[] – Paga solo per le risorse AWS che utilizzate, con un generoso livello di libertà per piccoli progetti.

Conclusioni

Amplify elimina le attività di configurazione dell'autenticazione, la creazione di database, la creazione di API e l'implementazione di funzionalità in tempo reale. Seguire i passaggi in questa guida – iniziando Amplify, aggiungendo l'autenticazione, impostando un'API GraphQL, integrando DataStore e sfruttando le funzioni di server senza nave – è possibile eseguire una completa autenticazione.

Per un'esplorazione più approfondita, fare riferimento alle seguenti risorse: