Dans cet article, vous apprendrez :
- Les différentes parties de l’éditeur d’applications Tulip
- Les éléments visuels de base que vous pouvez ajouter à une application (également appelés « widgets »)
- Comment ajouter une logique de base à l’aide de boutons
- Comment finaliser une application pour enregistrer des données
This topic is featured in the Introduction to app building course in Tulip University.
Si vous commencez tout juste à vous familiariser avec l’éditeur d’applications Tulip, cet article est fait pour vous. Nous allons utiliser l’exemple d’une application de consignes de travail pour passer en revue tous les principaux outils de l’éditeur d’applications.
L'éditeur d'applications vous permet de créer des applications destinées aux opérateurs sans avoir à écrire la moindre ligne de code.
Voici à quoi il ressemble :
Dans l’éditeur d’applications, vous pouvez créer une série d’ étapes qui représentent les éléments visuels numériques d’un processus.
Vidéo de présentation
We're constantly improving the applications that come in new instances. If you joined Tulip recently, the apps in your instance might look different than what you see in images in this article. No worries, the ideas are the still same even if the content is a little different.
Présentation détaillée de l’éditeur d’applications
L'éditeur d'applications est l'outil qui vous permet de créer et de modifier votre application. Le schéma suivant présente les différentes parties qui composent l'éditeur d'applications :
- Ajouter une étape/un groupe d'étapes - Ajoutez une nouvelle étape ou un nouveau groupe d'étapes
- Panneau « Étapes/Enregistrements » : affichez vos étapes via l'onglet « Étapes » ou basculez vers l'onglet « Enregistrements » pour afficher les tables utilisées
- Espace de travail - L'espace dédié à la création de l'interface de votre application
- Ajouter un widget de ressource : ajoutez une forme, une icône ou un logo à votre application
- Ajouter un widget Bouton - Ajoutez un bouton à votre application
- Ajouter un widget de saisie - Ajoutez un champ de saisie à votre application
- Ajouter un widget « Texte » : ajoutez une zone de texte à votre application
- Intégrer un widget : intégrez divers widgets, tels que des images, des analyses, des attributs de machine, etc.
- Ajouter un widget « Appareil photo » : ajoutez un cliché pris avec un appareil photo classique ou un lecteur de codes-barres
- Traduire : Tulip Player traduira automatiquement l'application dans la langue de votre choix via votre profil Tulip
- Créer un instantané : enregistrez une version actuelle de votre application en créant un double
- Tester : testez votre application via le mode développeur
- Exécuter : exécutez votre application dans le Tulip Player
- Publier : publiez votre application
- Avancer/Reculer : déplacez un élément dans l'espace de travail pour le faire passer devant ou derrière d'autres éléments
- Volet latéral - Définissez les déclencheurs et les composants stylistiques dans les onglets « Widget », « Étape » et « Application ».
À l'aide de l'outil de panoramique et de zoom, vous pouvez :
- Déplacer la zone d'édition de votre application
- Zoomer ou dézoomer
La liste des étapes située à gauche affiche la liste des étapes, y compris la mise en page de base.
Mise en page de base
Toute modification de mise en forme ou de mise en page que vous apportez à la mise en page de base s'appliquera automatiquement à chaque étape de l'application.
Vous pouvez modifier la mise en page de base d'une étape donnée en « déverrouillant » des éléments individuels dans le volet de contexte situé à droite.
Pour en savoir plus sur les mises en page de base, cliquez ici.
Étapes
Vous pouvez cliquer sur une étape pour afficher les éléments qu'elle contient.
Cliquez avec le bouton droit sur une étape pour la dupliquer, regrouper des étapes ou la supprimer.
Pour en savoir plus sur les étapes, cliquez ici.
Barre d'outils
La barre d'outils située en haut de l'écran comprend des éléments visuels pouvant être ajoutés à l'application. Il s'agit d'éléments tels que des formes, des photos, du texte, des vidéos et des boutons. Pour ajouter un nouvel élément visuel à l'application, il suffit de cliquer dessus et de le faire glisser à l'emplacement souhaité.
À droite de la barre d'outils se trouvent des outils supplémentaires que vous pouvez utiliser pour superposer les objets dans l'éditeur d'application Tulip.
Volet de contexte
Le volet contextuel, situé à droite de l'écran, vous permet de gérer l'ensemble de la mise en forme et de la logique de l'application. Pour en savoir plus sur la configuration des widgets, cliquez ici.
Il existe trois onglets :
- Onglet « Étape »
- Onglet « App »
- Onglet « Widget »
Onglet « Étape »
L'onglet « Étape » vous présente :
- Les options de mise en forme pour l'ensemble de l'étape
- Vous permet de spécifier le temps de cycle cible pour cette étape
- Vous permet de rétablir la configuration spécifiée dans la « Configuration de base »
- Vous permet de supprimer l'étape actuelle
- Vous permet de créer une logique qui s’exécutera chaque fois que cette étape sera ouverte ou fermée – nous reviendrons plus en détail sur les déclencheurs un peu plus tard.
Onglet « App »
L'onglet « App » :
- Vous permet d'imprimer les étapes de l'application
- Vous permet de régler la minuterie de cycle pour l’ensemble de l’application
- Affiche la liste de toutes les variables associées à cette application
- Vous permet de définir la résolution de l'application en fonction de l'interface souhaitée.
- Vous permet d’ajouter des commentaires si plusieurs administrateurs examinent les modifications
- Vous permet de créer une logique qui sera exécutée chaque fois que cette application est lancée, terminée ou annulée
Onglet « Widget »
En cliquant sur un élément de l'application, vous affichez un autre onglet dans le volet latéral, intitulé « Onglet Widget ». C'est là que vous pouvez ajuster le format des différents éléments visuels de l'application, ainsi que leur comportement lors d'une interaction.
Ajouter une logique à une application
La logique détermine ce qui se passe dans l’application lorsque l’opérateur interagit avec elle. Pour commencer, utilisons un simple bouton avec un déclencheur pour passer d’une étape à l’autre.
- Cliquez sur « Boutons » dans la barre d’outils, puis sélectionnez « Bouton ».
- Faites glisser le bouton à l’emplacement souhaité.
- Ajoutez une étiquette au bouton et ajustez les options de formatage et de couleur à l'aide du volet contextuel situé à droite.
- Pour ajouter une logique au bouton, cliquez sur le signe « + » à côté de « Déclencheurs » dans le volet latéral.
Les déclencheurs vous permettent d’ajouter de la logique à vos applications sans avoir à utiliser de code. Les déclencheurs utilisent une séquence « when, if, then, else ».
Le déclencheur que nous allons créer ici suit la logique suivante :
Quand : Le bouton est enfoncé
Alors : L'heure actuelle est enregistrée dans une variable
Transition : Passer à l'étape → Suivante.
- Cliquez sur « Enregistrer ».
Ce bouton permet à l'utilisateur de passer à l'étape suivante. En général, il est conseillé d'ajouter également un bouton permettant aux utilisateurs de revenir à l'étape précédente.
Une fois que vous avez mis en place la logique de base de l’application, vous pouvez cliquer sur « Tester » en haut à droite. Cela lancera votre application en mode développeur, ce qui vous permettra de la tester.
Terminer une application et enregistrer les données
Un bouton « Terminer » permet à Tulip d'enregistrer toutes les données de l'application associées à chaque opérateur.
Dans cet exemple, nous allons ajouter un autre bouton à la dernière étape de l'application.
- Sélectionnez la dernière étape de votre application.
- Cliquez sur « Boutons », puis sélectionnez « Terminer ».
- Faites glisser le nouveau bouton à l'emplacement souhaité.
Pour aller plus loin
Suivez ces guides étape par étape pour créer une application complète à l'aide de ces concepts :
Avez-vous trouvé ce que vous cherchiez ?
Vous pouvez également vous rendre sur community.tulip.co pour poser votre question ou voir si d'autres utilisateurs ont rencontré un problème similaire !