English

Español

🎉 Bienvenue

Introduction à Voltapp

POUR COMMENCER ⏱

Découvrir les templates

Créer son Airtable

Connecter ses données

Publier son app

APPRENDRE ****VOLTAPP ▶️

Explication de l’interface

https://www.youtube.com/watch?v=ZPr77_5ODgI

Une fois dans l’éditeur, l’interface de Voltapp se divise en 4 grandes parties :

1. La barre d’outils, qui contient différentes actions faisables par l’utilisateur (comme par exemple, ajouter un nœud ou encore publier l’app). À noter que la barre peut changer en fonction des différents modes (abordés ci-dessous)
2. L’arborescence du projet, à gauche représente l’ensemble des nœuds qui composent l’app (éléments hyper-personnalisables et combinables comme un texte, un bouton ou encore une connexion à Airtable). Les nœuds sont organisés en arborescence avec pour racine le nœud app. Chaque nœud créé apparaît ici et peut être déplacé, supprimé ou encore sélectionné. Dans l’exemple ci-dessus vous repérez le nœud App, le nœud Section, le nœud Texte et le nœud Image.
3. La prévisualisation, au centre montre visuellement à quoi l’application ressemble. Il est également possible de sélectionner ou modifier certains nœuds.
4. L’inspecteur de nœud, sur la droite, affiche et permet de modifier les attributs du nœud sélectionné. Dans l’exemple, il s’agit du nœud Texte.

La sauvegarde

Dans Voltapp, la sauvegarde est faite automatiquement par défaut après chaque modification. Si vous préférez sauvegarder manuellement, rendez-vous dans le Menu > Préférences et désactivez “Activer la sauvegarde automatique” :

À chaque fois que vous effectuez un changement, le bouton deviendra bleu pour vous signaler que vous pourrez sauvegarder à nouveau.

Si vous avez un gros projet, ou que vous travaillez à plusieurs sur un même projet, on vous conseille vivement de désactiver la sauvegarde automatique.

Le mode graphe

Vous pouvez passer du mode éditeur au mode graphe en utilisant les boutons correspondants depuis la barre d’outil.

Le mode graphe affiche le graphe correspondant au nœud sélectionné. Un graphe est composé de blocs connectés entre eux, il permet de créer de la logique liée à ce nœud sans avoir à écrire de lignes de code. Lorsque vous sélectionnez un bloc, sa configuration est affichée dans l’inspecteur à droite qui devient un inspecteur de bloc (abordé ci-dessous dans Un système de graphe pour coder visuellement).

Le mode aperçu

En mode aperçu vous pouvez tester votre app telle qu’elle fonctionnera une fois publiée.

Afin de lancer l’aperçu avec un appareil différent, cliquez sur le bouton appareil dans la barre d’outil, et sélectionnez “iPhone” dans la catégorie “Tous”

Lorsque le mode aperçu est activé, deux nouveaux boutons s’ajoutent dans la barre d’outil :

• Plein-écran : vous permet de lancer l’aperçu dans un nouvel onglet de votre navigateur.
• Debug : affiche une console de débogage (pour contrôler qu’il n’y ait pas de bugs dans la logique des données) avec deux onglets :

L'onglet Variables affiche l'état de vos variables (concept expliqué ci-dessous) en temps réel lorsque vous testez votre application.

L’onglet Log affiche tous l’historique des messages du bloc Debug déclenchés dans les graphes Voltapp pour tester votre app.