Difference between revisions of "BHJS"

From mn/ifi/inf5750
Jump to: navigation, search
m
 
(20 intermediate revisions by 4 users not shown)
Line 1: Line 1:
= <span style="font-size: 12px">List of group members</span> =
+
= List of Group Members =
  
 
*Bård Winther (baardew) baardew@ifi.uio.no
 
*Bård Winther (baardew) baardew@ifi.uio.no
Line 6: Line 6:
 
*swati sharma (swatis) swatis@ifi.uio.no
 
*swati sharma (swatis) swatis@ifi.uio.no
  
= Project Suggestions =
 
  
<span style="background-color:yellow">This section is just a bunch of notes that should be further developed or organized better.</span>
 
 
==  ==
 
  
 
= Application Structure =
 
= Application Structure =
Line 26: Line 22:
 
Javascript, AngularJS, HTML and CSS. JSON for rest communication.
 
Javascript, AngularJS, HTML and CSS. JSON for rest communication.
  
TDD is a must: Protractor or alternatively QUnit [UNRESOLVED]
+
TDD is a must: QUnit is currently used, but if it proves to be insufficient then Protactor may be an option to add as well. During development, we found no need for additional testing, as angular was best inspected manually.
  
 
Attempt to solve the problem with a generic implementation that parses any json object and displays it on screen.
 
Attempt to solve the problem with a generic implementation that parses any json object and displays it on screen.
  
== GUI Layout: ==
+
CSS specific for every view, check out: [http://plnkr.co/edit/oWw3QUc9P4leo0gO5EzL?p=preview http://plnkr.co/edit/oWw3QUc9P4leo0gO5EzL?p=preview]
 +
 
 +
=== GUI Layout: ===
 +
 
 +
The GUI laytout describes the three different methods of viewing the content. Each view is switchable in the same main page. Presented below is the mockup, see next section for actual results.
 +
 
 +
[[File:BHJS Structure.png|500px]]
 +
 
 +
=== <u><span style="color: rgb(51, 51, 51); font-family: Arial, Georgia, 'Lucida Grande', Verdana, Helvetica, sans-serif">Api index (listing the resources)</span></u> ===
 +
<p style="text-align: justify;"><span style="font-family:arial,helvetica,sans-serif;"><span style="white-space: pre-wrap; font-size: small; line-height: 1; background-color: transparent;">As the name implies this is index view for all api’s from resources.json (from DHIS server).</span></span></p><p style="text-align: justify;"><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size: small; line-height: 1; white-space: pre-wrap; background-color: transparent;">It loads resources dynamically by calling getRemoteJSON() call defined in jsoncommunicator.js</span></span></p><p style="text-align: justify;"><span style="font-family:arial,helvetica,sans-serif;"><span style="white-space: pre-wrap; font-size: small; line-height: 1; background-color: transparent;">All the resources are listed in a list with search filter of angular.js enabled.</span></span></p><p style="text-align: justify;"><span style="font-family:arial,helvetica,sans-serif;"><span style="white-space: pre-wrap; font-size: small; line-height: 1; background-color: transparent;">Every listed api &nbsp;is linkable, means link from each api will direct to resource view of that particular resource.</span></span></p>
 +
 
 +
=== <span style="color: rgb(51, 51, 51); font-family: Arial, Georgia, 'Lucida Grande', Verdana, Helvetica, sans-serif">Resource view (list of objects)</span> ===
 +
 
 +
This view shows a list of all objects in the selected resource.
 +
 
 +
=== <span style="color: rgb(51, 51, 51); font-family: Arial, Georgia, 'Lucida Grande', Verdana, Helvetica, sans-serif">Object view:</span> ===
 +
 
 +
This view presents detailed <span style="font-family:arial,helvetica,sans-serif;">information </span>about a specific chosen object.
 +
 
 +
It consists of several tables <span style="font-size:small;">presented </span>as one of the following:
  
The GUI laytout describes the three different methods of viewing the content. Each view is switchable in the same main page.
+
*Table as a list of key and values.
 +
*Table containing columns and rows.
  
=== <u><span style="color: rgb(51, 51, 51); font-family: Arial, Georgia, 'Lucida Grande', Verdana, Helvetica, sans-serif;">Api index (listing the resources)</span></u> ===
+
The view itself is structured as 4 components as in the order below:
  
=== <u><span style="color: rgb(51, 51, 51); font-family: Arial, Georgia, 'Lucida Grande', Verdana, Helvetica, sans-serif;">resource view (list of objects)</span></u> ===
+
&nbsp; '''1)&nbsp;'''Detailed general information: Date of birth, last updated, email etc.
  
=== <u><span style="color: rgb(51, 51, 51); font-family: Arial, Georgia, 'Lucida Grande', Verdana, Helvetica, sans-serif;">object view (info about a specific object)</span></u> ===
+
&nbsp; '''2) '''Access rights: 6 boolean variables defined as true or false.
  
== Questions: ==
+
&nbsp; '''3)''' Groups: A set of groups that is related to the object.
  
Could not find the API for data model fields ([https://www.dhis2.org/doc/snapshot/en/user/html/apes04.html https://www.dhis2.org/doc/snapshot/en/user/html/apes04.html])?
+
&nbsp; '''4)''' Related objects or additional information.
 +
 
 +
'''1)''' and '''4)''' are presented as lists, whereas '''2)''' and '''3)''' have rows and columns.&nbsp;
 +
 
 +
In addition, the two first components are always present for every object. The last two, however, are optional and there may be several groups for each object.
  
 
= Summary of Requirements =
 
= Summary of Requirements =
Line 51: Line 71:
 
#User friendly, which implies: no need for direct keyboard input, all information readily avaiable (no hidden content) and simple to retrace steps
 
#User friendly, which implies: no need for direct keyboard input, all information readily avaiable (no hidden content) and simple to retrace steps
 
#The program should deal with errors and misuse correctly and elegantly (in other words, not crash if someone does something un-expected)
 
#The program should deal with errors and misuse correctly and elegantly (in other words, not crash if someone does something un-expected)
 +
 +
  
 
= Time Schedule =
 
= Time Schedule =
Line 61: Line 83:
 
*&nbsp; 3. dec&nbsp;: hard deadline
 
*&nbsp; 3. dec&nbsp;: hard deadline
  
= How you are dividing tasks within the group =
+
 
 +
 
 +
= Task Division =
  
 
'''baardew:''' backend controller and configuration + additional frontend where required
 
'''baardew:''' backend controller and configuration + additional frontend where required
  
'''henriktl:''' ?
+
'''henriktl:''' Resource list view
 +
 
 +
'''jonsandn:''' Object view
  
'''jonsandn:''' ?
+
'''swatis:''' Api index view
  
'''swatis:''' ?
+
= Screenshots and Screen Flows =
  
= Screenshots and screen flows =
+
=== API index ===
  
= Documented learning during project =
+
=== Resource view ===
  
= Suggested improvements to APIs etc =
+
[[File:BHJS Resourceview.png|500px]]
  
= Link to repository =
+
=== Object view ===
 +
 
 +
= Documented Learning During Project =
 +
 
 +
*Learned to configure AngularJS views and linking it with other project resources.
 +
*Improved Javascript and angular experience.
 +
*Learned the DHIS API.
 +
 
 +
= Suggested Improvements =
 +
 
 +
*Display the path of clicks for easier navigation. Not included as most of the time the path taken is quite shallow.
 +
 
 +
= Link to Repository =
  
 
gitolite@git.uio.no:inf5750/baardew/dhis_bhjs
 
gitolite@git.uio.no:inf5750/baardew/dhis_bhjs
  
= Download link to sample web app or Android app =
+
 
 +
 
 +
= Download Link to Sample Web App or Android App =
 +
 
 +
&lt; NOT APPLICABLE &gt;
 +
 
 +
= Questions and Suggestions: =
 +
 
 +
While the DHIS API is intuitive and easy to follow, it would be nice to have one place where the content of each module is described. Reffering to the question: "Could not find the API for data model fields ([https://www.dhis2.org/doc/snapshot/en/user/html/apes04.html https://www.dhis2.org/doc/snapshot/en/user/html/apes04.html])"

Latest revision as of 18:14, 10 December 2014

List of Group Members

  • Bård Winther (baardew) baardew@ifi.uio.no
  • Henrik Tufte Lien (henriktl) tuftelien@gmail.com
  • Jonas Sandnes (jonsandn) jonsandn@ifi.uio.no
  • swati sharma (swatis) swatis@ifi.uio.no


Application Structure

For the remainder of this document "backend" would refer to application controller and other javascript that is not used directly with presentation. Likewise, "fronend" denote everything connected to or is GUI elements.

File layout

Organization of program structure using MVVM:

Actual architecture.png

Technologies:

Javascript, AngularJS, HTML and CSS. JSON for rest communication.

TDD is a must: QUnit is currently used, but if it proves to be insufficient then Protactor may be an option to add as well. During development, we found no need for additional testing, as angular was best inspected manually.

Attempt to solve the problem with a generic implementation that parses any json object and displays it on screen.

CSS specific for every view, check out: http://plnkr.co/edit/oWw3QUc9P4leo0gO5EzL?p=preview

GUI Layout:

The GUI laytout describes the three different methods of viewing the content. Each view is switchable in the same main page. Presented below is the mockup, see next section for actual results.

BHJS Structure.png

Api index (listing the resources)

As the name implies this is index view for all api’s from resources.json (from DHIS server).

It loads resources dynamically by calling getRemoteJSON() call defined in jsoncommunicator.js

All the resources are listed in a list with search filter of angular.js enabled.

Every listed api  is linkable, means link from each api will direct to resource view of that particular resource.

Resource view (list of objects)

This view shows a list of all objects in the selected resource.

Object view:

This view presents detailed information about a specific chosen object.

It consists of several tables presented as one of the following:

  • Table as a list of key and values.
  • Table containing columns and rows.

The view itself is structured as 4 components as in the order below:

  1) Detailed general information: Date of birth, last updated, email etc.

  2) Access rights: 6 boolean variables defined as true or false.

  3) Groups: A set of groups that is related to the object.

  4) Related objects or additional information.

1) and 4) are presented as lists, whereas 2) and 3) have rows and columns. 

In addition, the two first components are always present for every object. The last two, however, are optional and there may be several groups for each object.

Summary of Requirements

List is in prioritized order

  1. Display every possible path obtained by click-through of API (in other words, every link should be "followable")
  2. User friendly, which implies: no need for direct keyboard input, all information readily avaiable (no hidden content) and simple to retrace steps
  3. The program should deal with errors and misuse correctly and elegantly (in other words, not crash if someone does something un-expected)


Time Schedule

These milestones are guidelines only, except for 3rd December.

  •   1. nov : design layout finished
  •   8. nov : static html layout presentable
  • 29. nov : main work done
  •   3. dec : hard deadline


Task Division

baardew: backend controller and configuration + additional frontend where required

henriktl: Resource list view

jonsandn: Object view

swatis: Api index view

Screenshots and Screen Flows

API index

Resource view

BHJS Resourceview.png

Object view

Documented Learning During Project

  • Learned to configure AngularJS views and linking it with other project resources.
  • Improved Javascript and angular experience.
  • Learned the DHIS API.

Suggested Improvements

  • Display the path of clicks for easier navigation. Not included as most of the time the path taken is quite shallow.

Link to Repository

gitolite@git.uio.no:inf5750/baardew/dhis_bhjs


Download Link to Sample Web App or Android App

< NOT APPLICABLE >

Questions and Suggestions:

While the DHIS API is intuitive and easy to follow, it would be nice to have one place where the content of each module is described. Reffering to the question: "Could not find the API for data model fields (https://www.dhis2.org/doc/snapshot/en/user/html/apes04.html)"