SnapStack App Bootcamp Part 1: Setup

Posted By Carl on Monday, March 11th, 2013

bootcamp1

Welcome to iOS Bootcamp Part 1!

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.

Who should read this tutorial?

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.

Prerequisites

  • We’ll be using Xcode version 4.5 and our deployment target will be iOS 6.0.
  • If you’re not already a StackMob customer, sign up for free.

Idea

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.

What we’ll cover

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.

Using StackMob

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.

Create a new Xcode Project

1. Open up Xcode and select “Create a new Xcode project”.

1. Open Xcode

2. Select “Single View Application” and click next.

2. Create a single view application

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.

3. Name it SnapStack

Create a StackMob Application

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.

1. Create new app

2. Create an app called “snapstack” and choose iOS as your platform. Click next.

2.

3. Follow the setup instructions for importing the StackMob iOS SDK.

4. Navigate to the Marketplace and install the Push and SendGrid modules to your StackMob app.

Setting up Push

1. Follow the iOS tutorial to create and add Apple push certificates to your StackMob app.

Setting up S3

1. Follow the tutorial to create and add S3 credentials to your StackMob app.

Creating the Data Model

Our app will have a straightforward data model, consisting of three schemas: User, Snap, and Comment.

  • The user schema is automatically created for you when you create an app on StackMob. It is assumed to be the schema for storing your user objects as well as for password management, etc. For our app, users will login with Facebook credentials and we will in turn generate StackMob users and link them with the access tokens we receive from Facebook’s SDK.
  • A snap is created by a user, and contains the image taken, the name of the creator, as well as the geo location of where it was created.
  • Users can make comments on snaps. A comment has the name of the User who created it, the text of the comment, and the relationship to its parent Snap object.

1. Navigate to the Schema Configuration tab in your Dashboard.

Screen Shot 2013-02-21 at 10.58.16 AM

2. Click “Create New Schema”. Create a schema called “snap” and add the following attributes:

  • A String attribute called creator
  • A binary attribute called photo
  • A geopoint attribute called location

3. StackMob allows you to manage schema permissions using the Access Controls module. Edit the permissions for this schema:

  • Set the create permission level to “Allow to any logged in user”
  • Set the read permission level to “Allow to any logged in user”
  • Set the edit permission level to “Allow to sm_owner (object owner)”
  • Set the delete permission level to “Allow to sm_owner (object owner)”

4. Create another schema called “comment” and add the following attributes:

  • A String attribute called creator
  • A String attribute called text

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.

Creating a Facebook app

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.

3.

4. Under the “Permissions” tab, enter in email and user_photos for “User & Friend Permissions”. Enter publish_stream and photo_upload for “Extended Permissions”.

4.

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 ~/Documents/FacebookSDK.

Setting up the project

1. Back in Xcode, open up the Project Navigator.

1.

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”.

3. Make the project like so

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.

5.

6. Under Target -> Build Phases -> Link Binary With Libraries, click the plus button to add more frameworks. Add Accounts.framwork, AdSupport.framework, and Social.framework. Make sure they’re set to optional.

6.

7. Under Target -> Build Settings search for “Other Linker flags” and add the flags -lsqlite3.0 and -all_load.

7.

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:

Screen Shot 2013-02-20 at 11.45.45 AM

Creating the Core Data Model

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:

  • An Integer64 type named lastmoddate
  • An Integer64 type named createddate
  • A String type named creator
  • A String type named photo
  • A String type named sm_owner
  • A String type named snapId
  • A Transformable type named location

3. Add another Entity named “Comment”, with the following attributes:

  • An Integer64 type named lastmoddate
  • An Integer64 type named createddate
  • A String type named creator
  • A String type named text
  • A String type named sm_owner
  • A String type named commentId

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.

Adding external controls

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.

1. FPPopover

2. RNBlurModalView: Make sure to add QuartzCore.framework and Accelerate.framework to your project.

3. SSPullToRefresh

4. SEFilterControl: Add the compiler flag -fno-objc-arc to disable ARC for these files.

5. TTTTimeIntervalFormatter

6. SDWebImage: Make sure to add the ImageIO.framework to your project.

Importing DLCImagePickerController

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 Default-568h@2x.png

  • rm -rf DLCImagePickerController

  • git submodule init

  • git submodule update

  • rm -rf GPUImage/examples

  • rm -rf GPUImage/framework/GPUImageTests

Screen Shot 2013-02-26 at 6.03.44 PM

3. Back in the Xcode project, select File -> “Add files to ‘SnapStack’”. Add the entire DLCImagePickerController directory to the “Resources” folder.

4. Add AssetsLibrary.framework, AVFoundation.framework, CoreMedia.framework, CoreVideo.framework, and 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.

Adding image assets

1. Download and unzip the “Assets” folder containing all the images for this project.

2. Drag the folder into the “Resources” group in Xcode.

Sanity check

Be sure to build your project to double check that it is free of errors.

Congrats!

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.

Download the full project up to this point.

Join us next week when we begin Part 2 of the series: Creating the User Interface.

Comments

comments