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!
how did you translate .xls from data.gov to json format ?
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.
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?
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.
can you share your work with windows phone?
I can’t understand, how do you make ‘leaflet pan’ working?
I haven’t released the windows code yet b/c it has not been approved yet. I had to change a few event listeners in the leaflet library to make it work. It uses the same techniques as this: http://www.tricedesigns.com/2012/06/04/getting-rid-of-the-gray-box-in-phonegap-for-windows-phone/ Basically, I had to remove event listeners when the map was touched, then re-add them on the mouseup event.
Thank you Andrew, I will give my contribution when you release the source
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, Follow 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.
… 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
Hi Andrew, thank you for your tip. It was very helpful and the app is running. Regards, Sirko
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!
Thanks Shayla,
Yes, I meant the USDA, my mistake. I’ll update the descriptions on there.
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
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
the file “index.html” , is located in assets/www ,plis view picture in “Website” http://www.geodato.com.ar/fff/pictureFFF.jpg. Thanks!
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
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,
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.
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++ )"
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!!
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.
Ok thanks, yeah i noticed that after writing this, thanks for your help!!