Skip to content →

Key Learnings: Transforming a Python Notebook into an Open Source Mobile App

Have I mentioned how much I love python? Working with it these last few weeks has been so interesting and not to mention a ton of fun!

As some of you may or may not know, I’ve been playing around with Folium (a cool python mapping library) and have been visualizing open data from the City of Toronto’s bike share program among other things. Throughout this entire data exploration process, I’ve been generating a ton of #python code in Jupyter. As a result of this work, I thought it would be interesting to see if I could take all of this code and turn it into a simple mobile app.

And given that I’m working with open data, why not make the application code freely available for anyone who wants to check it out on Github. Perhaps it could help someone who’s looking to start building an app with mapping capabilities?

So, in true open source fashion, that’s what I did and these are my learnings from taking a Jupyter notebook and transforming it into an open source mobile app.

But before we get to that, let’s take a quick look at the app in action.

Project Bikey McBike currently lives on heroku at the following url:

https://bikey-mcbike.herokuapp.com/

And if you are wondering about that awesome name and the creative process that lead to its selection, let’s just say it somehow involved re-watching countless episodes of Review with Forrest MacNeil.

Important Note: You’ll need to grant location access to make the app work. Also, please consider this app to be a fun demo that I hacked together as I don’t consider myself an expert on flask. I did however find this framework to be an interesting solution that enabled me to quickly develop a dynamic mapping application. In any event, I’d love to here any feedback to make this better in the comments or on github.

Lastly, if you are *NOT* near Toronto, you can still see the nearest bike station by zooming out on  the map. Sorry my American friends, this is a Toronto based experiment that only uses Toronto data 🙂

 

So now that I’ve built this, what were some my key takeaways?

There was a lot, but i’ll just focus on some of the one’s i thought were the most interesting.

1. Design your map in python, then export to HTML so that it’s ready plug in new data.

While in your Jupyter notebook, Folium has a really interesting feature that allows you to export any map you create as a webpage using:

folium_map.save(outfile='map.html')

I’d say that this feature alone is what inspired me to try and create this simple app. This feature really sped up the creation of the app as I could just design the visual using python and then export the map to html. Then this exported page formed the basis for the main application, which made it relatively easy to plug in the data once passed in from the server via SocketIO

 

2. As part of any analysis / data exploration, build out comprehensive functions that you can re-use.

I really like the ability to leverage Jupyter to explore the data and test out any ideas / code and build any functions prior to porting over to the app. It’s a great playground and you can quickly see the results of the what you are building really quickly. Within Jupyter, i created the functions that determined the closest stations to the user’s geolocation in addition to the route needed to travel there. Having pre-built functions really made porting this over quick and more efficient.

 

3. Building the app with Flask and SocketIO made it really easy to send data between the client and the server.

For example, once i retrieved the user’s geolocation from the browser, i would then emit an event and send that data server side with the following js:

socket.emit('my event', {data: [latitude,longitude]});

The main python file app.py would listen for this event using and then take action on the data:

@socketio.on('my event')
def main(message):
    # Then parse message (which is the geo data sent 
    # from the browser) and determine closest stations to user

After I parsed the data, I determined the closest stations to the user’s location using geopy (see app.py for full details on github), and prepared to send this data back to the client using the following:

emit('my_response', {'data': client_data})

which the client side then picked up using the following and then began to parse and plot the data on the map.

socket.on('my_response', function(msg) {
   // parse and plug data into the map

And that’s pretty much how socketio works at a high level in this app. Not too bad!

 

4. Be aware of app caching.

The only reason I noticed this was that my timestamp did not appear to be updating. After a few Google Searches and visits to stackoverflow, i came across this article which seemed to help and added this code into app.py.

@app.after_request
def add_header(r):
r.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
r.headers["Pragma"] = "no-cache"
r.headers["Expires"] ="0"
r.headers['Cache-Control'] = 'public, max-age=0'
return r

 

5.  Last but not least, take advantage of all of the great developer content on YouTube.

I was looking to deploy this app and had been searching for an easy to follow written tutorial, but couldn’t really find the right one. I came across this simple 4 minute video and that was that! I made a few tweaks and the deployed my App \o/.

 

So, there you have it…

Feel free to check out Project Bikey McBike on Github if you have any interest in downloading and running this app yourself. You could even replace this data with another dataset and a bit of work. Or even better…hooking this up to a cloud db! Now that would be sweet!

I’ve included all of the necessary details, resources and libraries needed to get this app up and running. It should be pretty fun and easy to do.

If you have any questions, please don’t hesitate to ping me.

 

ABOUT ME

I’m an Innovative Analytics Leader with 10+ years’ experience leveraging an  expertise across a variety of data disciplines including business intelligence, competitive intelligence, market research and digital analytics.

In my spare time, I like to hang out with my friends and family, watch football, code in python and learn about how to apply machine learning.

 

 

 

Published in Uncategorised

One Comment

  1. Mark Richardson Mark Richardson

    Nice work..! Some blue-sky Additions/Challenges that might be a Value-Add…

    1.) Ability to enter an address (eg. Destination) rather that using the Location sensor.
    2.) Show “Available Dock-Spaces” near Destination X – if people are looking to plan a return.
    3.) Estimate travel-time (eg. Can you cycle it within the 30 minute limit)
    4.) Suggested reset-dock stops for longer trips (eg. Want to go from Ossington to Woodbine along Bloor = STOP & RESET dock at Castle Frank.

Leave a Reply to Mark Richardson Cancel reply

Your email address will not be published. Required fields are marked *