Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gtug2 Mobile app with web technlogy

1,569 views

Published on

  • Be the first to comment

  • Be the first to like this

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>

×