I recently blogged a tutorial (part 1, part 2, part 3, and postface) that takes you through the process of building a CRUD application using HTML and the Backbone.js framework. The application used in this tutorial is a Wine Cellar management app, and I thought it would be fun to create a Mobile version using PhoneGap.
PhoneGap — if you are not familiar with it — is an open source platform that allows you develop cross-platform Mobile applications using HTML and JavaScript. Specifically, it allows you to:
- Package an HTML application as a native app on all the key mobile platforms (iOS, Android, BlackBerry, Windows Phone, WebOS, Symbian, Bada).
- Access your device capabilities (Camera, GPS, database, accelerometer, etc) using a cross-platform JavaScript API.
Backbone.js is a great framework to give structure to your web application regardless of where it is running: in a traditional Web Browser, or as an app packaged with PhoneGap.
So, here is the app…
The UI is intentionally plain to keep the focus on the architectural framework. This is a simple ‘consumer’ version of the application: It allows you to look for wines in your Wine Cellar. The tutorial application mentioned above is an ‘admin’ version: You can create, update, delete wines in your Wine Cellar. Most of the code is shared between the Mobile ‘consumer’ version and the browser-based ‘admin’ version.
In this version, the application gets the data from RESTful services hosted on my server. In my next post, I will provide another version of the application that gets the data using a local database on your device.
Download
I added the source code for the mobile application to the backbone-cellar GitHub repository. You can download the zip file here. For your convenience, I created an iOS directory with the Xcode project and an Android directory with the Eclipse project. The core application is in the www directory (iOS and android) and it is the same code for both iOS and Android.
If you want to run the application on your Android device without installing the project, you can also download the apk file available in the bin directory.
Hi Christophe,
This is a desperation post and directly linked to your articles but here goes – a lot of users are asking for some feedback on the issue in the forum below and getting ignored and frustrated. I am reaching out to you here because you are an Adobe evangelist and have also been active using AIR / Flex for Mobile – could you maybe give us some other ideas of where to turn for some response.
http://forums.adobe.com/message/4206010#4206010
Sean
Sean,
I just reached out to Sanika and asked him to post an update on the thread.
Christophe
Hi Christophe, the way you are doing here is that we need to purchase license to ios platform store.
Is there any way we can use the API for accessing the device capabilities on the website?
I have been trying to setup a website to include jquery and phonegap for user to logon via smartphone so that they do not need to install the native app. and i also do not need to pay a licence fee for accessing app on the platform stores. Is there any ways i can do this ?
Your website is awesome. Thanks for the great tutorials. I’m looking around and have yet to see a great implementation of a jquery mobile app developed in PhoneGap that uploads files (images) to a server. Do you have anything like this in your repositories or tutorials?
After running the android project the output in emulator comes blank.Why this happen..What mistakes i have done?Please tell me
After running the android project..output is not coming in emulator..can u tell me the reason behind that..
So, I studied and followed the four part tutorial and got a great understanding of Backbone..works great. So, I then took my slightly modified version(different products than wine) PhoneGapped it and worked fine. So I then applied Twitter Bootstrap to my desktop version and it works fine. Problem came when I PhoneGapped this Twitter Bootstrap version. Im getting ‘ Uncaught TypeError: Object # has no method ‘replace’ at file:///android_asset/www/lib/underscore-min.js:28′, the crazy thing is that this same Phonegapped, Twitter Bootstrap version will run fine in my Chrome browser with no problems. Makes no sense! any ideas?? I believed I narrowed it down to ‘this.template = _.template(tpl.get(‘header’));’ Could it be that phonegap cant get the template using your template scripting method?
update….I narrowed it done to html in the header.html template. If i remove it, it works. I’ll investigate further
final update…it appears no html at all will work in the header.html template, so after comparing to your version I see that you removed the HeaderView initializing from the Router….did you run across this same issue?
Guys check this out….. If you have ideas on mobile apps for use on phones, submit ur apps a contest that gives you a chance to prove your mettle. Whether you are a professional developer or a student, every1 can submit their apps developed by using the Series 40 Web apps SDK and win.
Register today to submit ur apps….
http://bit.ly/ICUrkh
Hi, Thanks for an awesome post!
I am trying to build simple mobile app using Backbone.JS, jQueryMobile and Phonegap and I am having caching issue. Looks like models or XML HTTP Request data are cached when running app using Phonegap. When viewing this app from mobile browsers, everything works ok.
Have you expected this problem?
Hi Christophe,
I can’t seem to download the source for Android/iOS apps?
I don’t suppose you could point me in the right direction?
Thanks.
hi christophe,
I’m a student at a prominent university and just for experimental purposes i wanted to make a mobile application where i would be able to access maps, emails, notes etc through my mobile app. Well the major os that i plan to run it on is for the iphone, android phones, symbian os and bada etc.
so i would just like to ask for help on where to write my program and if there was anything that would be able to assist me through this. if possible would be able to provide me with a sample structure on the program which would help me write my own.
your assistance would be greatly appreciated!
by the way would it be possible to reply directly to my email……
bavishkrishna@yahoo.com