Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Google Summer of Code 2016

Overview

This is a summary of the work I completed during Google Summer of Code 2016.

I contributed to Green Navigation, a great open source organisation run by volunteers at the University of Lübeck, Germany. It is an innovative project with large potential to promote the use of electric vehicles by providing users with a robust tool to compute the most energy-optimal routes. The focus of my proposal was to revamp the front end of the web app and integrate a few new features such as live weather, precipitation, and traffic data.

Design

I started off by designing a logo and a color scheme along with brand guidelines, adhering to the Material Design guidelines. The new design first saw light in the project's wiki. I migrated it to a static site generator called Jekyll and used a few Polymer elements to style it.

The wiki can be found here: http://greennav.github.io/about.html

Driving directions

Then I transitioned to the main part of the project - the front end of the web app. I proposed a couple of designs to my project mentor @maxlorenz, and after I got the green light I began messing around with the boilerplate for Progressive Web Apps. I redesigned the navigation menu to make it look clean and polished. I made sure that API calls are constructed correctly from the route parameters, as the back end is not implemented yet.

My commits for the webapp repo are here: https://github.com/greennav/webapp/commits/master?author=marksurnin

gn-map component

Once the 'shell' was done, I moved on to the more technically challenging piece - the gn-map component, which would later become 'the canvas' to display the route on. The existing implementation had Google and OpenStreet maps implemented into it. The OpenStreetMap API proved to cause many issues, and after researching available options I decided to explore the Leaflet map. Then I began to integrate weather, traffic and precipitation data into the web app. I used OpenWeatherMap and Google Maps Javascript API to pull in the data and display it on the map. I ran into many issues while synchronising the state of the weather parameters when a user would swicth map providers, but eventually I managed to do that.

My commits for the gn-map repo are here: https://github.com/greennav/gn-map/commits/master?author=marksurnin

Final edits

I then ran polylint on the Polymer elements in our codebase - suprisingly, the linter did not complain much, which shows the benefits of code review :)

The final part was deploying the Progressive Web App. After going through a few codelabs put together by the Polymer team I managed to deploy the app to Firebase. It is live at https://green-navigation.firebaseapp.com/. Nevertheless, I managed to run into issues at the final stage of GSoC as the cross-domain-origin header (CORS) is not enabled on the openweathermap.org. Thus, the live weather feature is affected in the firebase version of the app. It works perfectly when served locally, though. That's the only thing left to do and my mentor and I are working on it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment