With all the interest around geo-intelligent devices, html5, touch aware applications, and the mobile social web I have been taking some time to look into a few popular frameworks and how I can make some cool force.com powered mobile apps. My first test drive was using Sencha, which has a really nice HTML5 Mobile app framework.
Sencha provides a great getting started guide for working with their framework that uses Twitter, Google Maps and Geo-Location, called Geotweet. I thought this would be a great starting point for me, but instead of calling Twitter, I wanted to call Force.com and retrieve a list of contacts. JSON is the current data-interchange format of choice for many cloud services/platforms including Twitter, Facebook etc. At this time, Force.com does not natively support JSON, but there are plenty of ideas.salesforce.com posts (here and here for example) which are currently under consideration by Product Management under a broader initiative to make the platform more interoperable. For now, however I needed to come up with an interim solution.
Stay tuned for an article on the design patterns I used in Apex to expose SObjects as JSON (please keep in mind my solution is a temporary one only, but it does do a good job of demonstrating design patterns which, IMO, are often overlooked in Apex development), I wanted to stay focused on the Sencha side of things for this post. So, taking the Geotweet sample app as a starting point I made a few little changes starting with the refresh function:
You will notice that my refresh function now calls a front controller which resides on Force.com. This controller interprets the search request and returns the appropriate records as JSON objects. In my example I added a few custom fields on the Contact object, geo__c, longitude__c, and latitude__c to store geographic co-ordinates. With the JSON record returned, Sencha makes it very easy to work with the results. Finally, with the map plotted I want to update my contacts tab. Again, Sencha does a great job of making the templates pretty easy:
And that's about it! Check out the results in the video below. In this case I am using the geo-aware functionality of Chrome but the app rocks on an iphone, android device, ipad, you name it! This is the power of HTML5. Stay tuned for more…..