GSoC Week 1: Setting Up the OWA

The motivation behind these blogs is not only to serve as a log of all the work done during the week, but also be a helpful guide for anyone else who wants to build an OpenMRS OWA using React in the future!

The Project Currently Resides Here! [GitHub Link]

As mentioned in the last blog post (you can read it here) , our target for GSoC is to build an Open Web Application for the Patient Flags Module using ReactJS and Redux.

But First, What is an OWA?

According to the ‘Mozilla Archive of obsolete content’ (😥 err, this ‘obsolescence’ is a bit debatable) an OWA or ‘Open Web Application’ are webpages that are built using standard web tech like HTML, JS etc. but can also be installed on devices and used offline. This criteria requires these webpages to have pseudo cross-platform functionality. And it is exactly this cross-platform-ness that makes React the perfect candidate to build OWAs with!

Setting up the OWA

For two days, the ghost of Yeoman visited me in my nightmares 😆
  1. Scaffolding:

Step uno to our multi-step extravaganza is to setup a scaffolding. For this, we shall use the Yeoman Generator.

Run the following commands to install the Yeoman Generator (Yo) and setup a basic project structure:

  • Install dependencies: npm install --global yo
  • Install the generator: npm install --global @openmrs/generator-openmrs-owa
  • Create directory for your app: mkdir openmrs-owa-myapp && cd $_
  • Run yo @openmrs/openmrs-owa to scaffold the Open Web App
  • Run npm run build:prod to build distributable zip file
  • Run npm run build:deploy to deploy directly to your local server
  • Run npm run watch for live reloading

Once you’re done, you are pretty much good to go. Scaffolding using Yo sets up the basic HTML & CSS code — gives you a pretty header and body style. More importantly it sets up the webpack config and comes with Browsersync that allows live reload and is super duper trooper important during development.

2. Upgrading: The Problem with Yo for OpenMRS

OpenMRS OWA Generator is pretty old. The generator is in version 0.7.1 and was last published over a year ago. This poses a problem — when you setup your scaffolding using Yo, the packages it sets you up with (see package.json file) are pretty old too (heck it comes with Webpack 1.15!) Hence, for your future metal well-being, it is pretty important to upgrade our dependencies.

You can do it the old fashioned way by upgrading each dependency by hand by running —

npm install <package_name> --save/--save-dev

Or you can use ncu. [Checkout this Stack Overflow link to know more]

😄Tip: Whatever you do, stay away from upgrading to Webpack 4. Not only are there drastic changes to plugin support, but it somehow messes everything up. I literally wasted 2 days trying to figure my mess out. Currently I’m running v3.x — I’ll get back around to this later, upgrade to 4.x and report my results.

This person made me go around in circles too many times. Especially when upgrading to Webpack 4.

3. Avoiding Rookie Mistakes 😞

In the webpack.config.js file you shall find the ‘LOCAL_OWA_FOLDER’ config. Irrespective of operating system, do make sure your path looks similar to this —


4. Project Structure

You can see the project structure evolve here. But I tend to prefer Angular’s modular ‘neat and tidy’ approach as opposed to React’s ‘wild-wild west’ one. Check out this great article by Alexis Mangin to know more about the philosophy behind our future project structure.

Claiming Tickets & Building the Patient Tag Component

Since we are being Agile [check out our Scrum Board], we’ve broken the development into a number of sprints. Each sprint has a duration of 2 weeks.

😄Tip: We are currently undergoing Sprint#1! Check out our progress here.

Currently I’ve claimed tickets — FLAG-45 & FLAG-46. While work on FLAG-45 is complete, we’re 50% through FLAG-46. We’ve successfully setup the project.

We’ve also built the UI for the Tag Component — we’ve written the routes, the modals and ensured data transfer between the component and it’s modal. We’ve used React-Table package and introduced an extremely versatile table generator. We’ve also introduced a new feature — glyphicons to represent various tags along with tag colors. These together are called ‘Indicators’.

TODOs for Week 2 of Sprint#1 —

  1. Integrate reference-app style guide & openmrs-react-components
  2. Test ‘Tag’ endpoint.
  3. Write API service, define DTOs (data transferable objects) and mapping service for the ‘Tag’ component.
  4. Introduce Tabbed-Content in App page.

Here are a few screenshots to demonstrate our progress —

Current Single Page UI
Edit Tag Modal (without styling)
Populated table showing delete Tag functionality & indicators [ hex representation as well as glyphicons]

The Project Currently Resides Here! [GitHub Link]

GSoC 2019 @ OpenMRS | I’m a software developer with ❤ for NLP and UIs. You can see my ML & NLP blog here —