Ola
Download
First get yourself an API from NewsApi, this is free for non-commercial apps,
newsapi.org
The API provides one with latest top news in batches of 10 items at a time and also sources of those news..
For this I could have used BANanoFetch, you can too, but I wanted to test my BANanoPHP lib in getting json files from the net, so I ran this.
We convert this to a simple card.
Next we need a way to loop though each article and then display it in our page. With the abstract designer, this is rather easy. We design out card outline.
Each card with an article will be rendered inside an RC (i.e. row column). Each column should span 8 spaces. We place various elements into our stage depending on where stuff should be..
Of course the social media buttons are just for show. We have a chip, a spacer, some buttons with icons inside and then a spacer and another button.
In the definition of the "Read More" button, we bind its HREF to the article url.
So when one clicks the URL, it will open up the page that has that news article.
We needed a way to list all the top articles via a loop. As earlier indicated, the card definition sits on an RC, this RC is inside the div. We need to tell our app that we will create a new card for each new article we have. In VueJS this is rather easy with a v-for directive,
See the Key and VFor properties in the bag for the div.
Download
First get yourself an API from NewsApi, this is free for non-commercial apps,
News API - A JSON API for live news and blog articles
Search worldwide news articles and headlines from all over the web in real-time with our free News API.

The API provides one with latest top news in batches of 10 items at a time and also sources of those news..
For this I could have used BANanoFetch, you can too, but I wanted to test my BANanoPHP lib in getting json files from the net, so I ran this.
B4X:
Dim fKey As String = $"https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${apiKey}"$
' we will use php getjson
Dim bPHP As BANanoPHP
bPHP.Initialize
Dim articlesJSON As String = BANano.CallInlinePHPWait(bPHP.FILE_GETJSON, bPHP.BuildFileGetJSON(fKey))
Dim articlesMAP As Map = BANano.FromJson(articlesJSON)
Dim items As List = MyApp.newlist
Dim articles As List = articlesMAP.getdefault("articles", items)
We convert this to a simple card.
Next we need a way to loop though each article and then display it in our page. With the abstract designer, this is rather easy. We design out card outline.
Each card with an article will be rendered inside an RC (i.e. row column). Each column should span 8 spaces. We place various elements into our stage depending on where stuff should be..
Of course the social media buttons are just for show. We have a chip, a spacer, some buttons with icons inside and then a spacer and another button.
In the definition of the "Read More" button, we bind its HREF to the article url.
So when one clicks the URL, it will open up the page that has that news article.
We needed a way to list all the top articles via a loop. As earlier indicated, the card definition sits on an RC, this RC is inside the div. We need to tell our app that we will create a new card for each new article we have. In VueJS this is rather easy with a v-for directive,
See the Key and VFor properties in the bag for the div.
Last edited: