Tuesday, 18 June 2013

Using PhoneGap Build with a Durandal SPA

Been spending a bit of time recently looking at JavaScript frameworks, and having a prototype project avaialble as an excuse to work on something, built a small application using Durandal. Have been concious recently that my front-end code wasn't nearly as structured and well organised as that I would write on the server side, and found this a great library for helping organise this code into modules. It also utilises knockout for UI binding via view models and views.

Mostly the app runs as a SPA, though the prototype had an additional requirement to support offline access on devices. To support that I planned to package up the app using PhoneGap.

That's the background... mainly though for this blog post wanted to record some links and notes for getting set up with this framework, and in particular the phonegap build service.

Firstly I looked to use local PhoneGap. To get running found a couple of handy links:

Basic steps are:

  • Install JDK
  • Install ANT
  • Install Android ADK
  • Set PATH variables for java, ant and android

I went a bit further with that but had lots of problems with the emulator. Very slow and often failed to load. Maybe I need a new laptop but instead decided to turn to PhoneGap build and deploy direct to my device (a Samsung mobile running Android).

Getting started with this is very straightforward. Sign up using a Github account. In terms of code the only change I initially made was to add a script reference to phonegap.js - you don't need the file though, the service places the appropriate one in when compiling for each platform - and then upload a zip file of the SPA files.

Once build complete you can download the .apk for Android. Some other platforms weren't completing due to missing keys and config file - but can get to that later as the Android one was OK.

On the mobile device itself had to make a couple of setting changes under Applications:

  • enabling "unknown sources"
  • enabling USB debugging

Having already installed and setup the Android SDK could then use the command line to install to the device once connected via the USB port.

Firstly to check the device is found:

adb devices

Then to install:

adb install -r [path to apk file]

The -r flag ensures the app is overwritten even if it is already installed

For debugging the following command reveals the javascript logging:

adb logcat -s "CordovaLog"

In order to test in a browser the Ripple Emulator Chrome plugin is a useful tool. It implements a number of the PhoneGap APIs so you can test without installing on the device.

2 comments:

  1. Were you able to get things up and running with Durandal and Phonegap Build? I've been really struggling with getting the startup code correctly - see this Stack Overflow question: http://stackoverflow.com/questions/19506639/how-to-get-started-using-phonegap-build-with-a-durandal-spa-app

    (Hopefully links paste ok in your comments section!) Would be awesome if you could post a skeleton of your code and how you wire up to 'deviceready'.
    Thanks!

    ReplyDelete
  2. Hi Andrew

    The project I was working on was a while back, and never got past the prototype stage, but if it helps...

    In my index.html I had the reference to phonegap.js in the head.

    And then at the bottom of the body I had the references to the various durandal scripts and finally the start-up script:
    <script type="text/javascript" src="app/durandal/amd/require.js" data-main="app/main"></script>

    In my main.js all as as normal except I'd commented out app.adaptToDevice().

    Hope that helps.

    Andy

    ReplyDelete