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!

39 thoughts on “Introducing “Walkable” – A New Sample App for PhoneGap”

  1. 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

  2. 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.

  3. 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.

  4. 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

    1. 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.

  5. 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!

    :-/

  6. 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.

    1. 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.

  7. 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.

  8. 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.

    1. 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.

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

  10. 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

    1. 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.

  11. 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.

  12. 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?

    1. 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.

  13. 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 =)

  14. 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.

  15. 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.

  16. 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

  17. 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.

  18. 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!

  19. 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!

  20. Hi,

    Thanks for sharing your code. When I try and run it I only get the initial screen with the beans and leafy veggies and the activity indicator and nothing else happens. It seems the onDeviceReady function is not being called. Any pointers would be very helpful.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>