A case study in webview based android app development

jquery mobile, phonegap, cordova

Transcript

1. A case study in webview based android app development Kiang @ ZF-TW / 2012-11-07
2. Environments / Tools • Ubuntu Linux • Aptana Studio 3 • Google Chrome • mysql2sqlite
3. Libraries • Phonegap / Cordova • Jquery Mobile • Jquery Tmpl • Jquery Validate • MobileScroll - date/time select
4. Why Aptana Studio 3 ? • Netbeans was my favorite one before • NBAndroid is not active development • ADT in original eclipse is not good for developing webview based applications • Aptana is perfect for javascript editing • The default theme is good for my eyes...
5. Google chrome? • It does support WebSQL • The business logic could be tested in desktop first, without the boring compiling time
6. Why jquery mobile? • I like AngularJS more … • The designer have the UI first, based on jquery mobile • JQuery Mobile Angular Adapter is not that reliable, at least the document … • I don't have much experience in mobile environment. But I've been familiar with the coding style using jquery
7. The dirty parts
8. Rev #36 • Get the token from remote site • Save the token using window.localStorage.setItem('token', 'xxx'); • A login page • User could logout and then login again to get another token
9. Rev #46 • Prevent the app being terminated when the orientation changing • AndroidManifest.xml <activity android:configChanges="orientation".. • MainActivity.java @Override public void onConfigurationChanged(Configuration newConfig){ super.onConfigurationChanged(newConfig); }
10. Rev #63 • Enable the app for desktop(chrome) if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { document.addEventListener("deviceready", function() { startApp(); }, false); } else { $(function() { startApp(); }) }
11. Rev #91 • add page loading message if(i % 10 === 0) { $.mobile.showPageLoadingMsg("a", "Loading..." + i +' / '+ queries.length, true); }
12. Rev #127 • Mysql2sqlite https://gist.github.com/943776 • After executing the script, you must remove the following items: – Collat – Comments – Fix auto increasement fields
13. Rev #132 • Once you used global variables, you just can't go back... • Preload the data sets as it's annoying to deal with timing issue for sql execution • In Single Page Application, global variable just like a session container, it will be there always • I will try to have a better habit, next time XD
14. Rev #160 • You can't just change the value only, for jquery mobile UI components – obj.attr('checked', true).checkboxradio('refresh', true); – obj.html('xxx').trigger('create');
15. Rev #166 • You just have to wait... setTimeout(function() { initVariables(); }, 500);
16. Rev #172 • In sqlite, you usually have n+2 tables – sqlite_master – sqlite_sequence
17. Rev #194 • disable page transition – $.mobile.defaultPageTransition = 'none'; – $.mobile.defaultDialogTransition = 'none';
18. Rev #234 • use mobiscroll to replace datebox • Datebox is powerful, but slow on mobile device • Mobiscroll make the date/time picker work as expected
19. Rev #242 • Copy/Paste => Modify => Cleanup • 3 days => 3 hours => 3minutes
20. Rev ? • To be continued