Bonjour à tous! Dans ce tuto Ionic 4 nous allons voir comment déployer et publier votre application Ionic 4 sur Android et le Google Play Store.

La publication sur Android est plus rapide et plus simple que la publication sur iOS. Google inspectera très rapidement votre application et la proposera sur le Play Store sans restriction.

La seule condition pour pouvoir publier une application Android sur le Play Store est de disposer d’une licence Android Developper (25$) valable à vie.

Concrètement, si vous êtes nouveau dans le développement mobile, je vous conseille de commencer par la publication Android.

Pour finir, même si la publication sur Android et plus simple et rapide que celle d’iOS, elle n’en reste pas moins technique.

Vous allez surement bloquer à certaines étapes, et vous devrez persévérer pour trouver la solution, mais ça vaut vraiment le coup croyez-moi.

Pour déployer notre application Ionic 4 sur le Play Store de Google, nous allons suivre les étapes suivantes:

  1. Accéder à la Google Play Console
  2. Créer une version Android de son application Ionic 4
  3. Signer son application Android Ionic (jarsigner)
  4. Archiver son application Ionic 4 Android (zipalign)
  5. Importer l’APK de votre application Ionic dans le Play Store

Comment accéder à la Google Play Console ?

Nous commençons ce tutoriel Ionic avec une partie assez simple, que vous devriez pouvoir faire en toute autonomie.

Il s’agit de la connexion à la Google Play Console avec votre compte Google. Vous devez commencer par vous créer un compte Google Developper: https://developer.android.com/distribute/console

Puis vous pouvez accéder ensuite à la Google Play Console: https://play.google.com/apps/publish/?hl=fr

Comment accéder à la Google Play Console ?

C’est dans cette console que je gérerai toutes vos applications Android, leur présence sur les stores, les mises à jour, etc.

Comme je vous l’ai indiqué précédemment, pour publier vos applications Android sur le Play Store, vous avez besoin d’une Licence Android Developper: https://play.google.com/apps/publish/signup/

Une fois que vous aurez acheté votre Licence Android pour 25$, vous pourrez créer une application dans la Google Play Console.

Lorsque vous créez une nouvelle application, donnez lui également un identifiant unique qui vous permettra d’identifier clairement votre application sur Android et iOS.

La syntaxe utilisée par les entreprises est la suivante:

extension.entreprise.produit

Par exemple l’identifiant de l’application Google Maps est:

com.google.maps

Celui de l’application Netflix est:

com.netflix.app

Vous devez être propriétaire du nom de domaine pour proposer un tel identifiant d’application.

Par exemple mon application Startuper à l’identifiant:

com.drissas.startuper

Et vous devez réutiliser cette identifiant pour votre Bundle ID sur iOS, nous aurons l’occasion de voir de quoi il s’agit dans un prochain tuto.

Comment créer une version Android de son application Ionic 4 ?

Attaquons maintenant le vif du sujet et commençons à préparer notre application Ionic pour Android.

Dans cette partie nous n’aurons pas directement besoin d’Android Studio (le logiciel de développement pour Android officiel), car nous travaillerons uniquement sur le terminal de notre ordinateur.

En revanche nous aurons besoin du Android SDK qui est une suite d’outil indispensable pour publier et notamment signer nos applications Android.

Et pour télécharger le Android SDK, vous devez télécharger Android Studio. Donc je vous invite à le faire depuis le site officiel d’Android Studio: https://developer.android.com/studio

Une fois que le Android SDK est installé sur votre ordinateur, nous pouvons ajouter la plateforme Android à notre application Ionic:

ionic cordova platform add android

Une fois que la plateforme Android est ajoutée, un dossier android devrait apparaître dans le dossier platforms/:

Nous pouvons maintenant construire à chaque nouvelle fonctionnalité de notre application, une nouvelle version Android.

Vous pouvez consulter la documentation d’Ionic sur la commande cordova build: https://ionicframework.com/docs/cli/commands/cordova-build

La commande la plus simple pour créer une nouvelle version Android de notre application Ionic serait:

ionic cordova build android

Il nous reste cependant quelques subtilités avant de passer à l’étape suivante. Le fichier responsable des paramètres de votre version Android et iOS et le fichier config.xml.

Vous devez donc le modifier pour l’adapter à votre application et à la version que vous souhaitez proposer.

Ouvrez le fichier config.xml et modifier l’id et la version de votre application:

<widget id="VOTRE_ID_DAPP" version="0.0.1">

Si c’est la première version de votre application, laissez la version 0.0.1, si c’est la deuxième mettez 0.02, etc.

Une fois que vous avez mis à jour ces informations, ainsi que d’autres champs utiles à remplir du fichier config.xml, vous pouvez créer une nouvelle version.

Nous utilisons les paramètres –prod et –release pour construire une version optimisée de votre application Android:

ionic cordova build android --prod --release

Votre application Ionic 4 doit maintenant être présente dans sa version Android avec tout son code optimisé et prêt à la publication.

Comment signer son application Android Ionic 4 ? (jarsigner)

Dans cette étape signer notre application Ionic 4 Android, avec différents outils mis à disposition par le Android SDK.

Attention: c’est une étape que par le passé je négligeai car je ne comprenais pas son fonctionnement.

Nous allons notamment créer un fichier keystore qui nous permettra de signer une application en particulier. Vous devrez absolument conserver ce fichier pour pouvoir mettre à jour votre application par la suite.

Si c’est votre première publication sur Android, et que vous n’avez pas encore le fichier my-release-key.jks, nous allons le créer.

Pour cela nous allons utiliser le JDK Java et sa commande keytool pour créer notre fichier my-release-key.jks:

keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-alias

Votre terminal vous posera alors une série de questions à propos de vous, de votre organisation, etc. Vous devrez également définir un mot de passe, pour utiliser cette clé pour les futur signature d’application.

Une fois que votre fichier my-release-key.jks est généré, conservez-le précieusement pour les prochaines mises à jour de votre application.

Nous allons générer notre premier fichier APK, pour le moment non signé de notre application Ionic.

Nous utilisons la commande jarsigner dont je vous laisse la documentation Java officielle: https://docs.oracle.com/javase/tutorial/deployment/jar/signing.html

Nous générons ce premier fichier APK avec la commande jarsigner mais également avec le fichier my-release-key.jks que nous avons généré pércédemment:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.jks platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk my-alias

Nous générons ainsi un fichier APK du nom de app-release-unsigned.apk à l’intérieur de notre application à l’adresse:

platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk

C’est ici que se situe votre fichier APK non signé pour le moment, dans la dernière étape nous allons le signer.

Notez également que nous générer le fichier app-release-unsigned.apk, mais vous pouvez l’appeler comme vous voulez en modifiant son nom dans la commande, par exemeple:

jarsigner [...] platforms/[...]/miracle-morning-0-0-2.apk my-alias

Puisqu’au fur et à mesure de vos mises à jour, vous allez générer plusieurs fichiers APK, vous devrez donc les différencier.

Comment archiver son application Ionic 4 Android ? (zipalign)

Nous finissons la partie technique de ce tutoriel avec l’archive de notre application Android, c’est-à-dire la compression optimale de celle-ci.

Nous utilisons notamment la commande zipalign d’Android Studio pour archiver notre application: https://developer.android.com/studio/command-line/zipalign

Pour commencer, vous pouvez vous rendre depuis votre terminal dans le dossier où se situe votre fichier APK:

cd platforms/android/app/build/outputs/apk/release/

Je vous invite également à chercher l’adresse de votre fichier et commande zipalign avec la commande suivante:

find ~/Library/Android/sdk/build-tools -name "zipalign"

Votre terminal devrait vous renvoyer l’adresse exacte de ce fichier sur votre ordinateur (sur Mac):

/Users/drissas/Library/Android/sdk/build-tools/29.0.2/zipalign

Une fois que vous avez trouvé l’adresse de la commande zipalign, remplacez ./zipalign par l’adresse complète du fichier:

./zipalign -v 4 app-release-unsigned.apk app-signed.apk

Par exemple pour moi:

Users/drissas/Library/Android/sdk/build-tools/29.0.2/zipalign -v 4 app-release-unsigned.apk app-signed.apk

Voilà, avec cette commande vous devriez générer un nouveau fichier APK, cette fois prêt à être importer depuis le Play Store.

Comment importer l’APK de votre application Ionic dans le Play Store ?

Félicitations! Si vous en êtes arrivé là, vous avez fait le plus dur et vous pouvez être fier de vous.

Cette étape est la plus facile, car elle consiste simplement à importer depuis le Play Store le fichier APK de votre application.

Commencez par vous rendre dans la Console Play Store de votre application Ionic:

Puis rendez-vous dans le menu “Gestion des version” puis le sous-menu “Tableau de bord de la version“:

Il vous affiche alors les versions en cours de production de votre application, par exemple pour moi la version 0.0.2.

Cliquez alors sur le bouton “GÉRER LA VERSION“:

Il vous afficher votre version actuellement sur le Play Store, cliquez sur “GÉRER“:

Puis sur le bouton “CRÉER UNE VERSION“:

Enfin vous pouvez importez depuis votre navigateur le fichier APK que nous avons généré précédemment:

Le Google Play Store devrait automatiquement reconnaître la version de votre application, qui doit donc être supérieur à la version précédente.