Game of Coders

From mn/ifi/inf5750
Jump to: navigation, search

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.
  • Add organisation units in the map (We don't drill down to all levels in the map, the map is more visual, so this functionality is added in 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 editing at the same time
  • allow user to create new unit
  • allow user to delete a level 4 unit
  • 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


  • Angular2
  • Dhis
  • Postgres
  • Html5
  • CSS
  • Reactive Extensions for JavaScript (RxJS)



  • Search organisation by name.
  • Search organisation by level.
  • Filter by level, and 7 sorting criteria. Make searching easier.
  • Searching results show up live, and reflected on the map live. Make searching more visual and fun.
  • Map present organisations differently according to level (markers or polygon).
  • Can access level 4 orgs on the map by clicking on the polygons of level 3 orgs.
  • Go to details of specific organisation from the searching results, or the map.
  • Users can access rich details of an organisation, and edit them.
  • Users can add a new organisation.

User Interface and Interactions

  • The look of the app is neat.
  • App works flawlessly, most of time works fast and seamlessly.
  • Interactions between each components and modules function as expected.
  • Generally speaking, the app is user-friendly

Technical Design

Avoid unnecessary requesting:

  • Always send request to the server only once. Then perform the filtering and sorting on existing results.
  • And keep the searching results for other components (Map and Details Sidebar modules).
  • Faster and Robust.

Coding Architecture:

  • Since we have 3 modules, and we have 3 main folders for each of them.
  • Very modular. If any one or two of the 3 modules folders is removed and not functioning correctly, just need to comment a bit relevant code, the other modules will still work.

Speeding up:

  • Restrict up to 20 organisations that are shown on the map. Since polygons are drawn slowly.

Make the best of Angular2:

  • Use a global service to connect 3 modules by making use of the service function of angular2.
  • Map and OrgDetails modules are subscribed to the changes to the global services by using observables.

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


Technical design (Interaction with DHIS)



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.

Milestone 2- 05.11.2016

  • Able to show map with the marker on Sierra Leone.
  • Zoom when the mouse is clicked.
  • Add a marker when the mouse is right clicked.
  • Show an info window when the marker is clicked.
  • Angular2 google maps is used for the map component.

Milestone 3 - 08.11.2016

  • Project framework enabling modular group tasks is up.

Milestone 4 - 20.11.2016

  • Integration of Map and Live search modules.

Milestone 5 - 25.11.2016

  • Integration of all three modules with complete basic functionalities.

Screen shots





Discussion and Future Work

  • Make the fronted UI prettier :)
  • Should involve tests to ensure expected performance.

Link to repository