Difference between revisions of "KJH"
(Tag: Visual edit) |
(→Henning) (Tag: Visual edit) |
||
(One intermediate revision by the same user not shown) | |||
Line 19: | Line 19: | ||
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'. | 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: | 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 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. | ||
Line 30: | Line 30: | ||
At last, we'll use a combination of Mocha and Should for unit testing our code. | 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. | * 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. | * Atom with Nuclide as an IDE to developing in React. | ||
Line 46: | Line 46: | ||
*** Name | *** Name | ||
'''Filter search''' | '''Filter search''' | ||
− | * The user also has the option to filter searches. By clicking the filter button, | + | * 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. | * The filter options are. | ||
** Type of service | ** Type of service | ||
Line 85: | Line 85: | ||
==== Kjetil ==== | ==== Kjetil ==== | ||
* General architecture | * General architecture | ||
− | * | + | * Navigation through hierarchy |
− | * | + | * Deleting Facilities |
==== Henning ==== | ==== Henning ==== | ||
* Map component using Google Maps API | * Map component using Google Maps API | ||
− | * Navigation and search result | + | * Navigation and search result visualisation in the map |
==== John ==== | ==== John ==== | ||
* Detailed facility information panel | * Detailed facility information panel | ||
− | * Editing and | + | * Editing and adding facilities |
==Screenshots and screen flows== | ==Screenshots and screen flows== |
Latest revision as of 11:33, 9 December 2016
Contents
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
- If the users click on edit for the facility he can edit the following items.
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
Suggested improvements to APIs etc
Documented learning during project
Link to repository
https://github.uio.no/kjetsva/kjh
Repository is private.