Experience in Building Mobile Application

-

I’ve finally completed my maiden HTML5 mobile application but have only managed to target it for Android.
You may download it from getjar.

Fundamentally, I’ve created the application due to a need to manage multiple library-loan accounts within the family. It is a hassle to check the accounts one-by-one for (near-) outstanding loans.

My experience in development follows:

What type of application should I build?

Criteria Native App HTML5 App Mobile Website
Learning Curve high medium low
Performance good reasonable reasonable
Device feature accessibility all most few
Connectivity tolerance non-connected occasional mostly connected
Server requirement NA NA Yes
Quirkiness Low High Medium
Marketability (on app-store) Yes Yes No
Portability Low Medium High

Basic Requirements

  1. Apache Cordova (PhoneGap) 1.5
  2. jQuery 1.6.4
  3. jQuery Mobile 1.0.1

Gotchas!

  1. I wanted to structure the directories into /js, /css. The easiest way is to move all the javascript files into /js, the css files into /css, and more importantly, the jQM images folder into the /css (as the images are being referenced by the jQM css file)
  2. Different browsers support HTML5 differently. E.g. input types number and dates are not widely supported.

Android Development

Pre-requisites

  1. Eclipse – no questions about the need to use Eclipse.
  2. Firefox with CORS plugin – CORS required in my case as the library loans website does not allow cross-origin requests. The plugin allows me to test without running the emulator.
  3. Chrome (with start-up parameter  --disable-web-security) – similar reason as above. However, the WebKit-based browser like Chrome affords better testing as Android’s browser is also WebKit-based. 
  4. Fiddler2 – to examine the HTTP requests/ responses. This also allows for request manipulation from the browser. (e.g. changing the user-agent)

iOS Development

Pre-requisites

  1. MacOS 10.7 – no questions about the need to use MacOS.
  2. XCode 4.3 – no questions about the need to use XCode.
  3. Developer's license – required for publishing to the appstore.
  4. PhoneGap 1.5 installation for iOS – basic requirement.

Debugging

  1. Need to add WebView debugging in Classes/AppDelegate.m (see below)
  2. To debug, open Safari and go to http://localhost:9999/
- (BOOL) application:(UIApplication*) application
didFinishLaunchingWithOptions:(NSDictionary*) launchOptions{    [NSClassFromString(@"WebView") _enableRemoteInspector];    :}

Gotchas!

  1. All my javascript functions failed to execute! After much time spent troubleshooting, the reason was found to be due to my debugging statements! (see below)
  2. All CORS failed until I added them into the whitelist (Cordova.plist -> ExternalHosts) - remember to clean build the project after adding into the whitelist
  3. Input elements of type="number" produces unexpected results that had to do with regional settings (e.g. 12345 became 12,345)
if (console && console.log) console.info("...."); // failed in PhoneGap

Useful Tools

  1. Safari

Useful Resources

  1. http://wiki.phonegap.com/w/page/52010495/Getting%20Started%20with%20PhoneGap-Cordova%20and%20Xcode%204
  2. http://hiediutley.com/2011/11/22/debugging-ios-apps-using-safari-web-inspector/
  3. http://stackoverflow.com/questions/7814818/external-image-paths-still-doesnt-show-after-adding-it-to-external-list-on-phon
  4. Cloud-based building: https://build.phonegap.com/

Comments

Post a Comment

Popular posts from this blog

Understanding ITIL Service Management the UML way…

-
Image
I originally had a great deal of difficult reconciling the differences amongst ITIL Change Management, Incident Management, and Problem Management. Having researched on the subjects and understanding them better now, I’ve tried to put the concepts together using a UML class diagram to capture my understanding and to keep it imprinted. Similarly, I wanted to differentiate the various categories of changes (Standard, Emergency, Normal) using an easy to understand & self-explanatory manner – a UML Activity Diagram!
Read more

How to depict (Professional-Looking) Logical Network Diagrams in Astah

-
Image
I have always had to create (professional-looking) UML diagrams using Visio-like icons. You’ve got to admit that showing a bunch of boring UML boxes hardly interests anyone less technical (like anyone whose designation has the words “manager” or “director”). This is actually possible in Astah! I’ve created a template for future projects that allows me to produce logical network diagrams that look like the following: To create this diagram, you need to do the following: Assign various icons to stereotypes. I created the following for my use: Create a new UML Deployment Diagram Every element in the diagram is created as a Node The nodes are subsequently assigned the appropriate <<stereotype>>. E.g. Internet is <<internet>>, WebZone FW is <<firewall>>, Web LB is <<loadBalancer>> Ensure the “Icon Notation” is set to “Customized Icon” for each node Instead of the boring boxes, the corresponding icons automatically gets displayed!
Read more