Snapback | iOS iPhone Custom Cameras Application + In-App Purchase

Introduction

Please carefully read this guide in order to fully configure this template, and remember to test it on a Real Device – the iOS Simulator may fail.

An internet connection is required.

Quick Start

You may just run this app on your own device via Xcode and play with it, it will work.
Anyway you need to customize this app into your own version, so just keep reading this guide.

General

Xcode

This template has native Apple Swift code, so you can edit it only with Xcode running on a Mac computer. If you don’t have it, download it for free on the Mac App Store.

PLEASE NOTE that you’ll need the latest official version of XcodeNO BETAS, because Betas are always buggy and never work properly.

App Name and Bundle ID

You must change the Display Name and Bundle Identifier into the new ones in the General tab in Xcode: 

Archive App for App Store Publishing

Once your app is ready to be submitted to the App Store for review, you need to Archive your Xcode project.
Click on Product and select Archive. Xcode will archive your project and automatically open the Organizer window, where you’ll find a button to submit your binary to your App Store Connect account.

Reskin the UI design of the app

This project has a Storyboard file called Main.storyboard and you can find it in the list of file that is shown in left-side panel of the Xcode window.
You can edit all the UI elements of this app from the Storyboard, Colors, Fonts, Buttons, Views positions, etc.

The strings of the Alert Controllers are located in the code, so they can be edited only in the .swift files.

The images are stores into the Assets.xcassets folder.

Configurations

The Configurations.swift file

Open this file in Xcode and keep reading this guide, you’ll have to perform some edits in this file in order to get your template ready to run:

App Name

Replace this string with the new name you want to give to this app:

let APP_NAME = "Snapback"

Edit Cameras

This template comes with 10 pre-defined cameras, they have a name, short Description and background color.
In order for you to edit the existing cameras, you may just edit the following arrays:

// ------------------------------------------------
// MARK: - LIST OF CAMERAS
// ------------------------------------------------
let  listOfCameras = [
    "Leika Day__Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.",                            // Cam1
    "Icy Night__Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",         // Cam2
    "Blacky__Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",   // Cam3
    "Tooner__Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum.",  // Cam4
    "Pink Blink__Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit, ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",           // Cam5
    "Blurry__Do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit, so ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",                // Cam6
    "Vintage__Eiusmod tempor incididunt do ut labore et dolore magna aliqua. Adipiscing elit, so ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",               // Cam7
    "Purple Rain__Tempor incididunt do ut labore et dolore magna aliqua. Adipiscing elit, so ut enim ad minim veniam, quis nostrud exercitation ullamco amet laboris nisi ut aliquip ex ea commodo consequat.",              // Cam8
    "Red Room__Tempor incididunt do ut labore et dolore magna aliqua. Adipiscing elit, so ut enim ad minim veniam, quis nostrud exercitation ullamco amet laboris nisi ut aliquip ex ea commodo consequat.",                 // Cam9
    "Dark Sketch__Tempor incididunt do ut labore et dolore magna aliqua. Adipiscing elit, so ut enim ad minim veniam, quis nostrud exercitation ullamco amet laboris nisi ut aliquip ex ea commodo consequat.",              // Cam10

    // YOU CAN ADD NEW CAMERA NAMES AND DESCRIPTION HERE...
]


// ------------------------------------------------
// MARK: - LIST OF CAMERA BKG COLORS
// ------------------------------------------------
let  cameraColors = [
    hexValue(hex: "#ADAFB4"),   // Cam1
    hexValue(hex: "#66A7CF"),   // Cam2
    hexValue(hex: "#1E2329"),   // Cam3
    hexValue(hex: "#48CFAE"),   // Cam4
    hexValue(hex: "#FFADCB"),   // Cam5
    hexValue(hex: "#46455F"),   // Cam6
    hexValue(hex: "#C28957"),   // Cam7
    hexValue(hex: "#754CC3"),   // Cam8
    hexValue(hex: "#ED3326"),   // Cam9
    hexValue(hex: "#6E907B"),   // Cam10

    // ADD NEW CAMERA COLORS HERE...
]

As you can see in the first array – listOfCameras – the Name and Description strings are separated by __, so if you want to change the name of a camera, replace th text before the __ with your own short name. For the description, simply replace the text after __.

Example: You want to edit the 1st item of the listOfCameras array and change its name into “My Camera”, and its description into something like “This Camera is pretty cool, it will make feel like you’ve jumped back into the past!, then you can edit the first array’s like this:

 "My Camera__This Camera is pretty cool, it will make feel like you've jumped back into the past!",   // Cam1

In case you also want to change its background color, just replace the existing HEX value of the first item in the cameraColors array into the one you wish:

 hexValue(hex: "#ADAFB4"),   // Cam1

Now enter the MainCamera.swift file and scroll down until you find this switch case:

case 0:
	saturationFlt.saturation = 0.5
	camera --> saturationFlt --> vignetteFlt --> renderView
	break

This app comes with a few pre-defined GPUImage2 filters, so you can get the complete reference on the official GitHub page of GPUImage2: https://github.com/BradLarson/GPUImage2
So you can edit the case 0 above as you wish, based on the GPUImage2 guide.

The last thing to do is to replace the existing preview images in the Assets.xcassets folder, in this case the ones called cam1cam1_preview1 and cam1_preview2. Check them out, run the app with your changes and take a screenshot of the edited camera (you’ll use it to replace the cam1 image). Then take 2 pictures and send them to your computer, you’ll use them to replace the cam1_preview1 and cam1_preview2 images.

Repeat the steps above to edit all the other items in both arrays.

Add a New Camera

Follow these simple steps in case you want to add a new camera:

Copy one the items of the listOfCameras array, and past it below this comment:

// YOU CAN ADD NEW CAMERA NAMES AND DESCRIPTION HERE... 

Edit it as you wish (refer to the Edit Cameras paragraph).

Copy one the items of the cameraColors array, and past it below this comment:

// ADD NEW CAMERA COLORS HERE... 

Edit its HEX value as you wish (refer to the Edit Cameras paragraph).

Enter the MainCamera.swift file, add a new switch case below this comment:

// YOU MAY ADD NEW CAMERAS HERE... 

Create your new photo filter based on the GPUImage2 guide on GitHub, also check the existing cases just to have one more reference

Run the app, tap the Cameras button  and scroll down to the last camera.

Point something cool with the camera and take a screenshot of your iPhone screen

Take a couple of pictures with that Camera

Enter your iPhone’s Camera Roll and send those pictures and the screenshot to your Mac via AirDrop – or email them to yourself

Enter the Assets.xcassets folder in Xcode and create 3 new Image Sets and name them progressively, which means that, if you’re adding an 11th camera, for instance, then you’ll have to rename the Image Sets like this:

cam11  
cam11_preview1  
cam11_preview2 

Now place the 3x and 2x images of your iPhone screenshot in the cam11 Image Set

Place the 3x and 2x images of the 2 pictures you took with your new camera in the cam11_preview1 and cam11_preview2 image Sets

You’re done, now run the app and enter the Cameras List screen to find out the preview of your news camera

For each image size, please check the exisitng ones and make your new images size accordingly, it’ll be good for your app performance if you use the same size of tyhe existing images.

Photo Frames

This template comes with 8 pre-defined photo frames, you can find them in the Assets.xcassets folder in Xcode with the prefix of photo_frame.
As you may see, they are named progressively and this is important because the app checks for their final number to display all of them in a row in the Share Image screen.

So, in ase you want to edit one or more of the photo frame images, just replace the existing image with your news ones, be careful to keep the size of your new images like the existing ones.

In case you want to add a new frame, just create a new Image Set, name it photo_frame9 – this is an example, since the last frame is called photo_frame8 – and drag the 3x and 2x images of your new frame in their cells.

Lastly, enter Configurations.swift and change the number of the below variable into the total amount of photo_frame images you have collected:

let PHOTO_FRAMES_NUMBER = 8

Sound clips

There’s a folder in Xcode called Sounds which contains a few .wav files, you may replace those sound clips with other .wav files, just don’t rename them, name your new sound files like the existing ones and replace the existing ones with your new ones, so you won’t have to edit a single line of code.

Custom Colors

You can edit the HEX values of the following variables as you wish, change the numbers before # symbol. The main color of the app and some UI will be affected by your change:

let MAIN_COLOR = hexValue(hex: "#23A0F1")

PLEASE NOTE that NOT all Views in the app will change accordingly to the new RGB values you’ve set in the above variable, you will still need to adjust some colors in some Controllers in the Storyboard.

Custom fonts

This App uses some custom font, which is already stored into the Xcode files list.
In case you want to add a new font, you have to first drag your .ttf or .otf font file into the left-side panel in Xcode and click the Finish button in the popup that will show up:

Then select the Label, Button, TextFiled or textView you want to change font to, click the [T] icon on the right-side Attributes inspector panel and select the font you want in the dropdown list:

Utility Functions

Unless you are familiar with iOS programming, you should leave the code of this section as it is since it includes useful functions to show alerts and perform other things in the app.

 In-App Purchase

Prepare your app for IAP

In order to get In-App Purchase ready for your app, you need to create your app’s page on the App Store Connect website: https://appstoreconnect.apple.com/

You also must have an Active Paid Apps Agreement in the Agreemets, Tax, and Banking section, otherwise, you won’t be able to create or benefit of IAP:

After you’ve created your app’s page in the My Apps section and set your App Information, enter the Features -> In-App Purchases section, click the + button and select the Non-Consumable option, then click the Create button:

Fill the fields with the reference name of your IAP product and its ID (something like com.appnamne.productid), select its Price, Display Name, Description, and the Review Information, then click the Save button. Check this screenshot as an example:

Enter the Prepare for Submission section, scroll down to where In-App Purchases title is and click the + button. Select the IAP product you’ve just created and click the Done button.

Now you can enter Xcode, the Configurations.swift file, and replace the string of the following variable with the IAP Product ID you’ve previously set on the App Store Connect page:

let IAP_PRODUCT_ID = "com.snapback.pro"

You’re done with setting up In-App Purchase now, so you can run your app and test it out with your Sandbox account. You should be already logged in with your Sandbox account in the Settings -> iTunes & App Stores section of your device -> SANDBOX ACCOUNT:

 Useful stuff

F.A.Q.

What kind of support is offered?

Free support is offered in case of bugs encountered in the original template, either in the code or the UI design.
In case you have edited the code – and so created bugs because of your editing – I may apply some fee to fix your bugs by a remote connection through AnyDesk, or by you sending me your source code for verification.

Should I use Xcode to edit this template?

Yes, you must always use the latest stable official version of Xcode to edit this application.
Download the latest version on the Mac App Store from your Mac.

I’ve performed all configurations mentioned in this Guide, but something is wrong. What should I do?

• Double-check all your configurations, probably you have missed something.
• Always check the Console log in Xcode if the app crashes.
The Console log helps to debug your app, it’s really important.

I get an error about “No such module: GPUImage”

Don’t worry, everything is fine, just Clean your project (click Product -> Clean Build Folder), and run it again, it’ll work and it will NOT affect the app at all.

Support | Contact