Difference between revisions of "MAM"

From mn/ifi/inf5750
Jump to: navigation, search
(Import page)
(Suggested improvements)
 
(14 intermediate revisions by the same user not shown)
Line 15: Line 15:
  
 
== Architecture ==
 
== Architecture ==
Technologies being used will be:
+
Technologies used:
* React
 
 
* HTML5
 
* HTML5
 
* CSS
 
* CSS
Line 76: Line 75:
 
|}
 
|}
  
== Dividing tasks within the group ==
+
== Development and tasks ==
 +
 
 +
=== Development ===
 +
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.<br>
 +
After that we had a session for deciding upon how the app should look before starting with the development.
 +
 
 +
=== Tasks ===
 
<b>Initial</b><br>
 
<b>Initial</b><br>
Magnus: importer API<br>
+
In the very beginning the tasks was divided like this.<br>
Axel & Morten: decide upon app GUI and implement importer GUI<br>
+
<b>Magnus</b>: importer API<br>
Axel: Wikipage administrator<br>
+
<b>Morten</b>: importer GUI<br>
 +
<b>Axel</b>: Wikipage administrator and importer GUI<br>
 +
 
 +
Later on this changed a bit due to the deadline closing in and tasks being finished.<br>
 +
<b>Magnus</b>: small changes to API and visualizing.<br>
 +
<b>Morten</b>: importer GUI and connecting the GUI to the API<br>
 +
<b>Axel</b>: visualizing and Wikipage administrator.
  
 
<b>Current</b><br>
 
<b>Current</b><br>
Magnus & Axel: visualizing imported data<br>
+
<b>Magnus</b>: visualizing finishing touches<br>
Morten: implement importer GUI<br>
+
<b>Morten</b>: finishing touches to the importer<br>
 +
<b>Axel</b>: finishing touches to the wikipage.<br>
 +
 
 +
In addition to this, all members have been heavily involved in both GUI decisions and also more backend decisions.
  
 
== Design ==
 
== Design ==
Line 93: Line 107:
 
Being inspired by the mock-up we chose to keep some of the functionality, but have it all on one page.
 
Being inspired by the mock-up we chose to keep some of the functionality, but have it all on one page.
  
<b>Visualizing</b><br>
+
<b>Visualize page</b><br>
 
[[File:datasetview.png | 250px]]
 
[[File:datasetview.png | 250px]]
  
 
=== Program flow and screenshots ===
 
=== Program flow and screenshots ===
  
<b>Import page<b><br>
+
<b>Import page</b><br>
[[File:Import1.png | 750px]] <br>
+
Importing data from DHS.
The import page of the app. The user has to choose a country before anything else.
+
{| class="wikitable"
<br>
+
|-
 +
|[[File:Import1.png |none| thumb|User must choose a country before anything else. | 700px]]
 +
|[[File:Import2.png |none| thumb|After choosing country, more options unveil. | 700px]]
 +
|}
  
[[File:Import2.png | 750px]] <br>
+
{| class="wikitable"
After choosing country, the user can choose between datatype, the survey to import data from and also which data to import.
+
|-
<br>
+
|[[File:ImportConfirm.png |none| thumb|User must confirm before importing. | 350px]]
 +
|[[File:ImportUsername.png |none| thumb|User must type their username. | 350px]]
 +
|-
 +
|[[File:ImportPassword.png |none| thumb|User must type their password. | 350px]]
 +
|[[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>
 +
In addition to importing data from DHS, the app also visualize the imported data.
 +
{| class="wikitable"
 +
|-
 +
|[[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.| 350px]]
 +
|-
 +
|[[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.| 350px]]
 +
|}
  
[[File:ImportUsername.png | 500px]][[File:ImportPassword.png | 500px]] <br>
+
== Documented learning ==
[[File:ImportConfirm.png | 500px]] <br>
+
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.<br>
Before importing data, the user has to approve the operation.
+
Because of this, ''some'' of the code might not follow good code practice, but we learned a lot on both while developing.
[[File:ImportFeedback.png | 500px]] <br>
 
After importing data, the user gets informed about how many records that have been imported.
 
<br>
 
  
== Visualizing page ==
+
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.<br>
[[File:View1.png | 250px]][[File:View2.png | 250px]][[File:View3.png | 250px]][[File:View4.png | 250px]]
 
 
 
== Documented learning ==
 
  
 
== Suggested improvements ==
 
== Suggested improvements ==
 +
=== Testing ===
 +
Better and more testing. As of now we currently do not have that many tests and the app is considered to run in a "happy day scenario".
 +
=== Refactoring of code ===
 +
As mentioned our team had little experience with JavaScript when we started and the code written is something that reflects that.<br>
 +
The code should be refactored a bit to follow the best practices, especially the importer API.
 +
=== Include paging as a functionality ===
 +
Currently now the data imports everything on one page.
 +
=== GUI ===
 +
The app is currently not that good looking and needs an improvement on the GUI.
  
 
== Repository ==
 
== Repository ==

Latest revision as of 17:00, 2 December 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 used:

  • 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

Development and tasks

Development

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.

Tasks

Initial
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.

Current
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.

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.

Visualize page
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 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

Testing

Better and more testing. As of now we currently do not have that many tests and the app is considered to run in a "happy day scenario".

Refactoring of code

As mentioned our team had little experience with JavaScript when we started and the code written is something that reflects that.
The code should be refactored a bit to follow the best practices, especially the importer API.

Include paging as a functionality

Currently now the data imports everything on one page.

GUI

The app is currently not that good looking and needs an improvement on the GUI.

Repository

https://github.com/Razni/MAM

Sample app