Share
Ce que vous allez créerAWS Amplify est une bibliothèque à source ouverte qui permet aux développeurs, et dans notre cas aux développeurs mobiles, d'ajouter une foule de fonctionnalités utiles 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 présenter certaines de ses fonctionnalités essentielles au sein d’une application React Native..
L’avantage de cette bibliothèque est qu’elle résume ce qui était autrefois une configuration et une configuration complexes pour toutes ces fonctionnalités dans un module facile à utiliser que nous pouvons ajouter à notre projet en utilisant NPM..
Nous allons couvrir AWS Amplify en trois parties: authentification, stockage et analyse..
Si vous souhaitez suivre, créez un nouveau projet React Native en utilisant Expo (Créer une application native React) ou l'interface de ligne de commande React Native:
réact-native init RNAmplify
ou
créer-réagir-native-app RNAmplify
Ensuite, allons-y et installons le aws-amplifier bibliothèque en utilisant soit fil ou npm:
fil ajouter aws-amplifier
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 relier le Cognito bibliothèque (Amazon Cognito gère l’authentification) qui a été installée lors de l’ajout de aws-amplifier:
lien réactif natif amazon-cognito-identité-js
Maintenant que le projet Native React 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'AWS AWSMobile CLI, mais n'hésitez pas à utiliser la console si vous êtes un utilisateur plus avancé. J'ai posté une vidéo sur YouTube avec un aperçu rapide de la AWSMobile CLI si vous souhaitez en savoir plus..
Créons maintenant un nouveau projet Mobile Hub à la racine de notre nouveau répertoire de projets:
awsmobile init
Après avoir créé votre projet et avoir votre fichier aws-exports (ceci est automatiquement créé pour vous en lançant awsmobile init), nous devons configurer notre projet React Native avec notre projet AWS utilisant AWS Amplify.
Pour ce faire, nous allons entrer dans App.js sous les dernières importations et ajoutez les trois lignes de code suivantes:
importer Amplify, Auth depuis 'aws-amplify' import config depuis './aws-exports' Amplify.configure (config)
L'authentification avec Amplify est effectuée à l'aide du service Amazon Cognito. Nous utiliserons ce service pour permettre aux utilisateurs de se connecter et de s'inscrire à notre application.!
Ajoutons la connexion utilisateur et Amazon Cognito à notre projet Mobile Hub. Dans le répertoire racine, exécutez les commandes suivantes:
La connexion utilisateur awsmobile active la commande awsmobile
Nous allons maintenant 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 à la console AWS, cliquez sur Cognito, puis choisissez le nom du nom de projet AWSMobile que vous avez créé.)
Intégrons ensuite l'authentification avec Amazon Cognito et AWS Amplify..
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 La classe dispose de nombreuses méthodes qui vous permettent de tout faire, depuis l'inscription et la connexion des utilisateurs jusqu'à la modification de leur mot de passe, etc..
Il est également simple de travailler avec une authentification à deux facteurs avec AWS Amplify à l'aide du Auth classe, comme nous le verrons dans l'exemple suivant.
Voyons comment vous pouvez vous connecter et connecter un utilisateur à l'aide d'Amazon Cognito et de la Auth classe.
Nous pouvons réaliser un flux d’inscription et d’inscription solide avec relativement peu de travail! Nous allons utiliser le s'inscrire, confirmerSignUp, se connecter, et confirmerSignInmé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 que l’état de la saisie de l’utilisateur:
Accentsconagua
state = nom d'utilisateur: ", email:", numéro de téléphone: ", mot de passe:", authCode: ", utilisateur: onChangeText = (clé, valeur) => this.setState ([clé]: valeur) signUp () const nom d'utilisateur, mot de passe, email, numéro de téléphone = this.state Auth.signUp (nom d'utilisateur, mot de passe, attributs: numéro de téléphone, email) .then (() => console.log ('utilisateur succès de l'inscription !! ')) .catch (err => console.log (' erreur de connexion de l'utilisateur: ', err)) confirmSignUp () Auth.confirmSignUp (this.state.username, this.state.authCode) .then (() => console.log ('confirmer le succès de l'inscription de l'utilisateur !!')) .catch (err => console.log ('erreur de confirmation de la signature de l'utilisateur:', err))s'inscrire crée la demande d'inscription initiale, qui enverra un SMS au nouvel utilisateur pour confirmer son numéro. confirmerSignUp 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, puis relier les méthodes de classe à ces éléments d'interface utilisateur. Mettre à jour le rendre méthode à la suivante:
render () return () this.onChangeText ('nom d'utilisateur', val) /> this.onChangeText ('password', val) /> this.onChangeText ('email', val) /> this.onChangeText ('phone_number', val) /> this.onChangeText ('authCode', val) />
Enfin, nous mettrons à jour notre modes déclaration afin que nous ayons une meilleure interface utilisateur:
const styles = StyleSheet.create (conteneur: flex: 1, justificationContenu: 'centre',, entrée: hauteur: 50, borderBottomWidth: 2, borderBottomColor: '# 9E9E9E', marge: 10);
Pour voir 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éé, retournez à la console AWS, cliquez sur Cognito, choisissez le nom du nom de projet AWSMobile que vous avez créé, puis cliquez sur Utilisateurs et groupes dans le Réglages généraux menu à gauche.
Vous pouvez aller plus loin en implémentant la connexion et en confirmant la connexion. Jetons un coup d'oeil aux méthodes pour se connecter et confirmerSignIn:
signIn () Auth.signIn (this.state.username, this.state.password) .then (utilisateur => this.setState (utilisateur) console.log ('utilisateur connecté avec succès !!')) .catch (err => console.log ('erreur de connexion de l'utilisateur:', err)) confirmSignIn () Auth.confirmSignIn (this.state.user, this.state.authCode) .then (() => console .log ('confirmer la connexion de l'utilisateur avec succès !!')) .catch (err => console.log ('erreur de confirmation de la connexion de l'utilisateur:', err))Une fois que l'utilisateur est connecté, nous pouvons alors utiliser Auth accéder aux informations utilisateur!
Nous pouvons 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, JWT, et de nombreuses autres informations utiles sur la session actuellement ouverte de l'utilisateur.
AWS Amplify utilise Amazon Pinpoint pour gérer les métriques. Lorsque vous créez un nouveau projet Mobile Hub à l'aide de la CLI ou de Mobile Hub, Amazon Pinpoint est automatiquement activé, configuré et prêt à fonctionner..
Si vous ne l'êtes pas déjà, Amazon Pinpoint est un service qui permet aux développeurs d'ajouter Analytics à leurs applications mobiles, mais également de leur envoyer des notifications push, des 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 de pouvoir 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 en haut à droite, ou aller directement dans Amazon Pinpoint à partir de la console et ouvrez le projet en cours.
Dans la barre de navigation bleu foncé à gauche, il y a quatre options: Analytique, Des segments, Campagnes, et Direct. Choisir Analytique.
Une fois que nous aurons commencé à 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, supprime tout le code du dernier exemple, nous laissant essentiellement avec une méthode de rendu contenant un conteneur View avec un message d'accueil Text, aucun état, aucune méthode de classe et uniquement un style de conteneur.
Nous importons aussi Analytique de aws-amplifier:
importer Réagir, Composant de 'réagir'; importer StyleSheet, Text, Button, View de 'react-native'; importer Amplify, Analytics à partir de 'aws-amplify' importer une configuration à partir de './aws-exports' Amplify.configure (config) classe d'exportation par défaut App étend Component render () return () const styles = StyleSheet.create (conteneur: flex: 1, JustificationContenu: 'centre', alignItems: 'centre'); Analytique
Une mesure courante que vous pouvez suivre est le nombre de fois que l'utilisateur ouvre l'application. Commençons par créer un événement qui permettra de suivre cette.
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 est exécutée en arrière-plan et que l'utilisateur est soit sur l'écran d'accueil, soit dans une autre application, inactif signifie que l'utilisateur est en train de passer de l'actif au premier plan, qu'il effectue plusieurs tâches en même temps ou qu'il est en communication téléphonique.
Lorsque l'application devient active, envoyons un événement à notre analyse indiquant que l'application a été ouverte..
Pour ce faire, nous allons appeler l'événement suivant:
Analytics.record ('Application ouverte!') Vous pouvez afficher l'API pour 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):
record (nom: chaîne, attributs ?: EventAttributes, métriques ?: EventMetrics): Promise
Mettons à jour la classe pour ajouter un écouteur d'événements lorsque le composant est monté et supprimons-le lorsque le composant est détruit. Cet auditeur appellera _handleAppStateChange chaque fois que l'état de l'application change:
composantDidMount () AppState.addEventListener ('change', this._handleAppStateChange); composantWillUnmount () AppState.removeEventListener ('change', this._handleAppStateChange); Maintenant, créons le _handleAppStateChange méthode:
_handleAppStateChange (appState) if (appState === 'actif') Analytics.record ('App ouverte!')Désormais, nous pouvons déplacer l'application en arrière-plan, la rouvrir, ce qui devrait envoyer un événement à notre tableau de bord Analytics. Remarque: pour mettre en arrière-plan l'application sur un simulateur iOS ou un émulateur Android, appuyez sur Commande-Maj-H.
Pour voir ces données dans le tableau de bord, cliquez sur Événements, et choisir App ouvert! de la liste déroulante des événements:
Vous remarquerez probablement que d’autres données sont automatiquement disponibles à partir de Mobile Hub, notamment: données de session, inscription de l'utilisateur,et connexion de l'utilisateur. Je pensais que c'était plutôt cool que toutes ces informations soient automatiquement enregistrées.
Passons maintenant au prochain niveau. 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étail de l'utilisateur: application ouverte".
Pour ce faire, mettez à jour l'événement record avec les éléments suivants:
Analytics.record ('Détail de l'utilisateur - Application ouverte!', Nom d'utilisateur: 'NaderDabit')
Ensuite, fermez et ouvrez l'application plusieurs fois. Nous devrions maintenant être en mesure de 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!
Le dernier élément que nous suivrons est la métrique d'utilisation. C’est le troisième argument pour record.
Ajoutons une mesure qui enregistre le temps accumulé que l'utilisateur a passé dans l'application. Nous pouvons le faire assez facilement en définissant une valeur horaire dans la classe, en l'incrémentant toutes les secondes, puis en envoyant ces informations à Amazon Pinpoint lorsque l'utilisateur ouvre l'application:
// en dessous de la définition de la classe time = 0 composantDidMount () this.startTimer () AppState.addEventListener ('change', this._handleAppStateChange); composantWillUnmount () AppState.removeEventListener ('change', this._handleAppStateChange); _handleAppStateChange (appState) if (appState === 'actif') Analytics.record ('Détail de l'utilisateur - Application ouverte!', nom d'utilisateur: 'NaderDabit', timeInApp: this.time) startTimer ( ) setInterval (() => this.time + = 1, 1000) // méthode de renduIci, nous avons créé une valeur de temps et le mettre à 0. Nous avons également ajouté un nouveau startTimer méthode qui ajoutera 1 à la valeur de temps chaque seconde. Dans composantDidMount, nous appelons startTimer qui incrémentera la valeur de temps de 1 toutes les secondes.
Maintenant, nous pouvons ajouter un troisième argument à Analytics.record () qui enregistrera cette valeur en tant que métrique!
Voyons comment utiliser Amplify avec Amazon S3 ajouter de l'espace de stockage à notre application.
Pour ajouter S3 à votre projet Mobile Hub, exécutez les commandes suivantes:
Les fichiers utilisateur d'awsmobile permettent l'activation de awsmobile
AWS Amplify a un Espace de rangement API que nous pouvons importer comme nous le faisons avec les autres API:
importer Storage de 'aws-amplify'
On peut alors appeler des méthodes sur Espace de rangement comme obtenir, mettre, liste, et retirer pour interagir avec les objets de notre panier.
Lorsqu'un compartiment S3 est créé, nous avons automatiquement une image par défaut dans notre compartiment du dossier public. le mien s'appelle example-image.png. Voyons si nous pouvons utiliser AWS Amplifier pour lire et voir cette image de S3.
Comme je l'ai mentionné ci-dessus, Espace de rangement a un obtenir méthode que nous appellerons pour récupérer des éléments, et la méthode pour récupérer cette image ressemblerait à ceci:
Storage.get ('example-image.png')Pour illustrer cette fonctionnalité dans notre application React Native, créons des fonctionnalités qui récupèrent cette image de S3 et la montrent à notre utilisateur..
Nous devrons importer Imagede React Native, ainsi que Espace de rangement de aws-amplifier.
import React, Composant de 'React' import // importations précédentes Image de 'react-native'; importer Amplify, Storage à partir de 'aws-amplify' // reste du code
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 conserver dans cet état. Ajoutons ce qui suit à notre classe au-dessus de la méthode de rendu:
state = url: " async getFile () let name = 'example-image.png'; let fileUrl = attend Storage.get (nom); this.setState (url: fileUrl)
Enfin, ajoutons quelques éléments d'interface utilisateur pour récupérer l'image et la restituer à l'interface utilisateur:
render () return () Espace de rangement this.state.url! == "&& ()
Maintenant, nous devrions pouvoir cliquer sur le bouton et voir l’image de S3!
Pour voir la version finale de ce fichier, cliquez ici.
Dans l’ensemble, AWS Amplify fournit un moyen très simple de réaliser ce qui était autrefois une fonctionnalité complexe avec peu de code, en s’intégrant de manière transparente à de nombreux services AWS..
Nous n'avons pas traité les notifications push, qui ont également été ajoutées récemment à AWS Amplify, mais elles seront traitées dans un prochain article.!
AWS Amplify est activement maintenu, alors si vous avez des demandes de fonctionnalités ou des idées, n'hésitez pas à commenter, à soumettre un problème ou une demande d'extraction, ou tout simplement à regarder le projet ou à regarder le projet si vous souhaitez être informé des futures fonctionnalités!
Et en attendant, consultez certains de nos autres articles sur le codage des applications React Native..
