Congratulations, you achieved the first tutorial ! Now that you have the basics, let's create a contentful application : A News Reader that will display news from an RSS Feed.
Step 1 : Create a new project
If you come from the first tutorial, creating a project has no longer secrets for you ! For the others, click on the "File" menu on the top left, then choose "New", and select "Project". Then select "Convertigo Low Code FullStack Web/Desktop or Mobile app project", and name your project "CNN_news_reader".
Note : Dont forget that if you name your project differently, you will not be able to continue properly the tutorial..
You can also start a new project by clicking the "Convertigo Low Code FullStack Web/Desktop or Mobile app project" directly in the left window of the Studio when you start it.
Step 2 : Create a connector to the RSS Feed
The first thing you will have to do is to create a connector that will connect to the CNN Web Data. To proceed, open your project, click on the connector folder (it will display the palette), then select in the palette the HTTP Connector, and simply Drag & Drop it in the connector folder. Name it "RSS_connector".
Then, click on your HTTP connector and focus on the properties (bottom left window) : In the "server" property, this is where you have to call the RSS feed by setting the server address, which is : "rss.cnn.com".
Your application is now linked with the CNN RSS Feed. Don't forget to save your project with a CTRL+S or manually as seen in the Animation.
Step 3 : Create a Transaction in your connector
Now that your connector is set up, add a transaction that will specify where to collect data from the CNN Web Service.. In our case, we want to use the "rss/edition.rss" URL.
Search in the palette for "XML HTTP Transaction" and Drag & Drop it directly in the connector you created. Name this transaction "GetFeed", and in the properties (bottom left), add to the "sub path" field the "rss/edition.rss"
This XML HTTP transaction is now connected to the latest news from the CNN RSS Flux.
Step 4 : add a sequence in your project
The Connector and the HTTP Transaction are now setup, now you have to add a Sequence : It will allow you to call your transaction, and extract to build the collection of objects you want for your news reader app.
Click on your project, this will display the Palette where you will have to Drag & Drop the "Generic Sequence" into the project itself.
Name this Sequence "Get_CNN_Feed"
As a reminder, never forget to regularly save your project !
Step 5 : add a sequence in your project #2
Once you added the Sequence into your project, you will will need your sequence to call the Transaction you previously created :
In the Project Tree view, simply Drag & Drop your Transaction into your Sequence.
Make sure to hold CTRL on Windows OR Option on Mac while Drag & Dropping !)
You will be able to see The Call Transaction in your sequence by opening the Sequence folder and clicking in the "steps" folder.
Step 6 : add a sequence in your project #3
Once you added the Generic Sequence into your project, you will add some steps to this sequence to setup the processing flow. This flow will occur in the back-end server and will use some data model described in a schema.
Double-Click the Call transaction Step to display the Source Picker (response schema of the transaction).
If the schema does not contain the response elements, you have to update the transaction schema :
Right-click the source transaction and choose "Execute" (or click the transaction and press F5) this will generate the response data.
Right-click again the source transaction and choose "Update schema from current connector data".
Double-click again the Call transaction Step to display the updated transaction schema in the Source Picker (channel -> item).
Then you will have to iterate your information to build the news object collection.
Step 7 : add a sequence in your project #4
You now have your sequence linked with the RSS data transaction. Let's iterate the response data to construct our own response data structure.
To do so, search for the "Array" step in the palette, and Drag & Drop it into your sequence.
Once done, name it "news". This is a JSON Array of the repeated RSS data that will contain in the next step the title, description and image URL data.
Then, search for the Iterator step in the palette, and Drag & Drop it into your sequence.
Then double click your call transaction in your sequence to open the Source picker, expand the channel folder and Drag & Drop the "item" folder directly in your iterator.
This item folder provides in your Iterator the information you want.
Now let's choose what specific information you want.
Step 8 : add a sequence in your project #5
This step will integrate concrete information in your iterator : Click on your iterator, then in the palette, search for the "Object" Step which is a container for the different elements that you will add to it. It is not necessary to give it a name as it will not be displayed in the response data. Now search in the Palette for the "Field" Step and Drag & Drop it 3 times in your "object" folder (Name these 3 elements "title", "description" and "imageUrl")...
As seen in the Animation, to bind the data, double-click the Iterator Step (named for_each_item) to display the Source Picker tab, open the item branch, and Drag & Drop the "TxT" element corresponding to the needed information in the different element steps and each time choose "Value" when prompted to set the value property of the Step.
Note : For the ImageUrl Step, you will have to manually modify the xPath "//document/transaction/document/rss/
channel/item/group/content/@url"
by adding "[1]" after the "/content" :
"//document/transaction/document/rss/
channel/item/group/content[1]/@url"
To do so, click on the item => group => content => Attributes =>url. The xPath is automatically computed and then you can edit it. When it is done, Drag & Drop the "xPath" text to the imageUrl Step and choose "Value" to set the value property of the Step.
Now right click your sequence and execute it, the right window will show you in the code only the information you required.
Now let's see how to visually display these data in your application.
Step 9 : Create Front-end for your application #1
Congratulations ! You finished every Back End aspect of the creation of this app; if you survived this tutorial so far, the rest will be a piece of cake! Now that you have all the data you want, let's create visually the app to display it.
Run the play button above your project to display the visual application.
Then, the first step is to create your elements such as your title, your call button etc.. Let's see how to create your application heading :
Open the page folder in the tree view (in NgxApp) --> and click on Content that will open the palette, search for H1 in the palette and simply Drag & Drop it in the "content" section. Then in the bottom left window, change your H1 value opening the H1 and clicking on "Heading 1"'.
The objective is to add all the content that you want to have the most complete application.
Step 10 : Create Front-end for your application #2
Now that you have added your title, let's bring the button that will call the data you want to display :
Same action as for the title, search for the button item in the Palette, Drag & Drop it in your content and change its values in the bottom left window.
You have the button, now we are about to see how you are going to call and display the information by clicking it.
Step 11 : Create Front-end for your application #3
The next step is to Drag & Drop your whole sequence into your button : Open the "Controls" folder in your button, and Drag & Drop your sequence into the "onClick" event maintaining CTRL + Drag & Drop for Windows or Option + Drag & Drop for Mac.
Now that you have linked your sequence to your button, the last step will be to display it, that is what you are going to see in the last step of this tutorial.
Step 12 : Create Front-end for your application #4
You are nearly done with your first application! The next (and last) step will be to create list items to display your news.
To do it, you can either watch the step by step in the animation or just use the button to copy to the clipboard and paste it directly in your project content.
Then, open the "listContainer" element and select the "ForEach" component. In "Directive source" double-click the "SC" button to open the Source picker. Select the "Get_CNN_Feed" sequence on the left panel and click the "news" array on the right to iterate on.
Step 13 : Create Front-end for your application #4
Expand ForEach -> ListItem -> label components. Click the "Image" component, select the "src" property and double-click the "SC" button. In the Source picker click the "Show Iterators on current page Sources", click "ForEach CNN_news_reader.Get_CNN_Feed -> news" on the left panel and click "imageUrl" on the right panel.
Expand ForEach -> ListItem -> H1 components. Click the "SET TITLE SOURCE" component, select the "Text value" property and double-click the "SC" button. In the Source picker click the "Show Iterators on current page Sources", click "ForEach CNN_news_reader.Get_CNN_Feed -> news" on the left panel and click "title" on the right panel.
Expand ForEach -> ListItem -> Paragraph components. Click the "SET DESCRIPTION SOURCE" component, select the "Text value" property and double-click the "SC" button. In the Source picker click the "Show Iterators on current page Sources", click "ForEach CNN_news_reader.Get_CNN_Feed -> news" on the left panel and click "description" on the right panel.
Step 14 : Create Front-end for your application #4
Last but not least, click your button to display your news...
Your application is now ready and functionnal. To build/deploy it, just follow the steps you followed in the first tutorial here.
And there it is ! Your news are displayed directly on your application.
Now that you know how to create a regular application, you can either start creating your own applications or follow the other tutorials.