From mn/ifi/inf5750
Jump to: navigation, search

Group Project - Web API HTML-view browser

This page will describe the progress and end result of the ANNK group in INF5750 / Fall 2014 group. Due to the very nature of this wiki-page, its contents will change often. Please refer to the github repository for the latest documentation.

Group members

  • Kristofer Selbekk
  • Nasibeh Tajik
  • Nugroho Sujatmiko

Summary of requirements

  • Make a HTML based API browser
  • Need to be a web application
  • Based on the JSON representation

For more detail on the features we plan to implement, please check the following link.


We plan to use the following technologies for the project:

  • Build and scaffolding tools: Bower, Grunt, Yeoman
  • Frontend framework : Angular, Bootstrap

For more detail on the architecture please check the following link.

This project will communicate with DHIS2 Web API using DHIS2 web-app. How DHIS2 web-app works is explained in the following link.

Time schedule

  • Milestone 1 (November 1st):*This page
    • Document structure and technology choices
    • Set up basic DHIS web app (hello world)
  • Milestone 2 (November 15th):*First barebone version
    • Static HTML
    • Uploadable as a DHIS2 web app
  • Milestone 3 (November 30th):*Full working version
    • Completed documentation
    • Completed WIKI page

Presentation on December 3rd, due to travelling team members.

Notes on progress

The first milestone was reached within the first day of this assignment. We now have a basic angular js application that doesn't fetch data, but does show a filterable list of endpoints and details about a single one as well.

On Nov 6th we had working application already, one week ahead of the second milestone. The application has the capabilty to fetch the json data from DHIS2 server. The application has list view (which is the root endpoint to reflect /api/resourse.json) and single view (which is the dynamic view to reflect the individual endpoints detail). The single view displays the endpoint detail including the interconnected endpoints which are browseable by following the links.

On Nov 15th we added feature to display content of chart, report, maps and map-views as image or pdf. 

On Nov 23rd we styled the view with nicer looks. The chart, report, maps are now hidden by default and can be toggled to preview mode.

On Nov 25th we separated between single view/controller and detail view/controller for better modularity. The single view/controller is like list format for one category of resource. Whereas the detail view/controller is the detail content of an individual object. Earlier on we combined the two.

On Nov 26th some more styling were added such as adding home button, header and footer re-styling.

Task distribution

We are using Trello as a project planning tool. Please check out our board at Trello.

The task is picked up voluntarily based on member availability and interest.

One portion of work can be worked on by two members in rotation, one after another.

Notes: All the team members are working full time. As such we met physically very less and relied more on virtual collaboration, mainly Skype and email (aside from Trello and Github itself).

Screenshots and application flow

Application can be accessed from ANNK group server [1] 

You can look at the basic application flow in this document. Screenshots will be updated once we finished the design and wireframes.

Illustrative application & use-case flow.

ANNK user app flow.JPG

Screenshots as per Nov 30th.

  • First list view (default home page)

ANNK list view.JPG

There is search bar that we can use to do quick search as picture below

ANNK search.JPG

  • Single view per resource category

ANNK single view.JPG

  • Detail view per resource object
  • ​Standard

ANNK detail view.JPG

  • With Chart

ANNK detail chart.JPG

  • With Map

ANNK detail map.JPG

  • With Report

ANNK detail report.JPG

Documented learning