JOGGY
MAKING YOUR LIFE EASIER WITH YOUR NEW JOGGY ROUTE
This project was part of “the Digital Shaper Program” hosted by the Techlabs Copenhagen in autumn semester 2020/2021
- Project Objective
With our project we aim to improve the jogging experience for people. With the use of the skill set we gained through TechLabs in respectively the Data Science and the Web Development track, we attempt to achieve this goal. The prospect of applying our skills and gaining new knowledge on the use of APIs and how to transform the frontend of an application was highly intriguing and among the reasons why we chose to approach this project.
Joggers can often find themselves in a situation where they are unsure what route to run; either because they are new to an area and therefore unfamiliar with their surroundings, or because they want to explore a new jogging route of a specific distance. Being unmotivated to exercise for these reasons is highly problematic as exercise plays such a huge role in achieving a healthy lifestyle. By developing a way for joggers to easily solve these problems we aim to drive their motivation to exercise and in this way contribute a little to the quality of life of the users while at the same time offering them an innovative and sportive way to explore their new surroundings.
Therefore, the project’s objective is to develop a website for joggers that generates jogging routes based on certain features — mainly distance and location.
2. Methodology
As a data source, we decided to use an API instead of a database due to the significant benefit it provides including data reusability and transferability of the same code in case of later modifications. Thus, our first task was to select an appropriate API that we could use as a data source. After the selection of four suitable APIs — Google Directions, Google Matrix, Open Routes and Mapbox — we created a checklist with specific criteria. As displayed in table 1 below, each API was evaluated based on our defined criteria according to a traffic-light color scheme (green = available; yellow = partly available or unsure, red = not available). We selected the Google Directions API and the Open Routes API as the most viable for our project and further discussed both options. While the Google Directions API seemed promising due to its many features and popularity, we finally decided to choose the Open Routes API due to its variety of features, helpful sample codes and — most importantly — the availability of a random route generator. Subsequently, we created an account at Open Routes Service and obtained an API key to fetch the data.
Table 1: API selection table
Initially, we mainly used Google Colab as a means to share our ideas and work on the code at the same time. More specifically, it was used to fetch the API, to obtain an initial understanding of the data as well as for further analysis and visualization. The main libraries used include the customized library provided by open route service, pandas, numpy and folium, which was required to generate an interactive map.
At a later stage of the project, GitHub provided an effective way to work on the project at the same time, especially when Data Science and Web development tasks were combined. Furthermore, for calling the API and coding our interface, we used Visual Studio Code.
3. Project Results
a. Data Science
When calling the OpenRouteService API (see below), an input of coordinates (longitude + latitude), a seed and the desired running distance was needed. The seed is an integer, that is mainly responsible for generating different versions of a route. To generate a new, random route every time the code runs, we imported the random library to call a random seed. To make the API generate a route that is represented as a roundtrip, we set the variable “round_trip” to “true” and gave it its required attributes.
The code then gave us the following output, in JSON format:
The API’s output first displayed the summary of the generated route. It included its distance (in this example 10.007 meters), the estimated duration for walking this distance as well as the ascent and descent of the route. Furthermore, it depicted all waypoints on the loop and the respective instructions. Displaying those waypoints onto a map in the frontend of our application was a challenge, as no coordinates were given as an output.
Luckily, OpenRouteService offers a map-client that can display waypoints in the above format: the “ORS Map Client”. It implements a map client for the ORS API as a Single Page Application (SPA) and comes with a pre-coded map that can be edited according to the developers’ needs.
Our final application on the ORS map-client was able to generate and display:
- User’s input of location (including current location)
- User’s input of desired running distance
- A running route that starts and ends at the user’s location and is roughly the desired length
- Overview of elevation
Also, the API and its client offer to display even more valuable data, like the number of traffic lights, sights in the area or green areas on the generated route. However, those extra features were left out of the initial MVP and could potentially be implemented in future versions of the application.
b. Web Development
As a starting point, we designed a logo that could transmit energy and flexibility as the Joggy essence. We started working with the first character, “J,” but realized that it did not fit appropriately to the web design, neither boosting memorability. Subsequently, we managed to put the full name as the logo in green as this color represents liveliness (figure 1).
Figure 1: Logo
The application design’s primary requirements were to display bottoms/ boxes to insert the start location and the distance to run. According to this information, the application would display the route to follow.
In the beginning, we started to work with “Google directions” coding with react.js language using an ionic framework (figure 2). Unfortunately, the web code was not matching with the data science part, so we had to adjust our method.
Figure 2: Application with google directions
The new method included working with vue.js to be able to use the OpenRouteService to build our website (figure 3). The ORS API Client mainly relies on JavaScript. We adapted the design to our requirements by disabling all means of transportation other than running. As a next step, we decided that the Joggy application should show a “Round trip” button to click-on after inserting the start point to have an intuitive interface. After implementing this, we set 10km as the default distance. This distance is — of course — possible to edit according to the user’s preference.
Figure 3: Joggy application
The main feature of Joggy application is the easy way to navigate through it with its simple and intuitive design. In figure 4, it is possible to see the symbol visuals and tools that the application has to guide the users. By entering two input parameters, the website provides the users with a proposed route that can always be changed by hitting the reload button as well as more information about the route including a summary and elevation.
Figure 4: Proposed Joggy route
As it can be seen in figure 5, the user is able to edit the round trip options by changing the length of the trip or the number of points used to create the route.
Figure 5: Route Settings
4. Wrap Up and Learnings
In conclusion we were able to integrate our chosen API in the desired way and to set it up in a user friendly and visually pleasing way for our website. Furthermore, through the process of our project development we were able to gain knowledge that went beyond the provided online courses (e.g. API fetch, working with the folium library) as well as utilize some basic concepts from the course outline (e.g. pandas, numpy). As the concept of API fetch was not a main topic for the online data science track we proceeded to seek information from online tech channels such as Stackoverflow. In regard to areas where we found ourselves lacking knowledge, we were also able to rely on the assistance of our mentors which provided great support to ensure a smooth progress.
For future versions we would very much like to see more features included in order to improve the user experience. These features would potentially include a preference for nature or limited traffic lights as these are offered by our selected API.
To achieve the optimal user experience, a test with a sample of the target group, including students, young professionals and people who have recently moved, would likely bring a lot of insides to the further development. For a more user-friendly experience, another next step would be to develop an application and an integrated navigation system that explains the route while running.
The code of our project can be found on GitHub:
https://github.com/HannesKrg/Joggy
5. Our Project Team
The project has been an interesting challenge and we would like to especially thank our two mentors, Niklas Hildebrandt and Stanislav Jamnicky, for their great contribution to the success of our project.
Project team members:
Alisa Kaiser (Data Science)
Hannes Kröger (Data Science)
Janna Birr-Pedersen (Data Science)
Natalia Cornejo (Web Development)
