Market day - Google Play

Here's the claim from PhoneGap (http://www.phonegap.com/):

"Developing with PhoneGap gives you the freedom to create mobile applications for iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada and Symbian using the web code you know and love: HTML, CSS and Javascript."

So lets try. We can take our cross-browser web app and convert it into a device specific or native app - hmmm, which one? Ideally i´d like to publish to the following: AppStore (iPhone/iPad), AppHub (Windows Phone 7), AppWorld (Blackberry) and GooglePlay (Android), but there's a developer fee to pay: AppStore (100$), AppHub (100$), AppWorld (200$), GooglePlay (25$). On closer inspection it looked as though I could register for AppWorld for free given that the iLearnPad app is free, but then I discovered that I couldn´t logon - my account had been disabled. So in the end I chose to register with one app market, GooglePlay:

http://developer.android.com/index.html | Links | Google Play Developer Console

I followed the instructions from PhoneGap for setting up an Android Project:

http://www.phonegap.com/ | Getting Started Guides | Getting Started with Android

and found that having enabled the web app  to make use of HTML5 mp3 audio it didn´t work from the Android Emulator:

http://developer.android.com/sdk/index.html

Instead of the HTML5 Audio element or object we are able to make use of the PhoneGap API Media object, which works in a simlar fashion - just pass it the audio file to play. So instead of:



we have:



From the Eclipse Integrated Development Environment (IDE) we can build the iLeapPad project and see it run as a native app from within the Android emulator:

OK so we have our native app or .apk, a compressed file containing for example

a) our assets - sound, images, css and js files,
b) our resources - application icons and
c) our signing information contained in .SF and .RSA files - each app must be signed with a password protected private key createable from within Eclipse using the application export function.

Now we need to upload it to GooglePlay.With every new upload we need to provide marketing information such as:

• App screenshots (x2)
• App logos or icons (x3 with differing dimensions)
• App title
• App description
• Latest "features of"/"bugs fixed in" app description
• Advertising description that helps draw people to your app
• App classification - a bit like a cinema film classification - all, low/middle/high level
• App category e.g. photography, learning,
• Price
• Availability in terms of countries and
• Developer contact details e.g. website, email address.

There we have it:



and here´s where the app in Google Play lives:

https://play.google.com/store/apps/details?id=KGRSystems.iLearnPad.ryanki1

The source code for the project can be found at:

https://github.com/ryanki1/iLearnPad

*** You have reached the end of the blog "iLearnPad - Taking a Web App to the Marketplace" - let me know if you found it helpful or if you have questions :-) ***

Bugs fixed in Windows Phone 7?

With a little experimenting templating is now working:

(a) the main page is being  generated from static HTML as a jQuery-Mobile (jQM)  page with header, footer and content as a jQM (unordered) listview <ul>...</ul> with list item link content <li>...</li> being dynamically generated for each picture.

Here´s the static HTML to which each link is added:




Here's the dynamic part that gets fed to Underscore to fill out the <%= %> placeholders and when done to enclose the outermost div block of the "cartTemplate" within an li element and add to the above <ul> element with id "menuContent":



(b) the content pages of pictures with sound are being added to the body element of the page as jQM  pages with header, footer and content containing img and usemap elements.

Here's the static HTML to which each picture content is added:


...


Here´s the dynamic part that gets fed to Underscore to fill out the <%= %> placeholders and when done to enclose the 3 outermost div blocks of the "itemTemplate" within a div element marked as a jQM page - data-role="page" - and add to the above <body> element with id = "pages":



So lets see the jQM-style result in the browsers, this time without sound but with a pop transition on picture selection and with splash screen from:

http://tutorialzine.com/2010/11/apple-style-splash-screen-jquery/

Windows Phone 7 (SDK 7.1 emulator)

Conclusion:Works well - big improvement from before. Picture selection fine. Transitions are not particularly convincing - flip back from picture to main menu for example is weak.

Android (AVD Manager v 4.1 emulator)

Conclusion: As before works well. Transitions much better than before - flip, for example, more convincing - but there's a transition flicker on initial selection of a picture.

iPod touch (simulated with Safari Desktop Browser)

Conclusion. Still works well. Still the most polished of the browsers.

Overall Conclusion: JQM with Backbone and Underscore have helped create a viable cross-browser app with a consistent look and feel. This approach has fixed the bugs previously found in Windows Phone 7 - good news :-) Its not perfect, though, and we'll have to wait on future jQM releases to improve the experience of transitions on Windows Phone and Android for example, but the app is perfectly useable. Next stop add sound and publish to App Marketplace.