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!

  • Krishna

    how did you translate .xls from data.gov to json format ?

    • http://www.tricedesigns.com Andrew

      If you view the file at: https://raw.github.com/triceam/Fresh-Food-Finder/master/www/data.js, you can see that it is actually an array of arrays, not JSON objects. I saved it as a CSV, then pulled it into a text editor and used regular expressions/string replacement to format it into a JS-readable array.

  • kermit136

    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?

    • http://www.tricedesigns.com Andrew

      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.

  • pamarcan

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

  • kermit136

    Thank you Andrew, I will give my contribution when you release the source

  • Sirko

    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

  • Sirko

    … 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

  • Sirko

    Hi Andrew, thank you for your tip. It was very helpful and the app is running. Regards, Sirko

  • http://farmersmarkets.usda.gov Shayla Bailey

    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!

    • http://www.tricedesigns.com Andrew

      Thanks Shayla,
      Yes, I meant the USDA, my mistake. I’ll update the descriptions on there.

  • Ruben Vilte

    i’m done the steps at http://docs.phonegap.com/en/2.0.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android to get started with PhoneGap development on Android. Once you have everything setup, the code for this app goes in the www folder.

    But , the simulator show message :
    Application Error
    The connection to the server was unsuccessful . (file:///android_asset/www/index.html)

    thanks

    • http://www.tricedesigns.com Andrew

      What is in your assets/www directory in the Eclipse project? It is trying to load “index.html” from that directory, and is not finding it.

  • Pingback: Andrew Trice » Blog Archive » Presentations: Intro To PhoneGap, Web Data Viz & PhoneGap Native Plugins()

  • http://www.geodato.com.ar/fff/pictureFFF.jpg Ruben Vilte

    the file “index.html” , is located in assets/www ,plis view picture in “Website” http://www.geodato.com.ar/fff/pictureFFF.jpg. Thanks!

    • http://www.tricedesigns.com Andrew

      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.

  • Pingback: Andrew Trice » Blog Archive » Enterprise Android Apps W/ PhoneGap()

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

  • Shina

    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,

    • http://www.tricedesigns.com Andrew

      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.

  • Ruben Vilte

    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++ )"

  • Ricardo Nava

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

    • http://www.tricedesigns.com Andrew

      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.

      • Ricardo Nava

        Ok thanks, yeah i noticed that after writing this, thanks for your help!!

  • Mark Brian

    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.

    • http://www.tricedesigns.com Andrew

      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.

  • Lorant

    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.

    • http://www.tricedesigns.com Andrew

      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.

  • Sven

    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

  • Pingback: Fresh Food Finder Featured in SELF Magazine | ANDREW TRICE()

  • Andrea

    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?

    • http://tricedesigns.com/ Andrew Trice

      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?

      • Andrea

        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

        • http://tricedesigns.com/ Andrew Trice

          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?

          • Andrea

            Both on-device: galaxy pad 2. I don’t have make changes, i compile whit built service point directly to https://github.com/triceam/Fresh-Food-Finder.

            Some difference beetween original app (play store):
            – slowly (just said)
            – back button don’t work
            – screen orientation is not block

          • http://tricedesigns.com/ Andrew Trice

            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

          • Andrea

            I have add you how developer for app in phonegap build.
            Thanks

          • Andrea

            You are able to test?
            Thanks

          • Andrea

            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

          • http://tricedesigns.com/ Andrew Trice

            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

          • Andrea

            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

      • Andrea

        Someone have any idea? Is necessary include any phonegap plugin for this app?

  • Pingback: Porting A PhoneGap App To Firefox OS | ANDREW TRICE()

  • Andrea

    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!

  • David Barbour

    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

  • Emma

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

  • Anibal Centurion

    awesome! *—*

  • Trish

    Do you have a script or anything that can do that?
    Where you may have bunched up all he regular expressions?