Dans cet exercice, vous allez :- Afficher un message sur une étape- Saisir un message personnalisé- Créer un décompte des messages- Documenter la date et l'heure de l'affichage du message le plus récent
Dans cet exercice, vous apprendrez les bases des applications en construisant plusieurs composants d'application fonctionnels.
À la fin des exercices, vous aurez une application Hello World qui ressemblera à ceci :
Exercice 1 : Créer une application Hello World
Dans cet exercice, vous allez créer une application simple qui affiche un message à partir d'un bouton déclencheur.
Créer une application
- Dans l'onglet Apps, cliquez sur Apps.
- Cliquez sur + Créer une application dans le coin supérieur droit.
- Nommez l'application "Hello World - Example". Vous pouvez éventuellement ajouter une description pour que les autres utilisateurs sachent à quoi sert cette application.
- Cliquez sur + Create.From the app details page, you can either click Edit in the top right corner, or click the Untitled Step name to enter the App Editor.Before we build anything, let's add some basic design elements to the base layout.
Conception d'un modèle de base
- Dans l'onglet Étapes sur la gauche, sélectionnez Disposition de base.
- Cliquez sur Icônes et sélectionnez un rectangle. Ajustez la largeur du rectangle pour qu'il s'étende sur tout l'écran de l'application, puis cliquez et faites-le glisser jusqu'en haut de l'écran. Pour modifier la couleur du rectangle, cliquez sur le carré Remplissage dans l'onglet Widget et sélectionnez la couleur gris pâle.
- Sélectionnez la forme et appuyez sur CTRL/CMD + C pour la copier. Faites glisser le deuxième rectangle vers le bas de l'écran.
- Cliquez sur Entrée et sélectionnez Variable. Dans l'onglet Widget, cliquez sur le champ Sélectionner une source de données. Cliquez sur la flèche située à côté de App Info et sélectionnez App name.
- Cliquez sur la variable et faites-la glisser dans le coin supérieur gauche, en haut du rectangle.
- Ajoutez deux autres variables :
- Sélectionnez Step name dans la liste des sources de données app info. Placez cette variable dans le coin supérieur droit.
- Sélectionnez Logged-in user (Utilisateur connecté) dans la liste des sources de données de l'application. Placez cette variable dans le coin inférieur gauche.
- Enfin, cliquez sur Boutons et sélectionnez Menu. Cliquez sur le bouton et faites-le glisser vers le bas de l'écran.
Votre présentation de base ressemblera à ceci :
Ensuite, nous allons créer une fonctionnalité sur une étape.
Ajout d'un bouton hello world
- Dans l'onglet Etapes, sélectionnez Etape sans titre. Double-cliquez dessus pour la renommer et tapez "Afficher un message".
- Cliquez sur Boutons et sélectionnez le bouton. Redimensionner le bouton pour qu'il soit plus grand en utilisant les carrés autour du bouton. Positionnez le bouton au milieu de l'écran.
- Ajoutez le style suivant au bouton :
- Texte - "Hello World"
- Couleur du bouton - Vert
- Icône - Outil panoramique
Le bouton ressemblera à ceci :
Ensuite, nous allons ajouter un déclencheur à ce bouton pour le rendre fonctionnel.
Ajouter un déclencheur de bouton
- Sélectionnez le bouton Hello World et accédez à la section Triggers dans l'onglet Widget. Cliquez sur + pour ajouter un nouveau déclencheur.
- Nommez le déclencheur "Hello world".
- Dans l'instruction Then, ajoutez la logique suivante**: Show Message** → Static Value → Text → "Hello World"
Votre déclencheur doit correspondre à ce qui suit :
- Cliquez sur Enregistrer.
Lorsque vous testerez l'application, elle fonctionnera comme suit :
Exercice 2 : stocker les données d'entrée
Dans cet exercice, vous allez construire une logique qui stocke le texte saisi dans une variable.
- Ajoutez une nouvelle étape et nommez-la "Stocker le message".
- Cliquez sur Entrée et sélectionnez Texte.
- Dans l'onglet Widget, cliquez dans la boîte de source de données. Sélectionnez + Ajouter une variable.
- Nommez la variable "message" et cliquez sur + Créer.
Lorsque vous testez l'application, le texte saisi est enregistré dans la variable "message". Vous pouvez voir la valeur enregistrée dans le panneau Variables sur le côté gauche de la fenêtre du mode développeur.
Exercice 3 : compter le nombre de messages d'accueil
Dans cet exercice, vous allez créer une analyse qui compte le nombre de fois où le bouton Hello world a été pressé.
- À l'étape Afficher le message, cliquez sur Intégrer et sélectionnez Analyse. Cliquez sur le widget et faites-le glisser à gauche du bouton Hello world.
- Cliquez sur Sélectionner une analyse, puis sur Créer une analyse.
- Cliquez sur le menu déroulant des types d'affichage et sélectionnez Valeur unique.
- Cliquez sur l'onglet Opérations et ajoutez une nouvelle opération.
- Sélectionnez Aggregation Functions puis Count of Records.
- Cliquez sur la flèche latérale à droite de l'éditeur pour développer le volet de visualisation. Sous Value, cliquez sur + Add field et sélectionnez Count of Records.
- Cliquez sur le titre de l'analyse et renommez-le "Count of hellos", puis cliquez sur Save.
- Cliquez sur Enregistrer et fermer dans le coin supérieur droit.
Comme les compléments ne sont pas enregistrés en mode développeur, cliquez sur Exécuter pour tester cette analyse dans le lecteur de tulipes.
Exercice 4 : Calculer le dernier bonjour avec une expression
Dans cet exercice, vous allez écrire une expression dans un déclencheur qui stocke dans une variable la dernière fois que l'application a dit bonjour.
- Dans le volet latéral, naviguez jusqu'à l'onglet App.
- À côté de Variables, sélectionnez X.
- Cliquez sur + Créer une variable.
- Nommez la variable "Dernière fois que vous avez dit bonjour" et cliquez sur + Créer.
- À l'étape Afficher le message, cliquez sur le bouton Hello world et ajoutez un nouveau déclencheur.
- Ajoutez l'action suivante au déclencheur**: Manipulation des données** → Magasin → Expression: 'La dernière fois que vous avez dit bonjour, c'était à' + ' ' + App Info.Current Date and Time.Current Time → Variable → Last time you said hello (La dernière fois que vous avez dit bonjour)
- À l'étape Nombre de bonjours, cliquez sur Texte et sélectionnez Variable.
- Dans le volet latéral, sous Options de données, cliquez sur le champ Datasource vide, puis sélectionnez la variable Dernière fois que vous avez dit bonjour.
Lorsque vous testez l'application, l'expression est enregistrée dans la variable Last time you said hello et apparaît sous la forme d'un horodatage.
Prochaines étapes
Maintenant que vous avez créé votre première application, apprenez à la publier et à l'exécuter ici.
En savoir plus sur la création d'applications:* Bases de la création d'applications* Introduction à l'éditeur d'applications Tulip* Comment concevoir une présentation de base efficace
Devenez un constructeur d'applications certifié par Tulip:Certification des constructeurs d'applications de base
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 répondu à une question similaire !