Difference between revisions of "FRM"
m (→Project details) (Tag: Visual edit) |
|||
(47 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
+ | In this project we made a web application for managing Organization Units within DHIS2. The application has a easy to use interface with a map as the main component. The organization units are shown in the map as polygons with colors and markers. The application also features a dynamic (real time) search, filtering possibilities and a sidebar for displaying and editing information about the units. | ||
+ | |||
== Project details == | == Project details == | ||
− | + | In this project we have made a web application to be used within DHIS2. DHIS2 is an open source health information system where you can easily collect, display and analyze reported health data. | |
"In DHIS 2 the location of the data, the geographical context, is represented as organisational units. Organisational units can be either a health facility or department/sub-unit providing services or an administrative unit representing a geographical area (e.g. a health district)." [https://www.dhis2.org/doc/snapshot/en/implementer/html/ch10.html] | "In DHIS 2 the location of the data, the geographical context, is represented as organisational units. Organisational units can be either a health facility or department/sub-unit providing services or an administrative unit representing a geographical area (e.g. a health district)." [https://www.dhis2.org/doc/snapshot/en/implementer/html/ch10.html] | ||
− | Managing Organization Units[http://www.uio.no/studier/emner/matnat/ifi/INF5750/h15/group-projects/managing-organization-units/index.html] is an application to get a better overview of organization units within the DHIS2 system. The application will be a | + | Managing Organization Units[http://www.uio.no/studier/emner/matnat/ifi/INF5750/h15/group-projects/managing-organization-units/index.html] is an application to get a better overview of organization units within the DHIS2 system. The application will be a single page application with a map displaying all org. units as polygons and markers with their correct coordinates. By clicking on a marker you will get all available information on a unit. You will also be able to edit these units if necessary. By clicking on an empty point on the map you will be asked to add a new org. unit. |
Since there are a lot of organization units there will be implemented a dynamic search and filtering to help simplify the search for a specific organization unit. | Since there are a lot of organization units there will be implemented a dynamic search and filtering to help simplify the search for a specific organization unit. | ||
== Design == | == Design == | ||
+ | === Sketch === | ||
+ | |||
+ | [[File:frmsketch.png|500px]] | ||
+ | |||
+ | This is our first sketch. | ||
− | === | + | Our main focus with the web application design was a simple and user-friendly solution. Here is the result. |
− | + | ||
+ | === Screenshots and screen flow === | ||
+ | Search or click on the map. | ||
+ | |||
+ | [[File:Frmstart.png|550x550px]] | ||
+ | |||
+ | ==== Map operations ==== | ||
+ | You can click on the map to see information or update the information in the sidebar. | ||
+ | |||
+ | If you want to add a new organization unit, you can drill down to your location and fill in the information in the sidebar. | ||
+ | {| class="wikitable" | ||
+ | |- | ||
+ | |[[File:Frmclickmap.png|none|thumb|Click on map - show popup modal|350x350px]] | ||
+ | |[[File:Seedetails.png|none|thumb|See details - show sidebar|350x350px]] | ||
+ | |[[File:Seedetailsupdate.png|none|thumb|Update details in sidebar|350x350px]] | ||
+ | |} | ||
+ | |||
+ | {| class="wikitable" | ||
+ | |- | ||
+ | |[[File:Drilldowntwolook.png|none|thumb|drill down once or twice more|350x350px]] | ||
+ | |[[File:Addnew.png|none|thumb|Add new|350x350px]] | ||
+ | |[[File:Addnewform.png|none|thumb|Form in sidebar|350x350px]] | ||
+ | |} | ||
+ | |||
+ | ==== Search operations ==== | ||
+ | You can also search to see more information and details about your facility, both in sidebar and on map. | ||
− | + | You can filter your search after ownership, type and location. | |
+ | {| class="wikitable" | ||
+ | |- | ||
+ | |[[File:search.png|none|thumb|Search|350x350px]] | ||
+ | |[[File:filtersearch.png|none|thumb|Filter search|350x350px]] | ||
+ | |[[File:searchresult.png|none|thumb|Show sidebar with search details|350x350px]] | ||
+ | |} | ||
== Group members == | == Group members == | ||
Line 39: | Line 77: | ||
It is a requirement to use Angular and since we had a lecture about Angular 2.0 and it is a new technology, the group wanted to test it out and see if it suited our project. So far there are no indication that it won't, so we are developing the application in Angular 2.0. | It is a requirement to use Angular and since we had a lecture about Angular 2.0 and it is a new technology, the group wanted to test it out and see if it suited our project. So far there are no indication that it won't, so we are developing the application in Angular 2.0. | ||
− | == | + | == Requirements and features == |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | == | + | === Requirements === |
+ | The requirements are listed below: | ||
− | + | Make a web app in order to manage organization unit easily. | |
− | |||
− | |||
− | |||
− | |||
− | + | The user should be able to: | |
+ | * Search for an org. unit and get facility details, using live search | ||
+ | |||
+ | * Filter your search based on levels | ||
+ | * Present the information pertaining to the chosen facility in a drop-down menu beneath its name | ||
+ | |||
+ | * Locate on map | ||
+ | * Edit coordinates | ||
+ | * Edit org. unit details | ||
+ | * Add a new facility by clicking on the map | ||
+ | |||
+ | === Features === | ||
+ | All of these requirements has been implemented as features in the final application. We also wanted to implement statistics on organisation units and a list of all units, but in the end we did not find the time to implement these features in a good way. | ||
+ | |||
+ | == Development and tasks == | ||
+ | |||
+ | === Development === | ||
+ | Since the project started in November we have worked toghether every Thursday. We have mostly worked on our tasks by our self, but during the project we have had 2 sessions of pair programming. This has proven to be very efficient for solve big problems that each of us would otherwise have been stuck on for a long time . | ||
+ | |||
+ | === Tasks === | ||
+ | We devided the project into sevral parts or tasks. The tasks and the group member responsible are listed below: | ||
+ | * Map integration and displaying of data - Julie | ||
+ | * Design - Roza | ||
+ | * Search - Erik | ||
+ | * Filter - Yrjan | ||
+ | * Interaction (displaying and editing data) - Erik | ||
+ | |||
+ | == Documented learning == | ||
+ | Non of the members in the group had any previous experience with Angular 2, and thus we have learned a lot about this new programing language. The fact that Angular 2 is still in an alpha stage, means that the documentation available is somewhat sparse. This does in turn mean that finding answers to problems we ran into during the project was sometimes impossible. Because of this, ''some'' of the code in the final application can be categorized as "hacked", meaning that it is not good code practise, or not used in the way it was intended. | ||
+ | |||
+ | In the same way as all of the group members where unfamiliar with Angular 2, we where also unfamiliar with DHIS 2 and its web API. We have learn a lot about how development in DHIS 2 works, and how the web API is structured. Since the web API is very rich and large, it took some time to understand how to work with it efficiently. | ||
== Milestones == | == Milestones == | ||
Line 76: | Line 132: | ||
We have also looked into testing for javascript with Jasmine and tried to test one method. | We have also looked into testing for javascript with Jasmine and tried to test one method. | ||
− | * | + | * '''Show understanding of dhis2 web app:''' |
We have downloaded the dhis-live package and deployed it on our local computers. We have also switched from H2 db to postgres. We have populated our databases with sample data from Sierra Leone. We managed to upload our "hello-world"-app into dhis. | We have downloaded the dhis-live package and deployed it on our local computers. We have also switched from H2 db to postgres. We have populated our databases with sample data from Sierra Leone. We managed to upload our "hello-world"-app into dhis. | ||
Line 91: | Line 147: | ||
* Finished, if applicable also with mobile app. | * Finished, if applicable also with mobile app. | ||
− | === Final delivery - due | + | === Final delivery - due 13.12.2015 === |
− | * | + | * Presentation: Wednesday 16th of December at 14.00. |
+ | |||
+ | == Suggested improvements to API == | ||
+ | The API were rich and had most of the features we wanted. One feature that was lacking (or maybe just not documented), was how to associate a organisationUnit with an organisationUnitGroup. We could not find any information on it in the documentation, and were unsuccessful in our many attempts to add organisationUnitGroup to both new and existing organisationUnits. | ||
== Other == | == Other == | ||
Git repo: gitolite@git.uio.no:u/erikhf/frm.git | Git repo: gitolite@git.uio.no:u/erikhf/frm.git | ||
+ | |||
+ | Zip file of final product: https://www.dropbox.com/s/kvey901ir7bu88x/frm.zip?dl=0 | ||
=== PR === | === PR === |
Latest revision as of 22:06, 13 December 2015
In this project we made a web application for managing Organization Units within DHIS2. The application has a easy to use interface with a map as the main component. The organization units are shown in the map as polygons with colors and markers. The application also features a dynamic (real time) search, filtering possibilities and a sidebar for displaying and editing information about the units.
Contents
Project details
In this project we have made a web application to be used within DHIS2. DHIS2 is an open source health information system where you can easily collect, display and analyze reported health data.
"In DHIS 2 the location of the data, the geographical context, is represented as organisational units. Organisational units can be either a health facility or department/sub-unit providing services or an administrative unit representing a geographical area (e.g. a health district)." [1]
Managing Organization Units[2] is an application to get a better overview of organization units within the DHIS2 system. The application will be a single page application with a map displaying all org. units as polygons and markers with their correct coordinates. By clicking on a marker you will get all available information on a unit. You will also be able to edit these units if necessary. By clicking on an empty point on the map you will be asked to add a new org. unit.
Since there are a lot of organization units there will be implemented a dynamic search and filtering to help simplify the search for a specific organization unit.
Design
Sketch
This is our first sketch.
Our main focus with the web application design was a simple and user-friendly solution. Here is the result.
Screenshots and screen flow
Search or click on the map.
Map operations
You can click on the map to see information or update the information in the sidebar.
If you want to add a new organization unit, you can drill down to your location and fill in the information in the sidebar.
Search operations
You can also search to see more information and details about your facility, both in sidebar and on map.
You can filter your search after ownership, type and location.
Group members
Erik Haider Forsén - erikh@ifi.uio.no
Julie Hill Roa - juliehr@ifi.uio.no
Roza Moustafa - rozarm@ifi.uio.no
Yrjan Fraschetti - yrjanaf@ifi.uio.no
Architecture
This application will be a new module within the DHIS2 web app. This will be a easier, more visual way of doing tasks on organization units than what is possible within the DHIS2 web app today.
The app it self will be a SPA which get organization units and other information from the DHIS2 REST API. This app will therefore not store any information other than locally before sending the updated/new information back to the DHIS2 rest API.
Technologies
- Bootstrap
- HTML 5 & CSS 3
- Angular 2.0 (alpha v. 48)
- DHIS2 Web app
- Google Maps JavaScript API
- REST to communicate with DHIS2
It is a requirement to use Angular and since we had a lecture about Angular 2.0 and it is a new technology, the group wanted to test it out and see if it suited our project. So far there are no indication that it won't, so we are developing the application in Angular 2.0.
Requirements and features
Requirements
The requirements are listed below:
Make a web app in order to manage organization unit easily.
The user should be able to:
- Search for an org. unit and get facility details, using live search
- Filter your search based on levels
- Present the information pertaining to the chosen facility in a drop-down menu beneath its name
- Locate on map
- Edit coordinates
- Edit org. unit details
- Add a new facility by clicking on the map
Features
All of these requirements has been implemented as features in the final application. We also wanted to implement statistics on organisation units and a list of all units, but in the end we did not find the time to implement these features in a good way.
Development and tasks
Development
Since the project started in November we have worked toghether every Thursday. We have mostly worked on our tasks by our self, but during the project we have had 2 sessions of pair programming. This has proven to be very efficient for solve big problems that each of us would otherwise have been stuck on for a long time .
Tasks
We devided the project into sevral parts or tasks. The tasks and the group member responsible are listed below:
- Map integration and displaying of data - Julie
- Design - Roza
- Search - Erik
- Filter - Yrjan
- Interaction (displaying and editing data) - Erik
Documented learning
Non of the members in the group had any previous experience with Angular 2, and thus we have learned a lot about this new programing language. The fact that Angular 2 is still in an alpha stage, means that the documentation available is somewhat sparse. This does in turn mean that finding answers to problems we ran into during the project was sometimes impossible. Because of this, some of the code in the final application can be categorized as "hacked", meaning that it is not good code practise, or not used in the way it was intended.
In the same way as all of the group members where unfamiliar with Angular 2, we where also unfamiliar with DHIS 2 and its web API. We have learn a lot about how development in DHIS 2 works, and how the web API is structured. Since the web API is very rich and large, it took some time to understand how to work with it efficiently.
Milestones
Milestone 1 - due 08.11.2015
- Document features and architecture on wiki:
See features paragraph.
We have also made a sketch of the design/layout of the application.
We have set up a project in git. This project contains a skeleton with a good Angular 2.0 structure for the web app.
We looked at googlemaps and made an API-key to be able to use their map-API .
All group members have done Angular 2.0 quick start and tutorials.
We have also looked into testing for javascript with Jasmine and tried to test one method.
- Show understanding of dhis2 web app:
We have downloaded the dhis-live package and deployed it on our local computers. We have also switched from H2 db to postgres. We have populated our databases with sample data from Sierra Leone. We managed to upload our "hello-world"-app into dhis.
We have also browsed the dhis app too see other app examples, and successfully added a new organization unit.
We have started looking into retrieving data from the dhis API, but so far it is difficult with Angular 2.0 (need to learn more).
Milestone 2 - due 22.11.2015
- First bare-bone version - static HTML
- Uploadable as DHIS2 web app.
Milestone 3 - due 04.12.2015
- Finished, if applicable also with mobile app.
Final delivery - due 13.12.2015
- Presentation: Wednesday 16th of December at 14.00.
Suggested improvements to API
The API were rich and had most of the features we wanted. One feature that was lacking (or maybe just not documented), was how to associate a organisationUnit with an organisationUnitGroup. We could not find any information on it in the documentation, and were unsuccessful in our many attempts to add organisationUnitGroup to both new and existing organisationUnits.
Other
Git repo: gitolite@git.uio.no:u/erikhf/frm.git
Zip file of final product: https://www.dropbox.com/s/kvey901ir7bu88x/frm.zip?dl=0