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.
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.
The response from the remote server to which we are making AJAX calls should have headers like this
Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept
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:
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
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.
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.
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.
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.
The home page consists of static content,it does not make any Rest calls
The home page is handled by appstore-home element.
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
The above screenshot shows the response received from the /search route.
openmrs-appstore-httpclient is hosted at http://gentle-ravine-53112.herokuapp.com/
It is the documentation for openmrs-appstore-httpclient,generated using the SWAGGER EDITOR
A screenshot showing all the routes of openmrs-appstore-httpclient.
The documentation is hosted at http://fierce-castle-16314.herokuapp.com/docs/#/default
I have written the blogs every week during the GSoC period summarizing the work done during that week. These can be found here.
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
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.
Suggestions for improvements are welcomed and If there are any queries, send an email to email@example.com.
Last week I have resolved the issues with the neon animations and updated the footer element.
Hopefully I will complete the documentation by this weekend.
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
The last week I have worked on vulcanizing the application.
I have explored gulp, to automate the vulcanization process.
This article explains what gulp is and you can even get started with gulp in minutes after you go through the article.
I tried to animate the pages with the help of behaviours available in neon-animations element but there are a few issues.
Hopefully I will resolve those soon.
As I said in the previous post Polymer provides us the web-component-tester for testing the Polymer elements.
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
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
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.