README.txt

The WebFridge Project

2009-06-28T18:31:00.000-07:00

A few months ago, in the spirit of our recessionary times, we decided to institute severe household financial austerity measures. Around the same time, I was interested in learning more about the latest java technologies that are being used in enterprise software and web applications. This resulted in . . .

Project WebFridge!

Our housing expenses are the biggest impact on our budget. But since our housing costs are relatively fixed, it seemed like the biggest opportunity for improvement was the food budget. But this has not been easy! I like food.

Here's our food expenditures over the past few months (credit goes to mint.com for the pretty graph):

A few notes:

In January, we took a vacation to New Orleans. Lots of good restaurants and bars there. So I view that spike as a special non-recurring charge.
Our general run rate appears to be in the $500-$800 range, and this reflects a major cutback in our restaurant/bar expenses. This still seems embarassingly high.
The green bars supposedly represent U.S. food spending according to Mint.com. Apparently people went on some kind of colossal diet in May.
Apparently the food stamp budget for two people averages around $6/day, or $180 per month. Whoa. We are nowhere close to that.

Anyways, what I decided to do was build a web application using the latest java technologies to keep an inventory of our foodstuffs.

We do throw out quite a bit of food that goes bad in our fridge or freezer because we basically forget that it's there. The goal of this application is to cut down on that waste. And also make it easier to plan our cooking menus and our shopping.

Here's a quick overview of how my application works. You can take a live look at our current inventory here!

Logging into the Website

The system requires a login but you don't have to do it every time if you select the Remember Me checkbox. There is an Administrator account that allows for managing user accounts. This all uses Spring Security, which is a great security/authentication toolset.

Reviewing Inventory

The inventory is displayed in a sortable list. You can also filter by item location (Fridge, Freezer, Pantry) or by Item Type (Pork, Canned Veggie, etc).

We often wonder, "what do we need to use in the freezer?". This can be answered easily by clicking the Freezer button and then sorting by the Days Until Expiration field.

Note the beautiful Fridge, Freezer, and Pantry icons that I drew. Need to make some prettier ones.

Adding Items using Barcodes and Auto-Lookup

When you add packaged items, the system lets you scan in the UPC barcode and the item's information will be entered automatically with the system's internal UPC product database. As soon as you scan in the barcode, the item description fields are automatically filled in.

This process really doesn't take too long. I don't enter everything. For example, individual pieces of fruit that sit in a fruit bowl on our counter, that's not worth tracking since we see it every day and know what's in there. Lots of the stuff we buy we immediately cook up for dinner so I don't bother entering that either.

I am using a $10 scanner from ebay, the infamous cuecat.

For other items that do not have official barcodes, I printed out on some removable barcode stickers using my laser printer. I put these on produce bags, tupperware containers, etc.

Of course those items are not in the built-in UPC product database, so I have to fill in the item info manually.

Note the Days Until Expiration field. That field is automatically filled as soon as you pick Item Type (ie- fruit is given 5 days, canned goods 700 days, etc), but you can of course override it.

Warning Tweets

When any item is 3 days from expiration, WebFridge automatically starts sending daily warning messages. This is really helpful in using up those things in the back of the fridge or freezer before they go bad.

I suppose I could have used regular email instead of going through twitter, but hey, it was fun figuring out how to call the Twitter API from my software.

Future Enhancements

Right now I don't bother filling in the item size and price. But it would be cool if I could have stats on item prices that I could check with my iphone when I'm at the store. I have a rough idea of prices for common things like a gallon of milk, but I am less sure of lots of things from apples to greek yogurt. I'd like to think of some way to make this price entry more automated (perhaps running OCR on the itemized grocery receipt) since this could be a PITA otherwise.
I want to make a special iphone web app interface. I already check this webpage in my iphone browser, but Apple has special html tags that allow you to make the page look like a native iphone app.
I'd like to be able to mark certain items as staples that would be automatically added to our shopping lists (right now we use Evernote for that) whenever they are removed from our inventory.

Tech Details

This application is a customization of the excellent AppFuse tutorial project. Appfuse is a great starting point for projects using java open source tools. I am using Hibernate to access a mySql database and Struts 2 for my web framework. It is wired together with Spring. This all running on a ubuntu linux server within Apache Tomcat. The code is automatically tested using jUnit and jMock and is built using maven.

I am not an html/css/graphic artist, so some of my customizations to the Appfuse web pages are not the prettiest ever.

Posting Code

2009-06-17T09:53:00.001-07:00

I figured out a recipe for posting nicely formatted code online, like this:

SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = "scripts/clipboard.swf";
...
SyntaxHighlighter.all();

I like the nice formatting and colors, including the ability to highlight lines. This also has a nice floating menu to allow the user to easily copy the code to their editor. If you are curious how to do this, read on! The key is a nice javascript library called Syntax Highlighter from Alex Gorbatchev. If you are comfortable with CSS styles and javascript, it should pretty easy to figure out how to use it and incorporate this library into your website or blog. Alex's website has good reference documentation, but it assumes you know how to hook javascript and css into your website.

If you are like me, and CSS and javascript is still a little unfamiliar, here is the recipe that I figured out. Note that this also works on Blogger, which is what I'm using right now . . . you'll just need to edit your template html.

Step 1: Add the javascript libraries to your webpage

Paste the following into your <head> section:

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js">  </script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js">  </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js"> </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js"> </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCss.js"> </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDelphi.js"> </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDiff.js"> </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushGroovy.js"> </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJava.js"> </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js"> </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPhp.js"> </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js"> </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPython.js"> </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushRuby.js"> </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPerl.js"> </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushScala.js"> </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js"> </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushVb.js"> </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js"> </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushAS3.js"> </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJavaFX.js"> </script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPowerShell.js"> </script>

Note that each script (except for shCore.js) is for a different programming language. These provide the logic for language-specific highlighting. As you'll see, when you do your actual posting, you'll indicate which language your code is in. So, technically, you don't need all these scripts, just the ones for the languages that you'll be quoting on your page. But it doesn't hurt to just paste the whole block in for simplicity's sake.

Step 2: Link to the SyntaxHighlighter CSS styles

Immediately after the stuff you just pasted (and still within the <head > tag), add the following links:

<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css" id="shTheme" />

Step 3: Configure

This step may be optional for you. Basically, we make javascript calls into the library to configure the behavior of SyntaxHighlighter. These options are documented here. For a start, just paste the following in after the previous stuff:

<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.320/scripts/clipboard.swf';
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.gutter = true;

SyntaxHighlighter.all();
</script>

Note the highlighted line about the clipboardSwf. This gives the user a nice floating menu that allows them to easily copy your code to the clipboard. Also note the next line referencing bloggerMode. That needs to be set to true to have the formatting work correctly from within the Blogger.com framework.

Step 4: Post your Code!

Now, whenever you want to post some code, you can enclose it in a <pre> tag with a special

class

indicating which language highlighting you would like (java, c#, etc). The class is of the format: "brush: " . . . deduce the language string from the javascript filenames in Step 1 above. Like this:

<pre class="brush: java">
System.out.println("Hello World!");
</pre>

Have fun!