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 ?
It sounds to me like you’re just wanting to build a mobile version of a website. You only need a native application if you’re trying to access device features (file access, camera, phone, SMS, record audio, etc.).
If you need to access any such features, then you have to build a native application and you have to pay Google the $25/life and Apple $100/year fees, regardless of how you build the app(s).
=)
Todd
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?
I had this same issue and I have found the solution. In utils.js … this code:
$.get(‘templates/’ + name + ‘.html’, function (data) {
that.templates[name] = data;
index++;
if (index < names.length) {
loadTemplate(index);
} else {
callback();
}
});
should be replaced by:
$.ajax({
type: 'GET',
url: 'templates/' + name + '.html',
dataType: "text",
success: function (data) {
that.templates[name] = data;
index++;
if (index < names.length) {
loadTemplate(index);
} else {
callback();
}
}
});
This issue is related to:
http://stackoverflow.com/questions/9310906/get-is-returning-object-document-in-iphone-simulator-with-phonegap
Thanks a lot.
So wired issue. Strange is the same code works fine on Browsers but after packaged with PhoneGap same is not working.
I tried same for @ 12 hrs.
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?
Hey,
I’m actually having a caching issue with my app on the android as well. I have not tested it on my iPhone so not sure if same thing occurs on IOS. Anyone find an answer to this problem? I’m using Django / Tastypie / Pusher and cross domain headers to expose the API and then hooking into it with Backbone / Jquery and pusher.js. Everything works fine – tested in all browsers… Websockets automatically update with new messages etc… however on the Android the cache has to be cleared each time for a new message to show up – additionally, any messages I add in the apps interface do not show up in the list either..
anyone? Thanks,
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
Hi krishna, here you go http://bit.ly/uM5WwN
So I am new to this method of writing apps and javascript in general. I understand much of what is going on in the wine cellar app. One question that is stumping me is how the binding of the html templates to the view is happening in the mobile version? I can see in the desktop version that the binding is explicitly handled, but here it seems a bit buried.
re an adult, then you definitely must be eating a minimum
of 1200 energy per day. You may additionally try out aerobics providing you
sweat and you maintain your blood pumping, emotion the heat circulate inside your human body
then you certainly are on your own approach to shedding
body fat. This is even more genuine for a man or woman struggling from
melancholy.
Unquestionably believe that which you stated. Your favourite reason seemed to be at the web the easiest thing to have in mind of. I say to you, I definitely get annoyed even as people think about concerns that they plainly do not realize about. You managed to hit the nail upon the top as well as defined out the entire thing with no need side effect , other folks can take a signal. Will likely be again to get more. Thanks
This piece of writing provides clear idea in favor of the new viewers of blogging, that
really how to do blogging.
Hello,
Its good and even great. I am working with backbone apps development.
But how can I access sms and other things of mobile system using backbonejs and phonegap.
I need to fit in many solutions.
I would like to play with the Phonegap/mongodb inegration of this, but the Android and IOS folders you mention seem to be missing from the zip file and the links are dead =(
Dude, you rock. Seriously – thanks for posting this, you saved me a bunch of time :D
Nice App. I used this sample application and found it very helpful for learning both slim and backbone frameworks.
But one issue is there in this application : The image upload system is not working.
Please let us know if there is any fix or alternative available so that it will work as supposed.
Thanks again for the tutorial :)