HyperDrive: Update #4

Intended Audience: Marija Bezbradica (FYP Supervisor)

Made progress with:

  • Basic API functionality.
  • Basic UI for registration / login system.
  • Email account validation.

I have completed the basic functionality of the web application. A user can create an account, log into an account and update their information.

As well as some custom CSS the web application uses bootstrap (HTML / CSS framework) with a Material Design theme to make it look a little more professional.

The image below is the initial screen a user will be presented with. At the moment the phone picture and text are just placeholders, which will be updated when the project is completed. Screen Shot 2016-04-04 at 20.34.17

From the nav dropdown ‘account’ a user can choose to either login or register and the appropriate screen will be displayed to the user.
Screen Shot 2016-04-04 at 20.34.30 The registration form fields have some form validation before the ‘register’ button at the bottom becomes active:

  • All fields are required.
  • Email address must have valid syntax.
  • Password must be more then 5 characters long.

There is also an indicator to show users how strong their password is.

Screen Shot 2016-04-04 at 20.34.49

After the user clicks register they are asynchronously sent an email which has a link containing their activation key. The users account does not become activated until the link gets clicked.

I am using a gmail account to send these emails. If I have time left over at the end of the project I might make this look a little more impressive. Here is the email a user receives:

Screen Shot 2016-04-04 at 20.55.55

This screen allows a user to update their information.Screen Shot 2016-04-04 at 20.58.13

Once the user has successfully logged in the ‘Journeys’ option becomes visible in the menu bar. The is the screen that will display a list of the journeys a user has made.

At the moment it holds an embedded google map as well as a basic layout which I shall be improving upon.

Screen Shot 2016-04-04 at 20.36.42

HyperDrive: Update #3

Intended Audience: Marija Bezbradica (FYP Supervisor)

Made progress with:

  • Implementing oauth2 on server.
  • Building basic todo app with Apache Cordova & Ionic framework.
  • Redesigning application entity models.

I’ve been able to implement oauth2 implicit flow (a.k.a. client side flow) in a basic spring boot application. Below is a diagram I found online which helps to visualise the process. In my case the Authorization & REST API tasks are both being handled by the same server.

To speed up the development of the server I used a hard coded username and password. Below you can see a screen shot containing the request parameters. I am using the postman HTTP request client to test the api. oauth2 params

The request also has an ‘Authorization’ header set which contains ‘Basic’ + client_id : clientsecret encoded with base64.

oauth2 request header

When all of the parameters are valid and the username & password match a valid user, an access token and refresh token are generated. These are currently being stored in an h2 database along with a time to live for the tokens. The time to live indicates how long the tokens are valid, before requiring the user to re authenticate with their credentials.

Below is the response received from the server when correct credentials are supplied.

oauth2 responseFor the purpose of this project the server will be using http to reduce complexity. In a real life production environment this type of authentication protocol should always be implemented using HTTPS!

While developing the server has been my priority thus far I have also spend some time getting to grips with mobile development using Apache Cordova and the Ionic framework.

After spending some time reading up on the documentation for both projects I started off by building a basic ‘todo’ application by following a youtube tutorial.

Here are some screenshots I stitched together with photoshop:

todo-screen shots
This project makes use of some basis Ionic components such as:

  • ion-pane
  • ion-header-bar
  • ion-content
  • ion-list
  • ion-item
  • ion-option-button
  • $ionicPopup
  • $ionicListDelegate

When I wasn’t working on the server or mobile application I put some thought into refining the design of the project entities and their relationship with each other.

Here is a diagram of my current entities as they stand. These entities might require some slight changes as the project progresses.Screen Shot 2016-04-04 at 18.59.13

HyperDrive: Update #2

Intended Audience: Marija Bezbradica (FYP Supervisor)

Made progress with:

  • Learning Spring Boot
  • Setting up build / deployment pipeline
  • Setting up mobile development workspace

Learning spring:

Over the last couple of weeks i’ve put a considerable amount of time into learning the basics of spring and spring security.

  • I built a simple login application using basic security.
  • Next is to implement oauth2.

The front end AngularJs code and the API are all in one project at the moment. I’m using the Wro4j maven plugin to resolve the angular dependancies and optimize the resources. I plan on splitting the front and back end into two separate projects. This will give me more flexibility with the tools I use while developing the front end.

Build pipeline:

I’ve spent the last few days setting up the build pipeline, refer to previous post for more details that the process involved. Here’s a basic overview of the system:

  • On each code commit a webhook triggers a Jenkins build.
  • Code is cloned from github, tests are run, if tests pass project jar is built.
  • Jenkins run command to stop HyperDrive API via ssh.
  • Jar file is copied to deployment server.
  • Jenkins starts API via ssh.

Mobile application:

  • Spent time learning the basics of Apache Cordova.
  • Set up development environment.
  • Built basic application using IONIC framework template.
  • Launched application via iOS emulator.

HyperDrive: Update #1

Through my work on SidelineStats & G2TX I gained some basic android development experience. I’ve decided to make a start on the HyperDrive project by focusing on the server side code first.

As aforementioned I will be developing the server using Java and the Spring framework. I spent a very brief period of time working on a spring project at Guidewire but I barely scratched the surface. I’ve decided to learn the framework from scratch from a Udemy course.

So far in the course I’ve covered:

  • Getting started with Spring (Hello World).
  • Basic bean configuration.
  • Autowiring

I’ve started a very basic project to follow along with the Udemy course to learn the fundamentals. The code can be found over on my github page. Its been brought to my attention that xml configuration is the old way of doing things. Once I get through all the course material I will start looking into java based configuration.

To get a better idea of what rest services I will need to expose I’ve started working on a list of all the desired functionality of the website, I aim to have this completed by next week.

The week I also plan on putting quite a bit of time into writing the functional specification for the project.

 

Here is some of the articles I’ve read this week to help with the design of the api:

 

Introducing: HyperDrive

A big focus for me this year academically is my final year project. Here’s a brief rundown of the idea, how I came up with it and the technologies I will be using.

Background

In September I finished a six month internship with Guidewire Software. Guidewire is a market leader in software for the insurance sector. During the internship I worked on an experimental project called the ‘Google For Guidewire Telematics Experiment’. The aim of the project was to develop an android application that would communication via bluetooth with a cars onboard computer via OBD2 adaptor, and send data about the trip to the cloud. This data would then be sent to PolicyCenter (a core product from Guidewire’s insurance suite used to issue insurance policies) where it would be fed into the rating engine and the premium would be adjusted accordingly.

Working on this project made me curious about how similar technologies could be used in a consumer context as opposed to an enterprise context. I spent weeks trying to come up with a creative and novel way to use driving data to provide end users with a new exciting experience.

Description

My idea is to build an application that uses an android phones / tables built in GPS and accelerometer functionality to record data about a car journey. This data is then sent to the cloud. The user can then go to the web interface using a browser and log into their account. On their account they can see a list of all the journeys they have made. The user can see exactly the route they took overlaid on to google maps. The user will have the option to annotate these points with information relevant to there journey, if they passed some interesting land mark etc..

Beside each journey the user will have an option to view a hyper-lapse (exposure technique in time-lapse photography, in which the position of the camera is being changed between each exposure in order to create a tracking shot in time-lapse sequences) style sequence of their journey. This hyper-lapse uses google street view combined with the geolocation data to build up the video. In addition to the video the user will be presented with some basic metrics for each journey as well as some average metrics for the whole account. If time permits I would also like to use the Instagram developers API to gather a stream of photos taken along the route to make the experience feel more interactive and engaging.

The user will then be able to generate a public link to view this journey or share it publicly to their profile. The site will also have a secondary function. Without registering for an account users will be able to type in a start and a finish address and have a hyper-lapse video of a route between the two points generated. 

Justification

Since the functionality of this application is somewhat novel I do not expect its user base to use it on a daily basis. It is target towards holiday makers and else anyone who will be making long journeys that they don’t make regularly. The project is being built primarily as a holiday journey log and route preview tool, where key locations can easily be marked up on the users map with added notes. These journeys can then be shared with family and friends. The google street view generated video can give people an idea of the scenery and sights along the way.

Languages:                                                                         Tools:

Java                                                                                       Spring MVC 

JavaScript                                                                            Android SDK

HTML                                                                                   Angular.js

CSS                                                                                        ApacheTomcat

SQL                                                                                       Bootstrap