From mn/ifi/inf5750
Revision as of 20:28, 29 November 2016 by (talk | contribs) (Program flow and screenshots)

Jump to: navigation, search

Group members

  • axelhha
  • magnuwo
  • mortewl

Project details

We chose task D: importing, matching and visualizing.

In this project we will make a client side application for:

  • Fetch datasets from the Demographic and Health Survey (DHS) external API.
  • Match data from the datasets with the data in DHIS2 and add the data if it does not already exist.
  • Visualize the datasets that have been imported.


Technologies being used will be:

  • React
  • HTML5
  • CSS
  • JavaScript


Milestone 1 - 27.10.2016

First group meeting

  • Decide upon architecture and how the app should behave.
  • Play around with DHIS2.
  • Start reading DHIS2 documentation.

Milestone 2 - 02.11.2016

Second group meeting

  • Propose GUI
  • Divide tasks
  • First app draft

Milestone 3 - 21.11.2016

Import API finished
The API being used to import the data from DHS to DHIS2 must be fully functional.

Milestone 4 - 23.11.2016

Last feature implemented
No more features will be added after this milestone.

Milestone 5 - 25.11.2016

App finished
The app should be completely finished.

Milestone 6 - 27.11.2016

Final delivery

Time schedule

No specific times to work on, only a mandatory meeting each Thursday where we show what we have done since last meeting and also discuss and delegate tasks. If a member finishes a task early, they get a new task assigned.

Day Time
Thursday 14:00-16:00

Development and tasks


Our group has had a regular meeting each Thursday. In the beginning the meeting consisted of discussing, trying to find out what to do and how to do it.
After that we had a session for deciding upon how the app should look before starting with the development.


In the very beginning the tasks was divided like this.
Magnus: importer API
Morten: importer GUI
Axel: Wikipage administrator and importer GUI

Later on this changed a bit due to the deadline closing in and tasks being finished.
Magnus: small changes to API and visualizing.
Morten: importer GUI and connecting the GUI to the API
Axel: visualizing and Wikipage administrator.

Magnus: visualizing finishing touches
Morten: finishing touches to the importer
Axel: finishing touches to the wikipage.

In addition to this, all members have been heavily involved in both GUI decisions and also more backend decisions.


First draft

Import page
Being inspired by the mock-up we chose to keep some of the functionality, but have it all on one page.

Visualize page

Program flow and screenshots

Import page
Importing data from DHS.

User must choose a country before anything else.
After choosing country, more options unveil.
User must confirm before importing.
User must type their username.
User must type their password.
When data have been imported, the user gets informed about how many records that got imported.

Visualizing page
In addition to importing data from DHS, the app also visualize the imported data.

Before the user clicks on show imported data.
When the user has clicked on show imported data and there is data there.
After clicking visualize, the data gets visualized in bar graphs.
The bottom page shows what indicators that have been visualized and also what country the different colors correspond to.

Documented learning

The knowledge of both frontend and JavaScript in particular was very low in the group when we started, two of the members had no prior experience with either one before taking this course.
Because of this, some of the code might not follow good code practice, but we learned a lot on both while developing.

We were also unfamiliar with both the DHS api and DHIS2 in general. Because of this we have made choices when matching data from one API to another which might not be entirely correct.

Suggested improvements


Sample app