Creating a Website That Fetches Top News Using News API

Welcome to my tutorial!

In this tutorial, we’ll be creating a simple website that fetches top news from different sources on any topic of your choice. For that, we’ll use the programming languages: Python, Flask, Javascript, HTML, CSS and News API.

You might ask: “All these languages?”

Don’t worry! This tutorial will guide you through each step and the final project isn’t as complicated as you think.

We’ll be using python to create a program that gets news from News API and save its result to an external file. We’ll use javascript’s versatility to handle and manipulate our website’s front end in multiple ways.

An API is essentially a messenger that takes requests, translates, and returns responses. It stands for Application Programming Interface and has a set of functions that allows applications to access data and interact with external software components or operating systems. There are more than 20,000 different APIs out there, and most of them generally require an API key. In this tutorial, you’ll be using News API to fetch different news from different sources after retrieving your unique API key. Flask is a small and lightweight Python web framework that provides useful tools and features that make creating web applications in Python easier. In this project, we’ll be using flask to run our app and test what we have done.

The project that we’ll be creating will you get started with how APIs and Flask work, and will help you understand how we can use all these languages together.

This tutorial is designed for users who are using a macOS, Linux or a Windows operating system. Although the steps for each of them are almost identical, there are some minor step differences which are all mentioned below.

In addition, this tutorial assumes that you have some basic coding skills in html, javascript, and python. If you have not installed python, you can download it from this link and install it.

To get started, we open up a code editor of our choice and create a folder we want to save our project in. I recommend using VSCode because of its versatility, but any editor works. We can name the folder we’ll be working on whatever we want. The next step is setting up our folder structure and creating empty files in it.

Inside our main folder, we create two folders called static and templates. Inside our static folder, we create two empty files: index.js and style.css. Inside our templates folder, we create a new empty file and name it home.html.

Inside our main folder, but outside our static and templates folders, we create three files and name them: get_news.py, app.py and news.js.

This how our overall folder structure should be.

To get started with our basic home page, we go to your home.html file and write the following code:

Now that we have started with our home page, we can add a css design to style our page and make it look organized.

Go to your style.css file and copy the code from this file and save it.

We add the following code in the head tag of our home.html file to link our external css to our html page.

You might have noticed that the way we linked our external css file to our home.html page is different from what we’ve learned. When using flask, we attach our css files and other static files like javascript, images and others this way.

In href attribute of the code, we use url_for() provided by flask framework. In this function we passed ‘static’ as first argument which tells the flask that this would be a static file and then passed ‘filename’ as second argument and assigned the file style.css to it. Then, we put all this in this curly braces “{{ }}.

Now we move on to creating the python program that fetches news from News API.

First, we go to our get_news.py file and add the following code.

Now that we’ve created the basic python program to fetch the news, the next step will be getting our own unique API key.

We go to this website and register to obtain our own unique key. Once we’ve retrieved our API key, we copy it and paste it in the line that stays #Insert your api key here in the file we opened above. We need to make sure we put quotes around our API key. Our line of code should look something like this:

Once we insert our API, we can move on to installing the python client library for News API. This allows us to use the News API using python easily. In order to install that, we first need to install pip through terminal(command line).

PIP is a package management system used to install and manage software packages/libraries written in Python. These files are stored in a large “on-line repository” termed as Python Package Index (PyPI). This tool allows us to install and manage additional libraries and dependencies that are not distributed as part of the standard python library.

If you are on a macOS or linux system, open your terminal by navigating to your applications menu and selecting terminal. Then download this python file and put it in the folder location where your current terminal path is at. N.B. You don’t have to necessarily save the file in your main project folder although you can. Just make sure that on your terminal, you go to the location where this file is saved at before proceeding with the command below.

Once we do that, we use the following command to fully install pip. Use the first command if you are on macOS and the second command if you are on linux.

If you are on windows, you’ll be using command prompt instead. Go to your search box at the bottom left corner of your screen and type cmd and select Command Prompt.

Then download this python file and put it in the folder location your terminal path is at. N.B. You don’t have to necessarily save your file in your main project folder although you can. Just make sure that on your terminal you go to the location where this file is saved at before proceeding with the command bellow.

Once you do that, use the following command to fully install pip.

If you get an error saying, “Python was not found; run without arguments to install from Windows…” or some other don’t panic. You just need to add python to Windows PATH. You can use this as a reference to do that.

Once we have pip installed, we can proceed to installing the python client library for News API using pip. We type in the following command on our terminal(command line).

If we’re on a macOS:

If we’re on linux:

If we’re on windows:

Now that we have installed News API for python, we can move on to adding it to our python file. We go back to our editor that has our main project folder opened up and add the following line at the top of our get_news.py file.

If you we want to test out our python file and check if it collects news properly, we go to our get_news.py file and call the function get_news with any keyword we want. For instance, if we want to get news about dogs, we add the following line to the end of our python file and run it.

Don’t be surprised if you don’t get anything. All the information retrieved is saved up in the external file, news.js, that we created earlier. We can just open that up and see our results.

To display the results saved in news.js to our website, we need to use javascript which will read this file and create html elements based on that. We go to our index.js file and add the code from this file. We need to make sure to save our file as we make changes.

To link this javascript file to our html file, we add the following line inside our head tag of our home.html file.

Now we move on to the final step, which is setting up flask and connecting our python file and other external files with our website.

We open up our app.py file and add the following code:

Once we set up our flask app, we go back to our terminal(command line) and type the following command.

If we’re on a macOS:

If we’re on linux:

If we’re on windows:

After going through all these steps, we start our flask application with a command. In your terminal navigate to your main project folder and type the following command.

If we’re on a macOS:

If we’re on linux or windows:

We should be getting this output:

Now we just copy the link http://127.0.0.1:5000/ to our browser and test if our app is running successfully. Congratulations! You just created a website that used multiple programming languages, an api and a web framework. Our end result should look like this.

Sources