Le développement Ionic sous Android et iOS

• Installer Android Studio

• Créer un appareil virtuel

• Créer un projet Ionic

• Configurer Android

Android Studio est l'IDE idéal pour les développements Android, car son simulateur d'appareil virtuel permet de tester rapidement et simplement le résultat en conditions réelles. Nous allons donc commencer par l'installation de l'outil et ses prérequis. Ensuite nous verrons les différentes étapes de configuration nécessaires pour pouvoir démarrer un projet Ionic pour Android dans les meilleures conditions.

Pour développer une application pour des appareils basés sur le système Android, il est nécessaire de posséder les outils Android tel que le SDK Android.

Android Studio est l'application IDE permettant la création d'applications Android natives. Il comprend le SDK qui devra être configuré.

Android Studio est généralement utilisé pour la création d'émulateurs d'appareils Android (smartphone , tablette, etc.). Il faut savoir qu'il est possible de lancer directement une application Ionic sur un appareil réel si on en possède un.

Le téléchargement de l'IDE est possible via le site web d'Android : https://developer.android.com/studio/ et l'on trouvera de plus amples informations sur le guide utilisateur visible à cette adresse

Pour créer un émulateur Android, il est nécessaire d'ouvrir le ADV MANAGER via Android Studio

Par défaut, lors de l'installation d'Android Studio, seul le dernier SDK est téléchargé et installé.

Il est possible d'installer manuellement d'autres versions du SDK Android notamment pour gérer la rétrocompatibilité avec d'anciennes versions du système d'Android.

Pour cela il faut ouvrir le SDK Manager dans Android Studio.

Il est nécessaire également d'installer les SDK Tools, ces outils permettent de compiler l'application mais également de fournir des fonctions annexes.

Dans l'onglet SDK Tools, il faut installer au minimum la dernière version des outils suivants :

- Android SDK Build Tools

- Android SDK Command Line Tools

- Android Emulator

- Android SDK Platform Tools

Certaines variables d'environnement sont nécessaires pour faire fonctionner correctement Android Studio et la compilation de projet Ionic.

Ajouter les variables suivantes :

- ANDROID_SDK_ROOT : {Chemin_dossier_SDK}

- ANDROID_AVD_HOME : {Chemin_dossier_SDK}\avd

Dans la variable PATH, ajouter les lignes suivantes :

- %ANDROID_SDK_ROOT%\platform-tools

- %ANDROID_SDK_ROOT%\tools

- %ANDROID_SDK_ROOT%\tools\bin

Android Studio a besoin des outils de développement Java et Gradle pour fonctionner correctement.

Ces outils sont normalement installés via l'installation d'Android Studio mais il peut arriver de devoir les installer manuellement.

• Java : JDK8 pour compiler l'application Android : https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html

• Gradle: Outil de build installable depuis l'url suivante : https://gradle.org/install/

Avant de se pencher sur Android, nous allons au préalable créer une application simple sous ionic, celle-ci servira de référence par la suite pour son passage sous Android.

Nous allons créer une application avec le template sidemenu

L'arborescence du projet créé est la suivante :

Dans un premier temps, il va falloir renseigner deux variables qui sont nécessaires pour la création du projet Android. Lancer la commande suivante avec appName le nom de l'application et appId identifiant du domaine (ex : com.exemple.myapp)

Avant toutes opérations sur le projet Android, il faut que le projet Ionic soit compilé au format WebApp. Il faut lancer la commande

Cette commande va créer un dossier dist ou www à la racine du projet. Selon le dossier créé, il faut modifier dans le fichier capacitor.config.json la propriété webDir.

Pour ajouter et configurer la plateforme Android sur un projet Ionic, il suffit de se rendre dans le dossier du projet qui aura été au préalable créé et taper les commandes :

L'exécution de cette commande permet de créer un dossier android à la racine du projet. Ce dossier va comporter un projet natif Android (Java/Kotlin) qui pourra être modifié directement depuis Android Studio.

Capacitor permet de faire une distinction nette entre le projet Ionic et le projet Natif. Tous ce qui concerne l'application Web devra être géré via Ionic. Tout ce qui concerne la partie Native (Icônes, Permissions, Signatures, etc.) devront être gérés via Android Studio.

Il est important que ce dossier soit enregistré dans le gestionnaire de sources pour ne pas perdre les configurations.

Si on effectue une mise à jour du projet Ionic, on peut mettre à jour notre projet natif via les deux commandes suivantes :

La première commande va mettre à jour les dépendances du projet natif et copier les assets Web. Cette commande doit être exécutée si on ajoute un nouveau plugin Capacitor/Cordova ou qu'une version est modifiée.

La seconde commande va uniquement copier les assets Web.

Pour ouvrir le projet Android, il faut lancer la commande

Cette commande va ouvrir Android Studio directement sur le bon dossier. Ensuite il sera possible de lancer l'application sur un émulateur ou un device réel connecté à l'ordinateur.