Sempre procuro tornar o processo de aprendizagem o mais prático possível. O estudo se torna muito mais prazeroso e desafiador se utilizarmos um objetivo prático a ser alcançado ao final dos estudos.

Há algum tempo venho querendo experimentar o Sinatra, pequeno framework web escrito em ruby, mas estava esperando por um motivo pra isso. Quando eu estava acabando a criação deste blog, me surgiu a idéia de ter uma página inicial, semelhante à página de perfil de sites de relacionamento.

Unindo ao útil ao agradável, resolvi implementar essa parte do meu site usando Sinatra. Mas primeiros, precisamos juntar as informações necessárias para apresentar na página.

APIs Diversas: Flickr, Twitter, Last.Fm em Ruby

Como já foi dito antes, eu amo APIs e a possibilidade infinita que elas proporcionam. Nada melhor do que uma coleção de informações pessoais deixadas em sites que eu utilizo para rechear minha página de apresentação. A maioria das APIs disponíveis publicamente já possuem sua implementação em Ruby, tornando o uso das mesmas extremamente simples através das rubygems.

As APIs e suas respectivas gems utilizadas estão listadas abaixo:

Flickr – flickr-fu
Twitter – Ruby Twitter
Gravatar – Sem gem, mas de uso simples com Ruby.
Last.fm – Scrobbler

Com as Gems devidamente instaladas, precisamos configurar a parte que liga toda nossa página, através das routes e configurações adicionais do Sinatra.

Sinatra

Sinatra é um framework para pequenas aplicações web, pequeno e elegante, que nos permite criar pequenas páginas rapidamente com o uso de uma DSL própria, como nesse pequeno exemplo contido na página inicial:

require 'rubygems'
require 'sinatra'
get '/hi' do
  "Hello World!"
end

Certo, mas agora vamos a um exemplo mais prático. Com o seguinte código, é possível coletar os dados necessários para a nossa página:

require 'rubygems'
require 'sinatra'
require 'twitter'
require 'flickr_fu'
require 'scrobbler'
require 'MD5'

  get '/style.css' do
    content_type 'text/css', :charset => 'utf-8'
    #Generate CSS file from SASS
    sass :style
  end

  get '/' do
    #Get messages from twitter search API
    @twitter_messages = Twitter::Search.new.from('tbueno')
    #Call private method flickr sending my id
    @photos = flickr('93129732@N00')
    #get recent tracks from Last.fm
    @tracks = Scrobbler::User.new('tbueno').recent_tracks
    #Get public user's avatar from gravatar.com
    @avatar = gravatar('tbueno@gmail.com')
    #Call views/index.haml
    haml :index
  end

  private
  #Get public user's avatar from gravatar.com
  def gravatar(email)
    hash = MD5::md5(email)
    image_src = "http://www.gravatar.com/avatar/#{hash}"
  end 

  #Read Flickr API token from YAML file and look for the last 20 photos
  def flickr(id)
    flickr = Flickr.new(File.dirname(__FILE__) + '/conf/flickr.yml')
    flickr.photos.search(:user_id => id, 'per_page' => 20)
  end

É importante seguir o padrão de diretórios do Sinatra:
Egotrip
- views
–index.haml
–style.sass
egotrip.rb

Com isso, já temos nossas informações prontas. Precisamos então configurar a estrutura da nossa página.

O Sinatra já possui um suporte inteligente a diferentes templates, como o Haml. Aí eu achei mais uma oportunidade de aprendizado. Por que não colocar o Haml na jogada?

Haml

Haml é uma alternativa ao largamente usado RHTML, aonde a proposta consistem em escrever templates de maneiras mais sucintas, evitando repetições, através de recursos interessantes como a substituição de abertura e fechamento de tags por identações, por exemplo.

Não entrarei muito a fundo sobre o funcionamento e sintaxe do Haml, pois a documentação oficial já é completa o suficiente, porém algumas observações são importantes para o entendimento do código a seguir.

• “%” são usados antes de tags oficiais de HTML (p, head, title, …)
• “#” representam DIVs. A linha “#foo Hello!”gerará o código:
• < div id="foo">Hello! </div>
• “-“ serve para usar código ruby, equivalente ao “<%”
• “=” por sua vez é a alternativa ao “<%=” do rhtml.

O código da página é simples, apenas distribuindo o conteúdo em alguns divs:

%html
  %head
    %title Egotrip
    %meta{"http-equiv" => "Content-Type", :content=>"text/html; charset=UTF-8"}
    %link{:rel => 'stylesheet', :type =>'text/css', :href => 'style.css' }
  %body
    #content
      #header
        %h1 Welcome to Egotrip
        %p
          %image{:src =>@avatar, :align => 'left'}
        %p
          My name is Thiago Bueno Silva
        %p I am 25-years old
        %p and i am currently living in Brazil.
        %p Thanks for visiting me!
      #main
        %h2 My Photos
        - @photos.each do |photo|
          %image{:src => photo.url(:square) }
        %hr
        %h2 What i have been listening to:
        - @tracks.each do |track|
          %p= "#{track.name} - #{track.artist}"
      #right-column
        %h2 My Twitter
        - @twitter_messages.each do |m|
          %p= m.text
      #footer
        %p Egotrip - Thiago Bueno Silva - 2009

Alem disso, do mesmo pessoal que mantém o Haml, vem o Sass, que é o equivalente do CSS ao que o Haml é ao RHTML. Como é em Ruby também, por que não usá-lo no nosso experimento?

Sass

Não falarei muito sobre o SASS, apenas colocarei abaixo o conjunto de descrições CSS descritos na maneira SASS de se expressa. É uma simples adaptação das regras do CSS.

body
  :background-color #2E2922
#content
  :font-family 'Lucida Grande'
  :font-size 11px
  :margin 25px
#header
  :color #B39E81
#main
  :float left
  :width 600px
  :margin 0
  :margin-bottom 10px
  :background-color #807A73
  :border 5px solid #333
  :padding 25px
#right-column
  :float left
  :width 300px
  :margin 0
  :margin-bottom 10px
  :margin-left 10px
  :background-color #B39E81
  :border 5px solid #333
  :padding 25px
#footer
  :clear both

Screenshot e Melhorias Futuras

Com esses três arquivos, já temos uma página inteira com informações pessoais coletadas através de APIs. A versão usada nesse exemplo pode ser vista nesse screenshot abaixo:

Como melhorias futuras, posso citar um controle de caching para que não seja necessário buscar todas as informações a cada atualização de página e um controle de informações através de arquivos de configuração. Mas como exemplo prático do uso do Sinatra, Haml e Sass já mais que o suficiente.