Sunday, 16 July 2017

Week 7 - Writing tests for the components

After designing the components, I started writing tests for them and also manipulating the components as per the tests requirements. In previous blog post, I mentioned that I have been started writing tests using mocha and chai. But due to some of the unwanted and unresolved errors, I consulted my mentor for setting up a proper testing environment. As per his suggestions, I decided to move forward with the Jasmine and karma testing environment. While setting up the jasmine and karma environment too, I faced a lot of errors. Some of them were :
"webpackJsonp not defined" which was resolved by using a part of the webpack in the karma.conf file ignoring the input, output and "vendor" part of the webpack.
After that I came across an error which was "transition superseded" error. It was quite difficult to overcome this error as there was no clue provided in the error log stack and when I went to search the solution for this error on the Google, I was getting a variety of solutions for that. Checking all of them was not feasible so I tried experimenting with the dependencies involved in the package.json file.
Fortunately, I tried to run the npm commands manually, and I got the solution to that error (a temporary solution) which eliminated some of the possibilities of the errors which was roaming into my mind at that moment. It gave me a sigh of relief. Its still an issue but a workaround exists and I am currently discussing with my mentor on this issue.
I have basically tested the REST part of the components (which is the main part) along with the functions I have used in the components. Tests ran successfully without any error !! :)

Apart from writing the tests, I also introduced a loading functionality into the components during the period they make the REST calls. This will help the users getting a better experience. It will be showing a loading gif (downloaded from the google) whenever the components will take time in providing the search results.

My next aim is to first discuss the solution of the error ("transition superseded") with my mentor and to resolve it as soon as possible. Then, I will move towards my next part of the project that is devising a way to use FHIR module into the webapp !!

Thanks,
Ankit Kumar

Monday, 10 July 2017

Week - 6 - All about designing and testing components

This week was the most exhaustive as well as productive week so far. I improved the patient search component and also designed new components like Encounter Search, Observation Search and Provider Search apart from the patient search.

Now, this is what my components look like :

Patient Search :




Encounter Search :



Obseravtion Search :



Provider Search :



Apart from designing these components, I am writing the tests alongside with mocha and chai. Currently stuck at some error related to the mocha, chai and jsdom environment setup !! Hoping to resolve it soon. Most Probably I will be done with the tests at the end of the upcoming week !!

Thanks !!
Ankit Kumar

Sunday, 2 July 2017

Evaluation Week ( 2nd part of work period )

After completion of the 4th week of the coding period, it was the time of my first evaluation. My mentor (Pascal Brandt) gave me the green signal to continue further in this project as a part of GSoC 2017.
This week I worked on improving some of the previously introduced components and also on designing the new patient search component. The patient search component is almost completed this week. I also got the support from my mentor in debugging some of the part of this component's code. My codes were reviewed this week by my mentor and also got some comments on it.

I keep my work on this repository : https://github.com/Ankitkumar94/owa-testApp

I am now providing a gist of the components I have introduced in the openmrs-owa-generator.
This is what my patient search component looks like :




Still more work to be done on this patient search component !!

Other than that, I have used the openmrs-contrib-uicommons library to introduce some of the

components. So, basically we already have :

breadcrumbs component :





notification component :



which shows a toast like this :




translate component :




which translates a specific text in the language specified (as above) !!

Now, I will be working on some improvement of the patient search component and designing some

more components as decided here on the talk :  https://talk.openmrs.org/t/new-angularjs-components-for-openmrs/12146

Further, I will start writing the unit tests for the components after all the above things

(mentioned above) !!

Thanks,

Ankit kumar


Saturday, 24 June 2017

Week 4 : REST API (getting acquainted and playing with it)

I have already completed my deliverable for the mid term evaluations (as mentioned in my timeline  here ) and now I am heading towards my next month deliverables i.e after midterm evaluations.

After submitting my PR for the midterm ( PR Link ), I am now waiting for it to get reviewed by my respective mentors. In the mean time, I have started practicing on the technologies which are to be used for my next month deliverables. The most important of all is to get acquainted with the openmrs REST API (which I am going to use for the Patient Search component).

This week was a little bit unproductive because of my bad health. Hence I decided to go through the concepts of openmrs REST API and also through the concepts that how can I write best practice angularjs rest calls.

I am currently practicing the REST calls (GET, POST, DELETE, etc) on my own webapp which is linked through the npm.

How REST API's work ?


  • Termed as Representational State Transfer
  • There is a wiki link for the REST i.e  link
  • But, let me explain the REST full services in my own language.
  • Rest full services provides a way/medium for our applications to inter-operate with other systems using internet.
  • So, what it basically means is that using rest full web services, we can fetch or manipulate the textual representations (generally XML or JSON) of other web resources.
  • Generally the operations involved in this are { GET, POST, PUT, DELETE }
  • Using REST API is not a rocket science. It is just an URL having URI (uniform resource identifier) which is used to identify any particular person/patient while searching or creating operations.
  • We can fetch/manipulate the JSON/XML data (which we got through rest calls) by AJAX calls which can get the data in both formats i.e in XML as well as in JSON formats.  
The openmrs REST web services samples are present at the following link :

https://wiki.openmrs.org/display/docs/Sample+REST+calls

My next step towards this project will be to design a "Patient Search component"

Patient Search component :


This will be using the Patient api (through rest calls) to search for the patients through name or their unique identifiers.

I have tried the GET operation to fetch the patient details as follows :

http://localhost:8081/openmrs-standalone/ws/rest/v1/patient?q=John

** I may provide a more detailed post in few days

Monday, 19 June 2017

Using components from the "openmrs-contrib-uicommons" library

This week was the most productive week with the perspective of my project's progress. After resolving almost all the blockers and issues, I moved towards my goal to introduce the "openmrs-contrib-uicommons" and also to ensure that angularjs best practices to be followed throughout my whole process.
The main objective of this goal (introducing ui-commons library) was to make it easier for the novice developers to just reuse those designed components into their web-app as per their requirements. After this, a developer having some knowledge of javascript or angular can easily reuse these components with just a html tag. for example, just by "<openmrs-header> </openmrs-header>".
So, this would not only save the time of a developer but also can reduce their valuable efforts which they can apply in implementing their own innovative ideas.

Now, coming to the procedures that I have followed while using these components into my OWA Generator.
I have followed the instructions present on the ui-commons github repository i.e this link : https://github.com/openmrs/openmrs-contrib-uicommons/blob/master/README.md

Here almost all the instructions are present which is to be followed and they are designed in an extremely beautiful and understandable manner. I used these instructions and then converted the controllers mentioned there into my own best practice controllers using ES6 which are actually ES6 classes and not the functions (as mentioned there). I avoided the use of "ng-controllers" because its uses are deprecated now in the latest versions of the AngularJS and we have to design the OWA as it can easily be upgraded to the Angular v2.0 in future time. Hence, Instead of "ng-controllers" and "controller as" in the <div> blocks, I used components which contains all the information about the templates as well as the controllers. Using components increases the re-usability of the controllers and templates with just a tag which contains the name of the component we used at the time of declaring components. Hence, considered a best practice in AngularJs.

Initial steps anybody has to follow in order to use this library is :


  • To choose a good IDE / Platform which should not only consume less memory but also provides suggestions as per your technology and it should show error marks in case of any mistakes/errors.
  • For angular, we don't need any bigger IDE like Eclipse, netbeans, etc (You can use them but not recommended because of their large memory requirements). The recommended development platforms are Brackets, Atom, Sublime Text 3, Webstorm, etc
  • Now, if you are following the best practices or using ES6, you have to setup your ide according to that and also you have to add the required dependencies into your package.json file.
  • I have used WebStorm for the development process. For using Ecmascript 6 in this, we have to go to the file<settings<javascript<javascript language version<select EcmaScript 6.
  • Then, it will start to use and suggest the ES6 syntax and its components for you.
  • These steps are more complex in other platforms like Sublime Text 3 (but it is much more faster than the WebStorm). You can search them online, if you to use platforms other than the Webstorm.
  • After setting up your idea, we have to add the dependencies required into our "package.json" file. In our case, we are using the "openmrs-contrib-uicommons" library so we have to add them accordingly into our package.json dependencies. Ater adding that, we have to add some dev-dependencies for the plugins which we want to use (in my case, I used the 'angular' and 'eslint-angular' plugin), so they must be added.
  • After all these steps, now its time to inject the library into your modules. It can easily be done in a single step just by adding the name of the dependency into the square brackets (seperated by commas) of your module.   
Just like this :

angular.module('YourAngularModule',['openmrs-contrib-uicommons']); 

** This injects all the partial modules needed at once.

Then we can follow the instructions on how to access the variables and functions of the ui-commons library.
I have included these basics steps for those who are not satisfied with the components present
in the OWA generator and want to use some additional features from the ui-commons library.
Hope it helps !!

My work for this week is in this PR :  https://github.com/psbrandt/generator-openmrs-owa/pull/28







Thanks,
Ankit Kumar

Monday, 12 June 2017

Bugs ! Bug ! Bugs !

As the title suggests, this week was totally devoted to discover and fix new bugs which could have left a bad impression upon the user about the project !!

Finally, I got the solution to the bug on which I was stuck previously (with the combined efforts with my mentor).
I discovered a new bug in the OWA module which was creating problem during deploying the web app. Due to this bug, the browser was showing a "404 not found error" in case of deploying app through "openmrs-standalone" platform. So, I solved this bug using the "request" instance of the "HttpServletRequest" as "request.getContextPath()". 
getContextPath() is an interface in the javax.servlet which generates the context of the server. I used that context in order to generate the whole correct URL for the webapp.

There are many more issues discovered this week.
Link to some of the issues :




Thanks !!

Thursday, 8 June 2017

Solving the bugs !!

Solved the issue of local deploy directory for the window users.
The issue link is mentioned here :
https://issues.openmrs.org/browse/OMRSJS-17

This issue was creating problems for the window users by suggesting syntactically wrong default local directory and instead if in case any user put a right directory instead he/she will face problems because of the addition of trailing backslashes by the generator. Both of these problems were fixed through this issue !!

Started working on the issue : https://issues.openmrs.org/browse/OMRSJS-18
I am basically stuck at this issue and its a blocker in the path of my future progress in this project. Trying to get the solution for this issue shortly !!