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:
- 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.
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.
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.
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.
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.
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.
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.