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

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