How to deploy Ionic to Google Play Store?

How to deploy Ionic to Google Play Store?

Do you want to deploy Ionic application to Google Play Store? This article will show you this process step by step.

So far I have created a few mobile applications using Ionic framework. It is very easy to develop, using the Ionic and Angular. 

However, when we create an application we need to deploy it to one of the mobile store: Google Play or Apple Store. It is also very easy to do, but we need to remember several steps to do it properly.

This is the complete flow to create and deploy the application to the Google Play Store.

Create an application

To create an application you need to open the Google Play Console (https://play.google.com/apps/publish/) and click Create application button.

Then go to Store listing and fill the following information:

Deploy Ionic to Google Play Store - Main application page
  • Title (up to 50 characters)
  • Short description (up to 80 characters)
  • Full description (up to 4000 characters)

You also need to create some visual resources for your app.

Screenshots

It is worth to make screenshots for different devices. You can do it very easy, using Chrome Dev Tools. Just open it and turn on mobile view. Then you can select the device you want to emulate.

Taking application screenshots

Make sure that you take at least 4 screenshots for phone and tablet device.

Marketing images

It might be useful for you. 

  • Icon – 512 px x 512 px
  • Feature graphic – 1024 px x 500 px
  • Promo graphic – 180 px x 120 px
  • TV Banner – 1280 px x 720 px
  • Daydream 360 degree stereoscopic image – 4096 px x 4096 px
  • Promo Video – YouTube

Application store configuration

Before you build the application, you need to configure its metadata. 

You have to do this in the following places in the file config.xml:

<widget id="com.diwebsity.teatimer”  version="1.0.0" ...
<name>Tea Timer app</name>
<description>An awesome Ionic/Cordova app.</description>
<author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author> 

You have to fill the following data:

  • id – it has to be unique in the context of whole Google Play
  • Application version
  • Name
  • Description
  • Author email
  • Author website
  • Name of the author

Moreover, you need to create 2 assets for Ionic application:

  • Icon – the main icon of application visible on phone (placed in \resources\icon.png (1024 x 1024))
  • Splash screen – the screen visible during the application loading time (placed in \resources\splash.png (2732 x 2732))

When you will be creating your splash screen, remember to not place any details near the edges of the image. It can be cropped on different sizes. Anybody want to lose any details.

When you prepare both resources for the application, you need to generate images on different sizes for the final build.

ionic cordova resources

You can see the result of this generation at the directory: \resources\android\icon

Building application

When you prepare everything, you can proceed with the package build.

ionic cordova build android --prod --release

This command involves the run of ngc compiler, so most of the time you will see some errors during this build. ngc compiler is much more strict than a regular angular builder. You need to fix them all to go further.

As a result, you should see the following information in console:

BUILD SUCCESSFUL in 12s
45 actionable tasks: 13 executed, 32 up-to-date
Built the following apk(s):     
   D:\Projects\tea-timer-app\platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk

Certificate

You have Android application generated in a defined path, but it is not signed yet. You need a certificate to sign an application and upload it to Google Play.

At first, you need to create a keystore with the password defined by you.

"Java\jdk\bin\keytool" -genkey -v -keystore
my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity
10000

Then upload generated keystore to Google Play account and sign application from console.

"Java\jdk\bin\jarsigner" -verbose -sigalg
SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore
app-release-unsigned.apk alias_name
"android-sdk\build-tools\26.0.2\zipalign" -v 4
app-release-unsigned.apk myapp-signed.apk

Remember to pass the correct password and change an alias name for your application.

As a result of these two commands, you will have a file myapp-signed.apk generated. This is a correct APK, which can be uploaded to Google Play.

Google Play deployment

Now you are ready to release. In the beginning, create a new release in close track (alpha channel) or open track (beta channel). It depends whether you have an internal testing team or you want to place your application in order to test it by others. In the testing (beta) version application can be downloaded by anybody, but it is harder to search in search engine.

Beta release selection

Let’s start with the alpha channel. When you create a release, you need to upload your .apk file. Then you can review it and send to the chosen channel.

Deploy Ionic to Google Play Store - Package chooser view

Other Google Play information

You also need to fill a content survey to declare, what age restriction applies to your application users. Questions are very simple and the survey is quite short.

The next thing you need to define is the application price. If you choose a free option, you don’t need to fill anything.

Price screen

However, if you choose the paid option, you can freely define your price depending on the country. You can also use predefined templates to make your work easier.

Deploy Ionic to Google Play Store - Price definition view

Release

When you will see 4 green ticks in the menu at the left of the page, you are ready for release.

Click the “Ready to publish” button, go to beta release details and click “Promote to production” button.

Deploy Ionic to Google Play Store button

Now, you finish your work. Your application needs to be processed by Google Play and will be available within a few hours in the store.

As you can see the process of deploy Ionic to Google Play Store is very easy but it takes some time to complete. We have some options automate it (https://fastlane.tools/ or https://circleci.com/build-environments/linux/android/) but we can talk about it later.