PhoneGap est une solution innovante pour créer des applications mobiles multi-plateformes en utilisant des technologies web comme HTML5, CSS3 et JavaScript. Il permet d'accéder à des fonctionnalités natives du mobile via une API JavaScript et de concevoir des plugins pour améliorer ses capacités. Cependant, il a des limitations comme une performance inférieure aux applications natives et ne compile pas directement le JavaScript en code natif.

1. PhoneGap
Julien Roche
Human Talks Grenoble – le 12/02/2013

2. 2
Speaker
 Julien Roche @rochejul
 Ingénieur d’étude et formateur sur Java, Web et Web
Mobile pour Objet Direct
 Ancien commiter du projet OpenSource “wiQuery”
 Expérience Web Mobile depuis 3 ans
 Auteur de formations sur HTML5 et le Web Mobile
 Référant HTML5 et Web Mobile

3. Tout d’abord …

4. 4
… une mise au point
 Si vous vous êtes penchés sur la question, vous avez dû
entendre parler de:
 Quelle est la différence ?

5. 5
Si nous devions faire une analogie
Cordova est pour PhoneGap ce que Webkit est pour Chrome
Autrement dit, PhoneGap se repose sur Cordova, mais offre
des services supplémentaires

6. 6
Analyser à distance votre application:
Weinre

7. 7
PhoneGap dans le Cloud

8. Et maintenant …

9. 9
… qu’est-ce que PhoneGap ?
 PhoneGap est une solution innovante pour
rendre ses solutions multi-plateformes
 Son approche:
●Ecrire son application avec les standards du
Web, comme HTML5, CSS3, JavaScripts
●Utiliser l’enveloppe native PhoneGap qui nous
intéresse
●Déployer l’application native sur le market
dédié
 Ainsi, nous avons une application réalisée
par les technologies du Web mais qui
s’installent de façon native sur les mobiles

10. 10
Les plateformes mobiles ciblées
Environ
95% du
marché

11. 11
Mais c’est plus que ça !
 PhoneGap offre également une API
JavaScript pour nous faciliter l’accès aux
couches basses !
 Ainsi, nous pouvons accéder à plus de
services que nous pourrions avoir avec un
site Web classique
 Nous pouvons par exemple:
●Accéder aux contacts
●Accéder aux notifications
●Accéder à l’état du réseau
●Manipuler le splashscreen
 Le tout se reposant le plus souvent sur les
spécifications du W3C

12. 12
Attention, ce n’est pas de la magie !
 PhoneGap vous fournit des wrapper natifs et un
accès aux couches basses, MAIS:
●Il y a une manière de déclarer votre JavaScript à
respecter
●Il faut maîtriser les outils des différentes plateformes !
●Il faut connaitre les finesses des différentes
plateformes !
●Contrairement à Titanium, il n’y a pas de frameworks
d’IHM. Cela implique que nous devons en choisir un.
Ce qui est à la fois un plus et un moins.

13. 13
Les plugins
 PhoneGap a été conçu également pour pouvoir concevoir
des plugins
 Ces derniers ont pour objectif de pallier à certains
manques de l’API de base
 Ainsi, si nous voulons accéder à des couches basses
spécifiques de notre mobile, cela est tout à fait possible et
surtout normalisée
Application Web Mobile
API JavaScript
PhoneGap
Plugins
PhoneGap
Moteur PhoneGap
Plugins custom pour
PhoneGap

14. 14
Au final, PhoneGap …
 Permet de créer des applications Web mobile hybride
 Permet de mutualiser du code, en utilisant JavaScript
 Permet de communiquer avec une partie des services du
smartphone
 Permet de packager le code dans des applications natives
déploiables dans les stores
 Permet de créer des applications mutli-plateformes mobile
à moindre coût

15. 15
Ce que ne fait pas PhoneGap
 PhoneGap ne compile pas le JavaScript en code natif
 PhoneGap n’offre pas une ergonomie se calquant sur celui
du smartphone
 PhoneGap ne permet pas de coder entièrement en
JavaScript
●Selon ce que vous souhaitez, il faudra faire des plugins
 Les applications PhoneGap seront toujours plus lentes que
les applications natives
●Les animations par exemple seront souvent moins fluide

16. Et pour finir un peu de code

17. 17
Mon premier code
 Faisons une action simple sur Android: quitter l’application
si nécessaire sur le bouton back:
document.addEventListener("deviceready", function(){
// Listen the back button (only on Android)
document.addEventListener("backbutton", function(event){
if(aConditionToDefine)){
event.preventDefault();
navigator.notification.alert(
"Souhaitez quitter l'application ?",
function(){ navigator.app.exitApp(); },
"Quitter l’application",
"Quitter",
"Annuler"
);
}
else {
navigator.app.backHistory();
}
}, false);
}, false);

18. Merci !