Introduction à l'éditeur d'applications Tulip
  • 22 Sep 2022
  • 5 Minutes à lire
  • Contributeurs
  • Sombre
    Lumière

Introduction à l'éditeur d'applications Tulip

  • Sombre
    Lumière

Objectif

Dans cet article, vous allez apprendre :

  • Les différentes parties de l'éditeur d'applications Tulip
  • Les éléments visuels de base que vous pouvez ajouter à une application (aussi appelés Widgets)
  • Comment ajouter une logique de base en utilisant des boutons
  • Comment compléter votre application pour enregistrer des données

Note : Ce sujet est abordé dans le cours "Introduction to App Building" de l'Université Tulip.

Si vous êtes encore en train de vous familiariser avec le Tulip App Editor, cet article est pour vous. Nous utiliserons un exemple d'application d'instructions de travail visuelles pour présenter les principaux outils de l'éditeur d'applications.

Avant de commencer, voici un petit rappel : L'éditeur d'applications vous permet de créer des applications pour les opérateurs sans écrire de code.

Voici à quoi cela ressemble :

L'éditeur d'applications vous permet de créer une série d'étapes, ou d'écrans, que les opérateurs peuvent utiliser dans une application. Les étapes peuvent également être organisées en groupes d'étapes pour une meilleure convivialité.

Un aperçu rapide de l'éditeur d'applications Tulip

La liste des étapes sur la gauche montre la liste des étapes incluant la mise en page de base.

Toute modification de formatage ou de mise en page apportée à la mise en page de base sera automatiquement appliquée à chaque étape de l'application.

Vous pouvez modifier la mise en page de base dans chaque étape en "déverrouillant" les éléments individuels dans le volet contextuel de droite.

En utilisant le bouton droit de la souris, vous pouvez dupliquer, grouper les étapes ou les supprimer.

Vous pouvez cliquer sur une étape pour afficher les éléments qu'elle contient.

La barre d'outils située en haut de l'écran comprend des éléments visuels qui peuvent ê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'endroit souhaité.

Sur le côté droit de la barre d'outils se trouvent des outils supplémentaires que vous pouvez utiliser pour superposer les objets dans l'éditeur d'applications Tulip.

Le volet contextuel à droite de l'écran est l'endroit où vous gérez tout le formatage et la logique de l'application. Pour en savoir plus sur la configuration des widgets, cliquez ici.

Il y a trois onglets :

  • L'onglet Étape
  • Onglet App
  • Onglet Widget

L'onglet Étape vous montre :

  • Les options de formatage pour l'ensemble de l'étape
  • Permet de spécifier le temps de cycle cible pour cette étape
  • Permet de réinitialiser la mise en page spécifiée dans la mise en page de base.
  • Permet de supprimer l'étape en cours
  • Vous permet de construire une logique qui sera exécutée chaque fois que cette étape est ouverte ou fermée - nous parlerons des déclencheurs un peu plus tard.

L'onglet App:

  • Vous permet d'imprimer les étapes de l'application.
  • Permet de régler la durée du cycle pour l'ensemble de l'application.
  • Affiche une liste de toutes les variables associées à cette application.
  • Permet de spécifier la résolution de l'application en fonction de l'interface prévue.
  • Vous permet d'ajouter des commentaires si plusieurs administrateurs examinent les modifications.
  • Vous permet d'élaborer une logique qui sera exécutée chaque fois que l'application est lancée, terminée ou annulée.

Si vous cliquez sur un élément de l'application, vous verrez apparaître un autre onglet dans le volet contextuel, appelé onglet Widget. C'est là que vous allez ajuster le format des divers éléments visuels de l'application, ainsi que son comportement lorsqu'il y a interaction.

À l'aide de l'outil de panoramique et de zoom, vous pouvez

  • déplacer la surface d'édition de votre application
  • effectuer un zoom avant ou un zoom arrière.

Ajouter des étapes à votre application

Pour créer une nouvelle étape dans une application Tulip, cliquez sur l'option Ajouter une étape sur le côté gauche de l'éditeur d'application. Le design de la nouvelle étape reflétera la mise en page de base.

Astuce : vous pouvez également dupliquer une étape existante si vous souhaitez réutiliser le design ou la logique de votre nouvelle étape en cliquant sur l'icône de l'engrenage et en sélectionnant "Dupliquer l'étape".

Ajout de la logique à votre application

Maintenant que nous avons vu comment ajouter de nouvelles étapes, nous devons donner aux opérateurs un moyen de passer d'une étape à l'autre. Nous pouvons créer cette logique dans Tulip en utilisant des triggers. Pour commencer, utilisons un simple bouton pour naviguer d'étape en étape.

Vous pouvez ajouter un bouton personnalisé en sélectionnant "Bouton" dans la barre d'outils située en haut de l'éditeur d'applications. Faites glisser le bouton à l'emplacement souhaité.

Ajoutez une étiquette pour le bouton et ajustez les options de format/coloration en utilisant le panneau contextuel à droite.

Pour ajouter une logique au bouton, cliquez sur le signe "+" à côté de Triggers dans le volet contextuel.

Lesdéclencheurs vous permettent d'ajouter une logique à vos applications sans avoir à utiliser de code, à l'aide d'une simple séquence when, if, then, else. Voici l'éditeur de déclencheurs qui s'ouvre lorsque vous cliquez sur le signe "+".

Une action ou une transition est un changement qui se produira dans l'application lorsque le déclencheur se déclenchera.

Il existe de nombreuses actions et transitions que vous pouvez effectuer lorsque vous appuyez sur le bouton.

Ce déclencheur est simple :

Quand : le bouton est enfoncé

Ensuite : L'heure actuelle est enregistrée dans une variable

Et ensuite : Aller à l'étape → Suivant.

Ce bouton permet de passer à l'étape suivante. Vous voudriez généralement ajouter un bouton permettant aux utilisateurs de naviguer vers l'étape précédente également.

Une fois que vous avez élaboré la logique de base de l'application, vous pouvez cliquer sur l'option Exécuter ou Tester en haut à droite de l'éditeur d'applications. Cela lancera votre application dans le lecteur TTulip et vous permettra de tester l'application sur votre ordinateur en temps réel.

Compléter votre application pour enregistrer les données

Vous devez ajouter un bouton Compléter pour que Tulip enregistre toutes les données de l'utilisation de l'application par l'opérateur.

Dans cet exemple, nous allons ajouter un autre bouton à la dernière étape de l'application pour enregistrer un achèvement.

Cliquez sur l'option "Boutons" dans la barre d'outils, et choisissez le bouton Terminer. Faites-le glisser sur la dernière étape de votre application.

Félicitations ! C'est tout ce que vous avez besoin de savoir pour créer une application simple d'instructions de travail.

Autres lectures

Utilisez ces guides étape par étape pour créer une application complète à l'aide de ces concepts.


Vous avez trouvé ce que vous cherchiez ?

Vous pouvez également vous rendre sur community.tulip.co pour poser votre question ou voir si d'autres ont été confrontés à une question similaire !


Cet article vous a-t-il été utile ?