Commencez à créer des applications
  • 22 Sep 2022
  • 16 Minutes à lire
  • Contributeurs

Commencez à créer des applications


Article Summary

Bienvenue à Tulip

Cet article vous guidera à travers l'expérience d'accueil et partagera des ressources pour vous aider à vous mettre rapidement au travail.

Bienvenue sur Tulip !

Tulip est une plateforme sans code conçue pour répondre aux besoins uniques des opérations de première ligne. Avec Tulip, vous pouvez concevoir des solutions robustes et composables pour vos défis de production les plus difficiles. Ce guide se concentre sur les bases de la plateforme Tulip. Nous passerons en revue les principales fonctionnalités, les emplacements et les concepts, et nous construirons ensemble une application simple "Hello World".

:: :(Info)(NOTE :)
Cet article suppose que vous avez accès à une Instance Tulip. Si ce n'est pas le cas, vous pouvez obtenir un accès en commençant un essai gratuit{target="_blank"}, ou en contactant la personne ou le groupe qui gère l'accès à Tulip pour votre organisation.
:: :

Des ressources pour vous aider à apprendre

Avant d'aller plus loin, nous vous présentons quelques ressources clés que vous pouvez utiliser pour vous familiariser avec Tulip.

Base de connaissances{target="_blank"}

La base de connaissances est une collection d'articles, de vidéos et de documentation pour vous aider à apprendre à utiliser Tulip. Si vous lisez cet article, c'est que vous l'avez déjà trouvée. Bien joué !

Suivez la structure des fichiers dans la navigation de gauche, ou utilisez la barre de recherche pour trouver du contenu lié à un sujet sur lequel vous avez besoin de plus d'informations.

Université Tulip{target="_blank"}

L'Université Tulip est une ressource gratuite et à la demande pour apprendre Tulip. L'Université Tulip propose des dizaines de cours, de certifications et de défis de création d'applications pour vous aider à passer au niveau supérieur. Faites vos premiers pas en vous inscrivant aux Tulip Essentials{target="_blank"}, mettez vos compétences en pratique grâce aux Tulip Challenges, et partagez vos réalisations en devenant un Tulip Certified App Builder{target="_blank"}.

Bibliothèque{target="_blank"}

La bibliothèque Tulip est une collection de contenus prêts à l'emploi développés par des experts Tulip. Vous y trouverez de nombreux contenus pour vous aider à démarrer, allant d'applications complètes et de suites d'applications à des modèles, des widgets personnalisés et des connecteurs.

Communauté{target="_blank"}

Vous avez des questions auxquelles vous ne trouvez pas de réponse dans la base de connaissances ou l'université ? Vous avez une idée de fonctionnalité qui vous faciliterait la vie ? Vous avez besoin d'un moyen de vous tenir au courant des dernières nouveautés de Tuliverse ? Consultez la Communauté Tulip.

Tulip Community est un forum en ligne actif où les utilisateurs peuvent poser des questions, discuter et s'aider mutuellement à utiliser Tulip pour résoudre leurs problèmes.

S'orienter - Une visite rapide de votre instance

Commençons par une visite rapide de votre instance. Pour les besoins de cet aperçu, il y a 5 endroits clés que vous devez savoir comment trouver dans Tulip.

  • Les applications et l'éditeur d'applications
  • Tables
  • Magasin
  • Tableaux de bord
  • Les paramètres du compte

Nous allons les examiner l'un après l'autre.

Les applications et l'éditeur d'applications

Page des applications

Lorsque vous vous connectez à votre compte, vous vous retrouvez sur l'écran d'accueil des applications. Vous pouvez y visualiser et gérer toutes les applications de votre instance.

Screen Shot 2022-09-19 at 3.13 1 (5).png

Pour trouver cette page, survolez "Apps" dans la navigation supérieure et cliquez sur "Apps" dans le menu déroulant.

Group 1 (1).png

Écran d'accueil et éditeur d'applications

L'éditeur d'applications est l'endroit où vous allez créer des applications. Pour accéder à l'éditeur d'applications, vous pouvez sélectionner une application existante ou en créer une nouvelle. Cliquez sur votre application. À partir de cet écran, vous pouvez afficher les données d'achèvement de l'application, gérer les {{glossary.Permission}} et {{glossary.Approval}} de l'application et publier une version de votre application.

Group 13 (1).png

Cliquez sur n'importe quelle étape de ce menu pour accéder à l'éditeur d'applications.

app editor 4 (1).png

Maintenant que nous sommes ici, faisons le point sur ce que nous voyons. Il y a quelques zones clés avec lesquelles vous allez travailler.

:: :(Info)(NOTE :)
Pour une visite approfondie de l'éditeur d'applications, consultez cet article.
:: :

Passons en revue 4 outils clés de l'éditeur d'applications :

  • Interface glisser-déposer
  • Barre d'outils
  • Volet contextuel
  • Volet des étapes et des enregistrements

Interface de glisser-déposer

Au centre de l'écran, vous avez votre interface de glisser-déposer - votre ardoise vierge.

Group 2 (1).png

C'est ici que vous allez concevoir une interface utilisateur. Vous y intégrerez des widgets, créerez des éléments interactifs et organiserez toutes les informations et fonctionnalités dont un utilisateur aura besoin pour interagir avec votre application.

Barre d'outils

Au-dessus de votre canevas, vous verrez une série de menus déroulants que nous appelons la barre d'outils. Utilisez ces menus pour ajouter du texte, des entrées et d'autres Widgets à votre application.

Group 3 (2).png

Volet contextuel

À droite, vous trouverez le volet contextuel, où vous pourrez configurer les détails de l'application, de l'étape et du widget. Vous pouvez y ajouter de la logique aux applications, gérer les paramètres de conception au niveau de l'application et ajuster les widgets que vous ajoutez à votre application.

Group 15.png

Volet des étapes et des enregistrements

Enfin, le volet de gauche vous permet d'ajouter de nouvelles étapes à votre application et de gérer les tables auxquelles votre application se connecte.

Group 5 (1).png

Tables

Les tables sont des bases de données personnalisées que vous créez pour stocker les données collectées par vos applications.

Screen Shot 2022-09-19 at 3.09 1.png

Les tables constituent un juste milieu entre les outils de feuille de calcul comme Excel et les bases de données relationnelles à part entière, vous permettant de construire un modèle de données aussi simple ou complexe que vous le souhaitez.

:: :(Info)(NOTE :)
Pour un aperçu rapide de la création d'applications avec des tableaux, essayez le cours"Build a Simple Data Entry App{target="_blank"}" dans University. Les tableaux sont également abordés en détail dans d'autres sections de la base de connaissances{target="_blank"}.
:: :

Pour trouver des tableaux, accédez à l'onglet "Apps" dans la navigation supérieure et sélectionnez "Tableaux" dans le menu déroulant.

Sur l'écran d'accueil des tableaux, vous avez la possibilité d'afficher un tableau existant ou d'en créer un nouveau.

Boutique

L'onglet Shop Floor est utilisé pour gérer les stations et les appareils physiques associés à votre Instance Tulip. Sous l'onglet Shop Floor, vous trouverez des options pour créer et gérer les stations, gérer les périphériques, les machines et Tulip Vision.

Group 6 (1).png

Pour l'instant, concentrons-nous sur les "Stations". Lorsque vous cliquez sur "Stations", vous accédez à une page qui vous permet de créer des stations et de leur attribuer des applications, une étape essentielle du flux de publication.

:: :(Info)(NOTE :)
Vous pouvez en savoir plus sur les stations dans la base de connaissances et dans Tulip University{target="_blank"}.
:: :

Vous interagirez beaucoup plus avec cette page lorsque vous vous préparerez à mettre en production vos applications finies.

Tableaux de bord

Lorsque vous commencez à élaborer des analyses, elles apparaissent dans la section "Tableaux de bord" de votre instance. Pour y accéder, cliquez sur l'option "Tableaux de bord" dans la navigation supérieure.

Vous pouvez considérer les tableaux de bord comme des collections d'analyses. Vous pouvez organiser vos tableaux de bord selon la logique de votre choix.

Group 7 (1).png

Il est important de noter que les tableaux de bord peuvent être exportés sous forme d'URL et partagés avec n'importe qui, qu'ils aient ou non un compte Tulip.

Cela vous permet de partager vos résultats et vos mesures avec n'importe qui dans votre organisation.

Paramètres du compte

Vous pouvez accéder aux paramètres de votre compte en cliquant sur l'icône située dans le coin supérieur droit de votre instance Tulip. Les options qui vous sont accessibles ici varient en fonction de vos niveaux de permission.

Group 8 (1).png

Lecteur Tulip

L'une des parties les plus importantes de Tulip - le lecteur Tulip - n'est pas située dans votre instance web.

Le lecteur Tulip est une application conçue spécifiquement pour l'exécution d'applications. Elle peut être exécutée sur de nombreux appareils et sur plusieurs systèmes d'exploitation. Le plus important est qu'il doit être téléchargé sur tout appareil sur lequel vous souhaitez faire fonctionner des applications.

Pour télécharger le lecteur Tulip, suivez ce lien. Pour les instructions d'installation et de configuration, cliquez ici

Créer des applications

Maintenant que vous savez vous repérer dans votre instance, prenons un cours intensif sur la création d'applications. Il n'y a pas de meilleure façon de le faire que de construire une application ensemble. Alors lancez votre instance et créons ensemble une application "Hello World".

Création d'une nouvelle application

La première chose à faire est de créer une nouvelle application. Pour ce faire, naviguez vers la section "Apps" de la plate-forme en utilisant le menu "Apps" dans la navigation supérieure.

Une fois là, cliquez sur "créer une application" en haut à droite. Une modale vous demandera alors si vous souhaitez créer une nouvelle application ou partir d'un modèle. Nous vous encourageons à jouer avec les différents modèles disponibles, mais pour l'instant, commençons par une application vierge en cliquant sur "créer" en bas à droite de la modale.

ezgif-4-42b23129c0.gif

Vous serez dirigé vers l'écran d'accueil de l'application, où vous pourrez gérer les paramètres de cette application. Allez-y et nommez votre application "Hello World" en cliquant sur le crayon à côté de "Untitled App" en haut à gauche. Ensuite, cliquez sur n'importe quelle étape pour accéder à l'éditeur d'applications.

Création d'une application "Hello World

Nous pouvons décomposer le processus de création d'une application en quelques étapes clés que vous reproduirez à différents niveaux d'échelle et de complexité tout au long de votre parcours avec Tulip.

  • Conception de l'interface utilisateur
  • Ajout de la logique
  • Test de

Nous allons rester aussi simples que possible et nous concentrer sur la conception d'une interface de base, l'ajout d'une seule ligne de logique et le test de notre application en mode développeur.

Conception de l'interface utilisateur d'une application

Votre interface utilisateur est la disposition des éléments graphiques et interactifs à travers les étapes de vos applications. La conception d'une bonne interface utilisateur est essentielle pour permettre à vos utilisateurs d'interagir avec vos applications.

:: :(Info)(NOTE :)
La conception de l'interface utilisateur est traitée en profondeur dans le cadre de l'Université de Tulip{target="_blank"}.
:: :

Pour l'instant, restons basiques. Nous allons ajouter 4 éléments à notre interface utilisateur :

  • Une forme pour créer une barre d'en-tête
  • Une variable qui affiche le nom de l'application
  • Un bouton de menu
  • Un bouton qui affiche le message "Hello World" lorsqu'il est cliqué.

Concevoir une mise en page de base

Les modèles de base sont des modèles de conception qui sont appliqués à chaque étape de votre application.

Nous allons concevoir notre interface utilisateur comme le modèle de base de notre application.

Pour accéder au modèle de base, cliquez sur le texte "Modèle de base" en bas à gauche de l'éditeur d'application. Vous saurez que vous êtes en train de modifier le modèle de base lorsque l'arrière-plan derrière le texte sera surligné en bleu clair.

Group 9 (1).png

Pour ajouter votre barre d'en-tête, naviguez dans le menu Assets de la barre d'outils et sélectionnez l'option "rectangle". Si elle n'est pas immédiatement visible, recherchez "rectangle" dans la barre de recherche.

Lorsque vous cliquez sur "rectangle", vous constatez qu'une forme a été ajoutée à la zone du bac à sable de votre éditeur d'applications. Cliquez sur la forme pour la sélectionner. Dans le volet de droite, vous verrez des options permettant de régler les paramètres de votre ressource. Changez la couleur en gris foncé. Ajustez les paramètres du widget de manière à ce que ses dimensions soient de 1 920 l x 100 h, ou faites-le simplement glisser en place de manière à ce qu'il couvre le haut de votre application.

Ajout d'un nom d'étape dans le Top Nav

Lorsqu'un utilisateur accède à notre application, nous voulons que celle-ci affiche le nom de l'étape qu'il utilise actuellement. Dans ce cas, nous voulons que notre application affiche "Hello World" sur la barre supérieure que nous venons de créer.

Pour ce faire, cliquez sur le menu "Texte" dans la barre d'outils, et sélectionnez "Variable" dans la liste déroulante. Vous pouvez également utiliser le raccourci clavier et appuyer sur "V".

Dans Tulip, les variables sont des caractères de remplacement pour les valeurs. Lorsque vous choisissez d'afficher une variable, votre application affichera la valeur actuellement stockée dans cette variable.

Pour accéder au nom de l'étape, nous devons configurer notre variable.

Assurez-vous que la variable intégrée est sélectionnée, puis accédez au panneau de widgets sur le panneau de droite. Sous "Datasource", sélectionnez "App Info". Sélectionnez "Step Name" dans le menu déroulant "Select App Info".

Glissez et déposez votre variable en place dans la barre supérieure. Vous pouvez modifier la couleur du texte pour le rendre plus lisible sur le fond sombre.

Sinon, vous pouvez simplement ajouter un "nom d'étape" à partir du menu Texte de la barre d'outils.

La dernière chose que nous devons faire est de nommer notre étape. Double-cliquez sur l'étape "Sans titre" dans le volet gauche des étapes et renommez votre étape "Hello World".

Ajout d'un bouton de menu

À l'aide du menu "Buttons" de la barre d'outils, ajoutez un bouton de menu à votre application. Faites-le glisser en place dans le coin supérieur gauche ou droit de votre barre supérieure.

Il est important qu'un bouton de menu soit accessible à partir de chaque étape de votre application afin qu'un utilisateur puisse modifier, annuler ou mettre en pause ses applications.

Ajouter un bouton Hello World

À l'aide du menu "Boutons" de la barre d'outils, ajoutez un bouton à votre application. Centrez-le sur votre mise en page.

Nous allons ajouter de la logique à ce bouton dans la section suivante.

Ajouter de la logique aux applications

La logique de déclenchement est ce qui rend les applications intelligentes. C'est ce qui sépare les logiciels de diaporama des applications dynamiques et réactives que vous allez créer dans Tulip.

La structure de la logique dans Tulip

Les déclarations logiques dans Tulip suivent le même modèle : WhenIfThen.

Group 10 (1).png

Quand un événement se produit, Si certaines conditions sont remplies ou non, Alors l'application effectue une action spécifiée.

Le déclencheur de notre application "Hello World" suivra cette même structure.

Lorsqu'un utilisateur appuie sur un bouton, l'application affiche le message "Hello World". Nous ne mettrons pas d'instructions conditionnelles dans ce trigger.

Où ajouter des triggers dans Tulip

Dans Tulip, la logique est associée à des événements. Un utilisateur qui appuie sur un bouton, un changement d'état d'une machine, ou le balayage d'un code barre sont tous des exemples d'événements. Il existe plusieurs endroits où vous pouvez ajouter des déclencheurs dans Tulip :

  • Aux widgets, comme les boutons et les tableaux interactifs
  • Aux étapes, pour des actions telles que "à l'ouverture de l'étape" ou "à la fermeture de l'étape", ou "lorsque le dispositif se déclenche".
  • Aux applications, pour des actions comme "quand l'application s'ouvre".
  • Créez votre premier déclencheur

Rédigeons notre premier déclencheur.

Notre déclencheur va faire deux choses :

  1. Stocker une chaîne de texte dans une variable
  2. Afficher un message qui contient cette variable

Lorsque vous avez terminé, le message doit ressembler à ceci :

Screen Shot 2022-09-19 at 2.08.45 PM.png

Allez-y et sélectionnez le bouton que vous avez placé au milieu de votre interface utilisateur. Une fois que vous avez sélectionné le widget, dans le volet contextuel, trouvez le dossier intitulé "triggers" et cliquez sur le signe plus pour ajouter un déclencheur. Cela fera apparaître la modale de déclenchement.

Donnez un nom à votre déclencheur, quelque chose comme "Print Hello World".

Comme ce déclencheur est attaché à un bouton, notre instruction WHEN est prise en charge pour nous : QUAND le bouton est pressé.

Notre tâche consiste donc à écrire nos instructions d'action, les THEN. Commençons par stocker une chaîne de texte dans une variable.

Cliquez sur "Ajouter une nouvelle action". Dans le menu déroulant, sélectionnez "Manipulation de données", puis "Stocker". Avec cette action, nous devons spécifier quelles données nous voulons stocker, et où. En utilisant le menu déroulant après "Data :", sélectionnez "static value", puis "Text". Nous allons placer notre message dans cette valeur statique. Dans le champ de saisie, écrivez votre message, "Hello World".

L'élément suivant de ce déclencheur est de déterminer l'"emplacement :", ou l'endroit où vos données seront stockées. Sélectionnez "Variable" dans le menu déroulant, puis choisissez de créer une nouvelle variable. Donnez un nom à votre variable, quelque chose comme "Hello World Variable", et cliquez sur la case verte.

C'est presque terminé. La prochaine chose à faire est d'afficher notre variable dans un message. Nous allons créer une autre action dans notre déclencheur pour le faire.

Cliquez donc sur "add new action", et sélectionnez "Show Message" dans la liste déroulante. La dernière chose que nous devons faire est de spécifier les données qui vont dans notre message. Puisque nous avons déjà créé une variable, vous pouvez sélectionner "Variable" dans la liste déroulante, puis sélectionner votre variable "Hello World".

Enregistrez votre déclencheur. Vous êtes maintenant prêt à tester votre application.

Tester votre application

À tout moment du processus de conception, vous pouvez tester votre application à l'aide du bouton "Test" situé à droite de la barre d'outils dans l'éditeur d'applications. Cela ouvrira le mode développeur, un environnement de type "sandbox" qui vous permet de tester des applications sans mettre en danger les données ou les systèmes de production.

Group 17.png

Une fois que vous avez ouvert le mode développeur, vous pouvez tester votre application. Cliquez sur "commencer", puis appuyez sur votre bouton. Vous devriez voir un message indiquant "Hello World" s'afficher au bas de l'écran.

Publiez votre application

Avant de mettre votre application en production, vous devez la publier. Cela créera une version en lecture seule de votre application à laquelle vous pourrez accéder depuis une station.

Les applications sont publiées sous forme de versions. Chaque fois que vous apportez des modifications à une application, vous devez publier une nouvelle version pour accéder à vos modifications les plus récentes dans le lecteur. Cela facilite la gestion des changements et garantit que seules les versions et modifications approuvées sont mises en production.

Group 16.png

Pour publier votre application, retournez à l'éditeur d'application. Cliquez sur le bouton "publier" dans le coin supérieur droit de l'écran. Cela fera apparaître une modale vous invitant à commenter ce qui a changé dans cette version. Ajoutez le commentaire de votre choix. Les commentaires seront plus importants lorsque vous commencerez à travailler à grande échelle, mais pour l'instant vous pouvez rester simple. Ensuite, cliquez sur "Publier la version 1".

Ce que vous construisez avec Tulip

Tulip est une solution extrêmement flexible. Parce que c'est une véritable plateforme, il n'y a pas de limite aux types d'applications que vous pouvez construire. Ce qui soulève une question importante : Que dois-je créer avec Tulip ?

La réponse, bien sûr, dépend de vos besoins opérationnels. De nombreux utilisateurs ont en tête des objectifs concrets pour Tulip, tels que :

  • Réduire les erreurs dans une opération d'assemblage manuelle
  • Suivre les temps de fonctionnement et d'arrêt des machines
  • Augmenter la visibilité de la production
  • Simplifier la généalogie des produits dans les environnements à forte mixité.

Ces objectifs commerciaux concrets peuvent facilement être transformés en une application - ou une série d'applications - qui fournit le résultat souhaité. Nous désignons généralement ces séries d'applications par le terme "cas d'utilisation", ou le défi opérationnel spécifique qu'elles contribuent à relever. Les cas d'utilisation qui répondent à la liste d'objectifs opérationnels ci-dessus seraient les suivants :

  • Instructions de travail numériques
  • Surveillance des machines
  • Suivi de la production
  • Traçabilité et généalogie

La portée de ces projets peut aller d'applications ciblées d'inspection de la qualité sur une seule station dans une seule cellule, à des solutions de dossier de lot électronique à grande échelle pour une opération de fabrication pharmaceutique complète. Souvent, les clients de Tulip commencent par un cas d'utilisation simple qui leur apporte une valeur ajoutée rapide et leur permet d'étendre leurs solutions au fur et à mesure qu'ils se sentent à l'aise avec Tulip.

:: :(Info)(NOTE)
Apprenez à choisir votre premier cas d'utilisation dans cette{target="_blank"} cours de l'Université Tulip.
:: :

L'essentiel à retenir ici est que les mêmes fonctionnalités de base de Tulip peuvent être utilisées pour concevoir n'importe quelle application que vous pouvez imaginer, pour n'importe quel défi opérationnel auquel vous pouvez être confronté, à n'importe quelle échelle.

En apprenant quelques fonctionnalités clés de Tulip, vous donnerez à votre équipe la capacité de concevoir des solutions logicielles pour vos défis les plus difficiles aujourd'hui, demain et l'année prochaine.


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