Ce tutoriel vous montrera comment configurer une No Code dans Convertigo Studio, puis comment l'utiliser dans vos projets.
Étape 1 : Configurez votre compte de base de données
Pour commencer ce tutoriel, la première chose à faire est d'ouvrir la fenêtre No Code dans Studio afin de configurer votre compte :
Pour ce faire, cliquez sur le bouton «Convertigo » dans l'en-tête, puis cliquez sur «Ouvrir la vue NoCode Databases ». Une fenêtre s'ouvrira et vous invitera à consulter vos e-mails afin de créer votre profil (l'adresse e-mail avec laquelle vous avez créé votre compte Studio).
Dans cet e-mail, cliquez sur le bouton «Accepter l'invitation » pour accéder à la page de création de compte. Remplissez les informations demandées et inscrivez-vous.
Une fois inscrit, revenez dans Studio : voici votre page d'accueil NoCode Database.
Vous pouvez désormais créer votre première base de données à partir d'un modèle : dans la partie droite de la fenêtre, cliquez sur le bouton «Créer nouveau » «À partir d'un modèle ».
Vous disposez ici d'un large choix de modèles de bases de données complets : pour ce tutoriel, choisissons «Ressources humaines », puis «Répertoire des employés ».
Cliquez maintenant sur le bouton « Utiliser ce modèle » pour installer cette base de données.
Elle apparaît désormais à gauche : si vous l'ouvrez et cliquez sur «Employés », vous verrez la base de données contenant le nom, la photo, le titre du poste, etc.
Étape 2 : Intégrer les séquences de la base de données dans votre projet
L'intégration est terminée. Pour continuer, créez un projet «Convertigo Low Code Web/Desktop or Mobile app project »
(si vous avez suivi les tutoriels précédents, vous savez sûrement comment faire maintenant !) et nommez ce projet «nocode_database_front ».
Ensuite, dans la fenêtre Nocode Database, trouvez votre base de données Employee Directory -> Employees et cliquez dessus.
Cliquez sur votre projet nocode_database_front, revenez dans la fenêtre Nocode Database et cliquez sur «Import into nocode_database_front » en haut de la page.
Une fenêtre s'ouvrira pour vous permettre de choisir les séquences que vous souhaitez importer : ici, vous voulez tout, alors cliquez sur «Select all ». N'oubliez pas de décocher la case «authentification requise », puis appliquez.
Ouvrez à nouveau votre projet dans l'arborescence, ouvrez le dossier «Séquences » et les séquences de la base de données sont automatiquement apparues !
Étape 3 : Afficher la base de données dans votre projet
Vos séquences sont désormais intégrées à votre projet : si vous exécutez votre «Employee_DirectoryEmployeesAll_employeesList » (clic droit -> exécuter), les données s'afficheront dans l'éditeur.
Voyons comment l'afficher dans l'application :
Dans votre projet, allez dans Application -> NgxApp
-> Pages -> Page, puis recherchez dans la palette le composant «PageEvent » et glissez-le dans «Page » dans l'arborescence. Cela crée un «pageDidEnter » dans lequel vous devrez glisser-déposer la séquence «Employee_DirectoryEmployeesAll_employeesList » (CTRL + glisser-déposer pour Windows et OPTION+ glisser-déposer pour Mac).
Cela crée une CallSequence. Maintenant, pour l'afficher, ajoutons un «ListContainer » dans le contenu en le glissant-déposant depuis la palette.
Étape 4 : Afficher la base de données dans votre projet #2
When you place a ListContainer, that includes a ForEach that will be useful :
Click the ForEach, then go into the "Source picker" at the right of the Palette. Here you will have to find the right sequence to iterate : the "Employee_DirectoryEmployeesAll_employeesList" one.
Click it, then open "objects" and select "results", the one that contains the Data. Drag & drop it into your ForEach.
Open this ForEach until finding the "{{item.text}}". Click it, and, in the Source picker, click the Blue iterator arrow, select the ForEach that is proposed and inside it choose "Full name": drag & drop it into your "{{item.text}}" and it will display every full names of the database in the application.
Étape 5 : Affichez la base de données dans votre projet #3
Maintenant que nous avons les noms, pourquoi ne pas compléter avec les photos ?
Pour ce faire, vous devrez ajouter un composant «Avatar Item » dans votre «ListItem » dans l'arborescence. Comme vous pouvez le voir, pour l'instant, c'est Yoda qui s'affiche, et même si tout le monde adore Yoda, mettons les vrais visages des personnes :
Tout d'abord, vous pouvez changer le Slot en «start » (dans les propriétés) pour placer l'image à gauche des noms. Ensuite, dans l'arborescence, développez l'élément Avatar, cliquez sur le composant «Image », puis allez dans le sélecteur de source. Cliquez sur Photo -> [0] -> url et glissez-déposez le champ url dans votre composant Image: Et voici les visages des employés !
La dernière étape vous montrera comment ajouter une barre de recherche qui trouvera les employés en fonction de ce que vous tapez.
Étape 6 : Afficher la base de données dans votre projet #4
Ajoutons une barre de recherche pour pouvoir rechercher directement ce que vous voulez dans la base de données.
Commencez par rechercher la «barre de recherche » dans la palette et faites -la glisser dans votre en-tête (vous pouvez supprimer le texte « page » dans le titre de la barre).
Faites ensuite glisser et déposez un «événement » de la palette dans votre barre de recherche. Dans les propriétés de cet événement, cliquez sur «Type d'événement » et cliquez sur la flèche pour choisir celui que vous souhaitez : «ionInput ». Prenez ensuite votre séquence «Employee_DirectoryEmployeesAll_employeesList » et faites-la glisser et déposez-la dans votre «ionInput » (CTRL + glisser-déposer pour Windows et OPTION + glisser-déposer pour MAC).
Cliquez avec le bouton droit sur cette CallSequence et cliquez sur «Importer les variables de la séquence ciblée » pour obtenir les données correctes, puis allez dans le sélecteur de source et cliquez sur «Afficher les sources d'action » (celui qui ressemble à une roue).
Là, cliquez sur «ionInput » et ouvrez «out » -> «target » -> «value ».
Glissez-déposez ce champ «Value » dans «search = » situé dans votre dossier de variables CallSequence.
Une fois cela fait, il vous suffit d'essayer un nom dans la barre de recherche pour voir si cela fonctionne. (Spoiler : cela devrait fonctionner !)
Vous savez désormais comment utiliser une base de données à partir d'un No Code et l'intégrer à votre application.