HyperDrive: Update #10

Intended Audience: Marija Bezbradica (FYP Supervisor)

Made progress with:

  • Script to start, stop & restart the HyperDrive application on the server.

I wrote a bash script to simplify the tedious task of starting, stopping and rebooting the application on the server.

The script takes a string as a parameter, the string can either be ‘Start’, ‘Stop’, ‘Restart’. The script contains a case for each event.

When the server is started the output is piped into a log file and the process id is stored in another file. When stopping the process id is read in from that file and the process is killed. The rebooting case is a combination of the first two.
Screen Shot 2016-05-24 at 18.03.57

HyperDrive: Update #9

Intended Audience: Marija Bezbradica (FYP Supervisor)

Made progress with:

  • Writing integration tests for API.
  • Writing unit tests for front end.
  • Implementing E2E testing with protractor.

I left the implementation of most of the testing for the project towards the end so I favoured implementing a number of different types of testing rather than being concerned with a high level of code coverage.

Early in the development process I set up a continuous deployment pipeline to build, test and deploy the project to my development server, after each github commit. I made use of github’s webhooks to trigger a Jenkins job. There was a number of steps involved in the process, Jenkins would:

  • Wipeout the local instance of the project
  • Clone the codebase from github
  • Download all dependencies
  • Run all tests (if successful):
  • Build the project .jar file
  • Connect to development server over ssh
  • Check if an instance of the project was running and stop it.
  • Copy .jar to the server
  • Execute the start script to run the project.

My testing of the API consisted of unit tests for a number of components as well as integration tests for the API endpoints.

I wrote a number of jUnit tests for the Security Utils class. This class is responsible for getting the current user, establishing if they are authenticated as well as checking what roles they are associated with. Each method in this class had a corresponding unit test to establish that they were behaving as expected.
Each of the rest endpoints was given a corresponding test class. These tests differ from the unit tests above because they require a full instance of the application to be running in order for them to execute.

I used the Spring Test Context framework to test almost all of the API methods. The basic workflow of these tests would be to assess the state of a repository, use the MockMVC class to simulate an API call and then assess if the API response was as expect and if the repository had been modified accordingly.

Marking these tests with the @Transactional annotation informed the system to revert the transaction after the test had been completed.
Unit testing for the web application was written in Jasmine and run with KarmaJS. They mock up access to the REST endpoints to enable testing of the UI components.
I used Protractor to automate tests for the front end. Protractor is an end to end testing framework for AngularJs built on top of Selenium Web Driver.

When run it opens a firefox window and simulates click through behaviour. It then evaluates the system behaviour against its expected behaviour.

HyperDrive: Update #8

Intended Audience: Marija Bezbradica (FYP Supervisor)

Made progress with:

  • Server metrics & health checks.
  • Debugging issue with hyper-lapse library.
  • UI improvements to indicate requests are being processed.

Spring Boot Actuator https://github.com/spring-projects/spring-boot/tree/master/spring-boot-actuator is a project built upon Spring Boot which simplifies the addition of monitering and metric gathering functionality.

Using Spring Boot Actuator I was able to expose a Metrics endpoint. Using this endpoint an administrator of the application can view:

  • JVM Metrics: such a memory usage, threads and garbage collection.
  • HTTP Request: amount of requests coming to the API.
  • Ecache & Datasource statistics.

Screen Shot 2016-05-24 at 17.52.13

By evaluating the above metrics a system administrator could make informed decisions about infrastructure requirements and system optimizations tasks.
Spring Boot Actuator also enables us to perform ‘Health checks’. Health checks determine if essential components of the system such as the email server or the database are functioning correctly.

Today I finally got the hyper-lapse functionality to work. Initially I encountered a number of issues while trying to integrate the library into the project. The code I had been using at the start of first semester to test out the library was no longer running. It was logging a number of javascript errors to the console. After quite a bit of digging around I found a solution to the problem in the ‘Issues’ section of the Github repository. It seems like a number of individuals were encountering the same same issue.

Following the advice from the github thread I was able to make a number of adjustments and get the code running.

The video itself takes quite a bit of time to generate, this is due to all the requests that need to be made to Google API. The average time seems to be about 30 seconds. I added a spinning gif within a message dialog at the top of the page, to indicate to the user that their request is being processed.Screen Shot 2016-05-24 at 17.49.17 I made use of the ‘ng-hide’ directive to hide this message once the hyper-lapse is ready to be played.

Screen Shot 2016-05-24 at 17.50.38


HyperDrive: Update #7

Intended Audience: Marija Bezbradica (FYP Supervisor)

Made progress with:

  • Overcoming issue resulting in map being drawn without markers.

Recently I’ve struggled with an unusual bug concerned with Google Maps. When a user navigated to the page that ‘journey-map’ page by clicking a hyperlink the map would remain blank. Although if the user refreshed the page the makers would be added to the page after it was reloaded.

I couldn’t make sense of the issue while debugging it. The request for the points was showing up in the server logs and I was even able to log the points to the console. The thing that made the issue so difficult to debug was that every now and then the points would load on the page as expected. While this was a rare occurrence it made me doubt my systematic approach to troubleshooting.

When a request is made for a resource using Angular a promise is used as sort of a placeholder for the data that is to be returned. When the controller was being called I was immediately drawing the map. This resulted in the map being drawn before the promise was resolved resulting in a blank map, yet the points were still being logged to the console.

The solution to this problem was very quick to implement but one that required a thorough understanding of how angular interacts with an external service. I changed the behaviour of the controller to only add the points to the map after the promise had been resolved. This instantly solved the problem that I had spent days troubleshooting.

Screen Shot 2016-05-24 at 18.00.28

HyperDrive: Update #6

Intended Audience: Marija Bezbradica (FYP Supervisor)

Made progress with:

  • Setting up Cordova plugin.
  • Updated mobile UI
  • Transmitting data to the server

In order to get the users current lat, long, altitude and speed I am making use of the Cordova GeoLocation plugin. https://github.com/apache/cordova-plugin-geolocation

It provides a javascript interface to the phones native GPS capabilities. The GitHub page has detailed instructions that I was able to follow in order to integrate it into the mobile application.

I made a number of changes to the sample project I had been working on to bring the UI in line with the projects requirements. Below are some screenshots:



I have also implemented services to encapsulate the logic required to interact with the REST API. When the user clicks start driving a request is sent to create a new journey, the server responds with the journey_id which is stored and transmitted with each point as they are recorded. When the user clicks end journey the current journey id is removed from local storage.

HyperDrive: Update #5

Intended Audience: Marija Bezbradica (FYP Supervisor)

Made progress with:

  • Building basic authentication app with Apache Cordova & Ionic framework.
  • Issues communication between mobile app and server. (CORS)

I built a very basic Ionic application which supports token based authentication and authorization.

The app uses ‘angular-mocks’ to simulate a backed. Angular-mocks intercepts http requests and processes them according to the rules you configure.When a user logs into the app a request is made to a back end server with a username and password.I have hardcoded in some behaviour for two types of users ‘user’ & ‘admin’.The regular user has access to the ‘dashboard’ & ‘public’ tabs, while the ‘admin’ user has access to all tabs.

On each state change the app checks if the user is authenticated and authorized. If the user is not authenticated they will be directed back to the login screen. Below are some of the screenshots from the app. On the right the app is making a request for a resource without authentication.


After getting the basic mocked functionality working my next step was to make calls to my own API for authentication.

I changed the request being made to add scope, grant type, client_secret, client_id as well as the Basic authorization header.

Screen Shot 2016-04-04 at 19.55.58Screen Shot 2016-03-22 at 12.48.21The above error provided me with quite a bit of difficulty. I was faced with this error when trying to login from the mobile app. I was sending the exactly same request as I was from the web application but I was getting different behaviour. After quite a bit of frustration and research I found out why I was encountering different behaviour.The web application and the API are currently part of the same project, so that when API calls are being made from the front end they are coming from the same origin as the API.

The way I had the project initially configured did not support CORS (Cross Origin Resource Sharing).

If you’re not familiar with CORS the wikipedia page say:

CORS is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the resource originated. 

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 was able to get around this issue by using a filter that allowed CORS requests:

Screen Shot 2016-04-04 at 19.31.24and updating my web security configuration:
Screen Shot 2016-04-04 at 19.33.08