NAV

Introduction

Welcome to the Sparker documentation!

This documentation will explain step-by-step how to setup all the necessary backend parts for your app, how to open the source code and configure it, how to reskin your app to look exactly how you want it to, and how to upload your app to the App Store.

It is imperative that you read the ‘Setting Up’ and 'Opening The Source Code’ parts of this documentation, however all other parts may be skipped if you are already familiar with Xcode and the App Store submission process.

Requirements

In order to set up and publish your app there are a few things you will need:

Setting Up

Creating the App ID

alt text

If you haven’t done so already, enroll in the Apple Developer Program here.

Creating the App Record

Facebook

As Sparker uses Facebook as its sole authentication method, you will need to setup an App on Facebook.

If you haven’t already, you’ll need to register as a developer on Facebook which you can do here.

QuickBlox

If you haven’t already, register for a QuickBlox account here.

In App Purchase

The Sparker source code includes functionality for one In App Purchase subscription. To set this up:

alt text

Push Notifications

Follow these steps to enable push notifications for your app:

Opening The Source Code

If you haven’t done so already, download and install the latest version of Xcode from here.

Navigate into the 'Sparker’ folder in the downloaded source code, and open the 'Sparker.xcworkspace’ file.

Renaming The App

alt text alt text

Chances are you’ll want to change the name of the app from Sparker to your own chosen app name. To do so, select the very top 'Sparker’ from the folder structure in the left side bar and press return to start editing the name.

Enter the desired name for your app and press return again. You’ll be prompted to rename items throughout the source code, click 'Rename’.

After this your app name is changed.

Files You’ll Edit

After you have opened the source code in Xcode, you should have the following folder/file structure visible in the left sidebar.

The only files you will need to edit are:

Setup The Source Code

alt text

App ID

alt text

Facebook App Details

QuickBlox App Details

static let quickBloxApplicationID:UInt  = REPLACE_WITH_QB_APP_ID            // Quickblox Application ID
static let quickBloxAuthKey             = "REPLACE_WITH_QB_AUTH_KEY"        // Quickblox Authorization Key
static let quickBloxAuthSecret          = "REPLACE_WITH_QB_AUTH_SECRET"     // Quickblox Authorization Secret

static let quickBloxAccountKey          = "REPLACE_WITH_QB_ACCOUNT_KEY"     // Quickblox Account Key

In App Purchase Details

static let IAPProductID         = "REPLACE_WITH_IAP_PRODUCT_ID"

static let IAPSharedSecret      = "REPLACE_WITH_IAP_SHARED_SECRET"

Customizing Premium Features

The Sparker source code includes three features that are available to premium subscribers only by default. These are unlimited likes, rewind and passport. You can easily disable these features or make them available to free users.

Customizing the Upgrade Popup

static let featureTitles        = ["Rewind your last swipe","Change your location","Unlimited likes"]

static let featureSubtitles     = ["Go back and swipe again","Match with people anywhere","Have fun swiping"]

static let featureImages        = ["IconRewind","IconPlane","IconHeart"]

static let featureColors        = [UIColor.orangeColor(), blueColor, mainColor]

Customizing Like Limits

static let shouldLimitLikes         =   true    //Set to false to allow free users unlimited likes
static let likeLimit                =   100     //Number of likes a user can make before they must upgrade or wait
static let likeLimitTime:Double     =   24*60*60//Time user has to wait before likes are refreshed (in seconds)

Customizing Rewind

static let shouldEnableRewind      =   true        //Set to false to completely disable the 'rewind' feature
static let rewindIsPlusOnly        =   true        //Set to false to allow free users to rewind

Customizing Passport

static let shouldEnablePassport    =   true        //Set to false to completely disable 'location change' feature
static let passportIsPlusOnly      =   true        //Set to false to allow free users to change location

Reskinning Your App

The 'CONFIGUREME.swift’ file contains a huge number of variables that you can change in order to alter the appearance of your app.

Colors

static let mainColor = UIColor(red: 44.0/255.0, green: 962.0/255.0, blue: 80.0/255.0, alpha: 1.0)

//This will change the main color of the app to a dark blue with RGB values (44,62,80)

You can quickly change the color scheme of your app by changing the value of the 'mainColor’ variable.

There are a various other colour variables in the 'CONFIGUREME.swift’ file that you can change that will give you finer control over the appearance of your app. These variables are named so as to indicate what part of the app they will change.

Images

There are various image assets that you will need to replace with your own, such as the app icon, navigation bar title etc.

All of these assets are found in the 'Assets.xcassets’ item in the left side bar of Xcode.

If you take a look at any of the image assets (excluding the app icon), you’ll notice there are three images labelled 1x, 2x and 3x. As Apple devices have different resolutions (Retina, Retina HD), you provide three different sized images for each image asset so that an image of optimal size is used for each device. The 2x image should have dimensions double that of the 1x image, and the 3x image dimensions treble that of the 1x image.

The best way to go about changing these images is to select the image asset you want to change, right-click on an individual image (the 1x, 2x or 3x) and click 'Show in Finder’. Now open the image file in your preferred editing software. Replace the image with your own making sure the spacing around the image is kept almost the same. Now just save the image and repeat for the other sizes.

static let enableCredits = true

//This must be set to true if you use any of the icons included in the source code in your final app

You will notice variables in the 'CONFIGUREME.swift’ file ending 'ImageOverrideColor’. If this is set to true, the images color will be changed to the color specified by the corresponding 'ImageColor’ variable.

The App Icon

In order to change the App Icon, select 'Assets.xcassets’ from the left side bar and then select 'AppIcon’.

You will notice there are a number of files to replace, these are just different sizes of your icon. The size of each required image is the scale (2x or 3x) times by the point size listed below the image. For example, the iPhone App icons are sizes 120x120 (60x2) and 180x180 (60*3).

The Launch Screen

If you have altered the colour scheme of the app and any of the icons you will want to update the 'Launch Screen’, that is the screen that appears while the app is loading. You edit this by selecting the 'LaunchScreen.storyboard’ file from the left side bar.

alt text

While you may be under the impression that this screen should display your app logo, name or icon, this is heavily discouraged by Apple’s Human Interface Guidelines which instead suggests using a screen that is identical to the first screen of the app.

As such, the 'Launch Screen’ provided with Sparker includes just a navigation bar.

To change the color of the navigation bar on the Launch Screen:

The menu and chats icons will change automatically if you replace them in 'Assets.xcassets’.

Testing Your App

Using the Simulator

alt text

Xcode includes an iPhone simulator that allows you test your app on all available iPhone devices.

To run your app on the simulator:

Using a Real Device

In order to test your app on a real iPhone, you must first register it to your Apple Developer Account (you can register up to 100 devices to your account):

Submitting To The App Store

You will need to submit your app for review by both Facebook and the Apple Review Team.

Submitting Facebook App for Review

You will need to create a video of logging into your app and navigating to your profile screen to show how your app uses the 'user_birthday’ to show the user’s age. If you are testing on a real iPhone, you can use Quicktime on your Mac to take a video of the screen, otherwise use an application like ScreenFlow to record it in the Simulator.

Creating a Test User

You need to create a test user for Facebook to test your app with. If you have already created a test user, you can skip this step.

Uploading a Simulator Build

You need to upload a simulator build of your app for Facebook to review:

ditto -ck --sequesterRsrc --keepParent `ls -1 -d -t ~/Library/Developer/Xcode/DerivedData/*/Build/Products/*-iphonesimulator/*.app | head -n 1` path/to/YourApp.zip

Creating The App Record

In order to submit your app to the App Store you will need to create an 'App Record’ which includes information such as the App Description, category, screenshots etc.

Uploading Your App

Once you have finished testing your app and have created your App Record in iTunesConnect, you will need to upload it from Xcode:

After your app has been reviewed you will receive an email letting you know if it has been approved or rejected. If your app has been rejected, you will find details on the reasons in iTunesConnect.

User/Content Management

Delete/Disabling Users

You can delete user accounts from the QuickBlox dashboard. If you delete a user’s account, they will be able to create a new account using the same Facebook login.

Viewing Reports

Inspecting/Removing Content

You can view all uploaded images and delete inappropriate content from the QuickBlox dashboard.

Troubleshooting

Build Errors

If you get errors (red circle) when trying to build the app, your app will not run. Xcode will normally show which line the error occurs on. Some common mistakes to check are listed below.

If the error is still not solved, try searching Google or Stackoverflow for a solution. Sometimes just reading the error can make it obvious what the problem is.

Icons Don’t Look Right

If you have replaced the icons included with Sparker but they look either too small or too big, it is probably an issue with the spacing around the icons you have used.

The best way to replace the icons is to open up the existing icon in your preferred photo editing program, then paste your new icon over the top keeping the spacing around all sides the same, then hide the old icon and save.