User Profile App for DHIS-2

using ReactJs and RxJs

This blog post is about the work I did during the GSoC 2016 coding period (May 23 — Aug 15) . GSoC has been a great learning experience for me. I am extremely thankful to Health Information System for giving me this opportunity to contribute to the development of DHIS-2, which is the preferred health management information system in around 60countries and 50 organizations across four continents. I am also grateful to my mentors- Nicolay Ramm and Mark Polak, for helping me to understand the organization’s processes and architecture and to help me build appropriate strategy for development using modular approach.


Abstract

DHIS-2 currently ships with several server based system maintenance apps. We are in process of re-writing these apps as client-side web apps using modern web technologies. Few of the apps such as settings app, maintenance app and app management app are already available in version 2.24. During GSOC 2016, I successfully completed the development for user profile app. This app essentially provides DHIS-2 users a web-based user-interface so that they can —

  • View and edit user profile details such as name and contact information.
  • View and edit user account settings.

To support development of these modern client-side applications, we are also in process of developing two support libraries -

  1. D2 — It is a javascript library which abstracts away the DHIS2 web api.
  2. D2-UI — UI components library for DHIS2 client-side web apps.
Frontend architecture
User profile app will ship with DHIS 2.25

Work Summary

The project can be broadly divided into three deliverables:

  1. Extend D2 to include methods for viewing and updating user account settings and provide complete test coverage for it
  2. Adding components to D2-UI which will be used in User Profile App and provide complete test coverage for it
  3. User Profile App using D2 and D2-UI support libraries and flux-ish architecture using RxJs

Contribution to D2 —

List of all commits to D2 can be found here

Contribution to D2-UI —

There were a lot of changes in D2-UI for user profile app. List of all commits can be found here. Following are few of the notable changes —

Contribution to DHIS Web API —

Added an API endpoint to verify if the password entered by the logged in user is correct: http://bazaar.launchpad.net/~dhis2-devs-core/dhis2/trunk/revision/23540

User Profile App —

The project link: https://github.com/dhis2/user-profile-app

List of commits (total 77): https://github.com/dhis2/user-profile-app/commits/master?author=adhbh

The app consists of three sections —

  1. User profile
  2. Account Settings
  3. User Settings

List of fields in user profile: https://github.com/dhis2/user-profile-app/blob/master/src/userSettingsMapping.js#L3

List of fields in user settings: https://github.com/dhis2/user-profile-app/blob/master/src/userSettingsMapping.js#L71

For Account Settings, it was required to create a new component called accountEditor. The purpose of this section is to allow users to update their login password.


User profile app demo

The community feedback can be found here.