Gtug2 Mobile app with web technlogy

1,537 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,537
On SlideShare
0
From Embeds
0
Number of Embeds
506
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Gtug2 Mobile app with web technlogy

  1. 1. Principes de dév web d’applications mobile JqueryMobile et GWTMobile essais et retours d’expérience Montréal #2 @gtugmontreal https://groups.google.com/group/gtug-montreal Sacha Leprêtre 14 Septembre 2011
  2. 2. Stratégies de développements <ul><ul><li>Pur natif (sdk android) </li></ul></ul><ul><ul><ul><li>Avec SDK </li></ul></ul></ul><ul><ul><ul><li>Avec NDK </li></ul></ul></ul><ul><ul><li>Pur web (dans le navigateur) </li></ul></ul><ul><ul><li>App locale sans navigateur mais web </li></ul></ul><ul><ul><li>Autres: </li></ul></ul><ul><ul><ul><li>Combinaisons possibles…, mécanisme d’extensions </li></ul></ul></ul><ul><ul><ul><li>Meta langages… </li></ul></ul></ul>
  3. 3. Possibilités App natif App web Extensions
  4. 4. Webkit ? <ul><ul><li>Webkit ? </li></ul></ul><ul><ul><li>HTML5 ? </li></ul></ul><ul><ul><li>Webview ? </li></ul></ul>ARM Dalvik VM Webkit HTML JS CSS
  5. 5. Outils de développement <ul><ul><li>Eclipse </li></ul></ul><ul><ul><ul><li>(svn, androidsdk…) </li></ul></ul></ul><ul><ul><li>Chrome </li></ul></ul><ul><ul><ul><li>Inspection de DOM </li></ul></ul></ul><ul><ul><ul><li>Debug js </li></ul></ul></ul><ul><ul><ul><li>WebSQL </li></ul></ul></ul><ul><ul><ul><li>Extension chrome: Window resizer </li></ul></ul></ul><ul><ul><li>Lita (SQLLite client) </li></ul></ul><ul><ul><li>LA TABLETTE ou le smartphone! Pas l’émulateur… </li></ul></ul><ul><ul><li>ADB </li></ul></ul><ul><ul><ul><li>Console.log </li></ul></ul></ul><ul><ul><ul><li>SQL </li></ul></ul></ul><ul><ul><li>App: Astro filemanager </li></ul></ul>
  6. 6. Pile technologique présentées <ul><ul><li>Application </li></ul></ul><ul><ul><ul><li>Webview: Phonegap </li></ul></ul></ul><ul><ul><li>Language </li></ul></ul><ul><ul><ul><li>Javascript: (pur, Jquery…) ou Java->Javascript (GWT) </li></ul></ul></ul><ul><ul><li>Layout </li></ul></ul><ul><ul><ul><li>HTML,CSS,Javascript: JqueryMobile, GWTMobile </li></ul></ul></ul><ul><ul><li>Stockage </li></ul></ul><ul><ul><ul><li>HTML5 websql: persistencejs </li></ul></ul></ul><ul><ul><ul><li>Fichier: Phonegap </li></ul></ul></ul>
  7. 7. Dev dans le navigateur CHROME
  8. 8. Phonegap
  9. 9. Phonegap <ul><li>Eclipse, Installer Android SDK et Android Eclipse Plugin </li></ul><ul><li>Faire un projet Android </li></ul><ul><li>Déposer phonegap.js et librairie phonegap.jar </li></ul>
  10. 10. Parlons de stockage (offline)
  11. 11. Persistence.js <ul><ul><li>http://persistencejs.org/ </li></ul></ul><ul><ul><li>ORM </li></ul></ul><ul><ul><li>pas d’écriture de SQL ! </li></ul></ul><ul><ul><li>Couche d abstraction extensible selon l’évolution de la norme HTML5: </li></ul></ul><ul><ul><ul><li>WEBSQL </li></ul></ul></ul><ul><ul><ul><li>LocalStorage </li></ul></ul></ul><ul><ul><ul><li>IndexedDB </li></ul></ul></ul>
  12. 12. Persistence.js <ul><li>Définition des entités: </li></ul><ul><li>Optimiser (index et dénormalization) </li></ul><ul><li>mettre en relation </li></ul>Persistence.js
  13. 13. Persistence.js <ul><li>Requêtes ! </li></ul>
  14. 14. <ul><li>Log SQL pour webSQL ! </li></ul><ul><li>CHROME ! Ou FF </li></ul>Persistence.js
  15. 15. <ul><li>SQLLite client permet d’acceder à la BD de CHROME ! </li></ul>LITA HTML5 storage !
  16. 16. Parlons de JqueryMobile
  17. 17. JqueryMobile <ul><ul><li>http://jquerymobile.com/demos/1.0a4.1/ </li></ul></ul><ul><ul><li>Un language visuel pour l’utilisateur </li></ul></ul>
  18. 18. JqueryMobile: Principes <ul><li>Votre code : Page html </li></ul><ul><li>Balise HTML </li></ul><ul><li>Balises JQM </li></ul>Page html enrichie (DOM mémoire) Processeur Jquery.js+JQM.js
  19. 19. Parlons de GWTMobile
  20. 20. Intérêts <ul><li>GWT </li></ul><ul><li>Mobile </li></ul><ul><li>Application </li></ul><ul><li>et… architecture </li></ul>
  21. 21. GWT Mobile UI: les widgets Un langage visuel <ul><li>Webkit (Android,IOS,Chrome,Safari…) </li></ul><ul><li>Un langage visuel pour l’utilisateur </li></ul><ul><li>Démo: http://www.ambigtion.com/gwtmobileui/ </li></ul><ul><li>Approches visuelles similaires : </li></ul><ul><ul><li>Jquerymobile.com alpha 4 </li></ul></ul><ul><ul><li>Dojomobile </li></ul></ul><ul><li>Forces/faiblesses </li></ul><ul><li>de GWT Mobile UI ? </li></ul>
  22. 22. Code: env <ul><li>Env </li></ul><ul><ul><li>Eclipse + GWT Eclipse plugin </li></ul></ul><ul><ul><li>GWT Mobile UI </li></ul></ul><ul><ul><li>Lancement de Kitchensink (palette de widgets) </li></ul></ul>
  23. 23. Code: Principes et architecture
  24. 24. Code: Principes et architecture <ul><li>Mécanisme de « Page » ;-) : </li></ul><ul><ul><li>Faire la vue UIbinder de la Page: </li></ul></ul><ul><ul><ul><li>MainPage.ui.xml </li></ul></ul></ul><ul><ul><ul><li>Rapide avec le GWT dev mode ! </li></ul></ul></ul>
  25. 25. Code: Principes et architecture <ul><li>Mécanisme de « Page » ;-) : </li></ul><ul><ul><li>Désigner la logique associé à la page: </li></ul></ul><ul><ul><ul><li>MainPage.java: Étendre Page </li></ul></ul></ul><ul><ul><ul><li>MainPage.java: Définir logique suivante et routage…goto(…) </li></ul></ul></ul><ul><ul><ul><li>Back géré </li></ul></ul></ul>
  26. 26. Code: Principes et architecture <ul><li>Mécanisme de « Page » ;-) : </li></ul><ul><ul><li>Autres pages… </li></ul></ul><ul><ul><li>Page est un concept </li></ul></ul><ul><ul><li>Non MVP </li></ul></ul><ul><ul><li>Principe d’architecture simple </li></ul></ul>
  27. 27. GWT Mobile phonegap <ul><li>Un wrapper javascript de phonegap </li></ul><ul><li>Phonegap ? </li></ul>
  28. 28. Quoi d’autre… <ul><li>Dev nouveau( jan 2011) </li></ul><ul><li>Message de Denis: « Hi GTUG Montreal, GWT Mobile welcomes their participation in the open source project !» </li></ul><ul><li>ROADMAP From Denis: </li></ul><ul><ul><li>1. Complete the initial release of the gwtmobile-ui project. That includes finishing up a basic set of UI widgets and laying down the fundation for the theming function. </li></ul></ul><ul><ul><li>2. Upgrade the gwtmobile-phonegap project to support 0.9.4, the current phonegap version. </li></ul></ul><ul><ul><li>3. Enhance the gwtmobile-persistence project to support GWT Request Factory so that the same domain classes can be used on both the client and the server sides. </li></ul></ul><ul><ul><li>4. Alternative or in additional to #3, enhance gwtmobile-persistence to work with the resty-gwt project, for people who perfer JSON in communicating with the server. </li></ul></ul><ul><ul><li>5. Support WP7 later this year when the WP7 mobile browser is upgraded to IE9. </li></ul></ul><ul><ul><li>6. Support tablet form factor. May utilize the GWT MVP Framework for this purpose if it makes sense to do so. </li></ul></ul><ul><ul><li>7. Make gwtmobile-ui work with the GWT UI Designer in designing UI for mobile devices. This is actually a long term to-do. I haven't done any research on the feasibility. </li></ul></ul>

×