Building a Ruby on Rails application in a week

This post will (and perhaps some followups) describe how I did a web application in a week using the web framework Ruby on Rails

My company 41concepts is currently developing a rather large application using Ruby on Rails and during this I had a week where I had to wait for something being delivered by another developer. The application wasn’t really supposed to grow this large, but the feature list just seemed to grow the more we developed.

Because I had this week, I wanted to try to make a small Ruby on Rails application implementing an idea I’ve had for some time now.

I really like my Playstation 3 and if you ask my girlfriend this is also a bit too much sometimes. I generally like adventure and roleplaying games such as the Final Fantasy series and because I hate wasting my time, I usually follow a game walkthrough.

With this application I really wanted to give something back to the game walkthrough community, so I decided to create the site/application “My Walkthroughs“. The main idea is to let users of the site create their game walkthroughs and then share them in different format such as pdf, plain text and html. The idea comes from the fact that almost all walkthroughs are being done in plain ASCII text.

So the application should enable users to build a walkthrough through a web interface and publish it in various formats.

Ok… I had a week for this, so what did I do?

Planning

Well.. I must admit I went straight to implementation. This was a small site and really just a pet project.

Implementation

Design

I’m not really a Photoshop shark (I don’t even have Photoshop), so I found a free template:
http://www.opensourcetemplates.org/templates/preview/1303028527/

For icons I used the FamFamFam silk icon set that is simply astonishing:
http://www.famfamfam.com/

Finally I decided that I wanted some kind of Logo, so I invested in one from Logo Samurai:
http://www.logosamurai.com/

Cool css scalable buttons:
http://monc.se/kitchen/stew/buttons/btn.html

Took the confirmation boxes from:
http://www.templamatic.com/blog.asp?BlogID=18

Got the cool form hints from here
http://www.askthecssguy.com/2007/03/form_field_hints_with_css_and.html

Code

I used a lot of different plug-ins and gems. The fastest code to implement, is code you don’t write :). They are listed below:

Plug-ins

acts_as_bookmarkable
Suddenly I thought it would be a great idea if the user could bookmark other user’s walkthroughs

acts_as_commentable
Of course users should be able to comment each others walkthroughs, it wouldn’t quite get the web 2.0 feel without 🙂

acts_as_list (tutorial)
This is used for lists that should be sortable

acts_as_rated
This was added late, it turned out really nice with this tutorial, adding nice css/ajax support. Also note that all the averages are calculated when the entity is saved and not at render time

attachment_fu (tutorial)
This is used for all uploads and thumbnail generation. It works perfectly together with Amazon S3

auto_complete
Used for completing the game’s name when creating a new walkthrough

restful_authentication (basic use, great screencast)
The standard on authentication

simple_captcha
Used for registrations and other places where spam bots like to date

synch_s3_asset_host
This was used in the Capistrano recipe for synchronizing the public folder with the Amazon S3 asset hosts

Gems

htmldoc (tutorial)
I had to modify it though, when certain PDFs was generated, the gem reported false as return value but left nothing in the error collection. After some investigation I found out there was a bug in how the result from the command-line was parsed and changed line 186 from “case line” to “case line.strip” since there was some \r characters that the code didn’t quite expect. I’m not sure if this is only applicable to me, but now it works

mini_magick
Image manipulation for use with the attachment_fu plugin. This is not as heavy as the full rmagick since it uses the commandline. I wanted to use this with the simple_captcha plugin as well, but it can only modify existing images, not create new ones.

rmagick
Image manipulation for use with the simple_captcha plugin

aws-s3
Provides a nice api for Amazon S3

uuidtools
Used for generating GUIDs. Notice that it couldn’t find the MAC address on my virtual server at Slicehost, so I had to manually give it a MAC address

will_paginate
Great for pagination. If you want to use ajax paging – something we use in another application – this works perfectly

In total the model folder in the application consists of 11 models, 3 observers and 2 mailers. A small and simple app 🙂

The application use REST and search engine optimized urls everywhere which was something I really wanted from the start. Take e.g. the url for a walkthrough:

/walkthroughs/123456-resident_evil_5_ps3/summary

On this page the user gets a summary of the walkthrough and can download the walkthrough in three different formats using the URLs:

/walkthroughs/123456-resident_evil_5_ps3 (no extension => html)
/walkthroughs/123456-resident_evil_5_ps3.txt (plain text – ascii)
/walkthroughs/123456-resident_evil_5_ps3.pdf (well… pdf :))

The code looks at the last edited time of the walkthrough and generates a new one if needed. The output is placed on Amazon S3 and the user is redirected to this. It would be a bit nicer if the application streamed the file from S3 and then directly on to the user, but in order to save server resources, the user is redirected directly to the S3 url (which is currently not that nice).

Deployment

We are currently trying to do deployment on Amazon EC2 for our larger application, but with this one I really wanted to try out the new Passenger (mod_rails) Apache plugin, since it promised real easy rails deployment.

So I bought a slice over at Slicehost and pretty much followed this tutorial to the letter. It worked like a charm.

After this I set up Capistrano according to Slicehost’s own Capistrano documentation.

I also signed up for the Amazon S3 storage service for the walkthrough pdf and txt files, as well as the user avatars (from attachment_fu plugin). Furthermore I used the synch_s3_asset_host to synch the public folders with asset hosts in Amazon S3 during the capistrano deployment.

For tracking I added the site to our Google Analytics account.

Aftermatch

Well, I must admit that not everything was actually done in this one week. The following was added after week one:

• The domain name (I forgot to start this process in the beginning of the week, and it takes a couple of days to process)
• The logo from LogoSamurai took some days with revisions and all
• The bookmarking functionality
• The asset hosts in the capistrano recipe
• Forgot password functionality (don’t know why this slipped in the first place)
• Some minor bugfixes to the pdf and plain text rendering (I will probably keep improving this)
• Caching (this is something I will need to monitor as the site gets traffic)
• I normally write alot of tests, I must admit that I could do better with this app 🙂
• I’ll probably optimize some database indexes along the way
• A nicer system admin area using Active Scaffold or similiar

Price

So what did all this cost me!?

• Hosting @ Slicehost $20 a month first bill was $60
• Logo (LogoSamurai 3 designs unlimited revisions) $147
• A bunch of great rails plugins – FREE (thanks…)

$207 and one week of work (plus some follow up described above).

Now I only need to get some users on the site (the hard part). I might write a bit about the bootstrapping process later.

So go to http://www.mywalkthroughs.com and give it a spin.

Man I love rails…