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:

Advertisements

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.