We have been exploring different APIs from the apilayer. In one of the demonstrations, we have utilized Node.js to scrape data from web pages. In this post, we will use Node.js and MediaStack API to create a news web app.
So this Node.js web app connects to the MediaStack API and shows results in a user-friendly way with Express, EJS, Axios, and some CSS! Another great API that can be paired with the mediastack API is a geolocation API from ipstack.
First, let me introduce the MediaStack API and its features. Stay tuned for real-world Node.js applications with MediaStack API.
By the way, we have a bonus at the end of the article!
Table of Contents
What is MediaStack?
MediaStack API is a powerful REST API for live news and blog articles. MediaStack – offers the #1 solution for all your media-related requirements in one place.
Tap into a world of live news data feeds from 7,500 news sources worldwide. Monitor brands and access breaking news events around the world.
Our REST API is built upon scalable apilayer cloud infrastructure and delivers news results in lightweight and easy-to-use JSON format. Moreover, this RESTful web service is platform agnostic and can be integrated with any technology in the market.
MediaStack API is fully automated and updated every minute.
- Real-Time News Data
- Historical News Data
- News Headlines
- 7,500+ News Sources
- 50+ Countries
- 13 Languages Available
How to get started with MediaStack API?
If you do not have an account yet, please make sure to get a free API access key by subscribing to the Free subscription plan. It gives limited access to the media sources to test it out before production.
Here is an example of a simple request:
If you are in a higher subscription plan you can have different functionalities and a more secure connection. For instance, to connect to the MediaStack API using 256-bit HTTPS (SSL) encryption, you will need the Standard or higher plan.
MediaStack API features
Live News – You can access real-time news articles using the news endpoint. Moreover, you can filter your news results by giving optional parameters. Here is an example of requesting live news and filtering data from different countries
Categorizing – Categorize news categories. For instance, get only sports and technology news
Keywords – You can use this parameter to search for exact news from the sources
Date – This parameter can handle historical data. For instance, you can specify the exact date, and you will get news data that happened on that date.
Sort – You can utilize this parameter to specify sorting order. For example: by popularity.
Limit – Depending on your limit, you can specify a pagination limit, which is the number of results per page. The default value is 25, and the maximum allowed is 100.
Make sure to check out the official documentation to learn about other functionalities and features of the MediaStack API.
Sample response data:
How to create a news web app with the MediaStack API using Node.js?
The engaging part is started! If you head over and check out the official documentation page, you find different sample apps with other technologies. In this demonstration, we will create a news web app using Node.js and other web technologies!
How to set up Node.js with MediaStack API?
Open your PowerShell or Bash if you are using Linux and type these commands to set up basic files of the project:
Now back to your terminal again and write these commands to install the required packages to our project. It installs Express, axios, body-parser, and EJS.
Now, create the folders and files that we need. As you can see, we have 3 different files in our CSS folder. But you should create, only the styles.scss file. After that, you need to install the Live Sass Compiler to compile our styles.scss file into styles.css file. It handles all the processes (You just need to click the Watch Sass button on the bottom of the VS Code after installation).
Now go back to your terminal and type this command :
And open your package.json configuration file and make these changes as it is:
Now, go back to your code editor and write this code!
app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const express = require('express') const app = express() const port = 2424 app.use(express.static('public')) app.use('/css', express.static(__dirname + 'public/css')) app.set('views', './src/views') app.set('view engine', 'ejs') const newsRouter = require('./src/routes/news') app.use('/', newsRouter) // Listen on port 2424 app.listen(port, () => console.log(`Listening on port ${port}`)) |
news.ejs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Node.js + MediaStack </title> <link rel="stylesheet" href="/css/styles.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?display=swap&family=Roboto:wght@100&display=swap" rel="stylesheet"> </head> <body> <header class="header"> <div class="header__logo">Node.js + MediatStack News</div> </header> <div class="wrapper"> <div class="news"> <% if(articles != null) { %> <% articles.forEach(function(article, index) { %> <a href="<%- article.url %>" class="news__newsBox" target="_blank"> <% if(article.image != null) { %> <img src="<%- article.image %>" alt="<% article.title %>"> <% } else { %> <img src="https://mediastack.com/site_images/mediastack_logo_footer.svg" alt="default image"> <% } %> <h3> <%- article.title %> </h3> <p> <%- article.description %> </p> <p> Category: <%- article.category.toUpperCase() %> </p> <p> Source: <%- article.source %> </p> </a> <% }) %> <% } else { %> <p>No posts found</p> <% } %> </div> </div> </body> </html> |
news.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
const express = require('express') const newsRouter = express.Router() const axios = require('axios') newsRouter.get('', async(req, res) => { try { // fetch data from MediaStack API const newsAPI = await axios.get(`http://api.mediastack.com/v1/news?access_key=33d8a3828ff9acc50333b32035d49d60&countries=gb`) // console.log(newsAPI.data) // debugging // transfer response to the news.ejs res.render('news', { articles : newsAPI.data.data }) // first data is reponse next one is the articles in the response (array) } catch (error) { if(error.response) { console.log(error.response.data) } else if(error.request) { console.log(error.request) } else { console.log('Error', error.message) } } }) module.exports = newsRouter |
styles.scss
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.header { color: #fff; background-color: #050f6b; display: flex; align-items: center; justify-content: space-between; padding: 15px; margin-bottom: 15px; } body { margin: 0; font-family: 'Roboto', sans-serif; background-color: #f6f6f6e5; } .news { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); grid-gap: 2.5rem; &__newsBox { text-decoration: none; color: rgb(8, 8, 8); background-color: #fff; padding: 25px; &:hover { box-shadow: 0 5px 5px rgba(0,0,0,0.15), 0 5px 5px rgba(0,0,0,0.25); } } } img { max-width: 100%; } h2 { font-size: 1.4rem; } .wrapper { padding: 0 1rem } |
Now we are good to go. Open your terminal and type this command to run the web app.
Here is our result:
Bonus Native Client Sample!
I hope you have enjoyed this real-world demonstration with Node.js. You can achieve more with Delphi FireMonkey and it can be faster.
Moreover, the FireMonkey Low-Code Wizard helps to create cross-platform fully-functional applications with several steps only. And you can connect to any RESTful web service with REST Debugger.
Furthermore, if you would like to parse only the needed values for your application you can utilize this function to get different data from the response easily.
The following code is for Embarcadero Delphi in Object Pascal.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
procedure TForm1.Btn1Click(Sender: TObject); var JSONValue: TJSONValue; JSONArray: TJSONArray; ArrayElement: TJSONValue; begin RESTRequest1.Execute; // fetch data var Result := ''; // create JSON Object from the response JSONValue := TJSonObject.ParseJSONValue(RESTResponse1.Content); // Get the needed array // articles are in the "data" array JSONArray := JSONValue.GetValue<TJSONArray>('data'); // Iterate data array to get titles for ArrayElement in JSONArray do begin Result := Result + ' : ' + ArrayElement.GetValue<String>('title'); end; Memo2.Lines.Add(Result); end; |
Be sure to check Delphi Community Edition out here.
Head over and check out the full source code here: https://github.com/MuminjonGuru/News-Web-App-Using-Node.js-and-MediaStack-API
Are you ready to build apps using a quick and cost-effective JSON API for your news data requirements?
