How we built a web app in just a few hours to show our mo-gress
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.
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.
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.
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.
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: