Create and deploy your own COVID-19 tracker in 3 days !
Over the past few weeks, I have been running here and around for new kind of certifications to be added to my LinkedIn profile which brings attention of my LinkedIn community. Well, I guess I am not the only one doing it. But with every certification it is good habit to also mention things that you have learnt in that particular course and a brief description about what you actually made out of that course.
After uploading a few certificates I realized it is time that I dig deep in to how can I create projects based on my knowledge that I have gained in recent times. One particular thing that I had been seeing over the internet especially on the LinkedIn community is people coming with their own versions of covid-19 tracker. I said to myself, “Even I need one!”.
In this post, I am not going to teach you exactly how to make the app but surely provide you resources and the best way to go about building this web application. If time avails, I will also try writing about each and every aspect separately for creating and deploying a live covid-19 tracker.
So let us begin ..
Pre-requisites
- Basic HTML knowledge (use of <a>, <img>, <div> tags). You don’t need to have understanding of bootstrap, css or javascript to begin with.
- Python Programming basics (data types especially using dictionaries and lists, slicing and indexing operations, functions)
DAY 1
Step 1: Creating a simple flask application
In order to get started with flask, I would not recommend you to go through hours of video on YouTube. Instead, follow these two links written by my colleague which will teach you to set-up flask and create a basic flask application where you can pass your python variable to the html file being rendered.
This much knowledge is enough if you have got any programming experience before to get you started. However, if you want to learn more I will highly recommend this YouTube channel.
Step 2: Getting started with bootstrap
Now, that you have created your basic webpage using flask, start customizing it using bootstrap. The best place to get started with bootstrap is w3schools. Explore various components of bootstrap and try it in your website.
DAY 2
Now it is time to explore various APIs available online in order to provide live data to your website. A common question asked to me was do I update the website data manually or do I have an automatic procedure ? I will recommend you to use online APIs in the form of .json responses instead of importing a module.
I used the following links to get live data, there are a lot of them, you can use as per your interests -
Step 3: Creating tables in your webpage
The two most important element in your webpage is including tables and graphs for your data.
To include tables using bootstrap head on to this link.
You can have from a wide range of format for your webpages and the best part is you don’t need to include separate files for bootstrap and css, instead you can use header to include bootstrap classes. That will do the work.
Step 4: Include graphs for you webpage
I have spent almost an entire day trying to figure out which graph to use. Initially I tried using bokeh plots for python but I don’t know why it used to work at times and sometimes just annoy without any display. Next up was Chart.js but it also had an unknown issue (only one graph being displayed at a time on the webpage) which I could not figure out and on trying to search the internet I found people with similar issue. So, after some research I decided to use Highcharts. It is very simple to integrate in your html file using javascript. Follow the short video below on how to use it and then head on to their official website which has classified content about almost all required graphs with responsive and animated behavior.
DAY 3
On the third day, I deployed the website, I was excited to deploy my first web application on Heroku but faced a lot of issues. Yo might or might not face them depending on your environment settings and the kind of application you are deploying. I used Heroku for the deployment purpose. There are many videos available on this but I will suggest you to follow this link which explains about the deployment of flask application on Heroku. Having prior knowledge of working on git environment and LINUX window will help you to deploy with ease.
The most important file in deploying is the Procfile. Do not create Procfile by using any kind of editors but instead use vi Procfile on command line to create it. After deployment if you are unable to see your website or you start facing some build issues, I would recommend you to check the following things -
- Check if the the buildpack is heroku/python in the settings page of your Heroku app.
- On the resources tab, you should be able to see the dynos (basically see if you have the Procfile content on the page)
- If you see Error H14 : no web dynos running kind of error then run heroku ps:scale web=1 on the command line.
- If ModuleNotFoundError hits your log then include that module along with the version you are using to the requirements file.
Now, that you have deployed your website, take a deep breath and feel proud! Spread to the world about your web application, take feedbacks and enhance it further. Just don’t stop ! Keep building new applications.
Cheers.!!
If you find this blog useful than do endorse me for my skills and connect on LinkedIn Page. Also, if you face any issues and want to discuss with me about it, I will be glad to help you just like others helped me ^_^
I have also made 2 YouTube videos to cover the basic on how to create Covid tracker. Click on part-1 and part-2 to watch both the videos.
To check out my flask application click here.
You can also get the source code here.
Thankyou for reading : )