Saturday 1 September 2012

LibraryThing, Android and a cool ZXing barcode feature

I use LibraryThing to manage my personal book collection.  Its a handy way of tracking what books I've bought and what I've leant out to folk.  What I really want though is to be able to check LibraryThing quickly and easily whilst I'm schmoozing the shelves in the local second hand book shops, mostly so that I don't accidentally buy another copy of a book I've already got (again!).

Luckily I've usually got an Android phone sitting in my pocket, which has a camera (two actually) and the handy ZXing barcode scanning app installed.  I've played with the barcode scanner using Perl under SL4A and was able to capture ISBN barcodes and check them against a list I held on the phone.    However the script was rather basic and getting my collection data out of LibraryThing would be a bit of a pain, as the SL4A version of Perl has neither a copy of the LWP web access module, nor a (working) version of CPAN with which to install it.  It does have IO::Socket so I started along that track to build a pure Perl client from the ground up - a bit long winded but doable.  Writing a decent UI in Perl using the Android API exposed by SL4A would be a bit of a pain though.

However last night I got distracted rereading the online version of a book I'd read in paper form when I first got my Android phone: the excellent  Building Android Apps with HTML, CSS, and JavaScript by Jonathan Stark.  This describes how you can optimise web pages to the Android platform using HTML 5 and JavaScript and, more importantly, then use those pages as the basis for a native app.  So this morning I sat down and had a bit of a tinker.

Its surprisingly easy to knock together something that looks fairly respectable quite quickly, especially as you can crib from Jonathan's existing code frame work.  Within an hour or so I'd got a simple web page using JQTouch running that allowed me to fetch my LibraryThing collection (using their JSON Books API), list the works on that I've got in my collection (including pulling cover art from LibraryThing where available) and check if a book is in my list by manually entering its ISBN.  Jonathan explained in the book how you can use localStorage and the HTML 5 database features to provide stand alone storage on the phone, and the JQTouch provides exciting UI animations, etc, whilst allowing the use of the JQuery compatible(ish) Zepos library to handle the AJAX/JSONP stuff.

So that's the heavy lifting done for talking to LibraryThing: now how do I get barcode scanning to work?  Turns out after some researching there's several options (probably even more than this if I really put my mind to it - for example the hardcore Java coders would probably add hacking up their own version of ZXing to the list):

  1. I could turn the HTML/JavaScript/CSS into a native Android app using PhoneGap.  This has several advantages: you can access the barcode scanner directly using a PhoneGap extension, you won't need a network connection whilst scanning if you've already downloaded a local copy of your LibraryThing collections and you'll end up with an .apk archive that folk can easily download and can be put on the Android marketplace (or Google Play or whatever its called this week).
  2. I could go back to the SL4A Perl script and use the HTML/Javascript/CSS as a front end (or replicate it using the SL4A UI calls) and then call the barcode scanner Intent from there.  Bit messy and it wouldn't be terribly easy to give to other people.
  3. Stick with the web delivered application and make use of a cool feature of ZXing that I've only just come across today: ZXing intercepts links in web pages that have a target of zxing.appspot.com/scan, and either fires up the barcode scanner or asks the user if they'd like to install it to use.  Assuming the barcode scanner is installed and working, you can then scan a barcode which can then gets sent to a URL of your choice.  This does mean that there's a need for a server side application to collect the scanned data, but I'm wondering if I can work round that using some sort of local URL to the phone. More playing needed really - at the moment I've just tested the system by pointing ZXing at the LibraryThing works URL once it has captured a barcode and that seems to work fine.  Apparently there's a similar URL that you can using on iOS devices that have ZXing installed (but I've not got one of those so can't try it myself).
  4. Forget the whole thing once I'd realised that the standard ZXing barcode scanner app has the ability to have a custom search URL defined which can be set to "http://www.librarything.com/isbn/%s".  Then clicking on the custom search button once a barcode has been recognised will whisk you off to LibraryThing, which (at least for me) automatically logs me in thanks to stored cookies.  This works fine, though the downside is that you need a live network connection obviously.
In case anyone is interested I've popped the "ALT" web application online if you fancy playing with it.  Even if I don't go down the route of turning that into a native app using PhoneGap, its been interesting to see how far CSS hackery lets you tart up web pages for mobile devices - useful skillz to tuck away for the future no doubt.

1 comment:

  1. Great blog, this could be the best blog I ever visited this month. Never stop to write something useful dude!.
    Android application

    ReplyDelete