Difference between revisions of "Trust us, we're Scientists! Visualization/Overview"

From mn/ifi/inf5750
Jump to: navigation, search
(Tuwas Visualizer for DHIS2)
Line 1: Line 1:
== Tuwas Visualizer for DHIS2 ==
+
== Tuwas Visualizer for DHIS2 ==
  
 
<br>This project is was started during the Inf5750 - Open source software development course at the University of Oslo The purpose of the app is to make it easy for users to extract data from DHIS2 and display this data in a user friendly way.<br>The District Health Information System (DHIS) is a highly flexible, open-source health management information system and data warehouse. It is developed by the Health Information Systems Programme (HISP). The core development activities are managed and coordinated by the Department of Informatics at the University of Oslo, and supported by The Norwegian Research Council, NORAD, The University of Oslo, and The Norwegian Centre for International Cooperation in Education.<br>For the first version Tuwas Visualizer will support line, bar and pie charts. And the user will be able to choose from some predefined settings.  
 
<br>This project is was started during the Inf5750 - Open source software development course at the University of Oslo The purpose of the app is to make it easy for users to extract data from DHIS2 and display this data in a user friendly way.<br>The District Health Information System (DHIS) is a highly flexible, open-source health management information system and data warehouse. It is developed by the Health Information Systems Programme (HISP). The core development activities are managed and coordinated by the Department of Informatics at the University of Oslo, and supported by The Norwegian Research Council, NORAD, The University of Oslo, and The Norwegian Centre for International Cooperation in Education.<br>For the first version Tuwas Visualizer will support line, bar and pie charts. And the user will be able to choose from some predefined settings.  
Line 5: Line 5:
 
<br>  
 
<br>  
  
'''Technologies'''<br>The project is build using AngularJS. We use several angular plugins for ui and graphs. Most of the dependencies are managed using bower.<br>Note: While angular is client-side-only technology and it's possible to create angular webapps that don't require a backend server at all, we recommend hosting the project files using a local webserver during development to avoid issues with security restrictions (sandbox) in browsers. The sandbox implementation varies between browsers, but quite often prevents things like cookies, xhr, etc to function properly when an html page is opened via file:// scheme instead of http://.  
+
'''Technologies'''<br>The project is build using AngularJS. We use several angular plugins for ui and graphs. Most of the dependencies are managed using bower.<br>Note: ''While angular is client-side-only technology and it's possible to create angular webapps that don't require a backend server at all, we recommend hosting the project files using a local webserver during development to avoid issues with security restrictions (sandbox) in browsers. The sandbox implementation varies between browsers, but quite often prevents things like cookies, xhr, etc to function properly when an html page is opened via file:// scheme instead of http://.''
  
 
<br>  
 
<br>  
  
'''Running the app during development'''<br>You can pick one of these options:<br>serve this repository with your webserver<br>install node.js and run scripts/web-server.js<br>Then navigate your browser to http://localhost:&lt;port&gt;/app/index.html to see the app running in your browser.
+
'''Running the app during development'''<br>You can pick one of these options:
  
Running the app in production<br>Tuwas Visualizer is an Angular app. Angular apps are really just a bunch of static html, css and js files that just need to be hosted somewhere, where they can be accessed by browsers.  
+
*serve this repository with your webserver
 +
*install node.js and run scripts/web-server.js
 +
 
 +
Then navigate your browser to http://localhost:&lt;port&gt;/app/index.html to see the app running in your browser.
 +
 
 +
'''Running the app in production'''<br>Tuwas Visualizer is an Angular app. Angular apps are really just a bunch of static html, css and js files that just need to be hosted somewhere, where they can be accessed by browsers.  
  
 
<br>  
 
<br>  
  
'''Running unit tests'''<br>We have used jasmine and Karma for our unit tests/specs.<br>Requires node.js, Karma (sudo npm install -g karma) and a local or remote browser.<br>start scripts/test.sh (on windows: scripts\test.bat)<br>a browser will start and connect to the Karma server (Chrome is default browser, others can be captured by loading the same url as the one in Chrome or by changing the config/karma.conf.js file)<br>to run or re-run tests just change any of your source or test javascript files.  
+
'''Running unit tests'''<br>We have used jasmine and Karma for our unit tests/specs.<br>Requires node.js, Karma (sudo npm install -g karma) and a local or remote browser.
 +
 
 +
*start scripts/test.sh (on windows: scripts\test.bat)
 +
*a browser will start and connect to the Karma server (Chrome is default browser, others can be captured by loading the same url as the one in Chrome or by changing the config/karma.conf.js file)
 +
*to run or re-run tests just change any of your source or test javascript files.
  
 
<br>  
 
<br>  
Line 22: Line 31:
  
 
<br>  
 
<br>  
 
+
<pre>'''Directory Layout'''
'''Directory Layout'''<br>app/ --&gt; all of the files to be used in production<br>css/ --&gt; css files<br>app.css --&gt; default stylesheet<br>bootstrap.min.css --&gt; Bootstrap css<br>bootstrap-theme.min.css --&gt; Not currently used<br>sticky-footer-navbar.css --&gt; Not currently used<br>img/ --&gt; image files<br>glyphicons-halflings.png --&gt; Glyphicon icons<br>glyphicons-halflings-white.png --&gt; Gphyphicon icons in white<br>index.html --&gt; app layout file (the main html template file of the app)<br>index-async.html --&gt; just like index.html, but loads js files asynchronously<br>js/ --&gt; javascript files<br>app.js --&gt; application<br>controllers/ --&gt; application controllers<br>BarGraphController.js --&gt; Controller for bar graphs<br>LinearGraphController.js --&gt; Controller for linear graphs<br>LoginController.js --&gt; Controller for login<br>PieChartController.js --&gt; Controller for pie graphs<br>directives.js --&gt; application directives<br>filters.js --&gt; custom angular filters<br>services.js --&gt; custom angular services<br>lib/ --&gt; angular and 3rd party javascript libraries<br>angular/<br>angular.js --&gt; the latest angular js<br>angular.min.js --&gt; the latest minified angular js<br>angular-*.js --&gt; angular add-on modules<br>version.txt --&gt; version number<br>bower/ --&gt; Bower components folder<br>partials/ --&gt; angular view partials (partial html templates)<br>BarGraphPartial.html<br>LinearGraphPartial.html<br>PieChartPartial<br>config/karma.conf.js --&gt; config file for running unit tests with Karma<br>config/karma-e2e.conf.js --&gt; config file for running e2e tests with Karma<br>scripts/ --&gt; handy shell/js/ruby scripts<br>e2e-test.sh --&gt; runs end-to-end tests with Karma (*nix)<br>e2e-test.bat --&gt; runs end-to-end tests with Karma (windows)<br>test.bat --&gt; autotests unit tests with Karma (windows)<br>test.sh --&gt; autotests unit tests with Karma (*nix)<br>web-server.js --&gt; simple development webserver based on node.js<br>test/ --&gt; test source files and libraries<br>e2e/ --&gt;<br>runner.html --&gt; end-to-end test runner (open in your browser to run)<br>scenarios.js --&gt; end-to-end specs<br>fixtures/<br>indicatorgroups.json --&gt; fixture for a json response from dhis2 api<br>indicator.json --&gt; fixture for a json response from dhis2 api<br>lib/<br>angular/ --&gt; angular testing libraries<br>angular-mocks.js --&gt; mocks that replace certain angular services in tests<br>angular-scenario.js --&gt; angular's scenario (end-to-end) test runner library<br>version.txt --&gt; version file<br>unit/ --&gt; unit level specs/tests<br>controllersSpec.js --&gt; specs for controllers<br>directivessSpec.js --&gt; specs for directives<br>filtersSpec.js --&gt; specs for filters<br>servicesSpec.js --&gt; specs for services<br>bower.json --&gt; Bower config file that holds dependencies<br>server.sh --&gt; Run the webserver script in the script/ directory.  
+
app/ --&gt; all of the files to be used in production
 
+
css/ --&gt; css files
 +
app.css --&gt; default stylesheet
 +
bootstrap.min.css --&gt; Bootstrap css
 +
bootstrap-theme.min.css --&gt; Not currently used
 +
sticky-footer-navbar.css --&gt; Not currently used
 +
img/ --&gt; image files
 +
glyphicons-halflings.png --&gt; Glyphicon icons
 +
glyphicons-halflings-white.png --&gt; Gphyphicon icons in white
 +
index.html --&gt; app layout file (the main html template file of the app)
 +
index-async.html --&gt; just like index.html, but loads js files asynchronously
 +
js/ --&gt; javascript files
 +
app.js --&gt; application
 +
controllers/ --&gt; application controllers
 +
BarGraphController.js --&gt; Controller for bar graphs
 +
LinearGraphController.js --&gt; Controller for linear graphs
 +
LoginController.js --&gt; Controller for login
 +
PieChartController.js --&gt; Controller for pie graphs
 +
directives.js --&gt; application directives
 +
filters.js --&gt; custom angular filters
 +
services.js --&gt; custom angular services
 +
lib/ --&gt; angular and 3rd party javascript libraries
 +
angular/
 +
angular.js --&gt; the latest angular js
 +
angular.min.js --&gt; the latest minified angular js
 +
angular-*.js --&gt; angular add-on modules
 +
version.txt --&gt; version number
 +
bower/ --&gt; Bower components folder
 +
partials/ --&gt; angular view partials (partial html templates)
 +
BarGraphPartial.html
 +
LinearGraphPartial.html
 +
PieChartPartial
 +
config/karma.conf.js --&gt; config file for running unit tests with Karma
 +
config/karma-e2e.conf.js --&gt; config file for running e2e tests with Karma
 +
scripts/ --&gt; handy shell/js/ruby scripts
 +
e2e-test.sh --&gt; runs end-to-end tests with Karma (*nix)
 +
e2e-test.bat --&gt; runs end-to-end tests with Karma (windows)
 +
test.bat --&gt; autotests unit tests with Karma (windows)
 +
test.sh --&gt; autotests unit tests with Karma (*nix)
 +
web-server.js --&gt; simple development webserver based on node.js
 +
test/ --&gt; test source files and libraries
 +
e2e/ --&gt;
 +
runner.html --&gt; end-to-end test runner (open in your browser to run)
 +
scenarios.js --&gt; end-to-end specs
 +
fixtures/
 +
indicatorgroups.json --&gt; fixture for a json response from dhis2 api
 +
indicator.json --&gt; fixture for a json response from dhis2 api
 +
lib/
 +
angular/ --&gt; angular testing libraries
 +
angular-mocks.js --&gt; mocks that replace certain angular services in tests
 +
angular-scenario.js --&gt; angular's scenario (end-to-end) test runner library
 +
version.txt --&gt; version file
 +
unit/ --&gt; unit level specs/tests
 +
controllersSpec.js --&gt; specs for controllers
 +
directivessSpec.js --&gt; specs for directives
 +
filtersSpec.js --&gt; specs for filters
 +
servicesSpec.js --&gt; specs for services
 +
bower.json --&gt; Bower config file that holds dependencies
 +
server.sh --&gt; Run the webserver script in the script/ directory.</pre>
 
<br>  
 
<br>  
  
 
'''Contact'''<br>For more information on Tuwas Visualizer please contact any of our team members.<br>For more information on DHIS2 please visit http://www.dhis2.org<br>For more information on AngularJS please check out http://angularjs.org/
 
'''Contact'''<br>For more information on Tuwas Visualizer please contact any of our team members.<br>For more information on DHIS2 please visit http://www.dhis2.org<br>For more information on AngularJS please check out http://angularjs.org/

Revision as of 19:03, 29 October 2013

Tuwas Visualizer for DHIS2


This project is was started during the Inf5750 - Open source software development course at the University of Oslo The purpose of the app is to make it easy for users to extract data from DHIS2 and display this data in a user friendly way.
The District Health Information System (DHIS) is a highly flexible, open-source health management information system and data warehouse. It is developed by the Health Information Systems Programme (HISP). The core development activities are managed and coordinated by the Department of Informatics at the University of Oslo, and supported by The Norwegian Research Council, NORAD, The University of Oslo, and The Norwegian Centre for International Cooperation in Education.
For the first version Tuwas Visualizer will support line, bar and pie charts. And the user will be able to choose from some predefined settings.


Technologies
The project is build using AngularJS. We use several angular plugins for ui and graphs. Most of the dependencies are managed using bower.
Note: While angular is client-side-only technology and it's possible to create angular webapps that don't require a backend server at all, we recommend hosting the project files using a local webserver during development to avoid issues with security restrictions (sandbox) in browsers. The sandbox implementation varies between browsers, but quite often prevents things like cookies, xhr, etc to function properly when an html page is opened via file:// scheme instead of http://.


Running the app during development
You can pick one of these options:

  • serve this repository with your webserver
  • install node.js and run scripts/web-server.js

Then navigate your browser to http://localhost:<port>/app/index.html to see the app running in your browser.

Running the app in production
Tuwas Visualizer is an Angular app. Angular apps are really just a bunch of static html, css and js files that just need to be hosted somewhere, where they can be accessed by browsers.


Running unit tests
We have used jasmine and Karma for our unit tests/specs.
Requires node.js, Karma (sudo npm install -g karma) and a local or remote browser.

  • start scripts/test.sh (on windows: scripts\test.bat)
  • a browser will start and connect to the Karma server (Chrome is default browser, others can be captured by loading the same url as the one in Chrome or by changing the config/karma.conf.js file)
  • to run or re-run tests just change any of your source or test javascript files.


End to end testing
Angular ships with a baked-in end-to-end test runner that understands angular, your app and allows you to write your tests with jasmine-like BDD syntax.
Requires a webserver, node.js + ./scripts/web-server.js or your backend server that hosts the angular static files.
_Note: We have also added ./server.sh that runs the same script but can be called with less characters :)
Check out the end-to-end runner's documentation for more info.
create your end-to-end tests in test/e2e/scenarios.js
serve your project directory with your http/backend server or node.js + scripts/web-server.js
to run do one of:
open http://localhost:port/test/e2e/runner.html in your browser
run the tests from console with Karma via scripts/e2e-test.sh or script/e2e-test.bat


'''Directory Layout'''
app/ --> all of the files to be used in production
css/ --> css files
app.css --> default stylesheet
bootstrap.min.css --> Bootstrap css
bootstrap-theme.min.css --> Not currently used
sticky-footer-navbar.css --> Not currently used
img/ --> image files
glyphicons-halflings.png --> Glyphicon icons
glyphicons-halflings-white.png --> Gphyphicon icons in white
index.html --> app layout file (the main html template file of the app)
index-async.html --> just like index.html, but loads js files asynchronously
js/ --> javascript files
app.js --> application
controllers/ --> application controllers
BarGraphController.js --> Controller for bar graphs
LinearGraphController.js --> Controller for linear graphs
LoginController.js --> Controller for login
PieChartController.js --> Controller for pie graphs
directives.js --> application directives
filters.js --> custom angular filters
services.js --> custom angular services
lib/ --> angular and 3rd party javascript libraries
angular/
angular.js --> the latest angular js
angular.min.js --> the latest minified angular js
angular-*.js --> angular add-on modules
version.txt --> version number
bower/ --> Bower components folder
partials/ --> angular view partials (partial html templates)
BarGraphPartial.html
LinearGraphPartial.html
PieChartPartial
config/karma.conf.js --> config file for running unit tests with Karma
config/karma-e2e.conf.js --> config file for running e2e tests with Karma
scripts/ --> handy shell/js/ruby scripts
e2e-test.sh --> runs end-to-end tests with Karma (*nix)
e2e-test.bat --> runs end-to-end tests with Karma (windows)
test.bat --> autotests unit tests with Karma (windows)
test.sh --> autotests unit tests with Karma (*nix)
web-server.js --> simple development webserver based on node.js
test/ --> test source files and libraries
e2e/ -->
runner.html --> end-to-end test runner (open in your browser to run)
scenarios.js --> end-to-end specs
fixtures/
indicatorgroups.json --> fixture for a json response from dhis2 api
indicator.json --> fixture for a json response from dhis2 api
lib/
angular/ --> angular testing libraries
angular-mocks.js --> mocks that replace certain angular services in tests
angular-scenario.js --> angular's scenario (end-to-end) test runner library
version.txt --> version file
unit/ --> unit level specs/tests
controllersSpec.js --> specs for controllers
directivessSpec.js --> specs for directives
filtersSpec.js --> specs for filters
servicesSpec.js --> specs for services
bower.json --> Bower config file that holds dependencies
server.sh --> Run the webserver script in the script/ directory.


Contact
For more information on Tuwas Visualizer please contact any of our team members.
For more information on DHIS2 please visit http://www.dhis2.org
For more information on AngularJS please check out http://angularjs.org/