Difference between revisions of "The underachievers"
m (→Pictures from workflow) (Tag: Visual edit) |
m (→Suggested improvements to the DHIS API) (Tag: Visual edit) |
||
Line 106: | Line 106: | ||
== Screenshots and work flow == | == Screenshots and work flow == | ||
[[File:TU Home.png|left|thumb|Home page with carousel explaining the apps features.]] | [[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 15:50, 30 November 2016
Contents
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
Old(if you want to see commits done before refactoring)