Building Covid-19 App using Django and Flutter.

still …in progress…

Intro:

What we want to build ?

At this point in time we would like to interact visually with all the data around the globe with dynamic data. The main idea is to have an interactive representation of the covid-19 pandemia, based on location with some statistics.

ref: https://vuejsexamples.com/airport-distance-map-built-with-svg-vue-d3-and-gsap-2/

The development will have three main steps, first build a the backend using Django and postgreSQL in order to create a rest api. Second, we want to build a web app that shows the data, maps and statistics. And last but not the least, a flutter mobile app that enable users to interact with the data.

The data set:

So far I have found an API for catch an up to date dataset at https://lab.isaaclin.cn/nCoV/zh ; as usual, the response of the server is a JSON file with a bunch of data related to the covid-19 with some interesting variables, very useful to build a visual interface to understand the impact of the pandemia.

{
"locationId": 965003,
"continentName": "欧洲",
"continentEnglishName": "Europe",
"countryName": "波黑",
"countryEnglishName": null,
"provinceName": "波黑",
"provinceShortName": "波黑",
"provinceEnglishName": null,
"currentConfirmedCount": 13,
"confirmedCount": 13,
"suspectedCount": 0,
"curedCount": 0,
"deadCount": 0,
"cities": null,
"comment": "",
"updateTime": 1584107664310
},

As you can tell, we have a complete model, related to locations, timestamp, confirmed cases and fatalities. Therefore, it is needed to store the data in function of the timestamp.

****Updated API:

After some testing of the api, I found some negative points including stability and reliability of the server : https://lab.isaaclin.cn/nCoV/zh.

Therefore It was needed to find new stream of data. The following end point deliver quality in data and a reliable server, so far the best rest api for covid-19.

Rest API end point : https://corona.lmao.ninja/all

The following sample give us overall json data about the world cases.

{
    "updated": 1586834892287,
    "cases": 1925151,
    "todayCases": 1303,
    "deaths": 119699,
    "todayDeaths": 81,
    "recovered": 445017,
    "active": 1360435,
    "critical": 51764,
    "casesPerOneMillion": 247,
    "deathsPerOneMillion": 15,
    "tests": 15154423,
    "testsPerOneMillion": 1944.3,
    "affectedCountries": 212
}
  • https://corona.lmao.ninja/countries

This end point returns a full list of affected countries with details.

{
        "updated": 1586842091929,
        "country": "Denmark",
        "countryInfo": {
            "_id": 208,
            "iso2": "DK",
            "iso3": "DNK",
            "lat": 56,
            "long": 10,
            "flag": "https://raw.githubusercontent.com/NovelCOVID/API/master/assets/flags/dk.png"
        },
        "cases": 6318,
        "todayCases": 0,
        "deaths": 285,
        "todayDeaths": 0,
        "recovered": 2235,
        "active": 3798,
        "critical": 100,
        "casesPerOneMillion": 1091,
        "deathsPerOneMillion": 49,
        "tests": 72099,
        "testsPerOneMillion": 12448
    }

Requirements:

Django Back End & Rest API:

Django Front End (Vue.js)


UI Prototype:

As usual one of the best tools to prototype user interfaces for mobile applications is Adobe XD (Fully recommended). So far the project is intended to retrieve data regarding the cases at global scope and detailed for each country. In addition the target of the app is general population who want to a glimpse of the situation, easy to understand and faster to find.

Based on some references of colors , designs and adobe color wheel , I have defined the main color palette for start to prototype.

The first iteration show a three main interfaces, one for introduce the user to the overall data around the world, with an updated label in order to give feed back to the user, as well there are some bar to give self explanatory of the value of each of the variables : Infections, deaths, recovered and active cases.

The second interface is a list with the full list of affected countries, and details with the flag and a button to see a graphical representation of the current state of the pandemia within the country.

The third is a simple representation of infections , deaths and recovered cases.

The second iteration brings a bit more of design , gradients , user experience and credits.


The next step is to build the ui on flutter and retrieve some data from the server using flutter and the rest api.

Flutter:

  1. Installing

Follow steps at:

https://flutter.dev/docs/get-started/install

Update path (Mac OS):

export PATH=”$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin”

As soon as you can use “flutter” within the command line you will be able to use “flutter doctor” in order to check if everything is good to go. Bear in mind you might need an IDE (personally prefer Visual Studio Code), and all you simulators, SDKs working and updated.

Create project: From terminal , browse your favorite location and type the following command, it will create automatically all the necessary files to run IOS and Android apps.

flutter create new_project_name

Soon the full repository….on github

The App Beta Release:

Try the beta release : Click for download APK.


Play Store:

The play store have suspended the app due the sensitivity of data used within the app. Next time read carefully terms and conditions….

Mauricio Silva