Nov 28, 2012

Salesforce Mobile SDK - Mobile Visualforce Page and the Connected App

This is part two of the Salesforce Mobile SDK Series.  Part one is here:  Salesforce Mobile SDK - Introduction

There's one common component between Android and iOS development when creating a hybrid app and that's the Visualforce page.  This ability to code it once and use it multiple places was repeatedly touted at Dreamforce '11 and '12.  This post will briefly go over the creation of such a page as well as the creation of a Connected App.

"Connected App" is an application that can connect to salesforce.com over Identity and Data APIs. Connected Apps use the standard OAuth 2.0 protocol to authenticate, provide Single Sign-On, and acquire access tokens for use with Salesforce APIs...  (read more)

1)  Our simple page will take advantage of a few external files, a .CSS file, and two .js  found in the CloudTunes sample included within the SalesforcemobileSDK-Samples package.  Grab the Static Resource named "cloudtunes_jQuery.resource" and it's accompanying meta.xml from here:  https://github.com/forcedotcom/SalesforceMobileSDK-Samples/tree/master/CloudTunes-metadata/CloudTunes-force/staticresources

2)  Open Eclipse/Force.com IDE and create a new project for your mobile Visualforce project

3)  Copy cloudtunes_jQuery.resource and cloudtunes_jQuery.resource-meta.xml into your project, creating the "staticresources" folder if needed:  ../Workspaces/ProjectFolder/Project/src/staticresources/




4)  Jump back over to your IDE, right-click on your "src" folder and click on "Refresh" to pick up the new files.




5)  Save the Static Resource to the server by right-clicking on your "src" folder within the project explorer, going to "Force.com" and clicking on "Save to Server."


6)  Now create a new Visualforce page by right-clicking on your project --> New -- > Visualforce Page.  Give it a name and click on the "Finish" button.

7)  Below is how I've structured my page.  Take note of the different div data-role's.  Although I'm only creating one Visualforce page, my final product will have four different "screens" (Main, About CRM Science, Ami, and Kirk).



Now that we have the page, it's time to create a "Connected App" within our Salesforce org.  Again, a "Connected App" is defined as an app that leverages the Identity and Data APIs to connect to Salesforce.  If you're familiar with "Remote Apps," Connected Apps are meant to be an updated replacement, including additional features giving you the power to limit who can use the app and which security policies are used by the app.  After the app is created, we'll also receive our Consumer Key and Secret values that are used when creating the hybrid app in Xcode or Eclipse.

Configuring a custom app is a straightforward process.  First you define the OAuth metadata with details like the app name, description, callback URL, operational IP range (optional), as well as info about enforceable mobile policies (also optional).

1)  Navigate to Setup -->  App Setup --> Create --> Apps and click on the "New" button within the "Connected Apps" section.



2)  Provide the "Basic Information" for your app.



3)  Next, define the details for the API Integration.  For the Callback URL, I've defined "testsfdc:///mobilesdk/detect/oauth/done" and selected the "Access your basic information" OAuth scope.



4)  Click on the "Save" button and you'll be taken to your new Connected App's record.  Notice the Version, Status, Consumer Key, and Consumer Secret fields.


Now you're ready to begin your hybrid app "development."  In the upcoming posts, you'll see how to configure your dev environments (Xcode or Eclipse) and how to use the Salesforce Mobile SDK to take advantage of the power of your Visualforce page.