Python Flask Web Application to Fetch Coronavirus Stats Using API

Result of the development

In this article, I will briefly demonstrate and explain the processing of creating a simple web application by using Python, Flask framework. There are many python frameworks such as Django, AIOHTTP, Bottle, etc. These frameworks make our web development easier by providing reusable codes and extensions to common operations. The article will also show the method of obtaining data through API and utilize them in a webpage. By the end of this reading, you will have a high-level understanding of developing a Flask web application and utilizing response from API.

Make sure you have already have installed python3 and Flask, on your device. Let’s build a simple web app that returns hello world on the site. Create a python file and add the following codes.

from flask import Flask #importing flask

app = Flask(__name__)

@app.route(‘/’)#defines the webpage route, where the function is executed
def home():
return ‘Hello World’

if __name__==”__main__”:
app.run()

Example of running the python file

In order to run it, go to the terminal and go to the directory where the python file is saved and run it by using the command “python3 filename.py” (make sure you have python3 and flask installed on your device).

After the command is processed, we will get a local hosted link for the website. Go to the link and we have our webpage as below in the figure.

hello world webpage

We have a website with a very basic webpage, instead of returning hello world, we will work on adding the content to it and return other convenient information. Now, we create a folder named ‘templates’ and ‘static’ where we will keep the HTML and CSS files respectively inside them. Let’s create a CSS and an HTML file, and save it as index.css and index.html. Please, check the content of the index.css and index.html on my GitHub, linked below:
https://github.com/parasmanigrg/pythonwebapi_app

Link the CSS file with the HTML file:
<link href=”{{ url_for(‘static’, filename=’css/index.css’) }}” rel=”stylesheet”>

Folders and Files layout

Again run the python file after adding those HTML and CSS contents to the folder.

this is how our webpage looks so far

Now, we just need to get the data through API and place it on the page. Yes, by using {{ }} brackets a variable is declared in the Html and value can be assigned to it while rendering the template. As you can see, we have already declared those variables on the Html file in which we will pass values to show the coronavirus global stats. We are using API from the postman website to get the data.
Check out the documentation of API in the link below:
https://documenter.getpostman.com/view/10808728/SzS8rjbc

from flask import Flask, render_template, request, jsonify
import json
import requests

app = Flask(__name__)
summary_url_temp=”https://api.covid19api.com/summary" #api link

this is the response we receive from the api url link

@app.route(‘/’, methods=[‘GET’])
def home():
response = requests.get(summary_url_temp) #get the response from the link
if response.ok:
resp_data=response.json() #convert the response into json format
message=resp_data[“Message”]
if (message!=””): #incease the api page is updating
return(str(message) +”!! Please Refresh the page after few minutes”)

Aggregate global stats in JSON format

date of the update on the data

The data from the response is converted into JSON format so that we can easily retrieve the particular data from it using keys. The pictures on the left show the part we are interested in from the data we received.

You can see below, how the values are extracted using the keys and then are passed to the HTML template while loading it.

else:
Global=resp_data[“Global”]
new_deaths= Global[“NewDeaths”]
total_deaths=Global[“TotalDeaths”]
new_cases= Global[“NewConfirmed”]
total_cases=Global[“TotalConfirmed”]
new_recovered= Global[“NewRecovered”]
total_recovered=Global[“TotalRecovered”]
updated=resp_data[“Date”]

return render_template(“index.html”,date=updated, nd_n=new_deaths, td_n=total_deaths,nc_n=new_cases,tc_n=total_cases,nr_n=new_recovered, tr_n=total_recovered) #render template by giving value to the variables
else:
print(response.reason)

if __name__==”__main__”:
app.run()

Now, run the python file, your website is ready that shares the latest coronavirus global aggregate stats to users, by using web API.

Result after using the API and passing values to the variable

Now, you have a basic understanding of how to develop a web application and extract data from an API, you can further play with it and utilize those detailed data. For example: get all the countries' covid-19 stats and add search options, so that users can look for a particular country’s stats. Further, you can work on to add charts using those data on your webpage.

Happy Programming :)