With today’s massive smartphone market there isn’t a dev alive that hasn’t considered developing an app for the iOS or Android platforms. The major factor in making a decision to cross over from desktop application development or web development is the learning curve associated with the 2 platforms.

iOS uses an object based implementation of C, named – yep you guessed it – Objective C. Most developers that I have day-to-day involvement with are web developers and I’m yet to find one that doesn’t find the idea of learning the Objective C language very daunting. Even traditional C developers run away scared at the sight of an iOS app developed in the core language. It’s enough to make the most seasoned dev cry. There are tools available to help you develop an iOS app in C# such as Xamarin – which helps bridge the gap for desktop application developers.

On the dark side of mobile operating systems we have the Android platform developed by the very web friendly Google! That doesn’t mean this platform comes without a learning curve as app development on the Android platform is done through the Java programming language. The one advantage of using Java for PHP web developers is that the syntax at first glance is very similar – the key differences being the function names etc… Having said that, I’m a PHP dev with 9 years experience under my belt and yet I would still have to spend a good proportion of my time learning the core language to get into native application development…

So where does this leave web developers wanting to build an app to sit alongside their core service offering. Every man and his dog has an app these days, why can’t we have an easy barrier to entry. Well this is where acclaimed web company Adobe’s PhoneGap toolkit comes in handy. PhoneGap is an attempt to bridge the gap between the web and mobile – anybody who knows HTML, CSS and JavaScript possess the skills necessary to start creating their own applications. So lets have a look at PhoneGap by first looking at the downsides of the platform:

PhoneGap disadvantages

  • PhoneGap doesn’t support access to every feature on your device
  • Implementation of new device features will leave you 1 step behind the native developers
  • Applications are technically web applications running inside a webview. Browser performance does not compare to native app
  • Performance – although use of new features in CSS3 certainly improves things in areas with hardware acceleration and translate3d.

PhoneGap advantages

  • Application development in HTML5, CSS3 and JavaScript
  • Develop once, support multiple devices – this has a massive effect on cost of multi-platform development
  • Many core device APIs exist inside PhoneGap such as camera, file system, gps and more…
  • Developing a completely unique interface is as easy as developing a website interface
  • PhoneGap device support is wide ranging: iOS, Android, Windows Phone, Blackberry even WebOS and Symbian support (only for the most hardcore developers)!
  • PhoneGap is open source and the community is huge therefore addons and plugins are developed regularly to improve and add to the existing APIs

Case Study: Facebook

Facebook’s original iOS and Android apps were built on a very similar development model to PhoneGap loading everything in to a webview. As stated above developing in this manner has its upsides and downsides but before making a decision from a business point of view you must weight up the Pros and Cons. Although Facebooks original app was reasonably snappy and did the job, as Facebook expanded it became extremely obvious that the toolkit used wasn’t up to handling the volume of data being pulled in to it.

Getting started with PhoneGap

Okay, so what tools do you need to get started with developing apps?

I’m going to assume that you are a mac user and therefore have access to a copy of Apple’s xcode software – as long as you have the iOS SDK with xcode you will have access to a device emulator. Windows users, developing iOS apps isn’t quite as easy – for that there are services such as PhoneGap Build. If you’re developing for Android specifically you will need to download the eclipse IDE, Android SDK and several other plugins. I can’t put this any simpler: It’s a nightmare! Quick tip: If you can avoid it, don’t use the Android Emulator – it’s horrible, go to the shop and buy a Nexus 7 and use on device testing – in the long run it will save you many headaches and stressful moments.

I’m not going to run you through the setup process for PhoneGap projects, they provide full documentation on how to get up and running here:

http://docs.phonegap.com/en/2.6.0/guide_getting-started_index.md.html#Getting%20Started%20Guides

Glenn’s top tips:

  • Develop as you would for a mobile website, set your meta tags to set initial screen size and lock the scale etc…
  • Do all your initial testing in a browser rather than deploying to device/emulator to test every build
  • Develop your application to run at 100% width – it will then scale nicely for tablet devices
  • Always follow native design patterns (iOS design patterns, Android apps aren’t the prettiest apps out there … Although they are getting better!)
  • Use jQuery to handle your ajax calls and DOM manipulation
  • NEVER use jQuery animations, they look poor. CSS3 can handle small animations.
  • Use jQuery to pull in content based on the current hash and dynamically reload
  • ALWAYS use ajax loading icons (also named Throbbers…)
  • For debugging in the app use Weinre http://debug.phonegap.com/ or if on iOS emulator you can debug with safari – if all else fails, console log EVERYTHING!
  • Use deviceready for initial load, not Document/Window.ready (this is a phonegap specific call)

Things to remember:

  • Your phone isn’t the powerhouse your desktop computer is
  • You will never replicate a native UI perfectly

Stupid quirks!

So I found a problem with PhoneGap when developing my latest app, if your first page (index.html) sends a call to the web to pull down some information and you have a very poor internet connection it will pop up a horrible dialog box, scream at you and shut the app down.

The exact error message is:

Application Error - The connection to the server was unsuccessful. (file:///android_asset/www/index.html) 

To get around this, there’s a fix as horrible as the bug…

Rename your index.html file main.html and create an index.html file with nothing but:

<script>
    window.location='./main.html';
</script>

From my testing I found that this appears to only affect Android apps.

I know, it’s a horrific workaround but please don’t shoot the messenger!!

Icons and splash screens

Getting your icons and splash screens working sounds like a simple task, let me tell you – the documentation on sizes and locations sucks. Below I’ve documented the requirements based on many days of trial and error.

Android

Splash screen

  • Stored in Project/res/ and Project/bin/res/
  • 4 sizes: 1024×600 (ldpi), 1280×800 (mdpi), 1536×1152 (hdpi), 2048×1536 (xhdpi)

Icon info

  • Stored in Project/res/ and Project/bin/res/
  • 4 sizes: 36×36 (ldpi), 48×48 (mdpi), 72×72 (hdpi), 96×96 (xhdpi)

iOS

Splash screen

  • Stored in Project/Resources/splash
  • Multiple sizes: [http://docs.phonegap.com/en/2.2.0/cordova_splashscreen_splashscreen.md.html](http://docs.phonegap.com/en/2.2.0/cordova_splashscreen_splashscreen.md.html)

Icon info

  • Stored in Project/Resources/icons
  • 4 sizes: 57×57, 72×72, 114×114, 144×144

A good friend of mine wrote a little article on GitHub to do with icon sizes and splash screen sizes, take a look here:

https://github.com/AndrewHathaway/iOS-Web-App

Useful CSS

Disable text selection:

As it says on the tin, if you don’t want users to be able to highlight and copy text:

-webkit-user-select: none;

Disable tap highlighting:

When you tap a link or a button in a mobile browser by default it adds a highlight for visual feedback, which is very helpful but if you must remove it, or you want to change the colour this is how you do it:

-webkit-tap-highlight-color: rgba(0,0,0,0);

Disable callout:

When you touch and hold an element webkit will display information about the link, if you want to disable this simply use:

-webkit-touch-callout: none;

Overflow scrolling:

If you are using fixed elements and fixed height elements with overflow:scroll, you may find the performance to be particularly choppy on your app, 9 times out of 10 this simple line of CSS on your overflow element will fix this:

-webkit-overflow-scrolling:touch;

Useful HTML:

Viewport meta tag:

Make sure your application displays correctly by using the following tag:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Other resources

http://mobile.tutsplus.com/tutorials/phonegap/phonegap-development/)

http://www.adobe.com/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android.html

http://www.netmagazine.com/tutorials/getting-started-phonegap

And that’s it! Congratulations if you made it this far – I hope some of my tips helped you, if you have any further questions I’ll be happy to help you in the comments section below.

Happy developing!