Difference between revisions of "The underachievers"

From mn/ifi/inf5750
Jump to: navigation, search
m (Distribution of task)
m (Suggested improvements to the DHIS API)
 
(5 intermediate revisions by 2 users not shown)
Line 30: Line 30:
  
 
== Technologies and Frameworks ==
 
== Technologies and Frameworks ==
Angular-CLI
 
 
 
HTML 5  
 
HTML 5  
  
Line 39: Line 37:
  
 
Angular2
 
Angular2
 +
 +
Angular-CLI
  
 
JSON
 
JSON
  
angular2-highcharts
+
ng2-datatable
  
Bootstrap
+
Bootstrap  
  
 
We chose Angular2 because we liked the idea of one framework for everything. This is our first web  
 
We chose Angular2 because we liked the idea of one framework for everything. This is our first web  
Line 95: Line 95:
  
 
== Distribution of task ==
 
== Distribution of task ==
We have no set distribution of tasks yet.
+
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.
  
 
== Repository ==
 
== Repository ==
Line 103: Line 103:
  
 
== Suggested improvements to the DHIS API ==
 
== Suggested improvements to the DHIS API ==
 +
 +
== Screenshots and work flow ==
 +
[[File:TU Home.png|left|thumb|Home page with carousel explaining the apps features.]]
 +
[[File:TU datastore1.png|left|thumb|Datastore: Choose app]]
 +
[[File:TU datastore2.png|alt=|left|thumb|Datastore: Once an app is chosen, its keys show up in a list. Each key is clickable. New lets you create new keys.]]
 +
[[File:TU datastore3.png|left|thumb|Datastore: key is clicked, value shows up in a editable box with meta-data on the left side.]]
 +
[[File:TU overview1.png|left|thumb|Overview: Shows all keys  from all apps in a users namespace with a choise to show 5, 10 or 25 keys per page.]]
 +
[[File:TU overview2.png|left|thumb|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.]]

Latest revision as of 14:50, 30 November 2016

Overview

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

HTML 5

CSS

TypeScript

Angular2

Angular-CLI

JSON

ng2-datatable

Bootstrap

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.

Milestones

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.

Repository

GitHub

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.