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:
- iTunes: http://itunes.apple.com/us/app/fresh-food-finder/id524261275?mt=8
- Google Play: https://play.google.com/store/apps/details?id=com.tricedesigns.FreshFood&hl=en
- Amazon Market: http://www.amazon.com/Andrew-Trice-Fresh-Food-Finder/dp/B0089FRKCY
- Windows Marketplace (pending approval)
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.
- Leaflet: http://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!