Suralimentation de votre application native React avec AWS Amplify

AWS Amplify est une bibliothèque open source qui permet aux développeurs, et dans notre cas aux développeurs mobiles, d’ajouter une foule de fonctionnalités précieuses aux applications, notamment l’analyse, les notifications push, le stockage et l’authentification.

Amplify fonctionne non seulement avec React Native, mais aussi avec Vue, Angular, Ionic, React web et vraiment n’importe quel framework JavaScript. Dans ce didacticiel, nous allons démontrer certaines de ses fonctionnalités de base dans une application React Native.

L’avantage de cette bibliothèque est qu’elle résume ce qui était auparavant une installation et une configuration complexes pour toutes ces fonctionnalités dans un module facile à utiliser que nous pouvons ajouter à notre projet en utilisant NPM.

Nous couvrirons AWS Amplify en trois parties: l’authentification, le stockage et l’analyse.

Installation et configuration natives de React

Si vous souhaitez suivre, créez un nouveau projet React Native à l’aide d’Expo (Create React Native App) ou de la CLI React Native:

ou

Ensuite, allons-y et installons le aws-amplify bibliothèque utilisant soit yarn, soit npm:

Si vous utilisez Expo, vous pouvez ignorer l’étape suivante (liaison) car Expo fournit déjà les dépendances natives pour la prise en charge d’Amazon Cognito.

Si vous n’utilisez pas Expo, nous devons lier le Cognito bibliothèque (Amazon Cognito gère l’authentification) qui a été installée lorsque nous avons ajouté aws-amplify:

Configuration AWS

Maintenant que le projet React Native est créé et configuré, nous devons configurer les services Amazon avec lesquels nous allons interagir.

Dans le répertoire du nouveau projet, nous allons créer un nouveau projet Mobile Hub pour ce didacticiel. Pour créer ce projet, nous utiliserons l’AWSMobile CLI, mais n’hésitez pas à utiliser la console si vous êtes un utilisateur plus avancé. J’ai publié une vidéo YouTube avec un aperçu rapide de l’AWSMobile CLI si vous souhaitez en savoir plus.

Créons maintenant un nouveau projet Mobile Hub à la racine de notre nouveau répertoire de projet:

Après avoir créé votre projet et avoir votre fichier aws-exports (il est automatiquement créé pour vous en exécutant awsmobile init), nous devons configurer notre projet React Native avec notre projet AWS à l’aide d’AWS Amplify.

Pour ce faire, nous allons entrer dans App.js sous les dernières importations et ajoutez les trois lignes de code suivantes:

Authentification

L’authentification avec Amplify se fait en utilisant le Amazon Cognito un service. Nous utiliserons ce service pour permettre aux utilisateurs de se connecter et de s’inscrire à notre application!

Ajout d’une authentification à l’aide de l’AWSMobile CLI

Ajoutons la connexion utilisateur et Amazon Cognito à notre projet Mobile Hub. Dans le répertoire racine, exécutez les commandes suivantes:

Maintenant, nous allons avoir un nouveau groupe d’utilisateurs Amazon Cognito configuré et prêt à fonctionner. (Si vous souhaitez afficher les détails de ce nouveau service, accédez à AWS Console, cliquez sur Cognitoet choisissez le nom du nom du projet AWSMobile que vous avez créé.)

Ensuite, intégrons l’authentification avec Amazon Cognito et AWS Amplify.

Classe d’authentification

Commençons par examiner la classe principale que vous utiliserez pour avoir un accès complet aux services Amazon Cognito, le Auth classe.

le Auth classe a de nombreuses méthodes cela vous permettra de tout faire, de l’inscription et de la connexion des utilisateurs à la modification de leur mot de passe et tout le reste.

Il est également simple de travailler avec l’authentification à deux facteurs avec AWS Amplify à l’aide du Auth class, comme nous le verrons dans l’exemple suivant.

Exemple

Voyons comment vous pouvez vous inscrire et vous connecter à un utilisateur à l’aide d’Amazon Cognito et du Auth classe.

Nous pouvons réaliser un processus d’inscription et de connexion solide avec relativement peu de travail! Nous utiliserons le signUp, confirmSignUp, signIn, et confirmSignIn méthodes de la Auth classe.

Dans App.js, créons quelques méthodes qui géreront l’inscription de l’utilisateur avec une authentification à deux facteurs ainsi qu’un état pour contenir l’entrée utilisateur:

signUp crée la demande d’inscription initiale, qui enverra un SMS au nouvel utilisateur pour confirmer son numéro. confirmSignUp prend le code SMS et le nom d’utilisateur et confirme le nouvel utilisateur dans Amazon Cognito.

Nous allons également créer une interface utilisateur pour l’entrée de formulaire et un bouton, et câbler les méthodes de classe à ces éléments de l’interface utilisateur. Mettre à jour le render méthode à la suivante:

Enfin, nous mettrons à jour notre styles déclaration afin que nous ayons une meilleure interface utilisateur:

En relation :  Comment publier des livres électroniques sur Amazon avec Kindle Direct Publishing
Formulaire de connexion de base

Pour afficher la version finale de ce fichier, cliquez sur ici.

Maintenant, nous devrions pouvoir nous inscrire, recevoir un code de confirmation envoyé à notre numéro de téléphone et confirmer en tapant le code de confirmation.

Si vous souhaitez afficher les détails de cet utilisateur nouvellement créé, revenez à l’AWS Console, cliquez sur Cognito, choisissez le nom du nom du projet AWSMobile que vous avez créé et cliquez sur Utilisateurs et groupes dans le Réglages généraux menu sur la gauche.

Vous pouvez aller plus loin en mettant en œuvre la connexion et en confirmant la connexion. Jetons un coup d’œil aux méthodes pour signIn et confirmSignIn:

Accès aux données et à la session de l’utilisateur

Une fois l’utilisateur connecté, nous pouvons alors utiliser Auth pour accéder aux informations utilisateur!

On peut appeler Auth.currentUserInfo() pour obtenir les informations de profil de l’utilisateur (nom d’utilisateur, email, etc.) ou Auth.currentAuthenticatedUser() pour obtenir l’utilisateur idToken, JWTet de nombreuses autres informations utiles sur la session de connexion actuelle de l’utilisateur.

Analytique

AWS Amplify utilise Amazon Pinpoint pour gérer les métriques. Lorsque vous créez un nouveau projet Mobile Hub à l’aide de l’interface de ligne de commande ou du Mobile Hub, Amazon Pinpoint est automatiquement activé, configuré et prêt à fonctionner.

Si vous n’êtes pas déjà familier, Amazon Pinpoint est un service qui permet non seulement aux développeurs d’ajouter Analytics à leurs applications mobiles, mais leur permet également d’envoyer des notifications push, des messages SMS et des e-mails à leurs utilisateurs.

Avec AWS Amplify, nous pouvons envoyer des informations de session utilisateur sous forme de métriques à Amazon Pinpoint avec quelques lignes de code.

Ouvrons le tableau de bord Amazon Pinpoint afin que nous puissions afficher les événements que nous sommes sur le point de créer. Si vous ouvrez votre projet Mobile Hub dans la console AWS, choisissez Analytique dans le coin supérieur droit, ou allez directement dans Amazon Pinpoint à partir de la console et ouvrez le projet actuel.

Dans la barre de navigation bleu foncé sur la gauche, il y a quatre options: Analytique, Segments, Campagnes, et Direct. Choisir Analytique.

Console Pinpoint

Une fois que nous commencerons à créer des événements d’envoi, nous pourrons les voir dans cette vue de la console.

Nous sommes maintenant prêts à commencer le suivi! Dans App.js, supprimez tout le code du dernier exemple, nous laissant simplement une méthode de rendu contenant une vue de conteneur avec un message d’accueil de texte, aucun état, aucune méthode de classe et seulement un style de conteneur.

Nous importons également Analytics de aws-amplify:

Suivi des événements de base

Une métrique courante que vous souhaiterez peut-être suivre est le nombre de fois où l’utilisateur ouvre l’application. Commençons par créer un événement qui suivra cela.

Dans React Native, nous avons le AppState API, qui nous donnera l’état actuel de l’application actif, Contexte, ou inactif. Si l’état est actif, cela signifie que l’utilisateur a ouvert l’application. Si l’état est Contexte, cela signifie que l’application s’exécute en arrière-plan et que l’utilisateur est soit sur l’écran d’accueil, soit dans une autre application, tandis que inactif signifie que l’utilisateur effectue la transition entre l’actif et le premier plan, effectue plusieurs tâches à la fois ou est sur un appel téléphonique.

Lorsque l’application devient active, envoyons un événement à nos analyses indiquant que l’application a été ouverte.

Pour ce faire, nous allons appeler l’événement suivant:

Vous pouvez afficher l’API de cette méthode dans la documentation officielle. le record La méthode prend trois arguments: nom (chaîne), attributs (objet, facultatif) et métriques (objet, facultatif):

Mettons à jour la classe pour ajouter un écouteur d’événements lorsque le composant est monté, et le supprimons lorsque le composant est détruit. Cet auditeur appellera _handleAppStateChange chaque fois que l’état de l’application change:

Maintenant, créons le _handleAppStateChange méthode:

Maintenant, nous pouvons déplacer l’application en arrière-plan, l’ouvrir de nouveau, et cela devrait envoyer un événement à notre tableau de bord Analytics. Remarque: pour l’arrière-plan de l’application sur un simulateur iOS ou un émulateur Android, appuyez sur Commande-Maj-H.

En relation :  6 applications pour obtenir des mémoji sur Android et vous animer

Pour voir ces données dans le tableau de bord, cliquez sur Événements, et choisissez Application ouverte! dans la liste déroulante Événements:

Filtrage et affichage des événements Analytics

Vous remarquerez probablement également que vous disposez automatiquement d’autres données à partir de Mobile Hub, notamment données de session, inscription de l’utilisateur, et connexion de l’utilisateur. J’ai trouvé que c’était plutôt cool que toutes ces informations soient automatiquement enregistrées.

Suivi des événements détaillés

Passons maintenant au niveau suivant. Et si nous voulions suivre non seulement un utilisateur ouvrant l’application, mais également quel utilisateur a ouvert l’application et combien de fois il a ouvert l’application?

Nous pouvons facilement le faire en ajoutant un attribut à la deuxième métrique!

Agissons comme si nous avions un utilisateur connecté et suivons un nouvel événement que nous appellerons “Détails de l’utilisateur: application ouverte”.

Pour ce faire, mettez à jour l’événement d’enregistrement comme suit:

Analytics.record('User detail - App opened!', { username: 'NaderDabit' })

Ensuite, fermez et ouvrez l’application plusieurs fois. Nous devrions maintenant pouvoir voir plus de détails sur l’événement dans notre tableau de bord.

Pour ce faire, regardez à droite du un événement menu déroulant; il y a un Les attributs section. Ici, nous pouvons explorer les attributs de l’événement. Dans notre cas, nous avons le nom d’utilisateur, donc nous pouvons maintenant filtrer cet événement par nom d’utilisateur!

Ajout d'attributs et filtrage par attributs

Métriques d’utilisation

Le dernier élément que nous suivrons est les métriques d’utilisation. C’est le troisième argument pour record.

Ajoutons une métrique qui enregistre le temps accumulé pendant lequel l’utilisateur a été dans l’application. Nous pouvons le faire assez facilement en définissant une valeur de temps dans la classe, en l’incrémentant toutes les secondes, puis en envoyant ces informations à Amazon Pinpoint lorsque l’utilisateur ouvre l’application:

Ici, nous avons créé une valeur de temps et réglez-le sur . Nous avons également ajouté un nouveau startTimer méthode qui ajoutera 1 à la valeur de temps chaque seconde. Dans componentDidMount, nous appelons startTimer qui incrémentera la valeur de temps de 1 chaque seconde.

Nous pouvons maintenant ajouter un troisième argument à Analytics.record() qui enregistrera cette valeur sous forme de métrique!

Espace de rangement

Voyons comment nous pouvons utiliser Amplify avec Amazon S3 pour ajouter du stockage à notre application.

Pour ajouter S3 à votre projet Mobile Hub, exécutez les commandes suivantes:

Exemple d’utilisation

AWS Amplify a un Espace de rangement API que nous pouvons importer comme nous l’avons avec les autres API:

import { Storage } from 'aws-amplify

On peut alors appeler des méthodes sur Storage comme get, put, list, et remove pour interagir avec les éléments de notre seau.

Lorsqu’un compartiment S3 est créé, nous aurons automatiquement une image par défaut dans notre compartiment dans le dossier public; le mien s’appelle exemple-image.png. Voyons si nous pouvons utiliser AWS Amplifier pour lire et afficher cette image depuis S3.

Vue du dossier public du compartiment S3

Comme je l’ai mentionné ci-dessus, Storage a un get méthode que nous appellerons pour récupérer des éléments, et la méthode pour récupérer cette image ressemblerait à ceci:

Pour démontrer cette fonctionnalité dans notre application React Native, créons une fonctionnalité qui récupère cette image de S3 et la montre à notre utilisateur.

Nous devrons importer Image de React Native, ainsi que Storage de aws-amplify.

Maintenant, nous aurons besoin d’un état pour contenir cette image, ainsi que d’une méthode pour récupérer l’image et la maintenir dans l’état. Ajoutons ce qui suit à notre classe au-dessus de la méthode de rendu:

Enfin, ajoutons des éléments d’interface utilisateur pour récupérer l’image et la rendre dans l’interface utilisateur:

Captures d'écran de l'application montrant la fonction Obtenir une image

Maintenant, nous devrions pouvoir cliquer sur le bouton et visualiser l’image depuis S3!

Pour afficher la version finale de ce fichier, cliquez sur ici.

Conclusion

Global, AWS Amplify fournit un moyen très simple d’accomplir ce qui était autrefois une fonctionnalité complexe avec peu de code, s’intégrant de manière transparente à de nombreux services AWS.

Nous n’avons pas couvert les notifications push, qui ont également été récemment ajoutées à AWS Amplify, mais celles-ci seront couvertes dans un prochain article!

AWS Amplify est activement maintenu, donc si vous avez des demandes de fonctionnalités ou des idées, n’hésitez pas à commenter, soumettez un problème ou demande de tirage, ou tout simplement star ou regarder le projet si vous souhaitez être tenu au courant des futures fonctionnalités!

Et en attendant, consultez certains de nos autres articles sur le codage des applications React Native.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.