Félicitations, vous avez terminé le premier tutoriel ! Maintenant que vous maîtrisez les bases, créons une application riche en contenu : un lecteur d'actualités qui affichera les actualités provenant d'un flux RSS.
Étape 1 : Créer un nouveau projet
Si vous venez du premier tutoriel, la création d'un projet n'a plus de secrets pour vous ! Pour les autres, cliquez sur le menu « Fichier » en haut à gauche, puis choisissez « Nouveau » et sélectionnez « Projet ». Sélectionnez ensuite « Projet d'application Convertigo Low Code Web/Desktop ou Mobile », et nommez votre projet « CNN_news_reader ».
Remarque : n'oubliez pas que si vous nommez votre projet différemment, vous ne pourrez pas suivre correctement le tutoriel.
Vous pouvez également démarrer un nouveau projet en cliquant directement sur « Convertigo Low Code Web/Desktop or Mobile app project » dans la fenêtre gauche du Studio lorsque vous le lancez.
Étape 2 : Créez un connecteur vers le flux RSS.
La première chose à faire est de créer un connecteur qui se connectera aux données Web de CNN. Pour cela, ouvrez votre projet, cliquez sur le dossier connecteur (la palette s'affichera), puis sélectionnez dans la palette le connecteur HTTP et glissez-le simplement dans le dossier connecteur. Nommez-le « RSS_connector ».
Ensuite, cliquez sur votre connecteur HTTP et concentrez-vous sur les propriétés (fenêtre en bas à gauche) : Dans la propriété « serveur », c'est là que vous devez appeler le flux RSS en définissant l'adresse du serveur, qui est : « rss.cnn.com ».
Votre application est désormais connectée au flux RSS CNN. N'oubliez pas d'enregistrer votre projet à l'aide de la combinaison CTRL+S ou manuellement, comme indiqué dans l'animation.
Étape 3 : Créez une transaction dans votre connecteur
Maintenant que votre connecteur est configuré, ajoutez une transaction qui spécifiera où collecter les données à partir du service Web CNN. Dans notre cas, nous voulons utiliser l'URL « rss/edition.rss ».
Recherchez « XML HTTP Transaction » dans la palette et glissez-déposez-la directement dans le connecteur que vous avez créé. Nommez cette transaction « GetFeed » et, dans les propriétés (en bas à gauche), ajoutez « rss/edition.rss » dans le champ « sub path ».
Cette transaction XML HTTP est désormais connectée aux dernières actualités du flux RSS CNN.
Étape 4 : ajoutez une séquence dans votre projet
Le connecteur et la transaction HTTP sont désormais configurés. Vous devez maintenant ajouter une séquence : celle-ci vous permettra d'appeler votre transaction et d'extraire les objets nécessaires à la création de la collection dont vous avez besoin pour votre application de lecture d'actualités.
Cliquez sur votre projet pour afficher la palette dans laquelle vous devrez glisser-déposer la « séquence générique » dans le projet lui-même.
Nommez cette séquence « Get_CNN_Feed ».
Pour rappel, n'oubliez jamais d'enregistrer régulièrement votre projet !
Étape 5 : ajoutez une séquence dans votre projet n° 2
Une fois que vous avez ajouté la séquence à votre projet, vous aurez besoin de votre séquence pour appeler la transaction que vous avez précédemment créée :
Dans l'arborescence du projet, il vous suffit de glisser-déposer votre transaction dans votre séquence.
Veillez à maintenir la touche CTRL enfoncée sous Windows OU la touche Option enfoncée sous Mac pendant le glisser-déposer !)
Vous pourrez voir la transaction d'appel dans votre séquence en ouvrant le dossier Séquence et en cliquant sur le dossier « étapes ».
Étape 6 : ajoutez une séquence dans votre projet n° 3
Une fois que vous avez ajouté la séquence générique à votre projet, vous allez ajouter quelques étapes à cette séquence afin de configurer le flux de traitement. Ce flux se déroulera dans le serveur back-end et utilisera un modèle de données décrit dans un schéma.
Double-cliquez sur l'étape Appeler la transaction pour afficher le sélecteur de source (schéma de réponse de la transaction).
Si le schéma ne contient pas les éléments de réponse, vous devez mettre à jour le schéma de transaction :
Cliquez avec le bouton droit sur la transaction source et sélectionnez « Execute » (ou cliquez sur la transaction et appuyez sur F5) pour générer les données de réponse.
Cliquez à nouveau avec le bouton droit sur la transaction source et sélectionnez « Update schema from current connector data ».
Double-cliquez à nouveau sur l'étape Call transaction pour afficher le schéma de transaction mis à jour dans le sélecteur de source (channel -> item).
Vous devrez ensuite itérer vos informations pour créer la collection d'objets d'actualités.
Étape 7 : ajoutez une séquence dans votre projet n° 4
Votre séquence est désormais liée à la transaction de données RSS. Répétons les données de réponse pour construire notre propre structure de données de réponse.
Pour ce faire, recherchez l'étape « Array » dans la palette, puis glissez-déposez-la dans votre séquence.
Une fois cette opération effectuée, nommez-la « news ». Il s'agit d'un tableau JSON des données RSS répétées qui contiendra, à l'étape suivante, le titre, la description et l'URL de l'image.
Recherchez ensuite l'étape Iterator dans la palette et glissez-déposez-la dans votre séquence.
Double-cliquez ensuite sur votre transaction d'appel dans votre séquence pour ouvrir le sélecteur de source, développez le dossier channel et glissez-déposez le dossier « item » directement dans votre itérateur.
Ce dossier d'éléments fournit à votre itérateur les informations que vous souhaitez.
Choisissez maintenant les informations spécifiques que vous souhaitez.
Étape 8 : ajoutez une séquence dans votre projet n° 5
Cette étape permettra d'intégrer des informations concrètes dans votre itérateur : cliquez sur votre itérateur, puis dans la palette, recherchez l'étape « Objet », qui est un conteneur pour les différents éléments que vous allez y ajouter. Il n'est pas nécessaire de lui donner un nom, car il n'apparaîtra pas dans les données de réponse. Recherchez maintenant dans la palette l'étape « Champ » et glissez-déposez-la 3 fois dans votre dossier « objet » (nommez ces 3 éléments « titre », « description » et « imageUrl »)...
Comme le montre l'animation, pour lier les données, double-cliquez sur l'étape Iterator (nommée for_each_item) pour afficher l'onglet Source Picker, ouvrez la branche item, puis glissez-déposez l'élément « TxT » correspondant aux informations requises dans les différentes étapes d'élément et choisissez à chaque fois « Value » lorsque vous êtes invité à définir la propriété de valeur de l'étape.
Remarque : pour l'étape ImageUrl, vous devrez modifier manuellement le xPath «//document/transaction/document/rss/
channel/item/group/content/@url »
en ajoutant « [1] » après « /content » :
«//document/transaction/document/rss/
channel/item/group/content[1]/@url »
Pour ce faire, cliquez sur l'élément => groupe => contenu => Attributs => url. Le xPath est calculé automatiquement, puis vous pouvez le modifier. Une fois cela fait, glissez-déposez le texte « xPath » vers l'étape imageUrl et choisissez « Valeur » pour définir la propriété de valeur de l'étape.
Cliquez maintenant avec le bouton droit sur votre séquence et exécutez-la. La fenêtre de droite vous montrera dans le code uniquement les informations dont vous avez besoin.
Voyons maintenant comment afficher visuellement ces données dans votre application.
Étape 9 : Créer une interface utilisateur pour votre application n° 1
Félicitations ! Vous avez terminé tous les aspects back-end de la création de cette application ; si vous avez suivi ce tutoriel jusqu'ici, le reste sera un jeu d'enfant ! Maintenant que vous disposez de toutes les données souhaitées, créons visuellement l'application qui les affichera.
Cliquez sur le bouton « Play » au-dessus de votre projet pour afficher l'application visuelle.
La première étape consiste à créer vos éléments, tels que le titre, le bouton d'appel, etc. Voyons comment créer l'en-tête de votre application :
Ouvrez le dossier de la page dans l'arborescence (dans NgxApp) --> et cliquez sur Contenu pour ouvrir la palette, recherchez H1 dans la palette et glissez-déposez-le simplement dans la section « contenu ». Ensuite, dans la fenêtre en bas à gauche, modifiez la valeur H1 en ouvrant H1 et en cliquant sur « En-tête 1 ».
L'objectif est d'ajouter tout le contenu que vous souhaitez afin d'obtenir l'application la plus complète possible.
Étape 10 : Créer une interface utilisateur pour votre application n° 2
Maintenant que vous avez ajouté votre titre, ajoutons le bouton qui appellera les données que vous souhaitez afficher :
Comme pour le titre, recherchez l'élément bouton dans la palette, glissez-le dans votre contenu et modifiez ses valeurs dans la fenêtre en bas à gauche.
Vous avez le bouton, nous allons maintenant voir comment vous allez appeler et afficher les informations en cliquant dessus.
Étape 11 : Créer une interface utilisateur pour votre application #3
L'étape suivante consiste à glisser-déposer l'intégralité de votre séquence dans votre bouton : ouvrez le dossier « Controls » dans votre bouton, puis glissez-déposez votre séquence dans l'événement « onClick » en maintenant la touche CTRL enfoncée + glisser-déposer pour Windows ou Option + glisser-déposer pour Mac.
Maintenant que vous avez associé votre séquence à votre bouton, la dernière étape consiste à l'afficher. C'est ce que vous allez voir dans la dernière étape de ce tutoriel.
Étape 12 : Créer une interface utilisateur pour votre application #4
Vous avez presque terminé votre première application ! La prochaine (et dernière) étape consistera à créer des éléments de liste pour afficher vos actualités.
Pour ce faire, vous pouvez soit suivre les étapes présentées dans l'animation, soit utiliser le bouton pour copier le contenu dans le presse-papiers et le coller directement dans votre projet.
Ensuite, ouvrez l'élément « listContainer » et sélectionnez le composant « ForEach ». Dans « Directive source », double-cliquez sur le bouton « SC » pour ouvrir le sélecteur de source. Sélectionnez la séquence « Get_CNN_Feed » dans le panneau de gauche et cliquez sur le tableau « news » à droite pour itérer.
Étape 13 : Créer l'interface utilisateur de votre application #4
Développez les composants ForEach -> ListItem -> label. Cliquez sur le composant « Image », sélectionnez la propriété « src » et double-cliquez sur le bouton « SC ». Dans le sélecteur de source, cliquez sur « Afficher les itérateurs sur les sources de la page actuelle », cliquez sur « ForEach CNN_news_reader.Get_CNN_Feed -> news » dans le panneau de gauche et cliquez sur « imageUrl » dans le panneau de droite.
Développez les composants ForEach -> ListItem -> H1. Cliquez sur le composant « SET TITLE SOURCE », sélectionnez la propriété « Text value » et double-cliquez sur le bouton « SC ». Dans le sélecteur de source, cliquez sur « Show Iterators on current page Sources », cliquez sur « ForEach CNN_news_reader.Get_CNN_Feed -> news » dans le panneau de gauche, puis cliquez sur « title » dans le panneau de droite.
Développez les composants ForEach -> ListItem -> Paragraph. Cliquez sur le composant « SET DESCRIPTION SOURCE », sélectionnez la propriété « Text value » et double-cliquez sur le bouton « SC ». Dans le sélecteur de source, cliquez sur « Afficher les itérateurs sur les sources de la page actuelle », cliquez sur « ForEach CNN_news_reader.Get_CNN_Feed -> news » dans le panneau de gauche, puis cliquez sur « description » dans le panneau de droite.
Étape 14 : Créer une interface utilisateur pour votre application #4
Enfin, cliquez sur le bouton pour afficher vos actualités...
Votre application est désormais prête et fonctionnelle. Pour la compiler/déployer, suivez simplement les étapes décrites dans le premier tutoriel ici.
Et voilà ! Vos actualités s'affichent directement sur votre application.
Maintenant que vous savez comment créer une application classique, vous pouvez soit commencer à créer vos propres applications, soit suivre les autres tutoriels.