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!

Leave a comment

Your email address will not be published. Required fields are marked *