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 firstname.lastname@example.org.
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.
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.
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.
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
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.