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



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

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:

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.

No Fluff Just Stuff 2011, Madison, WI

I attended the No Fluff Just Stuff conference in Madison, WI this weekend. It was a great chance to learn the newest Java trends and share struggles in programming with people much like myself, even if most of them were cheeseheads. Here are some of my reflections on the state of Java tech post-conference:

-Java 7 is underwhelming, mostly because it will not have closures. It will however introduce enhancements to speed up Groovy, JRuby, and Scala

-If I read between the lines what features are in HTML and any of them are supported by Chrome, then I think that HTML5+Chrome could easily turn into a gaming platform!

-There is no question that Groovy is the “next big thing” for Java. Get on board.

-A java developer could easily add Hadoop to his resume (and dollars to his pocket), by learning Hadoop with Cascading. Hadoop-worthy scale data sets are available for free from amazon:

Grails is really cool. I wish there was a hosting platform available that was anything close to Heroku for Rails. I think it is unlikely that we will hear any good Startup stories with Grails for that reason.

Facebook Javascript SDKs – Old vs. New

There are two ways to handle initializing your fb:serverFBML tags

1 – using the New Javascript SDK

(identified by the js library

2 – Using the Old Javascript SDK
which is what our friends at StackOverflow have done. I reference this thread because it kept coming up while I was solving this problem, and the solution they give is outdated.

(identified by the js library and xd_receiver.html)

A Better Window.onLoad with jQuery

I have recently come to discover the javascript library jQuery. My favorite feature is the window.onLoad replacement, which is actually faster than window.onLoad and can be used multiple times in one document.

    // Your code here...

Any code in the Your code here.. block will execute as soon as the page is loaded. This is useful for referencing DOM elements which would have been “undefined” before the page was fully loaded by the browser.