Tutoriel n°3 : Accéder à une base de données SQL
Dans ce tutoriel, nous allons voir comment accéder à n'importe quelle base de données SQL directement dans le Studio, depuis l'appel de la base de données jusqu'à son affichage dans votre application.
Étape 1 : Créer un nouveau projet
The first two tutorials have already learnt you how to create a project, but this one is quite different : We will see here how to make a project that connects to a PostgreSQL database, makes a query and displays data in an application.
To do so, go to File -> New -> Project and search "SQL" in the search bar --> select SQL project, and name it "sql_database_back".
Then, you will have to fill the information to link the database you want : In this case we will take the "Public Postgres Database" from the RNAcentral website.(https://rnacentral.org/help/public-database)
In the first field, select org.postgresql.Driver.
In the JDBC URL field, replace <server_name> by hh-pgsql-public.ebi.ac.uk, <port(optional)> by 5432 and <database name> by pfmegrnargs.
In the Username field, type reader and paste NWDMCE5xdipIjRrp in the password field.
You can find all the connection information for the SQL Database on the link above.
Once you filled everything, click the "Test connection" button to see if it works. You should have a "connection parameters are correct" message.
Note : N'oubliez pas que si vous nommez votre projet différemment, vous ne pourrez pas continuer correctement le tutoriel.
Tutoriel n°3 : Accéder à une base de données SQL
Étape 2 : Créer une transaction
Now that your SQL connector is set up, you will have to add a transaction: Click on your connector, click on the Palette tab where you have to Drag & Drop the SQL Transaction component.
Name your transaction "get_references".
Now click on your transaction, then click on the Query property. Click the [...] button to open the SQL query editor. In this window, you will have to paste the following content : Once you will have clicked the "OK" button, it will automatically create the c8o_title" variable.
SELECT * FROM rnc_references
WHERE strpos(LOWER(title), '{c8o_title}') > 0
LIMIT 10;
Now that you integrated it, execute your transaction by right clicking your transaction and selecting "Execute". It will display the data from the database.
Tutoriel n°3 : Accéder à une base de données SQL
Étape 3 : Créer une séquence
L'étape suivante consiste à créer votre séquence, ce qui devrait être facile maintenant ! Cliquez sur votre projet et recherchez dans la palette l'élément "Generic Sequence". Glissez-déposez-le dans votre projet et nommez-le "get_references_by_id".
Glissez-déposez ensuite votre transaction dans votre séquence en maintenant CTRL + Glisser-Déposer sous Windows et OPTION + Glisser-Déposer sous Mac.
Une fois cela fait, vous devrez exporter la variable Call Transaction vers la séquence principale en faisant un clic droit sur votre Call Transaction et en sélectionnant "Exporter les variables vers la séquence principale". Ceci est important car toutes les variables de Call Transaction Step doivent être définies au niveau de la séquence, le clic droit "export" facilite la tâche.
Ceci n'est pas forcément efficace ici mais devient très intéressant lorsqu'il y a beaucoup de variables, cela évite de les retaper manuellement dans la séquence.
N'oubliez pas de sauvegarder régulièrement votre projet !
Tutoriel n°3 : Accéder à une base de données SQL
Étape 4 : Créer une séquence #2
Maintenant que votre séquence est créée, vous devez ajouter une étape Iterator.
Commencez par ajouter un tableau dans votre séquence (cliquez sur votre séquence et cherchez le composant tableau dans la palette), glissez-déposez-le dans votre séquence, puis cherchez l'itérateur dans la palette et glissez-déposez-le dans votre tableau.
Double-cliquez sur votre Call Transaction pour ouvrir le Source Picker, où vous devez trouver le "sql_output" pour l'intégrer dans l'itérateur mais, en effet, nous ne le trouvons pas..
C'est parce que vous devez mettre à jour le schéma de votre transaction.
Pour ce faire, faites un clic droit sur votre transaction "get_references" et cliquez sur "Update schema from current connector data", puis double-cliquez à nouveau sur votre Call Transaction : La sortie SQL est ici !
Ouvrez cet élément sql_output et glissez-déposez le champ "row" sur votre itérateur.
La séquence va maintenant parcourir en boucle les données de la base de données.
Tutoriel n°3 : Accéder à une base de données SQL
Étape 5 : Créer une séquence #3
Une fois l'itérateur mis en place, vous devrez créer un objet dans lequel vous placerez des champs pour lier les données spécifiques que vous souhaitez afficher.
Dans la palette, recherchez le composant "objet" et glissez-déposez-le dans l'itérateur. Dans ce cas d'utilisation, nous allons mettre 4 champs item : Un pour l'identifiant, un pour les auteurs, un pour l'emplacement et un pour le titre.
Double-cliquez sur l'élément Iterator pour afficher l'onglet Source Picker, ouvrez le schéma de la ligne et glissez-déposez chaque élément dont vous avez besoin : ouvrez l'élément id et glissez-déposez la valeur "txt" dans votre champ id et choisissez "Value". Répétez l'opération pour les 3 autres éléments.
Tutoriel n°3 : Accéder à une base de données SQL
Tout est maintenant implémenté, cela devrait fonctionner !
Pour en être sûr, testons-le en ajoutant un "Test case" en faisant un clic droit sur votre séquence -> nouveau -> Test case. Nommez-le "Test_Case_phosphate", puis ouvrez le dossier "Variables" du Testcase.
Cliquez sur la variable "c8o_title" et, dans la fenêtre "Propriétés", remplissez la propriété "Valeur par défaut" avec la valeur "phosphate".
Cliquez avec le bouton droit de la souris sur le testcase et sélectionnez "Run". Il exécutera la séquence "get_references_by_id" qui appellera la transaction de requête de la base de données qui contient le mot "phosphate" dans le titre.
Les étapes de Back-end sont maintenant terminées. Passons maintenant à Front-end pour afficher les données dans l'application.
Tutoriel n°3 : Accéder à une base de données SQL
Étape 7 : Créez Front-end pour votre application
Voyons comment afficher cette base de données sur votre application.
La première chose à faire est de créer un autre projet : Un projet Front-end .
Cliquez sur File -> New -> Project -> Convertigo Low Code Fullstack Web/Desktop or Mobile app project.
Nommez ce projet "sql_database_front".
Ouvrez maintenant le Visual app Viewer (le bouton play au-dessus de l'arborescence), puis changez le titre de l'en-tête en faisant un clic droit directement dans l'app Viewer et changez sa valeur dans le champ "Text value" (SQL Front par exemple).
Passons à des étapes plus complexes : Créez votre conteneur de liste pour afficher les données.
Tutoriel n°3 : Accéder à une base de données SQL
Étape 8 : Créez Front-end pour votre application #2
Le premier composant que vous devrez intégrer dans le contenu de votre projet est un composant "Form".
Développez Application -> NgxApp -> Pages -> Content.
Cliquez dessus, puis écrivez "Form" dans la palette. Glissez-déposez-le dans votre Content.
Ensuite, dans ce formulaire, vous pouvez voir qu'il existe deux "FormItem" : Un seul est nécessaire ici, vous pouvez donc supprimer le second. Dans le dossier "Controls", désactivez ou supprimez l'alerte -> vous n'en avez pas besoin ici.
Prenez votre séquence précédemment créée dans votre projet Back-end "get_references_by_id" et glissez-déposez-la dans le champ "OnSubmit". (CTRL + drag & drop sur Windows et OPTION + drag & drop sur Mac).
Développez ensuite Formitem -> TextInput. Dans la fenêtre des propriétés, changez le nom du contrôle en "c8o_title". Le nom du champ de saisie sera ainsi lié au nom de la variable de la séquence.
Tutoriel n°3 : Accéder à une base de données SQL
Étape 9 : Créer Front-end pour votre application #3
Vous devez maintenant placer un "ListContainer" dans votre Content (trouvez-le dans la Palette). Dans ce ListContainer, cherchez le "ForEach" : cliquez dessus, puis dans la fenêtre de propriétés (en bas à gauche), trouvez la "Directive source", cliquez sur le petit bouton "SC", puis sur le [...] -> cela ouvrira une fenêtre. Dans cette fenêtre, cliquez sur la séquence, puis sur "array" pour lier le ListContainer aux données de l'array.
Ensuite, dans l'arborescence, ouvrez le ForEach -> ListItem -> Label -> item.text : cliquez dessus, et dans les propriétés choisissez la valeur Text, cliquez sur la Source "SC" et [...] à nouveau. Une fenêtre s'ouvre à nouveau, mais cette fois, vous devez cliquer sur le bouton supérieur (flèche bleue) "Show Iterators on current page Sources" (Afficher les itérateurs sur les sources de la page actuelle) pour choisir l'itérateur. Cliquez ensuite sur "ForEach" et sélectionnez "title" dans la fenêtre de droite.
Vous pouvez maintenant tester par vous-même : Écrivez "bactéries" dans la barre de recherche et soumettez-la : elle affichera toutes les données contenant le mot bactéries dans le titre.
Tutoriel n°3 : Accéder à une base de données SQL
Étape 10 : Créez Front-end pour votre application #4
Pour améliorer l'affichage des données dans votre application, vous allez ajouter quelques composants. Tout d'abord, glissez-déposez un composant "Attr" dans ListContainer -> ForEach -> ListItem -> Label. Définissez sa propriété "Attr name" à "class" et sa propriété "Attr value" à "ion-text-wrap". Le texte du "titre" sera désormais affiché entièrement sans ellipse.
Ajoutons maintenant les auteurs : Pour ce faire, glissez-déposez le composant "Paragraphe" dans le composant "Étiquette".
Cliquez sur le texte "some text" en dessous et cliquez sur la propriété "Text value". Double-cliquez sur le bouton "SC", cela affichera le sélecteur de source NgxComponent. Cliquez sur le bouton supérieur "Show Iterators on current page Sources" (play), puis sélectionnez l'entrée "ForEach" dans le panneau de gauche.
Enfin, sélectionnez "authors" dans le panneau de droite et cliquez sur le bouton [OK]. Vous pouvez également modifier le texte de ListHeader pour afficher quelque chose de plus précis et de plus dynamique.
Expand ListHeader -> Label -> Heading -> some list header. Double-cliquez sur le bouton "SC", cela affichera le sélecteur NgxComponent Source. Cliquez sur le bouton supérieur "Show Forms on current page Sources", puis sélectionnez l'entrée "Form #formSample" dans le panneau de gauche. Dans le panneau de droite, développez les contrôles -> ['c8o_title'] -> value, il s'agit du texte dynamique lorsque vous tapez votre recherche dans le champ de saisie. Vous pouvez ajouter du texte Javascript statique avant et après la valeur dynamique. Copiez "'Rechercher un titre qui contient : ' + (" dans le champ Préfixe et " || '')" dans le champ Suffixe (cela évitera d'afficher 'null' lorsque le champ est vide). Cliquez sur le bouton [OK] pour valider.
Saisissez du texte dans le champ de saisie et le texte de ListHeader sera modifié en conséquence. Cliquez sur le bouton [SUBMIT] pour afficher la nouvelle présentation des données.
Et voilà ! Vous savez comment intégrer des données SQL dans votre (vos) application(s).
