Difference between revisions of "Stack workers"

From mn/ifi/inf5750
Jump to: navigation, search
 
(46 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
== Overview ==
 
== Overview ==
  
Data Elements Bulk Editor is a DHIS webapp. It enables administrators, and users, to manage data fields associated with forms and various value types in DHIS.  The app is visually designed in a similar manner to the current Data Element Editor, however, under the hood it is a faster, lighter, and more system-independant app.  
+
Data Elements Bulk Editor is a DHIS webapp. It enables administrators, and users, to manage data fields associated with forms and various value types in DHIS.  The app is visually designed in a similar manner to the current Data Element Editor, however, under the hood it is a faster, lighter, and more server-independant app.
  
 
When we started this project the goal was to make a smarter editor that allows for quick search and edit operations on form data fields. 
 
When we started this project the goal was to make a smarter editor that allows for quick search and edit operations on form data fields. 
Line 20: Line 20:
  
 
*Filtering fields
 
*Filtering fields
*Sort result set based on aggreate and tracker
+
*<strike>Sort result set based on aggregate and tracke</strike>r (Not implemented yet)
*Edit fields without leaving page
+
*Edit fields without leaving page (Editing is not feature complete yet)
*Add and remove fields
+
*Add and remove fields (Add is not implemented yet)
 
*Detailed view of fields
 
*Detailed view of fields
 +
*Responsive layout that adapts to screen size
 +
 +
=== Testbeds ===
 +
 +
*Chrome ver:&nbsp;<span style="color: rgb(48, 57, 66); font-family: 'Segoe UI', Tahoma, sans-serif;">39.0.2171.71</span>
 +
*<span style="color: rgb(48, 57, 66); font-family: 'Segoe UI', Tahoma, sans-serif;">FireFox ver:&nbsp;</span>32.0.3
 +
*Internet Explorer ver: 11.0.9600.17416
 +
*IE Mobile ver: 11
 +
*Safari ver: 5.1.7
 +
*Safari Mobile ver:&nbsp;?
  
 
== Architechture and Technologies ==
 
== Architechture and Technologies ==
  
Technologies we use:
+
=== Application Framework ===
  
 
*HTML5, CSS, JS
 
*HTML5, CSS, JS
*jQuery
 
 
*Bootstrap
 
*Bootstrap
*Angular(?)
+
*Angular
 +
*UI-Angular
 +
*UI-Bootstrap
 +
 
 +
=== Developers' Tools ===
 +
 
 +
*Webstorm
 +
*Sublime Text 3
 +
*Chrome, Safari, IE, Firefox (debugging with integrated tools, and testing)
 +
*OS X, Ubuntu, Windows 7 & 8
 +
*Git w/ Github
  
 
=== HTML5, CSS and JS ===
 
=== HTML5, CSS and JS ===
Line 41: Line 60:
  
 
We primarily rely on angularJS for our project framework. We chose this technology because we wanted our app to be a single page application. The result is that all the pages are build as partial HTML templates and we inject their content into a single page. Angular is an exellent engine for building solid SPAs. We benefit from double databinding, templating, routing, data services and many of the other powerful features that angular provides.
 
We primarily rely on angularJS for our project framework. We chose this technology because we wanted our app to be a single page application. The result is that all the pages are build as partial HTML templates and we inject their content into a single page. Angular is an exellent engine for building solid SPAs. We benefit from double databinding, templating, routing, data services and many of the other powerful features that angular provides.
 
 
  
 
We extended angular by adding better routing functionality and directive templates using&nbsp;'''ui-router''' and '''ui-bootstrap''', respectively'''.''' These plugins work seamlessly with angular.
 
We extended angular by adding better routing functionality and directive templates using&nbsp;'''ui-router''' and '''ui-bootstrap''', respectively'''.''' These plugins work seamlessly with angular.
Line 54: Line 71:
 
== Time schedule ==
 
== Time schedule ==
  
== Milestone 1 (1st November) ==
+
=== Milestone 1 (1st November) ===
  
 
*Document features and architecture on Wiki
 
*Document features and architecture on Wiki
 
*Show understanding of DHIS2 web apps
 
*Show understanding of DHIS2 web apps
  
== Milestone 2 (15th November) ==
+
=== Milestone 2 (15th November) ===
  
 
*First bare-bone version - static HTML
 
*First bare-bone version - static HTML
 
*Uploadable as DHIS2 web app
 
*Uploadable as DHIS2 web app
  
== Milestone 3 (30th November) ==
+
=== Milestone 3 (30th November) ===
  
 
*Finished, if applicable also with mobile app.
 
*Finished, if applicable also with mobile app.
Line 72: Line 89:
 
'''Final delivery: 8th December'''<br/>'''Presentation 9th December'''
 
'''Final delivery: 8th December'''<br/>'''Presentation 9th December'''
 
<div><br/></div>
 
<div><br/></div>
== How you are dividing tasks within the group ==
+
 
 +
== Dividing Tasks ==
  
 
<span style="color: rgb(55, 62, 77); font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; line-height: 15.3599996566772px; white-space: pre-wrap; background-color: rgb(246, 247, 248);">We worked a lot as a group. So we agreed on individual tasks during meetings, and we used facebook private group as a messaging board.</span>
 
<span style="color: rgb(55, 62, 77); font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; line-height: 15.3599996566772px; white-space: pre-wrap; background-color: rgb(246, 247, 248);">We worked a lot as a group. So we agreed on individual tasks during meetings, and we used facebook private group as a messaging board.</span>
  
== Screenshots and screen flows ==
+
== Screenshots and Screen Flows ==
  
== Documented learning during project ==
+
https://wiki.uio.no/mn/ifi/inf5750/images/4/40/Wp_ss_20141209_combined.png
 +
 
 +
<span style="font-size:large;">(*)&nbsp;Navigating and browsing using Internet Explorer 11 Mobile on a Lumia 920</span>
 +
 
 +
https://wiki.uio.no/mn/ifi/inf5750/images/thumb/6/6e/Screenshot_debe.png/459px-Screenshot_debe.png
 +
 
 +
<span style="font-size:large;">(*) The index page with&nbsp;Chrome on PC</span>
 +
 
 +
=== <span style="font-size: large;">Demo</span> ===
 +
 
 +
[https://www.youtube.com/watch?v=0IhbFgngYzg&feature=youtu.be https://www.youtube.com/watch?v=0IhbFgngYzg&amp;feature=youtu.be]
 +
 
 +
== What We Learned ==
 +
 
 +
We used many different approaches for learning Angular and JS. We were overall fairly new to Angular and web application development. Initially we ran through tutorials and started coding our app early. We tried to stick to Angular best practices but we had to refactor our code many times when we discovered better approaches. In the end we all gained solid knowledge of how to make basic Angular apps. We discovered we did not have to use any proprietary libraries such as jQuery for parsing or other heavy lifting.&nbsp;
 +
 
 +
Here are the channels we used the most for educating ourselves, and debugging the app, while working the project.
 +
 
 +
*Angular &nbsp;-&nbsp;[https://angularjs.org/ https://angularjs.org/]
 +
*Bootstrap &nbsp;-&nbsp;[http://getbootstrap.com/ http://getbootstrap.com/]
 +
*UI-Router &nbsp;-&nbsp;[https://github.com/angular-ui/ui-router https://github.com/angular-ui/ui-router]
 +
*UI-Bootstrap -&nbsp;[http://angular-ui.github.io/bootstrap/ http://angular-ui.github.io/bootstrap/]
 +
 
 +
Youtube&nbsp;
 +
 
 +
*Learn Angular basics in 60 minutes - [https://www.youtube.com/watch?v=i9MHigUZKEM https://www.youtube.com/watch?v=i9MHigUZKEM]
 +
*Introuction to Angular in 50 parts -&nbsp;[https://www.youtube.com/watch?v=TRrL5j3MIvo https://www.youtube.com/watch?v=TRrL5j3MIvo]
 +
 
 +
StackOverflow&nbsp;
 +
 
 +
*Observed forum talks and used the support channels
 +
 
 +
Google
 +
 
 +
*If it isn't here, it doesn't exist.
  
 
== Suggested improvements to APIs etc ==
 
== Suggested improvements to APIs etc ==
 +
 +
We suggest the API documentation can be better and helps developers by adding more examples which explain how developers can send request and what objects can they get from the server. In addition we think the documentation for working with the RESTful service. Adding, deleting and saving data is a little bit&nbsp;ambiguous.
 +
 +
To help out new developers with DHIS we suggest adding a help page to each API endpoint. This page should describe the purpose of the endpoint, link to relevant endpoints and list querystring- and REST parameters. Examples would also be appreciated. Developers could access help with e.g. a special url syntax such as 'domain/api/dataElements/help'.
  
 
== Link to repository ==
 
== Link to repository ==
Line 88: Line 144:
 
== Download link to sample web app or Android app ==
 
== Download link to sample web app or Android app ==
  
http://inf5750-21.uio.no/dhis-web-maintenance-appmanager/appList.action
+
NB: Due to login redirection not working properly, it is required to login with DHIS before opening the app. The DHIS API does not accept requests from anonymous clients.
 +
 
 +
[http://inf5750-21.uio.no/dhis-web-maintenance-appmanager/appList.action http://inf5750-21.uio.no/dhis-web-maintenance-appmanager/appList.action]

Latest revision as of 00:40, 10 December 2014

Data Element Bulk Editor

Overview

Data Elements Bulk Editor is a DHIS webapp. It enables administrators, and users, to manage data fields associated with forms and various value types in DHIS.  The app is visually designed in a similar manner to the current Data Element Editor, however, under the hood it is a faster, lighter, and more server-independant app.

When we started this project the goal was to make a smarter editor that allows for quick search and edit operations on form data fields. 

List of group members

Features

  • Filtering fields
  • Sort result set based on aggregate and tracker (Not implemented yet)
  • Edit fields without leaving page (Editing is not feature complete yet)
  • Add and remove fields (Add is not implemented yet)
  • Detailed view of fields
  • Responsive layout that adapts to screen size

Testbeds

  • Chrome ver: 39.0.2171.71
  • FireFox ver: 32.0.3
  • Internet Explorer ver: 11.0.9600.17416
  • IE Mobile ver: 11
  • Safari ver: 5.1.7
  • Safari Mobile ver: ?

Architechture and Technologies

Application Framework

  • HTML5, CSS, JS
  • Bootstrap
  • Angular
  • UI-Angular
  • UI-Bootstrap

Developers' Tools

  • Webstorm
  • Sublime Text 3
  • Chrome, Safari, IE, Firefox (debugging with integrated tools, and testing)
  • OS X, Ubuntu, Windows 7 & 8
  • Git w/ Github

HTML5, CSS and JS

These are the core technologies that make up the front end of modern web applications.

AngularJS

We primarily rely on angularJS for our project framework. We chose this technology because we wanted our app to be a single page application. The result is that all the pages are build as partial HTML templates and we inject their content into a single page. Angular is an exellent engine for building solid SPAs. We benefit from double databinding, templating, routing, data services and many of the other powerful features that angular provides.

We extended angular by adding better routing functionality and directive templates using ui-router and ui-bootstrap, respectively. These plugins work seamlessly with angular.

Bootstrap

Bootstrap is used for easy, seamless and modern styling of our app. 

Time schedule

Milestone 1 (1st November)

  • Document features and architecture on Wiki
  • Show understanding of DHIS2 web apps

Milestone 2 (15th November)

  • First bare-bone version - static HTML
  • Uploadable as DHIS2 web app

Milestone 3 (30th November)

  • Finished, if applicable also with mobile app.


Final delivery: 8th December
Presentation 9th December


Dividing Tasks

We worked a lot as a group. So we agreed on individual tasks during meetings, and we used facebook private group as a messaging board.

Screenshots and Screen Flows

Wp_ss_20141209_combined.png

(*) Navigating and browsing using Internet Explorer 11 Mobile on a Lumia 920

459px-Screenshot_debe.png

(*) The index page with Chrome on PC

Demo

https://www.youtube.com/watch?v=0IhbFgngYzg&feature=youtu.be

What We Learned

We used many different approaches for learning Angular and JS. We were overall fairly new to Angular and web application development. Initially we ran through tutorials and started coding our app early. We tried to stick to Angular best practices but we had to refactor our code many times when we discovered better approaches. In the end we all gained solid knowledge of how to make basic Angular apps. We discovered we did not have to use any proprietary libraries such as jQuery for parsing or other heavy lifting. 

Here are the channels we used the most for educating ourselves, and debugging the app, while working the project.

Youtube 

StackOverflow 

  • Observed forum talks and used the support channels

Google

  • If it isn't here, it doesn't exist.

Suggested improvements to APIs etc

We suggest the API documentation can be better and helps developers by adding more examples which explain how developers can send request and what objects can they get from the server. In addition we think the documentation for working with the RESTful service. Adding, deleting and saving data is a little bit ambiguous.

To help out new developers with DHIS we suggest adding a help page to each API endpoint. This page should describe the purpose of the endpoint, link to relevant endpoints and list querystring- and REST parameters. Examples would also be appreciated. Developers could access help with e.g. a special url syntax such as 'domain/api/dataElements/help'.

Link to repository

https://github.com/magnli10/inf5750-debe

Download link to sample web app or Android app

NB: Due to login redirection not working properly, it is required to login with DHIS before opening the app. The DHIS API does not accept requests from anonymous clients.

http://inf5750-21.uio.no/dhis-web-maintenance-appmanager/appList.action