This is part 2 of the “Publish a New App in The App Store” tutorial and in it you will perform tasks that basically prepare your app for distribution on the App Store. Before you begin, create a folder with three subfolders on your Desktop. You will store the App Store screenshots, the App Store icons, and other assets in them. I created this folder and subfolders for the iCarLocator’s assets on my Desktop.
Add App Icons in the Xcode project
You must create one or more App Icons and add them in your Xcode project. If you don’t, Xcode will won’t let you submit your app to the App Store; instead, it will display an error message. Take a look at the image in Figure 1 below. It shows App Icons, Spotlight icons, and Settings icons you add in your Xcode project. You can create them yourself or hire a professional. As you can see, you are required to add only App Icons in your Xcode project.
The number of required App Icons you create and add in your Xcode project depends on the type of app you created.
- If you created an iPad app, you must create and add the 152×152 App Icon in your Xcode project.
- If you created an iPhone or Universal app, you must create and add the 120×120 App Icon and 152×152 App Icon in your Xcode project.
Add Launch Images in the Xcode project
You must create one or more launch Images and add them in your Xcode project. If you don’t, Xcode will complain when you try to submit your app to the App Store. The easiest way to create a launch image, with the correct dimensions, is to use the iOS Simulator to capture a screenshot of the first screen of your app while it is running in the iOS Simulator. The number of screenshots you capture depends on whether you created an iPhone, iPad or Universal application.
If you created… | Screenshots to capture on the iOS Simulator |
---|---|
an iPhone or Universal app | You have to capture the first screen of your app while it is running in these iOS Simulators:
Rename the three png files and add them in your Xcode project. |
an iPad app | You have to capture the first screen of your app while it is running in the iPad Simulator. Rename the png file and add it in your Xcode project. |
Instructions on how to capture a screenshot on the iOS Simulator and rename it is provided at the end of this document. Once you’ve captured screenshots on above mentioned iOS Simulators and renamed them, drag-and-drop them in your Xcode project.
Create an App Store Icon
First of all an App Store icon is a larger version of your App Icon and it is displayed in the App Store and iTunes. You must create one of these App Store icons; however, don’t add it in your Xcode project. Put it in the app assets folder you created earlier on. Later, you will upload it in the iTunes Connect Portal.
Create App Store Screenshots
You must create at least one screenshot for the type of device your app will run on. Later, you’ll upload them in the iTunes Connect portal. Apple will display them on the App Store page and iTunes page it creates for your iOS app. You can upload up to 5 App Store screenshots of these sizes in iTunes Connect.
- 640 x 1136 pixels for 4-inch iPhone devices (portrait orientation)
- 640 X 960 pixels for 3.5-inch iPhone devices (portrait orientation)
- 1536 x 2048 pixels for iPad devices (portrait orientation)
- 2048 x 1536 pixels for iPad devices (landscape orientation)
The easiest way to create a screenshot for the App Store, with the correct dimensions, is to use the iOS Simulator to capture a screenshot of your app while it is running in the simulator.
If you created… | Screenshots to capture on the iOS Simulator |
---|---|
an iPhone or Universal app | You have to capture at least one screen of your app while it is running in these iOS Simulators:
Rename the png files and add them in the app assets folder you created on your Desktop. Later, you will upload the screenshots in the iTunes Connect Portal. Take a look at this image to see what I mean. |
an iPad app | You have to capture at least one screen of your app while it is running in the iPad Simulator. Rename the png file and add it in the app assets folder you created earlier on. As you can see in above image, you can upload up to five iPad screenshots in the iTunes Connect portal. So I suggest you capture and rename that number of screenshots and add them in the assets folder you created on your Desktop. |
Again, instructions on how to capture a screenshot on the iOS Simulator and rename it is provided at the end of this document. Once you’ve captured screenshots on above mentioned iOS Simulators and renamed them, drag them from your Desktop and drop them into the app assets folder you created earlier on.
Create a support page for the app
You must create and upload a support page for your app on your site. In iTunes Connect you will add the URL to it in a web form’s box. The link for your support page is called the Developer Website on the App Store page. The support page will serve as the place where App Store customers go to get information about your app and contact you. The page is also the place where you add the URL to the QuickTime video you will create for your app. Now, I used WordPress to create the support page for the CarLocator application and upload it to my site,”theapplad.net”. You should take time out now to create the support page for your iOS application. Before continuing.
Create a QuickTime video of the app
Creating a QuickTime video that shows how your app works is not mandatory; however I highly recommend it. Later, you will add the URL in the iTunes Connect web form’s text box. By the way, you already have the QuickTime application on your computer.
When I submitted my first app (CarLocator) to the App Store, Apple rejected it. The email they sent me said that I should visit the Resolution Center in iTunes Connect. So I did and the Resolution Center page basically said that I should submit a demo video showing how my app work. I created a QuickTime video and submitted it to Apple, a week later, my Car Locator app was approved and it is currently available for free in the App Store:
Here are the steps to create a QuickTime video of your app
Before you begin, make sure you have the follow up and running.
- The iOS Simulator for running your application.
- The QuickTime Player application for recording your mouse movements as you interact with your app in the iOS Simulator.
- A support page on your site for hosting your QuickTime video. As you already know, the support page will also serve as the place where an App Store customer go to get information about your apps and contact you.
1. Launch your app in Xcode. Launch the iOS Simulator and scale it to 75%.
2. In Xcode, select the iPhone or iPad simulator, then click Run.
3. Launch the QuickTime Player.
4. Select New Screen Recording from the QuickTime Player menu.
5. Make sure the “Show Mouse Clicks in Recording” menu item is selected, then click the red record button.
The QuickTime Player display these instructions on your screen.
6. Since you want to record the simulator’s screen, use your mouse to highlight the simulator’s screen like this:
7. Click “Start Recording” button shown in the middle of the screen, then interact with your app as usual. Behind the scenes, QuickTime record your actions; such as mouse clicks and scrolling. When you are done recording, click the stop button, located on the right side of the menu bar.
8. Play the video you just recorded, if you like it, then press the shortcut keys (⌘ + S) to save it. Enter a name in the Export As: box, then click the Save button. QuickTime will save your video in the Movies directory that’s on your computer. If you don’t like your recording, discard it by clicking the Don’t Save button. Repeat steps 4-7 to record a new video.
9. Upload your video on your website. I used WordPress’s upload tool to upload the QuickTime video I made for the CarLocator app on my site, theapplady.net. You can view the video by clicking this link: CarLocator App Demo
Manually Create an Explicit App ID
Earlier on you told Xcode to create an iOS Development and iOS Distribution Signing Identity. By asking Xcode to create these items, it created two certificates in the Provisioning Portal. We also told Xcode to create an iOS Development Provisioning Profile at the Provisioning Portal.
What we have to do now is manually create an Explicit App ID and an iOS Distribution Provisioning Profile at the Provisioning Portal. These two items, along with the iOS Distribution Signing Identity we created earlier on, is required for successful submission of your app to the App Store.
Now, the remainder of this guide assume your iOS application is using or will use certain iOS services; therefore, you must create an Explicit App ID and Provisioning Profile. By the way, if your iOS application doesn’t currently use iOS services, I highly recommend creating an Explicit App ID for you app. Maybe in a future version of the app, you will use iOS services.
Steps to create an Explicit App ID
Once you’ve executed steps presented below to create an Explicit App ID, it will be available for selection in the Bundle ID menu of this iTunes Connect form.
Figure 1: One of many iTunes Connect record creation form |
Sign in to the iOS Developer Provisioning Portal, using your iOS Developer Program’s Apple ID and Password. Click the Certificate image or text link on the page.
Now, on this page, click Identifiers.
On the next page, click the + icon next to the magnifying glass icon which is located in the upper-right hand corner of the page. Now, you will see this page.
Enter a name in the Name field. For example, if your iOS app is called CashboxCounter, then enter Cashbox Counter in the Name field. Next, tick the Explicit App ID radio button. In the Bundle ID field, enter a unique bundle id in the Bundle ID field.
Scroll down to the bottom of the iTunes Connect form. Assuming you don’t want to enable any more App Services, click the Continue button and you will see this screen in your browser.
Assuming all information is correct, the Submit button, then the next screen’s Done button. That’s it, you’ve successfully created an Explicit App ID.
Manually Create a Distribution Provisioning Profile
Sign into the Provisioning Portal and create a Distribution Provisioning Profile for the Explicit ID you just created for your app. For the iCarLocator I created a Distribution Provisioning Profile, called “The App Lady” at the Provisioning Portal.
Download The Distribution Provisioning Profile in Xcode
Return to Xcode’s Preferences window. Click the View Details… button, click the refresh button to have Xcode download the Distribution Provisioning Profile you created in the portal. It will appear in the Provisioning Profiles panel.
Change the app’s Bundle Identifier in Xcode
You created an Explicit App ID and a Distribution Provisioning Profile in the Provisioning Portal. Now, you have to change your iOS app’s Bundle Identifier to match the Provisioning Portal’s Explicit App ID.
Start by launching your app in Xcode. Next, sign in to the Provisioning Portal. Click the first highlighted box shown in Figure 1 below. Next, click the Identifiers link shown in Figure 2 below.
Figure 1 | Figure 2 |
On the iOS App IDs screen (Figure 3 below), click the App ID name representing the Explicit App ID you created for your app. For me its the second name in the list, which is ” The App Lady”. Your screen will look similar to Figure 4.
Figure 3 | Figure 4 |
What you want to do now is change the Bundle identifier in your app’s Info.plist file to the Provisioning Portal’s ID. Take a look at Figure 5 below to see what I mean.
Modify entries in the app’s Info.plist file
On the physical device, the app’s name is shown below the App Icon like this.
If you want to change it to something else, you’ll have to change the Bundle display name in your app’s Info.plist file. Take a look at Figure 5 above. As you can see, I changed the Bundle display name to CarLocator.
Now, you must change the Bundle version number in the Info.plist file. Since this is the first time you’re submitting your iOS app to the App Store, change the Bundle version number in the Info.plist file to 1.0. In Figure 5 above it’s 1.1 because I’ve already submitted the first version to the App Store, which app approved.
For modifications you’ve made in the app’s Info.plist file to take effect, run the app on your device or the iOS Simulator.
Check the General tab settings
The last thing you have to do is check these settings on General tab:
- The Version box should display 1.0
- Your name should be selected in the Team menu
- The App Icons Source menu should be set to AppIcon
- The Launch Images Source menu should be set to LaunchImage
- Required App Icons and Launch Images should appear in the Project Navigator panel
Capture a screenshot on the iOS Simulator
- Launch your app in Xcode.
- Select the iPhone or iPad Simulator from Xcode’s scheme.
- Run the app in the simulator (⌘ + R).
- Select the screen you want the simulator to take a screenshot of.
- Take a screenshot of the simulator’s screen (File | Save Screen Shot or ⌘ + S). The simulator will add the screenshot on your Desktop.
- Rename the screenshot to whatever you like; for example, iphone3inch-screen1.png (App Store screenshot) or Default-ipad@2x.png (launch image). The image name should convey its purpose and the device it will be displayed on.
- Repeat step 4-6 to capture other screens in the iPhone or iPad Simulator and rename them.
Now proceed to part 3 of the guide.