Creating a high-powered iOS apps with Bluemix (Part 2)

Part 2: Getting Started with Bluemix & iOS Development

In this section of the tutorial, you will learn how to:

  1. Create a mobile application backend on Bluemix for the iOS development which include the Node.js as a running and pre-built services such as Advanced Mobile Access, Push iOS 8 Notification and Cloudant NoSQL DB in order for you to start assemble your apps faster
  2. Register you existing Xcode project to Bluemix
  3. Install IBM MobileFirst Platform for iOS client SDK and start to leverage the different frameworks provided by the IBM MobileFirst Platform for iOS
  4. Configure the authentication mechanism to access the backend services in the Advanced Mobile Access dashboard
  5. Configure the app in Xcode for Facebook Authentication to access the backend services.

1. Create an iOS 8 app in IBM Bluemix™

    1.1 Log on to the IBM® Bluemix

https://console.ng.bluemix.net/solutions/ios
iOS_Solutions_-_IBM_Bluemix

    1.2 Enter your app name

Dashboard_-_IBM_Bluemix


2. Register an existing Xcode project to Bluemix

At this step, we will be registering the existing Xcode project to IBM Bluemix. It is very important that you enter the right Bundle ID and version number of your Xcode project.

2.1 Select Existing Xcode Project
2.2 Enter the Bundle ID and Version number of your Xcode project

AMA_Dashboard

Note: Bundle ID and Version number of your Xcode project can be found if you bring up Xcode Project > General> Identity

Paleo_Recipes_xcodeproj

2.3 Initializing SDK with IBM Bluemix App ID and Route
Next, we need to connect the client application with the iOS 8 app that you just created in the Bluemix Dashboard.

To connect your client application with the mobile app in the Bluemix dashboard, we need to copy the Bluemix App ID and Route, which is provided by Bluemix to our project.
From your xc.workspace, Open the PaleoRecipes.plist and update the applicationId, and applicationRoute variables to match the identity provided by the IBM Bluemix.

2.4 Click > DONE
An iOS application is successfully created on Bluemix using Node.js as a runtime and bind with three services, which are:

1. Advance Mobile Access for security to the backend resources and monitoring of the client logging and statistics

2. Push iOS 8 notification, which provides the capability to use iOS 8 features for managing and interacting with notifications in your application

3. Cloudant NoSQL DB, which is a NoSQL database as a service (DBaaS) that can handle many types of database types such as JSON, full-text, and geospatial.

Dashboard_-_IBM_Bluemix (2)

3. Install the IBM MobileFirst Platform for iOS client SDK using CocoaPods

There are two ways that you can set up your client development environment. You can use CocoaPod or Manual Installation. For this tutorial, we will be using the CocoaPod dependency manager.

The CocoaPods dependency manager is a dependency management tool for iOS and OS X development for Swift and Object-C Cocoa project. CocoaPods make adding and removing dependencies for an iOS/OSx developer project a lot easier. In this section you will see that we will be defining our project dependencies in a Podfile and then use the “pod install” command to install the required dependencies for the IBM MobileFirst services.

But before we can use the ‘pod install’ to install our dependencies for IBM MobileFirst services, first we need to make sure that CocoaPods is setup.

3.1 Setup CocoaPods, if you haven’t done so already by running the following command from the terminal

$ sudo gem install cocoapods

$ pod setup

3.2 Create a Podfile. From a terminal, go to your app folder then run

$ touch Podfile

Note: Below is a standard Pod file for using IMF services, we only need to include the resource we need and remove the dependencies that we don’t need

source ‘https://github.com/CocoaPods/Specs.git”

# Copy the following list as is and remove the dependencies you do not need

pod ‘IMFCore’
pod ‘IMFGoogleAuthentication’
pod ‘IMFFacebookAuthentication’
pod ‘IMFURLProtocol’
pod ‘IMFPush’

3.3 Install the dependencies, run “pod install”

$ pod install
Oyster$ pod install
[in /Users/Oyster/Dev/PaleoRecipes]
Updating local specs repositories
Analyzing dependencies
Downloading dependencies
Installing Bolts (1.2.0)
Installing CDTDatastore (0.14.0)
Installing CloudantQueryObjc (1.0.2)
Installing CloudantToolkit (1.0.0)
Installing CocoaLumberjack (2.0.0-rc)
Installing FMDB (2.3)
Installing Facebook-iOS-SDK (3.23.2)
Installing IMFCore (1.0.0)
Installing IMFData (1.0.0)
Installing IMFFacebookAuthentication (1.0.0)
Installing IMFPush (1.0.0)
Installing IMFURLProtocol (1.0.0)
Generating Pods project
Integrating client project
Sending stats

3.4 Create a Bridging-Header.h file

We need to access the IMF Object-C code from SWIFT. Therefore, we need to create a Bridging-Header.h to expose the IMF Object-C code to SWIFT code. To create a Bridging-Header.h file

3.4.1. Open your (AppName).xcworkspace
3.4.2. Click Project File > New file> iOS > Source> Header file
3.4.3. Name your file <AppName>-Bridging-Header.h (Note: The prefit of your Bridging-Header.h file must be exactly the same as your project name)

3.4.4 In the -Bridging-Hearder.h, remove the following lines of code

#ifndef _PaleoRecipes_Bridging_Header_h
#define _PaleoRecipes_Bridging_Header_h
#endif

3.4.5 Add the import statements to expose the Object-C headers that we want to expose to the header files that we just created and save it.

Note: Below is a standard Bridging-Header.h file when using the IMF services. (You only need to include the ones you require)

#import <Foundation/Foundation.h>
#import <CDTDatastore/CloudantSync.h>
#import <CloudantToolkit/CloudantToolkit.h>
#import <IMFCore/IMFCore.h>
#import <IMFPush/IMFPush.h>
#import <facebookSDK/FacebookSDK.h>
#import “IMFFacebookAuthenticationHandler.h”
#import “IMFGoogleAuthenticationHandler.h”
#import <IMFData/IMFData.h>

Once all the required dependencies has been installed and configured correctly. We will be able to register the client to the backend using the
IMFClient.sharedInstance().initializeWithBackendRoute(applicationRoute, backendGUID: applicationId)

3.5 In the Build Setting tab, we need to set the Object-C Bridging Header setting under SWIFT compiler to point to the Bridging-Header file that you just created

Tip: To quickly search for what you are looking for type in the word “swift” in the search field

PaleoRecipes_xcodeproj

3.6 Call the IMFLogger API from within a Swift project.


4. Client Registration for Advanced Mobile Access Service

4.1 Client Registration

At this step we will have to configure and select which authentication mechanism we will be using for back-end access. By default it’s currently set to unauthenticated. To configure the app to use a different authentication mechanism such as Facebook, Google or Custom authentication

4.1.1 Click on Advanced Mobile> Click Allow Unauthenthicated access to the back-end resource

AMA_Dashboard (2)

4.1.2. Click + NEW AUTHENTICATION

AMA_Dashboard (3)

4.1.3 Select Authentication Mechanism for Facebook

Note: There are three types of authentication mechanisms that you can use for authentication with the backend resources, which are FaceBook, Google and Custom. For more details on how the iOS app handles the authentication, please see AuthenticationController.swift created by the IBM’s MobileFirst team for more details.

AMA_Dashboard (5)

4.1.4 Enter Facebook App ID > Click SAVE

Note: If you don’t have the Facebook App ID. You can find more detail over here (Quick Start for iOS)

AMA_Dashboard (4)

4.1.5 You should see a client registration page confirmation similar to my screenshot down below

AMA_Dashboard

5. Configure the app in Xcode for the Facebook Authentication for the Advanced Mobile Access

Since we are using Facebook as an identity provider to gain access to the Advanced Mobile Access resources. We will need the Facebook App ID in order to configure both security for Advanced Mobile Access service and the Mobile iOS application. At this step we will be modifying the existing Info.plist file. Please see Quick Start for iOS for more details.

  • From the Xcode Project >Open Info.plist file
  • Info.plist should be in the Supporting File Folder inside your Xcode Project
  • Create a new key for FacebookAppID with String as Type and enter the FacebookAppID
  • Create a new Key for FacebookAppDisplayName with String as type and enter the FacebookDisplayName
  • Create a key for URL Type with Array as Type with a dictionary as its only child. Dictionary also needs one array called URL Schema. The child of that array is a string of the facebookID app precedes with the fb in front

Info_plist

  • Open the AppDelegate.swift and override the application:openURL:sourceApplication:annotation as follows:

func application(application: UIApplication, openURL url: NSURL, sourceApplication: String?, annotation: AnyObject?) -> Bool {

return FBAppCall.handleOpenURL(url, sourceApplication: sourceApplication)

}

AppDelegate_swift

  • Add the following line to the applicationDidBecomeActive This is a function that will restart any task that was paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface

FBAppEvents.activateApp()

AppDelegate_swift (1)

  • Registering the “IMFFacebookAuthenticationHandler to enable iOS application to respond when Advanced Mobile Access requires a Facebook log in. “Advanced Mobile Access provides a delegate by default and logs in to Facebook with read permission to the user’s public profile.”- IBM Documentation

To register the default delegate, add the following SWIFT code to AppDelegate.swift to initiate security for user authentication for the client. This code should be copied to func applicaton(application: UIApplication, didFinishLaunchingWithOptions launchOptions:NSDictionry

// Register a default delegate.

// Logs in to Facebook with read permissions to the user’s public profile.

IMFFacebookAuthenticationHandler.sharedInstance().registerWithDefaultDelegate()

  • Now run your application to test out the authentication method. You will be prompted for the Facebook Authentication. Enter your email or phone > Enter password

Screenshot_8_11_15__4_26_PM

  • Once you are successfully authenticated, you should be able to see the first screen of the Mobile App
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s