As I mentioned yesterday, lately I have been working on a simple Rails application. Shall I quote myself -

Recently I've been working on a simple translation project... The main goal of this application is to translate speech via the web browser. I am doing it with the HTML5 voice recognition. It should also save all the latest translations and post them to the database...

In the last hours I finished sharpening this application. In this post I would like summarize my process and how I managed to get it working.

My application is deployed here. You can view it's source on github.

Again, my application is based on HTML5 voice recognition (there is plenty content written about this feature, google it and you will find articles explaining it). It is currently available only on Chrome 11 beta. In order to make sure that no one is mistaken to view it on a different browser, I used some Javascript browser detector I found in order to redirect these people to an error page. 

Just for reference, voice recognition looks like that - 

<input type="text" x-webkit-speech>

Integrating this input area with Google Translate API was quite easy actually. As seen in the Developer's Guide, the translation can be procesed via a simple, restful (in REST terms) Javascript code. I didn't really have to change it alot, anyhow the source text is always in English.

From here goes mostly the 'usual stuff' for saving the translations. It didn't need to do anything special, so I simply generated it through a scaffold. I had some issues saving the translations to the database though, because it was done in Javascript. My solution to that was posting them with jQuery.

Saving the user's settings wasn't really a great deal, If you really want to know how It's done, you can take a look at the source code.

That's it for this application, I might imporve the UI sometime later, so I will be pleased with it.

Update 29/4/2011 - Updated link for source code, It is now uploaded on Github.

Recently I've been working on a simple translation project. It's almost finished, I promise to deploy it as soon as everything is set. The main goal of this application is to translate speech via the web browser. I am doing it with the HTML5 voice recognition. It should also save all the latest translations and post them to the database. While working, I had some jQuery challenges.

To begin with, The translation processing is done all via javascript. I am not sure whether it was because I was lazy, or there was a problem using the voice recognition tag with rails (probably both). Because of that saving the translations couldn't be done with form helpers. I realised it should be done with AJAX. 

Let's begin. My goal was to add a value to the database without using Rails itself. I chose to do it with jQuery, because it's slick.

Note - If you want to try that yourself, don't forget to include jQuery on your application. There are few ways doing that, the best is probably saving the latest jQuery to public/javascripts directory, and including it with 

<%= javascript_include_tag "jQuery.js" %>

(There are different ways of doing that, you can also include it directly from the web, though remember you are depending on their server that way)

HTTP posts in jQuery are done with the jQuery.ajax method. Let's take a look at the description -

The URL we want to insert is the URL where the controller's method is POST. If your controller is CRUD based (scaffold generated controllers & controllers routed by resources are) then it will normally be the controller name pluralized. For me, it looks like this - /translations . If you view this page on the browser it would normally direct you to the index viewer (again, if it is CRUD based). Let's actually take at my controller.

The create method is the method called when we send a POST request to that page. It is really simple - It adds a new translation with the parameters sent.

Let's get back to jQuery. The settings we need to insert for this function, which aren't defined yet, are the HTTP request we want to call and the parameters we want to post. The request is defined by 'type' and the parameters are defined by 'data'. It looks like this - 

Now, for my code, I changed the example values with the javascript variables I wanted to use. And voila, and HTTP request is sent and a new translation is added to the database, without excuting any rails code.

So I wanted to get some information from a website using Ruby. After a little bit of reasearch I found Nokogiri. Basically - It reads and parse HTML & XML documents (If you are in an operative mood, check out their tutorials). 

So the very first thing we have to do is installing it. I'm not gonna go through it, simply read this very informative guide.

Let's get coding. We require the nokogiri gem and open-uri.

require 'rubygems'

require 'nokogiri'

require 'open-uri'

Now let's save the webpage's HTML in a variable. 

doc = Nokogiri::HTML(open("http://www.handasaim.co.il/"))

Replace this website with any website you want to parse. This is the one I used (It's my school's website). If you want to make sure it works, you can simply output it. If you see a usual HTML page, then you are done.

The next thing we are gonna do is find the information we want to get. Simply go through the website's source code and find the parent elements of your desired content. Google Chrome has a very cool feature that helps you do that. Simply right click the element and check it's source on-page.

I needed all the elements included in that marquee. Luckily, They were divided to elements, all having the same class - "tickerItemContainer". Now I simply had to find all the elements with this class, and save them to a variable. It's done by the following syntax:

tester = doc.css(".tickerItemContainer")

The only thing left to do is using that fresh information. What I done was saving it to a file. 

aFile = File.new("Filetest.txt", "w")

aFile.write(tester)

The outputed file included all of the items I needed. Simple but useful :)

Further Reading & Resources

• Getting started with Nokigiri (Post 1)
• Getting started with Nokigiri (Post 2)
• Nokigiri Tutorials (XML & HTML Searching)
• Saving Ruby Files

The final code