Share
AWS Amplify permet aux développeurs de créer et de se connecter rapidement à de puissants services dans le cloud. Dans le didacticiel précédent, vous avez appris à configurer Amplify dans un projet React et à utiliser l'authentification, le stockage S3 et l'hébergement. Si vous avez besoin d'une introduction à AWS Amplify, vérifiez d'abord ce post..
Dans cet article, nous allons plus loin avec React et AWS Amplify, en explorant des fonctionnalités telles qu'une couche de données GraphQL gérée et des fonctions lambda..
Voyons comment ajouter une API AWS AppSync GraphQL à notre projet et commencer à l'utiliser depuis notre projet..
L'API que nous allons créer sera une API de restaurant pour que nous puissions suivre le rythme des restaurants que nous aimons ou voudrions visiter..
Pour ajouter l'API GraphQL à notre projet, nous pouvons utiliser la commande suivante:
amplifier ajouter api
Vous serez invité à répondre à certaines questions de configuration. Sélectionnez les options suivantes:
Lorsque vous y êtes invité, mettez à jour le schéma comme suit, puis enregistrez le fichier:
// situé dans amplify-web-app / amplify / backend / api / TutsGraphQLAPI / schema.graphql type Restaurant @model id: ID! nom: String! description: String
Cela crée juste un seul type de données-Restaurant-avec les champs d'identifiant et de nom requis, ainsi qu'une description facultative.
Ensuite, envoyons les mises à jour sur notre compte:
amplifier la poussée
Maintenant, l'API a été créé!
Qu'est-ce qui vient de se passer ici? AWS Amplify a utilisé la bibliothèque intégrée GraphQL Transform pour créer une API GraphQL complète, comprenant un schéma supplémentaire, des résolveurs et une source de données..
Pour afficher la nouvelle API AWS AppSync à tout moment après sa création, vous pouvez accéder au tableau de bord à l'adresse https://console.aws.amazon.com/appsync et cliquer sur l'API qui vient d'être créée (assurez-vous que votre région est réglé correctement). À partir du tableau de bord AWS AppSync, vous pouvez afficher la configuration de l'API et effectuer des requêtes et des mutations sur l'API..
Ensuite, interagissons avec l'API de notre application React.
La première chose que nous aimerions faire est de créer une mutation. Dans GraphQL, les mutations sont l'équivalent de REST METTRE, POUSSER et EFFACER opérations. Comme nous n'avons pas encore de données dans notre base de données, nous allons créer une mutation pour créer un nouvel élément de restaurant..
Pour ce faire, nous allons importer API et graphqlOperation AWS Amplify, définition d'une mutation, puis exécution de la mutation.
Regardons un exemple d'application qui implémente une mutation. Dans App.js, d'abord, nous importons React, notre CSS d'application et les composants AWS Amplify nécessaires.
importer Réagir, Composant de 'réagir'; importer './App.css'; import withAuthenticator de 'aws-amplify-react' import API, graphqlOperation de 'aws-amplify'
Ensuite, nous définissons une mutation pour créer un restaurant. Nous spécifions que la mutation accepte un nom et une description et est nommée créerRestaurant. Cette mutation a été définie automatiquement lorsque nous avons créé le Restaurant schéma ci-dessus. Notez que la mutation est spécifiée dans GraphQL, un langage de requête spécifique à un domaine..
const CreateRestaurant = 'mutation ($ name: String !, $ description: String) createRestaurant (entrée: name: $ nom description: $ description) nom identifiant description'
Maintenant, nous créons notre composant d'application.
La classe App étend le composant // crée l'état initial = = nom: ", description:" // met à jour l'état lorsque l'utilisateur tape dans les entrées onChange = e => this.setState ([e.target.name]: e .target.value) // définir une fonction pour exécuter la mutation // rendre le composant
Ensuite, toujours dans le App composant, nous définissons une fonction pour exécuter la mutation. Ceci exécute la mutation en appelant API.graphql, en passant dans la mutation et les données.
Accentsconagua
// définir la fonction pour exécuter la mutation createRestaurant = async () => if (this.state.name === "|| this.state.description ===") return try const restaurant = nom: this.state .name, description: this.state.description wait API.graphql (graphqlOperation (CreateRestaurant, restaurant)) this.setState (name: ", description:") console.log ('restaurant a été créé!') capture (err) console.log ('erreur de création du restaurant…')Ensuite, nous rendons le composant, reliant notre gestionnaire de changement et nos fonctions de mutation.
// rend le composant render () return ()
Enfin, nous exportons le App composant, avec authentification.
export default withAuthenticator (App, includeGreetings: true);
Vous devriez pouvoir exécuter ce code et commencer à créer de nouveaux éléments de restaurant dans l'API..
Pour afficher la source de données réelle pour voir si les données s'y trouvent, ouvrez le tableau de bord AWS AppSync, choisissez votre API, cliquez sur Les sources de données dans le menu de gauche, puis cliquez sur le bouton Nom de la ressource. Cela ouvrira la table Amazon DynamoDB. Dans le tableau, vous pouvez voir les données dans le Articles languette.
Ensuite, regardons comment interroger des données de l'API. Nous allons mettre cela en œuvre en trois étapes:
Premièrement, définissons la requête dans un nouveau composant. Encore une fois, nous utilisons le langage GraphQL pour spécifier la requête. Nous utilisons le listeRestaurants requête qui a été automatiquement définie lorsque nous avons poussé la Restaurants schéma. L'extrait ci-dessous indique que nous attendons une liste d'éléments, chacun avec un identifiant, un nom et une description..
const ListRestaurants = 'query listRestaurants items description du nom de l'identifiant
Ensuite, nous devons ajouter un état initial supplémentaire pour contenir le groupe de restaurants renvoyés par le serveur..
state = name: ", description:", restaurants: []
Nous devrons également ajouter un composantDidMount cycle de vie pour interroger des données du serveur GraphQL. Cette méthode asynchrone mettra à jour l'état du composant lorsque la liste des restaurants sera renvoyée du serveur..
async composantDidMount () try const restaurants = wait API.graphql (graphqlOperation (ListRestaurants)) console.log ('restaurants:', restaurants) this.setState (restaurants: restaurants.data.listRestaurants.items) catch ( err) console.log ('erreur de récupération des données:', err)
Enfin, nous allons créer un composant qui mappe le Restaurants tableau de l'état du composant en HTML.
this.state.restaurants.map ((r, i) => ())r.name
r.description
Désormais, lorsque nous exécuterons l'application, nous verrons que les données de l'API sont affichées dans une liste à l'écran. Cependant, l'application n'indiquera aucune modification lors de la mise à jour des données, par exemple lorsque vous ajoutez un nouveau restaurant..
Donc, pour commencer, mettons à jour le créerRestaurant méthode pour fournir une réponse optimiste à l'interface utilisateur. À l'heure actuelle, lorsque nous créons un nouvel élément, la base de données est mise à jour, mais l'interface utilisateur n'est pas encore au courant du nouvel élément. Pour résoudre ce problème, nous allons mettre à jour le tableau de restaurants dans le créerRestaurant méthode en ajoutant le nouvel élément au tableau:
createRestaurant = async () => if (this.state.name === "|| this.state.description ===") renvoie try const restaurant = nom: this.state.name, description: ceci. state.description const restaurants = [… this.state.restaurants, restaurant] this.setState (name: ", description:", restaurants) wait API.graphql (graphqlOperation (CreateRestaurant, restaurant)) console.log (' restaurant créé avec succès! ') catch (err) console.log (' erreur de création du restaurant… ')Ensuite, nous voulons pouvoir travailler avec des données en temps réel. Dans GraphQL, les abonnements vous permettent d’écouter des données en temps réel. Lorsque de nouvelles données sont disponibles, l'abonnement est activé et les nouvelles données sont transmises via l'abonnement. Il nous appartient, côté client, de gérer ces nouvelles données..
Dans notre application, nous nous abonnerons à la gamme de restaurants, et nous créerons un onCreateRestaurant abonnement qui se déclenche chaque fois qu'un nouveau restaurant est créé. Nous allons ensuite prendre le nouvel élément de l'abonnement, mettre à jour notre tableau existant et appeler setState afin de re-rendre l'interface utilisateur avec les nouvelles données.
Tout comme pour les mutations et les requêtes, nous commençons par définir l’abonnement dans le langage propre au domaine GraphQL..
// définir l'abonnement const OnCreateRestaurant = 'subscription onCreateRestaurant id description du nom'
L'abonnement sera créé dans le composantDidMount méthode de cycle de vie avant ou après la requête GraphQL que nous avons déjà configurée:
async composantDidMount () try const restaurants = wait API.graphql (graphqlOperation (ListRestaurants)) console.log ('restaurants:', restaurants) this.setState (restaurants: restaurants.data.listRestaurants.items) catch ( err) console.log ('erreur lors de l'extraction des données:', err) API.graphql (graphqlOperation (OnCreateRestaurant)) .subscribe (next: eventData => const data = eventData.value.data.onCreateRestaurant console.log ( 'data:', data) const restaurants = [… this.state.restaurants.filter (r => r.name! == nom_données && r.description! == data.description), données] this.setState ( Restaurants ) ) Maintenant, si vous ouvrez deux fenêtres de navigateur, vous devriez pouvoir créer une mutation sur un seul écran et voir que la mise à jour se produit sur tous les autres écrans..
Si vous regardez le .filtre méthode utilisée lors de la création du nouveau tableau restaurants dans l'abonnement, vous pouvez voir que nous vérifions s'il existe des doublons contenant à la fois le même nom et la même description. Un meilleur moyen de le faire en production serait peut-être de créer un ID client unique également stocké dans la base de données et de filtrer en fonction de cet identifiant..
GraphQL est une technologie de pointe merveilleuse, mais notre projet nécessitera parfois la création d’une API REST traditionnelle. Avec AWS Lambda et Amplify, il est également facile de créer des API REST sans serveur à l'aide de la CLI..
Lorsque nous avons créé l’API GraphQL, nous avons utilisé le amplifier créer api commander. Cette commande nous donne la possibilité de créer une API GraphQL ou une API REST. L'API REST peut être configurée pour utiliser une fonction Express sans serveur autonome ou une fonction JavaScript sans serveur pré-configurée pour fonctionner avec les opérations CRUD Amazon DynamoDB..
L'option que nous allons utiliser pour cette API est une fonction Express sans serveur..
Continuons et ajoutons la nouvelle fonctionnalité:
amplifier ajouter api
Comme d’habitude, vous serez invité à renseigner certains détails de configuration. Fournissez les options suivantes:
Vous pourrez maintenant éditer la fonction lambda localement. Dans le fichier, nous allons remplacer le existant app.get ('/ personnes') méthode avec ce qui suit:
// amplify-web-app / amplify / backend / function / amplifyrestapi / src / app.js app.get ('/ personnes', fonction (req, res) const personnes = [nom: "Nader", name: "Amanda", name: "Chris", name: "" res.json (success: true, people));Cela renvoie simplement une liste constante de noms à des fins de démonstration. Enregistrez ce fichier et continuez avec les réponses suivantes:
Cela a créé une nouvelle fonction Lambda localement que nous pourrons mettre à jour et transférer sur notre compte si nécessaire. Le code de cette fonction lambda est situé à amplify / backend / function / amplifyrestapi / src.
Maintenant, passons les mises à jour sur notre compte:
amplifier la poussée
Maintenant, notre fonction Lambda est opérationnelle et nous pouvons commencer à interagir avec elle!
Commençons par interroger les données de la nouvelle API et montrons-les dans notre interface utilisateur. Pour ce faire, nous utiliserons le API classe de Amplify, en appelant API.get. Dans la section précédente, nous avons utilisé API.graphql faire des requêtes à notre API GraphQL, mais de nombreuses méthodes sont disponibles dans la classe API. Vous pouvez en savoir plus sur la classe API dans la documentation officielle..
importer API de 'aws-amplify' // 1. dans l'état initial, créez un tableau vide de personnes state = personnes: [] // 2. dans composantDidMount, nous allons extraire ces données à l'aide de la classe API const peopleData = wait API.get ('amplifyrestapi', '/ people') this.setState (people: peopleData.people) catch (err) console.log ('erreur lors de l'extraction à partir de Lambda API') / / 3. rend les données de personnes à l'interface utilisateur dans la méthode de rendu this.state.people.map ((personne, index) = = ( nom d'une personne
))Maintenant, nous devrions être en mesure d'exécuter l'application, d'extraire les données de personnes de notre API et de les afficher à l'écran..
En plus de créer une nouvelle fonction Lambda, nous pouvons également mettre à jour notre fonction Lambda à partir de la CLI..
Modifions la fonction pour toucher une API et récupérer des données plutôt que des constantes de codage en dur. Pour ce faire, nous allons utiliser le axios bibliothèque pour effectuer les requêtes HTTP, et nous allons récupérer les données de l'API Star Wars.
Pour utiliser axios, nous devons accéder à amplify / backend / function / amplifyrestapi / srcet l'installer là. Axios est installé dans le dossier de projet de la fonction Lambda, et non dans le dossier principal de l'application, car il s'exécutera dans la fonction Lambda côté serveur..
fils ajouter axios # ou npm installer axios
Maintenant que axios est installé, nous allons mettre à jour la fonction Lambda pour récupérer les données de l'API Star Wars:
var axios = require ('axios') app.get ('/ people', fonction (req, res) axios.get ('https://swapi.co/api/people/') .then (response => res.json (succès: true, personnes: réponse.data.results)) .catch (erreur => res.json (succès: faux, erreur)));Maintenant, enregistrez le fichier et lancez amplifier la poussée depuis le dossier principal du projet pour mettre à jour votre fonction Lambda dans le cloud:
amplifier la poussée
Maintenant, notre API est mise à jour et prête à fonctionner!
Lorsque nous actualisons l'application, nous devrions maintenant voir les données renvoyées par l'API Star Wars..
Dans cette série, vous avez appris à démarrer avec AWS Amplify et à l'ajouter à votre projet React, ainsi qu'à ajouter des méthodes d'authentification, de stockage, d'hébergement et une API GraphQL ou REST sans avoir à coder ou à provisionner manuellement un serveur. . C'est beaucoup de pouvoir pour les développeurs d'applications!
J'espère que ces publications vous ont inspiré pour créer vos propres applications Web sans serveur utilisant la technologie sans serveur et AWS Amplify! Dites-nous ce que vous pensez dans les commentaires ci-dessous.
