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
   

   View Slide

2. Environments / Tools
   ●
   Ubuntu Linux
   ●
   Aptana Studio 3
   ●
   Google Chrome
   ●
   mysql2sqlite
   

   View Slide

3. Libraries
   ●
   Phonegap / Cordova
   ●
   Jquery Mobile
   ●
   Jquery Tmpl
   ●
   Jquery Validate
   ●
   MobileScroll - date/time select
   

   View Slide

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...
   

   View Slide

5. Google chrome?
   ●
   It does support WebSQL
   ●
   The business logic could be tested in desktop
   first, without the boring compiling time
   

   View Slide

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
   

   View Slide

7. The dirty parts
   

   View Slide

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
   

   View Slide

9. Rev #46
   ●
   Prevent the app being terminated when the orientation
   changing
   ●
   AndroidManifest.xml
   ●
   MainActivity.java
   @Override
   public void onConfigurationChanged(Configuration
   newConfig){
   super.onConfigurationChanged(newConfig);
   }
   

   View Slide

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();
    })
    }
    

    View Slide

11. Rev #91
    ●
    add page loading message
    if(i % 10 === 0) {
    $.mobile.showPageLoadingMsg("a", "Loading..." + i +' / '+ queries.length, true);
    }
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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');
    

    View Slide

15. Rev #166
    ●
    You just have to wait...
    setTimeout(function() {
    initVariables();
    }, 500);
    

    View Slide

16. Rev #172
    ●
    In sqlite, you usually have n+2 tables
    – sqlite_master
    – sqlite_sequence
    

    View Slide

17. Rev #194
    ●
    disable page transition
    – $.mobile.defaultPageTransition = 'none';
    – $.mobile.defaultDialogTransition = 'none';
    

    View Slide

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
    

    View Slide

19. Rev #242
    ●
    Copy/Paste => Modify => Cleanup
    ●
    3 days => 3 hours => 3minutes
    

    View Slide

20. Rev ?
    ●
    To be continued
    

    View Slide