Dans ce tutoriel, nous allons voir comment accéder directement à n'importe quelle base de données SQL dans 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.
É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.
É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 l'élément «Generic Sequence » dans la palette. Faites-le glisser dans votre projet et nommez-le «get_references_by_id ».
Faites ensuite glisser votre transaction dans votre séquence en maintenant la touche CTRL enfoncée + glisser-déposer sur Windows et OPTION + glisser-déposer sur Mac.
Une fois cela fait, vous devrez exporter la variable Call Transaction vers la séquence principale en cliquant avec le bouton droit sur votre Call Transaction et en sélectionnant «Exporter les variables vers la séquence principale ». Ceci est important car toutes les variables Call Transaction Step doivent être définies au niveau de la séquence, le clic droit « exporter » facilite la tâche.
Ce n'est pas nécessairement efficace ici, mais cela 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 d'enregistrer régulièrement votre projet!
Étape 4 : Créer une séquence #2
Maintenant que vous avez créé votre séquence, vous devez ajouter une étape Iterator.
Commencez par ajouter un tableau à votre séquence (cliquez sur votre séquence et recherchez le composant Array dans la palette), glissez-le dans votre séquence, puis recherchez l'Iterator dans la palette et glissez-le dans votre tableau.
Double-cliquez sur votre transaction d'appel pour ouvrir le sélecteur de source, où vous devez trouver «sql_output » pour l'intégrer dans l'itérateur, mais nous ne le trouvons pas.
Cela s'explique par le fait que vous devez mettre à jour votre schéma de transaction.
Commencez par exécuter la transaction «get_references » (F5 ou clic droit sur la séquence, puis «exécuter »).
Ensuite, cliquez avec le bouton droit sur votre transaction nommée «get_references » et cliquez sur «Mettre à jour le schéma à partir des données actuelles du connecteur », puis double-cliquez à nouveau sur votre transaction d'appel: La sortie SQL est là !
Ouvrez cet élément sql_output et glissez-déposez le champ «row » sur votre étape itérateur.
La séquence va maintenant parcourir les données de la base de données.
Étape 5 : Créer une séquence #3
Une fois l'itérateur configuré, vous devrez créer un objet dans lequel vous placerez des champs afin de lier les données spécifiques que vous souhaitez afficher.
Dans la palette, recherchez le composant «Objet » et glissez-le dans l'itérateur. Dans ce cas d'utilisation, plaçons 4 champs: 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 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, puis sélectionnez «Value ». Répétez l'opération pour les 3 autres.
Étape 6 : Créer une séquence n° 4
Tout est désormais implémenté, cela devrait fonctionner !
Pour être sûr, testons-le en ajoutant un «cas test » en cliquant avec le bouton droit sur votre séquence -> nouveau -> cas test. Nommez-le «Test_Case_phosphate », puis ouvrez le dossier «Variables » du cas test.
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 sur le cas de test et sélectionnez «Exécuter ». Cela exécutera la séquence «get_references_by_id » qui appellera la transaction de requête de base de données contenant 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.
Étape 7 : Créez Front-end pour votre application
Voyons comment afficher cette base de données dans votre application.
La première chose à faire est de créer un autre projet : A Front-end .
Cliquez sur Fichier -> Nouveau -> Projet -> Projet d'application web/bureau ou mobile Convertigo Low Code .
Nommez ce projet «sql_database_front ».
Ouvrez maintenant la visionneuse d'application visuelle (le bouton de lecture au-dessus de l'arborescence), puis modifiez le titre de l'en-tête en cliquant directement dessus dans la visionneuse d'application et modifiez sa valeur dans le champ «Valeur du texte » (SQL Front par exemple).
Passons à des étapes plus complexes : Créez votre conteneur de liste pour afficher les données.
É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 contenu.
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 la séquence que vous avez créée précédemment dans votre Back-end «get_references_by_id » et glissez-déposez-la dans le champ «OnSubmit ». (CTRL + glisser-déposer sous Windows et OPTION+ glisser-déposer sous Mac).
Développez ensuite Formitem -> TextInput. Dans la fenêtre des propriétés, remplacez le nom du contrôle par «c8o_title ». Cela permettra de lier le nom du champ de saisie au nom de la variable de la séquence.
Étape 9 : Créer Front-end pour votre application #3
Vous devez maintenant ajouter un «ListContainer » dans votre contenu (vous le trouverez dans la palette). Dans ce ListContainer, recherchez «ForEach » : cliquez dessus, puis dans la fenêtre des propriétés (en bas à gauche), recherchez «Directive source », cliquez sur le petit bouton «SC », puis sur [...] Une fenêtre s'ouvrira. Dans cette fenêtre, cliquez sur la séquence, puis sur «array » pour lier le ListContainer aux données du tableau.
Ensuite, dans l'arborescence, ouvrez ForEach -> ListItem -> Label -> item.text: cliquez dessus, puis dans les propriétés, choisissez la valeur Text, cliquez sur la source «SC » et à nouveau sur [...]. Une fenêtre s'ouvre à nouveau, mais cette fois-ci, vous devrez cliquer sur le bouton supérieur «Show Iterators on current page Sources » (flèche bleue) 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 validez : toutes les données contenant le mot bactéries dans le titre s'afficheront.
É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 » sur «class » et sa propriété «Attr value » sur «ion-text-wrap ». Le texte «title » s'affichera désormais dans son intégralité, sans ellipse.
Ajoutons maintenant les auteurs: pour ce faire, glissez-déposez le composant «Paragraph » dans le composant «Label ».
Cliquez sur le texte «some text » situé en dessous, puis sur la propriété «Text value ». Double-cliquez sur le bouton «SC » pour afficher le sélecteur NgxComponent Source. Cliquez sur le bouton supérieur «Afficher les itérateurs sur les sources de la page actuelle » (lecture), puis sélectionnez l'entrée «ForEach » dans le panneau de gauche.
Enfin, sélectionnez «auteurs » dans le panneau de droite et cliquez sur le bouton [OK]. Vous pouvez également modifier le texte ListHeader pour afficher quelque chose de plus précis et dynamique.
Développez ListHeader -> Label -> Heading -> some list header. Double-cliquez sur le bouton «SC » pour afficher le sélecteur de source NgxComponent. Cliquez sur le bouton supérieur «Afficher les formulaires sur les sources de la page actuelle », puis sélectionnez l'entrée «Form #formSample » dans le panneau de gauche. Dans le panneau de droite, développez contrôles -> ['c8o_title'] -> valeur. Il s'agit du texte dynamique qui s'affiche lorsque vous saisissez votre recherche dans le champ de saisie. Vous pouvez ajouter du texte Javascript statique avant et après la valeur dynamique. Copiez « Rechercher le titre qui contient : » + ( dans le champ Préfixe et || '') dans le champ Suffixe (cela empêchera l'affichage de « null » lorsque le champ est vide). Cliquez sur le bouton [OK] pour valider.
Tapez du texte dans le champ de saisie et le texte ListHeader changera en conséquence. Cliquez sur le bouton [SUBMIT] pour afficher la nouvelle disposition des données.
Et voilà ! Vous savez maintenant comment intégrer des données SQL dans vos applications.