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
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.
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
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 !
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
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.
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...
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
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
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
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
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>
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();
}
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“;
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
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