Tuto : Créer une application mobile Androïd en html avec Cordova

Dernière modification 21 avril 2023

Vous êtes développeur web et vous n'avez pas envie de réapprendre de nouveaux langages pour coder votre appli ? Cordova permet de transformer votre application web en application smartphone. Nous nous concentrerons ici sur la réalisation d'une application Android avec un PC Windows 10. Je vous renvoie sur cette archive du Blog du MMI pour les subtilités sur les autres plateformes.

Prérequis du tutoriel

HTML / XML niveau basique
Windows niveau intermédiaire

Installation des logiciels

Le plus long et compliqué est l'installation des logiciels dont nous allons avoir besoin. Mais une fois cela fait, il n'y a pas besoin de les réinstaller à chaque fois.

Nodejs et Cordova

Installer NodeJS sur le PC : https://nodejs.org/fr
Ouvrir le terminal Windows avec la touche Windows + R, puis taper cmd
Tester si Nodejs marche : taper (ou copier-coller) node -v puis Entrée, cela devrait renvoyer le n° de version de NodeJS.
Activer Cordova : dans le terminal, taper npm install cordova -g puis Entrée.
Tester si Cordova marche : taper cordova -v puis Entrée. Cordova vous demandera si vous voulez envoyer des statistiques. Répondez Y (yes) ou N (no) puis Entrée. Le n° de la version de Cordova devrait s'afficher.

Java et Java SE Development Kit 8

Télécharger et installer Java SE Development Kit 8 :
https://www.oracle.com/java/technologies/javase-jdk8-downloads.html

Il faudra vous créer un compte Oracle pour pouvoir télécharger le logiciel.

Bien choisir la bonne version de Windows : Windows x64 (64 bits).

L'installateur installe aussi Java si vous ne l'avez pas déjà.

Tester dans le terminal si Java marche : taper java -version puis Entrée.

Le monde merveilleux des Variables d'environnement

Tous ces logiciels que l'on va installer ont besoin de communiquer entre eux. Il faut leur dire avec des variables d'environnement.

Dans la recherche Windows, chercher "Paramètres système avancés" ou aller dans Panneau de configuration > Système et sécurité > Système > Paramètres système avancés
Ouvrir Variables d'environnement puis dans Variables utilisateur cliquer sur Nouvelle.
Mettre :
Nom de la variable : JAVA_HOME
Valeur de la variable : Le répertoire où est installé Java SE Development Kit

Par exemple chez moi :
Valeur de la variable : C:\Program Files\Java\jdk1.8.0_291
Dans Variables système, sélectionner la ligne Path puis cliquer sur Modifier
Cliquer sur Nouveau et mettre : %JAVA_HOME%\bin

Gradle

Télécharger et dézipper le fichier Binary-only : https://gradle.org/install
Mettre son contenu dans le dossier où vous souhaitez l'installer.
Variables d'environnement : dans Variables système, sélectionner la ligne Path puis cliquer sur Modifier.
Cliquer sur Nouveau et mettre le chemin vers le dossier bin de Gradle.
Chez moi : C:\Program Files\gradle-7.0\bin
Redémarrer votre ordinateur
Tester dans le terminal si Gradle marche : gradle -v puis Entrée.

Android studio

Télécharger et installer Android Studio : https://developer.android.com/studio
Ouvrir Android Studio et utiliser le Setup Wizard pour terminer l'installation.
Ouvrir Android Studio puis Configure > SDK Manager
Cocher Android 10.0 (Q) (API Level 29) puis OK
Accepter la licence et patienter pendant l'installation.
Variables d'environnement :

Dans Variables utilisateur, cliquer sur Nouvelle.

Nom de la variable : ANDROID_SDK_ROOT
Valeur de la variable : dossier où est installé Android studio dans les utilisateurs

Par exemple chez moi :
Valeur de la variable : C:\Users\Creavolt\AppData\Local\Android\Sdk

Si le dossier AppData n'apparait pas sur votre ordi, afficher les dossiers cachés (Affichage puis cocher Éléments masqués).

Dans Variables système, sélectionner la ligne Path puis cliquer sur Modifier.

Ajouter
%ANDROID_SDK_ROOT%\platform-tools
et
%ANDROID_SDK_ROOT%\tools

Créer une appli

Créer un dossier appli avec le terminal :
Taper cordova create "dossier où je vais coder mon appli" puis Entrée

Par exemple : cordova create "D:/Applis/Ma premiere appli"

Ne pas mettre d'accents dans le nom des dossiers !

Créer l'appli HTML dans le dossier www créé :

Modifier index.html avec un éditeur de texte pour créer l'appli.

Garder les balises meta, mais remplacer :

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

Par :

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src *">

Par exemple :

<!DOCTYPE html>

<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src *">
	<meta name="format-detection" content="telephone=no">
	<meta name="msapplication-tap-highlight" content="no">
	<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
	<meta name="color-scheme" content="light dark">
</head>
<body>

	Bonjour le monde !

</body>
</html>

Modifier les infos dans le fichier config.xml

Par exemple :

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.moi.bonjour" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

	<name>Bonjour</name>

	<description>
	    Un superbe test d'Apache Cordova
	</description>

	<author email="mon@email.fr" href="http://mon-site.fr">
	    Moi
	</author>

	<content src="index.html" />

	<access origin="*" />
	<allow-intent href="http://*/*" />
	<allow-intent href="https://*/*" />
	<allow-intent href="tel:*" />
	<allow-intent href="sms:*" />
	<allow-intent href="mailto:*" />
	<allow-intent href="geo:*" />

	<platform name="android">
	    <allow-intent href="market:*" />
	</platform>

	<icon src="icone192.png" />

</widget>

L'id doit être de la forme id="com.nomauteur.nomappli"

Pour ajouter une icône à l'appli, mettre une image de 192 × 192 pixels dans le dossier de l'appli (icone192.png dans l'exemple ci-dessus).

Ouvrir un terminal dans le dossier de l'appli avec Shift + clic droit dans le dossier, puis Ouvrir la fenêtre PowerShell ici.
Créer un dossier Android : taper cordova platform add android puis Entrée

Si PowerShell indique que l’exécution des scripts est désactivée, taper Set-ExecutionPolicy -Scope "CurrentUser" -ExecutionPolicy "Unrestricted" puis Entrée, puis O puis Entrée et recommencer la création du dossier.
Créer ou mettre à jour votre application : toujours dans le terminal du dossier de l'appli, taper :
cordova build android puis Entrée.

Si tout est bien installé, cela va créer un fichier .apk et indiquer dans quel dossier.

Sinon voir le message d'erreur. Vous pouvez aussi taper cordova requirements dans le terminal du dossier de l'appli pour vérifier que tout fonctionne.

La première création est assez longue, mais ça va bien plus vite par la suite.

Plus tard, vous pourrez spécifier que c'est une application qui n'est plus en bêta avec " --release" :
cordova build android --release
Transférez le .apk sur votre smartphone avec un câble USB et ouvrez-le avec un explorateur de fichiers.
Autoriser l'installation.

Vous savez à présent faire des applis ! Vous pouvez agrémenter votre HTML avec du CSS et du JS. Le JS localStorage vous permet de stocker des informations sur le smartphone de l'utilisateur.

Dans le chapitre suivant, nous verrons comment accéder aux fonctionnalités du smartphone (GPS, appareil photo...).

Utiliser un plug-in

Prérequis
JS / jQuery niveau basique

Des plugins de Cordova permettent d'accéder aux fonctionnalités du smartphone.

Il faut installer le plugin avec le terminal dans le dossier du projet.

Par exemple pour la caméra :
cordova plugin add cordova-plugincamera

Pour trouver les documentations des plugins (en anglais) :
https://cordova.apache.org/plugins/?platforms=cordova-android

Des tutos pour utiliser certains plugins (en anglais) : https://www.tutorialspoint.com/cordova/index.htm

Voici la structure du JS à mettre dans index.html :

<script src="cordova.js"></script>

<script>

var app = {

	initialise: function() {
		document.addEventListener('deviceready', this.AppareilPret.bind(this), false);
	},

	AppareilPret: function() {
		//Code à exécuter quand l'appareil est prêt
	},

};

app.initialise();

</script>

Exemple appli batterie

Installer le plugin avec le terminal dans le dossier du projet.
Taper cordova plugin add cordova-plugin-battery-status puis Entrée

Dans index.html écrire :


<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src *">
	<meta name="format-detection" content="telephone=no">
	<meta name="msapplication-tap-highlight" content="no">
	<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
	<meta name="color-scheme" content="light dark">
	<link rel="stylesheet" href="batterie.css">
</head>
<body>

	<h1>Batterie</h1>

	Niveau de la batterie : <span id="niveau"></span> %<br><br>

	Le câble est branché : <span id="branche"></span>

	<script src="jquery.min.js"></script>
	<script src="cordova.js"></script>

	<script>

	var app = {

		initialise: function() {
			document.addEventListener('deviceready', this.appareilPret.bind(this), false);
		},

		appareilPret: function() {

			window.addEventListener('batterystatus', statutBatterie, false);

			function statutBatterie(statut) {

				$('#niveau').html(statut.level);

				if (statut.isPlugged) {
					$('#branche').html('oui');
				}
				else {
					$('#branche').html('non');
				}
			}
		},

	};

	app.initialise();

	</script>

</body>
</html>

Ici j'utilise jQuery, il faudra donc mettre le fichier jquery.min.js dans le dossier www.

J'ai aussi utilisé une feuille de style CSS dans le dossier www :

body {
    font: 1.1em sans-serif;
    color: #333;
    background: #bee;
}

Le résultat :

capture d'écran application batterie

Retour aux tutos

Besoin de l'aide d'un professionnel pour créer votre site ou votre publication graphique ? Contactez-moi !

Licence Creative Commons Attribution

Vous êtes libre de réutiliser cet article à condition de mentionner qu'il a été écrit par Creavolt.fr

Ces tutos peuvent vous intéresser

Lire et écrire vos bases de données en JSON !

Logo Emmet

Écrire rapidement son CSS avec Emmet