G2TX Project Update: Basic Web Interface Prototype

In the last two weeks I’ve made quite some progress with the G2TX project in work.

The project lead Luca Debiasi gave me a very basic brief and then left me largely to my own devices. I was given access to the cloud endpoint API and asked to build an web interface for displaying the data that was being stored there.

I decided to use angular.js to retrieve the data from the API as well as to add dynamic  functionality to the html.

As I had very little experience with the angular framework I took a couple of days to teach myself, using the CodeSchool ‘Shaping Up With Angular.js’ course as my main resource.

I used bootstrap to add basic styling to the HTML elements. I took inspiration for the layout of the UI from a DCU students final year project. You can check out his work here.

After two weeks hard work this is what I’ve come up with, below is the initial screen presented to the user upon loading the page.


I ran into a bit of an issue a couple of days into the development due largely to my design.

Every time the page was refreshed a function is called to initialize the google map. This piece of code was also calling the function to retrieve all data from the API. Which meant that every time the page was loaded a request was being sent off. Since I had spent a lot of time fiddling around with some UI components I had inadvertently sent a huge amount of traffic to the server.

Unknowns to me at the time Luca was also testing the android component of the project abroad and between the two of us we went over googles API request quota. This resulted in me wasting a couple of hours trying to troubleshoot my angular code to find out why I was getting a 503 Response.

To get around this I redesigned my code to initialize the map with no data when the page is loaded. Then when the user clicks the ‘Get tracks’ button a function is called to request the data from the API and then plot the points onto the map.

Here’s a screenshot of the latest version of the project.



At the moment all data is being requested from the server. Next on my to do list is to take the values from the form and build a custom query to retrieve specific data.

I demo’d the prototype in its current state to the accelerators development team at Guidewire. I received good feedback and a lot of interested in the project.

I plan to add more advanced search options to retrieve data with finer granularity.

If you’ve any questions about this project don’t hesitate to get in touch.