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

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

Learning how to write iOS app in SWIFT language has been something I have been intrigued with for quite sometime. There is something extraordinary about committing yourself to learning something new and sharing what you learned with the rest of the community; the questions is just a matter of when and how?

Finally, I took the plunge. I created a sample app that will allow me to keep track of all the recipes that I have made at home.

Before I continue, let me be clear that I am NOT an expert in SWIFT programming language by any means. This is purely a proof of concept with the intention of sharing what I have learned while developing my iOS app as much as possible with the rest of the community. In addition, as a cloud specialist for the IBM Cloud business unit, I want to experience first hand how easy or difficult it is to start developing iOS application in Xcode. Later on I want to move my development environment to IBM® Bluemix cloud environment platform and start leveraging the different services that are available on the cloud to my existing app. What is the best way that I should go about this?

In this three-parts tutorial you will see how IBM MobileFirst helps you delivery high-powered iOS apps sooner and faster by leveraging the different Bluemix services versus having to write and maintain those services by yourself.

Part 1 , How the sample app works and pre-requisites before you begin

Part 2 , you will learn how easily developers can add IBM MobileFirst SDK to an existing mobile app with just a few lines of code.

Part 3, you will see how easy it is to start leveraging the different type of services such as Advanced Mobile Access and Push iOS 8 notifications to your existing iOS app.

What You Will Do in the tutorial

Part 2: Getting Started with Bluemix & iOS Development
1. Create an iOS 8 app in IBM Bluemix
2. Register an existing Xcode project to Bluemix
3. Install IBM MobileFirst Platform for iOS client SDK
4. Client registration for Advanced Mobile Access
5. Configure the app in Xcode for the Facebook Authentication for the Advanced Mobile Access

Part 3: Instrumenting the client app for Monitoring and Push iOS 8 Notification
1. Instrument the client Application for App Monitoring and Statistics
2. Configure the iOS 8 Push Notification on IBM Bluemix
3. Set up the iOS development environment for Push iOS 8 notification
4. Run your tests for push notification

How the Sample App Works

This sample iOS application called MyYummy Paleo is an app that user can use to keep track of their favorite paleo recipes that they love, review the recipe and then post their review and picture of the meal to Facebook.

When the user first launches the app, it will prompt a user to enter their Facebook login and password. At this point if you are using an app for the first time, you will have to enter your Facebook id and password as an authentication.

Screenshot_8_11_15__4_26_PM

Once a user is login and successfully authenticate. In the root view, user can add a new recipe, view all the recipes, write a review of their recipe and read all the reviews that they have written.

To upload the recipe, tap the “Add Recipe” row in the table view

Screenshot_9_21_15__2_56_PM

  • Enter the recipe name
  • Enter a meal preparation time
  • Enter cooking time
  • Enter servings
  • Enter all the ingredients for this meal
  • To add the picture of this meal, you can just simply click “Add Recipe Image” or tap on background below the Add Recipe Image to add a photo
  • Then click “Save” to save a recipe

Screenshot_9_21_15__3_15_PM

To view a recipe, select “All Recipes” in the table view. When a user selects an item on the table view, they will be able to make changes to a recipe, add all the ingredients, correct any typo and/or add new picture. Once a user clicks save. It will bring a user back to a previous view.

Screenshot_9_21_15__3_29_PM (1)

From Recipes’ table view, when a user makes a swiping gesture of the item on the table view, a user will be able to delete the recipe from the sample app.

Screenshot_9_21_15__3_26_PM (1)

In addition a user can also, write a review and rave about what they love about a meal that they just made and then share with their friends on Facebook through the app.

To write a review, go back to the root table view and select tab on “Write Review“, select meal category, write a review and add a picture, then save it.

Screenshot_9_21_15__3_44_PM

To read all of their meal’s review, select “Read Review“. When you select an item on a picture on the reviews’ table view, a user will be able to review what they wrote and then post their review, along with a picture of that meal to their Facebook page.

iOS_Simulator_-_iPhone_5s_-_iPhone_5s___iOS_8_3__12F70_ (1)

iOS_Simulator_-_iPhone_5s_-_iPhone_5s___iOS_8_3__12F70_ (2)

Pre-requisite

Before you start the tutorial, review the following steps for detailed information on prerequisites. Some activities such as registration for IBM Bluemix and create the Facebook AppID should be completed ahead of time.
You will need the Facebook AppID to configure the authentication mechanism to access the backend services in the Advanced Mobile Access Dashboard and preference settings for your app in the Xcode project.

  1. Registered for IBM® Bluemix. If you haven’t already, you should register now.
  2. Setup a new Facebook AppID

    All_Apps (2)

    • Select iOS

    All_Apps (1)

    • Enter Facebook App Name then Click Create New Facebook App ID

    Quick_Starts

    • Select App Category then Click Create App IDQuick_Starts (1)
    • Make note of your FacebookAppID and FacebookDisplayName, because later on we will need these two values to configure the Info.plist file in Xcode project
    • Scroll down and Enter the Bundle Identifier Name of your Xcode Project and Click> Next
    • Quick_Starts (3)

Scroll Back to the Top and Click > Skip Quick Start then you will see an App Dashboard