5 étapes pour ajouter des points de terminaison GraphQL dans Adalo

Ce guide vous guide tout au long du processus complet d'intégration de GraphQL dans Adalo, un générateur d'applications sans code pour les applications web basées sur des bases de données et les applications iOS et Android natives—une seule version sur les trois plates-formes, publiée sur l'App Store Apple et Google Play.

Ce guide vous guide tout au long du processus complet d'intégration de GraphQL dans Adalo, de la préparation du point de terminaison au déploiement.

Étapes clés :

1. Préparez votre point de terminaison: Testez votre API GraphQL pour l'accessibilité, le format JSON et l'authentification.
2. Créer une collection externe: Connectez votre point de terminaison GraphQL dans Adalo et configurez l'authentification.
3. Définir les requêtes et mutations: Utilisez les requêtes GraphQL pour récupérer les données et les mutations pour mettre à jour ou créer des enregistrements.
4. Définir les en-têtes et les paramètres: Assurez-vous que les en-têtes appropriés (par exemple, Authorization) et spécifiez les clés JSON pour l'analyse des données.
5. Tester et déployer: Liez les données aux composants de l'application, testez les fonctionnalités et publiez votre application.

Adalo prend en charge les identifiants numériques pour les enregistrements et a une limite de débit de 5 requêtes par seconde. Suivre ces étapes garantit une intégration fluide et des performances d'application optimisées. Avec des enregistrements de base de données illimités sur les plans payants et aucuns frais basés sur l'utilisation, vous pouvez mettre à l'échelle votre application connectée à GraphQL sans vous soucier des limites de données ou des factures inattendues.

Pourquoi Adalo fonctionne bien pour l'intégration GraphQL

La capacité de GraphQL à demander exactement les données dont vous avez besoin s'associe naturellement à l'architecture d'Adalo. Le performance 3 à 4 fois plus rapide de la plate-forme depuis la refonte de l'infrastructure Adalo 3.0 signifie que vos requêtes GraphQL retournent les données aux utilisateurs rapidement, même lorsque votre application se met à l'échelle. Contrairement aux plates-formes qui imposent des limites d'enregistrements ou des frais basés sur l'utilisation, les plans payants d'Adalo n'incluent aucune limite de données—vos collections externes peuvent croître avec votre base d'utilisateurs.

Ada, le créateur IA d'Adalo, vous permet de décrire ce que vous voulez et génère votre application. Magic Start crée des fondations d'applications complètes à partir d'une description, tandis que Magic Add ajoute des fonctionnalités en langage naturel.

Les fonctionnalités de création assistée par IA simplifient également le processus d'intégration. Magic Add vous permet de décrire de nouvelles fonctionnalités en langage naturel, et la plate-forme génère les écrans et la logique nécessaires pour afficher vos données GraphQL. X-Ray identifie les goulots d'étranglement de performance avant qu'ils n'affectent les utilisateurs, vous aidant à optimiser les requêtes qui pourraient ralentir votre application.

Étape 1 : Préparez votre point de terminaison GraphQL

Avant de vous lancer dans le processus d'intégration, assurez-vous que votre point de terminaison fonctionne correctement. Pensez à ceci comme votre liste de contrôle de pré-vol : confirmez que le point de terminaison est accessible, retourne les données dans le format JSON approprié et accepte une authentification valide.

Vérifier l'accessibilité du point de terminaison

Commencez par tester votre point de terminaison à l'aide d'outils tels que GraphiQL, GraphQL Playground, ou Postman. Les URL de points de terminaison typiques pourraient ressembler à ceci : https://api.example.com/graphql, /api/graphql, ou /v1/graphql.

Envoyez une requête simple, telle que { __typename }, pour vérifier la disponibilité du point de terminaison et confirmer qu'il répond correctement. Ensuite, vérifiez si l'introspection de schéma est activée en interrogeant __schema. Cela vous donnera une carte détaillée des types disponibles, des champs et des opérations, vous aidant à comprendre quelles données vous pouvez demander.

Sachez que GraphQL retourne souvent un statut HTTP 200 OK même en cas d'erreur. Les erreurs apparaîtront dans le tableau errors de la réponse. Par exemple, essayez d'interroger un champ invalide pour voir si la réponse inclut une erreur GRAPHQL_VALIDATION_FAILED .

Enfin, confirmez que la réponse est structurée dans le format JSON qu'Adalo exige. Portez une attention particulière à la clé de niveau supérieur où résident vos données, telle que data, records, ou resource. Ce détail est crucial lors de la configuration de votre collection externe dans Adalo.

Une fois que vous avez confirmé que le point de terminaison est accessible et formaté correctement, passez à la validation de votre configuration d'authentification.

Rassembler les identifiants d'authentification

La plupart des points de terminaison GraphQL sécurisés nécessitent une authentification, et il existe quelques méthodes courantes : les clés API, les jetons d'accès personnel (PAT) ou les jetons OAuth 2.0 (souvent au format JWT). Ces identifiants sont généralement ajoutés aux en-têtes HTTP comme ceci :

Authorization: Bearer YOUR_TOKEN_HERE

Voici une référence rapide pour certains services courants :

Fournisseur de services	Type d'identifiant	Clé d'en-tête	Format de valeur
Airtable	jeton d'accès personnel	Authorization	Bearer [Token]
DreamFactory	API	X-DreamFactory-API-Key	[Key]
N'importe quelle API GraphQL	Jeton JWT / OAuth	Authorization	Bearer [Token]

L'endroit où vous obtenez ces identifiants dépend de votre fournisseur d'API. Pour Airtable, vous trouverez l'option pour créer un jeton d'accès personnel dans le Developer Hub sous les paramètres de votre compte. Assurez-vous d'attribuer les portées nécessaires (comme l'accès en lecture/écriture) et de spécifier quelles bases de données le jeton peut accéder. Pour DreamFactory, les clés API sont créées et gérées au sein de la plateforme en utilisant les contrôles d'accès basés sur les rôles.

Pour tester votre authentification, incluez les identifiants dans vos en-têtes de requête lors de l'envoi de requêtes via GraphiQL ou Postman. Si le point de terminaison retourne des données au lieu d'une erreur d'authentification, c'est bon signe.

Étape 2 : Créer une collection externe dans Adalo

Maintenant que votre point de terminaison GraphQL est vérifié et que vous avez vos identifiants d'authentification prêts, il est temps de connecter votre source de données à Adalo. Cette étape transforme essentiellement vos données externes en une collection qui fonctionne de manière transparente dans votre application.

Accédez aux collections externes

Commencez par ouvrir le générateur Adalo. Dans la barre d'outils de gauche, cliquez sur l' Base de données onglet (recherchez l'icône de base de données). Sous la section « Collections externes », sélectionnez + Ajouter une collection. Donnez à votre collection un nom qui reflète le type de données avec lequel vous travaillerez, comme « Produits » ou « Utilisateurs ». Cette étape de nommage vous aide à garder tout organisé, surtout lorsque vous ajoutez d'autres intégrations plus tard.

Une fois nommée, vous passerez à la configuration des détails du point de terminaison et de l'authentification.

Configurer le point de terminaison et l'authentification

Dans l'écran de configuration, entrez votre point de terminaison GraphQL dans le champ URL de base (par exemple, https://api.example.com/graphql). Ensuite, configurez votre authentification en cliquant sur + Ajouter un élément sous En-têtes. Ajoutez un en-tête avec le nom « Authorization » et la valeur Bearer [Your_Token]. Assurez-vous d'inclure un espace après « Bearer ».

Adalo prend en charge l'authentification de base et OAuth pour les collections externes. Pour la plupart des points de terminaison GraphQL, vous utiliserez probablement l'authentification de base avec une clé API ou un jeton OAuth. Gardez à l'esprit qu'Adalo s'attend à ce que votre point de terminaison GraphQL retourne les données dans un format JSON standard de type REST.

Après avoir terminé la configuration de l'authentification, vous devrez activer l'analyse des réponses JSON.

Activer l'analyse des réponses JSON

Les réponses GraphQL imbriquent souvent les données dans des clés JSON spécifiques comme data, records, ou items. Pour aider Adalo à interpréter correctement cette structure, spécifiez une clé de résultats dans la section « Obtenir tous les enregistrements » de la configuration de votre point de terminaison. Ceci indique à Adalo où chercher le tableau d'enregistrements dans la réponse JSON.

Assurez-vous qu'au moins un enregistrement existe dans votre source de données lors de cette étape. Lorsque vous cliquez sur Exécuter le test, Adalo analysera la réponse JSON et générera automatiquement les propriétés correspondantes pour votre application, telles que les champs Texte, Nombre ou Date.

Il est à noter qu'Adalo ne prend actuellement en charge que les IDs numériques dans les collections externes. Si votre point de terminaison GraphQL utilise des IDs basés sur du texte, des UUID ou des IDs avec des caractères spéciaux, vous devrez peut-être utiliser une solution de contournement. Un service proxy comme n8n peut vous aider en convertissant les réponses GraphQL en un format JSON compatible avec Adalo.

Étape 3 : Définir les requêtes et mutations GraphQL

Avec votre point de terminaison vérifié et votre collection externe configurée, il est temps de lier les opérations GraphQL aux actions de données d'Adalo. Cette étape est cruciale pour connecter l'interface de votre application au backend GraphQL, permettant la récupération et les mises à jour de données transparentes via les requêtes et les mutations.

Définir les requêtes pour la récupération de données

Les collections externes d'Adalo prennent en charge cinq actions clés : Obtenir tous, Obtenir un, Créer, Mettre à jour et Supprimer. Pour GraphQL, toutes ces actions utilisent la même URL de base et nécessitent la POST méthode, même lors de la récupération de données. Au lieu des chaînes de requête traditionnelles, GraphQL intègre ses requêtes directement dans le corps de la requête.

Par exemple, lors de la configuration du point de terminaison « Obtenir tous les enregistrements », formatez votre corps JSON comme ceci :
{"query": "query { users { id name email } }"}.

Définissez le clé de résultats pour l'aligner avec la structure de réponse de votre API. Cela pourrait être quelque chose comme data.users ou simplement users, selon la conception de l'API.

Après avoir configuré le point de terminaison, cliquez sur Exécuter le test pour générer les propriétés de la collection. Assurez-vous que votre source de données externe inclut au moins un enregistrement complet avant de tester. Si un champ est vide dans tous les enregistrements, Adalo ne détectera pas cette propriété lors de la configuration.

Une fois vos requêtes en place, il est temps de passer à la configuration des mutations pour les mises à jour de données.

Configurer les mutations pour les mises à jour de données

Les mutations sont utilisées pour créer, mettre à jour et supprimer des enregistrements dans votre backend GraphQL. Pour l'action « Créer un enregistrement », formatez votre mutation dans le corps de la requête comme ceci :
{"query": "mutation CreateUser($name: String!, $email: String!) { createUser(name: $name, email: $email) { id name email } }", "variables": {"name": "VALUE", "email": "VALUE"}}.

Remplacez "VALUE" avec Texte magique pour insérer dynamiquement les données de votre application.

Lors de la configuration de l'action « Mettre à jour un enregistrement », la structure est similaire, mais vous devrez également référencer l'ID d'enregistrement spécifique à modifier. Bien que GraphQL utilise POST pour toutes les opérations, vous pouvez ajuster la méthode à PATCH si vous mettez à jour uniquement certains champs.

Après avoir configuré chaque mutation, exécutez un test pour vous assurer que la structure de réponse correspond à vos attentes. Gardez à l'esprit qu'Adalo a une limite de taux de plateforme de 5 requêtes par seconde. Si vous dépassez cette limite, vous recevrez un code de statut 429. Cependant, avec aucuns frais basés sur l'utilisation sur n'importe quel plan Adalo, vous ne ferez pas face à des factures inattendues provenant de volumes de requêtes élevés—il suffit de concevoir vos requêtes efficacement pour rester dans la limite de débit.

Une fois que vos requêtes et mutations sont testées et fonctionnelles, vous êtes prêt à passer à la configuration des en-têtes et des paramètres à l'étape suivante.

Étape 4 : Configurer les en-têtes et les paramètres des requêtes

Avec vos requêtes et mutations prêtes, l'étape suivante consiste à configurer les en-têtes et les paramètres appropriés pour assurer une communication transparente avec votre endpoint GraphQL. Cette étape est cruciale pour vérifier votre identité et formater vos données correctement, car des en-têtes manquants ou incorrects peuvent faire échouer vos requêtes.

Ajouter les en-têtes requis

Pour chaque requête GraphQL dans Adalo, vous aurez besoin d'au moins deux en-têtes : Content-Type et Authorization. Définissez le Content-Type à application/json pour indiquer le format de vos données. L'en-tête Authorization doit inclure votre clé API au format Bearer [Your_API_Key], en veillant à laisser un espace entre « Bearer » et votre jeton.

« Toutes les requêtes à l'API Adalo devront contenir les deux en-têtes suivants : Authorization: Bearer [Clé API de votre application] Content-Type: application/json »
– Ressources Adalo

Selon votre backend, vous pourriez avoir besoin d'en-têtes supplémentaires. Par exemple, si vous travaillez avec DreamFactory, vous devrez inclure un en-tête X-DreamFactory-API-Key avec votre clé spécifique. Pour ajouter ces en-têtes dans Adalo, accédez à la section « En-têtes et requêtes », cliquez sur +Ajouter un élément, et entrez manuellement le nom de l'en-tête et sa valeur.

Définir les paramètres de requête

Bien que GraphQL envoie généralement les données dans le corps de la requête, certaines API nécessitent des paramètres de requête pour des tâches comme le filtrage, la pagination ou même l'authentification. Pour ajouter ces paramètres dans Adalo, cliquez sur Ajouter un élément sous Collections externes et entrez les noms et valeurs des paramètres requis. Certaines API peuvent utiliser des paramètres de requête pour l'autorisation au lieu d'en-têtes, il est donc essentiel de consulter la documentation de votre API pour assurer la précision.

Si votre endpoint retourne des données imbriquées, vous devrez spécifier un clé de résultats (par exemple, data.users ou records) pour aider Adalo à localiser la clé JSON spécifique contenant vos enregistrements. Cette étape est particulièrement importante pour les réponses GraphQL structurées avec plusieurs couches de données.

Exécuter des tests pour valider la configuration

Une fois que tout est configuré, utilisez la Exécuter le test pour envoyer une requête en direct à votre endpoint. Un test réussi permettra à Adalo de détecter et mapper automatiquement les propriétés de données en fonction de la réponse de l'API. Avant d'exécuter le test, assurez-vous que votre source de données externe contient au moins un enregistrement complet pour la validation.

Si le test échoue, vérifiez le message d'erreur affiché dans la boîte de dialogue Adalo. Les problèmes courants incluent les erreurs d'authentification, le JSON mal formé ou les URL incorrectes. L'option Afficher la réponse complète peut vous aider à inspecter les données brutes et à vérifier que tous les champs nécessaires sont retournés.

Après avoir confirmé que vos paramètres fonctionnent correctement, vous êtes prêt à passer à la liaison des données à l'étape suivante.

Étape 5 : Testez, liez et déployez votre application

Maintenant que votre endpoint GraphQL est configuré et testé, il est temps de connecter vos données à l'interface de votre application et de la préparer au déploiement. Avec tout configuré, vous pouvez lier vos données de manière transparente à l'interface utilisateur de votre application. Les Collections externes fonctionnent exactement comme les sources de données natives dans Adalo.

Lier les données aux écrans et aux composants

Pour afficher les données de votre endpoint GraphQL, commencez par ajouter un composant Liste à votre application. Définissez sa source de données sur votre Collection externe. Pendant la phase « Exécuter le test », Adalo détecte automatiquement les propriétés disponibles dans votre réponse API, les rendant accessibles via Texte magique.

Pour mapper des champs de données spécifiques de votre réponse GraphQL à l'interface utilisateur de votre application, appuyez sur l'icône Texte magique dans les paramètres du composant (par exemple, Titre, Sous-titre ou Image) et sélectionnez les clés JSON correspondantes. Pour les écrans de détails, vous pouvez lier des éléments de liste à de nouveaux écrans en utilisant les étapes suivantes : Ajouter une action > Lier > Nouvel écran. Adalo transmettra automatiquement les données « Élément [Collection] actuel » au nouvel écran, vous permettant d'utiliser le Texte magique pour afficher des détails spécifiques de l'enregistrement sélectionné.

Si votre schéma GraphQL change ou si vous ajoutez de nouveaux champs, retournez simplement à l'onglet Base de données, mettez à jour les paramètres de la Collection externe, et relancez le test de connexion pour rendre les nouveaux champs disponibles dans l'éditeur. Avec le générateur visuel d'Adalo—décrit comme « aussi facile que PowerPoint »—vous pouvez rapidement ajuster votre interface utilisateur pour accommoder de nouveaux champs de données sans écrire de code.

Prévisualiser et publier l'application

Cliquez sur le bouton Prévisualiser pour vous assurer que vos données se chargent correctement et que toutes les actions fonctionnent comme prévu. Le performance 3 à 4 fois plus rapide de l'infrastructure d'Adalo 3.0 signifie que vos données GraphQL se chargent rapidement même avec des requêtes complexes.

Une fois que vous avez confirmé que tout fonctionne, vous pouvez publier votre application sur le web, l'App Store iOS et le Google Play Store Android en utilisant le système de codebase unique d'Adalo. Toutes les mises à jour que vous apportez se refléteront automatiquement sur toutes les plateformes, il n'est donc pas nécessaire de reconstruire pour chacune. C'est un avantage significatif par rapport aux plateformes comme Bubble, où les applications mobiles sont des wrappers web qui nécessitent une gestion distincte et ne synchronisent pas automatiquement les mises à jour entre les déploiements web et mobiles.

Surveiller les performances et corriger les problèmes

Une fois votre application en ligne, le outil X-Ray d'Adalo peut vous aider à analyser les performances et à résoudre les problèmes d'intégration. X-Ray identifie les goulots d'étranglement potentiels avant qu'ils n'affectent les utilisateurs, en mettant en évidence les requêtes lentes ou les relations de données inefficaces qui pourraient avoir un impact sur votre intégration GraphQL.

Gardez un œil sur la fréquence des demandes pour éviter de dépasser les limites de débit de l'API. Parmi les problèmes courants à surveiller, on trouve les erreurs d'expiration causées par les charges utiles volumineuses et les problèmes d'authentification dus à des en-têtes manquants ou incorrects. La surveillance régulière garantira que votre application fonctionne sans problème pour les utilisateurs.

Avec l'infrastructure modulaire d'Adalo capable de servir des applications avec 1 million+ d'utilisateurs actifs mensuels, votre application connectée à GraphQL peut croître sans atteindre les limites imposées par la plateforme. Contrairement aux plateformes qui facturent en fonction des unités de charge de travail ou imposent des limites d'enregistrements, l'architecture d'Adalo maintient les performances à grande échelle sans coûts cachés.

Conclusion

L'ajout de points de terminaison GraphQL à votre application Adalo simplifie la récupération des données et réduit le besoin de codage personnalisé extensif. En suivant ces cinq étapes—préparer votre point de terminaison, configurer une Collection externe, définir les requêtes et mutations, configurer les en-têtes et tester en détail—vous pouvez connecter votre application à des serveurs externes robustes tout en gardant votre interface utilisateur efficace et conviviale.

Les organisations ont signalé des économies allant jusqu'à 15 heures par semaine sur la saisie manuelle de données et une réduction des coûts de 65 % par rapport au développement personnalisé.

« GraphQL vous permet de répondre aux requêtes d'API en utilisant vos données préexistantes... il offre aux clients le pouvoir de demander uniquement les informations qu'ils souhaitent et rien de plus. » - n8n

Pour une meilleure performance, envisagez d'utiliser PATCH au lieu de PUT, appliquez des filtres pour rester dans la limite de 5 demandes par seconde, et utilisez l'outil X-Ray d'Adalo pour identifier les problèmes potentiels. Ces petits ajustements peuvent considérablement améliorer la réactivité de votre application.

Le plan Adalo Professional, à partir de 36 $ par mois, fournit un accès aux Collections externes avec des enregistrements de base de données illimités et sans frais basés sur l'utilisation. Cela déverrouille des économies immédiates en temps d'ingénierie et garantit que votre application s'adapte sans effort. Avec GraphQL, vos données s'intègrent parfaitement dans les listes, les formulaires et les actions—aucun codage requis.

FAQ

Pourquoi choisir Adalo plutôt que d'autres solutions de création d'applications ?

Adalo est un créateur d'applications alimenté par l'IA qui crée de véritables applications natives iOS et Android. Contrairement aux wrappers web, il se compile en code natif et se publie directement à la fois sur l'Apple App Store et Google Play Store à partir d'une seule base de code, ce qui facilite la partie la plus difficile du lancement d'une application.

Quel est le moyen le plus rapide de créer et de publier une application sur l'App Store ?

L'interface glisser-déposer d'Adalo associée aux fonctionnalités de création assistée par l'IA comme Magic Start et Magic Add vous permet de créer des applications rapidement. La plateforme gère l'ensemble du processus de soumission à l'App Store, vous permettant de passer de l'idée à l'application publiée sans gérer manuellement les certificats, les profils de provisionnement ou les directives d'examen des applications.

Comment puis-je m'assurer que mon point de terminaison GraphQL fonctionne correctement avec Adalo ?

Commencez par confirmer que votre point de terminaison prend en charge les requêtes et mutations GraphQL standard. Exécutez des tests à l'aide de GraphiQL, GraphQL Playground ou Postman pour vous assurer qu'il fournit des réponses JSON correctement structurées. Vérifiez que le point de terminaison est accessible et retourne des données avec des identifiants numériques, que requiert Adalo pour les Collections externes.

Quels types d'authentification pouvez-vous utiliser pour connecter les points de terminaison GraphQL dans Adalo ?

Adalo prend en charge les clés API, les jetons OAuth et l'authentification basée sur JWT pour les points de terminaison GraphQL. Ajoutez vos identifiants à l'en-tête Authorization au format « Bearer [Your_Token] ». La méthode spécifique dépend des exigences de votre fournisseur d'API.

Quels sont les meilleurs moyens d'améliorer les performances de l'application lorsque vous utilisez GraphQL avec Adalo ?

Utilisez PATCH au lieu de PUT pour les mises à jour partielles, appliquez des filtres pour réduire les tailles de charge utile et respectez la limite de 5 demandes par seconde. L'outil X-Ray d'Adalo identifie les goulots d'étranglement de performance avant qu'ils n'affectent les utilisateurs, vous aidant à optimiser les requêtes lentes ou les relations de données inefficaces.

Combien de temps faut-il pour construire une application connectée à GraphQL dans Adalo ?

Avec votre point de terminaison GraphQL déjà préparé, vous pouvez le connecter à Adalo et créer une application fonctionnelle en quelques heures. Magic Start génère des fondations d'applications complètes à partir de descriptions, et le générateur visuel—décrit comme « aussi facile que PowerPoint »—vous permet de créer des écrans et de lier des données sans codage.

Dois-je avoir une expérience en codage pour intégrer GraphQL avec Adalo ?

Aucun codage n'est requis. La fonctionnalité Collections externes d'Adalo gère la complexité technique de l'intégration de GraphQL. Vous configurez les points de terminaison, les en-têtes et les requêtes via une interface visuelle, et Magic Text vous permet de lier les données aux composants d'interface utilisateur sans écrire de code.

Combien coûte la création d'une application connectée à GraphQL avec Adalo ?

Le plan Adalo Professional commence à 36 $/mois et inclut les Collections externes, les enregistrements de base de données illimités et aucun frais basé sur l'utilisation. Contrairement aux plateformes comme Bubble qui facturent en fonction des unités de charge de travail, la tarification d'Adalo est prévisible sans surprise de facturation.

Puis-je publier mon application connectée à GraphQL sur l'App Store ?

Oui. Adalo publie les applications iOS et Android natives directement sur l'Apple App Store et Google Play Store à partir d'une base de code unique. Les mises à jour se synchronisent automatiquement sur toutes les plateformes—vous n'avez pas besoin de reconstruire ou de soumettre à nouveau pour chaque plateforme séparément.

Que se passe-t-il si mes données GraphQL augmentent considérablement ?

Les plans payants d'Adalo n'ont pas de limites d'enregistrements, donc vos Collections externes peuvent s'adapter à vos données. L'infrastructure modulaire de la plateforme prend en charge les applications avec 1 million+ d'utilisateurs actifs mensuels, et le serveur Adalo 3.0 offre une performance 3 à 4 fois plus rapide que les versions précédentes.