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 "Convertigo Low Code FullStack Web/Desktop or Mobile app project", et nommez votre projet "CNN_news_reader".
Note : N'oubliez pas que si vous nommez votre projet différemment, vous ne pourrez pas continuer 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 ce faire, ouvrez votre projet, cliquez sur le dossier connector (la palette s'affichera), puis sélectionnez dans la palette le connecteur HTTP, et glissez-déposez-le simplement dans le dossier connector. 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é "server", c'est ici que vous devez appeler le flux RSS en définissant l'adresse du serveur, qui est : "rss.cnn.com".
Votre application est maintenant liée au flux RSS de CNN. N'oubliez pas de sauvegarder votre projet avec 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 du Service Web CNN. Dans notre cas, nous voulons utiliser l'URL "rss/edition.rss".
Recherchez dans la palette "XML HTTP Transaction" 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 au champ "sub path" l'URL "rss/edition.rss"
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 maintenant configurés, il faut maintenant ajouter une Séquence : Elle vous permettra d'appeler votre transaction, et d'extraire pour construire la collection d'objets que vous voulez pour votre application de lecteur de nouvelles.
Cliquez sur votre projet, cela affichera la Palette où 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 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, glissez-déposez simplement votre transaction dans votre séquence.
Veillez à maintenir la touche CTRL sous Windows ou Option sous Mac pendant que vous glissez-déposez !)
Vous pourrez voir la transaction The Call dans votre séquence en ouvrant le dossier Sequence et en cliquant sur le dossier "steps".
É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 devez ajouter quelques étapes à cette séquence pour configurer le flux de traitement. Ce flux se produira sur le serveur back-end et utilisera un modèle de données décrit dans un schéma.
Double-cliquez sur l'étape Call transaction pour afficher le Source Picker (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 la transaction :
Cliquez avec le bouton droit de la souris sur la transaction source et choisissez "Execute" (ou cliquez sur la transaction et appuyez sur la touche F5), ce qui générera les données de réponse.
Cliquez à nouveau avec le bouton droit de la souris sur la transaction source et choisissez "Mettre à jour le schéma à partir des données actuelles du connecteur".
Double-cliquez à nouveau sur la transaction Call Step pour afficher le schéma de transaction mis à jour dans le Source Picker (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. Itérons 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 de données RSS répétées qui contiendra, à l'étape suivante, les données relatives au titre, à la description et à l'URL de l'image.
Ensuite, recherchez 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 sources, développez le dossier "channel" et glissez-déposez 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 va permettre 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 lui ajouter. Il n'est pas nécessaire de lui donner un nom car il ne sera pas affiché dans les données de la réponse. Cherchez maintenant dans la palette l'étape "Field" et glissez-déposez-la 3 fois dans votre dossier "object" (Nommez ces 3 éléments "title", "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, et glissez-déposez l'élément "TxT" correspondant à l'information nécessaire dans les différentes étapes de l'élément et choisissez à chaque fois "Value" lorsque vous êtes invité à définir la propriété value de l'étape.
Note : Pour l'étape ImageUrl, vous devrez modifier manuellement le xPath"//document/transaction/document/rss/
channel/item/group/content/@url"
en ajoutant "[1]" après le "/content" :
"//document/transaction/document/rss/
channel/item/group/content[1]/@url"
Pour ce faire, cliquez sur item => group => content => Attributes =>url. Le xPath est automatiquement calculé et vous pouvez ensuite l'éditer. Lorsque c'est fait, glissez-déposez le texte "xPath" dans l'étape imageUrl et choisissez "Value" pour définir la propriété value de l'étape.
Maintenant, faites un clic droit sur votre séquence et exécutez-la, la fenêtre de droite vous montrera dans le code uniquement l'information que vous avez demandée.
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 les aspects Back End de la création de cette application ; si vous avez survécu à ce tutoriel jusqu'à présent, le reste sera un jeu d'enfant ! Maintenant que vous avez toutes les données que vous voulez, créons visuellement l'application pour les afficher.
Lancez le bouton play au-dessus de votre projet pour afficher l'application visuelle.
Ensuite, la première étape est de créer vos éléments tels que votre titre, votre bouton d'appel, etc. Voyons comment créer le titre de votre application :
Ouvrez le dossier page dans l'arborescence (dans NgxApp) --> et cliquez sur Content qui ouvrira la palette, cherchez H1 dans la palette et glissez-déposez-le simplement dans la section "content". Ensuite, dans la fenêtre en bas à gauche, changez la valeur de votre H1 en ouvrant le H1 et en cliquant sur "Heading 1"'.
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, apportons le bouton qui appellera les données que vous voulez afficher :
Même action que pour le titre, recherchez l'élément bouton dans la palette, glissez-déposez-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'ensemble de votre séquence dans votre bouton : ouvrez le dossier "Controls" de votre bouton, et glissez-déposez votre séquence dans l'événement "onClick" en maintenant CTRL + Drag & Drop pour Windows ou Option + Drag & Drop 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 ! La prochaine (et dernière) étape consistera à créer des éléments de liste pour afficher vos nouvelles.
Pour ce faire, vous pouvez soit regarder l'animation étape par étape, soit utiliser le bouton pour copier dans le presse-papiers et le coller directement dans le contenu de 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 l'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 "Show Iterators on current page Sources", 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 et 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 "Show Iterators on current page Sources", cliquez sur "ForEach CNN_news_reader.Get_CNN_Feed -> news" dans le panneau de gauche et 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.