Les applications mobiles sont devenues des vecteurs de communication essentiels pour les entreprises. Le développement de ces applications correspond à divers processus de création et de déploiements qui permettent d’interagir avec ses clients, ses partenaires et ses salariés.

Aujourd’hui, les entreprises cherchent de plus en plus des solutions leur fournissant des facilités de gestion. Elles optimisent continuellement leurs processus dans l’optique de diminuer leurs coûts matériels, humains et technologiques.

Docker est un outil qui isole les applications dans des conteneurs légers et portables, offrant ainsi plusieurs avantages. Tout d'abord, la portabilité permet de déployer les conteneurs Docker sur n'importe quelle machine compatible, simplifiant ainsi la mise en production et la migration des applications. De plus, chaque conteneur est isolé des autres conteneurs et du système hôte, ce qui évite les conflits et garantit la stabilité du système. La gestion des différentes versions d'applications devient également plus facile avec Docker, permettant un déploiement rapide dans divers environnements. Enfin, les conteneurs Docker sont légers et partagent les ressources de la machine hôte, ce qui optimise l'utilisation des ressources système.

Chez Next Decision, nous faisons tout pour rapprocher nos développements du réel. Nous employons l’ensemble des moyens techniques et matériels pour que nos développements applicatifs correspondent aux emplois, aux manières/techniques utilisées des entreprises. Ainsi, nous gagnons en flexibilité et rapidité de mise en production.

A la fin de cette article, vous serez en mesure de connecter votre téléphone android à un “devcontainer” et ainsi garantir un environnement de travail optimal pour vos développements.

Introduction

Les points suivants ne seront pas abordés dans cet article.  Ainsi, ces prérequis sont déjà configurés et ne seront donc pas expliqués.

  • Installation et configuration de WSL2 sur Windows 10
  • Installation et configuration de la solution Docker Desktop
  • Installation et développements d’une solution Ionic React
  • Savoir utiliser un “devcontainer”

Pour la suite, les points suivants vont être abordés :

  • Activer le mode Développeur de son téléphone Android
  • Activer le mode Debug USB de son téléphone Android
  • Installer et configurer ADB (Android Debug Bridge) sur Windows 10
  • Créer et configurer le DockerFile
  • Créer une connexion entre Docker et Windows via ADB
  • Exécuter l’application Ionic en utilisant exclusivement Capacitor

Le but étant de pouvoir débugger son application Ionic de 3 manières possibles :

  • En utilisant le localhost de son poste via son navigateur
  • En utilisant son téléphone 
  • En montant l’image .apk

Tout cela en permettant le LiveReload (recharge ou actualise l'application entière lorsqu'un fichier est modifié) et la mise en relation avec une application BACKEND qui exposera les données sous forme d’API.

L’avantage est de permettre à un développeur de facilement débugger sa solution au travers de divers supports, et ceci sans avoir à installer Android Studio. L’ensemble des configurations seront directement installées dans Docker. À partir d’une simple commande Linux, ou en l’occurrence Ionic, l’application sera disponible pour tester ses développements.

Activer le mode développeur de son téléphone

Afin de suivre cet article et de pouvoir utiliser le mode Debug USB de son téléphone, il est important de passer son téléphone en mode développeur.

Voici en quelques étapes comment activer le mode développeur sous Android.

  • Accédez aux paramètres de l’appareil Android
  • Allez dans « À propos du téléphone » ;
  • En bas, tapotez 7 fois « numéro de build » ;
  • Un message vous indique que les options pour les développeurs sont activées et qu’elles sont apparues dans le menu « Système » des paramètres.

 Activer le mode debug USB de son téléphone

Une fois l’activation du mode développeur du téléphone, l’activation du débogage USB est très simple. Il suffit de trouver l’option correspondante dans les Options de développement.

Configurer Docker et WSL2 pour vos applications Ionic Android

À la première connexion avec un ordinateur, via câble USB en l’occurrence, le téléphone demandera votre autorisation avant d’activer ce mode avec le PC en indiquant son identifiant unique.

Configurer Docker et WSL2 pour vos applications Ionic Android

Pour ADB, le débogage USB doit être activé.

Installer et configurer ADB sur Windows 10

Passons aux choses sérieuses, la prochaine étape de la configuration de notre environnement de développement et l’installation de ADB sur Windows 10.

ATTENTION : Il peut exister des problèmes de compatibilité entre la version de “ADB installer” via Docker et celle de Windows. Ainsi, soyez attentif au fait que les versions soient les mêmes (entre Docker et Windows 10).

Pour l’installation sous Windows, rien de plus simple :

  1. Téléchargez l’archive ZIP des Android SDK Platform-Tools ICI.
  2. Décompressez l’archive ZIP, de préférence à la racine du lecteur C. 
  3. Ajouter le dossier a la variable PATH des variables d’environnement (de préférence variable système)
  4. Redémarrer votre ordinateur

Après redémarrage de l’ordinateur :

  1. Ouvrez un terminal (Windows classique ou Powershell) de préférence en Administrateur
  2. Tapez les commandes suivantes :

adb server-start

Lors du lancement de cette commande, un message de confirmation devrait apparaître sur votre téléphone.

adb devices

Vous devriez alors voir votre téléphone dans la liste des “devices” trouvées par adb.

Pour info, il peut vous être demandé, depuis votre mobile, d’accepter la connexion via USB. Avec certains téléphones Android, vous pouvez faire en sorte de toujours accepter pour votre ordinateur.

Dans le cas où votre téléphone n’est pas trouvé par adb

  • Vérifiez les variables d’environnement Windows 
  • Vérifiez que vous avez accepté le débogage USB 

Dans certains cas, il peut être nécessaire de rebrancher votre téléphone pour actualiser la confirmation.

La configuration d’adb et de votre mobile est terminée. Nous reviendrons dessus dans quelques minutes, pour créer la connexion TCP qui permet ainsi le débogage de l’application Ionic depuis Docker.

Créer et configurer le dockerfile

Alors pour vous faciliter la vie, vous trouverez le DockerFile complet via ce repo git.

Grâce aux configurations initialisées dans ce DockerFile vous pourrez "debug" et "build" votre application.

Cela dit, un léger récapitulatif des commandes du DockerFile est nécessaire :

  • L’image Docker est build sur une instance d’Ubuntu version 20.04.
  • Il est conseillé de toujours monter une image à partir d’un utilisateur créé dans le Docker.
  • La partie « Install Android SDK » permet de télécharger une librairie permettant l’installation de SDK. Ces SDK vont servir à mon Docker de build l’application Android.
  • Ainsi, avec le binaire « sdkmanager » je peux télécharger les outils nécessaires.

Une commande utile pour connaître la liste des outils disponibles :

Commande : ./sdkmanager –list

Créer une connexion entre Docker et Windows via ADB

ATTENTION : Il est important dès maintenant que les deux supports soient connectés sur le même réseau (le mobile Android branché en USB et le PC Windows)

Pour commencer, à partir du terminal Windows ouvert précédemment, il est nécessaire d’exécuter les commandes suivantes :

adb kill-server

db tcpip 5555

Un prompt : “restarting in TCP mode port: 5555” devrait s’afficher
Dès lors, il est possible que sur le téléphone, un message vous demande la confirmation du mode débug.

Maintenant, nous allons mettre en place la connexion TCP depuis Docker. Le TCP permet de stabiliser le transfert des données entre deux ordinateurs. Cela va donc permettre de maintenir une connexion entre le “devcontainer” et le téléphone.

À noter : Le réseau adb ouvert à partir du terminal Windows a ouvert le port 5555 accessible via l’IP du téléphone.

Ainsi, pour lier notre solution Docker au téléphone, il faut lancer la commande suivante depuis le terminal du “devcontainer”.

Adb connect <ip_du_telephone>:5555

L’IP du téléphone est accessible dans la partie statut et information dans les paramètres de votre téléphone (Onglet “À propos du téléphone”)

À la suite duquel un message devrait apparaître indiquant que la connexion est effective.
Il est possible de voir le device connecté en tapant la commande suivante :

adb devices

Voilà la connexion est terminée. Dans la prochaine partie, nous verrons donc comment lancer l’application.

Exécuter l'application Ionic en utilisant exclusivement Capacitor 

Comme cité plus haut dans cet article, à partir de cette configuration, il est possible de lancer 3 exécutions pour l’application.

En amont de ces étapes, il est préférable de disposer des dossiers de configuration et d’initialisation. À partir de votre solution Ionic :

Commande : Ionic cap build android

Commande : Ionic cap sync Android

Ces deux commandes vont donc générer respectivement un dossier « build » et un dossier « android » nécessaires pour monter l’image de l’application.

Exécuter l'application en utilisant le navigateur

À noter que dans ce cas la connexion ADB n’est pas nécessaire.

Il suffit de suivre les étapes suivantes :

Une fois dans le dossier de l’application Ionic : cd ./front, utiliser la commande suivante :

Commande : ionic run -l

Cette commande va initialiser l’application en mode LiveReload. L’application sera donc accessible via votre navigateur sur l’url http://localhost:xxxx.

Exécuter l'application sur un téléphone Android

La première étape est d’identifier si la connexion ADB est effective.
Ensuite, pour pouvoir obtenir le livereload, il suffit d’exécuter la commande (depuis le terminal du “devcontainer”)

adb reverse tcp:8100 tcp:8100

Puis, pour dialoguer avec une API, veuillez identifier le port de l’API (5000 dans mon cas) et de lancer la commande suivante :

adb reverse tcp:5000 tcp:5000

Et enfin, vient le moment tant attendu. Toujours dans le dossier de la solution Ionic, il suffit de lancer cette commande :

Ionic cap run android -l

À la suite de cette commande, l’application devrait s’ouvrir sur le mobile.

Exécuter l'application pour générer le fichier .apk

Dernière possibilité, générer le fichier apk.

Il est indispensable de vous rendre dans le dossier « ./Android » de votre solution.

Ensuite les deux commandes suivantes suffisent pour générer le fichier .apk

Commande : ./gradlew assembleDebug or ./gradlew assembleRelease

Selon le type de version que vous souhaitez.

Le fichier final se trouvera dans ./android/app/build/outputs/

Conclusion

En conclusion, l'utilisation de ce Docker pour le développement d'applications Android mobiles présente l’avantage d’être configurable chez tout développeur ayant besoin d’un environnement de dev optimisé.

Cependant, il est important de prendre en compte certaines limitations pour le développement d'applications Android, telles que la compatibilité avec différentes versions d'Android ou la gestion des fichiers et des permissions dans l'environnement de développement.

En effet, aujourd’hui cet article et l’ensemble des descriptions qui y sont faites ont été réalisés sur un SAMSUNG S21 avec Android 13.

Avec les conseils et astuces présentés dans cet article, les développeurs pourront facilement mettre en place un environnement Docker pour leur développement d’applications Android mobiles.

Nos développeurs Next Decision ont les compétences techniques et les environnements de travail parfaits pour répondre à vos besoins, alors pas une seconde à perdre, Contactez-nous !