Fresh Food Finder

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.

The Fresh Food Finder uses the following technologies:

  • PhoneGaphttp://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-UIhttp://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.
  • Mustachehttps://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.
  • jQueryhttp://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 codeat 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 withinstyles.css.

Mustache is a templating framework that enables you to 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!

  • Emily

    Hello

    I was wondering how I could go about suggesting certified farmers markets to add? Thank you

    Emily

  • ash

    thank u for the great blog .

    am wondering how could i run this project by phonegap emulator ?

    • http://www.tricedesigns.com Andrew

      Just open “index.html” in the Chrome browser, and enable the emulator from the icon in Chrome, or right-click on the page, then select “Emulator -> Enable”. You have to be using Chrome, and have to have the Ripple Emulation Environment installed. See details here: http://emulate.phonegap.com/

  • http://www.pourinrain.com Denis Farley

    Your Baywood/Los Osos, CA market listing erroneously lists Paso Robles in the address. It should be Lo Osos, CA 93402. I live in Los Osos and will be at the market tomorrow.

    • http://www.tricedesigns.com Andrew

      Thanks for letting me know. I’ve just extracted the data from the USDA (http://search.ams.usda.gov/farmersmarkets/default.aspx). I’m going to be releasing a new version soon that ties into the USDA data interface, so all data will be the USDA’s latest records.

  • carl mills

    What about Belfast Farmers market in Maine.? I live in Belfast and it doesn’t show up.

  • Mary

    Hello! I think this is a great app, but I’m a little confused. In the app description it says that farmers’ markets must be registered with the FDA. I could be wrong but shouldn’t it be the USDA? I looked on the FDA website but I do not see anything about registering farmers’ markets. The USDA however has a national farmers’ market registry.

    • http://tricedesigns.com/ Andrew Trice

      Yes, it is using the Farmers Market Registry from the USDA- I listed it incorrectly as the FDA in the app description. I’m working on a new version, and this will be corrected. Thanks, Andrew Trice

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

  • mghislain

    Hello Andrew thanks for this great application sample.
    This help me but i have a question about app-ui.

    Do
    you thing we could use it to do make this the kind of this demo using
    panel ?
    http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html

    Ghislain

  • Joe

    Hello, I was looking to use this code for learning. What program would I need to run and test the code after manipulating it some? Is there something similar to the way Eclipse works that I can do this with?

  • Caspy7

    Perhaps this page needs updated with a link to your Firefox OS version?

  • Jessica Robinson

    I’ve put this into a PhoneGap app for testing but the maps show up as grey when I use the app. When I use the code locally on my machine, the maps display fine. I haven’t changed any of the code. Any ideas how to fix this and what is causing the problem?

  • http://www.scargosun.com/ Scargosun

    Please add a comments section to the markets so that people can report if they still exist and the hours.

  • Kate Brown

    Several of the markets listed as within 10 miles of my home were very far away. For example, the app lists the Bronx market which is 400 miles from me!

  • Brad Turner

    Hi Andrew,
    Is it possible to use your template for a mobile web app? My main concern is if the code will open the native map app on iOS & Android when the directions button is selected? This is of course without being deployed to an app store.

    Thank you

  • Andrea McGilvray
  • meg

    Do you include canadian farmers markets

  • sebastian thomas

    why not release a web version?

  • Simon Jackson

    Hi, could you share the config.xml settings? I have used your app as a template, but the iPhone header bar shows through on mine.
    Thanks

  • rmangrum

    The app description says it is available in Spanish. How do I change it to Spanish? This is for the iPad air 2 and iPad Mini 4.