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

How to re-sign an ipa file?

On rare occasions you may be provided with an ipa file (only the ipa file and not the code) that has been signed with a different code signing identity, and you will need to re-sign it with the correct identity before submitting to appstore or for beta testing.

To check the current signature of the ipa file..

First unzip it to get the .app file using,

unzip ".ipa_file_name"

Now check the signature of the .app file using,

codesign -dvvv ".app_file_name"

In the output by reading the value of the Authority attribute you can determine if the app was signed using a developer certificate or a distribution certificate.

eg:

Authority=iPhone Distribution: Appleseed Inc.
Authority=iPhone Developer: Appleseed Inc.

Once you have verified that the current signature is incorrect you can proceed to re-sign the ipa file.

Remove old code signature


rm -r "Payload/Application.app/_CodeSignature" "Payload/Application.app/CodeResources"

Replace embedded mobile provisioning profile

cp "MyEnterprise.mobileprovision" "Payload/Application.app/embedded.mobileprovision"

Re-sign

/usr/bin/codesign -f -s "iPhone Distribution: Certificate Name" --resource-rules "Payload/Application.app/ResourceRules.plist" "Payload/Application.app"

Re-package

zip -qr "Application.resigned.ipa" Payload

References:

http://stackoverflow.com/questions/6896029/re-sign-ipa-iphone

iOS application beta testing using adhoc distribution

You can beta test your iOS application by distributing it via .ipa files. For this the tester will need to have the following..

- a mac with itunes installed
- an iOS device

Send the application .ipa file along with the mobile provisioning profile ( .mobileprovision) to the tester. Now he/she can test your app by following the steps below..

Step 1:
Install the mobile provisioning profile (double click the file)

Step 2:
Drag the .ipa file into itunes. Now the application should display under Library -> Apps menu (menu on left).

Step 3:
Select the device from the Devices section on the left menu and then select the Apps tab (should be displayed on top). Now the application will be visible in the open panel (see pic below).

Step 4:
Select the application and the Sync Apps option. Now sync the app to the device by clicking on the Apply button.

Step 5:
Test the installed application!:)


But how can you extract the .ipa file for beta testing?


Make sure your distribution profile and certificate are installed on your mac. If not, download the distribution profile from  and install it by double clicking. Download the distribution certificate and install it in the login section of the keychain.

In Xcode (I am using Xcode 4.0) open your application project and Build and Run on the device first. Next select Build -> Archive. In Window -> Organizer under archived applications select the latest archive and then click on Share Application button. Select the proper code signing identity (ie. distribution certificate). This will generate the correct ipa file:)

References :

https://developer.apple.com/library/ios/#technotes/tn2250/_index.html

UI Test Automation in iOS

A few months back I did a blogpost on Android UI Testing http://hariniachala.blogspot.com/2011/09/android-application-ui-testing-with.html. This post covers the inbuilt tools available in iOS for automated UI testing.

iOS SDK 4 included the 'Automation' tool for UI test automation. However the procedure is a bit cumbersome. There is no record and playback tool for test and all tests have to be scripted.

To run the Automation tool in Xcode 4 or higher open your iOS project and select Product -> Profile from menu. Next select the Automation icon from the wizard that opens.



When instruments opens with Automation tool selected you will see the following window..



In the Scripts section select Add and Create. This will create a new ui test automation script. These scripts are written in javascript. Below is an example script..

UIALogger.logStart("Logging…");
UIATarget.localTarget().logElementTree();
UIATarget.localTarget().frontMostApp().mainWindow().elements()[2].elements()[1].tap();
UIALogger.logPass();

This script starts by logging the message "Logging.." and then logging the element hierarchy of the currently selected window in the application. Logging the element hierarchy here helps us to understand how we should call a specific element in the window. You can also call elements by their label. See Apple's documentation (http://developer.apple.com/library/ios/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/Built-InInstruments/Built-InInstruments.html#//apple_ref/doc/uid/TP40004652-CH6-SW76) for details. After determining the element heirarchy we use that information to call a tap() (identical to a physical tap) on that element. We close the logging with logPass().

Next you need to select the application target on which you want to run the test script. See the screenshot below for details on how to do this..



Now you can run your test by clicking on the record button. Watch and monitor the trace log as your test runs on the simulator.

In this manner even a complex UI test flow can be automated, especially if that test procedure needs to be repeated (eg: generating reports for different data). However as you can see the procedure of writing the automated test is quite time consuming.

Conclusion : Comparing the tools available for UI test automation currently android seems to be one step ahead in the game (it provides a test record and playback tool (see my previous blogpost on android ui testing ). Still both mobile platforms have a lot to be improved in their automation test tools..

References:

http://stackoverflow.com/questions/3801344/how-do-i-test-my-ios-apps
http://developer.apple.com/library/ios/#documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/Built-InInstruments/Built-InInstruments.html#//apple_ref/doc/uid/TP40004652-CH6

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

Making sense of crash logs from iPhone apps

Ohoh your iphone app just crashed! One way to debug the crash is by inspecting the crash log. Here's how..

1. Before releasing the application for iphone you must first build your app for Archiving on xcode.
This will generate both the ProjectName.app and ProjectName.app.dSYM files. You will see the generated ProjectName.app file in the target section of the project in xcode. Selecting the 'Show in Finder' option(right click target ProjectName.app file) will reveal the location of both these required files. Copy these files to a new folder named Project_CrashDebugging.

2. Sync your iphone using itunes. Now your applications crash logs will have been copied to the computer. Generally you can find them at the following path your_home_folder_name/Library/Logs/CrashReporter/MobileDevice/your_device_name

3. Select the crash log from your project and copy it to Project_CrashDebugging folder you created earlier.

4. To demystify the crash log you will need to use the symbolicatecrash application. Typically it will be located at the following path /Developer/Platforms/iPhoneOS.platform/Developer/Library/PrivateFrameworks/DTDeviceKit.framework/Versions/A/Resources/. If not find it in your hard drive by searching for it using the locate function in console. Once you have found it copy it to one of your computers Path location (check you path locations using echo $PATH in console), generally copying /usr/bin will do. Now you can call symbolicatecrash directly from the console.

5. cd to your Project_CrashDebugging folder and now call..

symbolicatecrash crash_log_name ProjectName.app.dSYM > filename.crash

now you will have created a symbolicated filename.crash file which you can refer for debugging


Given below are parts of an example application I use to try out symbolicatecrash.

from ExampleViewController.m

- (void)viewDidLoad
{
NSString *test = [[[NSString alloc] initWithFormat:@"Test"] autorelease];
[test release];

NSLog(@"Test is: %@", test);//calling test after release will result in a crash
[super viewDidLoad];
}

from initial crash log..

Date/Time: 2011-08-10 11:09:33.253 +0530
OS Version: iPhone OS 5.0 (9A5288d)
Report Version: 104

Exception Type: EXC_BAD_ACCESS (SIGSEGV)
Exception Codes: KERN_INVALID_ADDRESS at 0x576e6f69
Crashed Thread: 0

Thread 0 name: Dispatch queue: com.apple.main-thread
Thread 0 Crashed:
0 libobjc.A.dylib 0x36c85fc2 0x36c82000 + 16322
1 Foundation 0x35238bb8 0x3522f000 + 39864
2 CoreFoundation 0x354e3d06 0x35454000 + 589062
3 CoreFoundation 0x35477d24 0x35454000 + 146724
4 CoreFoundation 0x354984b0 0x35454000 + 279728
5 Foundation 0x3524c914 0x3522f000 + 121108
6 Foundation 0x3524c8b4 0x3522f000 + 121012
7 Example 0x000027a4 0x1000 + 6052
8 UIKit 0x34a3c124 0x349ff000 + 250148
9 UIKit 0x34a1777a 0x349ff000 + 100218
10 UIKit 0x34b6d288 0x349ff000 + 1499784
11 Example 0x00002538 0x1000 + 5432
12 UIKit 0x34a17f1c 0x349ff000 + 102172
13 UIKit 0x34a070e6 0x349ff000 + 32998
14 UIKit 0x34a06032 0x349ff000 + 28722
15 UIKit 0x34a05ad0 0x349ff000 + 27344
16 UIKit 0x34a055ea 0x349ff000 + 26090
17 GraphicsServices 0x33f27ef4 0x33f23000 + 20212
18 CoreFoundation 0x354d79c4 0x35454000 + 539076
19 CoreFoundation 0x354d7966 0x35454000 + 538982
20 CoreFoundation 0x354d658c 0x35454000 + 533900
21 CoreFoundation 0x35478036 0x35454000 + 147510
22 CoreFoundation 0x35477efe 0x35454000 + 147198
23 UIKit 0x34a03758 0x349ff000 + 18264
24 UIKit 0x34a0098a 0x349ff000 + 6538
25 Example 0x000024ba 0x1000 + 5306
26 Example 0x00002478 0x1000 + 5240


from symbolicated crash log..

Date/Time: 2011-08-10 11:09:33.253 +0530
OS Version: iPhone OS 5.0 (9A5288d)
Report Version: 104

Exception Type: EXC_BAD_ACCESS (SIGSEGV)
Exception Codes: KERN_INVALID_ADDRESS at 0x576e6f69
Crashed Thread: 0

Thread 0 name: Dispatch queue: com.apple.main-thread
Thread 0 Crashed:
0 libobjc.A.dylib 0x36c85fc2 0x36c82000 + 16322
1 Foundation 0x35238bb8 0x3522f000 + 39864
2 CoreFoundation 0x354e3d06 0x35454000 + 589062
3 CoreFoundation 0x35477d24 0x35454000 + 146724
4 CoreFoundation 0x354984b0 0x35454000 + 279728
5 Foundation 0x3524c914 0x3522f000 + 121108
6 Foundation 0x3524c8b4 0x3522f000 + 121012
7 Example 0x000027a4 -[ExampleViewController viewDidLoad] (ExampleViewController.m:35)
8 UIKit 0x34a3c124 0x349ff000 + 250148
9 UIKit 0x34a1777a 0x349ff000 + 100218
10 UIKit 0x34b6d288 0x349ff000 + 1499784
11 Example 0x00002538 -[ExampleAppDelegate application:didFinishLaunchingWithOptions:] (ExampleAppDelegate.m:24)
12 UIKit 0x34a17f1c 0x349ff000 + 102172
13 UIKit 0x34a070e6 0x349ff000 + 32998
14 UIKit 0x34a06032 0x349ff000 + 28722
15 UIKit 0x34a05ad0 0x349ff000 + 27344
16 UIKit 0x34a055ea 0x349ff000 + 26090
17 GraphicsServices 0x33f27ef4 0x33f23000 + 20212
18 CoreFoundation 0x354d79c4 0x35454000 + 539076
19 CoreFoundation 0x354d7966 0x35454000 + 538982
20 CoreFoundation 0x354d658c 0x35454000 + 533900
21 CoreFoundation 0x35478036 0x35454000 + 147510
22 CoreFoundation 0x35477efe 0x35454000 + 147198
23 UIKit 0x34a03758 0x349ff000 + 18264
24 UIKit 0x34a0098a 0x349ff000 + 6538
25 Example 0x000024ba main (main.m:14)
26 Example 0x00002478 start + 32

Screenshots of feed reader application

Here are screenshots of the feed reader application I just completed. Hopefully this will be in the market soon! The application uses a bayesian based ranking algorithm to rank feed items according to their popularity among other application users before displaying them (ie: most popular items appear first). It's a simple tab based application with a setup tab for configuring feeds, a tab to display ranked feed items and a bookmarks tab for viewing bookmarked feed items.

It's the last month of my AIESEC internship here in Lisbon, Portugal. I'm going to miss life in Lisbon when I return home, but I'm looking forward to going home again after 6 months!:) Wonder if Colombo has changed in those 6 months..

Colombo Stock Exchange iPhone Application

This is a simple application I did while learning iphone application programming. Since I don't have my own apple developer account ( that costs $99 a year ) I thought I'll just mention it here and share the link to the built application which can be run on the simulator.

Application: http://rapidshare.com/files/456484003/B7638CC9-1C26-47E1-8AC4-356F7FB3D12F.zip

How to run compiled binary on iphone simulator:

http://forums.macrumors.com/showthread.php?t=547557