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

Logo Apache Cordova
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


  1. Installer NodeJS sur le PC : https://nodejs.org/fr

  2. Ouvrir le terminal Windows avec la touche Windows + R, puis taper cmd

  3. Tester si Nodejs marche : taper (ou copier-coller) node -v puis Entrée, cela devrait renvoyer le n° de version de NodeJS.

  4. Activer Cordova : dans le terminal, taper npm install cordova -g puis Entrée.

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

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

  2. Ouvrir Variables d'environnement puis dans Variables utilisateur cliquer sur Nouvelle.

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

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

  5. Cliquer sur Nouveau et mettre : %JAVA_HOME%\bin


Gradle


  1. Télécharger et dézipper le fichier Binary-only : https://gradle.org/install

  2. Mettre son contenu dans le dossier où vous souhaitez l'installer.

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

  4. Redémarrer votre ordinateur

  5. Tester dans le terminal si Gradle marche : gradle -v puis Entrée.



Android studio


  1. Télécharger et installer Android Studio : https://developer.android.com/studio

  2. Ouvrir Android Studio et utiliser le Setup Wizard pour terminer l'installation.

  3. Ouvrir Android Studio puis Configure > SDK Manager

  4. Cocher Android 10.0 (Q) (API Level 29) puis OK

  5. Accepter la licence et patienter pendant l'installation.

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



  1. 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 !

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


  3. 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).

  4. Ouvrir un terminal dans le dossier de l'appli avec Shift + clic droit dans le dossier, puis Ouvrir la fenêtre PowerShell ici.

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

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

  7. Transférez le .apk sur votre smartphone avec un câble USB et ouvrez-le avec un explorateur de fichiers.

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



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

Logo Emmet Écrire rapidement son CSS avec Emmet
Contactez-moi !