Difference between revisions of "ADS"

From mn/ifi/inf5750
Jump to: navigation, search
(Fixing wiki)
(Design of the Application)
Line 13: Line 13:
 
=== Assignment description ===
 
=== Assignment description ===
 
This assignment involves making a DHIS2 Web App for searching, browsing and proposing changes to organisation units and related resources such as organisation units groups.
 
This assignment involves making a DHIS2 Web App for searching, browsing and proposing changes to organisation units and related resources such as organisation units groups.
 
=== Design of the Application ===
 
The main page of the application presents three columns to the user. A menu bar on the top allows to perform searching for a specific unit by entering name to the search box. By utilizing fuzzy search user doesn't need to be precise in their query since fuzzy search will find correct matches despite small mistakes.
 
 
First column (referred to as sidebar) has two tabs - one called "Tree", shows a tree view representing structure of the organisational units in the DHIS2 system. Second tab called "List" is used to list search results.
 
 
Since the main goal of this application is to provide a convenient solution for browsing organisational units it was decided to introduce three tabs to the second column. When user selects a unit from the "Tree", information about that unit is fetched from the DHIS2 and displayed to the user under currently selected tab. User may change tabs and select another unit - allowing to easily browse several organisational units without the need to constantly switch between them in the "Tree".
 
 
The third column provides a nice map showing location of the unit if the information about the location of the unit is present. Map is tied to the information in the second column so that if when user switches between tabs map will be displayed for the currently selected unit. However if no information about the location is available a nice message will be displayed to inform user that there is no data available about location of the unit. Administrators have option to edit which data elements are shown to the users on the user, this is done by clicking "Manage" button in the manage section of the second column. This takes user to administration page where administrator can easily configure which data elements are shown when unit information is displayed. The data about which data elements is stored in the DHIS2 system by using dataStore api. All changes are submitted to /ads_data_elements/<org_id> and consist of a single document with a list of data element id's that must be shown to the user, this list is used on the main page when deciding which data elements should be displayed to the user.
 
  
 
=== Requirements ===
 
=== Requirements ===
Line 42: Line 33:
 
== Design/User Interface ==
 
== Design/User Interface ==
 
[[File:User Interface.png|alt=User Interface.png|thumb|User interface of the application]]
 
[[File:User Interface.png|alt=User Interface.png|thumb|User interface of the application]]
The user interface of the application has three main parts - search area, information area and map area. In the information area a user can choose an organization unit either from a tree list, or by using search (which support fuzzy searching to avoid simple misspellings). Information area consists is where all the information about an organization unit is shown. A user has an opportunity to keep three different organization units open simultaneously in the appropriate tabs. The map area is situated on the right side of the application. If an organization unit has the attributt with coordinates, it will be shown as a point or a region in the map area.  
+
The user interface of the application has three main parts - search area, information area and map area. In the information area a user can choose an organization unit either from a tree list, or by using search (which support fuzzy searching to avoid simple misspellings). Information area consists is where all the information about an organization unit is shown. A user has an opportunity to keep three different organization units open simultaneously in the appropriate tabs. The map area is situated on the right side of the application. If an organization unit has the attributte with coordinates, it will be shown as a point or a region in the map area.  
  
Administrators have an opportunity to to add specific Data Elements to be shown in the information area. Access to the set-up page is possible through the Manage panel, where administrator should select the data elements to show. The period in the current version is set to the current year, although the possibly to mark the period is reserved in the data structure of the app.  
+
Administrators have an opportunity to to add specific Data Elements to be shown in the information area. Access to the set-up page is possible through the Manage panel, where administrator should select the data elements to show. The period in the current version is set to the current year, although the possibly to mark the period is reserved in the data structure of the app. The data about which data elements must be shown is stored in the DHIS2 system by using dataStore api. All changes are submitted to /ads_data_elements/<org_id> and consist of a single document with a list of data element id's that must be shown to the user, this list is used on the main page when deciding which data elements should be displayed to the user.  
  
 
== Timeline ==
 
== Timeline ==

Revision as of 04:54, 6 December 2017

Group members

Alexander Korpusov (oleksako)

Dmitry Filosofov (dmitryf)

Saskia Brinkmann (saskiabr) - left the group due to personal issues

Product descriptions requirements

Assignment

Master Facility List

Assignment description

This assignment involves making a DHIS2 Web App for searching, browsing and proposing changes to organisation units and related resources such as organisation units groups.

Requirements

  • Searching through organisation units. The searching should support filtering.
  • Displaying attributes of organisation units. Users should be able to configure which attributes should be shown.
  • A possibility for users to propose changes for the organisation units and it's structure. The list with the changes should support filtering to show only proposals relevant for the particular administrator.

Architecture

Core components

  • react - main library providing all of the necessary basic functionality for developing UI application.
  • react-router-dom - allows to make dynamic routing
  • fuse.js - used to provide fuzzy search functionality
  • leaflet - used to render maps
  • react-bootstrap - react components for bootstrap, provides easy way to write UI using bootstrap without the need to write out pure html

Architectural consideration

The original considerations were to keep the application as simple as possible and for these reasons we opted not to use reducers such as Redux. However, the size of the project is probably on the limit on where one can avoid using reducers. It is our experience from completing this assignment, that web-applications of similar size would benefit from moving all the control on data to a global reducers.

Design/User Interface

User Interface.png
User interface of the application

The user interface of the application has three main parts - search area, information area and map area. In the information area a user can choose an organization unit either from a tree list, or by using search (which support fuzzy searching to avoid simple misspellings). Information area consists is where all the information about an organization unit is shown. A user has an opportunity to keep three different organization units open simultaneously in the appropriate tabs. The map area is situated on the right side of the application. If an organization unit has the attributte with coordinates, it will be shown as a point or a region in the map area.

Administrators have an opportunity to to add specific Data Elements to be shown in the information area. Access to the set-up page is possible through the Manage panel, where administrator should select the data elements to show. The period in the current version is set to the current year, although the possibly to mark the period is reserved in the data structure of the app. The data about which data elements must be shown is stored in the DHIS2 system by using dataStore api. All changes are submitted to /ads_data_elements/<org_id> and consist of a single document with a list of data element id's that must be shown to the user, this list is used on the main page when deciding which data elements should be displayed to the user.

Timeline

Ween number Tasks
Week 43
  • Set-up wiki page
  • Choose main development frameworks and technologies
  • Learn React and DHIS2 api
Week 44
  • Make a basic web-app able to fetch from DHIS2 the organization units list. Display the list as well as the detailed info about a chosen orgunit
  • Decide on details of User Interface (UI) and start implementing it
Week 45
  • Implement UI
  • Search and filtering features
  • Add the option for users to configure which attributes of orgunits should be shown
  • Add Google maps
Week 46
  • Add the option to propose changes for organization units
  • Improve searching options
Week 47
  • Fix all the bugs
  • Make improvementswhere needed

Licensing

We will be using open source products to develop our app, and our product itself will be open sources (MIT licensed).

React is MIT licensed.[1]

Material UI is MIT licensed.[2]

Division of labour

All the team members will contribute equally to the design and development of the application. Alexander has put an extra effort into the parts related to the search tree, while Dmitry into the parts related to maps and administrative options.

Link to project repository

https://github.uio.no/inf5750-group-project/ADS