An Android App using HTML5/CSS3/JS

2012-07-19

So I’ve started this site and blog as I’ve been planning on making some mobile apps for some time. I half-finished a fairly simple native Android application which was just a basic music player. Coming from a mostly web development background I wasn’t overly fond with the way elements are laid out within a native Android application and I felt a bit restricted. In the end I decided to take a different path and stick to what I know with the intention to wrap it up using something like PhoneGap to deploy it on the Android store (Google Play).

This would allow me to experiment and learn some new libraries/frameworks I’d been itching to try out, I just needed to decide what app to make. In the end I decided on a book cataloging/searching app. It’s not going to set the world on fire with excitement but it came from a personal need since switching from paperback reading to using a kindle, I wanted a way to easily carry around details on all the books I’d read so far (paper or digital) and use them to get suggestions for future reading.

I decided I’d use amazon’s API to search by terms or authors hence getting back a list of books and their details. From the list a user could drill down into a particular book and add it to their read books or future reading list. Each book would have a handful of suggestions for similar reading and also the ability to buy the book (by sending the user off to Amazon).

The app has allowed me to experiment with a lot of technologies, frameworks and libraries and I’ll be starting to document these parts for anyone that is interested in coming posts. As is clear from the title of the post, the app has been written in HTML/CSS/JS. Interactions rely on the Knockout JS and jQuery libraries, data is kept in the app using HTML5 local storage, communication with the Amazon API is via AJAX calls to a server-side proxy on Google’s AppEngine (This is responsible mainly for signing requests and converting the XML response into JSON). Layout and buttons/icons use twitter’s bootstrap CSS while transistions between ‘pages’ (really it’s a single page app) are kept track off with the HTML5 history API.

Hopefully fairly soon I’ll be putting up the app on the google play store so I can go through the whole development and publishing experience before creating future apps. Stay tuned as I hope to expose the whole process to help out anyone else doing similar stuff. Surprisingly the hardest part has been trying to settle on a name for the app. Not because I’m lacking ideas either, just that almost all of them are taken. I didn’t realise many had already created somewhat similar applications already.


Comments: