CityGuide ▶️

Ce template CityGuide vous permet d’utiliser une app guide. Vous allez pouvoir gérer une map, avec une liste de sites localisés, des descriptions pour guider des visiteurs dans une ville. Ces données vous pouvoir être connectées à votre compte Airtable.

Enregistrement de l’écran 2022-03-01 à 14.44.48.gif

Composition du template :

Ce template est composé de 3 écrans :

un écran avec la liste des spots, composé principalement d’un noeud Input.
un écran avec une map composé principalement d’un noeud Mapbox.
un écran “À propos” avec un noeud Image, un noeud Texte, un noeud Texte enrichi et un noeud Bouton.

Mettre en place votre base Airtable :

Base cityguide.png

La base Airtable que vous allez connecter au projet doit être composé de la manière qui suit :

une colonne “Name”* de type Single line text pour le nom du lieu, de la ville, du site...
une colonne “Image”* de type Attachment, qui pourra contenir une ou plusieurs images illustrant le lieu.
une colonne “Description”* de type Long text pour contenir un petit texte explicatif.
une colonne “Latitude”* de type Number au format décimal avec la précisoin maximale, contenant les coordonnées de la latitude du site.
une colonne “Longitude”*, sur le même schéma que la précédente, contenant les coordonnées de la longitude.
une colonne “Id”* de type Formula, au format “RECORD_ID()”.

*Ces nominations doivent être strictement respectées pour que l’appel à la base Airtable puisse se faire correctement. Si vous souhaitez leur donner un autre nom, reportez-vous au tutoriel complexe Ton App from Scratch.

Connecter votre base Airtable à votre projet :

Copier votre clé API que vous trouverez dans la page Aperçu de votre compte Airtable.
Retournez sur Voltapp puis dans le noeud Airtable, supprimer la précédente clé API, et copier la vôtre. Sélectionnez ensuite la bonne base de données puis la table correspondante.
Cliquez sur Actualiser.

Votre base de données Airtable est maintenant connectée. Depuis le noeud Airtable, passez en mode Graphe. Deux blocs ont été supprimés lorsque vous avez connecté votre base. Il va falloir les recréer pour que Voltapp puisse correctement faire appel à votre base de données.

Tirez un lien depuis le bloc supérieur définir isLoading puis ajoutez le bloc Action récupérer des lignes.
Connectez la sortie du bloc à l’entrée du bloc supérieur définir spots et connectez le paramètre “lignes” au paramètre “spots” du même bloc.
Répétez la même opération depuis le bloc inférieur définir isLoading avec le bloc inférieur définir spots.
Cliquez sur le nouveau bloc récupérer des lignes, puis au niveau du paramètre “filtrer par formule” cliquez sur l’icône connection.
Dans le menu déroulant qui apparaît, choisissez Convertir en formule puis rentrez la formule suivante : SEARCH("@searchQuery", {Name}) >0

Enregistrement de l’écran 2022-03-01 à 14.53.29.gif

Votre base de données Airtable est maintenant connectée. Cliquez sur Aperçu pour vous en assurer.

Personnalisez la page À Propos :

La Page À Propos de ce template peut être personnalisée à votre guise. Cliquez sur chaque noeud pour en adapter le contenu.

Si vous souhaitez ajouter des éléments, comme un lien vers votre site internet par exemple, voici comment faire :

Dans About, ajoutez un noeud Section que vous configurerez à l’horizontal.
Placez tous les noeuds de la page à l’intérieur.
Ajoutez un noeud Lien. Puis renseignez les champs comme vous le désirez.

De cette façon votre ajout sera automatiquement bien ordonné dans le reste de la page par rapport aux autres éléments.