1. #1
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    321
    Vote Rating
    3
    Scorpie is on a distinguished road

      0  

    Default How-To: Design, Develop and test for a mobile device, hints, tips and tricks.

    How-To: Design, Develop and test for a mobile device, hints, tips and tricks.


    I think it would be quite useful if we can exchange knowledge on the tedious process of designing, developing and testing on mobile devices.

    What do you use, which programs are your favorite, what are the do`s and dont`s?

    I`ll kick off:

    I`ve tried MobiOne Studio for testing the example pages of the Touch Beta and found it to be quite handy to use.
    You can download it here: http://www.genuitec.com/mobile/

    Is it possible to use tools like Firebug with Firefox / plugins to develop? I`ve came across the Firefox user agent switcher, but that`s not really what I am after. Any tips?
    I`m from Holland!

  2. #2
    Sencha - Training Team mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    690
    Vote Rating
    12
    mrsunshine will become famous soon enough

      0  

    Default


    I think it's better to use Safari and his Developer features, because Safari render the ext touch things similar to iphone and ipad. in firefox it just look ugly :-)

  3. #3
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    321
    Vote Rating
    3
    Scorpie is on a distinguished road

      0  

    Default


    Hm, I`ll have to give Safari a go then. These are my first tiny steps in the world of mobile development, so its all a bit overwhelming at first
    I`m from Holland!

  4. #4
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    575
    Vote Rating
    32
    aw1zard2 has a spectacular aura about aw1zard2 has a spectacular aura about

      0  

    Default


    I will be trying out Chrome, Safari, and Firefox 4.0 when it gets released in beta.
    I'm more designing for the all-in-one touch monitors desktops then mobile right now but if I can make everything work with same look and feel in 1 source code would be great for not having to deal with multiple source codes between desktop and mobile.

    I already check to see what browser if its mobile or desktop browser that is which debug flags to use and etc.

  5. #5
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    575
    Vote Rating
    32
    aw1zard2 has a spectacular aura about aw1zard2 has a spectacular aura about

      0  

    Default


    Very simple php function using regex to test and see what browser your dealing with.
    I use this to make sure it's a known mobile device otherwise it redirects to my main Ext JS 3.2.1 website. Using global or session variables you can save all the info about what phones with giving a nice graphical display to a few phones while doing text or slower display for others. I'm having a friend get all the information for a lot of phone and what they can do and can't and save it into a database for us. Then make a modular back end send the correct UI to the device connected. Once we get some of this completed was thinking of sharing the mobile table of listed functions for different mobile models. So just let me know if anyone is interested. Of course the easiest will be only to allow just the most current browsers handle things and give a generic error like please update your phone your ancient!! LOL

    PHP Code:
    <?PHP
    function is_mobile(){
            
    $regex_match="/(nokia|iphone|android|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|";
            
    $regex_match.="htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|";
            
    $regex_match.="blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|";
            
    $regex_match.="symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|";
            
    $regex_match.="jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera\*mini|320x320|240x320|176x220";
            
    $regex_match.=")/i";
            echo 
    '<pre>';
            
    print_r(preg_split($regex_matchstrtolower($_SERVER['HTTP_USER_AGENT'])));
            echo 
    '<br />';
            
    print_r($_SERVER);
            echo 
    '</pre><br />WAP '.$_SERVER['HTTP_X_WAP_PROFILE'].'<br />Profile '.$_SERVER['HTTP_PROFILE'].'<br />Agent '.$_SERVER['HTTP_USER_AGENT'].'<br />';
            return isset(
    $_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE']) or preg_match($regex_matchstrtolower($_SERVER['HTTP_USER_AGENT']));
    }
    echo 
    'TEST '.is_mobile();
    ?>

  6. #6
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    21
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Internally we use Chrome quite a bit with it's usual debugging tools. In addition Safari and the unavoidable iPad/iPhone internal tools (which are sorely lacking).

  7. #7
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    7
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    Pro tip: don't try using the application cache manifest until you've read all of http://diveintohtml5.org/offline.html
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  8. #8
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    6
    Bucs is on a distinguished road

      0  

    Default


    Congrats to the team on what appears to be a breakthrough mobile toolkit for the web world! I am trying to free up from an existing project so I can throw together a quick, functional app against a live app in the field...so I am trying to get a handle on the best way to work with touch in my environment.

    I sure hope I am not the only schlep that has to develop against a SQL Server DB model! In any event, my dev environment with ExtJS has always been on a Mac using a VM with some form of Windoze loaded and Visual Studio with SQL Server. I am trying to establish the best way to setup the dev environment before embarking down that path. Given that I will be programming in the Visual Studio Environment, what is the best way to test the application...expose an IIS web to the Mac host environment and use the iPhone/iPad dev webkit and emulator against the exposed IIS web site, or use something like the MobiOne emulator on the Windows side? When I write normal ExtJS 3+ apps, FireFox and Firebug are life savers for debugging and trouble shooting, is there a comparable solution to this when developing with Touch?

    Just trying to get a handle on how to setup the environment to check out the samples and begin to create a project.

    Thanks, and congrats again!

  9. #9
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    7
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    Quote Originally Posted by Bucs View Post
    Congrats to the team on what appears to be a breakthrough mobile toolkit for the web world!
    Thanks, we think so too

    Quote Originally Posted by Bucs View Post
    In any event, my dev environment with ExtJS has always been on a Mac using a VM with some form of Windoze loaded and Visual Studio with SQL Server.
    I don't think I've ever heard of someone who has a mac running a VM so that they can develop in Windows - that sounds like crazy talk to me. We all have a similar setup internally - OS X serving up files from the built-in Apache's DocumentRoot. It's very simple and is what I would recommend in the general case.

    In your specific case it sounds like you can't get OS X to talk to your SQL Server directly, so what you propose sounds reasonable. Debug in Chromium as it's using the same rendering engine as mobile devices - don't use Firefox for debugging Ext Touch apps as it gets it all wrong.
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  10. #10
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    6
    Bucs is on a distinguished road

      0  

    Default


    Thanks Ed. Love the Mac, but the money trail normally leads to MS development, so I follow it...hence the Mac+VM+Win Dev

    So can I use Chromium for windows to debug iPhone/iPad apps? I thought The only reason I would want to use the Mac side would be because of the SDK emulator's and debugging, but since I hear they are r-e-a-l-l-y bad, and I also hear that you can't really test/debug the Touch apps in a browser (Chromium included) as you "can't be sure how they will act"...then I'm a little confused (and worried) about how best to test/debug Ext Touch development projects regardless of what platform I am developing them on.

    Would love to hear exactly what tools Ext peeps are using and why. I think you definitely need to consider the Windows development world as it's still the defacto standard dev platform for business apps...though I know some of you will argue against that

    Thanks Ed