Introducing the Fresh Food Finder, an open source PhoneGap application

The Fresh Food Finder is an open source mobile application built using PhoneGap (Apache Cordova) that helps users locate local farmers markets that are registered with the FDA.  You can search for specific markets, or find the closest markets to your current location.   Check out the video below to see it in action:

It was originally intended to just be a sample application for app-UI with full source available here, but happens to be quite popular and useful in the “real world” as well.

In fact, the Fresh Food Finder made it all the way up to #18 in the iPad “Lifestyle” category on iTunes in the first week of its release, and even made one of the featured apps in the Lifestyle category:

All of the information displayed within the Fresh Food Finder is freely available from the US Department of Agriculture through data.gov. This data set was last updated on April 25, 2012.

The top request that I’ve received for the Fresh Food Finder is improved data, with market schedules. I’ve heard everyone loud and clear, and am happy to say that I have some improved data on the way (including schedules and times), so keep an eye out for it in the not-to-distant future.

The Fresh Food Finder is written entirely using HTML, CSS, and JavaScript, and runs on numerous platforms.  It is currently available for iOS and Android. I’ve submitted it for approval in the Windows Phone Marketplace, but it’s still awaiting approval.  I’ve also tested it on the BlackBerry Playbook, and it works great there too, but I just haven’t gotten around to submitting it to BlackBerry App World yet.

The Fresh Food Finder can be downloaded today in the following markets:

The Fresh Food Finder uses the following technologies:

  • PhoneGap: http://www.phonegap.com – PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores.
  • App-UI: http://triceam.github.com/app-UI/ – App-UI is a free & open source collection of reusable “application container” user interface components that may be helpful to web and mobile developers for creating interactive applications using HTML and JavaScript, especially those targeting mobile devices.
  • Mustache: https://github.com/janl/mustache.js – Mustache is a logic-less template syntax. It can be used for HTML, config files, source code – anything. It works by expanding tags in a template using values provided in a hash or object.
  • jQuery: http://jquery.com/ – jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
  • Leaflethttp://leaflet.cloudmade.com/ – Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps.

The entire user interface of the application is created dynamically at runtime based on JavaScript and the Mustache templates.  You can download the full application source code at https://github.com/triceam/Fresh-Food-Finder.  Feel free to fork it, or use it as a learning tool to build UI experiences for PhoneGap applications.

The code is organized into the following structure:

  • assets – This folder contains fonts, images, and CSS styles used within the application.
  • js –  This folder contains JavaScript resources and libraries used within the application.
  • views – This folder contains UI/Mustache templates.  Each template is within a separate HTML file.

When the application loads, all templates are loaded into memory as part of the bootstrapping/startup process.  Once all the data and templates are loaded into memory, the UI is presented to the user. The majority of the application logic is inside application.js, all views are rendered from the Mustache templates inside of viewAssembler.js, and all UI styling is applied via CSS within styles.css.

Mustache is a templating framework that enables you to easily separate presentation layer (HTML structure) from application logic and the data model.  Basically, you create templates that Mustache will parse and convert into HTML strings based upon the data that gets passed in.   I’ll write another post later about Mustache, but it can be extremely useful for larger applications.

Enjoy!

49 thoughts on “Introducing the Fresh Food Finder, an open source PhoneGap application”

  1. I can’t run it on windows phone.
    I created a cordova 1.9 project, copied the files, edited the cordova link (1.7 -> 1.9), uncommented the css for IE.
    I got only a grey screen.
    How did you compile for WP?

    1. I have a separate code fork for Windows Phone, which I have not release yet b/c it has not been approved my Microsoft yet. Once that is live, I will release the source code. There are several changes I had to make to get it to work in Windows Phone.

  2. can you share your work with windows phone?
    I can’t understand, how do you make ‘leaflet pan’ working?

  3. Hi Andrew, really cool Application. I am new at PhoneGap and want to run the application on my phone (HTC Desire HD). I have placed the folders in the structure in my Eclipse project, but theres nothing else like a “Hello World”. What should I do and where I have to place all the files?! Thanks!, Sirko

  4. … or do you have a good step-by-step guide for the installation of PhoneGap? On the PG webiste I visit the “Getting started”- Guide, but it has a other structure like your folders?! Thanks again, Sirko

  5. Hi, Andrew. In the description for this app (both in this write-up and in iTunes) you say that this only shows markets that are registered with the FDA. I think you mean, USDA, as we’re the group that maintains the National Farmers Market Directory database your app is based on.

    We love to see our data out there put to good use!

    1. Try doing a project clean. In eclipse, go to the “Project” menu, then select “Clean…”. If you’ve set it up correctly, it probably just needs to repackage everything now that you’ve added the files. This sounds like it just doesn’t have the contents of the www directory embedded.

  6. Hi Andrew,

    Nice app, which version of cordova are you using? I noticed there is not orientation feature.

    I am working on a project and my orientation landscape is not showing full width .. maybe you know why.

    Anyways .. nice work.

    Regards,

    1. I don’t recall exactly which version, but I think this is PhoneGap 2.0 or 2.1. If you’re having orientation issues on iOS 6, you should update to PhoneGap 2.2, and it fixes the iOS-6 related issues. If it’s happening on other OS versions/platforms, then it’s probably a HTML/CSS layout issue.

  7. i’ find and fix one error in “:ViewAssembler.prototype.searchResultsView ” not show the last row find . In the line : “for ( var i=0; i< marketsArr.length; i++ )"
    fix with "for ( var i=0; i< marketsArr.length+1; i++ )"

  8. Hello there great app, i’ve been playing around with source code it’s pretty interesting but i just cant find out in which way are you using phonegap, i can’t find the cordova file on the project or phonegap but the project runs fine, without the geolocalization service but i guess it’s because i’m testing it on a desktop browser (safari).

    Well thanks in advance for your time and thanks for this nice WORK!!

    1. The cordova.js file is not included in the project. I’m using Geolocation and “back” events (for android). It’s not using any other phonegap APIs. The example is primarily focused on an app-like user experiences, as opposed to specific API requests. If you look at index.html, it does include the Cordova.js file.

  9. I noticed that after installing your android app (from the marketplace), I get a shortcut icon on my homescreen. I am using phonegap 2.3.0 with your source code, and everything seem fine, but I do not get a shortcut icon on my homescreen (android) after installation. How can I achieve this? Is there any plugin or permission i need to set in the config.xml file?

    Regards.

    1. I don’t recall doing anything in particular. Are you installing from the marketplace, or a local install? If you’re doing a local install, this might only happen with apps downloaded from the android market.

  10. Hello,

    Any news regarding the Windows Phone version? I need to create an app for iOS, Android and WP8. It would be very helpful to share your experiences with WP8. IE10 should now be capable of everything iOS and Android is.

    1. The app was approved for content, but rejected b/c I don’t have any privacy/legal policy (Windows Store is VERY strict about apps that use GPS). I haven’t made any updates recently, but will be pushing out a new build of the Fresh Food Finder Application soon, and will be re-attempting Windows Phone submission.

  11. Hi Andrew,
    first of all, thank you for sharing the source code of the fresh food finder.
    It’s a great help for me building my first app using phone gap.

    Since I just started learning your code I still try to get the overview of all files and scripts and how they work together. I was wondering where the design of the maps comes from. Where is it defined? Somewhere in the leaflet files?

    Thank you very much.
    Sven

  12. Hi ,
    Thanks for app example.
    I have download app from play store. App work fine.
    I have build app with phonegap build service linking git repository with source code.
    The resouult is not same. Second app is very slow in navigation.

    Why ?
    How is build app in play store?

    1. I built it locally in Eclipse, but the code is identical. What are you seeing for “very slow in navigation”? What pieces are slow? It could be a project-specific setting that you are hitting?

      1. Navigation is slowly: click about link….2 second…change page.
        The effect of transation is discontinuous.
        For project specific setting intend intend config.xml for phonegap build?

        Thanks very much

        1. Are you comparing execution in the simulator with the app running on the device? Or both on-device. The code is identical. No plugins are needed. Have you made any changes to the code?

          1. My code is the same. The back button code is in there. It’s on line 415 of this file: https://github.com/triceam/Fresh-Food-Finder/blob/master/www/js/application.js The orientation lock is in my Android project config. You can set this using config.xml: See https://build.phonegap.com/docs/config-xml “” I don’t know what to tell you for it being slow. The code is the same. send me your download link from phonegap build, and i can take a look. atrice [at] adobe.com

          2. I don’t understand, don’t understand!
            How is possible? Build whit eclips or whit phonegap build service is not the same?

            Can add you how collaborator in phonegap buil so can view the problem?

            Thanks

          3. They are exactly the same for *my* source code. The difference would likely be which version of the Android SDK that was used to compile the app. I did that app a while ago, so it’s probably using an older version of the Android SDK. If you set the SDK version to “8” support older devices (Android 2.3), it will use an older SDK. This is in the “android-minSdkVersion” tag in config.xml. See https://build.phonegap.com/docs/config-xml for details

          4. I have try, but equals problem :(

            My device is a new galaxy tab 2. Don’t is a problem of device performance.

            Is *your* sorce code equals at git code repository?

            Thanks

  13. I think to have find the problem:
    jquery.animate-enhanced.js

    I hope that this script don’t detect 3d trasition for some reason

    But don’t understand why!

  14. I’m doing an article on privacy, cell phones and location. Thanks for uploading this source code, it saves me some time. I’m a law student and former programmer.
    I’ve had a chance to play around with Windows Phone and Android, but I’d like some information on iPhone and Blackberry. It appears there are similarities between them all.
    Correct me if I’m wrong, but you put notice in the header (or manifest) that you want to use location services, and that is all you need? Is there a requirement to ask the user before using location services?
    Thanks,
    David

  15. Hi,
    first,Thank youu andrew for this application
    the app is work but when i shearch for location, the location is not displayed???
    thanks :)

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>