SlideShare une entreprise Scribd logo
Christophe ZOME
Architecte Solution
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
Architecture globale cible
• JPA
• Hibernate
• JDBC
• Spring
Core
• EJB
?
I - Généralités C’est quoi PhoneGap ?
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.
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.
I - Généralités PhoneGap & Cordova
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.
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
II - Les Bases
Pré-requis et logiciels
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.
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
II - Pré-requis et logiciels
+
+
 Combinaison d’outil afin de rester sur un seul OS
+ =
=
=
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
+
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.
II - Les Bases
Installer son environnement de dev
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
II - Installer son environnement de
dev
Installer la JDK
II - Installer son environnement de
dev
Installer NodeJS
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.
II - Installer son environnement de
dev
Installer Le Framework Cordova
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 !!
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.
II - Installer son environnement de dev
Cela semble bon. Nous voilà prêts et armés jusqu’aux dents !
Installer SDK Android Tools
II - Installer son environnement de dev
Installer SDK Android Tools
II - Installer son environnement de dev
Installer Android Studio
II - Installer son environnement de dev
Interface Android Studio
II - Installer son environnement de dev
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
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.
III - Les mains dans le cambouis
Architecture de base
III -Architecture de base
Les applications PhoneGap ont la structure suivante :
III – Architecture/Arborscence de base
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.
III – Architecture/Arborscence de
base
Description du « config.xml »
III - Les mains dans le cambouis
Hello World
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.
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.
III - Hello World
On fait de même pour Android
$ cordova platform add android
III - Hello World
$ cordova build android
Même motif, même punition: 2 solutions pour compiler Android
La commande :
ou Android Studio :
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.
III - Les mains dans le cambouis
Etudions tout ça...
TP 1 / Installation de l’environnement
III - Les mains dans le cambouis
Géolocalisation
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);
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.
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}
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
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
III – Géolocalisation (Exemple)
III - Les mains dans le cambouis
Notifications
III – Gestion d’évènements
Pouvoir câbler une action personnalisée lors de la survenue d’un
évènement
III – Gestion d’évènements (Exemple)
Pouvoir câbler une action personnalisée lors de la survenue d’un
évènement
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
III - Notifications
terminal
$ cordova plugin add cordova-plugin-dialogs
III – Notifications (Exemple alert)
Index.html Index.js
Index.js
III – Notifications (Exemple  confirm)
Index.html Index.js
Index.js
III – Notifications (Exemple Prompt)
Index.html Index.js
Index.js
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 ]
);
III – Camera (Exemple)
Index.html Index.js
Index.js
Camera.Destination.TYPE
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
III – Information réseau (exemple)
Index.html Index.js
TP 2 / Installation de l’environnement
IV – Rappels des API de base et Objets
manipulés
JQuery
JAVASCRIPT QUERY
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
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
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
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
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
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
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
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
Enregistrement des listeners jQuery
(Déléguation d’évènements)
Enregistrement des listeners jQuery(2)
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
Gestion des Timer
 Défintion
 2 fonctions principales
 setTimeout(function, milliseconds)
 setInterval(function, milliseconds)
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>
setTimeout : Destruction
 Stopper un clearTimeout planifié
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
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();
}
setInterval : Destruction
 Stopper un clearInterval planifié
myVar = setInterval(function, milliseconds);
clearInterval(myVar);
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“;
Web Storage
Web Storage
 Historique
 Comparaison
 Fonctionnement
 Avantages & Inconvénients
La fonction $.ajax
La fonction $.ajax
(Exemple)
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
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
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
REST  Statistics
Statistique d’utilisation des services web REST et SOAP chez AMAZON
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)
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,…)
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
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
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,…
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 : …..
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
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,…
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
 …..
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
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
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
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
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
JWT : Principe de fonctionnement
JWT : Caractéristiques
JWT : Exemple

Contenu connexe

Tendances

Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013
jeromevdl
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
ENSET, Université Hassan II Casablanca
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
maru.maru
 
Panorama des solutions mobile hybrides
Panorama des solutions mobile hybridesPanorama des solutions mobile hybrides
Panorama des solutions mobile hybrides
ekino
 
In01 - Programmation Android - 01 - introduction
In01 - Programmation Android - 01 - introductionIn01 - Programmation Android - 01 - introduction
In01 - Programmation Android - 01 - introduction
Yann Caron
 
Introduction àJava
Introduction àJavaIntroduction àJava
Introduction àJava
Christophe Vaudry
 
Native script
Native scriptNative script
Native script
Neticoa Sénégal
 
GWT Approfondissement - GTI780 & MTI780 - ETS - A09
GWT Approfondissement  - GTI780 & MTI780 - ETS - A09GWT Approfondissement  - GTI780 & MTI780 - ETS - A09
GWT Approfondissement - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
Java & Etat de l'art
Java & Etat de l'artJava & Etat de l'art
Java & Etat de l'art
Ines Ouaz
 
Booster votre application Windows Phone 8
Booster votre application Windows Phone 8Booster votre application Windows Phone 8
Booster votre application Windows Phone 8
Microsoft
 
Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014
Ippon
 
Introduction à Google Web Toolkit (GWT) - Philippe Kernevez - February 2009
Introduction à Google Web Toolkit (GWT) - Philippe Kernevez - February 2009Introduction à Google Web Toolkit (GWT) - Philippe Kernevez - February 2009
Introduction à Google Web Toolkit (GWT) - Philippe Kernevez - February 2009
JUG Lausanne
 
Formation gwt
Formation gwtFormation gwt
Formation gwt
Francois ANDRE
 
Android wear
Android wearAndroid wear
Android wear
Houssem Lahiani
 
"Introduction aux Developements iOS" in Three hours
"Introduction aux Developements iOS" in Three hours"Introduction aux Developements iOS" in Three hours
"Introduction aux Developements iOS" in Three hours
Laurent MEURISSE
 
Devops for mobile iOS/Android
Devops for mobile iOS/AndroidDevops for mobile iOS/Android
Devops for mobile iOS/Android
Cedric Gatay
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
Microsoft
 
Développement Android
Développement AndroidDéveloppement Android
Développement Android
Franck SIMON
 

Tendances (20)

Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
 
Panorama des solutions mobile hybrides
Panorama des solutions mobile hybridesPanorama des solutions mobile hybrides
Panorama des solutions mobile hybrides
 
In01 - Programmation Android - 01 - introduction
In01 - Programmation Android - 01 - introductionIn01 - Programmation Android - 01 - introduction
In01 - Programmation Android - 01 - introduction
 
Cours Android
Cours AndroidCours Android
Cours Android
 
Introduction àJava
Introduction àJavaIntroduction àJava
Introduction àJava
 
Native script
Native scriptNative script
Native script
 
GWT Approfondissement - GTI780 & MTI780 - ETS - A09
GWT Approfondissement  - GTI780 & MTI780 - ETS - A09GWT Approfondissement  - GTI780 & MTI780 - ETS - A09
GWT Approfondissement - GTI780 & MTI780 - ETS - A09
 
Java & Etat de l'art
Java & Etat de l'artJava & Etat de l'art
Java & Etat de l'art
 
Booster votre application Windows Phone 8
Booster votre application Windows Phone 8Booster votre application Windows Phone 8
Booster votre application Windows Phone 8
 
Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014
 
Introduction à Google Web Toolkit (GWT) - Philippe Kernevez - February 2009
Introduction à Google Web Toolkit (GWT) - Philippe Kernevez - February 2009Introduction à Google Web Toolkit (GWT) - Philippe Kernevez - February 2009
Introduction à Google Web Toolkit (GWT) - Philippe Kernevez - February 2009
 
Formation gwt
Formation gwtFormation gwt
Formation gwt
 
Android wear
Android wearAndroid wear
Android wear
 
"Introduction aux Developements iOS" in Three hours
"Introduction aux Developements iOS" in Three hours"Introduction aux Developements iOS" in Three hours
"Introduction aux Developements iOS" in Three hours
 
Devops for mobile iOS/Android
Devops for mobile iOS/AndroidDevops for mobile iOS/Android
Devops for mobile iOS/Android
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
 
Développement Android
Développement AndroidDéveloppement Android
Développement Android
 
Sonar-Hodson-Maven
Sonar-Hodson-MavenSonar-Hodson-Maven
Sonar-Hodson-Maven
 

Similaire à Cours cordova & REST

Développer des applications mobiles avec phonegap
Développer des applications mobiles avec phonegapDévelopper des applications mobiles avec phonegap
Développer des applications mobiles avec phonegap
Makina Corpus
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
VISEO
 
Coder sans coder : Delphi en mode no code !
Coder sans coder : Delphi en mode no code !Coder sans coder : Delphi en mode no code !
Coder sans coder : Delphi en mode no code !
pprem
 
Ionic
IonicIonic
Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogySacha Leprêtre
 
Docker le buzz est il justifié ?
Docker le buzz est il justifié ? Docker le buzz est il justifié ?
Docker le buzz est il justifié ?
Romain Chalumeau
 
Faire des applications web avec Delphi
Faire des applications web avec DelphiFaire des applications web avec Delphi
Faire des applications web avec Delphi
pprem
 
Introduction a Flutter
Introduction a FlutterIntroduction a Flutter
Introduction a Flutter
Christian SUMBANG
 
Publier une application mobile en un clic
Publier une application mobile en un clicPublier une application mobile en un clic
Publier une application mobile en un clic
Fabernovel
 
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKit
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKitConstruire une Application Mobile en 30 minutes avec le plugin WP-AppKit
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKit
uncatcrea
 
CodeBuilder_DevOpsCenter.pptx
CodeBuilder_DevOpsCenter.pptxCodeBuilder_DevOpsCenter.pptx
CodeBuilder_DevOpsCenter.pptx
ThomasParaiso1
 
Prérequis au développement google android
Prérequis au développement google androidPrérequis au développement google android
Prérequis au développement google android
Thierry Gayet
 
Actionscript: du web au mobile
Actionscript: du web au mobileActionscript: du web au mobile
Actionscript: du web au mobile
Martin Arvisais
 
Hello droid
Hello droidHello droid
Hello droid
Wiki Info Systeme
 
Calculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stackCalculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stack
Calculus System SARL
 
Calculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stackCalculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stack
Calculus System SARL
 
La Rochelle workshop 2016
La Rochelle workshop 2016La Rochelle workshop 2016
La Rochelle workshop 2016
Christian Brousseau
 
1-android.pdf
1-android.pdf1-android.pdf
1-android.pdf
FethiBenYahia1
 
Demarrer ionic en 5 etape
Demarrer ionic en 5 etapeDemarrer ionic en 5 etape
Demarrer ionic en 5 etape
Zaïd BOUDAMOUZ
 

Similaire à Cours cordova & REST (20)

Développer des applications mobiles avec phonegap
Développer des applications mobiles avec phonegapDévelopper des applications mobiles avec phonegap
Développer des applications mobiles avec phonegap
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
 
Coder sans coder : Delphi en mode no code !
Coder sans coder : Delphi en mode no code !Coder sans coder : Delphi en mode no code !
Coder sans coder : Delphi en mode no code !
 
Meetup sencha
Meetup senchaMeetup sencha
Meetup sencha
 
Ionic
IonicIonic
Ionic
 
Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogy
 
Docker le buzz est il justifié ?
Docker le buzz est il justifié ? Docker le buzz est il justifié ?
Docker le buzz est il justifié ?
 
Faire des applications web avec Delphi
Faire des applications web avec DelphiFaire des applications web avec Delphi
Faire des applications web avec Delphi
 
Introduction a Flutter
Introduction a FlutterIntroduction a Flutter
Introduction a Flutter
 
Publier une application mobile en un clic
Publier une application mobile en un clicPublier une application mobile en un clic
Publier une application mobile en un clic
 
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKit
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKitConstruire une Application Mobile en 30 minutes avec le plugin WP-AppKit
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKit
 
CodeBuilder_DevOpsCenter.pptx
CodeBuilder_DevOpsCenter.pptxCodeBuilder_DevOpsCenter.pptx
CodeBuilder_DevOpsCenter.pptx
 
Prérequis au développement google android
Prérequis au développement google androidPrérequis au développement google android
Prérequis au développement google android
 
Actionscript: du web au mobile
Actionscript: du web au mobileActionscript: du web au mobile
Actionscript: du web au mobile
 
Hello droid
Hello droidHello droid
Hello droid
 
Calculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stackCalculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stack
 
Calculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stackCalculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stack
 
La Rochelle workshop 2016
La Rochelle workshop 2016La Rochelle workshop 2016
La Rochelle workshop 2016
 
1-android.pdf
1-android.pdf1-android.pdf
1-android.pdf
 
Demarrer ionic en 5 etape
Demarrer ionic en 5 etapeDemarrer ionic en 5 etape
Demarrer ionic en 5 etape
 

Dernier

02_UMT STAR_un nouveau biomarqueur de résilience basé sur les métabolites du ...
02_UMT STAR_un nouveau biomarqueur de résilience basé sur les métabolites du ...02_UMT STAR_un nouveau biomarqueur de résilience basé sur les métabolites du ...
02_UMT STAR_un nouveau biomarqueur de résilience basé sur les métabolites du ...
Institut de l'Elevage - Idele
 
03_UMT STAR_compromis entre résistance au parasitisme et efficience alimentai...
03_UMT STAR_compromis entre résistance au parasitisme et efficience alimentai...03_UMT STAR_compromis entre résistance au parasitisme et efficience alimentai...
03_UMT STAR_compromis entre résistance au parasitisme et efficience alimentai...
Institut de l'Elevage - Idele
 
PROVINLAIT - Bâtiment et bien-être estival
PROVINLAIT - Bâtiment et bien-être estivalPROVINLAIT - Bâtiment et bien-être estival
PROVINLAIT - Bâtiment et bien-être estival
idelewebmestre
 
Rénovation des prairies sans labour est-ce possible en bio.pdf
Rénovation des prairies sans labour est-ce possible en bio.pdfRénovation des prairies sans labour est-ce possible en bio.pdf
Rénovation des prairies sans labour est-ce possible en bio.pdf
idelewebmestre
 
QCM de révision pour la haute qualité.pdf
QCM de révision pour la haute qualité.pdfQCM de révision pour la haute qualité.pdf
QCM de révision pour la haute qualité.pdf
ffffourissou
 
Note Agro-climatique et prairies n°4 - Juin 2024
Note Agro-climatique et prairies n°4 - Juin 2024Note Agro-climatique et prairies n°4 - Juin 2024
Note Agro-climatique et prairies n°4 - Juin 2024
idelewebmestre
 
01_UMT STAR_étude de la résilience et des compromis entre résilience et effic...
01_UMT STAR_étude de la résilience et des compromis entre résilience et effic...01_UMT STAR_étude de la résilience et des compromis entre résilience et effic...
01_UMT STAR_étude de la résilience et des compromis entre résilience et effic...
Institut de l'Elevage - Idele
 
Alternative - Complément au Tramway et 3ème lien de la ville de Québec
Alternative - Complément  au Tramway et 3ème lien de la ville de Québec  Alternative - Complément  au Tramway et 3ème lien de la ville de Québec
Alternative - Complément au Tramway et 3ème lien de la ville de Québec
Daniel Bedard
 
04_UMT STAR_Étude de nouveaux caractères en lien avec la santé et le bien-êtr...
04_UMT STAR_Étude de nouveaux caractères en lien avec la santé et le bien-êtr...04_UMT STAR_Étude de nouveaux caractères en lien avec la santé et le bien-êtr...
04_UMT STAR_Étude de nouveaux caractères en lien avec la santé et le bien-êtr...
Institut de l'Elevage - Idele
 
Alternative - Complément au Tramway et 3 ème lien de la ville de Quebec (PDF)
Alternative - Complément au Tramway  et 3 ème lien de la ville de Quebec (PDF)Alternative - Complément au Tramway  et 3 ème lien de la ville de Quebec (PDF)
Alternative - Complément au Tramway et 3 ème lien de la ville de Quebec (PDF)
Daniel Bedard
 
05_UMT STAR_Vers une indexation de la longévité fonctionnelle en ovin lait
05_UMT STAR_Vers une indexation de la longévité fonctionnelle en ovin lait05_UMT STAR_Vers une indexation de la longévité fonctionnelle en ovin lait
05_UMT STAR_Vers une indexation de la longévité fonctionnelle en ovin lait
Institut de l'Elevage - Idele
 

Dernier (11)

02_UMT STAR_un nouveau biomarqueur de résilience basé sur les métabolites du ...
02_UMT STAR_un nouveau biomarqueur de résilience basé sur les métabolites du ...02_UMT STAR_un nouveau biomarqueur de résilience basé sur les métabolites du ...
02_UMT STAR_un nouveau biomarqueur de résilience basé sur les métabolites du ...
 
03_UMT STAR_compromis entre résistance au parasitisme et efficience alimentai...
03_UMT STAR_compromis entre résistance au parasitisme et efficience alimentai...03_UMT STAR_compromis entre résistance au parasitisme et efficience alimentai...
03_UMT STAR_compromis entre résistance au parasitisme et efficience alimentai...
 
PROVINLAIT - Bâtiment et bien-être estival
PROVINLAIT - Bâtiment et bien-être estivalPROVINLAIT - Bâtiment et bien-être estival
PROVINLAIT - Bâtiment et bien-être estival
 
Rénovation des prairies sans labour est-ce possible en bio.pdf
Rénovation des prairies sans labour est-ce possible en bio.pdfRénovation des prairies sans labour est-ce possible en bio.pdf
Rénovation des prairies sans labour est-ce possible en bio.pdf
 
QCM de révision pour la haute qualité.pdf
QCM de révision pour la haute qualité.pdfQCM de révision pour la haute qualité.pdf
QCM de révision pour la haute qualité.pdf
 
Note Agro-climatique et prairies n°4 - Juin 2024
Note Agro-climatique et prairies n°4 - Juin 2024Note Agro-climatique et prairies n°4 - Juin 2024
Note Agro-climatique et prairies n°4 - Juin 2024
 
01_UMT STAR_étude de la résilience et des compromis entre résilience et effic...
01_UMT STAR_étude de la résilience et des compromis entre résilience et effic...01_UMT STAR_étude de la résilience et des compromis entre résilience et effic...
01_UMT STAR_étude de la résilience et des compromis entre résilience et effic...
 
Alternative - Complément au Tramway et 3ème lien de la ville de Québec
Alternative - Complément  au Tramway et 3ème lien de la ville de Québec  Alternative - Complément  au Tramway et 3ème lien de la ville de Québec
Alternative - Complément au Tramway et 3ème lien de la ville de Québec
 
04_UMT STAR_Étude de nouveaux caractères en lien avec la santé et le bien-êtr...
04_UMT STAR_Étude de nouveaux caractères en lien avec la santé et le bien-êtr...04_UMT STAR_Étude de nouveaux caractères en lien avec la santé et le bien-êtr...
04_UMT STAR_Étude de nouveaux caractères en lien avec la santé et le bien-êtr...
 
Alternative - Complément au Tramway et 3 ème lien de la ville de Quebec (PDF)
Alternative - Complément au Tramway  et 3 ème lien de la ville de Quebec (PDF)Alternative - Complément au Tramway  et 3 ème lien de la ville de Quebec (PDF)
Alternative - Complément au Tramway et 3 ème lien de la ville de Quebec (PDF)
 
05_UMT STAR_Vers une indexation de la longévité fonctionnelle en ovin lait
05_UMT STAR_Vers une indexation de la longévité fonctionnelle en ovin lait05_UMT STAR_Vers une indexation de la longévité fonctionnelle en ovin lait
05_UMT STAR_Vers une indexation de la longévité fonctionnelle en ovin lait
 

Cours cordova & REST

  • 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 :
  • 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
  • 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
  • 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)
  • 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“;
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.  Historique  Comparaison  Fonctionnement  Avantages & Inconvénients
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 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