KJH

Group members

• Kjetil Svalestuen
• John Eric Birger Melin
• Henning Håkonsen

Task

 E Health Facility Registry

App providing an interface to the health facilities in a country (e.g. the Sierra Leone or Trainingland demo databases). The app should make it possible to search and list organisation units and see these in a map, along with relevant details regarding each facility such as type, the district it belongs to etc.

Architecture

For this web application, we are simply going to fetch data from the DHIS online API and use that as a back-end. Thus, we only need to create a front-end service. Before we started working on our web app, we discussed the minimum requirements we wanted from such a framework.

• The framework should be easy to set up.

• It should be modular so that we could easily add or remove certain features.

• The framework should support intuitive and logical navigation and data storing.

We found React to fulfill all these requirements. React is just a library and very easy to set up, and is built on so-called components that enable us to make a modular web app. Despite being very new, React already has an enormous user base and lots of user created extensions that could same us some time. For instance, our Google Map component is built upon the user created package 'google-maps-react'.

Libraries

In addition to React, we use several other libraries:

• Redux for handling the whole program state in one javascript object. This lets us inspect and edit the program state at any point in time, which can be very useful during debugging.
• Redux Saga lets us make asynchronous calls to the API by dispatching ordinary Redux actions, avoiding the typical callback chain of fetching data using Ajax.
• Flow for type checking our logic, which makes the system more durable and less vulnerable to typing errors, which are common in javascript.
• Babel for transpiling code from ES6 to browser-compatible JavaScript.
• Node and NPM for package management.
• Webpack wraps it all, compiles the web site and enables Hot reloading during development.

At last, we'll use a combination of Mocha and Should for unit testing our code.

Development Environment

• GitHub for version control. All new features are put in different branches and merged into master at completion.
• Atom with Nuclide as an IDE to developing in React.
• ESLint for syntax checking ES6.

Summary of requirements

Search for a facility

• User will enter the name of the facility in the search bar. The facility/facilities that matches the string are listed below the search bar.
  • If no facility is found the message "no matches found" is presented below the search bar.
• For the listed facilities a "details" button is available to slide open a details list below the entry.
• If a listed facility is clicked, the map will locate and zoom in on this facility and show all information on this facility.
  • If the users click on edit for the facility he can edit the following items.
    • Type of service
    • Location
    • Name

Filter search

• The user also has the option to filter searches. By clicking the filter button,a list of filtering options is listed below.
• The filter options are.
  • Type of service
  • Location
• The same functionality as normal search is available in filter search.

Map functionality

• The user can zoom in and out of the map.
• By clicking on an area the map will zoom in on this particular area.

Add new facility

• By clicking on the edit button can add a facility. This will bring up an edit window.
• When adding a new facility the user will be need to fill out the following fields.
  • Name
  • Location. Will require the user to click on the desired area on the map.
  • Service
  • Should do error handling when adding the fields.

Time Schedule

15. October 2016

Start of project, Git repository created.

16.10.2016

Chosen architecture React + Redux. Type checking with Flow. Eslint for pattern checking.

28.10.2016

Milestone: Documenting the features and architecture on the Wiki

27.11.2016

Milestone: Final delivery

07.12.2016 - 09.12.2016

Milestone: Group presentation

Task division

Kjetil

• General architecture
• Navigation through hierarchy
• Deleting Facilities

Henning

• Map component using Google Maps API
• Navigation and search result visualisation in the map

John

• Detailed facility information panel
• Editing and adding facilities

Screenshots and screen flows

Link to repository

https://github.uio.no/kjetsva/kjh

Repository is private.