How to publish Ionic application to the Google’s Play Store

Publishing your Ionic app to Google Play Store

1 1,029

How to publish you Ionic application to the Google’s Play Store, Step by Step guide for Publishing your Ionic app to Google Play Store

How to publish Ionic application to Google play store

Publishing your ionic application to real world require some steps to be followed and performed before its goes live. which included cleaning up unwanted plugins used during the development , you signing the app to let others know that  “Its Owned by You” and publishing it app store.

In this introductory tutorial about how to publish ionic application google play store following items are covered :-

  • How to prepare the application for production
  • How to create the keystore file
  • How to sign the APK file
  • How to optimize the APK file
  • How to build the update of your application
  • How to get the developer license[You can skip this if you already have developers account]
  • How to create the application listing
  • How to upload the application to the Play Store

 

NOTE- This steps are valid for other Mobile Application Development Frame work such as cordova and PhoneGap or Framework7.(with some additional configuration)

Preparing launch for ionic application google play store

The first step is preparation of application for PROD , at this stage in the tutorial, we’re going to make 2 assumptions:

  • Your  Mobile Android App has been built with Cordova Ionic or Using Similar tool ‘Phone Gap’
  • Development of your Android App is complete and is now waiting to be uploaded for display on the Google Play store

So, Let’s get started…

  • Basically, you should remove any unnecessary plugins or libraries which you may have installed during development that you didn’t end up using. You can safely remove the Cordova-plugins by executing the following command: Cordova plugins remove <<Plugin Name>>
    console .
cordova plugin rm org.apache.cordova.console

You Should also make sure to Increment the version each time you are going to publish the mobile application, else your updated mobile application will not available to your users[Note- Version is Very Important attribute and you must take care this wisely ]

  • Here is how i decide :-
    • Major Release – 1.0.0 or 2.0.0
    • If Point Release (Some addition is application functionality ,say it 1.1.0  )
    • Else every time you build you should increment it like 1.0.3 –> 1.0.4–>1.0.5 and so on …
  • Next, in your package.json file you should change the name and description properties. for example see below…how I’ve set up mine;
  • In the config.xml file makes sure that you change the widget id, name, description and author elements. My file looks like this now:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.techfossguru.wordpress" version="1.0.3" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>WordApp</name>
  <description>
        WordApp Ionic Framework and Cordova project.
    </description>
  <author email="you@example.com" href="http://example.com.com/">
      Your Name Here
    </author>
  <content src="index.html"/>
  <access origin="*"/>
  
  <preference name="android-build-tool" value="gradle" />  
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="Orientation" value="default"/>
  <preference name="SplashScreenDelay" value="4000" />
  <preference name="SplashScreen" value="screen" />
  <preference name="FadeSplashScreen" value="false" />
  <preference name="BackupWebStorage" value="none"/>
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>
  
  <plugin spec="https://github.com/driftyco/ionic-plugins-keyboard.git#011283b" />
  <plugin spec="https://github.com/pushandplay/cordova-plugin-apprate.git#41d40d7" />
  <plugin spec="https://github.com/cordova-sms/cordova-sms-plugin.git#cea807c" />
  <plugin spec="https://github.com/katzer/cordova-plugin-email-composer#f4fcee8" />
  <plugin name="cordova-plugin-admobpro" spec="2.19.1" />
  <plugin name="cordova-plugin-whitelist" spec="1.2.2" />
  <plugin name="cordova-plugin-x-toast" spec="2.5.2" />
  <plugin name="nl.x-services.plugins.socialsharing" spec="5.1.1" />
  <plugin name="onesignal-cordova-plugin" spec="1.12.6" />
  <plugin name="org.apache.cordova.console" spec="1.0.3" />
  <plugin name="org.apache.cordova.device" spec="1.1.2" />
  <plugin name="org.apache.cordova.inappbrowser" spec="1.4.0" />
  <plugin name="org.apache.cordova.splashscreen" spec="3.2.2" />
  
  <icon src="res/icon.png"/>
  <splash src="res/screen.png" />
  
  <icon src="www/res/icon/android/icon-36-ldpi.png" platform="android" qualifier="ldpi"/>
  <icon src="www/res/icon/android/icon-48-mdpi.png" platform="android" qualifier="mdpi"/>
  <icon src="www/res/icon/android/icon-72-hdpi.png" platform="android" qualifier="hdpi"/>
  <icon src="www/res/icon/android/icon-96-xhdpi.png" platform="android" qualifier="xhdpi"/>
  <icon src="www/res/icon/blackberry/icon-80.png" platform="blackberry"/>
  <icon src="www/res/icon/blackberry/icon-80.png" platform="blackberry" state="hover"/>
  <icon src="www/res/icon/ios/icon-57.png" platform="ios" width="57" height="57"/>
  <icon src="www/res/icon/ios/icon-72.png" platform="ios" width="72" height="72"/>
  <icon src="www/res/icon/ios/icon-57-2x.png" platform="ios" width="114" height="114"/>
  <icon src="www/res/icon/ios/icon-72-2x.png" platform="ios" width="144" height="144"/>
  <icon src="www/res/icon/webos/icon-64.png" platform="webos"/>
  <icon src="www/res/icon/windows-phone/icon-48.png" platform="winphone"/>
  <icon src="www/res/icon/windows-phone/icon-173-tile.png" platform="winphone" role="background"/>
  <splash src="www/res/screen/android/screen-ldpi-portrait.png" platform="android" qualifier="port-ldpi"/>
  <splash src="www/res/screen/android/screen-mdpi-portrait.png" platform="android" qualifier="port-mdpi"/>
  <splash src="www/res/screen/android/screen-hdpi-portrait.png" platform="android" qualifier="port-hdpi"/>
  <splash src="www/res/screen/android/screen-xhdpi-portrait.png" platform="android" qualifier="port-xhdpi"/>
  <splash src="www/res/screen/blackberry/screen-225.png" platform="blackberry"/>
  <splash src="www/res/screen/ios/screen-iphone-portrait.png" platform="ios" width="320" height="480"/>
  <splash src="www/res/screen/ios/screen-iphone-portrait-2x.png" platform="ios" width="640" height="960"/>
  <splash src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" platform="ios" width="640" height="1136"/>
  <splash src="www/res/screen/ios/screen-ipad-portrait.png" platform="ios" width="768" height="1024"/>
  <splash src="www/res/screen/ios/screen-ipad-landscape.png" platform="ios" width="1024" height="768"/>
  <splash src="www/res/screen/windows-phone/screen-portrait.jpg" platform="winphone"/>  
  
  <allow-intent href="http://*/*"/>
  <allow-intent href="https://*/*"/>
  <allow-intent href="tel:*"/>
  <allow-intent href="sms:*"/>
  <allow-intent href="mailto:*"/>
  <allow-intent href="geo:*"/>
  <platform name="android">
    <allow-intent href="market:*"/>
  </platform>
  <platform name="ios">
    <allow-intent href="itms:*"/>
    <allow-intent href="itms-apps:*"/>
  </platform>    
</widget>

 

  • Now let’s build the Android app. you can also use commands from the root directory of ionic projects
cordova build --release android
ionic build android --release

This will create  a release build based on the settings in your config.xml. Next, we can find our unsigned APK file in platforms/android/build/outputs/apk

if every thing goes well you will find your unsigned apk file in platform specific folder.

For example: In android platforms platforms/android/build/outputs/apk/android-release-unsigned.apk

Next , we need to sign the unsigned APK and run an alignment utility on it to optimize it and prepare it for the google play store.

Managing App Signing Keys

To create any mobile apps, you need platform-specific app signing keys. Mobile apps are signed with a digital signature by their developers before publication. These signatures are used by both app stores and devices to verify that apps are authentic.

Depending on which platforms you want to target, you will need to create the required signing keys.

The following sections describe,  how to create those keys.

If you already have a signing key, skip these steps and use that one instead and go to Sign the Android APK file step

Creation of  the key store file

A keystore file store the security key that we’ll use later to sign our application. By doing this we can verify that we’re the author of the application, it is also used by Play store.

  1. Google verifies your signature, removes the signature, and processes the bundle to generate a base APK, configuration APK(s), and dynamic feature APKs (if applicable). To learn more, go to the Android Developers site.
  2. Google re-signs the APKs with the original app signing key you provided and delivers your app to the user.

Let’s create keystore file using this command
Syntax:

keytool -genkey -v -keystore .keystore -alias  -keyalg  -keysize  -validity 

For Example, my command looks like:

sudo keytool -genkey -v -keystore techfossguru.keystore -alias techfossguru -keyalg RSA -keysize 2048 -validity 10000

Once you execute the above command you will be prompted for the following:

  • Password
  • Confirm Password
  • First and last name
  • Name of your organization
  • Name of your city/locality
  • Name of your State or Province
  • Your 2-letter country code (I.e. US, UK, IE, IT, IN etc)
  • And finally, a confirmation that all the details you have entered are correct

Once you have successfully completed the various prompts for the tool a 2048-bit RSA key pair and self-signed certificate with a validity of 10,000 days will be generated in the current directory.

You should place this file in a place where you’ll remember it, because you’ll need this file for any app updates you’ll want to push to the Play Store. However, Just to make things clear; for every new application that you make, you need to create a new keystore file.

Sign the Android APK file

Now for this step, we need to sign the APK file using the keystore file we just created above.To do this you’ll need to run the jarsigner utility which is included in your installed JDK location.

Syntax:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore pathToYourKeystoreFile nameOfYourProject-release-unsigned.apk nameOfYourProjectReleaseKey

Example:

sudo jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore techfossguru.keystore android-release-unsigned.apk techfossguru

When you run this command you’ll be prompted for your keystore password.

As a result of the -verbose flag you’ll see a list of files/assets used within your App being printed to the screen as they/re being signed by the jarsigner tool.

Wait for the process to successfully complete, which should take less than half a minute – depending on the number of assets within your App.

You can use below command to verify

 keytool -list -printcert -jarfile techfossguru.apk | grep -Po "(?<=SHA1:) .*" |  xxd -r -p | openssl base64

How to Optimize the APK file

Once done with sign the Android APK file then you’re ready for the final stage in preparing your APK file for uploading to the Google Developer Console – optimising it using the zipalign utility.

With the zipalign tool, we can optimize the APK file so that it reduces the amount of space and RAM required by the app on a device.

The zipalign tool just takes the name of the signed file and the name of the file to generate. To optimize the APK file execute the following command:

sudo /home/ubuntu/android-sdk-linux/build-tools/23.0.1/zipalign -v 4 android-release-unsigned.apk techfossguru.apk

The process finishes with the Verification successful output and you will get a techfossguru.apk  file which you can submit to the Google Play Store.

Please make sure to set the path of Zip align tool as per your build tools installation directory.

When the tool has finished you’ll see the following message displayed in the console:

How to update exiting application 

As you develop your app, you’ll want to update it periodically.

  • In order for the Google Play Store to accept updated APKs, you’ll need to edit the fileconfig.xml to increment the valueversion, then rebuild the app for release.
  • To build an update of an existing app you have to follow the same steps except that you don’t need to create another keystore. You have to use the same keystore to sign the application for every update, because the update will be otherwise rejected and you’ll have to create a new app listing.
  • You must update the version in the config.xml file for the next release, otherwise the app will not be properly updated on your users’ devices

Publishing your mobile application on Google Play Store

Now that we have our release APK ready for the Google Play Store, we can create a Play Store listing and upload our APK.

  • To start, you’ll need to visit the Google Play Store Developer Console and create a new developer account. Unfortunately, this is not free. However, the cost is only $25 compared to Apple’s $99.
  • Once you have a developer account, you can go ahead and click “Publish an Android App on Google Play.

 

 

Comments
Loading...

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More