Accentsconagua
Share
Ce que vous allez créerDans ces tutoriels, je vais vous montrer comment créer et interagir avec une base de données GraphQL en utilisant AWS AppSync et React Native. Cette application aura des fonctionnalités en temps réel et hors connexion, ce que nous obtenons avec AppSync. Dans cet article, nous allons commencer par configurer le back-end avec AppSync.
Un grand avantage d'AppSync est qu'il utilise GraphQL, un standard ouvert et un nouveau paradigme puissant pour le Web et le back-end mobile. Si vous souhaitez en savoir plus sur GraphQL, en quoi il diffère des API REST et comment faciliter votre travail en tant que développeur d'applications, consultez le contenu de GraphQL ici sur Envato Tuts.+.
Dans ces publications, nous construirons une application de voyage appelée Cities. Avez-vous déjà regardé une émission sur votre chaîne alimentaire préférée et vu un super food truck ou avez-vous parlé à un ami qui venait de rentrer d'un voyage et qui était vraiment excité par le bar Owl qu'elle a visité? Ne vous inquiétez pas plus, nous allons construire une application pour vous permettre de suivre tous les endroits sympas que vous voulez visiter, ainsi que les villes où ils se trouvent..
Cette application va démontrer et mettre en œuvre toutes les fonctionnalités dont vous aurez besoin pour créer une application Realct Native et GraphQL complète..
Consultez le dépôt GitHub du projet exemple pour voir l'application complétée et suivre.
AppSync offre un moyen simple de se familiariser avec un serveur GraphQL évolutif et en temps réel sans avoir à le créer et le maintenir vous-même..
Dans la console AppSync, nous ferons tout, de la création de notre schéma GraphQL à la configuration de notre base de données et de ses résolveurs. La console a également configuré Graphiql pour que nous puissions tester et interroger notre base de données sans configuration supplémentaire..
Nous allons implémenter cette configuration sur notre client, ce qui nous permettra d'interagir de manière transparente avec notre terminal GraphQL.!
AppSync vous permettra d'utiliser immédiatement l'un des trois types de résolveurs: DynamoDB, Elasticsearch ou AWS Lambda. Nous allons utiliser DynamoDB dans ce tutoriel.
La première chose à faire est de créer une nouvelle application AppSync et d’ajouter notre schéma de base..
Notre application devra stocker deux ensembles de données: une liste de villes et une liste d'emplacements que nous associerons à des villes individuelles dans la liste. Ainsi, notre schéma comportera deux types de données principaux (Ville et emplacement)..
Pour commencer à utiliser AppSync, accédez à la console AWS et choisissez AWS AppSync dans le Prestations de service menu déroulant.
Une fois dans le tableau de bord AppSync, nous devons cliquer sur le bouton Créer une API bouton:
Maintenant, nous aurons l’option de donner un nom à l’application (j’appelle le mien TravelApp) et choisissez le type de schéma (Douane ou échantillon). Nous choisirons le Douane option de schéma, puis cliquez sur Créer.
Le prochain écran sera le tableau de bord de la nouvelle application. Nous verrons tout de suite quelques informations utiles, notamment l’URL de notre application ainsi que le mode d’autorisation. Sur le côté gauche, vous verrez quelques liens: Schéma, Des requêtes, Les sources de données, et Réglages.
Regardez les options ici avant de passer à l'étape suivante..
Nous allons ensuite créer le schéma que nous aimerions utiliser pour notre application. Encore une fois, le schéma aura un Ville et Emplacement taper pour commencer.
Dans l'éditeur, cliquez sur le bouton Schéma onglet, et créez le schéma de base suivant avec deux types et une requête, puis cliquez sur sauvegarder:
type Ville id: ID! nom: String! pays: String! locations: [Location] type Location id: ID! cityId: ID! nom: String! info: Chaîne type Requête fetchCity (id: ID!): Ville schéma requête: Requête
Maintenant que nous avons créé un schéma de base, nous devons attacher ce schéma à une base de données.!
AppSync rend cela extrêmement facile. Clique le Créer des ressources bouton à droite de l'écran. Nous aurons besoin de deux tables de base de données: une pour nos villes et une autre pour nos emplacements..
Choisir Ville, acceptez tous les paramètres par défaut, puis cliquez sur Créer. Vous remarquerez que cela ajoutera automatiquement des requêtes, des mutations et des abonnements utiles à notre schéma.!
Allez-y et faites la même chose pour le Emplacement Ressource. Nous avons maintenant créé avec succès deux tables de base de données qui accompagnent notre schéma, ainsi que des requêtes de base, des mutations, des abonnements et des résolveurs qui mapperont le schéma sur ces tables (nous allons explorer les résolveurs dans la section suivante)..
Voyons maintenant ce qui a été créé. Dans le menu de gauche, cliquez sur Les sources de données.
Vous devriez maintenant voir les deux sources de données que nous venons de créer!
Maintenant que nous avons de nouvelles mutations et souscriptions créées dans notre schéma, ajoutons-les à notre définition de schéma..
Pour ce faire, accédez au bas du schéma et mettez à jour la définition du schéma comme suit:
schema requête: mutation de la requête: abonnement Mutation: abonnement
Ensuite, nous pouvons tout tester en créant une mutation, puis une requête. dans le Des requêtes onglet, créez la mutation suivante:
mutation createCity createCity (entrée: id: "00001" nom: "Seattle" pays: "États-Unis") id
Cela ajoutera un enregistrement pour Seattle à la table des villes, avec un identifiant de 00001.
Ensuite, créez une requête pour récupérer ces données:
requête getCity getCity (id: "00001") id nom pays
Lorsque vous cliquez sur le bouton de lecture orange, vous pouvez choisir d’exécuter le createCity mutation ou la getCity question. Exécutez les deux et vous devriez voir les données de la ville de Seattle extraites et sorties sur le côté droit de l'écran.
Si vous voulez voir comment ces données sont représentées dans la base de données, vous pouvez explorer la table de villes DynamoDB liée à partir de Les sources de données languette.
Vous vous demandez peut-être comment la requête est associée à la base de données de manière transparente. La réponse est résolveurs!
Si vous regardez à droite du tableau de bord AppSync Schéma onglet, vous verrez une section intitulée Types de données. Ceci répertorie tous les types de données de notre schéma. À droite de chaque champ, nous voyons une rubrique intitulée Résolveur.
Les résolveurs sont essentiellement l'interface entre le schéma et la base de données que nous utilisons actuellement. Nous pouvons utiliser des résolveurs pour tout, de la récupération élémentaire d'éléments à des actions complexes telles que le contrôle d'accès à granularité fine.
Les résolveurs sont écrits dans un DSL appelé VTL (Velocity Templating Language). AppSync fournira automatiquement les résolveurs de base lors de la création de la source de données, mais ils sont hautement configurables. À ce stade, nous n'avons pas vraiment besoin de beaucoup changer dans nos résolveurs, mais examinons trois des principaux types de résolveurs avec lesquels vous devrez probablement travailler dans le monde réel. Ils sont liés aux opérations de base suivantes:
dans le Types de données onglet, à côté des définitions de schéma, recherchez getCity sous Question, et cliquez sur CityTable.
Cela devrait vous amener à l'écran de configuration du résolveur. Sur cet écran, vous verrez qu’un résolveur comporte trois éléments principaux:
le la source de données est la table avec laquelle vous souhaitez interagir.
le modèle de mappage de demande décrit comment la base de données traitera la demande.
Ici, vous pouvez écrire votre propre modèle de mappage ou choisir parmi une sélection de modèles préremplis pour des actions de base comme obtenir ou mettre un élément, entre autres..
Ici, vous voyez le modèle pour obtenir un article.
le modèle de mappage de réponse explique comment gérer la réponse de la base de données.
Dans notre modèle de réponse, nous renvoyons simplement le context.result et l'envelopper dans le $ utils.toJson fonction d'utilité. Il ne s’agit que de l’un des nombreux outils utilitaires qui permettront d’abstraire une partie du passe-partout VTL. Voir la liste complète des méthodes utilitaires dans la documentation officielle.
Au fur et à mesure que votre application devient plus complexe, la clé pour devenir compétent chez AppSync consiste à se familiariser avec l'utilisation de ces modèles de mappage. Il m'a fallu quelques heures pour comprendre comment tout cela fonctionnait, mais après quelques essais, je pouvais voir à quel point il était puissant..
Nous n'avons pas d'espace ici pour entrer dans tous les détails des modèles de mappage de résolveur, mais vous pouvez consulter la Référence de modèle de mappage de résolveur Resolver et la Référence de contexte de modèle de mappage pour en savoir plus..
Pour l'instant, nous allons poursuivre et compléter notre schéma.
Nous avons terminé notre schéma, mais nous avons une dernière étape avant de pouvoir commencer à interagir avec notre nouveau noeud final GraphQL à partir de notre application React Native!
Étant donné que nous allons stocker tous nos emplacements dans une seule table, mais en les interrogeant sur la ville actuellement affichée, nous devrons créer un index secondaire pour pouvoir interroger efficacement les emplacements avec un nom particulier. CityId.
Pour créer un index secondaire, allez à Les sources de données et cliquez sur le Table de localisation hyperlien.
Cela devrait vous amener à la vue de table DynamoDB pour la table d'emplacement. Ici, cliquez sur le Les index onglet et créer un nouvel index avec une clé de partition de CityId.
Vous pouvez réduire les unités de capacité de lecture et d’écriture de 1 pour les besoins de ce tutoriel.
Ensuite, nous devons mettre à jour notre listLocations requête pour accepter cette CityId comme argument, alors mettez à jour la requête pour listLocations à ce qui suit:
type Query // toutes les requêtes précédentes sont omises listLocations (cityId: ID !, first: Int, après: String): LocationConnection
Maintenant, nous devons mettre à jour notre listLocations résolveur à utiliser cette nouvelle CityId indice! Rappelez-vous, nous voulons seulement listLocations retourner un éventail d'emplacements pour la ville que nous examinons, de sorte que le listLocations résolveur prendra la CityId en tant que paramètre et que les emplacements de retour pour cette ville.
Pour que cela fonctionne, mettons à jour le modèle de mappage de demandes pour listLocations être le suivant:
"version": "2017-02-28", "operation": "Requête", "index": "cityId-index", "query": "expression": "cityId =: cityId", "expressionValues" : ": cityId": "S": "$ ctx.args.cityId", "limit": #if ($ context.arguments.limit) $ context.arguments.limit #else 10 #end, "nextToken": #if ($ context.arguments.nextToken) "$ context.arguments.nextToken" #else null #end
Dans ce tutoriel, nous avons créé le back-end pour une application React Native avec son propre point de terminaison GraphQL. Nous avons également examiné comment créer et mettre à jour des résolveurs et travailler avec le schéma AppSync..
Maintenant que nous avons fini de tout configurer dans la console, nous pouvons continuer et créer notre client React Native! Dans le prochain article, je plonge dans l'application mobile React Native et vous explique comment connecter React Native à AppSync..
En attendant, consultez certains de nos autres articles sur le développement d'applications React Native!
Certaines images utilisées avec un crédit d'Amazon Web Services, Inc.
