The underachievers

From mn/ifi/inf5750
Revision as of 15:50, 30 November 2016 by (talk | contribs) (Suggested improvements to the DHIS API)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search


Project B Data store Manager App

Data store Manager App, browse and update the values in the DHIS2 Data Store.

The Data store is used by developers to store arbitrary data for their apps. Access to the data is

limited to the users namespace and thus only accessed through the users account. Our task will

be to make a user friendly presentation and navigation of this data, and if there is time, a way to keep

and audit trail of changes. There will also be a visualization of statistics regarding the data.

  • Nice browsing of JSON (pretty print, collapse/expand JSON)
  • Write (POST) of key/values
  • Update (PUT) of key/values
  • Listing of namespaces, listing of keys under namespaces
  • Follow DHIS layout style with material UI and use React
  • Support for both system and user data store
  • Handled encrypted values (ie. not display the values, but rather an explanation)

List of members

Johan Graucob E-Mail

Kenneth Frisvold E-mail

Morten Fliflet Johannesen E-mail

Technologies and Frameworks









We chose Angular2 because we liked the idea of one framework for everything. This is our first web

development project and the share number of different approaches using React + any number of libraries made

it abit hard to get a overview. Angular2 was more appealing with the "one way to do things" approach, but we have some

concerns about the maturity of the framework, possible lack of documentation etc. JSON will be used since this is the value

data type of the Data store. We decided to refactor the project using Angular-CLI to generate the project, because we wanted to

make the structure even more clear and it makes creating tests easier as we can follow the Angular2 documentation on testing.

We also chose to use Bootstrap to help us build a clean and easy to understand user interface.


Preliminary plan, might be object to changes.

October 28th

Document features and architecture on wiki (Done)

Model basic design (Done)

November 4th

Code basic design (Done)

Make API calls to get the data from the data store (Done)

Make unit tests(If we have time)

November 11th

Unit tests done

Represent data inside app (Done)

November 18th

Create/update data (Done)

Visualization of data (Mostly done)

November 25th

Log of changes(if we have time) Final touches

November 27th

Final delivery

Documented learning

As said earlier in the wiki, we had our doubt about Angular2's maturity as a framework, but all three of us ended up really liking the work flow and simplicity of it. The biggest problem we faced was that you could often not use answers to questions we had from google searches if they were older then a couple of months, since a lot changed with the official release of Angular2. We also gained more knowledge in the importance of planning the project thoroughly beforehand, trying to split the whole project into manageable parts and estimate time needed to complete them. The time estimation was hard since it is our first web application project and our first Angular2 project as well. Having a slack chat where we continuously discussed how we should approach the different parts of the project and asking each other for help and input when needed was immensely helpful and made it possible to keep everyone on the same page when decisions about the project had to be made.

Distribution of task

All three of us discussed and decided on the layout of the page. Morten did the routing, Morten and Kenneth did the dataStore and userDataStore and implemented the design we agreed on. Johan tried to find out how to make tests, and made a few, he also worked on the statistics page and updated the wiki. We then decided to scrap the statistics and make a searchable overview of the keys and values instead.



Old(if you want to see commits done before refactoring)

Suggested improvements to the DHIS API

Screenshots and work flow

Home page with carousel explaining the apps features.
Datastore: Choose app
Datastore: Once an app is chosen, its keys show up in a list. Each key is clickable. New lets you create new keys.
Datastore: key is clicked, value shows up in a editable box with meta-data on the left side.
Overview: Shows all keys from all apps in a users namespace with a choise to show 5, 10 or 25 keys per page.
Overview: filter box can be used to show only keys from apps that match the input. Keys can also be sorted by clicking the column titles.