Download entire series

Designing Enterprise Mobile Apps With iOS and Salesforce

Series Home

III. Prepare Your Base App with Swift and the Salesforce Mobile SDK

In tutorial I & II we spent some time on creating a lo-fi prototype, eliciting user feedback, and creating some graphics for our user interface. It may seem counterintuitive to postpone opening XCode and jumping right into build your app, but a little time spent up front with understanding what you user needs results in a much better final product.

But now, it is time to code.

The Salesforce Mobile SDK for iOS

The Salesforce Mobile SDK for iOS provides a complete series of libraries and framework for authenticating against, and accessing the Salesforce1 RESTful APIs. The Mobile SDK also contains a number of other incredibly useful features including SmartSync, a framework for offline data sync, and SmartStore, for secure data storage. We will cover SmartSync, and SmartStore, in later tutorials. For now, we will focus on our two primary needs: authentication, and access to data.

Getting Started

The Mobile SDK gives you a number of options to get started, but as mentioned in tutorial I, we are going to keep things simple and provided the fastest way for you to get going. This means installing a few applications to start. A quick note just in case you are brand new to building iOS apps; iOS apps can only be built on a mac (sorry PC folks). All of the instructions in this tutorial assume that you are using a current version of OSX, preferably Yosemite.

Install Node.js

Node.js is a popular programming language for the web. We are not going to use Node.js at all, but use a packaging app called NPM. The easiest way to get NPM is install Node.js - it comes bundled together.

If you don't have Node.js, no problem - installing Node.js is a snap. Go to nodejs.org, click the install button, the install the downloaded package. Accept the defaults, but don't hit close just yet. Make sure you take a few minutes to read the PATH instructions to make sure /usr/local/bin is in your PATH

Install forceios

Forceios is a handy little binary for creating base projects already configured to connect to the Salesforce1 Platform. Go ahead and open up a terminal window, then execute the following command to install forceios:

sudo npm install forceios -g

Create your first app

Go ahead and create a new directory where you want the code for your app to reside. Then, from the command line type the following:

forceios create

You will be promoted to enter the following information:

The Mobile SDK will go off and create a pre-configured app for you. Navigate to the newly created SalesforceTasks directory, and open the SalesforceTasks Xcode project.

The Swift Programming Language

Last year at WWDC Apple surprised us all by releasing an entirely new programming language for developing OSX and iOS apps called Swift. Since it's release, Swift has rapidly grown to one of the most popular languages in the world. But this rapid change and adoption, does create some challenges: the Mobile SDK is written using Objective-C, and our starter project is also written in Objective-C.

Thankfully, we can leverage both Objective-C and Swift in the same project. Just like designing our prototypes, spending a little bit of effort creating a bridge from Objective-C to Swift in our project will allow us to write almost all of our app in Swift. This means that not only are we going to create a killer Tasks app, we are also going to learn one of the hottest languages around right now!

Once you have your empty SalesforceTasks-Bridging-Header.h file, add the following lines:

 #import <UIKit/UIKit.h;
 #import "SFRestAPI.h"
 #import "SFRestRequest.h"

To confirm that you bridge is set up correctly, try creating the following class definition in Test.swift

class Test: NSObject, SFRestDelegate {
}

If SFRestDelegate auto-completes, you are all set!

Using Storyboards

Another recent addition to the iOS Developer's toolkit is Storyboards. Storyboards allow you to visually lay out you app screens in a single place. These storyboards function just like their real world counterpart for storyboarding scenes in a movie. In fact, screens in iOS storyboard-parlayance are actually called scenes. The best thing about storyboards though, is that they make it incredibly easy to visually describe scene transitions, called seques (pronounced segway).

Right now, the generated XCode Project uses XIB files, which is an older approach to creating scenes. Thankfully it doesn't take much to support storyboards.

Right click the SalesforceTasks folder, and select New File, then choose Storyboard (from under iOS User Interface), let's call it Main

Now that we have our Storyboard, we need to add a home scene to it. Each scene is supported by at least one Controller. Many scenes rely on multiple controllers to assist in encapsulation and strong separation of code.

Why do we need a a controller? The controller contains programatic logic needed by the scene to create a interactive User Interface. You can do an amazing amount just with Storyboards and Scenes, but at some point you need to write code as well.

Looking back at our prototype we need a scene that handles authentication, and another scene that lists tasks. The Mobile SDK takes care of the authentication scene for us - although we will tweak it a little to use our storyboard rather than the XIB - , which means all we need to do is add a controller than handles lists. Lists within Xcode are supported by Table views. Let's start simple and add a basic View controller component that we can add a table view too, and create the Controller Swift file. You may notice that there is also a TableViewController which is a handy shortcut for creating what we need, but at least in Xcode 6.3, there is some strange behavior that causes a TableViewController to not include top and bottom margin constraints. These constraints will come in very handy shortly!

Editing the AppDelegate

Every Xcode project you create includes an AppDelegate file. This is the first piece of code that executed as the app starts up, and manages all of the interactions. The AppDelegate which is contained in the Mobile SDK template project we created manages displaying the Salesforce authentication screen and routing the successful authentication to the first scene of our app. By default, this first scene is a XIB file. We are going to change this to point to our Main storyboard and new TaskViewInterfaceController.

The AppDelegate is written in Objective-C, not Swift. As such, you will need to click on AppDelegate.m and add the following lines to the import section at the top of the file

#import "SalesforceTasks-Bridging-Header.h"
#import "SalesforceTasks-Swift.h

(Note: If you decided to create your project with a different name that includes spaces or hyphens, the generated bridge files convert these characters to underscores. For example, If you called your project Salesforce-Tasks, your bridge files would be named Salesforce_Tasks-Swift.h etc.)

Now you have your headers sorted, replace the contents of the following two methods: initializeAppViewState, and setupRootViewController, with this code to use our storyboard and controller.

- (void)initializeAppViewState
{
    NSString * storyboardName = @"Main";
    NSString * viewControllerID = @"TaskHome";
    UIStoryboard * storyboard = [UIStoryboard storyboardWithName:storyboardName bundle:nil];
    self.window.rootViewController = (TaskHomeViewController *)[storyboard instantiateViewControllerWithIdentifier:viewControllerID];
    [self.window makeKeyAndVisible];
}

- (void)setupRootViewController
{
    NSString * storyboardName = @"Main";
    NSString * viewControllerID = @"TaskHome";
    UIStoryboard * storyboard = [UIStoryboard storyboardWithName:storyboardName bundle:nil];
    TaskHomeViewController *controller = (TaskHomeViewController *)[storyboard instantiateViewControllerWithIdentifier:viewControllerID];
    self.window.rootViewController = controller;
}

Run your app

Your app template is done. Click run to test it.

Great job! You just created a bridge from Objective-C to Swift, and created a Storyboard and Controller to start building your app with the very latest tools. Hopefully you followed along, otherwise you can grab the complete code from here.