Notes de cours de Programmation Mobile Page | 1

PLAN DU COURS

1. INTRODUCTION
2. OBJECTIF DU COURS
CHAPITRE I : DEVELOPPEMENT D'APPLICATIONS MOBILES ?
I.1 CHOIX D’UNE PLATEFORME
I.2 LE CHOIX ENTRE LE DEVELOPPEMENT D’APPLICATIONS
HYBRIDES (A LA FOIS POUR ANDROID ET iOS) OU NATIVES
I.3 ALLEGEMENT D’UNE PLATEFORME MOBILE
I.4 LE CLOUD COMME OPTION
CHAPITRE II : PROGRAGRAMMATION WEB
II.1 GENERALITE SUR LES Langages HTML & CSS
II.2. DEFINITION DU CONCEPT
II.3 FONDATION DU HTML
CHAPITRE III : PROGRAGRAMMATION MOBILE
3.1 INSTALLATION DES OUTILS
3.1.1 Nodejs et Cordova
3.1.2 Java et Java SE Development Kit 8
3.1.3 Les variables d'environnement
3.1.4 Gradle
3.1.5 Android studio
3.2 CREATION D’UNE APPLICATION
3.3 UTILISATION D’UN PLAG-IN
3.4 EXEMPLE D’UNE APPLICATION MOBILE

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – [email protected] – MicroTech Books]
Notes de cours de Programmation Mobile Page | 2

CHAPITRE I : DEVELOPPEMENT 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

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – [email protected] – MicroTech Books]
Notes de cours de Programmation Mobile Page | 3

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.
I.1 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
Conçu et réalisé par l’Ingénieur Lepetit MABIDI
[0813226488 – [email protected] – MicroTech Books]
Notes de cours de Programmation Mobile Page | 4

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.
I.2 LE CHOIX ENTRE LE DEVELOPPEMENT D’APPLICATIONS
HYBRIDES (A 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é
Conçu et réalisé par l’Ingénieur Lepetit MABIDI
[0813226488 – [email protected] – MicroTech Books]
Notes de cours de Programmation Mobile Page | 5

à 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
Fondation, 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 code base 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.

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – [email protected] – MicroTech Books]
Notes de cours de Programmation Mobile Page | 6

I.3 ALLEGEMENT 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 consomme 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.
Conçu et réalisé par l’Ingénieur Lepetit MABIDI
[0813226488 – [email protected] – MicroTech Books]
Notes de cours de Programmation Mobile Page | 7

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.
I.4 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.

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – [email protected] – MicroTech Books]
Notes de cours de Programmation Mobile Page | 8

CHAPITRE II : PROGRAGRAMMATION WEB

La programmation web est la programmation

informatique qui permet d’éditer le site web. Elle permet la
création d’application destiné à être déployer sur internet.
Elle constitue des pages pouvant prendre différentes formes
notamment :
 Un ensemble des pages statiques;
 Un ensemble des pages dynamiques.
Pour internaute qui fait appel à URL, la page web
correspondante, quel que soit statique ou dynamique
consiste en du code « côté client » qui est interprété par son
navigateur produisant une interface utilisateur.
Ces codes qui sont renvoyés par le serveur web, peut
ou non avoir été générer par du calcul « côté serveur ». Il
existe différentes technologies et différents langages
permettant de construire (créer) de site web par
l’intermédiaire serveur web. Pour notre cas, nous allons
apprendre les langages HTML (Hypertext Markup langage)
un langage de balisage qui définit essentiellement la
structure de la page web (titre, tableau, paragraphe, etc.).
HTML est un langage qui permet de créer les
hyperliens à savoir, les liens d’un document à un autre, ou
l’endroit d’un document à un autre endroit d’un même
document.
Aborder le langage CSS (cascading style sheet et
ensuite nous allons) qui a pour rôle de mettre en forme le
contenu en lui appliquant ce qu’on appelle de STYLES.

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – [email protected] – MicroTech Books]
Notes de cours de Programmation Mobile Page | 9

II.1 GENERALITE SUR LES Langages HTML & CSS

Si le monde informatique vous plait, et que vous êtes
tenté d’apprendre la programmation informatique, vous
serez obligé de passer par l’apprentissage de HTML & CSS
pour 2 raisons :
 Le HTML & CSS sont deux véritables standard et
n’ont pas de concurrent ;
 Ces deux langages de véritables socles de tout
projet de développement web.
Le langage HTML tire son origine sur le langage SGML.
Il s’agit d’un type particulier d’annotation destinée au
w.w.w et qui correspond à une collection de style
reconnaissable par le « navigateur ».
Un navigateur en anglais appelé BROWSER est donc
un logiciel qui permet d’interpréter les commandes HTML
contenu dans un document accessible sur w.w.w. le HTML
est sur w.w.w depuis 1990.
II.2. DEFINITION DU CONCEPT
a. HTML : est l’abréviation de HyperText Markup
Language, soit en français Langage Hypertext de
Balisage. Ce langage a été créé en 1991 et a pour
fonction de structurer et de donner du sens au
contenu.
b. CSS : Signifie (Ascading Style Sheet, qui veut dire en
français feuille de style en cascade. Il a été créé en
1996 et a pour rôle de mettre en forme du contenu en
lui appliquant ce que l’on appelle de STYLE.

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – [email protected] – MicroTech Books]
Notes de cours de Programmation Mobile Page | 10

c. Internet : par définition, l’internet est un réseau

informatique communiquant entre eux, grâce à un
ensemble des règles appelé Protocol.
Le mot internet vient de l’anglais : INTER / NET qui veut
dire en français interconnexion et réseau.
d. Web : il sied de souligner que le web n’est pas internet.
Il est juste une application permettant d’autres de tous
les services de Net, la toile mondiale www est le moyen
de communiquer le plus convivial. Il se définit par son
contenu comme un grand réservoir d’informatique
exploitable sur le Net.
e. Site web : quant à lui est constitué l’ensemble de pages
créées par une structure ou un individu relié entre elle
par des liens HyperText stocker sur un serveur et
accessible par le Net.
II.3 FONDATION DU HTML
Il y a trois (3) concepts ou termes dont vous devez
absolument comprendre le sens en HTML. Ce sont les
termes : Elément, Balisage et Attribut.
 ELEMENT
Les éléments tout d’abord vont nous servir à définir des
objets dans notre page. Grâce aux éléments, nous allons
définir un paragraphe, des titres d’importance d’inverse ou
un lien. Les éléments sont constitués des balises. Dans la
majorité de cas, un élément est constitué d’une paire de
balise : c’est-à-dire une balise ouvrante et fermante.

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – [email protected] – MicroTech Books]
Notes de cours de Programmation Mobile Page | 11

 BALISE
Les balises reprennent les noms de l’élément et sont
entouré des chevrons <p>. La balise fermante possède en
plus un slache/ qui précède le nom de l’élément.
Ex : <br/> = balise orpheline.
Cependant certains éléments ne sont constitués que
d’une balise qu’on appelle balise orpheline. Dans le cas de
balise orpheline, le slache se situe après le nom de
l’élément.
 ATTRIBUT
Les attributs vont venir compléter des éléments en leur
donnant des indications ou des instructions
supplémentaires.
Ex : dans le cas de lien, en se servir d’un attribut pour
indiquer la cible de lien, c’est-à-dire vers quel site, le lien doit
amener.
Noté que : les attributs se placent toujours à l’intérieur de la
balise ouvrante d’un élément ou dans la balise orpheline de
cas échéant.
<a href = "http//: wikipedia.org"> : balise
Dans l’exemple ci-dessus discerne l’élément à
composer d’une balise ouvrante elle-même et d’un attribut
href, d’une ancre textuelle est à la fin d’une balise fermante.
L’ancre textuelle correspond aux textes entre la balise, ça
sera le texte sur lesquels vos visiteurs devront voir. Et c’est
l’unique partie visible pour eux.

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – [email protected] – MicroTech Books]
Notes de cours de Programmation Mobile Page | 12

CHAPITRE III : 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).
Conçu et réalisé par l’Ingénieur Lepetit MABIDI
[0813226488 – [email protected] – MicroTech Books]
Notes de cours de Programmation Mobile Page | 13

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
Conçu et réalisé par l’Ingénieur Lepetit MABIDI
[0813226488 – [email protected] – MicroTech Books]
Notes de cours de Programmation Mobile Page | 14

• 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

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – [email protected] – MicroTech Books]
Notes de cours de Programmation Mobile Page | 15

: 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 :

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – [email protected] – MicroTech Books]
Notes de cours de Programmation Mobile Page | 16

• <meta http-equiv="Content-Security-Policy"
content="default-src 'self' data: gap:
https://ssl.gstatic.com 'unsafe-inline' 'unsafe-eval';
stylesrc
'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">
Conçu et réalisé par l’Ingénieur Lepetit MABIDI
[0813226488 – [email protected] – MicroTech Books]
Notes de cours de Programmation Mobile Page | 17

</head>
<body>
Bonjour le monde !
</body>
</html>
• Modifier les infos dans le fichier
config.xml Par exemple :
<?xml version='1.0' encoding='utf-8'?>
version="1.0.
<widget id="com.moi.bonjour"
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" />

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – [email protected] – MicroTech Books]
Notes de cours de Programmation Mobile Page | 18

<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
Conçu et réalisé par l’Ingénieur Lepetit MABIDI
[0813226488 – [email protected] – MicroTech Books]
Notes de cours de Programmation Mobile Page | 19

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.

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – [email protected] – MicroTech Books]
Notes de cours de Programmation Mobile Page | 20

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
Conçu et réalisé par l’Ingénieur Lepetit MABIDI
[0813226488 – [email protected] – MicroTech Books]
 },
};
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>

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – [email protected] – MicroTech Books]
<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');
}

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – [email protected] – MicroTech Books]
 }
},

};
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:

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – [email protected] – MicroTech Books]
 Conçu et réalisé par l’Ingénieur Lepetit MABIDI
[0813226488 – [email protected] – MicroTech Books]