Creating a New iOS Social Project
In this article, by Giuseppe Macri, author of Integrating Facebook iOS SDK with Your Application, we will learn about:
With this article, we start our coding journey. We are going to build our social application from the group up.
In this article we will learn about:
- Creating a Facebook App ID: It is a key used with our APIs to communicate with the Facebook Platform.
- Downloading the Facebook SDK: iOS SDK can be downloaded from two different channels. We will look into both of them.
- Creating a new XCode Project: I will give a brief introduction on how to create a new XCode project and description of the IDE environment.
- Importing Facebook iOS SDK into our XCode project: I will go through the import of the Facebook SDK into our XCode project step-by-step.
- Getting familiar with Storyboard to build a better interface: This is a brief introduction on the Apple tool to build our application interface.
Creating a Facebook App ID
In order to communicate with the Facebook Platform using their SDK, we need an identifier for our application. This identifier, also known as Facebook App ID, will give access to the Platform; at the same time, we will be able to collect a lot of information about its usage, impressions, and ads.
To obtain a Facebook App ID, we need a Facebook account. If you don't have one, you can create a Facebook account via the following page at https://www.facebook.com:
The previous screenshot shows the new Facebook account sign up form. Fill out all the fields and you will be able to access the Facebook Developer Portal.
Once we are logged into Facebook, we need to visit the Developer Portal. You can find it at https://developers.facebook.com/. I already mentioned the important role of Developer Portal in developing our social application.
The previous screenshot shows the Facebook Developer Portal. The main section, the top part, is dedicated to the current SDKs. On the top-blue bar, click on the Apps link, and it will redirect us to the Facebook App Dashboard.
The previous screenshot shows the Facebook App Dashboard. To the left, we have a list of apps; on the center of the page, we can see the details of the currently selected app from our list. The page shows the application's setting and analytics (Insights).
In order to create a new Facebook App ID, you can click on Create New App on the top-right part of the App Dashboard.
The previous screenshot shows the first step in order to create a Facebook App ID. When providing the App Name, be sure the name does not already exist or violate any copyright laws; otherwise, Facebook will remove your app. App Namespace is something that we need if we want to define custom objects and/or actions in the Open Graph structure. The App Namespace topic is not part of this book. Web hosting is really useful when creating a social web application. Facebook, in partnership with other providers, can create a web hosting for us if needed. This part is not going to be discussed in this book; therefore, do not check this option for your application.
Once all the information is provided, we can move on to the next step. Please fill out the form, and move forward to the next one.
On the top of the page, we can see both App ID and App Secret. These are the most important pieces of information about our new social applicaton. App ID is a piece of information that we can share unlike App Secret.
At the center of our new Facebook Application Page, we have basic information fields. Do not worry about Namespace, App Domains, and Hosting URL; these fields are for web applications. Sandbox Mode only allows developers to use the current application. Developers are specified through the Developer Roles link on the left side bar.
Moving down, select the type of app. For our goal, select Native iOS App. You can select multiple types and create multiplatform social applications.
Once you have checked Native iOS App, you will be prompted with the following form:
The only field we need to provide for now is the Bundle ID. The Bundle ID is something related to XCode settings. Be sure that the Facebook Bundle ID will match our XCode Social App Bundle Identifier. The format for the bundle identifier is always something like com.MyCompany.MyApp.
iPhone/iPad App Store IDs are the App Store identifiers of your application if you have published your app in the App Store. If you didn't provide any of them after you saved your changes, you will receive a warning message; however, don't worry, our new App ID is now ready to be used.
Save your changes and get ready to start our developing journey.
Downloading the Facebook iOS SDK
The iOS Facebook SDK can be downloaded through two different channels:
- Facebook Developer Portal: For downloading the installation package
- GitHub: For downloading the SDK source code
Using Facebook Developer Portal, we can download the iOS SDK as the installation package. Visit https://developers.facebook.com/ios/ as shown in the following screenshot and click on Download the SDK to download the installation package.
The package, once installed, will create a new FacebookSDK folder within our Documents folder.
The previous screenshot shows the content of the iOS SDK installation package. Here, we can see four elements:
- FacebookSDK.framework: This is the framework that we will import in our XCode social project
- LICENSE: It contains information about licensing and usage of the framework
- README: It contains all the necessary information about the framework installation
- Samples: It contains a useful set of sample projects that uses the iOS framework's features
With the installation package, we only have the compiled files to use, with no original source code.
It is possible to download the source code using the GitHub channel. To clone git repo, you will need a Git client, either Terminal or GUI. The iOS SDK framework git repo is located at https://github.com/facebook/facebook-ios-sdk.git. I prefer the Terminal client that I am using in the following command:
git clone https://github.com/facebook/facebook-ios-sdk.git
After we have cloned the repo, the target folder will look as the following screenshot:
The previous picture shows the content of the iOS SDK GitHub repo. Two new elements are present in this repo: src and scripts. src contains the framework source code that needs to be compiled. The scripts folder has all the necessary scripts needed to compile the source code.
Using the GitHub version allows us to keep the framework in our social application always up-to-date, but for the scope of this book, we will be using the installation package.
Creating a new XCode project
We created a Facebook App ID and downloaded the iOS Facebook SDK. It's time for us to start our social application using XCode.
- The application will prompt the welcome dialog if Show this window when XCode launches is enabled.
- Choose the Create a new XCode project option. If the welcome dialog is disabled, navigate to File | New | Project….
- Choosing the type of project to work with is the next step as shown in the following screenshot:
- The bar to the left defines whether the project is targeting a desktop or a mobile device. Navigate to iOS | Application and choose the Single View Application project type.
The previous screenshot shows our new project's details. Provide the following information for your new project:
- Product Name: This is the name of our application
- Organization Name: I will strongly recommend filling out this part even if you don't belong to an organization because this field will be part of our Bundle Identifier
- Company Identifier: It is still optional, but we should definitely fill it out to respect the best-practice format for Bundle Identifier
- Class Prefix: This prefix will be prepended to every class we are going to create in our project
- Devices: We can select the target device of our application; in this case, it is an iPhone but we could also have chosen iPad or Universal
- Use Storyboards: We are going to use storyboards to create the user interface for our application
- Use Automatic Reference Counting: This feature enables reference counting in the Objective C Garbage Collector
- Include Unit Tests: If it is selected, XCode will also create a separate project target to unit-test our app; this is not part of this book
Save the new project. I will strongly recommend checking the Create a local git repository for this project option in order to keep track of changes. Once the project is under version control, we can also decide to use GitHub as the remote host to store our source code.
Importing the Facebook SDK into the application project
I have already mentioned that we are going to import Facebook SDK using the installation package. The installation package will create a FacebookSDK folder within the Documents folder. Within the folder, locate the FacebookSDK. framework folder, and drag it onto your XCode project. Drop the framework within the Frameworks section of Project Navigator as shown in the following screenshot:
When prompted to import the settings, check the Copy items into destination group's folder (if needed) option.
Locate the Facebook SDK folder within your project directory using Finder. You can find the folder location from XCode by right-clicking on and navigating to SDK | Show in Finder. Within the Framework folder, locate the Resources folder and open it.
As we did for the Facebook Framework, drag-and-drop FacebookSDKResources.bundle within the Frameworks section of XCode. It will be used for creating UI objects in the iOS project. Still check whether the Copy items into destination group's folder (if needed) option needs to be enabled.
The SDK relies on three frameworks already included in XCode, such as AdSupport, Accounts, and Social. We need to add these frameworks to our project. In the target's Summary pane, locate Linked Frameworks and Libraries, click on +, and the list of all available frameworks will show up.
Select the frameworks mentioned in the previous image, and click on Add. The three packages will be added into our root project folder. In order to keep our project in order, we can move the three frameworks into the Frameworks section of our project.
The next step is to add SQLite and the -ObjC linker Flags. In the Summary pane, select the project in Targets, locate Build Settings to your right, and check All and Levels in the bar underneath. Now in the search bar, type other link. The result should look as the following screenshot.
Then select the Other Linker Flags entry, and double-click on the third column, the one after Resolved. Add the following flags to it:
Now we need to set the Facebook framework to use the Facebook App ID we created previously. In Navigator, locate the Application-Info.plist file; you can find it in the project Navigator | Application Folder | Supporting Files.
Create a new entry with the FacebookAppID key; the value needs to be a string type with your Facebook App ID previously created.
We also need to ensure that the application receives the callback URL of the web-based authentication flow (OAuth). To achieve this, create a new URL type array entry with a single item. Add a new URL Schemes array to the array item, and the first entry will be a string key with the Facebook App ID prefixed with fb. You can see the result in the following screenshot:
The new social iOS project is now ready.
Getting familiar with Storyboard to build a better interface
Storyboard is a great tool to build an iPhone/iPad user interaction and interface. Using it, we are able to sketch the entire dataflow and interaction before we start developing our code.
Storyboard was introduced with the iOS 5 release. Previously, the only available format to build the UI was the XIB format. The XIB format provides the ability to build one interface at a time, whereas Storyboard allows you to work across multiple interfaces and connect them using actions (segues).
Storyboard is not meant to completely replace the XIB format; in fact, they can coexist easily.
The following screenshot shows an example of Storyboard in action. Each of the elements in Storyboard is called a scene. Scenes are connected through segues. Two scenes are embedded within a navigation controller, the object to the extreme left in the screenshot; the two main controllers are connected to each other using two segues associated with a button in each scene.
For this project, we will be taking advantage of the Storyboard features to build the application interface.
In this article, we learned how to create a new Facebook App ID that will be used to identify our social application on the social platform. We also created a new iPhone project, and downloaded the Facebook iOS SDK. In order to use the Facebook iOS SDK, we had to import several frameworks in our social project, and set some specific linker flags that will be used by the Facebook SDK. It's important also to remember that we need to use the Facebook App ID previously created in our application; otherwise, Facebook SDK will throw an exception because the Facebook App ID is used to communicate with the social platform.
An important tool that will also be used to build our social project is Storyboard. Storyboard will help users to create our GUI and define user interaction.
Resources for Article:
- Getting Started with Facebook Application Development using ColdFusion/Railo [Article]
- Facebook: Accessing Graph API [Article]
- Social Bookmarking - MediaWiki [Article]