In this article by Hoc Phan, the author of the book Ionic Cookbook, we will cover tasks related to building and publishing apps, such as:
- Building and publishing an app for iOS
- Building and publishing an app for Android
- Using PhoneGap Build for cross–platform
(For more resources related to this topic, see here.)
Introduction
In the past, it used to be very cumbersome to build and successfully publish an app. However, there are many documentations and unofficial instructions on the Internet today that can pretty much address any problem you may run into. In addition, Ionic also comes with its own CLI to assist in this process. This article will guide you through the app building and publishing steps at a high level. You will learn how to:
- Build iOS and Android app via Ionic CLI
- Publish iOS app using Xcode via iTunes Connect
- Build Windows Phone app using PhoneGap Build
The purpose of this article is to provide ideas on what to look for and some “gotchas”. Apple, Google, and Microsoft are constantly updating their platforms and processes so the steps may not look exactly the same over time.
Building and publishing an app for iOS
Publishing on App Store could be a frustrating process if you are not well prepared upfront. In this section, you will walk through the steps to properly configure everything in Apple Developer Center, iTunes Connect and local Xcode Project.
Getting ready
You must register for Apple Developer Program in order to access https://developer.apple.com and https://itunesconnect.apple.com because those websites will require an approved account.
In addition, the instructions given next use the latest version of these components:
- Mac OS X Yosemite 10.10.4
- Xcode 6.4
- Ionic CLI 1.6.4
- Cordova 5.1.1
How to do it
Here are the instructions:
- Make sure you are in the app folder and build for the iOS platform.
- $ ionic build ios
Go to the ios folder under platforms/ to open the .xcodeproj file in Xcode.
- Go through the General tab to make sure you have correct information for everything, especially Bundle Identifier and Version. Change and save as needed.
- Visit Apple Developer website and click on Certificates, Identifiers & Profiles.
- For iOS apps, you just have to go through the steps in the website to fill out necessary information.
The important part you need to do correctly here is to go to Identifiers | App IDs because it must match your Bundle Identifier in Xcode. - Visit iTunes Connect and click on the My Apps button.
- Select the Plus (+) icon to click on New iOS App.
- Fill out the form and make sure to select the right Bundle Identifier of your app.
There are several additional steps to provide information about the app such as screenshots, icons, addresses, and so on. If you just want to test the app, you could just provide some place holder information initially and come back to edit later.
That’s it for preparing your Developer and iTunes Connect account.
- Now open Xcode and select iOS Device as the archive target. Otherwise, the archive feature will not turn on. You will need to archive your app before you can submit it to the App Store.
- Navigate to Product | Archive in the top menu.
- After the archive process completed, click on Submit to App Store to finish the publishing process.
- At first, the app could take an hour to appear in iTunes Connect. However, subsequent submission will go faster. You should look for the app in the Prerelease tab in iTunes Connect.
iTunes Connect has very nice integration with TestFlight to test your app. You can switch on and off this feature. Note that for each publish, you have to change the version number in Xcode so that it won’t conflict with existing version in iTunes Connect. - For publishing, select Submit for Beta App Review. You may want to go through other tabs such as Pricing and In-App Purchases to configure your own requirements.
How it works
Obviously this section does not cover every bit of details in the publishing process. In general, you just need to make sure your app is tested thoroughly, locally in a physical device (either via USB or TestFlight) before submitting to the App Store.
If for some reason the Archive feature doesn’t build, you could manually go to your local Xcode folder to delete that specific temporary archived app to clear cache:
~/Library/Developer/Xcode/Archives
See also
TestFlight is a separate subject by itself. The benefit of TestFlight is that you don’t need your app to be approved by Apple in order to install the app on a physical device for testing and development.
You can find out more information about TestFlight here:
https://developer.apple.com/library/prerelease/ios/documentation/LanguagesUtilities/Conceptual/iTunesConnect_Guide/Chapters/BetaTestingTheApp.html
Building and publishing an app for Android
Building and publishing an Android app is a little more straightforward than iOS because you just interface with the command line to build the .apk file and upload to Google Play’s Developer Console. Ionic Framework documentation also has a great instruction page for this: http://ionicframework.com/docs/guide/publishing.html.
Getting ready
The requirement is to have your Google Developer account ready and login to https://play.google.com/apps/publish. Your local environment should also have the right SDK as well as keytool, jarsigner, and zipalign command line for that specific version.
How to do it
Here are the instructions:
- Go to your app folder and build for Android using this command:
$ ionic build --release android - You will see the android-release-unsigned.apk file in the apk folder under /platforms/android/build/outputs. Go to that folder in the Terminal.
- If this is the first time you create this app, you must have a keystore file. This file is used to identify your app for publishing. If you lose it, you cannot update your app later on. To create a keystore, type the following command in the command line and make sure it’s the same keytool version of the SDK:
- $ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
Once you fill out the information in the command line, make a copy of this file somewhere safe because you will need it later. - The next step is to use that file to sign your app so it will create a new .apk file that Google Play allow users to install:
- $ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name
To prepare for final .apk before upload, you must package it using zipalign: - $ zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk
Log in to Google Developer Console and click on Add new application.
- Fill out as much information as possible for your app using the left menu.
- Now you are ready to upload your .apk file. First is to perform a beta testing.
- Once you are completed with beta testing, you can follow Developer Console instructions to push the app to Production.
How it works
This section does not cover other Android marketplaces such as Amazon Appstore because each of them has different processes. However, the common idea is that you need to completely build the unsigned version of the apk folder, sign it using existing or new keystore file, and finally zipalign to prepare for upload.
Using PhoneGap Build for cross-platform
Adobe PhoneGap Build is a very useful product that provides build–as–a–service in the cloud. If you have trouble building the app locally in your computer, you could upload the entire Ionic project to PhoneGap Build and it will build the app for Apple, Android, and Windows Phone automatically.
Getting ready
Go to https://build.phonegap.com and register for a free account. You will be able to build one private app for free. For additional private apps, there is monthly fee associated with the account.
How to do it
Here are the instructions:
- Zip your entire /www folder and replace cordova.js to phonegap.js in index.html as described in http://docs.build.phonegap.com/en_US/introduction_getting_started.md.html#Getting%20Started%20with%20Build.
- You may have to edit config.xml to ensure all plugins are included. Detailed changes are at PhoneGap documentation: http://docs.build.phonegap.com/en_US/configuring_plugins.md.html#Plugins.
- Select Upload a .zip file under private tab.
- Upload the .zip file of the www folder.
- Make sure to upload appropriate key for each platform. For Windows Phone, upload publisher ID file.
- After that, you just build the app and download the completed build file for each platform.
How it works
In a nutshell, PhoneGap Build is a convenience way when you are only familiar with one platform during development process but you want your app to be built quickly for other platforms. Under the hood, PhoneGap Build has its own environment to automate the process for each user. However, the user still has to own the responsibility of providing key file for signing the app. PhoneGap Build just helps attach the key to your app.
See also
The common issue people usually face with when using PhoneGap Build is failure to build. You may want to refer to their documentation for troubleshooting:
http://docs.build.phonegap.com/en_US/support_failed-builds.md.html#Failed%20Builds
Summary
This article provided you with general information about tasks related to building and publishing apps for Android, for iOS and for cross-platform using PhoneGap, wherein you came to know how to publish an app in various places such as App Store and Google Play.
Resources for Article:
Further resources on this subject:
- Our App and Tool Stack[article]
- Directives and Services of Ionic[article]
- AngularJS Project [article]