News Dashboard
Make a simple Dashboard that display News of your choice.
Introduction
In this lesson, we will make a news dashboard using Magicblocks and an API service. We have used API services before in the Weather Dashboard lesson. We will use a news API service in this lesson.
Intended Learning Outcome
- You will learn how to handle news API
- You will learn how to resize groups in dashboard
What is an API?
API means “Application Programming Interface” in technical terms. It is an information gateway that will allow the software and services’ backend to communicate with each other. APIs are used when you log in to apps using your Google/Facebook accounts and when you receive News or Weather details on your apps. You can visualize it as the messenger between two applications.
Setting up the Nodes
First, you need the below nodes.
Make the following arrangement.
Configuring the inject node.
Double click on it to access its settings. Make the below settings. We will set the inject node to trigger every one hour.
Now, let’s configure the HTTP request block.
paste the given link on the URL field:
- Set the Method to GET
- Set the return field as “a parsed JSON object”
Displaying news in the dashboard.
Double click on a Text node, and follow the below instructions.
- Make a new tab and name it, “News 1”(You can name it anything you prefer).
- Under this tab, make a new group as “Author”
- Enter value format as: {{msg.payload.articles[0].author}}
Double click on the second Text node.
- Make a new group as “Title” under the tab you made above and add it.
- Enter the value format as: {{msg.payload.articles[0].title}
Double click on the third Text node.
- Make a new group as “Description” under the tab you made above and add it.
- Enter the value format as: {{msg.payload.articles[0].description}
Resize the Tab groups
Now you should have the below Tab groups in your dashboard.
Click on the edit button of Author Group.
Set width to 4.
Click on the edit button of Description Group and set the width as 17.
Deploy the playground. You will see news appearing on the dashboard.
