Introduction pour réagir aux problèmes des Autochtones et des SSFE

React Native est devenu un cadre de référence pour le développement d'applications mobiles multiplateforme utilisant JavaScript et React. Sa capacité à produire des expériences natives sur iOS et Android à partir d'une base de code unique en fait un favori parmi les startups et les entreprises. Cependant, la construction des services de backend dont les applications mobiles modernes ont besoin – authentification, persistance des données, mises à jour en temps réel, stockage de fichiers et API sans serveur – peut être longue et complexe. Cela signifie que AWS Amplify est disponible. Amplify est une plateforme de développement complète qui fournit un ensemble d'outils, de bibliothèques et de services pour construire des applications fonctionnant au cloud rapidement et en toute sécurité.

Cet article fournit une plongée profonde dans l'intégration de React Native avec AWS Amplify pour l'intégration de backends dans le cloud. Vous allez apprendre à configurer Amplify dans un projet React Native, configurer l'authentification, le stockage de données et les API, et explorer des fonctionnalités avancées comme la synchronisation hors ligne et les données en temps réel.

Qu'est-ce que l'amplification AWS?

AWS Amplify est un cadre de développement complet qui simplifie le processus de construction et de déploiement d'applications compatibles avec le cloud. Il fournit un ensemble de bibliothèques conçues à des fins spécifiques (Bibliothèques Amplify) pour des cas d'utilisation courante tels que l'authentification, le stockage de données, les prédictions AI/ML et les notifications de poussée. Sous le capot, Amplify exploite les services AWS de base comme AWS Cognito[ (authentification utilisateur), AWS AppSync (API de GraphQL avec abonnements en temps réel), Amazon DynamoDB (base de données NoSQL), Amazon S3 (logage de fichiers), et AWS Lambda (fonctions sans serveur).

Les principaux avantages de l'utilisation d'Amplify sont les suivants :

  • Prototypage rapide – Dos de l'échafaudage en quelques minutes.
  • Infrastructures de déclaration – Définir des ressources en utilisant des commandes CLI simples; Amplifier les poignées AWS CloudFormation dans les coulisses.
  • Meilleures pratiques de construction[ – Amplify applique automatiquement la sécurité AWS et l'évolutivité.
  • Capacité hors ligne et en temps réel – Le moteur DataStore permet le stockage local avec résolution de conflit automatique et synchronisation.
  • Multi-plateforme – Le même moteur fonctionne sur React Native, iOS, Android, Web et Flutter.

Mettre en place un projet autochtone réagissant avec AWS Amplify

Préalables

Avant de commencer, assurez-vous que vous avez installé les éléments suivants :

  • Node.js (version 16 ou ultérieure)
  • AWS CLI et AWS amplifient CLI ()
  • Un compte AWS avec les permissions appropriées de l'IAM
  • Réagir Native CLI ou Expo CLI (Expo fonctionne bien avec Amplify pour des projets plus simples)

Si vous commencez à zéro, créez un nouveau projet React Native :

npx react-native init MyAmplifyApp
// or for Expo
npx create-expo-app MyAmplifyApp

Installation des bibliothèques d'amplification

Dans votre dossier de projet, installez la bibliothèque Amplify centrale et le paquet de persistance spécifique à React Native (pour stocker des jetons et des données hors ligne) :

npm install aws-amplify @react-native-async-storage/async-storage

Pour iOS, vous devrez peut-être installer les dépendances de CocoaPods :

cd ios && pod install && cd ..

Initialisation de l'amplification dans votre projet

Lancez l'Amplifier CLI pour créer un nouveau projet de backend. L'Amplifier CLI vous invite à sélectionner les ressources cloud que vous souhaitez :

amplify init

Suivez les instructions interactives : choisissez votre éditeur de texte préféré, sélectionnez le type d'application (JavaScript) et spécifiez le répertoire source (par exemple pour React Native). Après initialisation, Amplify crée un dossier et un fichier contenant la configuration. Ensuite, ajoutez les services dont vous avez besoin. Par exemple, pour ajouter l'authentification :

amplify add auth

Sélectionnez la configuration par défaut (Pool utilisateur Cognito). Puis poussez les modifications pour créer les ressources de votre compte AWS :

amplify push

Amplify mettra à jour le fichier avec les nouveaux paramètres de ressources.

Configuration de l'amplificateur dans l'application

Dans votre fichier d'entrée principal (p. ex. ), importez et configurez Amplify:

import { Amplify } from 'aws-amplify';
import awsconfig from './src/aws-exports'; // adjust path as needed
Amplify.configure(awsconfig);

Maintenant, votre application React Native est prête à utiliser les fonctionnalités Amplify.

Intégration des caractéristiques de base

Authentification

Amplify Auth simplifie la gestion des utilisateurs par l'inscription, l'inscription, la récupération de mot de passe et l'authentification multi-facteurs (MFA).

Exemple: Connexion

import { Auth } from 'aws-amplify';

async function signIn(username, password) {
 try {
 const user = await Auth.signIn(username, password);
 console.log('Sign-in successful', user);
 } catch (error) {
 console.log('Error signing in', error);
 }
}

Pour vérifier si un utilisateur est authentifié, vous pouvez appeler . Amplify gère également le jeton de rafraîchissement automatiquement, de sorte que vous n'avez jamais à gérer l'expiration JWT manuellement.

Pour un flux d'authentification complet (sign-up, confirmation de l'inscription, inscription, inscription), consultez la documentation officielle React Native Auth.

Modélisation des données avec GraphQL (AppSync)

La solution de données primaires est GraphQL avec AWS AppSync. Elle fournit une API flexible avec abonnements en temps réel, autorisation à grain fin et synchronisation automatique des données. Pour ajouter une API GraphQL, exécutez :

amplify add api

Choisissez GraphQL, et le CLI vous demandera de définir votre schéma. Amplify génère un schéma d'exemple que vous pouvez modifier. Par exemple, un modèle Todo simple:

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

La directive crée automatiquement des tables DynamoDB, des résolveurs et des opérations CRUD. Après avoir poussé (), Amplify génère des fichiers TypeScript/JavaScript (comme et requêtes) que vous pouvez importer dans votre application.

Exemple: données de requêtes et de mutations

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

Pour les mises à jour en temps réel, utilisez les abonnements :

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

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

Les API de GraphQL supportent également les modèles d'autorisation complexes à l'aide de groupes Cognito, IAM ou API. Pour plus de détails, consultez le guide API GraphQL.

DataStore – Sync hors ligne & en temps réel

Amplify DataStore est un moteur puissant qui fournit un stockage local, une résolution de conflit automatique et une synchronisation transparente avec le cloud (via AppSync). Il est idéal pour les applications qui ont besoin d'un support hors ligne robuste sans écrire une logique de synchronisation personnalisée.

Pour utiliser DataStore, définissez d'abord vos modèles en utilisant le dossier Amplify CLI (qui génère un dossier . Ensuite, dans votre application, vous pouvez effectuer des opérations comme:

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

DataStore synchronise automatiquement les modifications au cloud lorsqu'une connexion est disponible. Les conflits (p. ex., les modifications hors ligne à partir de deux appareils) sont résolus par défaut en utilisant une stratégie de dernier auteur-gagnant, mais vous pouvez personnaliser la résolution de conflit avec des gestionnaires personnalisés.

Stockage des fichiers et des images (S3)

Amplify Storage simplifie les téléchargements et téléchargements de fichiers en utilisant Amazon S3. Pour ajouter le stockage:

amplify add storage

Choisissez Contenu (images, audio, vidéo, etc.) et configurez les niveaux d'accès public/privé. Ensuite, téléchargez les fichiers de votre application 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);
}

Pour récupérer une URL signée pour l'affichage :

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

Amplifier également la gestion du redimensionnement et de la transformation (comme générer des vignettes) lorsque vous le configurez via le CLI.

Fonctions sans serveur (Lambda)

Pour une logique de moteur personnalisée, Amplify s'intègre à AWS Lambda. Ajouter une fonction:

amplify add function

Choisissez un modèle (par exemple, une simple fonction CRUD ou une tâche programmée). Amplify créera une fonction Lambda localement et la câlinera avec votre API ou d'autres ressources. Vous pouvez ensuite l'invoquer via l'API GraphQL (en tant que résolveur) ou directement en utilisant la bibliothèque des fonctions Amplify:

import { Func } from 'aws-amplify';

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

Ceci est idéal pour des tâches comme le traitement de paiement, la transformation d'image ou l'intégration avec des API tierces.

Cas d'utilisation avancée et pratiques exemplaires

Mode hors ligne et résolution de conflits

Amplify DataStore gère le mode hors ligne de manière transparente, mais pour les applications de production, vous devriez considérer:

  • Stratégies de résolution de conflit – DataStore utilise une convergence optimiste. Si deux clients modifient le même enregistrement hors ligne, le conflit peut être résolu automatiquement (le dernier auteur gagne) ou avec une logique personnalisée en utilisant .
  • Sélectivité synchronique – Utiliser des prédicats pour synchroniser seulement un sous-ensemble de données (par exemple, -"seuls les todos par l'utilisateur courant).
  • – Abonnez-vous à pour synchroniser les progrès et afficher les indicateurs hors ligne.

Authentification sécurisée avec authentification multi-facteurs (MFA)

Amplify Auth prend en charge les MFA SMS ou TOTP. Activez-le pendant , puis dans votre application, invitez les utilisateurs à configurer MFA après l'inscription. Exemple :

import { Auth } from 'aws-amplify';

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

Notifications en temps réel avec Amazon Pinpoint

Amplifier également les intégrations avec Amazon Pinpoint pour les notifications push. Ajouter l'analyse () puis utiliser la catégorie Notifications :

import { Notifications } from 'aws-amplify';

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

Cela fonctionne avec iOS (APN) et Android (FCM).

Optimisations des performances

  • Taille du bassin[ – Utilisez le arbre-shaking: importez seulement les catégories dont vous avez besoin (par exemple, ]) au lieu de la bibliothèque entière.
  • initialisation lassime – Retard jusqu'à ce que l'application ait chargé l'interface utilisateur critique.
  • Pagination de données – Lorsque vous utilisez des requêtes GraphQL, implémentez la pagination en fonction du curseur avec et pour éviter de charger de gros ensembles de données.
  • Compresser les images – Avant de télécharger sur S3, redimensionner ou compresser les images du côté client en utilisant des bibliothèques comme .

Pièges fréquents à éviter

  • N'utilise pas l'état réseau – Amplify fonctionne hors ligne, mais vous devriez écouter les changements de connectivité et afficher l'interface utilisateur appropriée.
  • Sur-perspective dans GraphQL – Toujours spécifier les champs dont vous avez besoin dans les requêtes. Utilisez des fragments pour sélectionner des champs réutilisables.
  • Ignorer les permissions de MAI – Lorsque vous utilisez l'authentification basée sur l'IAM (p. ex., pour l'accès public à l'API), assurez-vous que vos rôles de Cognito Identity Pool ont les bonnes politiques pour AppSync et S3.
  • Utilisation du workflow géré par Expo – Pendant que Expo fonctionne, certaines fonctionnalités d'amplification (comme les notifications de poussée et certains modules natifs) nécessitent le workflow nu ou EAS Build avec des plugins personnalisés.
  • Passer les tests locaux de CLI=1 – Utiliser pour tester les API et les fonctions de GraphQL localement avant de pousser vers le nuage.

Avantages de combiner les réactes autochtones et les AWS amplifier

  • Développement accéléré – Améliorez les ressources de provisions et génèrez du code client, afin de pouvoir vous concentrer sur l'interface utilisateur.
  • Évoluabilité – Tous les services (Cognito, AppSync, DynamoDB, S3) sont entièrement gérés et à l'échelle automatique pour gérer des millions d'utilisateurs.
  • Sécurité de construction[ – Amplify applique les meilleures pratiques d'AWS comme le chiffrement au repos, les rôles de l'IAM et le contrôle d'accès à grain fin.
  • Constance de la plate-forme de choc[ – Le même moteur fonctionne sans heurt avec React Native, iOS, Android et applications web, réduisant les frais de maintenance.
  • Capacité hors ligne – DataStore fournit une expérience hors ligne prête à la production sans code personnalisé.
  • Coût-efficace[ – Ne payez que pour les ressources AWS que vous utilisez, avec un généreux niveau gratuit pour les petits projets.

Conclusion

React Native et AWS Amplifier forment un puissant duo pour la construction d'applications mobiles modernes avec des backends cloud. Amplifier élimine les tâches longues de configuration de l'authentification, de configuration des bases de données, de création d'API et de mise en œuvre de fonctionnalités en temps réel. En suivant les étapes de ce guide – initialiser Amplify, ajouter l'authentification, configurer une API GraphQL, intégrer DataStore et exploiter des fonctions sans serveur – vous pouvez expédier une application mobile à pleine capacité dans une fraction du temps qu'il faudra en utilisant le développement de backend traditionnel.

Pour une exploration plus approfondie, veuillez consulter les ressources suivantes :

En adoptant cette pile, votre équipe peut fournir des applications mobiles robustes, sécurisées et évolutives avec moins de complexité de backend. Commencez votre prochain projet avec React Native et AWS Amplify, et découvrez la différence d'un backend cloud entièrement géré.