How we built a web app in just a few hours to show our mo-gress

Luke McFarlane November 23, 2012

A couple of days before the start of movember, I had an idea to get a web app up and running to show our "mo-gress" for those in our Trineo team who wanted to participate in movember. I mocked up a basic UI with a bunch of photo tiles and a slider that would show our mo's for any day of the month.

image

With such a short timeframe to get the app up and running, I chose to leverage the Force.com platform alongside our Trineo dev philosophy to allow for a fast delivery.

Here it is: trineo.force.com/trinemo

So how does it work? The app uses Bootstrap, jQuery & jQueryUI within a Visualforce page for the front-end UI, an Apex REST web service serving JSON for the backend, and the Salesforce database for the model.

Model

I used standard Documents in Salesforce to store the photos as these provide an externally available link to show on the public site. I then created a custom object to act as a junction between a Document & the User object, that way we can determine which TrineMo participant the photo is of and also store the date which the photo was taken.

To upload the photos I whipped up a basic Visualforce page so that I can upload a photo, set the user lookup, and set the date. The photo is then uploaded as a new externally available Document, and the junction object gets created automatically.

Backend

I wanted to keep the backend as de-coupled as possible, so that we could easily choose to reimplement the backend on another platform without having to make any changes to the front-end. I built the page to accept JSON that contains a list of the photo URL's. If you open the following link in your browser you will see the JSON structure: https://trineo.secure.force.com/trinemo/services/apexrest/photos?callback=handleGetPhotos&day=1

The Apex REST web service is simply querying the junction object (see previous section) for a given day and serving a JSON string with the corresponding document URL's.

By enabling access to this Apex class via the same Force.com public site I set up for the TrineMo page, I was able to make the web service publicly available.

Front-end

The front-end page is a Visualforce page. Instead of using standard Salesforce stylesheets I have used Boostrap to "take over" the page layout & style. This allowed me to get a nice, simple, & slick-looking UI in very little time. For the slider I used jQueryUI, and the tooltip above the slider handle to display the current day is the handy Bootstrap tooltip feature. Javascript & jQuery functions handle the AJAX requests to get the list of photos for a given day, and then append these to the photo tiles section below the slider. Similar to the backend, the page has been set up in a Force.com site to make it publicly available.

So, about the couple-of-days challenge I mentioned earlier.. I had this page live on 1st November. Since then I have constantly been tweaking, refining, and adding new features. Now that, friends, is using the Force :-)

For more info check out:

  • trineo.force.com/trinemo
  • developer.force.com
  • jquery.com
  • jqueryui.com
  • twitter.github.com/bootstrap
  • salesforce.com/us/developer/docs/apex_rest/api_apex_rest.pdf
Luke McFarlane

Luke McFarlane