Difference between revisions of "Game of Coders"
(→Application flow) |
(→Application flow) (Tag: Visual edit) |
||
Line 56: | Line 56: | ||
[[File:Dhis1.png]] | [[File:Dhis1.png]] | ||
− | When user just starts, the UI is pretty simple. One search bar, and a dynamic map. When user hit enter to confirm search, the resulted organisation units will show up on the map, see picture | + | When user just starts, the UI is pretty simple. One search bar, and a dynamic map. When user hit enter to confirm search, the resulted organisation units will show up on |
+ | |||
+ | the map, see picture below. | ||
+ | |||
[[File:Dhis2.png]] | [[File:Dhis2.png]] | ||
− | The dynamic map will generate markers with corresponding coordinates and a brief information bar for each organisation unit. And user | + | The dynamic map will generate markers with corresponding coordinates and a brief information bar for each organisation unit. And the user can select the desired unit by clicking the marker for more detailed information. |
+ | |||
+ | When the user clicks into a specific unit (either from the live search result or the map), a side bar from the right should pop up. User is able to check more detailed information from there and edit the information. Additionally, user is able to close and minimise the bar | ||
+ | |||
[[File:Dhis3.png]] | [[File:Dhis3.png]] | ||
− | |||
== '''Milestones''' == | == '''Milestones''' == |
Revision as of 16:11, 28 October 2016
Contents
Group Members
- Lexu Qi
- Kripeshwari Sridharan
- Nirujah Kirupanithy
Design Requirements for Project E
Implementation, 3 main modules:
1 live searching:
- live search functionality
- filter result with levels, areas....
- pass searching results to map modules
- pass the selected result to the check and edit module.
2 Map:
- able to receive searching results from live searching.
- reflect the results of units on the map with markers.
- pass the selected result to the check and edit module.
3 Check and edit module:
- able to receive selected unit from live searching module and map module.
- show up the detailed information of the selected unit.
- enable editting at the same time
- allow user to close or minimise the side bar for this module
Other requirements:
- Coding structure should be tidy, and make the best of angular
- Coding style: naming, conventions, commenting, explanation, etc, should be readable, detailed.
- Bug-free, flawless
- User-friendly
Technologies
- Angular2
- Dhis
- Postgres
- Html5
- CSS
Schedule
Development Discipline
Our development will follow a light weight version of agile development method, which will eliminate the heavy documentation part. We will set up a goal weekly as a sprint and make sure a workable prototype is always available. Our task division is very modular. With the help of git, each teammate can work in parallel independently without worrying too much about others progress.
Task Division
Requirement design: Lexu, Kripeshwari
Live searching: Lexu
Map integration with units: Kripeshwari
Check and edit unit: Nirujah
Test and polishing: all
Application flow
When user just starts, the UI is pretty simple. One search bar, and a dynamic map. When user hit enter to confirm search, the resulted organisation units will show up on
the map, see picture below.
The dynamic map will generate markers with corresponding coordinates and a brief information bar for each organisation unit. And the user can select the desired unit by clicking the marker for more detailed information.
When the user clicks into a specific unit (either from the live search result or the map), a side bar from the right should pop up. User is able to check more detailed information from there and edit the information. Additionally, user is able to close and minimise the bar
Milestones
Milestone 1 - due 28.10.2016
Document features and architecture on wiki
- A understanding of the application with possible screen layouts (Described in application flow)
- Tutorials and understanding of the Angular 2.0 framework.
- Generated api key for google maps.
- Set up a private repository in github.
DHIS2 Setup
- Installation of Postgres database.
- Local installation of dhis-live with sample data.
- A general understanding of the various fields in dhis2 and how to make api calls.