About Me.

Hello everyone,

I am Vishnu Rao and I am from Hyderabad,India.

I am a third year undergraduate student at Keshav Memorial Institute of Technology,pursuing my Bachelor of Technology (B.Tech) in Computer Science Engineering (CSE).

My mentor is @sunbiz and my project is OWA App Store .The main objective of this project is to develop a distribution platform for the OWA‘s.

I’m vishnurao on IRC and vishnuraom on Telegram.

Apart from coding,I love to travel a lot and I also build PC’s for my friends and family choosing the best configuration.:computer:

WEEK-2: The CORS issue.

Background:

As I  said before, my project is to develop a web application where end users can browse and download OpenMRS packages hosted on Bintray using the Bintray REST API.So I had to make AJAX (XMLHttpRequest) requests in order to communicate with the Bintray REST API.

Problem:

AJAX (XMLHttpRequest) requests have traditionally been limited to accessing the same domain as the parent web page (as per the same-origin security policy). “Cross-domain” AJAX requests are forbidden by default because of their ability to perform advanced requests (POST, PUT, DELETE and other types of HTTP requests, along with specifying custom HTTP headers) that introduce many cross-site scripting security issues.

I have communicated with Bintray support only to know that CORS standard is not supported by Bintray yet and that they will be adding this feature by month end.

Solution:

The response from the remote server to which we are making AJAX calls should have headers like this

  1. Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept
  2. Access-Control-Allow-Origin:*

Screenshot (437).png

The solution is to develop a proxy server which will add the required headers to the responses received from Bintray.

So I have developed a proxy server using the Expressjs framework which exposes REST endpoints from where I called  api.bintray.com  and added the required header’s to the response received from Bintray.

Here’s the final setup,My web app will be running on a port(say localhost:8000) and my proxy server on port(say localhost:3000). I will call rest endpoint exposed by proxy server  (localhost:3000/packages )  from my script in webapp (localhost:8000). The endpoint at (localhost:3000/packages )  contains code to communicate with Bintray, When the proxy server receives response from Bintray it will add required headers ( have a look at http://enable-cors.org/server_expressjs.html) and send it to browser.

I would like to thank Saptarshi and Rafal for guiding me through this blocker.

For more info on CORS also read:

http://blog.javascripting.com/2015/01/17/dont-hassle-with-cors/

enable-cors.org

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Summary of the work done for OpenMRS App Store Project -GSoC 2016

About OpenMRS:

OpenMRS is a software platform and a reference application which enables design of a customized medical records system with no programming knowledge (although medical and systems analysis knowledge is required). It is a common platform upon which medical informatics efforts in developing countries can be built. The system is based on a conceptual database structure which is not dependent on the actual types of medical information required to be collected or on particular data collection forms and so can be customized for different uses.

Project Abstract: OpenMRS App Store Project

The OpenMRS community has agreed to use Bintray as its distribution platform(relevant discussion can be found here.) and the aim of this project is to develop a web application where end users can browse and download OpenMRS packages hosted on Bintray using the Bintray REST API.

Mentor: Saptarshi Purkayastha

Work Done:

During the course of GSOC 2016, work was done on the  openmrs-contrib-appstore , openmrs-appstore-httpclient and openmrs-appstore-httpclient-docs repositories.

openmrs-contrib-appstore 

openmrs-contrib-appstore is a progressive web app made using Polymer .This project made use of the available elements in Element Catalog and https://customelements.io/.

The main objective of this project was to provide an interface for the end users to be able to browse and download various versions of the package.

With the current user interface, a user can browse through various packages available in different repositories.

Screenshot (22)

When the user first visits the site he is redirected to one of the repositories page,The description along with some details about the repository are shown.

The packages are shown with the information like owner of package,rating of the package and description.

After clicking on any of the package,the user will be directed to details page of that package.

Rest calls are made to routes /repositories and /alldetails

The header is shown by the appstore-header element and the packages are displayed by the appstore-packages element.

Screenshot (24)

The user can download the latest version of the package by using the download button on the top right.

All the info available about the package will be shown in the page.All the releases of the project are shown at the bottom of the page.

Rest calls are made to /details and /packagefiles

The details page is handled by appstore-details element.

Screenshot (26)

The user can search for the packages in repositories,the search query should match atleast one word in the packages name.

Rest calls are made to /search route

Search functionality is handled by the appstore-search element.

Screenshot (28)

 

The home page consists of static content,it does not make any Rest calls

The home page is handled by appstore-home element.

Screenshot (30)

The footer page is handled by appstore-footer.

Every polymer feature used in  openmrs-contrib-appstore is explained in the comments.

openmrs-contrib-appstore is hosted at https://omrs-9d43a.firebaseapp.com

Commits:

https://github.com/vishnuraom/openmrs-contrib-appstore/commits/master?author=vishnuraom

openmrs-appstore-httpclient

It is a proxy server for the openmrs-contrib-appstore made using the Expressjs framework which adds the CORS headers to the incoming responses from Bintray

Screenshot (32)

 

The above screenshot shows the response received from the /search route.

openmrs-appstore-httpclient is hosted at http://gentle-ravine-53112.herokuapp.com/

Commits:

https://github.com/vishnuraom/openmrs-appstore-httpclient/commits/master?author=vishnuraom

openmrs-appstore-httpclient-docs 

It is the documentation for openmrs-appstore-httpclient,generated using the SWAGGER EDITOR

Screenshot (34)

A screenshot showing all the routes of openmrs-appstore-httpclient.

Screenshot (36)

The documentation is hosted at http://fierce-castle-16314.herokuapp.com/docs/#/default

Commits:

https://github.com/vishnuraom/openmrs-appstore-httpclient-docs/commits/master?author=vishnuraom

Weekly Blogs

I have written the blogs every week during the GSoC period summarizing the work done during that week. These can be found here.

Further Improvements

The header and the logo is to be improved.

Implementing sorting of the packages based on various parameters.

Hopefully I will complete it by 30th of this month

Conclusion

I would like to thank my mentor Saptarshi Purkayastha and the community members for the support and the help provided.

It has been a great experience working with people around the world on some the upcoming technologies in the world. I have learnt so much in these three months and I will continue my contributions for OpenMRS in near future.

Contact

Suggestions for improvements are welcomed and If there are any queries, send an email to vishnumechineni@gmail.com.

WEEK-12:Updates.

Last week I have resolved the issues with the neon animations and updated the footer element.

I also tried various search bar elements available on customelements.io to implement the search feature.I found paper-search to be useful but I didn’t test it fully.

Hopefully I will complete the documentation by this weekend.

Cheers,

Vishnu Rao

WEEK-11:Updates.

 

Last week I have improved various aspects of application

Solved the issue with the initialization of service worker in the vulcanized version of app.

Updated the manifest.json file,so that we can add the openmrs shortcut to our home screen.

Documentation for the openmrs-appstore-httpclient using Swagger editor.

View the docs at https://github.com/vishnuraom/swagger-docs .

Fixed the rest calls with empty parameters.

Updated the readme file for openmrs-appstore-httpclient

WEEK-8:Unit Testing with web-component-tester.

As I said in the previous post Polymer provides us the web-component-tester for testing the Polymer elements.

Under the hood  web-component-tester uses testing framework mocha and assertion library chaijs.

We use the Behaviour Driven Development (BDD) style as it is more readable,the three interfaces chai offers are should,expect and assert.

More info on writing tests

Unit Testing with Web Component Tester — Polycasts #36

Testing AJAX with Web Component Tester — Polycasts #37

Browser testing with Travis & Sauce Labs — Polycasts #38

We can run the tests

1)By directly accessing the test pages hosted on the local server(fastest)

2)By installing the web-component-tester  npm package and using the command

“wct -p”(somewhat slow)

3)Integrating the repo with TravisCI and SauceLabs (We can test on any platform and on any browser)

 

Coming to the httpclient,using the async and dotenv npm packages in httpclient,made it more stable and secure.

The async package is used for making asynchronous calls and the dotenv package is used to load environment variables from a .env file

Next week I will be doing the following things
1)Use neon animation elements for some effects when transitioning between various pages
2)Improve the test cases
3)Vulcanize the app to make it production ready.

 

WEEK-7.

Even after including the service worker support,and the fetch time reduced to <10ms the iron-ajax element (in a dom-repeat) is not able to display the responses.

The solution I came up with is to have an express route which sends an array of details about the packages. We can use npm packages like api-cache to improve the performance on the httpclient side.

There are many useful elements on  https://customelements.io/ ,one of them is the  star-rating element which will show the ratings of various packages without any effort.

Using the custom elements is awesome as you get the entire functionality embedded into your app in a single line but for some elements it is very tricky to style them

 

The following week I will be working on unit testing and documentation.

WEEK-6:Improving performance by implementing runtime caching.

This week I wanted to show the details of various packages,when the available packages are first shown to the user.

But the Bintray REST API does not give out any details about the packages when we make a request to get all the packages available

The only way is to make individual requests for every package.

Making rest calls to every package has performance issues as we have to make several requests every time the page loads

To tackle the performance issues , service workers are very useful.

Polymer provides the platinum-sw elements for handling precaching and offline functionality.

There are some great tutorials about service workers and precaching on Google codelabs.

I can tell you that service workers are great and I spent huge amount of time learning it.

In the coming week I will be adding support for caching the responses from Bintray and using vulcanize to improve the performance.

Some useful resources

https://codelabs.developers.google.com/codelabs/using-caching/index.html?index=..%2F..%2Findex#0

WEEK-5: Updates

This week,I was able to download all the available versions of packages and I utilized most of the REST resources provided by Bintray!!.

I thought of working on the stats page this week but unfortunately OpenMRS and all the other open source organisations on Bintray are not given any premium privileges,so we cannot use Statistics & Usage Report REST API for showing statistics about downloads.

I have used the iron-list(previously I have used paper-cards to show the available packages) which provides the grid property and the packages can be easily put into rectangular boxes using the iron-flex-layout.

I have further worked on showing details of the package when we press on a particular rectangular box.The available versions are also shown along with the details of the package.We could also download various versions available.With the help of the download button at the top we’ll be able to download the latest version of the package.

I will be working on updating the design,footer,on reducing the no. of requests made to the server and improving performance.