Introducing “Walkable” – A New Sample App for PhoneGap

I’d like to take a moment and introduce “Walkable Restaurants” (or just “Walkable” as I like to call it), a new application that I built to demonstrate how to create PhoneGap applications using Backbone.js.

Walkable Restaurants provides you with an easy way to find a bite to eat or refreshing drink anywhere in the US. Either select a type of cuisine, or enter a search phrase, and the Walkable Restaurants app will find destinations that are nearby.  Only destinations near your current location will be returned in your search result. If we are able to calculate travel times based upon walking and train schedules, then we will only return destinations within a 20-minute walk. If we are not able to calculate walk time, only destinations within 2.5 miles of your current location will be displayed.

Walkable Restaurants is available today for FREE in both Apple’s App Store and on Google Play, so go download it now!

        Get it on Google Play

Code Organization

The code for this application uses Backbone.js for client-side JavaScript Model-View-Controller patterns. Backbone.js provides separation of concerns (discrete, reusable classes, with separation of view logic from application logic). However, in this example I am not using Backbone’s data binding features – these enable your views to auto-update when your data changes.

Backbone is built on top of Underscore.js, and leverages Underscore’s templating engine to separate HTML string concatenation from application logic.

Open Source

The Walkable Restaurants application source code is freely available and open source on GitHub at: https://github.com/triceam/Walkable-App

Application source code is intended to be used as a learning tool for building PhoneGap applications using backbone.js, but there are no limitations on its use following the MIT license.

Open source libraries used in this app include:

Data Services

All walking/travel time distance calculations are obtained through Travel Time, by Igeolise. This service calculates travel time between geographic locations based upon walking, driving, and mass transit systems.

All point-of-interest (POI) information is obtained through services provided by factual.com. This application uses the U.S. Restaurants data set, which provides information for over 800,000 restaurants across the United States, including location, price ratings, cuisine, and more.

The server-side portion of this application simply aggregates data from Factual and Travel Time, and is developed with node.js, using the expressjs framework.

Also, I almost forgot – Many thanks to Tony Weeg of Revolution Web Design, who I used as a sounding board for UI design & layout ideas for this app!

  • http://www.applicationnexus.com/ Rahul

    Thanks for sharing. We are engaged in taking Phonegap to new heights, creating something as good as native development and well at point even taking it to far ahead than native development because of the webishness of Phonegap :) You releasing the app in OpenSource is what matters a lot since it will now help many to imagining a bigger picture for their app. Long live Phonegap and longlive OpenSource

  • Hayk

    it’d be nice if you implemented some local database functionality, for demonstration purposes.

    could be used to keep a running favorites collection in order to cache regular locations for easy access.

    • http://www.tricedesigns.com Andrew

      Thanks, that’s great feedback!

  • Clement

    I’m new to Backbone.js and Node.js.
    No problem for me in integrating the client part to a Phonegap project.
    For the server part, will you give me some advices ?
    I use Wamp on Windows, how do I connect from the client if I deploy the server part in the www directory ?
    Thanks.

    • http://www.tricedesigns.com Andrew

      For the server part, the javascript file “server.js” contains the server logic. Node.JS is a platform that enables JS on the server side, available at http://nodejs.org/. In this case, you wouldn’t need the WAMP stack, just node.js.

  • Pingback: Andrew Trice » Blog Archive » Presentations From Dreamforce 2012

  • stanley

    Thanks for sharing the application source. I would want to know if you can extend this to cover the offline storage aspect. This can be a form of another tutorial.

    Thanks

    • http://www.tricedesigns.com Andrew

      You’re welcome! I may update it to include offline capability, but it will be a little while before I will have free time to update the example.

  • Pingback: Andrew Trice » Blog Archive » Automated UI Testing in PhoneGap Apps

  • http://www.cristianbullokles.com Cristian

    Did you had problems with iScroll and inputs?
    I’m working in a project similar to that, but I’m experiencing some issues to get focus in input fields.

    • http://www.tricedesigns.com Andrew

      Yes, I modified iScroll to ignore inputs so that you can focus on them. With my changes, you can’t scroll by dragging on an input, but I find that better than not being able to set focus on the input.

  • Israel

    Hi! I have a similar project!!
    Could you help me on how to run the source. Not how to integrate each of the components in order to compile!

    :-/

    • http://www.tricedesigns.com Andrew

      Follow the “getting started” instructions at http://docs.phonegap.com/en/2.1.0/guide_getting-started_index.md.html. Once you have your basic project up and running, just copy the client HTML/JS/CSS files into the new project’s www directory. The HTML//JS for PhoneGap applications are not compiled. They run within a system web view on the target operating system.

  • Krishna

    Is the server part hosted (heroku/cloud foundry) for the appstore versions ?

    • http://www.tricedesigns.com Andrew

      Yes, I have it hosted by appfog, using the free nodejs server tier.

  • http://Website Pierre

    Great help to learn how to build well organized phonegap apps. Thanks!

    I have a question tough: would you see any reason why it is not building for Windows Phone? I’ve successfully deployed on iPhone and Android emulators, but the Windows Phone one show an empty grey screen.

    I followed the getting started guides from phonegap/cordova.

    • http://www.tricedesigns.com Andrew

      It is probably a JavaScript error on Windows Phone. I only targeted and tested iOS and Android for this sample. Win Phone uses an older browser, based on IE 8 (i think), and the API & device capabilities are slightly different.

  • Arjan

    Can’t seem to get past the initial loading screen. The loader keeps on rotating. Do i need to change any settings on first copy of the www-folder?

    Got the latest phonegap & ios6.

  • Arjan

    Solved it, used your version (cordova-2.0.0) instead of the proper one (cordova-2.2.0).

    • http://www.tricedesigns.com Andrew

      Great! I was just typing a response that it was probably the cordova.js file, and saw you already got it.

  • DaveWells

    Please please make an offline version of this app? If not how could I make it so? Love the structure of the app but don’t necessarily want database read in features.

    • http://www.tricedesigns.com Andrew

      Unfortunately, I don’t think I can legally do that. The app is using a data service that I don’t control. All of the data is being provided by APIs from http://www.factual.com – I think it would be a violation of their terms of service for me to keep their data locally.

  • http://colnet.ca Charles-J

    Did anyone find another tutorial (phone gap + backbone.js + jQuery + underscore.js) without the server side ?

    I’m looking for a template I can use to start doing an application with Phonegap

    Thanks a lot : )

  • Martial

    Hi Andrew,

    Thanks a lot for sharing about PhoneGap and App-UI.
    I am really impressed about your work about App-UI and backboneJS usage with it.
    Will certainly be my app container for my next project, but i would like to know if there’s an way to add per view tabbars and navbars. I trying tweak your code in some ways, adding css and html is ok but don’t know how to figure out all events and actions footer/tabbar management

    PS : please keep on sharing and give us more Backbone.JS examples :-)

    Martial

    • http://www.tricedesigns.com Andrew

      Thanks! Glad you like them. I have a few more I’m working on now. I just need some dedicated time to finish them… If only there were more hours in a day. :)

      I’ve added footer elements inside of the views, just make it a child of the main view inside of the view navigator. I do have an example of this coming very soon.

  • Alex

    Andrew, thanks a lot for taking the time to create and post this. It has been very helpful to me.

    For those with questions regarding Cordova versions, I was able to get things working Out Of The Box ™ with Cordova 2.4.0 by just swapping out the .js file and updating index.html.

  • http://www.diackdevelopment.co.nz Peter Diack

    Hi Andrew,
    just wanted to say thanks for opening up your app projects and examples they’ve been a huge help. I’ve spent the last 6 months getting my head around phone gap. Your examples particularly the food market app have accelerated my learning.

    Im trying to get the walking restaurants up and working but cant work out how to emulate the server side aspects – node.js, on my local setup – Xcode. Any help would be greatly appreciated?

    • http://www.tricedesigns.com Andrew

      Hi Peter,
      Just download nodeJS and run the server from the command line: node server.js You’ll need to update the Factual API key in your server code. The client-side app will then make requests to the server. You’ll also need to change the server URL is at the very top of SearchManager.js inside of the client app.

  • Joe

    What links the web server files to the device’s files? I don’t see any reference to an IP address or a domain name.. I’m probably blind. Haha

    App looks great by the way, I actually used it to find a sushi place today =)

    • http://www.tricedesigns.com Andrew

      Thanks! Look in SearchManager.js. There is a url at the very top of the file. Just change this to point to another server instance.

  • Hans

    I just started with Phonegap still a novice and have quite a few questions hopefully someone can help
    I was able to run this in Xcode and the simulator but every time I try a search I always get
    “No resutls could be found matching your search criteria. Please refine your search”
    I got a Key and Secret from Factual added it in ‘server.js’ is there anywhere else it needs to be entered,
    and figured I need one for Traveltime too I see they have 3 products which one to get and where to put it.
    I am a bit confused with all the files not sure of what they all do, any help would be appreciated.

  • asifa

    Andrew Thanks you so much. I am trying to do a news app where the data should be pulled dynamically at runtime from database. The back end is Microsoft SQL server. What would be the best way to pull data at Runtime, I would appreciate any gudeance.

  • Pascoual

    I guess the new version of “Fresh Food finder” will use the new code organisation you talk about here.

    I’m just about to start a new web application (Django) mobile (PhoneGap). And can’t help thinking about your new design (UI and UX).

    Can you tell us more about it ? Did you keep the same libs (PhoneGap, Twitter Bootstrap, Leaflet, Backbone.js, App-UI (off course), Underscore.js, jQuery, iScroll) ?

    Thanks a lot for your work and sharing.

    Pascoual

  • Jithesh

    Hi Andrew,

    Is it possible to view this app on a webpage, i was trying to invoke this app from my browser and running node.js. Really appreciated if you can let me know, i wanted to try out locally first.

  • gurunathan natarajan

    hi Your App Simply Super . I want To know How You use header in your Project . What Code You used ,

  • Indio

    Hi, thanks for sharing,
    I;d like to try the application but i live outside US so i can’t fine any restaurants or maps. In order to obtain results, can someone suggest me good US coordinates to simulate GPS? Thanks!

  • nick

    Hi, thanks for creating this app. I’m located in Los Angeles and I tried using your app. I get an error: “index.html ReferenceError: Can’t find variable: address” Hope that helps!