Phonegap

1,656 views

Published on

Présentation de PhoneGap lors des Human Talks de Grenoble le 12 février 2013

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,656
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Phonegap

  1. 1. PhoneGapJulien RocheHuman 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 Mobile2
  3. 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 ?4
  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émentaires5
  6. 6. Analyser à distance votre application: Weinre6
  7. 7. PhoneGap dans le Cloud7
  8. 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 mobiles9
  10. 10. Les plateformes mobiles cibléesEnviron95% dumarché10
  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 W3C11
  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.12
  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 Plugins PhoneGap PhoneGap Plugins custom pour Moteur PhoneGap PhoneGap13
  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ût14
  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 fluide15
  16. 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 lapplication ?", function(){ navigator.app.exitApp(); }, "Quitter l’application", "Quitter", "Annuler" ); } else { navigator.app.backHistory(); } }, false); }, false);17
  18. 18. Merci !

×