Programmation
Mobile
Application mobile Androïd à partir
d’une application web avec Cordova
Professeur KABEYA TSHISEBA Cédric
PLAN DU COURS
1. OBJECTIF DU COURS
2. INTRODUCTION
3. PROGRAGRAMMATION WEB
a. CONTEXTE
b. LE WEB STATIQUE
c. LE WEB DYNAMIQUE
4. PROGRAGRAMMATION MOBILE
a. INSTALLATION DES OUTILS
b. CREATION D’UNE APPLICATION
c. UTILISATION d’UN PLAG-IN
d. EXEMPLE D’UNE APPLICATION MOBILE
1. OBJECTIF DU COURS
Ce cours a pour objectif l’initiation à
la programmation d'application mobile Android pour smart-
phones, tablette tactile, etc. Acquisition des
connaissances/compétences nécessaires pour pouvoir
s'adapter aux évolutions des ces technologie.
2. INTRODUCTION
2.1. Développement d'applications mobiles ?
Le développement d'applications mobiles est le processus de création de
logiciels pour les smartphones, les tablettes et les assistants numériques qui
fonctionnent généralement sur les systèmes d'exploitation Android et iOS. Le
logiciel peut être préinstallé sur l'appareil, téléchargé depuis un magasin
d'applications mobiles ou accessible par le biais d'un navigateur Web pour
appareils mobiles. Les langages de programmation et de balisage utilisés pour
ce type de développement de logiciels comprennent Java, Swift, C# et HTML5.
Le développement d'applications mobiles est en pleine croissance. Qu'il
s'agisse des secteurs de la distribution, des télécommunications, du
commerce électronique, de l'assurance, des soins de santé ou de
l'administration, les organisations de tous les secteurs d'activité doivent
répondre aux attentes des utilisateurs qui souhaitent disposer de moyens
pratiques et en temps réel pour effectuer des transactions et accéder aux
informations. Aujourd'hui, les particuliers comme les entreprises utilisent
principalement des appareils mobiles, et les applications mobiles qui libèrent
leur valeur, pour se connecter à Internet. Pour rester pertinentes, réactives et
prospérer, les organisations doivent développer les applications mobiles que
leurs clients, partenaires et employés exigent.
Pourtant, le développement d'applications mobiles peut sembler une tâche
considérable. Une fois que vous avez choisi la ou les plateformes d'OS, vous
devez surmonter les limites des appareils mobiles et faire franchir à votre
application tous les obstacles potentiels de la distribution. Cependant, en
suivant quelques lignes directrices de base et les meilleures pratiques, vous
pouvez rationaliser votre parcours de développement d'applications.
Pour en savoir plus sur les spécificités du développement d'applications
mobiles sur l'une ou l'autre plateforme, lisez nos articles sur le développement
d'applications iOS et le développement d'applications Android.
Pour découvrir le développement d'applications mobiles, consultez le tutoriel
simple de développement d'un agent conversationnel vocal Android.
2.2. Choix d’une plateforme
La plupart des équipes indépendantes de développement d'applications
choisissent de développer leur application pour Android en premier. Pourquoi ?
La grande majorité des smartphones (environ 70 %) fonctionnent sur Android,
et Google Play Store impose moins de restrictions que l'Apple App Store.
D'autre part, les appareils à prendre en charge pour les applications iOS sont
de loin beaucoup moins nombreux, ce qui facilite d'autant l'optimisation. Et
la fidélisation des utilisateurs est généralement plus élevée en ce qui concerne
les applications iOS.
En fonction du cas d'utilisation et du public cible de l'application mobile que
vous développez, il peut être nécessaire de prendre en compte d'autres
éléments. Par exemple, si vous concevez une application pour les employés de
votre organisation, vous devez prendre en charge les plateformes qu'ils
utilisent, ce qui peut impliquer de développer des applications
multiplateformes qui fonctionnent à la fois sur Android et iOS. Ou encore, si
vous développez une application mobile pour vos clients et savez que la
majorité d'entre eux utilise des iPhones, le développement d'applications iOS
doit alors être la priorité principale. Les stratégies de monétisation et le
comportement anticipé des utilisateurs, qui peut être influencé par des
facteurs géographiques et culturels, sont d'autres éléments à prendre en
compte lors du développement de vos applications mobiles.
Améliorez l'efficience et renforcez la sécurité en intégrant la plateforme de
développement et l'outil de gestion des appareils.
2.3. Le choix entre le développement d’applications
hybrides( à la fois pour Android et iOS) ou natives
Supposons que vous devez développer des applications mobiles pour les
systèmes d'exploitation Android et iOS. Quelle est la meilleure approche de
développement du logiciel ?
Vous pouvez développer deux applications natives. En tirant parti des API
natives et des langages de programmation spécifiques au système
d'exploitation, vous pouvez créer une application puissante. La plupart des
applications d'entreprise, en particulier celles qui nécessitent un trafic d'API
substantiel, tirent des avantages du développement natif.
Si vous décidez de développer des applications natives l'une après l'autre, vous
commencerez probablement par Android, pour certaines des mêmes raisons
qui font que les développeurs d'applications indépendants se concentrent
souvent sur Android. Vous serez probablement plus amené à développer
l'application complète comme produit minimum viable sur Android, puis à la
convertir et à l'optimiser pour iOS après sa sortie.
Vous devrez toujours déboguer et réécrire le code pour le langage natif et
reconcevoir l'interface utilisateur frontale, car les deux systèmes d'exploitation
fonctionnent très différemment, ce qui rend impossible le fonctionnement
multiplateforme.
Alors pourquoi ne pas repartir complètement de zéro ? Bien que vous ne
puissiez pas simplement convertir le code dans un nouveau langage de
programmation, une grande partie du back-end peut être répliqué sur
plusieurs plateformes. Les infrastructures, les bibliothèques et les extensions
tiers fonctionnement souvent de manière identique dans les deux
environnements, ce qui évite les transformations coûteuses. Vous pouvez
également utiliser un service de cloud mobile préconfiguré, tel qu'IBM Mobile
Foundation, pour gérer le serveur Web.
Une autre option consiste à passer à l'hybride, en adoptant une approche «
écrire une fois, exécuter partout ». Les applications hybrides utilisent un
codebase unique qui peut fonctionner sur toutes les plateformes. Elles sont
généralement codées dans un langage de programmation universellement
reconnu, tel que Java, JavaScript, HTML ou CSS. Comme vous ne pouvez pas
accéder aux API natives du système d'exploitation, le développement
d'applications mobiles hybrides fonctionne mieux pour les applications Web
simples, les applications mobiles de trois ou quatre pages avec une
fonctionnalité limitée.
2.4. Allègement d’une plateforme mobile
Que vous choisissiez le développement d'applications mobiles natives ou
hybrides, les ressources relativement limitées sur les appareils mobiles
constituent l'un des premiers obstacles que vous rencontrerez. Votre appareil
mobile cible disposera de beaucoup moins de puissance de traitement et de
mémoire que les ordinateurs de bureau ou les serveurs d'entreprise. Ces
contraintes peuvent représenter une difficulté importante, surtout si vous êtes
habitué aux ressources comparativement illimitées du développement de
logiciel conventionnel pour les applications Web.
Les ressources limitées des plateformes mobiles impliquent que vous devez
ajuster vos objectifs pour la conception de votre application.
Pendant tout le processus de développement d'une application mobile, les
développeurs doivent veiller à ce que leur application mobile consomment
moins de ressources qu'une application de bureau typique.
Fournir une excellente expérience utilisateur est crucial. Il convient d'abord
de comprendre que l'interface utilisateur d'une application mobile doit être
plus simple que celle d'une application de bureau. En créant une expérience
utilisateur simple axée sur les fonctions critiques, vous pouvez offrir une
meilleure expérience utilisateur tout en consommant moins de ressources.
L'interface de votre application mobile doit être conçue pour l'utilisation tactile.
Les utilisateurs mobiles doivent pouvoir y naviguer facilement et entrer des
données sans avoir à utiliser le clavier démesurément.
Par bonheur, ces exigences inhérentes aux applications tactiles simples et
efficaces correspondent bien aux attentes des utilisateurs. Les utilisateurs
mobiles veulent généralement accomplir des tâches simplement, en quelques
pressions du doigt. Ils veulent des applications qui soient surtout rapides,
pratiques et faciles à utiliser sur leurs appareils mobiles.
2.5. Le cloud comme option
Que se passe-t-il si votre application mobile nécessite plus de traitement
qu'une plateforme mobile typique ne peut en prendre en charge ? Envisagez
de décharger ce traitement dans le cloud.
Si vous utilisez judicieusement les API, vous pouvez connecter votre
application à des services et bases de données cloud pour fournir une
fonctionnalité avancée sans ralentir votre application ou mettre à rude
épreuve l'appareil sur lequel elle s'exécute. Vous pouvez même décharger le
stockage et la mise en cache des données sur un serveur cloud pour laisser
très peu de données sur l'appareil.
3. PROGRAGRAMMATION WEB
VOIR LE DOCUMENT D’ACCOMPAGNEMENT DU
COURS DE PROGRAMMATION WEB 1 ET 2
4. PROGRAGRAMMATION MOBILE
3.1.INSTALLATION DES OUTILS
IL s’agit dans cette partie de ce document de présenter tous les logiciels et
outils que nous allons utiliser ainsi que la manière de les installer.
3.1.1. 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.
3.1.2. 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.
3.1.3. Les 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
3.1.4. 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.
3.1.5. 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
3.2.CREATION D’UNE APPLICATION
• 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="[email protected]" 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...).
3.3.UTILISATION D’UN PLAG-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>
3.4. EXEMPLE D’UNE APPLICATION
MOBILE
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:
