Quand j’ai appris que je pouvais créer des appli sans écrire une seule ligne de code, j’ai pensé que cela signifiait créer des appli simples sans beaucoup de profondeur. Je pensais que je serais capable de faire des choses de base, mais qu’ensuite le projet deviendrait difficile et que je devrais apprendre à coder pour le faire fonctionner.
La vérité est que, malgré mon manque de compétences techniques et mon scepticisme, j’ai créé des appli assez cool, et il n’a fallu que quelques semaines pour obtenir un résultat fonctionnel.
Mais comment? Les outils sans code simplifient les concepts de programmation avancés, ce qui les rend plus faciles à comprendre et à utiliser. Au lieu d’avoir à écrire du code ou à taper manuellement des commandes, vous pouvez utiliser des interfaces visuelles, des éléments de glisser-déposer et des assistants pour tout configurer comme vous le souhaitez.
Dans ce guide, je vais vous guider étape par étape dans la création d’une appli simple avec un outil sans code appelé Bubble. Une fois que vous aurez terminé, vous comprendrez les bases de la création d’applications sans code et vous serez sur la bonne voie pour construire de nouvelles choses passionnantes sans code.
Une introduction à mon appli de liste de tâches à faire
À faire est le modèle d’appli que nous allons recréer aujourd’hui. Il s’agit d’une appli de liste de tâches à faire où vous pouvez :
Consultez les tâches que vous devez accomplir aujourd’hui
Ajouter et supprimer de nouvelles tâches de la liste
Marquer les tâches comme terminées
Afficher la liste des tâches terminées
Voici un exemple de design :
Vous pouvez explorer cette fonctionnalité en visitant le site de l’appli. Connectez-vous avec les informations d’identification test fournies sur la page et essayez-le. Attention, cependant, d’autres personnes peuvent le tester en même temps, vous risquez donc de voir beaucoup de tâches aller et venir.
Suivre ce guide jusqu’à la fin prendra environ deux heures.
Avant de commencer
Avant de commencer à créer notre propre version de Things To Do, vous devrez créer un compte gratuit dans Bubble.
Si vous le souhaitez, vous pouvez également suivre le cours intensif, un ensemble de leçons de 10 expliquant les concepts de base dans une série d’instructions étape par étape. Mais tu peux sauter cette partie pour l'instant puisque j'expliquerai ce que nous faisons au fur et à mesure.
Une fois que vous avez créé un compte, cliquer sur le bouton Nouvelle appli, renseignez les informations dans la boîte de dialogue, puis choisissez Commencer avec une page vierge.
Partie 1: Mise en place de la base de données
La plupart des applications modernes s’appuient sur une base de données pour fonctionner. Une base de données vous permet de stocker, de gérer et d’accéder aux données, tout en permettant de créer des relations entre différents éléments de données.
Accédons à la partie de Bubble qui traite des données. Cliquez sur l’onglet Données dans la barre de navigation de gauche de votre écran.
Lorsque nous créons une appli, nous stockons les données de nos utilisateurs dans notre base de données. En fonction de ce dont nous avons besoin pour alimenter les fonctionnalités de l’appli, vous aurez besoin de différents types de données.
À l’heure actuelle, il n’y a que le type de données Utilisateur. Il est configuré par défaut et garde une trace des utilisateurs de l’appli, de leurs e-mails, de leurs mots de passe, de la date de création ou de modification, de l’auteur de l’utilisateur et du slug.
Puisque nous construisons une liste de tâches à faire, nous aurons besoin d’un moyen de stocker les tâches que chaque utilisateur créera pour remplir sa liste. Dans le champ de saisie Nouveau type , tapez « Tâche » et cliquez sur Créer.
Maintenant que nous disposons d’un type de données pour les tâches, nous devons stocker davantage d’informations sur chaque tâche. Nous avons besoin d’une description de tâche, afin que les utilisateurs puissent enregistrer qu’ils doivent promener le chien ou faire leur lit ; Nous avons également besoin d’un moyen de stocker l’état de la tâche, qu’elle soit encore à faire ou qu’elle soit déjà terminée.
Créons ces champs maintenant. Cliquez sur Créer un nouveau champ.
Dans la boîte de dialogue Nom du champ qui s’affiche, tapez « description ». Les champs de données ont également besoin d’un type. Cliquez sur la liste déroulante Type de champ , puis choisissez Texte. Une fois que vous avez terminé, cliquez sur Créer.
Répétons le processus pour l’état de la tâche. Cliquez sur Créer un nouveau champ, tapez « statut » pour Nom du champ et définissez le type de champ sur numéro.
Pourquoi ce type de numéro ? Nous utiliserons un système numérique pour suivre l’état de notre tâche. Les tâches dont le numéro 0 seront considérées comme non terminées et les tâches dont le numéro 5 seront considérées comme terminées. La raison pour laquelle nous avons choisi 0 et 5 (et non 0 et 1, par exemple), est de laisser un peu de répit pour créer des statuts de tâches supplémentaires à l’avenir. Après tout, de l'arriéré à la liste complète, nous pourrions également ajouter le statut " " ou " en cours ".
Nous disposons désormais des informations de base dont nous avons besoin pour que le type de données Tâches soit utile. Il y a juste un petit problème : lorsque nous aurons nos 10 premiers utilisateurs sur l'appli, et que tous ces utilisateurs commenceront à créer leurs tâches, nous aurons du mal à attribuer chaque tâche à son propriétaire légitime. Cela pourrait rendre les choses mouvementées à long terme, nous ajouterons donc un champ de données supplémentaire pour enregistrer à qui appartient chaque tâche.
Cliquez sur Créer un nouveau champ. Dans la boîte de dialogue, définissez le nom du champ comme propriétaire. Pour le type de champ, ouvrez la liste déroulante et choisissez Utilisateur en bas. Enfin, cliquez sur Créer.
Les champs de données pour le type de données Tâche sont tous définis. Ton écran devrait ressembler à ceci :
Lors de la création ultérieure de l’appli, il sera également utile d’épingler chaque tâche à chaque utilisateur de la base de données. Mettons-le en place maintenant. Cliquez sur le type de données Utilisateur .
Cliquez sur Créer un nouveau champ. Nommez-le « tâches », définissez le type de champ sur Tâche et, avant de cliquer sur Créer, n'oubliez pas de cocher Ce champ est une liste (plusieurs entrées). Cela garantit que chaque utilisateur peut ajouter autant de tâches que nécessaire dans ce champ.
Maintenant, nous sommes prêts à transférer. (Remarque : si vous souhaitez ajouter d’autres fonctionnalités à votre appli, vous devrez revenir sur l’onglet données à l’avenir.)
Supposons que tu aimerais ajouter un moyen pour chaque utilisateur de suivre les projets. Cela signifie que vous devez créer un type de données Projets et fournir tous les champs pertinents pour identifier le propriétaire du projet, les participants et les tâches. La même chose s’appliquerait si vous vouliez laisser les utilisateurs formulaire des équipes.
N’oubliez pas que chaque fois que vous aurez besoin de stocker plus de types de données dans votre appli, vous devrez développer votre base de données. Pour l’instant, passons à la création de l’interface utilisateur.
Partie 2: Création de l'interface utilisateur
L’interface utilisateur est l’interface utilisateur avec laquelle vos utilisateurs interagissent pour écrire et récupérer des informations à partir de la base de données, ainsi que pour effectuer les opérations logiques qui rendent votre application utile, dans ce cas, l’application de liste de tâches.
Tout d'abord, nous devons ajouter une nouvelle page. Une page d’appli fonctionne un peu comme une page de site web : vous pouvez l’utiliser pour séparer différentes activités ou tableaux de bord. Cliquer sur la liste déroulante affichant la page actuelle en haut à gauche de votre écran.
Cliquez sur Ajouter une nouvelle page.
Définissez le nom de la page sur la liste et laissez la liste déroulante vide. Cliquez sur Créer.
C'est l'heure de commencer à créer. Remarquez le créateur d'interface utilisateur sur la partie gauche de l'écran :
L'arborescence des éléments affichera la liste de tous les éléments que tu as ajoutés à la page jusqu'à présent. Tout ce qui se trouve en dessous de cette section contient les éléments que tu peux ajouter à la page, qui sont divisés en catégories.
Ajoutons un groupe qui contiendra notre liste de choses à faire. Dans la section Conteneurs , cliquez sur Groupe.
Maintenant, dessine un large rectangle sur la toile.
Une fois que vous avez terminé, la boîte de dialogue Modifier s’affiche. Ce type de boîte de dialogue vous permettra de modifier les détails de chaque élément que vous ajoutez à la page. Commençons par changer le nom de l'élément pour que les choses restent organisées. Cliquez sur l’en-tête de cette boîte de dialogue et renommez-la « Listes de groupes ».
Donnons-lui une bordure. Cliquez sur Supprimer le style pour déverrouiller la modification de style individuel pour ce groupe.
Maintenant, règle le style de bordure : toutes les bordures sont définies sur Solide, Rondeur sur 10 et Largeur sur 2.
Ajustons la taille et la position de ce groupe pour qu'il puisse contenir tout ce dont nous avons besoin. Cliquez sur l’onglet Mise en page dans la fenêtre d’édition.
Renseigne la largeur (W), la hauteur (H), la position X (X) et la position Y (Y) avec les valeurs suivantes :
W 731
H 393
X 114
Y 134
Ce groupe ne servira que d'élément visuel, nous n'allons donc plus le modifier.
Il est temps d’ajouter un groupe répétitif pour afficher la liste des tâches à faire. Un groupe répétitif est un type spécial de groupe qui affiche les données dans une série de lignes et de colonnes, ce qui vous permet de visualiser de nombreuses données de manière simple.
Dans le menu de gauche du générateur d’interface utilisateur , sous Conteneurs, cliquez sur Groupe répétitif.
Dessine le groupe qui se répète dans les listes de groupes que nous venons de configurer. Fais en sorte qu'il couvre la majeure partie de sa surface intérieure.
Lorsque la boîte de dialogue d'édition du groupe répétitif apparaît, vous remarquerez que nous sommes sur l'onglet Disposition . Entrez les valeurs de largeur, de hauteur, de X et Y suivantes :
W 671
H 346
X 28
Y 16
Faisons en sorte que les choses soient organisées. Renommez ce groupe répétitif en « Liste des tâches à faire » en cliquant sur l'en-tête de la boîte de dialogue d'édition.
Modifions un peu plus l'apparence de ce groupe. Cliquez sur l’onglet Apparence .
Régle le nombre de lignes sur 6.
Supprimons également le séparateur de lignes. Cliquez sur Supprimer le style comme précédemment pour modifier le style de cet élément indépendamment. Sur les nouveaux paramètres qui s’affichent, cliquer sur la liste déroulante en face de Séparateur et réglez-le sur Aucun.
Il est temps de configurer certaines fonctionnalités. Nous devons faire savoir à Bubble que ce groupe répétitif montrera nos tâches à faire. Cliquez sur la liste déroulante Type de contenu et choisissez Tâche.
Mais cela ne suffit pas pour afficher les tâches, nous devons également indiquer où obtenir les tâches que nous voulons afficher. Sur l’entrée Source de données , vous remarquerez un petit rectangle vous invitant à « Cliquer ». Cliquez dessus pour déclencher une liste déroulante.
Dans la liste déroulante, choisissez Effectuer une recherche.
Dans la nouvelle boîte de dialogue sur la gauche, sous la liste déroulante Type , cliquez sur Tâche.
Mais nous ne voulons pas afficher toutes les tâches, n’est-ce pas ? Nous voulons simplement afficher les tâches qui ne sont pas encore terminées et les tâches qui appartiennent à l’utilisateur actuel. Cliquez sur Ajouter une nouvelle contrainte.
Cliquez sur le petit rectangle à l’intérieur du champ de saisie qui s’affiche.
Dans la liste déroulante, cliquez sur état.
Cliquez à nouveau et choisissez =.
Enfin, cliquez à nouveau, tapez 0 (zéro) et appuyez sur Entrée. Cette contrainte filtrera les résultats, en n’affichant que les tâches ayant le statut 0 (non terminées).
Cliquez ci-dessous pour ajouter une autre contrainte. Puis :
Cliquez sur le champ de saisie
choisir le propriétaire
Cliquez à nouveau pour sélectionner =
et cliquez une dernière fois pour choisir Utilisateur actuel
Cette expression garantit que les résultats ne contiendront que les tâches créées par l’utilisateur actuel, et non les tâches qui appartiennent à d’autres utilisateurs de l’appli. Le résultat final devrait être le suivant :
Notre liste de tâches RepeatingGroup à faire extrait correctement les informations de la base de données, mais il n’y a aucun moyen pour nos utilisateurs de les voir. Vous pouvez fermer la boîte de dialogue d’édition en appuyant sur l’icône X en haut à droite.
Maintenant, nous devons ajouter des éléments de texte à l’intérieur du groupe répétitif, puis les configurer pour afficher les bonnes données.
Avant de commencer, tu te souviens que le groupe qui se répète comporte plusieurs lignes ? L'avantage de cet élément, c'est que, lorsque tu configures la première ligne, toutes les autres lignes auront le même design et les mêmes fonctionnalités. Cela vous permet de créer des fonctionnalités telles qu’un flux de réseaux sociaux, une liste de produits dans une boutique en ligne ou, vous l’avez deviné, des tâches sur une liste à faire.
Depuis le menu UI Builder sur la gauche, fais glisser un élément de texte depuis les éléments visuels et dépose-le dans la première ligne du groupe répétitif. Si tu vois une ligne rouge apparaître sous ton curseur, c'est que tu le fais correctement.
Tu vois comment ça se reproduit sur les autres lignes ? Voici un aperçu de ce à quoi ça va ressembler au final. Cliquez avec le bouton droit sur l’élément de texte et cliquez sur Modifier.
Dans le champ de saisie supérieur, effacez « ... Éditez-moi... " et cliquez sur le bouton bleu Insérer des données dynamiques.
Dans le menu déroulant, sélectionnez la description de la tâche de la cellule actuelle.
Chacun de ces éléments de texte tirera la tâche de la cellule correspondante et affichera sa description. Nous pourrions répéter le processus pour d’autres champs de données, par exemple, pour afficher le statut de la tâche ou la date de création, mais ce n’est pas nécessaire pour l’instant.
Une liste de tâches à faire a également besoin d’une méthode pour marquer les tâches comme terminées. Fais glisser un élément d'icône depuis le menu des éléments visuels, et dépose-le dans la première ligne du groupe répétitif sur le côté droit.
L'icône par défaut est un drapeau. Choisissez une icône appropriée pour l’action que nous voulons illustrer. Nous devons également le réduire. Faites glisser les poignées de limite de l’icône pour la redimensionner, ou cliquez sur l’onglet Mise en page et entrez les valeurs suivantes :
W 30
H 30
X 609
Y 14
Continuons à organiser les choses. Changez le nom de l'icône en " Icône Mark Done. "
Si les utilisateurs font une erreur lors de l'ajout de tâches, il serait utile d'avoir un bouton pour supprimer la tâche. Répétez le processus pour ajouter une icône afin de supprimer une tâche. Utilisez la même méthode pour redimensionner l'icône et n'oubliez pas de la nommer « Tâche de suppression d'icône ».
Il est temps d’ajouter un bouton pour ajouter des tâches à notre liste. Nous utiliserons également une icône à cet effet. Placez-le en haut à droite de la liste des tâches à faire et nommez-le « Icône Nouvelle tâche ».
Pour ajouter de nouvelles tâches, nous allons faire apparaître une fenêtre contextuelle avec un champ de saisie et un bouton. Dans le menu UI Builder sur la gauche, sous Conteneurs, cliquez sur Fenêtre contextuelle, puis cliquez au milieu du canevas pour le placer.
Renommez la fenêtre contextuelle dans la fenêtre d’édition en « Nouvelle tâche contextuelle ». Ensuite, ajoutez un élément de texte à la fenêtre contextuelle et écrivez-y « Créer une nouvelle tâche ».
Changeons le style de ce texte pour le rendre plus percutant. Cliquez sur la liste déroulante Style et choisissez H2 Titre - Foncé.
Utilisez les poignées de l’élément pour le redimensionner et le positionner sur la fenêtre contextuelle. Pour centrer, cliquez dessus avec le bouton droit de la souris et appuyez sur Centrer horizontalement. Tu peux également utiliser les touches fléchées de ton clavier pour déplacer l'élément.
Ajoutez un champ de saisie sous l’élément de texte (vous le trouverez dans le menu UI Builder , sous la section Formulaires de saisie ). Modifie la valeur de l'espace réservé pour qu'elle soit ", entre une description ici... "
Enfin, ajoutez un bouton (vous le trouverez sous Éléments visuels dans le menu de gauche) sous ces deux éléments et étiquetez-le « créer une tâche ».
La fenêtre contextuelle obstrue le reste de notre appli. Cliquez à l’extérieur pour le masquer. Si tu veux le revoir plus tard, tu peux modifier sa visibilité dans le menu de gauche, sous l'arborescence des éléments. Recherchez la fenêtre contextuelle à cet endroit et cliquez sur la petite icône en forme d’œil pour l’afficher ou la masquer.
L’interface de notre appli est presque terminée. Ajoutons une liste pour permettre à nos utilisateurs de voir les tâches terminées. Nous utiliserons un autre groupe répétitif qui filtre les tâches en fonction de leur statut et de leur propriétaire, un peu comme le premier que nous avons créé.
Cliquez avec le bouton droit de la souris sur la liste de tâches RepeatingGroup, puis cliquer sur Modifier.
Cliquez sur l’onglet Mise en page .
Décochez cet élément pour qu'il soit visible lors du chargement de la page. Nous utiliserons cette propriété pour créer ultérieurement un menu qui affichera soit les tâches à faire, soit les tâches terminées.
Note la largeur (W), la hauteur (H), la position X (X) et la position Y (Y) de cet élément. Dans ce cas, c'est W 675, H 347, X 22, Y 19.
Maintenant, fermez la boîte de dialogue. Cliquez avec le bouton droit de la souris sur la liste RepeatingGroup à faire et cliquez sur Copier.
Cliquez avec le bouton droit de la souris dans la zone supérieure gauche des listes de groupes et sélectionnez Coller.
Une copie du groupe qui se répète a été légèrement collée par rapport à l'original. Tu remarqueras également qu'un nouvel élément est apparu dans l'arborescence des éléments du menu de gauche. Cliquez sur le petit œil pour masquer la liste d’éléments à faire RepeatingGroup.
Maintenant, cliquer sur la copie de la liste à faire du groupe répétitif pour ouvrir la boîte de dialogue.
Pour que tout soit organisé, changez le nom de ce groupe par RepeatingGroup Liste des tâches faites (pour ce faire, cliquer sur le nom dans l’en-tête de la boîte de dialogue d’édition).
Cliquez sur l’onglet Mise en page et entrez les valeurs L, H, X, Y que vous avez copiées précédemment (L 675, H 347, X 22, Y 19). Cela garantira que les deux listes auront les mêmes dimensions et la même position sur la page.
Il est temps de changer le type de tâches que nous allons afficher dans cette liste. Cliquez sur l’onglet Apparence .
Dans le champ Source de données , cliquez sur l’expression Rechercher des tâches. Une nouvelle boîte de dialogue apparaîtra. Sur la contrainte de statut , remplacez le «0» par un «5» (c’est le numéro que nous avons décidé de marquer une tâche comme terminée). Laisse tous les autres champs tels quels.
Nous n’aurons pas besoin d’une icône de suppression pour les tâches terminées à l’intérieur de la liste « terminé ». Vous pouvez cliquer avec le bouton droit de la souris et le supprimer.
L’icône pour afficher que la tâche est terminée doit être différente de celle que nous avons pour marquer la tâche comme terminée. Choisis une icône plus appropriée. Une fois que tu auras trouvé la bonne solution :
Changez sa couleur en vert (cliquez avec le bouton droit de la souris sur l’icône, cliquez sur Modifier; sous Style , cliquez sur Supprimer le style, et vous verrez un sélecteur de couleurs au-dessus).
Changez son nom en " Icone Done. "
Nous avons maintenant deux groupes répétitifs : l’un affiche les tâches à faire et l’autre est une liste de tâches terminées. Nous avons besoin d'un moyen de passer de l'une à l'autre. Ajoutons un menu simple en haut de la liste à faire.
Ajoute une icône suggérant les fonctionnalités du menu en haut à gauche. Nomme-le " Icone Lists. "
Ajoutez un bouton intitulé « à faire », suivi d’un autre intitulé « terminé ».
Nous utiliserons un élément appelé " custom element states " pour modifier la visibilité de chaque liste. Les états d’éléments personnalisés sont un moyen agile de contrôler de nombreux aspects de l’interface utilisateur dans Bubble.
Cliquez avec le bouton droit de la souris sur les listes d’icônes que nous avons placées, puis cliquez sur Modifier.
Cliquez sur le petit bouton i dans l’en-tête de la boîte de dialogue d’édition (inspecteur d’éléments).
Sous États personnalisés, cliquez sur Ajouter un nouvel état personnalisé.
Met le nom de l'État sur " active-list " et le type de l'État sur le numéro ". " Terminez en cliquant sur Créer.
Nous utiliserons cet état de la manière suivante : chaque fois que l’état est défini sur 1, la liste de tâches RepeatingGroup à faire est visible ; lorsque l’état est défini sur 2, la liste des tâches de RepeatingGroup est visible. Étant donné que nous voulons que nos utilisateurs voient la liste à faire chaque fois qu’ils ouvrent la page pour la première fois, nous pouvons définir la valeur par défaut sur 1.
Maintenant que nous avons cet état personnalisé, nous devons faire savoir à nos groupes récurrents quand ils doivent apparaître et disparaître. Dans l’ arborescence des éléments, cliquer sur la liste des tâches RepeatingGroup.
Dans la boîte de dialogue d’édition qui s’affiche, cliquez sur l’onglet Conditionnel .
Cet onglet te permet de modifier les caractéristiques de cet élément lorsque certaines conditions sont remplies. Ajoutons une nouvelle condition. Cliquez sur Définir une autre condition.
Cliquez sur le champ de saisie en face de Quand. Dans la liste déroulante qui s’affiche :
Faites défiler vers le bas pour trouver les listes d’icônes, puis cliquez dessus.
Poursuis l'expression en sélectionnant la liste active.
Ensuite, sélectionne c'est.
Tapez le chiffre 1 et appuyez sur la touche Entrée de ton clavier
Le résultat devrait être le suivant :
Cliquez sur la liste déroulante intitulée Sélectionner une propriété à modifier lorsque la valeur est true.
Sélectionne Cet élément est visible.
N'oublie pas de cocher la case.
Voici ce qui se passe : chaque fois que l'état personnalisé de la liste d'icônes est 1, ce groupe répétitif s'affiche. Répétons le même processus pour afficher la liste des tâches terminées. Dans le menu de gauche, dans l’arborescence des éléments, cliquez sur la liste RepeatingGroup done (Terminés).
La boîte de dialogue d’édition doit déjà se trouver dans l’onglet Conditions . Cliquez pour définir l’expression comme précédemment :
Choose Icone lists La liste active de > est >.
Cette fois, tape le chiffre 2 et appuie sur Entrée.
Cliquer sur la liste déroulante Sélectionnez une propriété à modifier lorsque la valeur est true, choisissez Cet élément est visible et cochez la case.
Désormais, chaque fois que l'état personnalisé de la liste d'icônes est réglé sur 2, ce groupe répétitif s'affiche. Nous allons configurer les moyens de modifier ces états (et de modifier la visibilité de ces éléments) dans la section suivante.
L’interface utilisateur est prête à l’emploi. Nous avons tous les éléments qui extraient des informations de la base de données et les affichent comme nous le voulons, et nous avons également tous les boutons et états dont nous avons besoin pour la fonctionnalité. Il est temps de tout relier avec des flux de travail.
Partie 3: Logique et flux de travail
Maintenant vient la partie la plus excitante. C’est à ce moment-là que l’appli fera réellement ce que nous voulons qu’elle fasse. Maintenant, nous allons configurer tous les boutons et icônes pour effectuer les bonnes actions.
Cliquez avec le bouton droit de la souris sur l’icône pour ajouter une nouvelle tâche, puis cliquez sur Démarrer/Modifier le flux de travail.
Nous utiliserons ce bouton pour afficher une fenêtre contextuelle. Cliquez ici pour ajouter une nouvelle action…
Passez la souris sur Actions d’élément et cliquez sur Afficher.
Une nouvelle boîte de dialogue apparaît. Cliquez sur la liste déroulante Élément , puis sélectionnez Fenêtre contextuelle Nouvelle tâche.
Désormais, chaque fois que l'utilisateur cliquer sur ce bouton, la fenêtre contextuelle Nouvelle tâche s'affiche. Revenons à l'onglet Design pour trouver le prochain élément que nous allons configurer.
Configurons le bouton pour créer des tâches que nous mettons à l’intérieur de la fenêtre contextuelle. Rendez la fenêtre contextuelle visible en cliquant sur la petite icône en forme d’œil dans le menu de l’arborescence des éléments sur le côté gauche de votre écran.
Cliquez avec le bouton droit de la souris sur le bouton Créer une tâche, puis cliquez sur Démarrer/Modifier le flux de travail.
Ce flux de travail sera plus long. Cliquez pour ajouter une nouvelle action. Passez la souris sur Données (objets) et cliquez sur Créer un nouvel objet.
Le type de chose que nous voulons créer est Tâche. Sélectionnez-le dans la liste déroulante.
Nous voulons remplir certains champs de données de la tâche. Cliquez sur Définir un autre champ.
Cliquer sur le champ de saisie et sélectionnez la description dans la liste déroulante.
Cliquez sur la zone située devant le signe =. Dans le menu liste déroulante qui s’affiche, cliquer sur Saisir une description.
Cela permettra à Bubble de savoir qu’il doit remplir le champ de données « description » avec tout ce qui se trouve à l’intérieur du champ de saisie que nous avons placé à l’intérieur de la fenêtre contextuelle plus tôt. Finit l'expression en sélectionnant la valeur.
Lorsqu’une tâche est créée, il est probable qu’elle ne soit pas terminée. Cliquez pour définir un autre champ. Choisissez l’état dans la liste déroulante.
Cliquez sur la zone située devant le signe =. Nous ne choisirons rien dans la liste déroulante. Tapez simplement le numéro "0" et appuyez sur Entrée sur ton clavier.
Enfin, nous devons définir un propriétaire pour cette tâche. Répète le processus pour définir un autre champ et choisir le propriétaire comme champ à définir. Cliquez sur la zone située devant le signe =. Choisissez Utilisateur actuel dans la liste déroulante.
L’étape 1 est terminée. Maintenant, nous allons associer cette tâche au compte de l’utilisateur actuel. Cliquez pour ajouter une nouvelle action.
Sous Compte, cliquez sur Apporter des modifications à l'utilisateur actuel.
Cliquez sur Modifier un autre champ.
Cliquez sur le champ de saisie et choisissez tâche dans la liste déroulante.
Cliquez à nouveau, puis sélectionnez Ajouter.
Cliquez à nouveau et sélectionnez Résultat de l’étape 1 (Créer une nouvelle tâche...).
L’étape 2 est terminée. Il associera chaque tâche créée par l’utilisateur à son propre compte. Cela permettra d’économiser du temps et des ressources lorsque l’appli parcourt la base de données pour afficher toutes les tâches d’un utilisateur spécifique, c’est pourquoi il est crucial que nous terminions cette étape.
L’étape 3 réinitialisera le champ de saisie, en effaçant la boîte de description. Si l’action n’est pas déjà suggérée par Bulle, cliquez pour ajouter une nouvelle action, passez la souris sur Actions d’élément, puis cliquez sur Réinitialiser les entrées.
Enfin, masquons la fenêtre contextuelle une fois la tâche ajoutée. Cliquez pour ajouter une nouvelle action, passez la souris sur Actions de l'élément et cliquez sur Masquer.
Cliquez sur la liste déroulante des éléments et choisissez la fenêtre contextuelle Nouvelle tâche.
Ce flux de travail est terminé. Nous allons configurer notre menu avec des états d'éléments personnalisés. Cliquez sur l’onglet Design pour voir à nouveau l’interface de notre appli.
Cliquez avec le bouton droit de la souris sur le bouton à faire, puis cliquer sur Démarrer/Modifier le flux de travail.
Cliquez pour ajouter une nouvelle action. Passez la souris sur Actions d’élément et cliquez sur Définir l’état.
Sur l’élément, recherchez l’icône nommée Listes d’icônes, puis cliquez dessus.
Cliquez sur la liste déroulante État personnalisé , puis choisissez active-list.
Cliquez sur l’entrée Valeur , tapez 1, puis appuyez sur Entrée.
Voici ce que nous avons fait ici : chaque fois que l’utilisateur cliquer sur le bouton « à faire », l’état personnalisé stocké dans les listes d’icônes se transforme en 1, affichant la liste de tâches RepeatingGroup et masquant la liste RepeatingGroup Done.
Retourne à l'onglet Design. Cliquez avec le bouton droit de la souris sur le bouton Terminé, puis cliquez sur Démarrer/Modifier le flux de travail.
Cliquez pour ajouter une nouvelle action. Sous Actions de l’élément, cliquez sur Définir l’état.
Nous allons répéter le même processus que précédemment. Choisissez les listes d'icônes comme élément et la liste active comme état personnalisé, mais cette fois, réglez la valeur sur 2 et appuyez sur Entrée.
Lorsque l’utilisateur clique sur ce bouton, l’état stocké à l’intérieur de l’élément Listes d’icônes devient 2, masquant la liste des tâches à faire du RepeatingGroup et affichant la liste des tâches terminées du RepeatingGroup.
Revenons à l'onglet Design. Nous nous occuperons des flux de travail des icônes à l'intérieur de la liste à faire RepeatingGroup en utilisant une approche légèrement différente. Dans le menu arborescent Éléments sur la gauche, cliquer sur l’icône + pour développer le contenu de la liste des tâches RepeatingGroup.
Cliquez sur l’icône Supprimer l’icône Task. La boîte de dialogue d’édition s’affiche. Cliquez sur l’onglet Apparence s’il ne s’affiche pas déjà, puis cliquez sur le bouton Démarrer/Modifier le flux de travail (il s’agit d’une autre façon d’accéder à la page du flux de travail).
Cliquez pour ajouter une nouvelle action. Sous Données (objets), cliquez sur Supprimer l’objet.
Dans le champ de saisie À supprimer , choisissez la tâche de la cellule actuelle.
Vous vous souvenez comment nous associions chaque tâche à son propriétaire ? Nous devons également supprimer cette tâche du compte du propriétaire. Cliquez pour ajouter une nouvelle action. Passez la souris sur Compte, puis cliquez sur Apporter des modifications à l’utilisateur actuel.
Cliquez sur Modifier un autre champ. Puis :
Cliquez sur le champ de saisie et choisissez tâches.
Cliquez à nouveau et choisissez Supprimer.
Cliquez une troisième fois et choisissez la tâche de la cellule actuelle.
Désormais, les utilisateurs peuvent supprimer des tâches. Revenons à l'onglet Design. Dans l’ arborescence des éléments, cliquez sur l’ icône Marquer comme terminé pour ouvrir la fenêtre d’édition. Cliquez sur Démarrer/Modifier le flux de travail.
Lorsque les utilisateurs cliquent sur cette icône, cela signifie que la tâche passe d’incomplète à terminée. Nous avons décidé que le mot « incomplet » était représenté par 0 et « complet » par 5. Cliquez pour ajouter une nouvelle action. Sous Données (objets), cliquez sur Apporter des modifications à un objet.
Dans la zone Objet à modifier, cliquez sur Tâche de la cellule actuelle.
Cliquez sur Modifier un autre champ. Cliquez sur le champ de saisie pour sélectionner le statut et tapez le nombre 5.
Lorsqu’un utilisateur cliquer sur cette icône, le champ de données d’état de la tâche passe de 0 à 5, passant d’incomplet à terminé.
Partie 4: Tests
Il est temps de test et de voir si tout fonctionne bien. Cliquez sur le bouton Aperçu en haut à droite de l’écran.
Un nouvel onglet de votre navigateur s’ouvrira, vous montrant un aperçu de l’appli finale. Utilisez cette fenêtre d’aperçu pour tester votre appli. Le menu fonctionne-t-il bien ? Pouvez-vous ajouter, supprimer et marquer des tâches comme terminées ? Si c’est le cas, vous avez terminé toutes les étapes avec succès. Félicitations !
(Cherche le débogueur en bas de l'écran. Vous pouvez l’utiliser pour résoudre les problèmes au sein de votre appli.)
Prochaines étapes
Ce n’est que la base d’une petite appli de productivité. À partir de là, vous pouvez ajouter autant de nouvelles fonctionnalités que vous le souhaitez, tout en personnalisant l’apparence au fur et à mesure.
Que vous construisiez quelque chose pour vous-même, quelque chose pour votre entreprise ou un produit ou un service entièrement nouveau, Bubble et d’autres créateurs d’applications sans code sur le marché vous offrent les outils dont vous avez besoin pour créer une application web puissante et soignée sans une seule ligne de code.
Tu veux en savoir plus ? Explorez la série How to Build de Bubble, et mettez en pratique vos compétences en matière de création d’appli en reproduisant des appli populaires.
Lectures connexes :
