Difference between revisions of "MAM"

From mn/ifi/inf5750
Jump to: navigation, search
(Program flow and screenshots)
(Program flow and screenshots)
Line 99: Line 99:
  
 
<b>Import page</b><br>
 
<b>Import page</b><br>
 
+
Importing data from DHS.
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
Line 108: Line 108:
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
|[[File:ImportUsername.png |none| thumb|User must type their username. | 500px]]
+
|[[File:ImportUsername.png |none| thumb|User must type their username. | 350px]]
|[[File:ImportPassword.png |none| thumb|User must type their password. | 500px]]
+
|[[File:ImportPassword.png |none| thumb|User must type their password. | 350px]]
 
|-
 
|-
|[[File:ImportConfirm.png |none| thumb|User must confirm before importing. | 500px]]
+
|[[File:ImportConfirm.png |none| thumb|User must confirm before importing. | 350px]]
|[[File:ImportFeedback.png |none| thumb|When data have been imported, the user gets informed about how many records that got imported.| 500px]]
+
|[[File:ImportFeedback.png |none| thumb|When data have been imported, the user gets informed about how many records that got imported.| 350px]]
 
|}
 
|}
  
 
<b>Visualizing page</b><br>
 
<b>Visualizing page</b><br>
 +
In addition to importing data from DHS, the app also visualize these.
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
|[[File:View1.png |none| thumb|Before the user clicks on show imported data.| 750px]]
+
|[[File:View1.png |none| thumb|Before the user clicks on show imported data.| 350px]]
|[[File:View2.png |none| thumb|When the user has clicked on show imported data and there is data there.| 750px]]
+
|[[File:View2.png |none| thumb|When the user has clicked on show imported data and there is data there.| 350px]]
 
|-
 
|-
|[[File:View3.png |none| thumb|After clicking visualize, the data gets visualized in bar graphs.| 750px]]
+
|[[File:View3.png |none| thumb|After clicking visualize, the data gets visualized in bar graphs.| 350px]]
|[[File:View4.png |none| thumb|The bottom page shows what indicators that have been visualized and also what country the different colors correspond to.| 750px]]
+
|[[File:View4.png |none| thumb|The bottom page shows what indicators that have been visualized and also what country the different colors correspond to.| 350px]]
 
|}
 
|}
  

Revision as of 22:13, 28 November 2016

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.

Architecture

Technologies being used will be:

  • React
  • HTML5
  • CSS
  • JavaScript

Milestones

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
Monday
Tuesday
Wednesday
Thursday 14:00-16:00
Friday

Dividing tasks within the group

Initial
Magnus: importer API
Axel & Morten: decide upon app GUI and implement importer GUI
Axel: Wikipage administrator

Current
Magnus & Axel: visualizing imported data
Morten: implement importer GUI

Design

First draft

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

Visualizing
Datasetview.png

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 type their username.
User must type their password.
User must confirm before importing.
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 these.

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

Suggested improvements

Repository

https://github.com/Razni/MAM

Sample app