PDA

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



Scorpie
18 May 2010, 12:40 AM
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?

mrsunshine
18 May 2010, 12:45 AM
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 :-)

Scorpie
18 May 2010, 12:58 AM
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 :D

aw1zard2
18 May 2010, 7:38 AM
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.

aw1zard2
18 May 2010, 7:53 AM
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 :D


<?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_match, strtolower($_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_match, strtolower($_SERVER['HTTP_USER_AGENT']));
}
echo 'TEST '.is_mobile();
?>

Jamie Avins
18 May 2010, 8:08 AM
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).

edspencer
18 May 2010, 10:02 AM
Pro tip: don't try using the application cache manifest until you've read all of http://diveintohtml5.org/offline.html

Bucs
19 May 2010, 3:21 AM
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!

edspencer
19 May 2010, 10:40 AM
Congrats to the team on what appears to be a breakthrough mobile toolkit for the web world!

Thanks, we think so too :)


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.

Bucs
19 May 2010, 11:36 AM
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

edspencer
19 May 2010, 11:45 AM
Internally the Ext.TouchEventManager normalizes click and tap events so that click events appear as though they were tap events. This is what enables us to test in Chromium and have an experience that is very close to debugging on the iPad. There really are very few things that work in Chromium and turn out not to work on the iPad.

It sounds like you could install Chromium on your mac and point it to the windows VM's http server. I haven't tried the windows version of Chromium but in principle it should behave similarly.

Bucs
19 May 2010, 11:56 AM
Yes, I think that is the way I will go. Expose the Touch project as an IIS web, hit the VM's IIS IP via HTTP, and Test and Debug on the Window side in Chromium or the Mac (depending on which experience is better). Heck, at that point, why wouldn't I want to test the app on the actual device, either the iPad or the iPhone as they should both be able to hit the same IP internally on my network? Seems like you would get a better idea on your app's performance that way as the emulator uses all the resources of the laptop vs those physically available to the device.

Can't wait to get into this :)

aw1zard2
19 May 2010, 12:32 PM
I have Safari for windows, Opera, Chrome, and Firefox. I debug in Chrome and Firefox. The Safari for windows had the same choppiness that Jay showed in the videos on the animations etc. Didn't check all of the bugs he listed though. If you want to do geolocation make sure you download the developers build of Chrome 5.x. Just a heads up. :)

Bucs
19 May 2010, 12:40 PM
Thanks aw1zard2. Did Jay post videos on Touch, or just animation effects related to normal ExtJS?

Thanks

aw1zard2
19 May 2010, 12:45 PM
EXT Touch it is in the touch bug forum.

Some of the same things he posted I saw in Safari for Windows. I don't have a mac so gonna be interesting seeing how I develop things for the iPhone iPad iPod. I just used my mouse to handle the touch event it worked nice.

Will be testing on a WindTop from MSI which is a touch monitor all in one desktop.

edspencer
19 May 2010, 12:49 PM
Regarding choppiness, the iPhone and iPad hardware accelerate the CSS animations that we use so animations actually perform far better on those devices than even the most powerful desktops or laptops.

aw1zard2
19 May 2010, 1:05 PM
Will Touch be made to work with tablets running full OS'es and/or All-in-One pc's with touch Monitors?

The project I am working on uses everything. Tablets/All-in-One pc's for data entry via web app and presentation of data over mobile/tablets/All-in-One pc's.

edspencer
19 May 2010, 1:08 PM
Will Touch be made to work with tablets running full OS'es like (ICD Gemini coming soon) and/or All-in-One pc's with touch Monitors?

The project I am working on uses everything. Tablets/All-in-One pc's for data entry via web app and presentation of data over mobile/tablets/All-in-One pc's.

In principle it should be compatible, but I wouldn't expect that to work yet unless those devices behave exactly like webkit.

aw1zard2
19 May 2010, 1:21 PM
In principle it should be compatible, but I wouldn't expect that to work yet unless those devices behave exactly like webkit.

Ok thanks. I will focus towards webkit for now then. =)

fuzelogic
7 Jun 2010, 6:47 AM
I develop my application and want to test it out on the iPhone for example, do I need to copy the code onto my phone or I just go the website address via my phone to test out the code?

Jamie Avins
7 Jun 2010, 8:36 AM
Website for testing is the easiest.

fuzelogic
7 Jun 2010, 11:44 AM
It might be helpful to have a brief description describing the expected behavior of the examples.

For example, describe if the user should have the phone in the vertical / horizontal position when viewing picker example or state that the orientation of the phone should not effect how it's displayed

TommyMaintz
7 Jun 2010, 11:18 PM
@Fuzelogic

The goal is to have all examples work in all orientations on all devices. The releases are just very alpha still, and we are constantly fixing bugs and implementing final features. Expect all these issues to be ironed out over the next few weeks.

aw1zard2
24 Jun 2010, 6:19 AM
Can we make this post sticky so we can keep posting tips/tricks we learn?

:D

Spitfire_988
31 Jul 2010, 12:00 PM
So you would put this code, let's say at the top of the sencha touch mobile app, at it will distinguish the mobile smart phone im using to test it?? If there is other parts of the code, I def would like to try it out. I test through chrome & iphone, using dreamweaver to develope.

yCD
31 Jul 2010, 12:22 PM
Chrome is better than Safari on PC : better render for 3d iso for example, and very more speed.
Safari on Ipad had a very limited by bad cache memory usage at this time.

jbraam
17 Aug 2010, 3:00 AM
In principle it should be compatible, but I wouldn't expect that to work yet unless those devices behave exactly like webkit.

I am starting development of an app for the new Nokia Web Runtime (qtwrt), which is based on webkit. The platform part of Touch is only targeted at iPhone and Android at the moment (isPhone only returns true in case of those two). Will Touch be made aware of the Nokia WRT?

edspencer
17 Aug 2010, 9:46 AM
It's possible that this will be supported in the future, but for the time being we're being quite explicit about support for just the Android and iOS platforms

jedihua
30 Sep 2010, 8:47 AM
Inow this may sound naive but could any one tell me how to test and debug the my sencha touch project using safari? When can I get the debugging information from Safari? Thanks!

Bucs
30 Sep 2010, 9:02 AM
Menu - Develop - Start Debugging Javascript...set your breakpoints and you should be good.

jedihua
30 Sep 2010, 9:26 AM
Thanks so much!

remoorejr
30 Sep 2010, 10:08 AM
Also good to know ... you can insert breakpoints in your JavaScript by adding the the debugger statement at any point in your code.


.. some JavaScript code;
debugger;
.. more code;

jedihua
30 Sep 2010, 10:10 AM
Thanks, that really helped me a lot.