Desenvolvimento Web com Sinatra - Criando um Blog Estático

E ai galera, tudo bom?

Hoje estou aqui para falar sobre Sinatra, uma DSL para criar aplicações web em Ruby com o mínimo de esforço. Como exemplo irei criar um blog estático no estilo de Jekyll.

A sigla DSL vem de "Domain Specific-Language" em inglês e nada mais é do que uma linguagem de especificação para o domínio particular de um problema (vide Wikipedia).

Onde Usar

Sinatra é feito para casos específicos e usado geralmente em aplicações simples que demandam uma performance melhor do que de um framework como Ruby on Rails. Vamos supor que precisamos fazer uma API que retorne os dados de um cliente em JSON ao passarmos o id via GET, invés de fazermos uso de um framework mais completo, podemos fácilmente criar um aplicação Sinatra que só faça isso.

Iniciando com Sinatra

Primeiro de tudo você precisa ter o Ruby instalado em sua máquina, isso pode ser feito via RVM, nesse post explico como instalar e configurar em ambiente Linux.

Com o Ruby em mãos, vamos começar instalando a gem do Sinatra, rode o comando abaixo no terminal:

gem install sinatra

Vamos criar uma pasta para o projeto e o arquivo principal de nosso blog, escolha o diretório de preferência e rode:

mkdir sinatra-blog && touch sinatra-blog/main.rb

No exemplo acima dei o nome de sinatra-blog para pasta, e main para o arquivo, escolha o que preferir.

Abra o arquivo criado acima e jogue o código abaixo:

# encoding: UTF-8
require 'sinatra'

get '/' do
  "Olá mundo"
end

O trecho # encoding: UTF-8 serve para definir a codificação e permitir a utilização de caracteres UTF-8.

Salve o arquivo, acesse a pasta do projeto via terminal e rode o comando ruby main.rb, agora se você acessar http://localhost:4567/ deverá ver a mensagem na tela. Temos nossa primeira aplicação Sinatra rodando! É só isso mesmo, basta importar o arquivo do Sinatra e definir o método da página inicial e pronto, já temos uma aplicação rodando.

Sinatra usa REST, ou seja, sempre definimos o verbo HTTP que está executando a requisição, cada definição é como uma rota do Rails.

Caso alguma alteração feita não tenha sido aplicada, deve-se reiniciar o servidor, para isso basta pressionar Ctrl+C para parar e ruby main.rb para iniciar novamente.

Criando um Blog Estático

Layout

Vamos criar uma página HTML que possa servir de base para todo nosso blog, assim podemos chamar todas páginas dentro dela sem ter necessidade de ficar repetindo a parte que não será alterada, isso é chamado layout.

Dentro da pasta do projeto, crie uma pasta chamada views e dentro dela crie um arquivo layout.erb e adicione um conteúdo como abaixo:

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8"/>
    <title>Blog feito com Sinatra</title>
  </head>
  <body>
    Menu
    <ul>
      <li>
        <a href="/">Home</a>
      </li>
      <li>
        <a href="/sobre-o-autor">Sobre o autor</a>
      </li>
    </ul>
    <%= yield %>
  </body>
</html>

O conteúdo de todas as páginas de nosso blog será inserido no lugar que definimos <%= yield %>.

Criando a Página Inicial do Blog

Altere o arquivo main.rb na rota padrão (get "/") para invés de exibir uma mensagem chamar uma página HTML:

get '/' do
  erb :index
end

Crie um arquivo chamado index.erb (com a extensão erb podemos embutir código Ruby no HTML) e defina uma mensagem de boas vindas para a home do blog:

<h1>Seja Bem Vindo</h1>

Listando Arquivos HTML dos Posts na Home

Como nosso blog será estático, cada post nada mais é do que uma página HTML. Por organização, vamos criar um pasta chamada posts dentro de views para manter todos os artigos.

Vamos criar um script que leia o conteúdo dessa pasta e exiba na home do blog todos os posts cadastrados. O arquivo main.rb ficará assim:

# encoding: UTF-8
require 'sinatra'
require 'find'

def get_files(path)
  files = []
  Find.find(path) do |c|
    files << File.basename(c, ".erb") if !File.directory?(c)
  end
  return files
end

get '/' do
  @posts = get_files('./views/posts/')
  erb :index
end

Primeiro importamos a classe find, depois criamos um método que recebe um caminho, verifica se não é um diretório e retorna um array com o nome de todos arquivos encontrados. Na rota inicial, apenas chamamos a função acima e armazenamos o retorno em uma variável de instância que estará disponível na view.

Coloque o código abaixo no arquivo index.html para percorrer todos os posts e exibir na home:

<ul>
  <% @posts.each do |c| %>
    <li>
      <a href="/visualizar/<%= c %>"><%= c %></a>
    </li>
  <% end %>
</ul>

Exibindo Posts Salvos

Como já temos links para os posts do blog, precisamos criar o método responsável por exibir os posts. Inclua o código abaixo no arquivo main.rb:

get '/visualizar/:post/?' do
  halt 404 unless File.exist?("views/posts/#{params[:post]}.erb")
  erb :"posts/#{params[:post]}"
end

O /? serve para deixar opcional o uso de / no final da url.

Aqui definimos uma rota que espera um parâmetro, verifica se existe o arquivo (se não existir lança um erro 404) e exibe o post.

Criando Página de Erro Personalizada

Criar uma página de erro personalizada é facil, basta adicionar o código abaixo e criar o arquivo 404.erb dentro da pasta views.

not_found do
  erb :"404"
end

Criando Página Sobre o Autor

Por fim, vamos criar uma página responsável por exibir dados do autor, ela simplesmente carrega um HTML, veja:

get '/sobre-o-autor/?' do
  erb :author
end

Resultado

Conclusão

Sinatra sem dúvida é uma ótima ferramenta para completar a lista de qualquer desenvolvedor web e espero ter apresentado com clareza.

O código fonte completo desse tutorial está em meu GitHub.

Deixe sua opinião abaixo, o que você achou?

Até mais.

Written on December 13, 2012