Submit Apache Cordova Applications for iOS and Android to the Apple App Store & Google Play

In the past, we have looked at setting up Apache Cordova mobile applications for iOS and Android with HTML5, JavaScript and how to develop for this versatile platform. In what follows we will look at how to submit your application to the app stores of the respective platforms once you have finished developing your application.

As we looked at before, you will need a computer with the SDKs of the platform(s) you want to release on. If you want to release for Android devices, you will need to grab the Android SDK. I actually recommend you install Android Studio as this will download everything you need for this and future releases. If you want to release for iOS devices, you will of course need a Mac computer with Xcode installed. Unfortunately, you cannot develop iOS applications without a Mac. So if you want to build and release for iOS you will have to find some way to get access to one.

You will also need to sign up for developer accounts for the platforms you want to release on. These developer accounts do cost money. For Google Play (Android) there is a one time developer fee of $25. For an iOS developer account the fee is $99/per year.

Once you have signed up for your developer accounts, we can build our applications for release on the iOS and Android platforms.

Submitting to Your Cordova App for iOS to the Apple App Store

Once you are satisfied with how your app functions on all of the devices that you want your application to run on, you can start the process of preparing your project for submitting your app to the Apple App Store.

To submit your Apache Cordova application for sale (or free download) on the App Store you will need to go through the normal process that all apps must go through before they are submitted to the store. Building an app for release on iOS is a fairly straightforward process. You need to compile the release file by running the following command in the root of your Cordova project…

$ cordova build --release ios

This will build your application for release. There will be a generated Xcode project in the platforms/ios directory

Next, you’ll need go to https://developer.apple.com and click on “member center.” Sign in with your developer account if you have not already.

Creating an iOS Distribution Certificate

Click on “Certificates Identifiers and Profiles” and then on the next screen click on “Certificates.”

Click on the “+” button on the certificates page and scroll down in the production section and choose the “App Store and Ad Hoc” option and click “Continue”

We will want to create a new certificate so we will need to open up Keychain Access. The easiest way to do this is in your Mac click on the search bar in the top right and search for “Keychain Access” and open this application, Click on Keychain Access in the menu in the top left, and in the dropdown hover over “Certificate Assistant” and choose “Request a Certificate From a Certificate Authority”

This will open up a modal which you can then fill out the e-mail address with your developer account e-mail and then a common name which can usually just be the same of your organization. After you have filled these out choose the “Save to disk” option and save the certificate to wherever you want on your computer.

After we do this back in our developer account we will click “Continue” again and on the next page we will upload the CSR file we just created and saved to our computer. Attach the file via the “Choose file…” button, attach the file and click the “Generate” button.

In the next screen you will be able to download the generated file (which is an iOS distribution .cer file) by clicking on the “Download” button.

Download this file and save it somewhere on your computer (probably the “Downloads” folder).

After this, we need to again open up the “Keychain Access” application and we need to drag and drop this certificate into the section in the top left of the “Keychain Access” window called “logins.” Note that this information is also present on the download screen we were just at in the Developer Center.

That is all that we need to do for creating an iOS Distribution Certificate

Creating an App ID in Developer Center

Now that we have created our distribution certificate. we need to create an App ID. The App ID is a unique identifier key that the App Store will use to differentiate it from other apps.

Back in our developer account at https://developer.apple.com, click on the on the “Certificates Identifiers and Profiles” link. On the next screen click on the “App IDs” link under the “Identifiers” section. Click on the “+” button at the top to create a new App ID.

On the next screen, you fill in the name with whatever you want, but it is probably best to just put the name of your app in there. You need to be able to tell which App ID belongs to which app and the name is probably the easiest. So however you want to do that, it is totally up to you.

You will also need to enter your bundle ID in the “App ID Suffix” section. To find your bundle ID you will need to open up Xcode and open your project. In Xcode you will need to highlight your project file and then select your project in the dropdown in the upper-left corner of the window you need to select your application name under “Targets.” You need to navigate over to the “Info” tab and look at the Bundle Identifier value on this screen. You can change this to whatever you like. I like the reverse domain notation. If it were me doing this I would put com.ninebitstudios.name where “name” is the name of my application. So it would be something like com.ninebitstudios.fishblaster or something like that. But you can put whatever you want in here. Once you have this set, you need to also enter this in the “App ID Suffix” section in the App IDs section in your developer account. After you do this scroll down to the bottom of the page and click “Continue.”

There will be a confirmation screen on the next screen where you can click “Submit” and then on the next screen click “Done.” You should now see your App ID in the table view of iOS app IDs.

Creating an iOS Provisioning Profile in Developer Center

Back in the developer center, Under the “Provisioning Profiles” section in the “Certificates, Identifiers & Profiles” screen click on “Distribution.” Click on the “+” button to create a new provisioning profile. In the next section scroll down and choose “App Store” to create a distribution provisioning profile to submit your app to the App Store and click on “Continue”.

In the next section from the you can choose your app ID in the dropdown and click “Continue”.

Next you can create a name for the profile. You can put whatever you want in here, the name of your organization or the name of your application.

After you have chosen something click on the “Generate” button. This will take you to a screen where you can download your iOS Provisioning Profile. Download this .mobileprovision file and save it somewhere on your computer.

Now go to the location where you downloaded this provisioning profile. Double click on it and choose the “Add to Library” option to add this profile to the iPhone configuration utility.

Creating an App in iTunes Connect

Now you need to go to back to your developer center at developer.apple.com. From here you will need to select “iTunes Connect” and once you are in iTunes Connect you need to select the “My Apps” option. You will need to click on the “+” button to add a new app.

From here there is a lot of information that you will need to fill out for your application. This is basically a way of creating a new application portal where everything that will be used by Apple to publish your app will go. You will need to add some screenshots of the proper dimensions that will be used for the App Store previews. The tools and notifications provided there should give you indicators as to what items or information you need to provide. You can do this now or you can wait until after your application file has been uploaded and you are ready to finalize your submission to Apple for review.

Configuring & Packaging Project in Xcode

After you have done the above steps you will need to open Xcode if it is not already open. For an Apache Cordova project you can open the project by going to /platforms/ios and double clicking on the “.xcodeproj” file. You will then need to highlight your project in the left pane in Xcode and select your project under “Projects” in the upper left (i.e. do not select your project under “Targets”)

Click on the “Info” tab and in the “Configurations” section click on the “+” button and choose the “Duplicate Release Configuration” option. Double-click the newly created/duplicated configuration and rename it to “Distribution.” You should only have “Debug”, “Release”, and “Distribution.”

Next select your project under “Targets” in the upper left (i.e. do not select your project under “Project”). Next highlight the “Build Settings” tab. In the “Code Signing” section change all of the options under “Code Signing Identity” to the name of your certificate that you created earlier. Next change all of the options under “Provisioning Profile” to the value of the provisioning profile that you created earlier.

You will then need to do the exact same steps only this time you need to highlight your project in the left pane in Xcode and select your project under “Projects” in the upper left (i.e. do not select your project under “Targets”). After you do this highlight the “Build Settings” tab. In the “Code Signing” section change all of the options under “Code Signing Identity” to the name of your certificate that you created earlier. Next change all of the options under “Provisioning Profile” to the value of the provisioning profile that you created earlier. So it is a repeat of the same process that you just did for when you had your project selected under “Targets”

Next highlight your simulator at the top of your screen and choose the “iOS Device” option.

Then select “Product” in the top menu and choose “Archive.”

If all goes well, you should get a “Build Succeeded” notification.

Submitting to App Store Option #1 – Submit to App Store Button

You now have your finished product that you will submit to the App Store. You should see something like the following screen…

To submit your app to Apple’s App Store all that you have to do is click the “Submit to App Store…” button. If you want you can use some of the tools to validate your project if you like to make sure that there are no errors.

If all goes well you should see the following…

If you run into any issues doing things by this process, you can try the approach below.

Submitting to App Store Option #2 – Uploading your Archive (.ipa file)

If you run into an issue that says “Unable to validate your application. The application you have selected does not exist” or recieve other error messages of any sort, you might have to try to use an alternate method of submitting your app. Apparently this is an issue that occurs for some developers in some environments. If you run into this issue you can still submit your application manually. You can use the “Application Loader” utility to upload your app to the App Store. Select this utility by choosing Xcode > Open Developer Tool > Application Loader from the top menu

With the Application Loader utility open, click the “Export” button on this screen. In the prompt, select the “Save for iOS App Store Deployment” option.

Click on the “Next” button. You will be prompted choose your developer account. Then click “OK.” This will create a .ipa file for you on your computer. You can then go add this file in iTunes Connect by signing in to your account and uploading it there.

Finalizing your Submission in iTunes Connect

Once you have uploaded your application, you need to go back to iTunes Connect and finalize your submission to Apple. You can finish uploading the required icons and screenshots at this time if you have not done so already. Once you have everything set, click on the “Submit for Review” button and follow the prompts. There is a review process that every app submitted to Apple undergoes to ensure quality assurance and that the app follows all of Apple’s requirements and guidelines for selling apps. It will take about 10 days for Apple to get around to reviewing your app and they will notify you on whether it is approved for sale or rejected.

If your app is rejected, do not be discouraged. Nearly every app developer has had an app rejected at some point or another. You just need to fix the issues that are outlined by the review team and resubmit. Fortunately the resubmission process goes pretty quickly because you already have all of the bits in your project set up. You’ll just need to fix what needs to be fixed in your Cordova project and rebuild and follow all of the same steps as outlined above. Fortunately, most of the hard work of filling out all the forms and creating the provisioning and distribution files is already done.

Sometimes it takes one or two tries to get your app approved, but if you keep at it, you’ll get there!

Submitting to Your Cordova App for Android to Google Play

To submit your Apache Cordova application for sale (or free download) on Google Play you will need to go through the normal process that all Android apps must go through before they are submitted to Google Play. In many ways the process of distributing applications on Android via Google Play is a lot more streamlined, quicker, and developer-friendly (i.e. easier) when compared to submitting apps to Apple’s App Store.

Creating an Application in the Google Play Developer Console

The first thing that we will need to do in order to prepare for distributing our application on Android is to create a new application within this Google Play Developer console. You will need to sign into you Google Play Developer Console and then you’ll need to click on the “Add New Application” button and fill out the details for your app. You will need to upload some screenshots, icons and also answer some questions to get your app a rating to indicate the “age appropriateness” of you app and the degree to which it contains mature/adult content. You will also see that that there is a button to upload an “APK” file. This is your app file for Android which we will create next.

Creating an APK File

In the following sections we will build an APK file (which is shorthand for Android application package) that we submit to Google Play. You need to compile the release file by running the following command in the root of your Cordova project…

$ cordova build android --release

This will create a file in the /platforms/android/build/outputs/apk directory called android-release-unsigned.apk (or something like that). Hang on to this file (or make a copy of it) because we will need it later.

The “unsigned” designation just means that it has not been signed with a certificate of authenticity. Later on we will be adding the credentials from our developer account for security purposes. We will need to do that by using a number of the tools provided by Java to “sign” our application. The first utility we will utilize is the “keytool.” The keytool utility is part of what ships with the Java Development Kit (JDK). So on my windows machine it was located at C:\Program Files\Java\jdk1.7.0_51\bin\keytool.exe. The location might be different for different operating systems. It’s basically wherever your JDK is installed in the “bin” directory. Wherever it is on you computer, run the keytool utility with the following command (or its equivalent)…

$ keytool -genkey -v -keystore ninebitapp.keystore -alias ninebitapp -keyalg RSA -keysize 2048 -validity 10000

You can change the name of your keystore file in the -keystore flag to whatever you want. All that specifies is the name of the file that gets output after running this command.

Next we will take the .keystore file that was created with the keytool utility and sign it using another utility that ships with the JDK called “jarsigner.exe.” Get the android-release-unsigned.apk file that we grabbed from our Cordova project. Using this file and the generated .keystore file we created from the previous command and run the following…

"C:\Program Files\Java\jdk1.7.0_51\bin\jarsigner.exe" -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore ninebitapp.keystore app.apk ninebitapp

NOTE: I actually renamed the .apk file to “app.apk.” Reason being, I encountered an error when trying to use jarsigner tool when the filename was left as “android-release-unsigned.apk” I guess the tool doesn’t like hyphens?

When you run this command you will have to enter some credentials to password protect this file for your Google Play developer account with this certificate of authenticity.

Now that we have signed the .apk file we will use the “zipalign” tool to prepare our application for release. The “ZipAlaign” tool can be found in the Android SDK directory. We can utilize it by running the following command on our signed .apk file.

"C:\Users\IanC\AppData\Local\Android\sdk\build-tools\22.0.1\zipalign" -v 4 app.apk ninebit_out.apk

This will create a zip aligned .apk file. It is this file we will submit to the Google Play store via the Google developer console. Just follow the prompts there and submit. Google Play apparently does have a brief review process, but really it’s probably just to confirm that the app launches and does not contain any malware. Unlike with the App Store, your app will almost certainly be approved if it passes these 2 smoke tests. Also, you expect your app to be available for download on Google Play within a few hours. This is a much shorter duration than the 10 days it takes for the iOS review process.

Summary

In the preceeding discussions we went through and looked at the process for building your apps for release on iOS and Android and submitting your applications to the Apple App Store and Google Play. Hopefully, in reading this you have found this at least somewhat helpful. Until next time, happy developing! Go create great apps!

Android, Apache Cordova, HTML5, iOS, JavaScript, mobile, Node.js, web development