😷 How to create Coronavirus (COVID-19) API and Web widgets.
Tags: javascript, api, webdev, showdev
Published: 2020-04-28 20:33:33

---
title: 😷 How to create Coronavirus (COVID-19) API and Web widgets.
published: true
description: Check out how to build simple COVID-19 API and ready to embed web widgets. After placing a widget on a website, it shows live statistics local to a visitor depending on one's location. 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/d184w1of6xegsk1hrqk3.png 
tags: #javascript #api #webdev #showdev
---


Like all of us, we've been observing the spread of Coronavirus (COVID-19) with great concern. Our thoughts are with everyone affected, and we are grateful to all the health workers and public safety officials who allow us to survive.

##Reasons

Recently we've reloaded our [Dataflow Kit framework](https://blog.dataflowkit.com/reloaded/), which is now, I believe🙏🏼, become more focused and more understandable for our users.
 
The challenge is to find out how much time and effort it would take us to complete creating the code which can

1. Extract actual data from the trustable COVID-19 source.  
2. Make extracted data available to others through the API. 
3. Create JavaScript web widgets that consume data from the API layer. 

Running ahead, it took us about a day to complete a draft covering all 3 stages without the design of cards. 👻

On the other hand, we need to take a test drive of our re-implemented core services like [Visual Data Selector](https://dataflowkit.com/dfk) and [Headless Chrome service](https://dataflowkit.com/render-web) running in our cloud.

![Extract COVID-19 data from the source website](https://dev-to-uploads.s3.amazonaws.com/i/pozy9jnsw9ciap5fu14z.png)

##Stage 1. Extract data from the source.

We watched the [Worldometers website](https://www.worldometers.info/coronavirus/#countries) for quite some time and found it to be an excellent source of COVID-19 data. So we choose it finally as a source.

We use point-and-click Visual Data Selector to select desired data from the Worldometers' table. We can preview the extracted data several times until we satisfied with the results. We have to be sure we've chosen the right CSS selectors from the source HTML web page. As a result, we generate the payload, which is used for requesting the source web page periodically and grabs new data.

Check out the first article in the series for more details.
Stage1: [How to scrape COVID-19 cases?](https://blog.dataflowkit.com/scrape-covid-19-cases/)


![COVID-19 Tracker API](https://dev-to-uploads.s3.amazonaws.com/i/abcjjzzonjly08t7lj80.png)
##Stage 2. Coronavirus Tracker API.

At this stage, we develop a simple HTML server written in GO. 

The server sends requests periodically to Dataflow Kit API endpoint at `https://api.dataflowkit.com/v1/parse`  with the previously generated payload. 

At the same time, we make a code to handle 2 endpoints for us:
`GET /v1` - List all COVID-19 cases.
`GET /v1/{cntr}` - Get COVID-19 cases for a specified country.

Available {cntr} values: world, USA, spain, Slovakia and etc.
We run our open API at
https://covid-19.dataflowkit.com/v1
https://covid-19.dataflowkit.com/v1/world
You may use it absolutely for free.

Read more about this part at
Stage2: [Coronavirus Tracker API.](https://blog.dataflowkit.com/coronavirus-tracker-api/)

![Make widgets showing live COVID-19 Statistics](https://dev-to-uploads.s3.amazonaws.com/i/rp87bmu3g9o24a4egpcq.png)
##Stage 3. Coronavirus live statistics free widgets.

Finally, we create web widgets. They visualize Coronavirus (COVID-19) live statistics coming from the API layer.

After placing a widget on any website, it shows live statistics local to a visitor depending on one's location.

Check out the final part at 
Stage3: [Coronavirus live statistics free widgets.](https://blog.dataflowkit.com/coronavirus-widgets/)

Resources.
Dataflow Kit open COVID-19 Free API:
https://covid-19.dataflowkit.com/v1
https://covid-19.dataflowkit.com/v1/world

The full code is available in our public repository at https://github.com/slotix/COVID-19.git

Free Coronavirus (COVID-19) Widgets:
https://covid-19.dataflowkit.com/