Deixo aqui meus agradecimentos aos organizadores e ao público presente. Abaixo, segue minha apresentação sobre aplicações Rack.

O exemplo anterior se resumia a simples GETs Http, mas nós sabemos que aplicações web são muito mais que isso, não é?

Então vamos ao que interessa.

Pré-Requisitos e Preparativos

Será necessário a instalação do sqlite3 em seu computador. Os passos para fazer isso fogem do escopo deste tutorial, mas você não encontrará dificuldades para esse procedimento(usuários de mac não precisam). Após a instalação, crie via linha de comando uma database, como no exemplo abaixo:

sqlite3 blue_eyes

SQLite version 3.4.0
Enter “.help” for instructions
sqlite> .quit

Usaremos algumas gems para nao reinventarmos a roda:

- sinatra – Nosso tão amado e querido micro-framework
- feedzirra – Parsing de RSS
- sequel – Para gerenciamento simples do sqlite com ruby – http://sequel.rubyforge.org
- Haml – Linguagem de marcação para nossos templates

Após instalarmos cada uma das gems necessárias, começaremos o desenvolvimento da aplicação.

Leitor de RSS Feito Totalmente em Ruby!

O idéia é criar um leitor de RSS básico, com as features mínimas necessárias para o seu funcionamento. Melhorias futuras serão tratadas em outros posts. Para que possamos gerenciar nossos feeds, criaremos um Model simples, representando objetos “feed”. Percebam que, assim como os conhecidos exemplos do ActiveRecord usado no Rails, aqui a gente também extende uma classe model do nosso framework de acesso ao BD, o Sequel. É possível notar também a semelhança com um Migration na definição do schema da tabela.

./feed.rb

class Feed < Sequel::Model
  unless table_exists?
      set_schema do
        primary_key :id
        text :url
        text :name
      end
      create_table
    end
end

Pronto. Nosso Model já está pronto, agora vamos para o Controller. Como essa é uma implementação bem simples, usaremos apenas a raiz do site para apresentar o conteúdo. Isso pode ser comprovado nos GETS que esperam apenas um parâmetro, no caso o "id" do feed no nosso banco.

./blue_eyes.rb

require 'sinatra'
require 'feedzirra'
require 'sequel'

configure do
  Sequel.sqlite('blue_eyes.db')
end
require 'feed'

get '/style.css' do
   content_type 'text/css', :charset => 'utf-8'
   sass :style
end

get '/' do
   @feeds = Feed.all
     @feed = Feedzirra::Feed.fetch_and_parse("http://www.tbueno.com/blog/feed/")
   haml :index
end

get '/:id' do
    @feeds = Feed.all
    @model = Feed.find(:id => params[:id])
    @feed = Feedzirra::Feed.fetch_and_parse(@model.url)
    haml :index
end

post '/add_feed' do
  f = Feedzirra::Feed.fetch_and_parse(params[:feed_url])
  feed = Feed.new(:url => f.feed_url, :name => f.title)
  feed.save
  redirect '/'
end

Outra novidade em relação ao tutorial anterior é o uso do "configure", que é uma espécie de "initializer" do Rails e é executado, como o nome diz, apenas uma vez no início. Usaremos ele para conectarmos ao nosso banco.

O uso de POST Http foi adicionado para que possamos adicionar feed usando um form simples que recebe a url do feed a ser adicionado.

Camada de Apresentação com Haml e Sass

Como no tutorial anterior, usaremos o Haml e o Sass para geração de HTML e CSS respectivamente. Como esta é uma aplicação pequena, acho que fica interessante usarmos estas ferramentas para demonstrar como fica limpa a parte de apresentação usando elas.

./views/index.haml

%html
  %head
    %title Blue Eyes
    %meta{"http-equiv" => "Content-Type", :content=>"text/html; charset=UTF-8"}
    %link{:rel => 'stylesheet', :type =>'text/css', :href => 'style.css' }
  %body
    #menu
      %form{:action => 'add_feed', :method => 'post', :name => 'add_feed'}
        %input{:type =>'text', :name => 'feed_url', :id => 'feed_url' }
        %input{:type => 'submit', :value => 'Add Feed'}
      %ul
        - @feeds.each do |f|
          %li
            %a{:href => "/#{f.id}"}
              = f.name
    #content
      .feed
        %h1
          %a{:href => @feed.url}
            = @feed.title
        - @feed.entries.each do |entry|
          .entry
            %h2
              %a{:href => entry.url}
                = entry.title
            = entry.content

Sempre é bom lembrar que a identação é FUNDAMENTAL no Haml, portanto, preservem-na caso vocês forem copiar e colar estes códigos.

./views/style.sass

body
  :background-color #f0f0f0

a
  :color #B84300
  :text-decoration none

h2
  :font normal 1.2em/1.3em arial
  :margin 0
  :padding 0

.entry
  :border 1px solid #888
  :background #f9f9f9
  :padding 10px
  :width 90%
  :margin-bottom 1em

#content
  :float left
  :width 70%
  :margin 0px 0px 50px 0px
  :overflow auto

#menu
  :float left
  :width 25%
  :overflow auto
  :border 1px solid #888
  :margin-right 10px

Screenshot:

Trabalhos Futuros

Obviamente, este exemplo não é uma aplicação completamente funcional. Ele serve mais como um exemplo de como explorar os recursos do Sinatra, mas como eu me diverti fazendo ele, logo tive a idéia de criar um projeto no Github para continuar o desenvolvimento. Sintam-se a vontade para clonar o projeto e sugerir melhorias. Existe uma lista de coisas que precisam ser melhoradas que incluem gerenciamento otimizado de feeds, caches, controle de datas para que os feeds não precisem ser buscados externamente a cada refresh, etc...

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.