Sample Mobile App with Backbone.js and PhoneGap

February 6, 2012 in Android, Backbone.js, HTML 5, iOS, PhoneGap

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:

  1. Package an HTML application as a native app on all the key mobile platforms (iOS, Android, BlackBerry, Windows Phone, WebOS, Symbian, Bada).
  2. 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.

  • Pingback: Sample Mobile App with Backbone.js, PhoneGap, and a Local Database()

  • Pingback: CityGrid Media Developer Center – Wine Cellar Mobile Starter Application with PhoneGap and Backbone.js()

  • Pingback: Cheatsheet: 2012 02.01 ~ 02.08 | 编程()

  • 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

    • Christophe

      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 ?

    • Chaos7703

      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

  • Corey

    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?

  • Pingback: Sample Mobile App with Backbone.js and PhoneGap - Rendition Multimedia()

  • Shruti

    After running the android project the output in emulator comes blank.Why this happen..What mistakes i have done?Please tell me

  • Shruti

    After running the android project..output is not coming in emulator..can u tell me the reason behind that..

    • Girish

      yes me too same issue.

  • Pingback: Build mobile apps faster with PhoneGap - Maxoffsky |Maxoffsky()

  • Darrell Booker

    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?

    • Darrell Booker

      update….I narrowed it done to html in the header.html template. If i remove it, it works. I’ll investigate further

      • Darrell Booker

        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?

        • Uri

          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

          • Mayur

            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.

          • Girish

            replaced with your code but still getting blank..no change

        • I was curious if you ever considered changing the page
          layout of your website? Its very well written; I love what youve got to say.

          But maybe you could a little more in the way of content so people
          could connect with it better. Youve got an awful lot of text for only having one or
          two pictures. Maybe you could space it out better?

  • Calling all Technology Professionals

    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,

  • MattG

    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.

  • krishna

    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!

  • krishna

    by the way would it be possible to reply directly to my email……
    bavishkrishna@yahoo.com

  • Drake

    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

    • When some one searches for his necessary thing, therefore he/she needs
      to be available that in detail, therefore that thing is maintained over here.

  • This piece of writing provides clear idea in favor of the new viewers of blogging, that
    really how to do blogging.

  • Pingback: Node.js « irakasle ibiltaria()

  • tejas tank

    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

  • Mak

    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 :)

  • Chiheb NABIL

    nice backbone App , i want to run the the back end [api folder ] on my localhost i cant ?!
    404 Page Not Found

  • Girish

    When I run this application,I am getting ClassNotFoundException. Please tell me the solution.

  • Howdy! I know this is kinda off topic however , I’d figured I’d ask.
    Would you be interested in trading links or maybe guest authoring a blog
    article or vice-versa? My site goes over a lot of the same
    subjects as yours and I believe we could greatly benefit from each other.

    If you happen to be interested feel free to send me an email.
    I look forward to hearing from you! Great blog by the way!

  • There are various of motives which is often attributed to
    this kind of undeniable connection. Naturally the average wage can continue
    to comply with Clash of Clans Hack to the foreseeable future.
    Your personal push appears to be struggle to comprise the
    mind with these concerns which unsettles traders. In order to offer one of the wonderful politics analysts
    Odysseus Bootlegger ‘The achievement regarding any kind of politics process can certainly merely
    absolutely possibly be looked at once the weight
    female offers sung. a Incredibly, he / she new almost nothing
    of Clash of Clans Hack until eventually this individual seemed
    to be well straight into his / her thirties. I find myself firmly that if people in politics spent much less time period planning on Clash of Clans Hack as well as
    placed far more effort into their family members existence, that individuals would certainly use a diverse
    region.

    The reason why do Clash of Clans Hack cross punch the trail?
    – To go to the other area! Simply the little laugh, yet why don’t we hope that will Clash of Clans Hack does not motivate
    similar hilarity in the next elections. I think Clash of Clans
    Hack must not be allowed to get with respect to the greater dilemma: precisely why are generally we all in this article?
    Positioning that besides their of fantastic relevance.
    That confirms order, generates ‘fires’, plus it
    provides the very best available in individuals.
    Let me get away from the last word on the famous Beyonce De Niro: I
    require Clash of Clans Hack, absolutely nothing much more absolutely
    nothing a lesser amount of.

  • quality, reliable, cost-effectiveness and the associated jobs are done imalattan.profesyonel team

  • Tüm Plastik ürünlerimiz, Anti-bakteriyel içermektedir. Sağlığa hiç bir zararı yoktur.
    Tüm Plastik ürünlerimiz tamamen kendi imalatımızdır. Sipariş üzerine Her türlü antrenman malzemesi uygun fiyatlara temin edilmektedir.

css.php