Ce tutoriel vous montrera comment configurer une base de données No Code dans Convertigo Studio, puis comment l'utiliser dans vos projets.
Étape 1 : Création du compte de la base de données
Pour commencer ce tutoriel, la première chose à faire est d'ouvrir la fenêtre No Code Database dans le Studio pour configurer votre compte :
Pour ce faire, cliquez sur le bouton "Convertigo" dans l'en-tête, puis cliquez sur "Open the NoCode Databases view". Une fenêtre s'ouvrira et vous demandera de vérifier vos emails pour créer votre profil (le email avec lequel vous avez créé votre compte Studio).
Dans ce email, cliquez sur le bouton "accepter l'invitation", cela vous amènera à la page de création de compte. Remplissez les informations et inscrivez-vous.
Une fois inscrit, revenez au Studio : Voici la page d'accueil de votre NoCode Database.
Vous pouvez maintenant 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 "Create new" "From template".
Vous disposez ici d'une large gamme de modèles de bases de données complets : Pour ce tutoriel, choisissons "Ressources humaines" puis "Annuaire des employés".
Cliquez sur le bouton "utiliser ce modèle" pour installer cette base de données.
Elle apparaît maintenant sur la gauche : Si vous l'ouvrez, et que vous cliquez sur "employé", elle vous montre la base de données contenant le nom, la photo, l'intitulé du poste, etc...
Étape 2 : Intégrer les séquences de la base de données dans votre projet
L'onboarding a été fait. Pour continuer, créez un projet "Convertigo Low Code FullStack Web/Desktop or Mobile app project"
(si vous avez suivi les tutoriels précédents, vous savez sûrement comment faire maintenant !) et appelez ce projet "nocode_database_front".
Ensuite, dans la fenêtre Nocode Database, trouvez votre Employee Directory dabatase -> Employees et cliquez dessus.
Cliquez sur votre projet nocode_database_front et 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 voulez importer : ici vous voulez les importer toutes, donc cliquez sur "Select all". N'oubliez pas de décocher la case "authentification requise", puis d'appliquer.
Maintenant, ouvrez à nouveau votre projet dans l'arborescence, et ouvrez le dossier "Sequences", et les séquences de la base de données sont automatiquement apparues !
Étape 3 : Afficher la base de données dans votre projet
Vous avez maintenant vos séquences intégrées dans votre projet : Si vous exécutez votre "Employee_DirectoryEmployeesList" (clic droit -> exécuter) il vous montrera les données 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-déposez-le dans "Page" dans l'arborescence. Il crée une "pageDidEnter" où vous devrez glisser-déposer la séquence "Employee_DirectoryEmployeesList" (CTRL + drag & drop pour Windows et OPTION + drag & drop pour Mac).
Il crée une CallSequence. Maintenant, pour l'afficher, ajoutons un "ListContainer" dans le Content 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_DirectoryEmployeesList" 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 les compléter par des images ?
Pour ce faire, vous devrez ajouter un composant "Avatar Item" dans votre "ListItem" dans la vue arborescente. Comme vous pouvez le voir pour l'instant, il s'agit de Yoda, et même si tout le monde aime Yoda, mettons les vrais visages des gens :
Tout d'abord, vous pouvez changer le Slot en "start" (dans les propriétés) pour mettre l'image à gauche des noms. Ensuite, dans l'arborescence, ouvrez l'élément Avatar, cliquez sur le composant "Image" et 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 montrera comment ajouter une barre de recherche qui trouvera les employés en fonction de ce que vous recherchez.
Étape 6 : Afficher la base de données dans votre projet #4
Ajoutons une barre de recherche pour pouvoir rechercher directement ce/qui vous voulez dans la base de données.
Tout d'abord, cherchez la "Barre de recherche" dans la palette et glissez-déposez-la dans votre en-tête (vous pouvez vous débarrasser du texte "page" dans le titre de la barre).
Ensuite, glissez-déposez un "événement" de la palette dans votre barre de recherche. Dans les propriétés de cet événement, cliquez sur le "Type d'événement" et cliquez sur la flèche pour choisir celui que vous voulez : "ionInput". Prenez ensuite votre séquence "Employee_DirectoryEmployeesList" et faites-la glisser dans votre OnClick (CTRL + drag & drop pour Windows et OPTION + drag & drop pour MAC).
Faites un clic droit sur cette CallSequence et cliquez sur "Importer les variables de la séquence ciblée" pour avoir les bonnes données, puis allez dans le sélecteur de sources et cliquez sur "Show Action Sources" (celui qui ressemble à une roue).
Là, cliquez sur "ionInput" et ouvrez le "out" et le "target" pour trouver celui auquel vous voulez le lier qui est "value".
Glissez & déposez ce champ "Value" dans le "search = " situé dans votre dossier de variables CallSequence.
Une fois fait, vous n'aurez plus qu'à essayer un nom dans la barre de recherche pour voir si cela fonctionne. (Spoiler : ça devrait !)
Vous savez maintenant comment utiliser une base de données d'un outil No Code et l'intégrer dans votre application.