Making and Releasing an iOS Sticker App
for metal-heads
I’ve been working in the startup and app “industry” for awhile now. Worked on a few projects that are out in the wild, some that never launched and some that are still ideas. Never once have I released something from my own developer account. I decided the best way to do that would be to collaborate with my friend Matthew Ulstad on a sticker app for metal-heads. I really felt that my fellow deviants of the darkness needed representation in a world full of sparkles, kittens, and rainbows. We prefer our rainbows in grayscale and our sparkles to be flames. I wanted to document my experience here and help designers without development experience to break into the App world. 🙂
P.S. There’s a gift for you at the bottom of this post. App icon templates in sketch and illustrator.
Preparing for App Development
Apple’s App Store and ecosystem are really marvels of technology and have allowed for people to really create and build. The one issue they have is a convoluted documentation system. This was honestly the hardest part of being able to get ready to make a sticker app.
I spent more than enough hours poring through Apple’s documentation trying to make sense of what steps I needed to take in order to get my app up in iTunes connect to test and submit to the App Store. I finally gave up and googled how to make and release an iOS app. That’s when I found Tony Dahburka’s two part series on start to finish iOS app development.
Tony goes into a lot more detail by walking through every single step. I will just outline the main steps needed in order to get your account ready to release an app. Before you start this process, it would be good time to make sure you have the latest version of Xcode installed.
Step 1 — Signing Up
Sign up for a developer account at developer.apple.com. Be warned, you’ll need a credit card and $100 in your account. This is a two step process; you’ll sign up for your account, I’d advise using the same credentials as your Apple ID as it makes it easier to authenticate during development, and then you’ll join the Apple Developer Program. When you join the program, be sure to sign up as an individual or sole proprietor since you’re focusing on just creating a sticker pack for yourself.
Step 2 — Certificates, IDs & Profiles
Once you’ve enrolled and signed back into your account, you should see a screen like this:
The two things you’ll need to worry about moving forward are Certificates, IDs & Profiles and iTunes Connect. For this step, we’ll worry about Certificates, IDs & Profiles. When you click on this link, you should see a sidebar with four top level categories; Certificates, Identifiers, Devices and Provisioning Profiles. This step has a few sub-steps so stay with me on this one. If you get confused or lost, you can always refer to Tony’s guide where he goes into more detail.
Step 2.1 — iOS Development Certificate
At this point, you should be on the Certificates: All page. You can click the + button on the top right. There’s two types of certificates for app development that you’ll have to worry about: iOS distribution and iOS development. The reason Apple requires these certificates is to make sure that apps are bootlegged or used on other platforms. This is simultaneously a security measure as well as a way to protect developers’ apps.
The first Certificate you’ll want to create is the iOS Development certificate. When you start creating this certificate, you’ll have instructions on all the steps needed in order to complete the certificate. There’s two ways to do this, Tony outlines the manual process of creating a CSR (Certificate Signing Request) through Xcode, then uploading that to your developer account, then download your certificate. Apple actually gives really good instructions as you are going through this process.
Step 2.2 — iOS Distribution Certificate
Once you’re done creating an iOS Development certificate, you’ll create an App Store certificate. You’ll want to click the + button again and scroll further down the page to the Production section where you’ll find the App Store and Ad Hoc option. Continue through the certificate creation process with this as well.
Step 2.3 — Device Registration
Next, you’ll want to click on Devices: All and click the + button in the top right. For this step, you’ll want to grab your iPhone or iPod Touch and a USB cable. Plug in your device and open iTunes. Select the device from the menu and you’ll see your device’s serial number, if you click on the serial number it should change. Click on it until you see the UUID and right click to copy the number to your clipboard. You’ll copy this into the UUID field in the device registration form.
Step 2.4 — App IDs
This is the step you’ll end up repeating the most in the future. For every app that you make, you’ll need to create an App ID. You should see three sections, App ID Description, App ID Prefix and App ID Suffix. In the description, enter your the name you’d like to have for your app and use either CamelCase format or Dashed-Format. Either is fine, but pick one format and stick to it moving forward. The ID Prefix should already be filled in, so you shouldn’t have to worry about it. The ID Suffix is the part you’ll want to worry about. Apple recommends a reverse domain style naming convention. This format should be your website or the app’s webite domain name plus the app description name you created earlier. Here’s an example: com.ghanbak.MyApp.
Step 2.5 — Provisioning Profiles
This step allows your Xcode app to submit to iTunes Connect. For this, you’ll have two options similar to what I highlighted in the Certificates section; a Development Profile and a Distribution Profile. You’ll want to click the + button in the top right and should see an option for iOS App Development under the Development section. Select that and continue with the steps that are provided. Provisioning Profiles require the app ID, a certificate and a device to be assigned to them. Be sure to select the Development certificate when going through this step. The last part is naming the profile; it’s best to use a naming convention similar to MyAppDevelopment, that way, when you’re setting up your app in Xcode, you can select this provisioning profile.
Next you’ll create the Distribution Profile, this step is similar to the App Development one. You’ll click the + button again and select the App Store option under Distribution. You’ll do the same that you did for the development profile except select the Distribution certificate and use MyAppDistribution as your naming convention.
Congrats! You’re half way there!
Step 3 — Xcode
This is where the fun starts. Assuming you’ve already created the artwork you’d like to use for your sticker app, we’ll skip to creating the Xcode project and making sure you have the appropriate assets. You can find all the resources you need for creating a sticker pack here. This shows best practices, images sizes, etc.
You’ll want to open Xcode and start a new project.
Click next.
The Product Name should match the App ID you created in your developer account. Take note of the Bundle Identifier, it should match the App ID Suffix you have in your developer account. This is where things start tying together. These IDs are used to let iTunes Connect and Xcode know that the apps are the same.
In this section, you’ll want to select your “team” under the signing section and make sure that Automatically manage signing is turned on. Next, you’ll want to select your deployment target. This should be set to at least 10.0. This targets the minimum version of iOS you’d like to release to. Considering stickers were not available until 10.0, you’ll want to target at least 10.0. Lastly, make sure to select iMessage App Icon from the sticker icons source. This sets the app icon dimensions for later.
Once you’ve finished with settings, it’s time to start adding visuals to your app. You should see a file structure like this. The one you’ll want to worry about is the folder with `.xcstickers`. Within this folder is your sticker pack and your app icons. All you have to do is click on either and drag and drop your images in. Remember, you’ll want to follow the image size guidelines on the developer site.
In order to test your app, you can click on “iPhone SE” (like the above screenshot) to select the iPhone or iPad model you want to test on and then press the “play” button, which is actually the build button. Whenever you press this, it creates a new build. When the build is complete, it will open up Xcode’s Device simulator. There are two people available in iMessage on the simulator that allow you to see stickers sent to and from people. Test out your stickers to make sure they look the way you want them to. Remember, every time you add new or updated sticker images to re-run the build before testing. While you’re at it, be sure to press Cmd+S to save screenshots of your stickers in action to your desktop. I would advise testing on an iPhone 7+/6+ and a 12.9" iPad and having the window size set to 100%. And keep pressing Cmd+S while you’re testing. You’ll thank me later.
Step 4 — iTunes Connect
Remember those two options in your developer account? It’s time to go back and click on the iTunes Connect link. This is where you’ll get all set to test and release apps. Think of this as your inventory and shipping center.
You’re going to see a screen like the one below. There’s only two sections we’ll worry about for now. First and foremost is the Agreements, Tax and Banking section.
In this section, you’re going to see a table of information and three blue buttons.
Click on each and fill out the forms. These are vital for tax purposes, and receiving revenue from app sales from Apple. You cannot continue without finishing this section first.
After you’re all squared away legally, you can navigate back to the iTunes Connect home screen and click on My Apps.
You’re going to want to click on the + icon in the top left and select New App. Next you’ll be entering information about your app.
You’ll want to select iOS and enter the name of your app. This time, you won’t have to use camel case or dashed naming conventions. This name will be visible on the app store. Choose the language your app is in and select the Bundle ID you created. The SKU can be the reverse domain ID you had created or some random SKU number that you’d like to use. Click Create to finish.
Step 5 — Sending Your App to iTunes Connect
When you’re all set, the last step before moving into the app store and testing is to send your app to iTunes Connect. To do this, you’ll want to go back to Xcode. This step seems convoluted but should be fairly simple with a Sticker Pack App. Double check to make sure that all your pieces are in order.
And lastly, you’ll want to run one more build of your app either on a simulator or the “generic ios device” option.
Next, you’ll want to navigate to Product > Archive. This is the final step. If your build was smooth, you should have no issues. If it runs successfully, you should be able to refresh your app in iTunes Connect and see that a build is available.
Step 6 — Beta Testing (Optional)
If you so desire to beta test your app before submitting to the app store, you’ll have to fill out a few pieces of information about the app in iTunes Connect.
There’s two types of testing with TestFlight, Internal and External. Since you most likely signed up as an individual, you’ll be limited to one internal tester. This is fine because you can have up to 20,000 external testers. The caveat being you’ll have to wait at least a day for the App Store to review your sticker app. In order to test either internally or externally, you’ll have to select the build that you shared with iTunes Connect. Select that build and be sure to fill out any relevant information for the app when doing testing. You can add testers by clicking the plus sign and entering their email address that is associated with their Apple ID. Be sure to ask your friends this because they will not be able to test the app if they provide a different email address.
You should also advise your friends, and do so yourself, to download the TestFlight app from the app store. This is how you can get the beta app onto your device.
Step 7 — Submit to the App Store
This step is fairly easy. You should see your app in the sidebar of the App Store section in iTunes Connect. Click on it.
In this section, you’ll prepare all the information about the app that will be used in the app store. These are things like app icon, categories, descriptions, and screens.
Remember those screenshots I told you to take when testing… all you have to do is upload those to the screenshot areas in labeled screenshots. You’ll have to do double duty on this since you’re creating an iMessage App. There’s a section at the top labeled App Previews and Screenshots and another section under iMessage App labeled Screenshots. Be sure to fill those both in with the screenshots you took. Towards the bottom you see an option to select a build, options for app icons (which you’ve already made) and contact/copyright info. Lastly, there’s two sections you will want to make sure are filled out. At the bottom of the page, there’s a section for app review information, be sure to fill that in because if there’s anything that comes up in the review process, you’ll need to contacted. The other part is the Version Release. I set my option to automatically release once the app review has been approved. If you are ever working on an app that has a specific date that it needs to be released, you can set it to either manual release or set a date and time for a scheduled release.
Step 8 — Prepare for Release and Rejoice 🎉
This final step is where you can rejoice and be happy and wait for the review process! The review can take a few days so be patient. You can do what I did during this time and prepare marketing info, a launch dribbble shot, tweets, and even a blog post about your experience.
You’ve done it. You’ve gone through all the steps! You’re submitting your app to be reviewed and released to the App Store. Your quirky humor can now be immortalized in text conversations through your sticker illustrations! Huzzah!
Final Words
I really enjoyed going through this process and learning how to setup a developer account, creating a sticker app and using Xcode and working with iTunes Connect. I’d say the two biggest pain points and things that I learned were setting up certificates, IDs and profiles are somewhat convoluted and difficult for a noob to understand and that there are no good resources from Apple for explaining that. The other thing was that Apple’s app icon templates are terrible. That’s why I’ve created Sketch and Illustrator templates for you. You can either download them from my website or the links below. Thanks for reading and happy app designing!
If you enjoyed this, please recommend it with a ❤️ or share with your friends. If you’d like to read less polished and sane writing, you can follow me on Twitter.
