This repository hosts the frontend code of the covid-self-report project.
This project is based on Vue.js and vue-cli, using Argon design template from Creative Tim.
For front-end developers, please check the develop section section.
The following things are needed:
- A domain name (e.g. covid-self-report.ch)
- A hosting server (we are using firebase, but it's not mandatory)
- An instance of self-report-backend running (or develop your own backend)
- A reCAPTCHA API configuration
- A reports data source
- A geocoding data source
- URLs of the social platforms that have to be linked (share buttons)
- A development environment to build the front-end
- Go to https://www.google.com/recaptcha/admin/create
- Fill th form :
- Use reCAPTCHA version 3
- Add your domain name (also add 'localhost' if used for development), if you're hosting the frontend on Firebase, you'll need to know its domain name too
- Send
- Copy the site key, it will be useful for the frontend configuration
The reports data source is an online CSV file containing a summary of the reports by location, summed by status.
You can check the format here.
A second file containing the last update time of the data source has also to be provided (last_update.txt). It's an ASCII text file containing the date in ISO format.
The report data source is generated by consolidation scripts in the backend.
This file must available online with a very high uptime and huge load capacity. It is used for the visualization and will be downloaded by each user.
The geocoding data source is an online CSV file containing, for each location, the name of the location and the geographical coordinates.
You can check the format here.
The geocoding data source has to be set up for each country.
This file must available online with a very high uptime and huge load capacity. It is used for the visualization and will be downloaded by each user.
The frontend uses vue-cli. Please refer to the official documentation for setup instructions.
- Clone this repository
- Create a
.env
file based on the.env.example
file and fill it with your configuration. See below to learn more about the configuration. - Run
npm run serve
to test locally andnpm run build
to build application
- Setup the data source and geocoding data URLs
- Set the map default position and zoom level
- Set the recaptcha key (not the secret) with the value from the reCAPTCHA console.
- List the languages you need
- Set the github repository of your fork for the issues reporting
- Set the social links for the desired platforms
- Configure the URL for the backend endpoint to your backend instance.
If you want to develop on the front-end, you can set-up the configuration with existing data sources from an already running instance.
For example, to point to the Swiss data source, put this in your .env file:
VUE_APP_VISU_DATA_SOURCE_URL=https://raw.githubusercontent.com/ch-covid-19/datasets/master
VUE_APP_VISU_GEOCODE_URL=https://raw.githubusercontent.com/ch-covid-19/datasets/master/geocoding.csv
VUE_APP_VISU_LAST_UPDATE_URL=https://raw.githubusercontent.com/ch-covid-19/datasets/master/last_update.txt
Translations are done with the online POEditor service.
The process for translators is the following :
- New keys are added in the frontend by the developers
- New keys are imported in POEditor (done automatically, but with manual trigger, responsibility to be defined)
- Translators are informed of the new keys by notifications
- Translators translates the new keys in POEditor
- Translations are exported in the frontend (done automatically, but with manual trigger, responsibility to be defined)
- The next release includes the new translations
Contributions are welcome through merge requests.
This section will be updated soon...