Félicitations, vous avez réussi le premier tutoriel ! Maintenant que vous avez les bases, créons une application contentful : un lecteur de nouvelles qui affichera les nouvelles provenant d'un fil 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 sur "Convertigo Low Code FullStack Web/Desktop or Mobile app project" directement dans la fenêtre de gauche du Studio lorsque vous le démarrez.
Étape 2 : Créer 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 de CNN. N'oubliez pas d'enregistrer votre projet à l'aide de la combinaison de touches CTRL+S ou manuellement, comme indiqué dans l'animation.
Étape 3 : Créer 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 maintenant connectée aux dernières nouvelles du flux RSS de CNN.
Étape 4 Ajouter une séquence dans votre projet
Le connecteur et la transaction HTTP sont désormais configurés. Vous devez maintenant ajouter une séquence : elle vous permettra d'appeler votre transaction et d'extraire les objets nécessaires à la création de la collection que vous souhaitez pour votre application de lecture d'actualités.
Cliquez sur votre projet. La palette s'affiche. Vous devez y faire glisser et 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 pas de sauvegarder régulièrement votre projet !
Étape 5 : ajouter une séquence dans votre projet #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 #3
Une fois que vous avez ajouté la séquence générique à votre projet, vous allez ajouter quelques étapes à cette séquence pour configurer le flux de traitement. Ce flux se déroulera dans le 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 constituer la collection d'objets d'actualité.
Étape 7 : ajoutez une séquence dans votre projet #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 et glissez-déposez-la dans votre séquence.
Une fois cela fait, 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-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 le dossier «item » directement dans votre itérateur.
Ce dossier de poste fournit dans votre Iterator les informations que vous souhaitez.
Choisissons maintenant les informations spécifiques que vous souhaitez.
Étape 8 : ajouter une séquence dans votre projet #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 ne sera pas affiché 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 la vidéo, pour lier les données, double-cliquez sur l'étape Iterator afin d'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.
Maintenant, cliquez 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éez Front-end pour votre application #1
Félicitations ! Vous avez terminé tous 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 pour les afficher.
Lancez le bouton de lecture au-dessus de votre projet pour afficher l'application visuelle.
Ensuite, la première étape consiste à créer vos éléments tels que votre titre, votre bouton d'appel, etc. Voyons comment créer l'en-tête de votre application :
Ouvrez le dossier Pages dans l'arborescence (dans NgxApp) --> et cliquez sur Contenu. Cela ouvrira la palette, recherchez H1 dans la palette et glissez-déposez-le simplement dans la section «Contenu ». Ensuite, développez votre composant H1, allez dans le composant Texte nommé «En-tête 1 » et modifiez sa propriété «Valeur du texte » comme vous le souhaitez.
L'objectif est d'ajouter tout le contenu que vous souhaitez pour que la demande soit la plus complète possible.
Étape 10 : Créer Front-end pour votre application #2
Maintenant que vous avez ajouté votre titre, ajoutons le bouton qui appellera les données que vous souhaitez afficher :
Même action que pour le titre, recherchez le composant 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éez Front-end 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 lié votre séquence à votre bouton, la dernière étape sera de l'afficher, c'est ce que vous allez voir dans la dernière étape de ce tutoriel.
Étape 12 : Créez Front-end pour votre application #4
Vous avez presque terminé votre première application ! Dans cette étape, vous allez créer des éléments de liste pour afficher vos actualités.
Pour ce faire, vous pouvez soit regarder la vidéo qui explique étape par étape comment procéder, soit simplement 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 Front-end pour 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éez Front-end pour votre application #4
Enfin, cliquez sur votre bouton pour afficher votre nouvelle...
Votre application est maintenant prête et fonctionnelle. Pour la construire/déployer, il suffit de suivre les étapes que vous avez suivies dans le premier tutoriel ici.
Et c'est parti ! Vos nouvelles sont affichées directement sur votre application.
Maintenant que vous savez comment créer une application régulière, vous pouvez soit commencer à créer vos propres applications, soit suivre les autres tutoriels.