1. Christophe ZOME
Architecte Solution

2. I - Généralités
- Architecture d’entreprise
- C’est quoi PhoneGap ?
- PhoneGap & Cordova.
II - Les bases
- Pré-requis & logiciels
- Installer son environnement de dev
III - Les mains dans le cambouis
- Architecture de base
- Hello World
- Utilisation des ressources Mobile
IV – Rappels des API de base et Objets manipulés
- Jquery
- Gestion des timers
- Ajax
- Web Storage
- JSON
- REST
- JWT
Sommaire

3. Architecture globale cible
• JPA
• Hibernate
• JDBC
• Spring
Core
• EJB

4. ?
I - Généralités C’est quoi PhoneGap ?

5. I - C’est quoi PhoneGap ?
PhoneGap (Cordova) est un pont de développement, nous permettant
d’encapsuler du code client Web dans une application native (iOS, Android,
Windows Phone etc...). C’est en gros une grosse webview html/css/js dans
une app.

6. I - C’est quoi
PhoneGap ?
 PhoneGap (Cordova) va
également nous permettre
de communiquer avec la
machine (le smartphone, la
tablette), via des
connecteurs Javascript
internes à leur
développement ou via des
connecteurs indépendants
: les plugins.

7. I - Généralités PhoneGap & Cordova

8. I - PhoneGap & Cordova
La majorité des gens ne voient pas la différence entre ces deux noms, de par leur
intime relation. Vous allez rencontrer ces noms souvent dans votre carrière de
développeur mobile. Voyons que signifient-ils.
Pour faire simple PhoneGap est une
distribution gratuite de Cordova. Elles sont
basées sur le même moteur et les mêmes
technologies.

9. Lequel utiliser ?
Pour le moment nous allons partir d’un socle Cordova, car il est plus récent : Version 8.8
En effet PhoneGap profite des update de Cordova, mais parfois avec un petit décalage.
Par la suite libre à vous d’utiliser le framework qui vous convient le mieux.
I - PhoneGap & Cordova

10. II - Les Bases
Pré-requis et logiciels

11. II - Pré-requis et logiciels
PhoneGap / Cordova/ Ionic se basent sur des connaissances clients pour
permettre aux développeurs la construction d’applications mobile sans avoir
de connaissances approfondies en langages natifs.
Avec les langages suivants, le développeur peut très bien développer un
projet mobile à destination d’iOS ou d’Android
Javascript
HTML(HTML5)
CSS(CSS3)
Le JS est une brique très importante pour le développement d’applications
via PhoneGap / Cordova, car l’intégralité des manipulations des connecteurs
clients -> machine vont se faire dans ce langage.

12. II - Pré-requis et logiciels
La pluralité des plateformes nous oblige à utiliser un panel d’IDE pour nos
développements à destination des machines.
Voici le topo:
xCode Eclipse Visual Studio Android studio

13. II - Pré-requis et logiciels
+
+
 Combinaison d’outil afin de rester sur un seul OS
+ =
=
=

14. II - Pré-requis et logiciels
Ma recommandation :
Essayons de couvrir la majorité du parc pour notre cours avec les iPhone et Android,
cela nous permettra de rester sur un seul OS et de minimiser le nombre de nos IDEs.
+
Très souvent on utilise le couple Xcode + Android pour couvrir
l’ensemble des plateformes
+

15. II - Pré-requis et logiciels
Compte développeur :
Ne pas oublier également le compte développeur. Leurs prix varient et leurs droits
également. Par exemple, ils vous faut le compte sur Android juste pour publier, alors que
sur iOS il est utile beaucoup plus tôt.

16. II - Les Bases
Installer son environnement de dev

17. II - Installer son environnement de dev
Installer la JDK
Installer NodeJS
Installer Cordova
Installer SDK Tools
Installer L’AGL (Studio de Développement)
Paramétrage des variables
d’environnement

18. II - Installer son environnement de
dev
Installer la JDK

19. II - Installer son environnement de
dev
Installer NodeJS

20. II - Installer son environnement de
dev
Et PhoneGap/Cordova,
C’est la qu’on va commencer à s’amuser un peu.
Les nouvelles version de PhoneGap (7.xx) /Cordova (8.xx) sont en effet simplifiée par
l’utilisation de commandes qui nous permettent d’optimiser et de grouper nos dossiers /
actions / builds. Ils faut donc installer ces commandes.
1) Avoir au préalable NodeJS installé. Pour pouvoir lancer les commandes de
récupération de package NPM.
http://nodejs.org/
Pourquoi ?
C’est un standard que les grands noms du JS sont en train de mettre en place en
hébergeant sur la même plateforme leurs logiciels et outils, pour rendre leur récupération
plus simple mais également leurs updates/correctifs plus faciles d’accès.

21. II - Installer son environnement de
dev
Installer Le Framework Cordova

22. II - Installer son environnement de Dev
Une fois NodeJS et la commande «npm» installée, nous allons pouvoir récupérer
Cordova simplement, via la commande suivante sur notre Terminal :
$ npm install -g cordova
Rappel et décryptage de cette commande :
npm : c’est notre fameux NodeJS
install : c’est une sous-commande de npm, qui indique que vous voulez installer le logiciel
qui va suivre.
-g : et la globalité des dépendances requises
cordova : le nom du logiciel à installer avec npm. Voici notre cordova !!

23. II - Installer son environnement de
dev
Une fois le chargement terminé, on teste la réactivité de
Cordova
$ cordova
Par la suite, c’est avec cette commande que nous allons créer, modifier nos applications
natives.

24. II - Installer son environnement de dev
Cela semble bon. Nous voilà prêts et armés jusqu’aux dents !

25. Installer SDK Android Tools
II - Installer son environnement de dev

26. Installer SDK Android Tools
II - Installer son environnement de dev

27. Installer Android Studio
II - Installer son environnement de dev

28. Interface Android Studio
II - Installer son environnement de dev

29. II - Installer son environnement de
dev
Valoriser/Vérifier les variables
d’environnement
…;%ANDROID_HOME%tools;%ANDROID_HOME%platform-tools;D:outils_devgradle-4.10.2bin

30. II - Installer son environnement de dev
Pour iOS rien de bien complexe dans
un premier temps :
Téléchargez Xcode, gratuit sur le Mac AppStore.
Et dans second temps faut créer le compte
developpeur en préparant sa carte bleue pour
une centaine de dollars.

31. III - Les mains dans le cambouis
Architecture de base

32. III -Architecture de base
Les applications PhoneGap ont la structure suivante :

33. III – Architecture/Arborscence de base

34. III – Architecture/Arborscence de
base
Cela se traduit par un dossier «client» WWW où vous allez mettre votre code de base.
C’est ici que se situe votre application (avant passage à PhoneGap/Cordova).
On y déposera nos fichiers HTML/CSS/JS.

35. III – Architecture/Arborscence de
base
Description du « config.xml »

36. III - Les mains dans le cambouis
Hello World

37. III - Hello World
Maintenant, au boulot !
Créons notre première app.
Utilisons pour cela la commande «create» de Cordova au sein de notre dossier de travail,
elle fera tout le sale boulot pour nous...
$ cordova create HelloWorld com.example.hello "Hello World"
Et hop, le projet est là. Mais sans les déclinaisons plateformes pour le moment.

38. Note : «cordova prepare»
$ cordova prepare ios
$ cordova prepare android
$ cordova prepare
Si vous modifiez le dossier www de votre projet (vos fichiers html/js/css) il vous faudra
mettre à jour les versions de l’application (-> ios, ->android), pour cela il faut tout
simplement lancer la commande prepare dans le projet.

39. III - Hello World
On fait de même pour Android
$ cordova platform add android

40. III - Hello World
$ cordova build android
Même motif, même punition: 2 solutions pour compiler Android
La commande :
ou Android Studio :

41. III - Hello World
Et pour lancer l’application :
Cela va vous lancer l’app sur l’émulateur intégré, ou si un appareil est connecté, il vous
donnera le choix.

42. III - Les mains dans le cambouis
Etudions tout ça...

43. TP 1 / Installation de l’environnement

44. III - Les mains dans le cambouis
Géolocalisation

45. III - Géolocalisation
Premiers tests, voyons la géolocalisation.
L’idée est d’interroger le smartphone et ses
composants pour avoir la position de l’utilisateur.
navigator.geolocation.getCurrentPosition(geolocationSuccess,
geolocationError,
geolocationOptions);

46. III - Géolocalisation
On va ajouter le plugin cordova nécessaire au fonctionnement
de la géolocation :
$ cordova plugin add cordova-plugin-geolocation
Si vous avez créé toutes les plateformes (ios/android) cela s’appliquera sur l’ensemble
des versions de votre application. Sinon il faudra relancer cette commande.

47. Note : Plugins
Certaines fonctionnalités vous demanderont l’installation de
plugins via le terminal, n’hésitez pas à vérifier la référence
avant d’essayer votre build.
• http://cordova.apache.org/docs/en/3.3.0/guide_cli_index.md.html#The%20Comma
nd- Line%20Interface_advanced_plugin_options
• https://www.tutorialspoint.com/cordova/
$ cordova plugin add cordova-plugin-{plugin}
$ cordova plugin rm cordova-plugin-{plugin}

48. III - Géolocalisation
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
 On commence par rajouter le plugin
NB : le système des permissions Android est très important dans toute application, il
vous sera utile de nombreuses fois de les modifier. Un élément vital d’Android.
Sur Android il faut vérifier que les permissions de l’application sont
suffisantes pour exécuter la fonctionnalité, cela se passe dans
AndroidManifest.
AndroidManifest.xml

49. III – Géolocalisation (Exemple)
1. enableHighAccuracy: Active la
haute précision d’enregistrement de
la position
2. maximumAge : Durée de la
derniere position enregistrée
3. Timeout : durée globale de flicage

50. III – Géolocalisation (Exemple)

51. III - Les mains dans le cambouis
Notifications

52. III – Gestion d’évènements
Pouvoir câbler une action personnalisée lors de la survenue d’un
évènement

53. III – Gestion d’évènements (Exemple)
Pouvoir câbler une action personnalisée lors de la survenue d’un
évènement

54. III – Notifications/Dialogues
Il est possible via PhoneGap / Cordova de lancer en javascript un panel de notifications
machine.
On peut de cette manière alerter l’utilisateur d’un choix avec une popup, un beep, une
vibration etc...
• notification.alert
• notification.confirm
• notification.prompt
• notification.beep
• notification.vibrate

55. III - Notifications
terminal
$ cordova plugin add cordova-plugin-dialogs

56. III – Notifications (Exemple alert)
Index.html Index.js
Index.js

57. III – Notifications (Exemple  confirm)
Index.html Index.js
Index.js

58. III – Notifications (Exemple Prompt)
Index.html Index.js
Index.js

59. III - Camera
Manipulons à présent la caméra.
Le but étant de prendre une photo et de pouvoir
manipuler les données de l’image.
navigator.camera.getPicture(
cameraSuccess,
cameraError,
[ cameraOptions ]
);

60. III – Camera (Exemple)
Index.html Index.js
Index.js
Camera.Destination.TYPE

61. III – Information réseau
Terminal
$ cordova plugin add cordova-plugin-network-information
Objectif : Etre à l’écoute des fluctuations réseaux afin d’y brancher
des actions personnalisées

62. III – Information réseau (exemple)
Index.html Index.js

63. TP 2 / Installation de l’environnement

64. IV – Rappels des API de base et Objets
manipulés

65. JQuery
JAVASCRIPT QUERY

66. Les premiers « Frameworks »
 Comme il était devenu difficile de coder du javascript pour tous les navigateurs,
sont apparus des « Frameworks » permettant une spécification unique,
indépendante du navigateur
 PrototypeJS - www.prototypejs.org
 script.aculo.us
 Mootools - mootools.net
 DoJo Toolkit - www.dojotoolkit.org
 Yahoo UI - developer.yahoo.com/yui/
 ExtJS - www.extjs.com
 UIZE - www.uize.com
66

67. JQuery
 Une bibliothèque javascript open-source et cross-browser
 Elle permet de traverser et manipuler très facilement l'arbre DOM des pages web
à l'aide d'une syntaxe fortement similaire à celle d'XPath.
 JQuery permet par exemple de changer/ajouter une classe CSS, créer des
animations, modifier des attributs, etc.
 Gérer les événements javascript
 Faire des requêtes AJAX simplement
67

68. Ce que jQuery n’est pas
 Un substitut pour apprendre JavaScript
 jQuery est très puissant et très pratique, mais vous devez néanmoins connaitre les
bases de Javascript, notamment la partie “objet” du langage.
 Voir des livres comme :
 “Object Oriented Javascript de Stoyan Stefanov” ou
 “jQuery, novice to ninja” (google est votre ami)
 Une réponse à tout
 Utilisez jQuery uniquement lorsque c’est nécessaire. On commence toujours par
HTML+CSS avant de chercher des plugins jQuery magiques.
 De nombreuses UI sont pures html+CSS

69. Une simple bibliothèque à importer
 Disponible sur le site de Jquery
http://jquery.com/
<script type="text/javascript" src="jquery.js"></script>
 Ou directement sur Google code
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
69

70. La fonction jQuery()
 jQuery repose sur une seule fonction :
jQuery() ou $().
 C’est une fonction JavaScript
 Elle accepte des paramètres
 Elle retourne un objet
$ : Syntaxe issue de « Prototype »
70

71. Selecteur magique : $('anything')
!
 $ accepte un sélecteur CSS en argument
 $ accepte des ID :
 $('#nomID') retourne un élément <->
document.getElementById('nomID')
 $ accepte des classes :
 $('.nomClasse') retourne tous les éléments
qui correspondent à cette classe
 $ accepte plusieurs sélecteurs
 $('.article, .nouvelles, .edito')
71

72. Exemple de manipulation du
DOM
<html>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/lib
s/jquery/1/jquery.min.js">
</script>
<body>
<div id="monDiv">Bonjour</div>
<a href="#"
onClick="$('#monDiv').hide();">
disparition</a>
</body>
</html>
72

73. jQuery: un objet
 les méthodes s'appliquent généralement à tous les éléments sélectionnés
 $('.classe').hide();
 $('.classe').show();
 de nombreuses méthodes utilitaires
 Parcourir le DOM: .parent(), .next(), .children(), .parents()
 Ajouter ou retirer des classes CSS: addClass, removeClass
 Manipuler: append, wrap, prepend
 Intérêt fondamental: la plupart des méthodes de l'objet retourne l'objet
lui-même
 on peut chaîner les appels !
 $('anything').parent().find('still anything').show();
 Cette propriété est extrêmement puissante !
73

74. Enregistrement des listeners jQuery
(Déléguation d’évènements)

75. Enregistrement des listeners jQuery(2)

76. Nombreux exemples interactifs
 Les selecteurs jQuery sont illustrés par de nombreux tutoriaux interactifs, par
exemple :
 Ici : http://www.w3schools.com/jquery/jquery_examples.asp
 Et là : http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery
76

77. Gestion des Timer
 Défintion
 2 fonctions principales
 setTimeout(function, milliseconds)
 setInterval(function, milliseconds)

78. setTimeout : Planification
 function : Fonction à éxécuter au bout
de « milleseconces »
 milleseconds : Temps d’attente en
millisecondes
<button onclick="setTimeout(myFunction, 5000)”>En Attente</button>
<script>
function myFunction() {
alert('Hello ESIC');
}
</script>

79. setTimeout : Destruction
 Stopper un clearTimeout planifié
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

80. setInterval : Planification
 function : Fonction à éxécuter à
intervales de « milleseconces »
 milleseconds : Temps d’attente en
millisecondes avant réexecution
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML =
d.toLocaleTimeString();
}

81. setInterval : Destruction
 Stopper un clearInterval planifié
myVar = setInterval(function, milliseconds);
clearInterval(myVar);

82. Création dynamique de composant
 Génération dynamique de composant HTML
 3 fonctions principales
 document.createElement(nomBalise)
 nomLogiqueCompParent.appendChild(nomLogiqueCompFils)
 document.createTextNode(texteAInserer);
 Ajout toujours possible du code brut HTML
nomLogiqueBalise.innerHTML = “CODE_HTML ICI“;

83. Web Storage

84. Web Storage

91.  Historique
 Comparaison
 Fonctionnement
 Avantages & Inconvénients

98. La fonction $.ajax

99. La fonction $.ajax
(Exemple)

100. Web Service REST
Définition
 Acronyme de REpresentational State Transfert défini dans la thèse de Roy
Fielding en 2000.
 REST n’est pas un protocole ou un format, contrairement à SOAP, HTTP ou
RCP, mais un style d’architecture inspiré de l’architecture du web
fortement basé sur le protocole HTTP
 Il n’est pas dépendant uniquement du web et peut utiliser d’autre
protocoles que HTTP

101. Web Service REST
Ce qu’il est :
 Un système d’architecture
 Une approche pour construire une application
Ce qu’il n’est pas
 Un protocole
 Un format
 Un standard

102. REST  utilisation
 Utiliser dans le développement des applications orientés
ressources (ROA) ou orientées données (DOA)
 Les applications respectant l’architecture REST sont
dites RESTful

103. REST  Statistics
Statistique d’utilisation des services web REST et SOAP chez AMAZON

104. REST  Caractéristiques
 Les services REST sont sans états (Stateless)
 Chaque requête envoyée au serveur doit contenir toutes les
informations relatives à son état et est traitée
indépendamment de toutes autres requêtes
 Minimisation des ressources systèmes (pas de gestion de
session, ni d’état)
 Interface uniforme basée sur les méthodes HTTP (GET,
POST, PUT, DELETE)
 Les architectures RESTful sont construites à partir de
ressources uniquement identifiées par des URI(s)

105. Requêtes REST
 Ressources
 Identifiée par une URI
(http://unice.fr/cursus/master/miage)
 Méthodes (verbes) permettant de manipuler les
ressources (identifiants)
 Méthodes HTTP : GET, POST, PUT, DELETE
 Représentation : Vue sur l’état de la ressource
 Format d’échanges entre le client et le serveur (XML,
JSON, text/plain,…)

106. Ressources
 Une ressource est un objet identifiable sur le système
 Livre, Catégorie, Client, Prêt
Une ressources n’est pas forcément un objet matérialisé
(Prêt, Consultation, Facture…)
 Une ressource est identifiée par une URI : Une URI
identifie uniquement une ressource sur le système 
une ressource peut avoir plusieurs identifiants
 http://ntdp.miage.fr/bookstore/books/1
Clef primaire de la
ressource dans la
BDD

107. Methodes (Verbes)
 Une ressource peut subir quatre opérations de bases
CRUD correspondant aux quatre principaux types de
requêtes HTTP (GET, PUT, POST, DELETE)
 REST s’appuie sur le protocole HTTP pour effectuer ces
opérations sur les objets
 CREATE  POST
 RETRIEVE  GET
 UPDATE  PUT
 DELETE  DELETE

108. Méthode GET
 La méthode GET renvoie une représentation de la
ressource telle qu’elle est sur le système
Client Serveur
GET: http://ntdp.miage.fr/bookstore/books/1
Statut : 200
Message : OK
En-tête : ….
Représentation : XML, JSON, html,…

109. Méthode POST
 La méthode POST crée une nouvelle ressource sur le
système
Client Serveur
POST: http://ntdp.miage.fr/bookstore/books
Corps de la requête
Représentation : XML, JSON, html,…
Statut : 201, 204
Message : Create, No content
En-tête : …..

110. Méthode DELETE
 Supprime la ressource identifiée par l’URI sur le serveur
Client Serveur
DELETE: http://ntdp.miage.fr/bookstore/books/1
Statut : 200
Message : OK
En-tête : …..
Identifiant de la
ressource sur le
serveur

111. Méthode PUT
 Mise à jour de la ressource sur le système
Client Serveur
PUT: http://ntdp.miage.fr/bookstore/books/1
Statut : 200
Message : OK
En-tête : …..
Identifiant de la
ressource sur le
serveur
En-tête : …..
Corps de la requête : XML, JSON,…

112. Représentation
Une représentation désigne les données échangées entre le
client et le serveur pour une ressource:
 HTTP GET  Le serveur renvoie au client l’état de la
ressource
 PUT, POST  Le client envoie l’état d’une ressource au
serveur
Peut être sous différents formats :
 JSON
 XML
 XHTML
 CSV
 Text/plain
 …..

113. JSON
JSON « JavaScript Obect Notation » est un format
d’échange de données, facile à lire par un humain et
interpréter par une machine.
Basé sur JavaScript, il est complètement indépendant des
langages de programmation mais utilise des conventions qui
sont communes à tous les langages de programmation (C,
C++, Perl, Python, Java, C#, VB, JavaScript,….)
Deux structures :
 Une collection de clefs/valeurs  Object
 Une collection ordonnée d’objets  Array

114. JSON
Objet
Commence par un « { » et se termine par « } » et composé
d’une liste non ordonnée de paire clefs/valeurs. Une clef
est suivie de « : » et les paires clef/valeur sont séparés par
« , »
{ "id": 51,
"nom": "Mathematiques 1",
"resume": "Resume of math ",
"isbn": "123654",
"categorie":
{
"id": 2, "nom": "Mathematiques",
"description": "Description of
mathematiques "
},
"quantite": 42,
"photo": ""
}
Objet

115. JSON
ARRAY
Liste ordonnée d’objets commençant par « [« et se terminant par « ] », les
objets sont séparés l’un de l’autre par « , ».
[
{ "id": 51,
"nom": "Mathematiques 1",
"resume": "Resume of math ",
"isbn": "123654",
"quantite": 42,
"photo": ""
},
{ "id": 102,
"nom": "Mathematiques 1",
"resume": "Resume of math ",
"isbn": "12365444455",
"quantite": 42,
"photo": ""
}
]
Objet

116. JSON
Value
Un objet peut être soit un string entre « ""» ou un nombre
(entier, décimal) ou un boolean (true, false) ou null ou un
objet.
value

117. JWT : JSON WEB TOKEN
 Standard ouvert qui définit une méthode compacte et
autonome pour la transmission sécurisée d’information
entre des parties

118. JWT : Principe de fonctionnement

119. JWT : Caractéristiques

120. JWT : Exemple