The “Covid visualizer” application is a mobile application that helps the user to visualize the latest data on the status of the Covid-19 virus. Through the application, the user can visualize the state of the country in which it is located, as well as the state of each country in the world, along with the state Romania specifically.
In the application are provided general information, tips related to the virus Covid-19 and news. All of the above are offered in Romanian and English.
The user can use the application without logging in, as the application does not offer anything personalized. Only access to the location is used to provide data from the country in which it is located the user.
The mobile application was written in react-native and the backend server was written in Python using Flask. The database used is SQLite.
A demo presentation can be found here.
The mobile application communicates with:
- the flask server to retrieve the covid data (running on port 2020)
- a news api to retrieve latest covid news
The Flask Server has 2 processes (with multiprocessing package) in order to update its data.
The latest data is updated by 1 process each 20 minutes and the brief history data is updated by the another process each 6 hours.
Note: Romania's data is parsed using the mozzila geckodriver (Scripted page is loaded, then html is parsed)
When starting the application, it will request user's location. If user accepts then in this page will be displayed user's country location information about covid and the top 15 countries sorted by active cases. Otherwise, only the top-15 countries will be displayed.
The analytics page retrieves and displays latest covid data.
The retrieved data are put in the Async Storage and are updated only if they are older than an hour.
The package used for maps is react-native-maps
The maps are displayed using a geojson parsed for both world country maps and romania map using the python script located in scripts folder.
The gradient used is:
The gradient can be changed in MapWorldColorService.js (World Map) and MapRoCountyColorService (Romania County Map).
Both maps are displayed after the number of active cases.
- The world map is scaled using a logarithmic scale
- The Romania map is scaled using a linear scale
When you press on a country in the World Map, its location (latitude and longitude) will be sent to the backend and retrieved its data. If the country is invalid, a pop-up message will be displayed.
The package used for maps is Victory Native
Statistics displayed:
- last 3 days statistics (new deaths, new recovered, new actives)
- last 3 days overall statistics (total deaths, total recovered, total actives)
- last 3 days number of tests
News are retrieved from a news API with covid related topic in english and in romanian.
Fetched news are put in Async Storage and are used next time accessing the news page if they are not older than an hour.
Note: If the user wants to get the latest news (not from the async storage), the user can swipe down and it will update the async storage.
Here are displayed useful information about covid-19 in english and in romanian.
First you will need to install expo.
Second, you will need to create a mobile emulator.
In order to run the app on your own device (not on an emulator), you will need to change the Backend IP Address from WebInfo.js to your private local machine IP. (example 192.168.1.113)
In order to run the application, you need to:
- Run the python3 server
pip install -r requirements.txt(it's recommended to create a python virtual environment first)python3 app.py(first run will take longer because database is being created)
Note: Next time you run the server comment the line 10 from app.py: init_database(...) in order to speed up the server's start, as the creation of the database is no longer required.
- Run the react-native app
npm install(on the first start)npm start