Just some background before I get into the how-to, I built my badge over the course of a week and a lot of that time was dedicated to figuring out how to deal with my hosting company’s environment or waiting for them to respond to tickets entered about installing something. What I have learned about this process is that the average $5/month hosting company has horrible customer service and probably doesn’t know the first thing about Ruby on Rails development. That being said, fear not as I will try and point you to useful sites that walk you through how to deal with these issues. One other point, by no means am I a Ruby on Rails expert, this is really meant to chronicle my experiences and serve as a reference for (myself) and others.
This process started with the dream of making a little snippet of javascript code that would create a decent looking “badge” that linked to the SAPlink project and displayed the current number of downloads. However, SAPlink is hosted on Google’s Code hosting site, which doesn’t have an API to get the number of downloads. So here is how you could build something like this yourself.
Get a hosting Company
I personally chose Hostmonster which was very inexpensive, but as you have already read not the most responsive. I’m not bashing them here, I only pay like $5 a month or something and have experienced no down time and haven’t hit any bandwidth/cpu limits, not that tons of people hit my site, but still. I would recommend getting a hosting company that says they have rails installed and that you can have ssh access, all the other stuff is up to you.
Create Rails project
Now depending on your hosting company you will have to do this a few different ways, I would reccommend looking for some info from your hosting company, once you can get to the “Welcome to Ruby on Rails” page. Come back here.
For my hosting site all I have to do is create a symbolic link in the public_html directory to where i generate the rails project. So for SAPlink i just ran the following commands:
cd ~
mkdir rails
rails SAPlinkbadge
cd ~/public_html
ln -s ~/rails/SAPlinkbadge/public saplinkbadge
I like to keep things neat and tidy so I created a rails folder to house all projects that I will host. Then i simply generate a new rails project called SAPlinkbadge. The final step is create a sym link to the public directory of my rails application.
Create a local Gem repository
Why? Well, because at any time your hosting company can tell you that they don’t want to install a gem that does XYZ, so you have to have your own gem repository. Assuming your hosting company already has rails all you need to do is follow this: How-to Install your Own Gems in a shared environment. This will now allow you to install any gems you want without ever involving your hosting company. One word of caution, on step 9 make sure you place the GEM_PATH above the call to the boot.rb file.
Install Hpricot Gem
Now that you have your own gem repository up and running we can install a really great gem from the legendary why the lucky stiff called “Hpricot.” “Hpricot is a very flexible HTML parser,” which will allow us to scrape any HTML page and quickly grab the bits we want. To do this issue the following commands or you can follow Why’s instructions for install Hpricot:
gem install Hpricot
In this case we will be scraping the google code site page that shows the downloads for SAPlink. So to test the Hpricot gem we can either use irb or we can use the console that rails has created for us. Given that we will eventually use this is a rails application we might as well test it from our rails console. If you have never used the rails script/console before you are missing out. This console brings up a ruby session that has the same setup as your rails application will execute in. What I mean here is that if your ruby code works in the script/console odds are pretty good it will work in your rails app. So CD over to where you created the rails application and type the command:
cd ~/rails/SAPlinkbadge
script/console
You should get something that looks like this:
Loading development environment.
>>
Now let’s see if Hpricot has been installed and is usable in our rails application, first we have to require the gems per Why’s great examples:
>> require "hpricot"
=> []
>> require "open-uri"
=> ["OpenURI"]
>>
(Hint: Only type the stuff in front of ‘>>’)
So, if everything has gone swimmingly we should be able to get Hpricot to give us our web page. In the case of my SAPlinkbadge, I want this site. To do this it’s one line of code:
doc = Hpricot(open
("http://code.google.com/p/saplink/downloads/list?q=label:SAPlink"))
The output should be the whole HTML document, this is just Hpricot’s way of saying that it got what you were looking for. This means Hpricot is working fine.
Create your controller and model
I’m not going to go into much of this as there are tons of real Ruby on Rails tutorials to tell you how. Just do a Google search or check out the RoR Wiki. Basically my rails project has one controller and one model. My model does a few things, first it reads a local database to see when the last time I scraped the Google code site was, if it wasn’t in the last 10 minutes I go grab the site and then update a local database. I do this to reduce any load on Google and to keep everything running quickly. The important bit here is the work Hpricot is doing for me….
Get Hpricot to do your dirty work
The site I am pulling is really complex, lots of divs, tables all sorts of non-sense, to parse this myself would be crazy lucky for us why ( and Firebug ) came to the rescue. Here is my code to scrape the google code site
doc = Hpricot(open("http://code.google.com/p/saplink/downloads/list?q=label:SAPlink"))
total = 0
doc.search("td.col_4").at("a") {|link|
total += link.innerHTML.to_i
}
It’s so easy it should be illegal! Basically, before I wrote any code, I used Firebug to figure out if the cells I wanted had anything in common luckily, they were all TDs with the style “col_4.” As you can see this from this line doc.search("td.col_4") This instructs Hpricot to give me a collection of objects that match that particular CSS style, neat huh? Not only that but inside each one of those is a anchor tag whose inner text is one line of the total. The only easy way to do this is to use Firebug, seriously it’s a totally amazing tool, it will make you a better web programmer and let you really understand websites.
Output
To accomplish my final task which was to make it so someone could include a simple script tag with the badge and the total downloads, I just created a view that spit out a document.write statement to create a div tag with the floating total retrieved from my model on it.
After I built all this Craig “challenged” me to produce one that was just a image, no script insert required as some of the SDN areas don’t allow script tags. So after some more spinning of my wheels I was able to produce the image you see below which uses the same model, the same Hpricot code, it just spits out an image using a gem called RMagick.
Hope this helps and hopefully you can follow it to make your own badges.
