Jquery Mobile Pinch Zoom Image with Fixed Headers

Recently I came across the requirement to build a mobile app with image zooming capabilities. It needed to be something similar to what Twitter uses for displaying tweeted images. Twitter of course codes it using native iOS and Android APIs. My requirement was to do the same thing using jquery mobile so it would be easily cross platform. Lucky for me I came across an open source JQM plugin that allows for pinch zoom of images. With a few tweaks I managed to get this working with JQM. I load the image content dynamically in the 'pageshow' event so that the image content can be altered as required for the page.

Library for pinch zoom (uses html canvas)

https://github.com/rombdn/img-touch-canvas

Modified version with fixed headers for JQM

https://github.com/hariniachala/jqm-image-zoom/tree/master/www

Modify image and canvas parameters as required to suit your application requirement..

Samsugn Lab.dev

Samsung's Lab.dev is another cloud based mobile application testing service. This article is a summary of my experience with it specific to Android. The site also supports Windows Mobile, Java and bada testing.

What's great about it:)

- It's free!

What's not so great about it:(

- Limited functionality (no automated testing)
- Limited devices (only Samsung devices)
- Each session on a device is valid for a max of 30min.


For those of you who would like to try it out here's how..

Go to https://innovator.samsungmobile.com/mbr/individual.mbr.add.do and register a new account. Sign in with the new account you created. Select Android page (see screen shot below..)



Now select Lab.dev from left of the screen (see pic below..)



Now click the Android button (see pic..)



A requirements test will follow. If all requirements are met you can proceed to the lab screen where you can select the device you want from what is available (see screen..). One you've decided on a device select 'Start' to download the java web start app(.jnlp file) that will show you the running device (grant required permissions for the application to run on your pc).




You can test your android apps on the device by downloading the .apk files onto it over the internet.

More screenshots...

Android Application UI Testing (with monkey and monkeyrunner)

Android has some built in UI testing tools. These tools can be used for automated UI testing. However the tools are not so simple to use. This post is an attempt to set a guideline towards using these tools.

There are 2 main UI testing tools available

1.monkey (aka. UI/Application Exerciser Monkey)

This tool is a command line based tool that can be primarily used to stress test your application UI. It is the simplest tool to use. Here's how..

Running monkey as an application UI stress tester (runs a random set of commands on the application. useful to UI stress testing)

- Open a command console.
- First direct your console to the location of the adb (Android Debug Bridge) program in the android sdk. Typically you can use the following command for this..

$cd path_to_android_sdk/platform-tools/

path_to_android_sdk should be the path to the sdk on your pc

- Now make sure you device is connected with the application running on it or that the emulator is running the application.

- To test on device issue the following command in the console

$./adb -d shell monkey -p package_name -v 1000

(replace -d with -e to test on the emulator.
package_name is the name of the application package abnd it usually begins with com.
-v specifies the number of UI events to be generated, in this case we ask it to generate 1000 random events)

Now you will see the monkey stress testing your app.

If you get force close message while running monkey you have just discovered a bug that needs fixing. You can run

./adb logcat

in the console to generate the relevant logs.


Running specific commands in monkey
The monkey tool can also be used to run a specific set of commands on the application. However it is easier to use the monkeyrunner for this purpose.

On the connected device (to run on emulator simply replace -d with -e)

./adb -d shell monkey -p package_name --port 1080 &
./adb -d forward tcp:1080 tcp:1080
telnet localhost 1080

Now the following will be printed on cmd line..

Trying ::1...
Trying 127.0.0.1...
Connected to localhost.
Escape character is '^]'.

Now you can type in your instructions

>tap 150 200

you can write all instruction into a script (script.txt) as below..

# monkey
tap 100 180
type 123
tap 100 280
press DEL
press DEL
press DEL
press DEL
press DEL
press DEL
press DEL
press DEL
type -460.3

now run..

./adb -d shell monkey -p package_name --port 1080 &
./adb -d forward tcp:1080 tcp:1080
nc localhost 1080 < script.txt


2. monkeyrunner

The monkeyrunner tool is an API for writing automated UI tests. You can use it to write specific scripts that run a series of commands and inspects the output by taking screenshots etc. The android SDK includes two special scripts written using monkeyrunner which help in running automated UI tests. The scripts are..

monkey_recorder.py
monkey_playback.py

Copy these scripts to /tools folder in the android sdk. Set the console path to the tools directory. Open up the application on the emulator.

You can run the recorder as follows..

./monkeyrunner monkey_recorder.py

Below is a screenshot of monkey_recorder recording actions for calculator.



Use 'Export Actions' button to export the set of actions into a script (eg: calc.mr)

now run the cal.mr script on a connected device as follows.. (first make sure the emulator is shut down)

./monkeyrunner monkey_playback.py calc.mr

For playback to run properly you need to take precautions of setting the correct wait times and using the correct press, fling, type methods in the recorder.

Conclusion: Android has a good collection of tools meant to enable UI test automation. However they still have a lot more room for improvement especially in terms of ease of use and efficiency.

References:

http://developer.android.com/guide/developing/tools/monkey.html
http://developer.android.com/guide/developing/tools/monkeyrunner_concepts.html
Android Application Testing Guide - Diego Torres Milano

My take on Android vs iPhone development

As a mobile application developer I would like to share my experience with iOS and Android so far. At the end of this post I will rate my developer experience with each of the OSs and announce my favorite mobile OS!

I began my mobile application development experience with iOS. Coming from a Java programming background venturing into the murky waters of Objective C was a bit scary at first (I'd never even heard of Objective C until I looked into iOS). All I knew when starting off with Objective C was that it was a language similar to C and C++. That meant having to deal with memory pointers and no one who is a fan of Java and its garbage collector likes meddling with pointers again. Fortunately iOS apps are built around the MVC (Model-View-Controller design pattern), which meant there were standardized ways for dealing with pointers, you just needed to follow some routines and rules. But it isn't always easy.

But once I had got the hang of Objective C syntax and the Apple iOS API, things became a lot more easier. My favorite part of iOS development was using Interface Builder. The latest version of Xcode has this interface designer built into Xcode and it makes designing great looking iphone apps a breeze! Some developers prefer designing their UIs programmatically because that allows them to reuse design code in multiple apps but using interface builder makes the task of UI design much faster! The iOS API has practically every UI widget you can want on an app already available. So that makes your UI design task so much easier. I personally think the iOS UI widgets are much prettier than the current android widgets. Maybe because Steve Jobs is more peculiar about UI design than the folks at Google. So in conclusion for my take on iOS development I would say that what I like about it is the ease with which I can develop better looking UIs.

As for Android development I started off here doing an experimental app (which is now on the Android Market!:) ). My biggest complaint when trying out Android development was that at the time I started off I didn't own an Android handset. This meant that I had to run all my code on the emulator. When I started developing I was using the android api8. And gosh did it have the slowest emulator ever! Thankfully Android has since then increased their emulator speeds. But its still much slower than running on an actual device. Unlike the iPhone simulator, which simulates an iOS environment running on Mac h/w, the Android emulator emulates the entire Android device enviroment (including the h/w enviroment : SD card size, memory capacity etc.). So you can't blame it for being slow. But as long as you forget the emulator and stick to using a device for running your code during development, you will have a much happier android dev experience:)

The next thing that bugged me when starting off Android development was their UI designer. I used Eclipse along with the Android plugin for development. And even the currently available plugin is quite disappointing when it comes to UI designing. If your first mobile dev experience was with Android then this may not be that big a deal. You will just learn to navigate UI design using XML and not complain about it. But if you were an Interface Builder fan switching from iOS development to Android then you will be thoroughly disappointed. Seems Android folks are developing a WYSIWYG editor for the eclipse plugin though, this should provide a better rival for Interface Builder. Also I would rate the currently available UI widgets in iOS as better than Android ones in terms of their design and also ease of use in the code. Those cons aside developing Android apps is a joy because you are dealing with Java here. If you have some development experience in Java then there is no more learning required. Best of all the garbage collector handles all the nasty memory management details for you.

So here's my final rating.. Please note that the ratings below are entirely based on my own personal evalution.

1. UI design
iOS - 9/10
Android - 7/10

2. Ease of setting up dev environment
iOS - 3/10 (you need to get a mac first! and buy an iphone too or just forget about it!)
Android - 10/10 (can be done on a pc running any OS. and all dev tools required are freely available over the interent).

3. Deployment
iOS - 6/10 (the process of deployment is so cumbersome and restricted. but on the plus side this ensures that your app is of the best possible quality. still i think Apple can do more to simplify the deployment process)
Android - 5/10 (deploying an android app to the market is a breeze. but this really lowers the quality of apps out there)

4. Developing for different devices
iOS - 10/10 ( fixed screen sizes.)
Android - 2/10 ( varying screen sizes. different device hardwares. compatibility nightmare!)

5. Development language
iOS - 5/10 (strange and repetitive syntax.)
Java - 7/10 (Java is easy to develop with but runs slower)

6. Available resources for developers
iOS - 7/10 (the NDA delays developers from getting the info they need to support upcoming iOS releases in their apps)
Android - 10/10 (opensource. hurray!)

7. Debugging
iOS - 4/10 (can be a total nightmare even with tools like NSZombie setup. write perfect code or suffer!)
Android - 9/10 ( except for the occasional system crashes which leave baffling messages android dev tools are quick to point out exactly where you made a mistake in your code)

Some simple arithmetic results in Android being placed as the winner with 7.1429/10 vs 6.2857/10 for iOS.

For more developer takes on Android vs iOS please see:

http://whereoscope.wordpress.com/2010/12/07/android-vs-ios-a-developers-perspective/

http://nfarina.com/post/8239634061/ios-to-android

Run Fennec on the Android Emulator

I was curious about Fennec ( Mozilla's mobile browser ) but since I don't own an android phone ( not yet.. ) I couldn't try it out. I recently discovered that Fennec can be made to run on the Android emulator, and here's how..

Note: My OS is Lucid Lynx and all instructions are as per my OS.

Here's how you make a Fennec build that runs on the Android emulator:

1. Install Android SDK ( you need to have JDK 5 or 6 )

you can get the Android SDK from here : http://developer.android.com/sdk/index.html

unzip the tar ball in a suitable location
cd android-sdk-linux_x86/tools
./android

This will open up the Android SDK and AVD manager. Here you should install the SDK Platform Android 2.2, API 8 and setup a new AVD ( Android Virtual Device ) with it as the Target.

now you can run the emulator inside the tools directory with..

./emulator -avd name_of_your_avd

check http://developer.android.com/sdk/installing.html for detailed installation instructions.


2. make a Fennec build that will run on the emulator

currently available Fennec nightlies wont run on the emulator so you need to build a version that will, by using the correct build instructions in the .mozconfig file. Here's how..

- First download the Android NDK and unzip it in the same location you unzipped the SDK.

http://ftp.mozilla.org/pub/mozilla.org/mobile/source/android-ndk-r4c-0moz3.tar.bz2 

- Clone the Fennec repository inside your mozilla-central repo ( cd to mozilla code folder and run

hg clone http://hg.mozilla.org/mobile-browser mobile )

If you don't already have a mozilla-central code repository you will need to get it first and setup mozilla build requirements on your system. See https://developer.mozilla.org/En/Simple_Firefox_build).

- Create the following .mozconfig file inside your mozilla-central code directory

http://pastebin.mozilla.org/1158636

( make sure to set the correct paths for the Android SDK, NDK and tools directories)

- run sudo make -f client.mk inside your mozilla-central repo.

(Fennec took about an hour and a half to build:I)

- When build is complete cd into the newly created objdir-android folder and run sudo make package. This will create a fenneck.apk file inside the objdir-android/embedding/android folder.

-Now copy the fennec.apk file into the android-sdk-linux_x86/tools folder and run

emulator -avd name_of_your_avd -partition-size 256 -memory 512

-While the emulator is running, in a new terminal install the fennec.apk in the emulator using

android-sdk-linux_x86/tools/adb install fennec.apk

The installation will print 'Success' confirming Fennec has been installed on your emulator!