BeerDogging: a cross-platform mobile app with Phonegap and AngularJS, disected

Beer Dogging is a member organization committed to the promotion of Craft Beer.  Recently the owner of Beer Dogging, Don DiBrita, asked me to build him an app to his members deals to local bars and other Craft Beer related venues.   I wanted to share the process that went into building it since the results turned out pretty decent and within a short timeframe.

Overall Goals
-Give users quick access to beer dogging deals, sorted by proximity
-Keep Costs Low

App concept

 beerdogging_mockup

Approach:

As you can tell from the tile of this post, the technology stack includes Phonegap and AngularJS, but we also have a server components using Rails.  I believe that this stack gives you the maximum amount of exposure for the lowest cost, at least for small to medium sized apps.

Mobile Client: Phonegap, AngularJS, Topcoat, Google Analytics

The app is built in Phonegap, so that it can work on both Android and IOS platforms without much trouble.  The latest version at the time was Phonegap/Cordova 3.3.0.  Cordova as a platform has gained a lot of maturity over the last couple of years but still has a ways to go.  I’m pleasantly surprised at how well their new command line tools help you manage your project across multiple platforms, but still find some gaps in the workflow, and cases where plugins just stop working unexpectedly and need to be re-installed.  I stayed away from Phonegap Build on this project, opting instead to use the native SDKs on my OSX environment – it’s just faster IMO.  I also wanted to share my phonegap development workflow; hopefully it will help someone out there since it took me a while to figure out myself.

  1. Create the project with command line tools
  2. Add the android and IOS ‘platforms’ with command line tools
  3. Start a Ripple Emulator for your android platform.
  4. Setup a grunt task to automatically sync your web resources to the android platform
  5. Modify web resources in the www/ folder.  After they sync to to your android platform, refresh your ripple emulator to test the changes.
  6. Repeat until you’re ready to test on a physical device or a platform emulator
  7. Build & test on a native SDK (XCode or Anroid SDK)

I chose AngularJS as the main javascript framework.  I find that Angular provides the structure, REST support, and databinding for the sort of thick client we require in a mobile app.  Since Angular is backed by Google I expect it to continue to mature into a great client side javascript framework for many years to come, especially for mobile.

I’m using the Google Analytics Phonegap plugin (GAPlugin) for metrics gathering, and was happy about the amount and quality of metrics it gives you for not a lot of work.  This plugin allows GA to recognize your phonegap application as a real ‘mobile app’ instead of web app.

To polish off the UI and give the app that ‘mobile’ feel I used Topcoat .

Server Side : Rails, Heroku, Postres, Geocoder, RABL

On the server side we’re using a low-frills Ruby on Rails web application, who’s sole purpose is to serve JSON data about places and deals to the mobile application.  It also has an admin web interface where an admin creates/updates/deletes places and deals.  I used the RABL gem to format the JSON responses.

Geocoder is a ruby gem that helps you do geolocation queries (find all places within a 10 mile radius of me).  It is a must if your Rails app has any kind of location data.  I also use it in http://findmybeer.com.

I used Heroku for application hosting both for ease of use and cost.  We are using the single free instance today and have the ability to scale up to meet demand.  On the database side I’m using the free instance of postgreSQL that heroku provides.  It works for me and supposedly has pretty good geo query performance.

End Result:

beerdogging1
featured deals page
iOS Simulator Screen shot Feb 9, 2014, 11.16.55 AM
deal detail page
iOS Simulator Screen shot Feb 9, 2014, 10.55.58 AM
places near me with search
iOS Simulator Screen shot Feb 9, 2014, 10.56.05 AM
About page
admin web interface
admin web interface

I want to talk for a minute about some of the design choices we made during the creation of this app.  Unlike a lot of sites with a membership component, you are not required to login or verify your membership status on the app in order to view or try to redeem deals.  We purposely decided to take a low-tech approach to this problem for now; Beer Dogging members already have physical wallet sized member cards, so in order to redeem an ‘Alpha Dog’ deal you have to show your member card in addition to showing your server/bartender the deal within the app.  This choice aligns with our Lean product development philosophy, and allowed the client to keep the cost down during initial development.  It is something we can add in the future when this app starts to take off.