The goal of the project “Social Driving Stats” is to develop a mechanism for sharing tracks and user details on social media services such as Facebook, Twitter and Google plus. By avoiding messages that only contain plain text, we aim to share the statistics and details in a catchy manner, which drives social media users to use the enviroCar service. Thereby, one challenge is how to deal with the various restrictions using the social media APIs provided.
In the first term, we were mainly focussed on extending the front end component, which is in the enviroCar-WWW project, with sharing facilities. In the meantime, we also started developing the back end component. We maintained a continuous communication through Trello, mailing lists and Skype meetings for the execution of the tasks. The main tasks we considered in the first half of our project were:
- Finalizing an approach to provide statistics and other details via social media. This included the design for the posts on various social media sites.
- Improving the enviroCar website to provide track level sharing functionalities along with the track statistics.
- Initializing and developing basic functionalities of the enviroCar server component for computing statistics and rendering images.
Finalizing the designs
For publishing statistics with the track, the details are integrated into an image which is then shared on social media sites. The first milestone reached was the design to integrate the statistics with the track visualization. So we created several designs for the image and we finalized on this design.
Fig 1.1 The finalized design for the posts
Further, we thought about generating this image on the server side and exposing it as a REST resource. Thus, the enviroCar website can consume the service, use the image for the preview on the track listing, and publish the rendered track with statistics on social media sites. This image heavily depends on the details and statistics of each track. The image is rendered on-line when the request is made from the track’s page and stored on the server side to serve subsequent requests. The image rendering part happens on the enviroCar server, so we have to write several modules to get the final outcome. The overview of the architecture we finalized is given below.
Fig 1.2 Overview of the project components
Development of sharing functionalities
The sharing functionalities were first developed as it is the core functionality required in this project. Each of the social media sites provides different APIs for sharing functionality. For Facebook sharing, we thought of using the Opengraph API because it allows user to publish Opengraph stories (Ex.: John Doe shared a track on enviroCar). So we had to create a Facebook application for OAuth requirements and grant access to the Opengraph API. Publishing media (images in our case) is also possible with the Opengraph API. To access the Opengraph API we used Facebook JS API in the enviroCar website implementation.
For Twitter we used Twitter’s general template, known as Twitter Cards. These cards also allow sharing of media along with the regular tweets with URL. In order to publish a Twitter Card post, the application should be approved and whitelisted on Twitter. So, for now, it only shares a regular tweet. In Google plus we found that it actually doesn’t provide an API to “write” on Google streams. As a result, we had to use the social plugins they provide as a workaround. Google’s share plugin also allows publication of an image on the shared posts. Since the back end component in the envirocar server is still being devloped, these functionalities still share a random static image at the moment. As soon as the server component is exposed, we can use it as the image to be shared.
First steps to server component
The image in Fig 1.1 is the finalized image that should be shared on social media. Due to the architecture defined in Fig 1.2, the image is completely rendered inside the enviroCar server and exposed as a REST resource. This REST resource can then easily be accessed by the enviroCar website. The first steps for the development of server component have already been taken. The approach we took to render the above image is stated below:
- Retrieve tiles from OSM WMT (web map tiles) service and render it to output an image in a desired resolution.
- Draw the route of the track on the rendered tile set using GeoCoding mechanisms.
- Retrieve the track statistics through server DAOs and integrate them to the image according to the finalized design.
- Expose the fully rendered image as a REST resource.
As of now, we have developed a REST resource to output a static image integrating the statistics retrieved from server’s data service. Furthermore, the initial module for geocoding and drawing the route on tiles is basically developed. It draws a route according to the track’s coordinates when a single tile is provided.
- Develop tile renderer module to download the required tiles, which include all the coordinates in the track and assemble the tiles to provide a single map image.
- Develop image renderer module to be more responsive to support integration of statistics to images of various resolutions and sizes.
- Get approval for Facebook and Twitter applications and publish the apps so that it can be used by the general public.