Share
AWS Amplify est une bibliothèque client, une chaîne d'outils CLI et une bibliothèque de composants d'interface utilisateur qui permettent aux développeurs de créer et de se connecter rapidement à de puissants services dans le cloud. Dans cet article, nous verrons comment créer des applications Web entièrement sans serveur avec React et AWS Amplify avec des fonctionnalités telles que l'authentification, une couche de données GraphQL gérée, le stockage, les fonctions lambda et l'hébergement Web..
Amplify active des fonctionnalités telles que GraphQL géré (AWS AppSync), stockage (Amazon S3), authentification utilisateur (Amazon Cognito), fonctions sans serveur (AWS Lambda), hébergement (Amazon CloudFront et Amazon S3), analyses (Amazon Pinpoint), etc..
L'objectif de la bibliothèque et de la CLI est de permettre aux développeurs de créer des applications Web et mobiles à pile complète sans avoir à s'inquiéter de la gestion de leur propre infrastructure dorsale, ce qui leur permet d'aller plus loin dans la pile en utilisant les compétences qu'ils connaissent déjà..
Dans cette série, je vais vous montrer comment créer un nouveau projet AWS Amplify, activer les fonctionnalités de cloud en utilisant la CLI, connecter l'application React et commencer à interagir avec les services de cloud. Dans cet article, je vais vous montrer comment implémenter l'authentification, le stockage et l'hébergement. Dans le prochain tutoriel, nous allons apprendre à créer et à interagir avec les API GraphQL et Serverless..
Bien que ce didacticiel utilise React, Amplify fonctionnera avec n’importe quel projet JavaScript et comportera des composants spécifiques à la structure pour Angular, Vue, React Native et Ionic. La CLI prend également en charge les applications natives iOS et Android..
Pour commencer, nous devons d’abord créer une nouvelle application React à l’aide de la CLI create-react-app, puis entrer dans le nouveau répertoire:
npx créer-réagir-application amplify-web-app cd amplify-web-app
Ensuite, nous installerons les dépendances du client AWS Amplify:
fils ajouter aws-amplify aws-amplify-react # ou npm installer aws-amplify aws-amplify-react
Ensuite, nous devrons installer l'AWS Amplify CLI.
npm installer -g @ aws-amplify / cli
Maintenant que l'AWS Amplify CLI est installé, nous devons le configurer pour pouvoir créer des ressources dans notre compte AWS. Nous faisons cela en exécutant le amplifier configurer commande et configuration d'un nouvel utilisateur AWS.
amplifier configurer
Vous pouvez voir une courte vidéo de cette configuration sur YouTube..
Maintenant que l’AWS Amplify CLI est installée et configurée, exécutez la commande amplifier commande depuis votre ligne de commande pour voir les options disponibles et vous assurer que la CLI a été installée correctement.
amplifier
Pour initialiser un nouveau projet AWS Amplify, nous allons exécuter le amplifier init commander:
amplifier init
Lorsque vous y êtes invité, choisissez votre éditeur de texte préféré et conservez les valeurs par défaut pour toutes les autres options..
Ceci a maintenant initialisé localement un nouveau projet AWS Amplify, et nous allons maintenant voir un amplifier répertoire et .amplifier fichier créé dans le répertoire racine de notre projet React. Ces fichiers contiennent des informations de configuration sur notre projet Amplify, et nous n'avons pas besoin de les toucher pour le moment..
La première fonctionnalité que nous activerons est l'authentification de l'utilisateur. Nous pouvons activer des fonctionnalités à tout moment en exécutant amplifier ajouter . La catégorie pour l'authentification est auth, alors courez:
amplifier add ajouter
Quand demandé Voulez-vous utiliser la configuration d'authentification et de sécurité par défaut?, choisir Oui.
Une fois que cela est créé, nous devons exécuter amplifier la poussée pour créer le nouveau service sur notre compte:
amplifier la poussée
Quand demandé Es-tu sur de vouloir continuer?, choisir Oui.
Une fois le service créé, vous pouvez le visualiser à tout moment dans le tableau de bord en visitant https://console.aws.amazon.com/cognito/users/ et en cliquant sur le nom de votre service.
Nous pouvons également afficher tous les services activés à tout moment en exécutant amplifier le statut:
amplifier le statut
Vous remarquerez également un nouveau fichier créé-aws-exports.js-dans le dossier racine de l'application React. Vous n'aurez pas besoin de modifier ce fichier car il est géré pour vous par la CLI, mais nous l'utiliserons à l'étape suivante pour configurer le projet local..
Maintenant que le service d'authentification est créé, nous pouvons commencer à l'utiliser dans notre application React.!
La première chose à faire est de configurer l’application React pour qu’elle connaisse notre projet Amplify. Nous faisons cela en appelant Amplify.configure à la racine du projet - pour nous, ce sera src / index.js.
importer Amplify à partir de 'aws-amplify' importer une configuration à partir de './aws-exports' Amplify.configure (config)
Maintenant, notre projet est prêt et nous pouvons implémenter l'authentification.
Accentsconagua
avecAuthenticator Composant d'ordre supérieurNous allons examiner deux manières de mettre en œuvre l’authentification de l’utilisateur, mais pour commencer, nous allons commencer par utiliser avecAuthenticator composant d'ordre supérieur de la aws-amplify-react bibliothèque. Ce composant échafaude tout un flux d'authentification en quelques lignes de code et constitue un excellent moyen de se familiariser avec la bibliothèque..
Dans App.js, importer le avecAuthenticator HOC en haut du fichier:
importer withAuthenticator de 'aws-amplify-react'
Et, en bas, mettez à jour le exportation déclaration pour envelopper le App composant avec avecAuthenticator.
exporter par défaut avec Authenticator (App)
Pour en savoir plus, consultez la documentation officielle sur les composants Amplify React disponibles pour l’authentification..
Maintenant, nous pouvons exécuter l'application et devrait voir un écran de connexion:
Cliquez sur Créer un compte pour vous inscrire, puis connectez-vous à l'application. Une fois que nous sommes connectés, la session sera stockée afin que nous puissions actualiser la page et que nous restions connectés..
Nous pouvons également rendre un bouton de déconnexion en ajoutant un deuxième argument au HOC:
exporter par défaut avec Authenticator (App, includeGreetings: true)
Notez que nous pouvons également utiliser le Auth classe directement pour déconnecter les utilisateurs:
// 1. importer la classe import Auth de 'aws-amplify' // Déconnecter l'utilisateur en attente de Auth.signOut ()
Notez que lorsque vous appelez Auth.signOut directement, nous devons toujours restituer le composant d’une certaine manière afin de ramener l’utilisateur à la page de connexion. Vous pouvez voir un exemple de cela dans un fil de discussion sur le dépôt GitHub du projet..
Auth ClasseNous pouvons aussi utiliser le Auth classe pour gérer manuellement les utilisateurs. Auth a plus de 30 méthodes disponibles, y compris s'inscrire, se connecter, confirmerSignUp, confirmerSignIn, mot de passe oublié, et resendSignUp.
Voyons comment implémenter l’inscription d’utilisateur en utilisant le s'inscrire méthode de classe:
// 1. Créer l'état initial pour conserver les entrées utilisateur state = nom d'utilisateur: ", mot de passe:", email: ", numéro_phone:", codeAutomatique: " // 2. gestionnaire de changement onChange pour les modifications d'entrée onChange = e => this.setState ([e.target.name]: e.target.value) // 3. Fonction permettant d'appeler Auth.signUp signUp = async () => const nom d'utilisateur, mot de passe, email, numéro de téléphone = this.state wait Auth.signUp (nom d'utilisateur, mot de passe, attributs: phone_number, email) console.log ('connecté avec succès') // 4. Fonction permettant d'appeler Auth.signUp confirmSignUp = async () => const nom d'utilisateur, AuthCode = this.state wait Auth.confirmSignUp (nom d'utilisateur, authCode) console.log ('confirmation de la connexion avec le serveur') // 5. Dans la méthode de rendu, créez des entrées avec des attributs pour mettre à jour l'état // 6. Créer des boutons pour appeler les méthodes signUp et confirmSignUp Ceci est un plan détaillé pour la façon dont vous pouvez inscrire manuellement un utilisateur avec la classe Auth..
L'implémentation manuelle prend plus de temps à écrire, mais vous donne un contrôle complet non seulement sur l'interface utilisateur, mais également sur les fonctionnalités que vous souhaitez implémenter..
Vous pouvez en savoir plus sur l'authentification avec AWS Amplify dans la documentation du projet..
Amazon S3 est un service populaire pour le stockage de supports tels que des images et des vidéos, ainsi que pour des services back-end tels que l'hébergement d'applications, les sauvegardes et la livraison de logiciels..
AWS Amplify CLI nous permet de créer, configurer, mettre à jour et supprimer des compartiments S3. Dans cette section, nous verrons comment créer un compartiment S3 et comment télécharger des images et des fichiers dans le compartiment..
Pour activer le stockage, nous pouvons exécuter la commande suivante:
amplifier ajouter stockage
Ensuite, vous serez invité à fournir quelques détails de configuration. Sélectionnez le Contenu (images, audio, vidéo, etc.) un service. Ensuite, indiquez un nom de ressource spécifique au projet (utilisé en interne dans le projet) et un nom de compartiment (l'emplacement S3 où vos données seront stockées). Enfin, l’accès devrait être limité aux Utilisateurs authentiques seulement, et les utilisateurs authentifiés devraient être autorisés lire écrire accès.
Maintenant, le stockage a été ajouté à notre configuration, et nous courons amplifier la poussée pour créer les nouvelles ressources sur notre compte:
amplifier la poussée
Cela créera et configurera un compartiment Amazon S3 que nous pouvons commencer à utiliser pour stocker des éléments..
Si nous voulions tester cela, nous pourrions stocker du texte dans un fichier comme celui-ci:
importer Stockage depuis 'aws-amplify' // créer une fonction pour travailler avec stockage addToStorage = () => Storage.put ('javascript / MyReactComponent.js', 'importer > ( Bonjour le monde
) Exporter par défaut App ') .then (result => console.log (' result: ', result)) .catch (err => console.log (' error: ', err)); // ajouter un gestionnaire de clic Cela créera un dossier appelé javascript dans notre compartiment S3 et stockez un fichier appelé MyReactComponent.js il avec le code que nous avons spécifié dans le deuxième argument de Storage.put.
Si nous voulons tout lire dans ce dossier, nous pouvons utiliser Liste de stockage:
readFromStorage = () => Storage.list ('javascript /') .then (data => console.log ('données de S3:', données)) .catch (err => console.log ('erreur') ) Si nous voulons seulement lire le fichier unique, nous pouvons utiliser Storage.get:
readFromStorage = () => Storage.get ('javascript / MyReactComponent.js') .then (data => console.log ('données de S3:', données)) .catch (err => console.log (' Erreur')) Si nous voulions tout réduire, nous pourrions utiliser Liste de stockage:
readFromStorage = () => Storage.list (") .then (data => console.log ('données de S3:', data)) .catch (err => console.log ('erreur'))Travailler avec des images est également facile. Voici un exemple:
la classe S3ImageUpload étend React.Component onChange (e) fichier const = e.target.files [0]; Storage.put ('example.png', fichier, contentType: 'image / png') .then (result => console.log (result)) .catch (err => console.log (err)); render () return ( this.onChange (e) />)Dans le code ci-dessus, nous lions une entrée de formulaire de téléchargement de fichier à la sur le changement gestionnaire d'événements. Lorsque l'utilisateur fournit un fichier, Storage.put est appelé pour télécharger le fichier sur S3 avec le type MIME image / png.
Pour déployer et héberger votre application sur AWS, nous pouvons utiliser la hébergement Catégorie.
amplifier ajouter un hébergement
De nouveau, vous serez invité à fournir certaines options de configuration:
Maintenant, tout est configuré et nous pouvons publier l'application:
amplifier publier
Si, à un moment quelconque, vous souhaitez supprimer un service de votre projet et de votre compte, vous pouvez le faire en exécutant la commande amplifier supprimer commande puis en poussant.
amplify remove auth amplify push
Si vous n'êtes pas sûr des services que vous avez activés à tout moment, vous pouvez exécuter le amplifier le statut commander:
amplifier le statut
amplifier le statut vous donnera la liste des ressources actuellement activées dans votre application.
AWS Amplify permet aux développeurs de créer des applications de type pile complète et dans le cloud plus facilement que jamais auparavant, leur permettant de parcourir rapidement, directement à partir de leur environnement frontal.
Ceci est la première partie d'une série en deux parties. Dans le prochain tutoriel, nous allons apprendre à créer et à interagir avec les API GraphQL et Serverless. Alors restez à l'écoute.
