Difference between revisions of "The underachievers"

From mn/ifi/inf5750
Jump to: navigation, search
m (Architecture)
m (Suggested improvements to the DHIS API)
 
(11 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
== Overview ==
 
== Overview ==
  
=== project B Data store Manager App ===
+
=== Project B Data store Manager App ===
Data store Manager App Browse and update the values in the DHIS2 Data Store.
+
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
 
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  
+
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
 
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.
 
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 ==
 
== List of members ==
Line 28: Line 37:
  
 
Angular2
 
Angular2
 +
 +
Angular-CLI
  
 
JSON
 
JSON
  
Visualisation tool(?)
+
ng2-datatable
 +
 
 +
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 37: Line 50:
 
development project and the share number of different approaches using React + any number of libraries made
 
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 have some  
+
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
  
concerns about the maturity of the framework, possible lack of documentation etc.We have not decided on technology
+
data type of the Data store. We decided to refactor the project using Angular-CLI to generate the project, because we wanted to
  
for the visualisation of data yet, but try to focus on geting the barebone up and running first.  
+
make the structure even more clear and it makes creating tests easier as we can follow the Angular2 documentation on testing.
  
JSON will be used since this is the value data type of the Data store.
+
We also chose to use Bootstrap to help us build a clean and easy to understand user interface.
  
 
== Milestones ==
 
== Milestones ==
 +
Preliminary plan, might be object to changes.
  
 
===  October 28th ===
 
===  October 28th ===
Document features and architecture on wiki.
+
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 ===
 
=== November 27th ===
Final delivery.
+
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 ==
 
== 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 ==
[https://github.com/bajill/inf5750-project GitHub]
+
[https://github.com/bajill/datastore-app GitHub]
 +
 
 +
[https://github.com/bajill/inf5750-project Old(if you want to see commits done before refactoring)]
  
 
== 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.