October 25, 2012

PhoneGap and Force.com in 69 minutes

I’m proud to present a series of seven video tutorials that teach how to build PhoneGap applications connected to Force.com (Salesforce). It is over an hour of content that goes step-by-step from project set up to packaging of applications ready for multiple platforms.

Before you start watching the tutorials you may also want to check out a recording of a session I did at Dreamforce 2012; it covers similar topic but from a high level perspective. One thing I wanted to mention here is that the GapForce app that I presented during my session is already available to download from App Store and Google Play. Also its source code is available on GitHub here, in case you wanted to extend it or do whatever you like with it 😉

All the videos below can also be found in this YouTube playlist.

Lesson 1: PhoneGap/Force.com – Project Setup

This video demonstrates how to get started by cloning a boilerplate project from the appboil repository.

Lesson 2: PhoneGap/Force.com – Configuring Xcode/iOS Project

This episode covers how to create a new PhoneGap/iOS project using command line script. It demonstrates how to add the ChildBrowser plugin and how to configure it so it will work with Salesforce.com.

Lesson 3: PhoneGap/Force.com – App Architecture & RequireJS/Backbone/jQM

In this episode I do an overview of the architecture of an app that is built through the whole series. I explain how RequireJS is setup together with Backbone.js and jQuery Mobile.

Lesson 4: PhoneGap/Force.com – Authenticating User

Here I show how to use the forcetk.ui library to authenticate and authorize users in PhoneGap/Force.com apps.

Lesson 5: PhoneGap/Force.com – Querying Salesforce Data

This lesson demonstrates how to use the Backbone.Force plugin to query Force.com data from PhoneGap/Cordova applications.

Lesson 6: PhoneGap/Force.com – App Navigation/View Transitions

This episode dives deeper into usage of the jqmNavigator library, which simplifies app navigation and transitions between the jQuery Mobile views.

Lesson 7: PhoneGap/Force.com – Packaging with PhoneGap Build

This is the last lesson of the whole series and it teaches how to use the PhoneGap Build service to package an application built with PhoneGap/Cordova for multiple platforms like: Android, iOS, Windows Phone, Blackberry, HP webOS or Symbian.

10 comments

October 27, 2012 - 7:43 am @altius_rup

Thanks, Piotr.
Do you habe any vids on offline storage for mobile Force.com apps ?

Rup

Reply
- October 30, 2012 - 1:15 pm Piotr
  
  Don’t have it sorry 😉
  
  Reply
November 13, 2012 - 12:51 am Mateusz Loskot

Hi Piotr,

The HTML5/JavaScript development for mobile devices with PhoneGap and such is a completely new thing to me and I’ve found your blog (the old ria too) extremely helpful in learning these technologies.

Keep up the great work you do here!

Reply
November 14, 2012 - 6:29 pm Rafa

Amazing Thank you very much!!

Reply
November 16, 2012 - 5:28 pm Alessio

If we want to be really cool we should understand how to “integrate” the new Salesforce Touch Platform in order to be able to recreate the same functionalities but wrapping the www folder with Phonegap Build… do you think is this possible?!

Reply
February 25, 2013 - 11:08 pm Rodrigo

Hi the tutorial is great but I’m having a bit of an issue when binding the click event for the li(s) since they are not part of the original main view (I’m on step 6).
I think the listview(‘refresh’) is not being executed. any ideas ?

Reply
October 18, 2013 - 10:27 pm Nikhilesh

Hi Piotr,
Thank you for putting up this tutorial, it was really helpful. I am just starting to build an application that uses phonegap + sdfc, but when i ran the code through phonegap build, it gave me the following error
” [error] {“error”:”plugin unsupported: childbrowser”}”

When i googled a bit, I noticed that childbrowser plugin is depricated, and should be replaced by inAppBrowser instead. ( http://community.phonegap.com/nitobi/topics/_childbrowser_plugin_deprecating_use_inappbrowser)

Do you have any guidelines/steps from migrating your current demo app to use inAppBrowser instead of childBrowser to support latest versions of phonegap ?

Thanks,

Nikhil

Reply
- October 23, 2013 - 9:52 am Piotr
  
  Sorry, I don’t have any tips at this time
  
  Reply
November 28, 2013 - 8:15 am Thomas Anderson

Hi Piotr,

First, I want to thank you for all of your excellent work! I was dreading having to code my own library for PhoneGap + SalesForce Rest API.

I’ve been using PhoneGap for 2+ years now, so I’m pretty comfortable with how everything works. I added in forcetk.js and forcetk.ui.js. Everything fires up just fine. Except I am hitting on issue:

When I call ftkClientUI.login(); I’m getting the javascript error:

‘Uncaught SecurityError: Blocked a frame with origin “https://www.myapp.com” from accessing a cross-origin frame.’ in https://www.myapp.com/js/forcetk.ui.js on line 160

Watching your video, it didn’t look like you had to do anything to address cross-domain stuff. Do I need to set up some sort of SalesForce proxy on my server, or is there something I’m missing?

Lastly, easy question: Once I get it working, will I be able to use it to create leads/contacts and add tasks to contacts, or is it read-only?

Thanks for your time and your hard work!

Reply
- November 28, 2013 - 9:29 am Thomas Anderson
  
  I think I figured out why your code works.
  
  1) In your test, you’re running from your local file system. (files://). There are no cross-domain issues when you are running from files://
  2) SalesForce will not give a refresh_token if you are calling from the web, but they will if you are calling from files://.
  
  So basically, your code should work fine in PhoneGap, but I’ll have to figure out a different option for the web-app version of my app.
  
  Reply