This blog series is focused on the creation of SnapStack, a location-based photo sharing app for iPhone. We’ll walk through the entire process of building SnapStack, from the initial idea and design to submitting to the App Store. Along the way, we’ll demonstrate the usefulness of the StackMob platform and highlight the benefits of incorporating StackMob into your next project. Download SnapStack from the App Store.
This series is aimed at developers of all skill levels who are looking for an example app that showcases the features of the StackMob platform. The goal is to illustrate how easy it is to build and release to the App Store using StackMob as the backend of your app. The pace of this tutorial will start out slow, and ramp up quickly. It’s recommended that you have a basic understanding of Objective-C and Xcode.
Our app, “SnapStack”, will be a simple photo taking app. Users will sign in using their Facebook credentials. Once they’ve signed in, they’ll be able to snap photos and share them to Facebook, view photos nearby both in a feed and on a map and post comments. Download SnapStack from the App Store.
Creating an app like “SnapStack” requires a fair amount of setup. In this tutorial, we’ll be adding all of the ingredients necessary to construct our app.
We’ll be using many features provided by the StackMob iOS SDK and the StackMob Marketplace. The modules in the Marketplace are services that can be quickly installed and incorporated into your app. “SnapStack” will leverage the power of Core Data, which is tightly integrated into the StackMob SDK. Our app will utilize the following modules from the StackMob Marketplace:
Access Controls: The access controls module will give us greater control over schema permissions.
API: We’ll use the API to perform CRUD operations on our data.
Facebook: This module will let users to connect to our app seamlessly using their Facebook accounts.
GeoQueries: This module will enable our app to be powered by GPS location data.
Push: We’ll take advantage of the Push module to send helpful notifications to users.
S3: To integrate photo storage into our app, we’ll use the S3 module.
SendGrid: One of our partners in the Marketplace, the SendGrid module will allows us to send emails to users quickly and easily.
1. Open up Xcode and select “Create a new Xcode project”.
2. Select “Single View Application” and click next.
3. Name the application “SnapStack”. Enter in an organization name, a company identifier, and a class prefix. Make sure both “Use Storyboards” and “Use Automatic Reference Counting” are selected.
4. Click “Next” and choose where to save your project.
Tip: The organization name is listed in the App Store as the publisher of the app. The company identifier is simply an identifier.
Instead of building our own backend server (which would take weeks of work), we can take advantage of the StackMob platform immediately. To do this, we’ll create an app on StackMob, which will come complete with Development and Production Keys, unlimited API requests, and some Marketplace modules preinstalled, all for free!
1. Head over to StackMob and login to your Dashboard (if you don’t have an account create one first). Click “Create New App”, in the top right corner.
2. Create an app called “snapstack” and choose iOS as your platform. Click next.
3. Follow the setup instructions for importing the StackMob iOS SDK.
1. Follow the iOS tutorial to create and add Apple push certificates to your StackMob app.
1. Follow the tutorial to create and add S3 credentials to your StackMob app.
Our app will have a straightforward data model, consisting of three schemas: User, Snap, and Comment.
1. Navigate to the Schema Configuration tab in your Dashboard.
2. Click “Create New Schema”. Create a schema called “snap” and add the following attributes:
3. StackMob allows you to manage schema permissions using the Access Controls module. Edit the permissions for this schema:
4. Create another schema called “comment” and add the following attributes:
Edit the permissions to match those in the “snap” schema. Add a relationship called “snap” with the related object set to “snap”. Make it a one-to-one relationship.
5. Go back and edit the “snap” schema. Add a relationship called “comments” and set the related object to “comment”. Make it a one-to-many relationship.
1. Login to Facebook, and head over to the Developer Center.
2. Click “Create New App”, name it SnapStack, and click next.
3. Under “Basic Info”, select “Native iOS app” and enter in your Bundle Identifier.
4. Under the “Permissions” tab, enter in
user_photos for “User & Friend Permissions”. Enter
photo_upload for “Extended Permissions”.
5. Head over to the iOS Section of the Developer Ceneter and download the Facebook iOS SDK. Install the package. The default install location is
1. Back in Xcode, open up the Project Navigator.
2. Delete the “MOBViewController.h” and “MOBViewController.m” files, which are templates provided by Xcode. Make sure the Storyboard is empty.
3. Under Target -> Summary -> iPhone/iPad Deployment Info, set the device orientation to “Portrait”. Set the Status Bar Style to “Black Opaque”.
4. Back in the Project Navigator, create a group within “Supporting Files” called “Resources”.
5. Open up
~/Documents/FacebookSDK in Finder. Drag
FacebookSDK.framework into the “Frameworks” group in the Project Navigator. Check “Copy items into destination group’s folder”.
Tip: Make sure to have “Copy items into destination group’s folder” selected for any files you import into your project.
6. Under Target -> Build Phases -> Link Binary With Libraries, click the plus button to add more frameworks. Add
Social.framework. Make sure they’re set to optional.
7. Under Target -> Build Settings search for “Other Linker flags” and add the flags -lsqlite3.0 and -all_load.
8. In the Project Navigator, select the “SnapStack-Info.plist” file. Copy the “App ID/API Key” from your Facebook app and add it to the places indicated in the screenshot below:
Time to build out our data model based on our StackMob schemas. There are some small differences to keep in mind, which are detailed in the StackMob Core Data Support Specifications.
1. Select File -> New -> File… and in the Core Data templates, choose “Data Model”. Name it “SnapStackModel” and save.
2. With the Code Data model selected, add an Entity named “Snap”. Add the following attributes:
3. Add another Entity named “Comment”, with the following attributes:
4. Add a relationship from Comment to Snap named snap. Leave “To-Many Relationship” unchecked. 5. Add a relationship from Snap to Comment named “comments”. Make the relationship an inverse of “snap” and check “To-Many Relationship”. 6. Select File -> New -> File.. and choose “NSManagedObject subclass” from the Core Data templates. Select both Snap and Comment to create subclasses for each.
Our app will make use of many open source UI controls, all found at Cocoa Controls. Follow the installation instructions for each control to import them into the project:
Tip: Drag all the necessary files for external controls into the “Resources” folder.
2. RNBlurModalView: Make sure to add
Accelerate.framework to your project.
4. SEFilterControl: Add the compiler flag -fno-objc-arc to disable ARC for these files.
6. SDWebImage: Make sure to add the
ImageIO.framework to your project.
1. Open up terminal and
cd to your project. In the same directory as your
SnapStack.xcodeproj file, execute the following command:
git clone https://github.com/gobackspaces/DLCImagePickerController.git.
2. Once you’ve cloned it,
cd into the DLCImagePickerController repo and run the following commands to delete any unnecessary files:
rm -rf Defaultfirstname.lastname@example.org
rm -rf DLCImagePickerController
git submodule init
git submodule update
rm -rf GPUImage/examples
rm -rf GPUImage/framework/GPUImageTests
3. Back in the Xcode project, select File -> “Add files to ‘SnapStack’”. Add the entire DLCImagePickerController directory to the “Resources” folder.
OpenGLES.framework to the project.
You might get some compiler errors in the “GPUImageVideoCamera.m” file. Under iOS 6,
dispatch_release isn’t needed in ARC (Check out this StackOverflow question for more info). We’re only targeting iOS 6, so comment out
dispatch_release in that file.
1. Download and unzip the “Assets” folder containing all the images for this project.
2. Drag the folder into the “Resources” group in Xcode.
Be sure to build your project to double check that it is free of errors.
We’ve reached the end of Part 1 in this tutorial series, and have completed the majority of the grunt work. All the pieces are in place: StackMob, Facebook, S3 integration, push certificates, and more. In the next tutorial, we’ll focus on constructing the user interface of “SnapStack”, using Xcode’s Storyboard.
Join us next week when we begin Part 2 of the series: Creating the User Interface.