Créez une application sans code avec Appgyver

Table des matières

ArticlesA lire

Revue Atomicrops – SUPERJUMP – Moyen

Un moyen super facile de faire des validations EditText dans Android

Messagerie cloud Firebase – Satya Pavan Kantamani

Génération de DeepLinks au moment de la compilation Android

Créons une application Web de base en utilisant Airtable et Appgyver. Aucune compétence de codage requise.

Nous allons créer un catalogue de produits avec des catégories en utilisant:

: Un service de base de données hybride pour structurer vos données (Partie 1)

: Une plateforme sans code pour construire votre application (Partie 2)

Les deux services cloud sont conviviaux et ont un plan gratuit généreux.

Remarque: Je n’ai aucune affiliation commerciale avec aucune des sociétés. Cependant, vous êtes invités à vous inscrire à Airtable pour la référence.

1.1. Préparez vos données au format tableur

Dans Airtable, nous organiserons comme suit:

1 base par application
1 table (feuille) par objet (type d’élément) dont vous disposez

Autant de colonnes par table que de propriétés d’objet dont vous avez besoin
Autant d’enregistrements (lignes) que le nombre d’éléments que vous avez par objet
Les relations entre les objets seront également définies par des colonnes

Vous pouvez avoir jusqu’à 1 200 enregistrements dans Airtable par base dans le plan gratuit.

Vous pouvez voir et copier les exemples de données ci-dessous:

Le premier avantage d’Airtable par rapport à une feuille de calcul classique est que vous pouvez faire référence à des objets dans d’autres tableaux.

Après avoir rempli des données aléatoires pour vos produits et catégories, vous devez:

Créer Product code Product name productImageUrl colonnes pour Products
Créer Id Name Description pour les catégories

Remplissez des données aléatoires pour les deux tableaux
Assure-toi Product code et Category id sont dans la première colonne
Dans la table Produits, ajoutez une nouvelle colonne avec le type de champ Link to another record aux catégories

Un produit ne peut avoir qu’une seule catégorie. Décochez Allow linking to multiple records
Faites de même dans le tableau des catégories, cette fois Allow linking to multiple records doit être vérifié
Ajouter unLookup colonne à lier au nom de la catégorie dans le tableau des produits

1.2. Exposez vos données sous forme d’API

Le 2ème avantage d’Airtable est qu’il permet d’exposer votre table dans un format JSON facilement lisible par des 3ème applications comme Appgyver.

La documentation de l’API est accessible à l’adresse.

Tu peux vérifier show API key et ton Base ID dans l’URL. Ces informations vous seront utiles ultérieurement.

Différentes ressources (tables) utilisent des itinéraires différents. Ils partagent la même URL de base https://api.airtable.com/v0/BASE_ID/RESOURCE_NAME. Pour chaque ressource, nous pouvons appeler différentes méthodes:

GET (All): liste tous les enregistrements
POST: créer un enregistrement

GET (One): récupérer un enregistrement
PUT: modifier un enregistrement
SUPPRIMER: supprimer un enregistrement

Toutes les routes fournissent un corps de réponse JSON lorsqu’une demande est effectuée.

GET (One), PUT et DELETE doivent ajouter un /id à l’URL pour savoir quel enregistrement traiter.

POST et PUT attendent un corps de requête JSON car plus d’informations doivent être fournies.

Jetons un coup d’œil au format de corps Airtable JSON:

Cela est composé de :

une records tableau entre [] composé d’articles

les objets sont des objets {} séparé par , dans le records tableau
chaque élément a une Airtable id , createdTime et fields Propriétés
chaque fields est un objet {} composé de propriétés d’élément séparées par ,

chaque propriété d’élément est une paire de valeurs clés dans " " et séparés par :

Vous êtes maintenant prêt à créer votre application dans Appgyver. Nous allons construire:

une liste de produits avec fonction de recherche

une section de création / modification de produit avec sélection de catégorie

Voici l’exemple d’application en action. Vous pouvez également le vérifier.

2.1. Aperçu

Appgyver n’a aucune restriction dans son plan gratuit.

Jetons un coup d’œil à l’interface Appgyver.

Il est organisé comme suit:

Une barre latérale gauche avec des composants

Un menu supérieur avec Pages, Thème, Navigation, Données
Un sélecteur pour l’affichage des pages et les variables
Une barre latérale droite avec les propriétés des composants et la mise en page

Une section de pied de page avec des workflows logiques et des composants

Vous pouvez importer l’exemple de projet à partir de la barre latérale Component Market en entrant dans la barre de recherche m3PAwm0d11bRKzbi6X0MQQ.

Pour notre projet, la largeur du périphérique pour l’application sera définie sur 1024px. Mais vous pouvez changer le niveau de zoom pour une meilleure visualisation.

2.2. Configurer les sources de données

Nous allons configurer les routes API dans le menu Data et ajouter une nouvelle source de donnéesREST API Direct Integration appelé Airtable_Products.

Pour une configuration plus rapide, vous pouvez ajouter une ressource de données à partir de Market Search à la place avec le code pV5z-2GzSYHme-Y4f794gA.

Pour BASE, entrez les informations de votre API Airtable:

Resource URL : https://api.airtable.com/v0/BASE_ID/Products
HTTP Header avec étiquette et cléAuthorization et valeur Bearer TOKEN_KEY

Oublie tout):

RemplirResponse key path avecrecords
Vous pouvezTest pour vérifier que votre route API fonctionne.
Vous pouvezSet schema from response pour que vos données Airtable_Products expose ses propriétés plus tard.

Vous pouvez faire de même pour Airtable_Categories ressource avec la route GET (ALL).

Pour GET (ONE), PUT et DELETE:

Relative path: /{id}

URL placeholder: étiquette et clé avecid

Is static et Is optional devrait être false.

Vous pouvez Test en copiant le id vous avez obtenu de GET (ALL).

Pour POST, aucune autre configuration n’est nécessaire.

2.2. Vérifier les variables de données

Les variables de données et de page ont déjà été importées automatiquement. Vous pouvez les vérifier en passant à Variables.

Veuillez noter que GET (ALL) et GET (One) exposer deux variables différentes Airtable_products et Airtable_productSingle.

2.3. Vérifier la mise en page et les composants de la page

Les composants sont organisés en conteneurs, lignes et cellules. Les composants glisser-déposer fonctionnent dans la vue Page et la mise en page. Vous pouvez bien sûr déplacer, supprimer et dupliquer des composants à votre guise.

Dans la barre latérale supérieure droite, vous avez:

Properties: Options pour modifier et prévisualiser les données

Style : Options pour modifier l’espacement et la typographie

2.4. Vérifiez la logique des pages, des composants et des données

La logique définit les événements et les actions qui se produisent pendant l’exécution.

Les événements (en gris) comprennent:

lancement de page
changements de variables
cliquez sur les composants

Les actions (en bleu) consistent en:

faire des demandes de données
définition de variables à partir de données ou de composants

faire des interactions avec l’interface utilisateur, comme naviguer vers une autre page ou afficher une fenêtre contextuelle

Une action doit être connectée directement ou indirectement à un événement pour se produire. Ils sont déposés par glisser-déposer dans la barre latérale gauche de Logic.

Vous pouvez vérifier la logique des pages lorsque vous cliquez n’importe où en dehors du cadre.

Au chargement de la page, nous envoyons des demandes de données pour récupérer des produits et des catégories dans Airtable et nous les chargeons dans des variables de données.

Vérifions la logique du Create bouton cliquez sur le composant.

Nous constatons que l’action Créer un produit est bloquée si:

le nom du produit est vide [1]
le code produit n’est pas numérique [2]

Nous utilisons des composants logiques IF avec les formules suivantes:

IS_EMPTY (pageVars.productName) [1]

MATCHES_REGEX (pageVars.productCode, « [0–9] ») [2]

Le composant IF a deux nœuds sortants à droite:

Noeud supérieur: si la formule retourne true
Noeud inférieur: si la fomule revientfalse

Vérifions un autre exemple de logique pour les variables de données.

le Airtable_Products La ressource de données obtient un rafraîchissement des données toutes les 5 secondes, que la demande soit réussie ou non. En cas de succès de la requête, la variable de données obtient sa sortie.

2.5. Créer un enregistrement

Pour créer un produit, nous devons mettre en place un conteneur de formulaire avec:

Champs de saisie tels que productName productCode productImageUrl connecté aux variables de page
Une liste déroulante charge les options d’étiquette et de valeur de Airtable_Categories variables de données. Cela utilise la formule:

MAP (data.Airtable_Categories, {label: item.fields.Name, value: item.id})

MAP La fonction transforme un tableau en un autre. Ici, nous extrayons Name et id valeurs et renommer nos clés label et value pour s’adapter à la syntaxe déroulante

data. est le préfixe des variables de données dans votre page.

item représente l’élément actuel dans le tableau.

.fields est l’endroit où se trouvent nos propriétés d’élément dans la réponse Airtable JSON.

Nous avons configuré nos composants d’entrée, vérifions leCreate bouton où la magie opère:

Créer une action d’enregistrement dans la ressource de données Airtable_Products avec les propriétés d’enregistrement suivantes:

{« Champs »: {« Code produit »: pageVars.productCode, « Nom du produit »: pageVars.productName, « _category »: [ pageVars.productCategory ], «ProductImageUrl»: pageVars.productImageUrl}}

pageVars. est le préfixe des variables de page que vous avez définies.

pageVars.productCategory est entre [] car il renvoie une chaîne lorsque l’entrée attendue est un tableau.

Vous pouvez vérifier ci-dessous qu’il s’agit exactement du format de demande JSON POST dans la documentation de l’API Airtable pour un seul objet.

2.7. Modifier la visibilité des composants

Le formulaire de création est contrôlé par le bouton Nouveau dans la liste des produits. Sur clic :

Ensemble createDialog à vrai. Ce booléen est défini dans les propriétés avancées du conteneur visibility :

SI (pageVars.createDialog === vrai, vrai, faux)

L’œil permet de fixer value lors de la prévisualisation, affichez ou masquez donc le conteneur.

De même, le jeu de boutons Fermer createDialog à faux.

le editDialog conteneur a le même fonctionnement.

2.8. Liste des enregistrements

Afin d’énumérer tous les éléments, nous allons:

Met le Repeat with à Airtable_Products variable de données

Sélectionnez pour primary labelet secondary label ses champs enfants Nom du produit et Nom de la catégorie

En tant que formule, la syntaxe serait current.fields["Product Name"] et current.fields._categoryName.

[" "] sont pour les propriétés d’objets avec un espacement des mots

current est un préfixe pour désigner le Repeat with objet

Pour activer la recherche, nous allons:

Avoir la valeur d’entrée de recherche définie sur une variable de page searchText

Définir une variable de page results quels filtres Airtable_Products au texte contient dans searchText lors du changement de l’entrée de recherche.

SELECT (data.Airtable_Products, CONTAINS (LOWERCASE (item.fields)[“Product name”]), LOWERCASE (pageVars.searchText)))

Un composant logique anti-rebond doit être ajouté pour démarrer l’action après avoir terminé de taper 500 ms pour éviter tout retard.
Réglez la répétition avec surresults sur la liste des articles

Ensemble results à data.Airtable_Products au chargement de la page pour voir tous les produits

2.9. Modifier un enregistrement

Pour avoir notre liste de produits, ouvrez la vue détaillée sur le clic sur l’élément, nous allons:

Configurer une variable de page productId à la current.id lorsque l’enregistrement est tapé

Envoyez une demande GET (One) avec pageVars.productId à Airtable_Products ressource de données
Obtenir le résultat dans la variable de données Airtable_productSingle
Ouvrir la vue détaillée de modification en définissant editDialog à true

Nous connectons ensuite notre vue détaillée aux données:

Avoir productName productCode productImageUrl mis à leur respectifAirtable_productSingle.fields.xxx variables de données. Cette liaison de données signifie qu’elle fonctionne à la fois pour la récupération et la mise à jour des données.
Afficher productImageUrl comme une image dans une cellule latérale

Avoir une variable de page productCategory enregistré dans la valeur de la propriété du composantDropdown field (selected value)en fût.

Mettre à jour l’enregistrement sur le bouton cliquez pour ressource Airtable_Products avec id pageVars.productId et enregistrez les propriétés ci-dessous:

{« Champs »: {« Code produit »: data.Airtable_ProductSingle.fields[“Product code”], «Nom du produit»: data.Airtable_ProductSingle.fields[“Product name”], « _Catégorie »: [pageVars.productCategory] , «ProductImageUrl»: data.Airtable_ProductSingle.fields.productImageUrl}}

Vous pouvez vérifier ci-dessous qu’il s’agit exactement du format de demande JSON PUT dans la documentation de l’API Airtable pour un seul objet:

Remarque: Appgyver ne prend actuellement pas en charge la méthode PATCH.

Appgyver offre beaucoup plus de possibilités que nous n’avons pas couvertes, telles que:

exporter votre code pour héberger sur votre propre serveur

partager des composants avec d’autres
créer des applications Android et iOS
ajouter du javascript personnalisé

Pour progresser davantage avec cet exemple d’application, vous pouvez:

essayez les autres composants tels que les cases à cocher
créer plusieurs pages et naviguer entre elles
rendre votre application plus belle avec des styles et des thèmes
ajouter une connexion utilisateur et des autorisations
jouer avec des graphiques et des formules
se connecter aux données de
explorer des cas d’utilisation dans

Quelques conseils supplémentaires pour déboguer votre no-code:

testez d’abord votre demande dans Data Source Test avant d’ajouter la formule à un composant
ajouter une logique d’alerte après une action pour vérifier si votre action a réussi ou non
utilisez la formule si votre option de valeur semble indisponible
si la formule ne fonctionne pas, essayez de reconfigurer le composant ou l’itinéraire
vérifier les erreurs Javascript dans la console Chrome CTRL+Shift+I
activer le débogueur dans Appgyver pour vérifier l’état actuel des variables de données et de page
demande à certaines API peut entraîner failed to fetchen raison de la politique CORS. Vous aurez besoin d’une instance Chrome distincte pour votre développement: