Dec 6, 2012

Salesforce Mobile SDK - Xcode Setup and iOS App

This is part three of the Salesforce Mobile SDK Series.  Have you read parts one and two yet?

  1. Salesforce Mobile SDK - Introduction
  2. Salesforce Mobile SDK - Mobile Visualforce Page and the Connected App

So far we've learned the differences between native, hybird, and HTML5 apps, how to create a mobile Visualforce page, and how to create a Connected App to get our crucial Consumer Key and Secret.  The next step takes what you've done and turns it into a mobile app.  By the end of this post, you'll have an iOS app that handles authentication and delivers a multipage experience.

Before you get started working with the Salesforce Mobile SDK, you'll need to set up your Mac environment.

1)  Boot up your Mac and install Xcode from the App Store.

2)  While that's downloading (it'll take a while), download and install GitHub:

3)  Pull in a local copy of the SalesforceMobileSDK-iOS project by using the "Clone in Mac" button here:

4)  While you're waiting, you'll want to clone the MobileComponents as well:

5)  Launch a Terminal window (Finder --> Applications --> Utilities --. Terminal) and navigate to the cloned SalesforceMobileSDK-iOS folder, presumably in your home directory.  
  • cd ~/SalesforceMobileSDK-iOS
  • sudo ./
  • sudo cd ..
  • sudo chown -R YourUserName SalesforceMobileSDK-iOS
6)  By now, Xcode should have downloaded and installed.  If not, wait for that to happen, then launch it (Finder --> Applications --> Xcode).

7)  If you've never launched Xcode before, you'll land on this screen.  Click on "Create a new Xcode project" if prompted and if not, click on File --> New --> Project...

8)  From the menu, choose iOS --> Application, highlight the "Hybrid App" icon, and then click on the "Next" button

9)  Provide the following details about your new app and then click on the "Next" button.  You can get the "Consumer Key" and the "Redirect URL" from within your Salesforce org by clicking on the "Setup" link and navigating to Create --> Apps --> Your Connected App Name.  For more details on creating the "Connected App," see part two of this series.

10)  You'll now be prompted to choose a location to save your project file.  Navigate to your location of choice and click on the "Create" button.

11)  Once your project is created, highlight the "WWW" folder, right-click on it, and choose "Delete." 

12)  When prompted, click on the "References Only" button.

13)  Highlight your root project folder, right-click, and choose "Add Files to "Your Project"..."

14)  Navigate to your project directory, highlight the "WWW" folder, and then click on the "Add" button.

15)  Expand the "WWW" folder in your project browser and click on bootconfig.js.

16)  Find the line that begins with "var startData..."  This tells the application which page to load after authentication.  

Since we are building a hybrid app, we'll comment out the first line, uncomment the second line, and modify the path portion to reference the Visualforce page we created in part two of this series.

17)  Now it's time to make sure the app runs.  Make sure all of your changes have been saved, and then click on Product --> Run.  This will start up either an iPad or iPhone simulator and with any luck, request your Salesforce credentials:

18)  Enter your credentials and click on the "Login" button.  The app will then prompt you to provide permissions.  Click on the "Allow" button to continue.

After clicking on the "Allow" button, you'll see your mobile VF page.  If you tap/click around, you'll notice the interface and page navigation looks and feels like a native app.

In the next and final post of this series, you'll learn how to set up your Eclipse environment and use the the same Visualforce Page and Connected App to create an Android app.