Add Support for Open Web Apps

Owned by Former user (Deleted)
Last updated: May 23, 2015
4 min read

Add Support for Open Web Apps Project Proposal:

Problem Definition

OpenMRS has a modular architecture that allows modules to be easily added or removed from the system.In order to extend the functionality of OpenMRS, you have to create an OpenMRS Module which are often tied to particular OpenMRS version and sometimes  are dependent on specific versions of other modules. However creating a module requires knowledge of Java, Spring, Hibernate, JSP,OpenMRS Java API design .All of these facts hinder in extending the functionality of OpenMRS. With the OpenMRS REST API becoming more mature, it makes sense to be able to allow developers with just HTML and JavaScript knowledge to extend the functionality of OpenMRS by using Open Web-Apps. 

What are Open Web-Apps? 

Open Web Apps are essentially no different than standard websites or Web pages. They are built using standard open Web technologies — HTML, CSS, JavaScript, etc. — and can be accessed using a Web browser.

Goal of the project

The goal of this project is to enable the use Open Web Apps with OpenMRS .The module allows packaging of the OpenMRS reference application components as an OWA that can be used by other Open Web Apps or modules.

Implementation Plan

Objective 1

It should be possible to upload an Open Web App to OpenMRS via the UI and the App should function as expected (expand the owa module)

The primary aim of the project will be to ensure the correct working functionality of the OWA Module by making it possible for the users to upload a Open Web App to OpenMRS via the User Interface. However we have respective UI screens designed for this in the existing app so we focus on the correct functionality of the OWA developed.This also includes writing unit tests and looking at edge cases and some validation on the manifest formatting. 

Objective 2

Build the core OpenMRS reference app element into components (suggestion to use Google Polymer)

Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.

Creating a simple custom element using Polymer:

  • Create a folder with name you want to give to your custom element 
  • Include a simple Index.html with a <script src bowercomponents/platform/platform.js>
  • Now using polymer-element(to give a name) and template tags you create a html and save with the name you want to give to the custom element(say hello-world.html)
  • Configure the server and test it in the browser

We can take this element forward add the styles,Data Binding,Click events or simply we can use the core elements defined (if they are of our use) and customize them.

Expected Elements to build using polymer:

  • OpenMRS Header (Existing) Few more enhancements to be done though 
  •  Registration Elements
  • Patient Dash Board Elements

We can retrieve the information we want using REST Web -Services where ever required.

For example, if we want to retrieve location we can make a core ajax call like

<core-ajax auto url="http://demo.openmrs.org/openmrs/ws/rest/v1/location/aff27d58-a15c-49a6-9beb-d30dcfc0c66e"
on-core-response="{{handleResponse}}"></core-ajax>   

Now We can use the custom elements which we have built into and deploy them into components in the designer.zip so that the end users can use them directly on the web pages they want to develop.

Objective 3

Add the components into the polymer designer (see packaged as an OWA - designer.zip)

 Adding our own components to designer

  •  Add a `metadata.html` file to your component's repository
  •  Add our component as a dependency in designer's `bower.json`
  •  Run `bower install` to fetch our component
  •  Add the path to our `metadata.html` file to the `index.html` file

Objective 4 

Use the polymer designer to create a webpage from the components 

After adding all the components into the polymer designer the user can now directly drag and drop the elements in the web pages he wants to design.

We will also have a video demonstration on how to you polymer designer to create web-pages describing the essential elements we have added in the components and their functionality.

Objective 5

Package the designed page as an OWA and downloadable as a zip 

Zip up our app's contents and give it the name package.zip. This file will contain all the app's resource files, including the (main) manifest.

  "name": "My App",

  "description": "My elevator pitch goes here",

  "launch_path": "/index.html",

  "icons": {

    "512": "/img/icon-512.png",

    "128": "/img/icon-128.png"

  },

  "developer": {

    "name": "Your name or organization",

    "url": "http://your-homepage-here.org"

  },

  "default_locale": 

Objective 6

Allow OWA to be pushed, downloaded, uploaded to/from Modulus.

Modulus currently supports .omod files and reading the config.xml now we make sure it also supports open web apps by first adding User Interface elements to add open web apps and make some changes to  the service layer so that should be able to support the .zip files,read the manifest.webapp and support the upload/download functionality .

Proposed Time Line

27th April to 17th May  

  • Interact more and more with the community get to know my fellow peers. 
  • Discuss proposal with my mentor to further understand and agree on the scope and requirements of the project.
  • Peruse through  Open Web Apps Code so as to get more familiarized on how it accomplishes it's tried out functionality and get well acquainted with it's source code as well 
  • Familiarize more with Google polymer.

18th May to 31st May 

  • Change the User Interface of the existing Module in sync with the styling of reference application
  • Display proper error messages to user
  • Write unit tests and look at edge cases and some validation on the manifest format

1st June to 28th June

  • Use Google polymer and build Custom elements using the Google polymer.
  • Add registration elements into the owa-common
  • Add patient dashboard elements into the owa-commons.
  • Correspondingly keep adding them to the Components Polymer Designer(designer.zip). 

29th June to 5th July 

  • Develop/Modify UI Screens to help developer to create a webpage from the components.  
  • Package them as a OWA and make it available for user to download 

6th July to 26th July 

  • Add OWA to be deployed from within .omod files
  • changing the functionality a bit ( .omod embedded owa should be available and deployed in the same folder as a normal owa zip) 
  • Allow owa-commons to be installed from Modulus

27th July to 2nd August 

  • Documenting the Module and add screen casts on how to use polymer.
  • Ensure end-end Functionality

3rd August to 17th August

  • Buffer Time of two weeks for any left over tasks.
  • If there are no left over tasks we build new workflows using the polymer designer and then released as an OWA
     .