Submitting to the iOS App Store: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
 
(114 intermediate revisions by the same user not shown)
Line 5: Line 5:
Apple is concerned that apps in its store work as described and do not cause any security risk. They also care that the apps provide some unique functionality and follow their [http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html Human Interface Guidelines]. The results have been good: Apps in the iOS App Store are usually pretty good, and the store is now one of the largest software resellers on the planet.
Apple is concerned that apps in its store work as described and do not cause any security risk. They also care that the apps provide some unique functionality and follow their [http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html Human Interface Guidelines]. The results have been good: Apps in the iOS App Store are usually pretty good, and the store is now one of the largest software resellers on the planet.


The method used will be to take an AppStudio app, use PhoneGap Build to produce a .ipa file, then submitting that to Apple.
The method used will be to take an AppStudio app, use VoltBuilder to produce a .ipa file, then submit that to Apple.


You can use this procedure for any AppStudio project. It will also work if your project uses the [http://docs.phonegap.com/en/2.5.0/index.html PhoneGap API].  It will not work if you are using third party PhoneGap plug ins: for those, you will need to use the PhoneGap SDK method.
Start by testing your app as much as possible while it is still a web app. It will be much easier to make changes, fixes and improvements at this stage.


Start by testing your app as much as possible while it is still a web app. It will be much easier to make changes, fixes and improvements at this stage.
Also, have a look at this list of common reasons apps are rejected: https://developer.apple.com/app-store/review/rejections/


= Get Signing Certificates =
= Get Signing Certificates =
Line 15: Line 15:
For security purposes, Apple has a strong signing process. This involves certificates which identify the developer, which need to be included in the build process. Apple issues these certificates as part of its developer program.
For security purposes, Apple has a strong signing process. This involves certificates which identify the developer, which need to be included in the build process. Apple issues these certificates as part of its developer program.


Apple has good instructions on its website about its policies, procedures and how to get the certificates. This is probably the most complex and confusing part of submitting an app, so it's good to pay attention carefully. The good news is that hundreds of thousands of developers have gone through it successfully.
Apple has good instructions on its website about its policies, procedures and how to get the certificates. This is probably the most complex and confusing part of submitting an app, so it's good to pay attention carefully. Don't be discouraged: hundreds of thousands of developers have gone through it successfully.
 
You will need a Mac to do this and have XCode installed. You can download XCode from the [https://developer.apple.com/devcenter/ios/index.action iOS Developer Center].


=== 1. Sign up for an iOS Developer Account ===
=== 1. Sign up for an iOS Developer Account ===
Line 25: Line 23:
=== 2. Set up your information in the iOS Provisioning Portal ===
=== 2. Set up your information in the iOS Provisioning Portal ===


Sign on using your Apple ID and go into the [https://developer.apple.com/ios/manage/overview/index.action Provisioning Portal.] You'll see tabs on the left. These are the important ones for AppStudio developers:
Sign on using your Apple ID and go into the [https://developer.apple.com/account/overview.action Certificates, Identifiers & Profiles.] You'll see tabs under iOS. Your account needs to have admin privileges.
 
These are the important ones for AppStudio developers:
 
==== App ID ====
 
Next, choose App IDs in the Identifiers section. Click on the Plus (+) to add a new App ID.
 
For App ID Description, enter the short name of your app. You will want to use this consistently.
 
Don't check anything in App Services for now.
 
For App ID Suffix, choose '''Explicit App ID'''. The Bundle ID should be your domain name (in reverse) followed by your app name.
 
  com.nsbasic.sampleapp
 
If everything is correct, Submit it.


==== Certificates ====
==== Certificates ====


The Development certificate identifies you and your development computer. It is created using the in the KeyChain Access utility on your Mac. Under KeyChain Access, select Certificate Assistant, then Request a Certificate from a Certificate Authority. In the window that comes up, select "Saved to disk". When you continue, it will ask you for a file name to save it to. Using the default name is fine.
The Development certificate identifies you and your development computer. Start by clicking on the Plus (+) button to add a new certificate.


Then, go to the [https://developer.apple.com/ios/manage/overview/index.action iOS Provisioning Portal] and select Home. Click on Launch Assistant and follow the instructions on the screen.
Choose ''iOS App Development Certificate''.


For App ID, enter the short name of your app. You will want to use this consistently.
Instructions will then display telling you how to create a CSR file. The easiest way to do this is to use [https://volt.build/VoltSigner/ VoltSigner]. The next screen uploads the CSR file - do that as well and click Generate.  


It will ask you to Assign a new Apple Device. This is the device you will use for your testing. You will need to enter a description on the device ("Bill's iPhone 5") and the Device ID. Get the Device ID (UDID) from iTunes with the device plugged in. In the Summary screen, click on "Serial Number" and it will change to "Identifier (UDID)". Right click on it to copy it and paste it into the Development Provisioning Assistant.
Once the file is generated, Apple's website will instruct you to download the certificate. Once you do that, use the [https://volt.build/docs/certificates/ Certificate Wizard] to make your p12 file. Put that file in your project's certificates folder.
 
Next, name your Provisioning Profile. You can call it whatever you like. It will then be generated and can be downloaded. Follow the rest of the instructions in the Development Provisioning Assistant to install the Provisioning File and Certificate.


==== Devices ====
==== Devices ====


In this tab, you can add additional devices. You can test on up to 100 devices: you need to set up a name and the UDID for each one. After making changes to the list of devices, you need to download the updated Provision file.
Next, set up the list of devices you will be using. This list will be built into the Provisioning Profile. Your test build will only run on the devices listed. You can list up to 100 devices. They can be iPod, iPads or iPhones.


==== App IDs ====
It will ask you to Assign a new Apple Device. This is the device you will use for your testing. You will need to enter a description on the device ("Bill's iPhone 5") and the Device ID. Get the Device ID (UDID) from iTunes with the device plugged in. In the Summary screen, click on "Serial Number" and it will change to "Identifier (UDID)". Right click on it to copy it and paste it into the Devices screen.


The App ID is set up by the Development Provisioning Assistant. This tab lets you set some options such as iCloud, Passes, Data Protection and Game Center, which are not usually used by AppStudio apps.
==== Provisioning Profiles ====


==== Provisioning ====
A Provisioning Profile is a file which tells iTunes which devices your app may be installed on. A Distribution Provisioning File is used for the App Store. Use a Development Provisioning File for testing.


Use this tab to download updated .mobileprovision files after changing the list of devices.
To create one, go into Provisioning Profiles and click on the plus ("+") button. Choose '''iOS App Development''' for testing. Your App ID should show up on the next screen - click on Continue. Next, select your Certificate, then the devices to be included (there is a handy Select All button). Finally, give the profile a name like sampleapp.development. The Provisioning Profile is then created and you can download it and save it in your app's certificates folder.


= PhoneGap Build =
= VoltBuilder =


[http://Https://build.phonegap.com PhoneGap Build] is a web service which takes your project and returns a file which can be uploaded to the App Store.  
[https://volt.build/ VoltBuilder] is a web service which takes your project and returns a file which can be uploaded to the App Store.  


To use it, you will need to create your own account with them. They have both a free and a paid plan. For a single project, PhoneGap Build is free.
To use it, you will need to create your own account with them. There is both a free and a paid plan.


Once you have the account, enter its name and password into Preferences.
Once you have the account, enter its name and password into [[Preferences]].


== Config.xml ==
== Config.xml ==


One of the project properties is named configxml. This is used to create the config.xml file which is passed to PhoneGap Build. It contains much of the information that PhoneGap Build needs to create your app. The default configxml file will work, though you may wish to do some customization. It's worth consulting [https://build.phonegap.com/docs/config-xml PhoneGap's config.xml documentation] to see all the options.
One of the project properties is named configxml. This is used to create the config.xml file which is passed to VoltBuilder. It contains much of the information that VoltBuilder needs to create your app. The default configxml file will work, though you may wish to do some customization. It's worth consulting [https://cordova.apache.org/docs/en/latest/config_ref/index.html Cordova's config.xml documentation] to see all the options.


Here is the default config.xml:
Here is a sample config.xml (subject to change):
<pre>
<pre>
&lt;?xml version="1.0" encoding="UTF-8"?>
&lt;?xml version="1.0" encoding="UTF-8"?>
&lt;widget  
&lt;widget  
xmlns = "http://www.w3.org/ns/widgets"
xmlns = "https://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.nsbasic.{id}"
id = "com.nsbasic.{id}"
versionCode = "{phoneGapBuildCounter}"
version = "{version}">
version = "{version}">


Line 75: Line 87:
&lt;description>{description}&lt;/description>
&lt;description>{description}&lt;/description>


&lt;!-- Icons: Expand this section with sizes for platforms you are targeting.-->
&lt;icon src='{icon}' />
&lt;icon src="{icon}" gap:role="default" width="57" height="57"/>
&lt;preference name='SplashScreenDelay' value='2000' />
&lt;preference name="splash-screen-duration" value="2000" />
&lt;preference name='AutoHideSplashScreen' value='true' />
&lt;gap:splash src="{splashscreen}"/>
&lt;plugin name='cordova-plugin-splashscreen' source='npm' />


&lt;!-- Platforms: Uncomment this section and customize as needed.
&lt;preference name="permissions" value="none"/>
&lt;gap:platforms>
&lt;!-- sample preference specifications -->
  &lt;gap:platform name="android" minVersion="2.1" />
&lt;!-- &lt;preference name="autorotate" value="false" readonly="true"/> -->
  &lt;gap:platform name="webos" />
&lt;!-- &lt;preference name="orientation" value="default" /> -->
  &lt;gap:platform name="ios" />
&lt;!-- &lt;preference name="fullscreen" value="true" /> -->
  &lt;gap:platform name="symbian.wrt" />
  &lt;gap:platform name="blackberry" project="widgets"/>
&lt;/gap:platforms> -->


&lt;!-- sample feature specification -->
&lt;plugin name="cordova-plugin-statusbar" source="npm" />
&lt;!-- &lt;feature name="http://api.phonegap.com/1.0/network"/> -->
  &lt;preference name="StatusBarOverlaysWebView" value="{phoneGapStatusBarOverlay}" />
  &lt;preference name="StatusBarBackgroundColor" value="{phoneGapStatusBarColor}" />
  &lt;preference name="StatusBarStyle" value="{phoneGapStatusBarStyle}" />


&lt;!-- sample preference specification -->
  &lt;allow-navigation href="*" />
&lt;!-- &lt;preference name="autorotate" value="false" readonly="true"/> -->
  &lt;access origin="*" />
&lt;!-- &lt;preference name="orientation" value="default" > -->
  &lt;allow-intent href="*" />
&lt;!-- &lt;preference name="fullscreen" value="true" > -->
&lt;/widget>
&lt;/widget>
</pre>
</pre>


Field with are surrounded by brackets, like {version}, are automatically filled in by AppStudio from the other information in the project.
Fields which are surrounded by brackets, like {version}, are automatically filled in by AppStudio from the other information in the project.
 
==== iOS Icon Sizes ====
* 57 px, iPhone
* 72 px, iPad
* 114 px, iPhone 4 Retina Display
* 144 px, iPad 3 Retina Display
* 1024 px, iTunes – Used in iTunes and in the App Store sized down to 175px
* 29 px, iPhone Settings/Spotlight, iPad Settings – used in these table views. Minor, but still important!
* 48 px, iPad Spotlight
* 58 px, iPhone 4 Settings/Spotlight
* 64 px document icon
* 320 px document icon


If you do not supply an icon, the default AppStudio icon will be shown.
If you do not supply an icon, the default AppStudio icon will be shown.


==== iOS splash screen sizes ====
==== iOS Splash Screens ====
 
Tablet (iPad)
* Non-Retina (1x)
**  Portrait: 768x1004px
** Landscape: 1024x748px
* Retina (2x)
** Portrait: 1536x2048px
** Landscape: 2048x1536px
Handheld (iPhone, iPod)
* Non-Retina (1x)
** Portrait: 320x480px
** Landscape: 480x320px
* Retina (2x)
** Portrait: 640x960px
** Landscape: 960x640px
iPhone 5 Retina (2x)
* Portrait: 640x1136px
* Landscape: 1136x640px


According to Apple's application guidelines, a tablet (iPad) application should not hide the status bar while a handheld (iPhone) application should hide status bar.
According to Apple's application guidelines, a tablet (iPad) application should not hide the status bar while a handheld (iPhone) application should hide status bar.
Line 141: Line 121:
An iPhone app should include one launch image in portrait orientation; an iPad app should include one launch image in portrait orientation and one launch image in landscape orientation.
An iPhone app should include one launch image in portrait orientation; an iPad app should include one launch image in portrait orientation and one launch image in landscape orientation.


If you do not supply a splash screen, the default PhoneGap splash screen will be shown.
If you do not supply a splash screen, the default splash screen will be shown.


== Signing Keys ==
== Signing Keys ==


To properly build for the App Store, PhoneGap Build needs the Certificate and Provisioning file. To set them up, sign into PhoneGap Build using your ID, then go into [https://build.phonegap.com/people/edit Edit Settings]. Choose the Signing Keys tab.
To properly build for the App Store, a Certificate and a Provisioning file are required. To set them up in your project, follow the [[VoltBuilder|VoltBuilder instructions]].
 
 
== Doing an Adhoc Build ==
 
An AdHoc Build can only be run on designated devices. It is designed for testing, not for release.
 
# In AppStudio, choose "Build Native App with VoltBuilder" in the Run menu. This will upload your app to VoltBuilder's servers so it can be packaged.
# To run the ipa file on your device, drag it into iTunes and sync. It should be installed and appear on the Home screen.
# If the app is already installed on the device, you will have to delete it from the device before syncing the app.
 
= Submitting your App =
 
== Set up your app in iTunes Connect ==
 
[https://itunesconnect.apple.com/WebObjects/iTunesConnect.woa iTunes Connect] manages your apps in the App Store. There are a number of steps that need to be done in it before an app can be submitted.
 
==== Contracts, Tax and Banking ====


[[File:Signingkey.png]]
There are a number of contracts that [https://itunesconnect.apple.com/WebObjects/iTunesConnect.woa/wo/5.0.9.13.3 need to be agreed to] before you can submit. If you want to sell your app, you also need to supply banking information so payments can be direct deposited. Tax documents may also need to be filed.


For Title, enter the name of your app.
Some of this paperwork cannot be done electronically. Expect to spend up to a month completing all of this if you are selling your app.


For Certificate, select your .p12 file. To get the .p12 file, go into Keychain Access on your Mac and do the following:
Other than that, the procedure is straight forward: follow the process on the website.


[[File:Keychain-export.png|371x255px|thumbnail]]
==== Manage Your Apps ====


For Provisioning Profile, select your .mobileprovision file.
Use [https://itunesconnect.apple.com/WebObjects/iTunesConnect.woa/wo/2.0 Manage Your Apps] to add, view, and manage your App Store apps.


== Doing a Test Build ==
Before adding an app, collect the information you will need for it. Some of the fields you need to enter can only be set up when adding a new app: they cannot be changed later. Other fields can be changed later, but will trigger a review of your app. There are helpful prompt icons beside each field to help you with the input.


== Doing a Release Build ==
For more information on setting up fields, read "[http://developer.apple.com/library/ios/#documentation/LanguagesUtilities/Conceptual/iTunesConnect_Guide/8_AddingNewApps/AddingNewApps.html#//apple_ref/doc/uid/TP40011225-CH13-SW1 Adding New Apps]".


= Submitting your App =
The Bundle ID Suffix should contain your company name and the app name:
<pre>
com.nsbasic.Project1
</pre>
 
This needs to match the id field in the configxml project property. If the project's save file name is Project1, it will look like this:
<pre>
id = "com.nsbasic.{id}"
</pre>
 
==== Get Ready for Submission ====
 
# From your Version Details page, click the Ready to Upload Binary button.
# Follow the instruction on the screen.
# When complete, you will be able to upload the binary using the Application Loader.
# If you want to upload again, you will need to repeat these steps.
 
== Upload to the App Store ==
 
VoltBuilder will upload your app to the iTunes App Store as part of the build.
 
For this to work, you need to set the itunesAccount and itunesAppPassword fields in Project Properties, in the '''VoltBuilder and Cordova''' section.
 
Follow [https://volt.build/docs/itunes/ these instructions] to get the value for these fields.

Latest revision as of 10:17, 13 May 2023

Preparing your App

In this TechNote, we'll cover what you need to do to submit your app to Apple's iOS App Store.

Apple is concerned that apps in its store work as described and do not cause any security risk. They also care that the apps provide some unique functionality and follow their Human Interface Guidelines. The results have been good: Apps in the iOS App Store are usually pretty good, and the store is now one of the largest software resellers on the planet.

The method used will be to take an AppStudio app, use VoltBuilder to produce a .ipa file, then submit that to Apple.

Start by testing your app as much as possible while it is still a web app. It will be much easier to make changes, fixes and improvements at this stage.

Also, have a look at this list of common reasons apps are rejected: https://developer.apple.com/app-store/review/rejections/

Get Signing Certificates

For security purposes, Apple has a strong signing process. This involves certificates which identify the developer, which need to be included in the build process. Apple issues these certificates as part of its developer program.

Apple has good instructions on its website about its policies, procedures and how to get the certificates. This is probably the most complex and confusing part of submitting an app, so it's good to pay attention carefully. Don't be discouraged: hundreds of thousands of developers have gone through it successfully.

1. Sign up for an iOS Developer Account

Enroll as enroll as an iOS Developer to submit apps to the App Store. It costs $99.00 USD per year.

2. Set up your information in the iOS Provisioning Portal

Sign on using your Apple ID and go into the Certificates, Identifiers & Profiles. You'll see tabs under iOS. Your account needs to have admin privileges.

These are the important ones for AppStudio developers:

App ID

Next, choose App IDs in the Identifiers section. Click on the Plus (+) to add a new App ID.

For App ID Description, enter the short name of your app. You will want to use this consistently.

Don't check anything in App Services for now.

For App ID Suffix, choose Explicit App ID. The Bundle ID should be your domain name (in reverse) followed by your app name.

 com.nsbasic.sampleapp

If everything is correct, Submit it.

Certificates

The Development certificate identifies you and your development computer. Start by clicking on the Plus (+) button to add a new certificate.

Choose iOS App Development Certificate.

Instructions will then display telling you how to create a CSR file. The easiest way to do this is to use VoltSigner. The next screen uploads the CSR file - do that as well and click Generate.

Once the file is generated, Apple's website will instruct you to download the certificate. Once you do that, use the Certificate Wizard to make your p12 file. Put that file in your project's certificates folder.

Devices

Next, set up the list of devices you will be using. This list will be built into the Provisioning Profile. Your test build will only run on the devices listed. You can list up to 100 devices. They can be iPod, iPads or iPhones.

It will ask you to Assign a new Apple Device. This is the device you will use for your testing. You will need to enter a description on the device ("Bill's iPhone 5") and the Device ID. Get the Device ID (UDID) from iTunes with the device plugged in. In the Summary screen, click on "Serial Number" and it will change to "Identifier (UDID)". Right click on it to copy it and paste it into the Devices screen.

Provisioning Profiles

A Provisioning Profile is a file which tells iTunes which devices your app may be installed on. A Distribution Provisioning File is used for the App Store. Use a Development Provisioning File for testing.

To create one, go into Provisioning Profiles and click on the plus ("+") button. Choose iOS App Development for testing. Your App ID should show up on the next screen - click on Continue. Next, select your Certificate, then the devices to be included (there is a handy Select All button). Finally, give the profile a name like sampleapp.development. The Provisioning Profile is then created and you can download it and save it in your app's certificates folder.

VoltBuilder

VoltBuilder is a web service which takes your project and returns a file which can be uploaded to the App Store.

To use it, you will need to create your own account with them. There is both a free and a paid plan.

Once you have the account, enter its name and password into Preferences.

Config.xml

One of the project properties is named configxml. This is used to create the config.xml file which is passed to VoltBuilder. It contains much of the information that VoltBuilder needs to create your app. The default configxml file will work, though you may wish to do some customization. It's worth consulting Cordova's config.xml documentation to see all the options.

Here is a sample config.xml (subject to change):

<?xml version="1.0" encoding="UTF-8"?>
<widget 
xmlns = "https://www.w3.org/ns/widgets"
id = "com.nsbasic.{id}"
versionCode = "{phoneGapBuildCounter}"
version = "{version}">

<name>{title}</name>
<description>{description}</description>

<icon src='{icon}' />
<preference name='SplashScreenDelay' value='2000' />
<preference name='AutoHideSplashScreen' value='true' />
<plugin name='cordova-plugin-splashscreen' source='npm' />

<preference name="permissions" value="none"/>
<!-- sample preference specifications -->
<!-- <preference name="autorotate" value="false" readonly="true"/> -->
<!-- <preference name="orientation" value="default" /> -->
<!-- <preference name="fullscreen" value="true" /> -->

<plugin name="cordova-plugin-statusbar" source="npm" />
  <preference name="StatusBarOverlaysWebView" value="{phoneGapStatusBarOverlay}" />
  <preference name="StatusBarBackgroundColor" value="{phoneGapStatusBarColor}" />
  <preference name="StatusBarStyle" value="{phoneGapStatusBarStyle}" />

  <allow-navigation href="*" />
  <access origin="*" />
  <allow-intent href="*" />
</widget>

Fields which are surrounded by brackets, like {version}, are automatically filled in by AppStudio from the other information in the project.

If you do not supply an icon, the default AppStudio icon will be shown.

iOS Splash Screens

According to Apple's application guidelines, a tablet (iPad) application should not hide the status bar while a handheld (iPhone) application should hide status bar.

The above dimensions are assuming that you have chosen to follow this recommendation. If you choose a different path, then you should increase or decrease the image height based on the size of the status bar.

An iPhone app should include one launch image in portrait orientation; an iPad app should include one launch image in portrait orientation and one launch image in landscape orientation.

If you do not supply a splash screen, the default splash screen will be shown.

Signing Keys

To properly build for the App Store, a Certificate and a Provisioning file are required. To set them up in your project, follow the VoltBuilder instructions.


Doing an Adhoc Build

An AdHoc Build can only be run on designated devices. It is designed for testing, not for release.

  1. In AppStudio, choose "Build Native App with VoltBuilder" in the Run menu. This will upload your app to VoltBuilder's servers so it can be packaged.
  2. To run the ipa file on your device, drag it into iTunes and sync. It should be installed and appear on the Home screen.
  3. If the app is already installed on the device, you will have to delete it from the device before syncing the app.

Submitting your App

Set up your app in iTunes Connect

iTunes Connect manages your apps in the App Store. There are a number of steps that need to be done in it before an app can be submitted.

Contracts, Tax and Banking

There are a number of contracts that need to be agreed to before you can submit. If you want to sell your app, you also need to supply banking information so payments can be direct deposited. Tax documents may also need to be filed.

Some of this paperwork cannot be done electronically. Expect to spend up to a month completing all of this if you are selling your app.

Other than that, the procedure is straight forward: follow the process on the website.

Manage Your Apps

Use Manage Your Apps to add, view, and manage your App Store apps.

Before adding an app, collect the information you will need for it. Some of the fields you need to enter can only be set up when adding a new app: they cannot be changed later. Other fields can be changed later, but will trigger a review of your app. There are helpful prompt icons beside each field to help you with the input.

For more information on setting up fields, read "Adding New Apps".

The Bundle ID Suffix should contain your company name and the app name:

com.nsbasic.Project1

This needs to match the id field in the configxml project property. If the project's save file name is Project1, it will look like this:

id = "com.nsbasic.{id}"

Get Ready for Submission

  1. From your Version Details page, click the Ready to Upload Binary button.
  2. Follow the instruction on the screen.
  3. When complete, you will be able to upload the binary using the Application Loader.
  4. If you want to upload again, you will need to repeat these steps.

Upload to the App Store

VoltBuilder will upload your app to the iTunes App Store as part of the build.

For this to work, you need to set the itunesAccount and itunesAppPassword fields in Project Properties, in the VoltBuilder and Cordova section.

Follow these instructions to get the value for these fields.