Concrete Logo
Hamburger button

Como construir um site em minutos usando Ruby, Sinatra e HAML.

  • Blog
  • 28 de Abril de 2014
Share

Introdução

A primeira coisa que lembramos ao ouvir a palavra Ruby é do framework Rails. Sem dúvida, o Rails é uma das ferramentas de mais destaque desta linguagem, mas não há como negar que ele possui uma variedade enorme de recursos, que podem confundir quem quer aprender a partir do nível básico. Para iniciar um novo site, o Rails cria uma estrutura com mais de 70 arquivos e pastas:

Quando queremos um site pequeno ou uma página funcional para alguma atividade bem específica, não precisamos de toda essa estrutura, o que pode até atrapalhar. Para nos ajudar nesta tarefa, o melhor é utilizar uma DSL (Domain-specific language, ou Linguagem de domínio específico). E é aí que o Sinatra entra em cena.

O Sinatra é um framework leve, sem os geradores automáticos de estrutura (os famosos Generators do Rails) e muito rápido. Apesar de manual, é poderoso, permite modificações e é muito confiável. Por estes e outros motivos, grandes empresas como Apple, GitHub e BBC o utilizam em seus sites principais.

Mas, mesmo utilizando um framework, cedo ou tarde será necessário utilizar HTML no desenvolvimento de um site. Dependendo do tamanho, vai ser necessário muito HTML. O HAML nasceu para ajudar nesta etapa, reduzindo o esforço de construção das páginas por meio de uma linguagem clara e intuitiva.

Apresentações das ferramentas feitas, mãos à obra!

Instalação

Em nosso ambiente de testes, utilizamos máquinas virtuais com Debian Wheezy 7.4, acessando apenas  os repositórios oficiais e estáveis. Importante: Todos os comandos daqui em diante serão executados como root! Aqui cabe uma observação: normalmente não devemos utilizar o usuário root para este tipo de tarefa, porém, estamos fazendo alterações em pacotes do sistema operacional que exigem este privilégio. Se o usuário dominar o su/sudo, recomendamos que utilize onde necessário, mas não abordaremos segurança do S.O. neste artigo. Este processo tem fins didáticos e foi criado para ser executado apenas em ambientes de estudo.  Recomendamos a utilização de máquinas virtuais (VirtualBox ou VMWare).

É necessário possuir conhecimentos básicos em utilização do GNU/Linux e administração básica (saber instalar pacotes, criar diretórios, etc). Vamos conferir os dados do sistema operacional e atualizar a lista de pacotes do APT:

Antes de continuar, vamos mostrar que não havia nenhuma versão do Ruby instalada e, em seguida, prosseguiremos com a instalação:

Utilizaremos o Rubygems para gerenciar os pacotes de programas e bibliotecas Ruby (gems). Algumas gems precisam ser compiladas, e por isso vamos precisar do pacote build-essential:

Já podemos adicionar algumas gems necessárias para nosso projeto:

Pronto! O ambiente de desenvolvimento já está instalado. Não foi tão difícil, foi?

Hello World

O modo mais simples de começar a programar em qualquer linguagem é fazendo o clássico hello world. Para fazer isso usando o Sinatra, vamos criar um arquivo contendo o código Ruby necessário para responder aos HTTP Requests feitos pelo navegador que acessará a aplicação.

Utilizando o editor de sua preferência (o meu é o vim), crie um novo arquivo. Para manter tudo organizado, coloque este arquivo em uma pasta com o nome do projeto.

O programa consiste em duas partes principais, uma chamada à biblioteca do Sinatra, e um bloco que recebe a requisição GET. O código fica assim:

“Você está me dizendo que essas linhas vão abrir um socket no sistema operacional, escutar em uma porta TCP, receber requisições através do protocolo HTTP e responder com uma mensagem Hello World? Isso só pode estar errado!!!”

Não, não está errado. É só isso mesmo. Apesar de ser manual, o Sinatra é simples e economiza preciosas linhas de código. Vamos executar nosso arquivo.

Se esta mensagem foi exibida, então está tudo certo com o programa de teste. Se você está usando o Debian para desenvolver e tem acesso a algum navegador, pode testar diretamente a URL https://localhost:4567. Se você está testando em outro local, como um servidor sem modo gráfico, pode mudar o IP utilizado pelo Sinatra de localhost (somente local) para 0.0.0.0 (todos os IPs). Para fazer isso, basta parar o servidor com CTRL+C e adicionar uma linha ao nosso arquivo:

Executamos novamente o arquivo. Repare que desta vez o serviço subiu em todos os IPs da máquina:

Já podemos acessar nossa aplicação através do IP da máquina. No meu caso, o IP é 10.200.0.207, verifique o seu IP e acesse via navegador, na porta 4567:

W1

Se olharmos no terminal onde executamos o comando, veremos as requisições HTTP:

Basicamente, esta aplicação recebe uma requisição do tipo HTTP GET e responde com uma string, que em nosso caso é “Hello World”. Mas, e se essa string fosse um código HTML, daria certo?

Sim!

A string é passada diretamente para o navegador e, se for um código HTML, ele será interpretado. Se ao invés de “Hello World” tivéssemos colocado “<marquee>Bom Dia!</marquee>”, poderíamos ver a mensagem passando de um lado para o outro, como nos sites “bonitos” dos anos 90.

Com estes conhecimentos já estamos habilitados a dar mais um passo. Que venha o HAML!

HTML sem esforço com HAML

Nosso foco não inclui uma visão aprofundada do HAML, mas não se preocupe. É bem simples.

HAML transforma isso:

Nisso:

São 23 linhas resumidas em apenas 15, sem a necessidade de se preocupar com o fechamento das tags. Vamos construir uma página em HAML e testar em nosso aplicativo web. Para isso, precisamos criar uma pasta para agrupar as views, que serão renderizadas pelo controller, como mandam as boas práticas do MVC. Por padrão o Sinatra busca os arquivos na pasta views, mas esse nome pode ser alterado, se necessário. Vamos manter o padrão, e criar um arquivo chamado index.haml com o conteúdo HAML mostrado acima.

Agora, vamos editar o aplicativo principal, o hello.rb e trocar a linha onde tínhamos nossa mensagem:

O Sinatra sabe que haml :index deve ser direcionado para views/index.haml. Vamos executar?

W2

Funcionou exatamente como queríamos, e graças ao HAML, temos uma página novinha em folha.

Usando Layouts

Tem certas partes do código que são iguais para todas as páginas de um site, como o topo, o menu e o rodapé, por exemplo. Não seria produtivo escrever o mesmo código HAML para todas as páginas, e quando fosse necessário aplicar alguma mudança, ela fosse feita em todas? Um jeito simples de centralizar as partes comuns é usando um layout.

Utilize o CTRL+C para finalizar o Sinatra e vamos fazer algumas alterações. Precisaremos criar um arquivo para o layout, e vamos usar como base o nosso index.haml.

Precisaremos mudar o nosso arquivo de layout para que ele seja genérico, isto é, possa renderizar todas as páginas sem exibir dados fixos. O arquivo deve ficar deste modo:

Agora, precisamos tirar o conteúdo que já existe no layout.haml do arquivo index.haml, e deixar apenas o corpo do texto que será exibido na página.

A partir deste momento, vamos começar com a estrutura do site definitivo. Como o Sinatra é um framework rápido, vamos simular o site de uma pizzaria, e nosso index.haml vai ficar assim:

Fala a verdade, ficou muito mais simples, não? Quase não percebemos os códigos do arquivo index.haml, a leitura do conteúdo é muito facilitada.

Lembre-se que estamos na pasta views, temos que subir um nível e fazer uma pequena alteração em nosso hello.rb:

W3

Está começando a se parecer com um site e o mais importante é que nosso layout funcionou. Já podemos criar mais páginas.

As outras páginas

Nossa pizzaria precisa de uma página com localização, uma com história, uma de cardápio e uma de contato. Para adicionar mais páginas, precisarmos também adicionar um menu. Começaremos pelas páginas. Temos que editar o hello.rb e copiar o bloco ‘get /’ para aceitar mais requisições. Com algumas alterações para tornar o arquivo mais legível, e também o suporte à caracteres especiais, ficamos assim:

Para cada entrada na linha haml :, é necessário criar o arquivo correspondente com algum conteúdo em HAML. O texto (retirado da Wikipedia entre outros sites) não tem importância, atente-se para o HAML.

Agora que temos muitas páginas, que tal criar um menu de navegação?

Vamos editar o layout.haml, assim teremos nosso menu em todas as páginas, editando apenas uma.

Vamos ver como ficou?

W4
W5
W6
W7

Ótimo! O site não está muito bonito, mas já apresenta uma estrutura definida e é funcional.

Agora precisamos melhorar a aparência.

Incluindo arquivos estáticos

O Sinatra procura por arquivos estáticos, como CSS, JavaScripts, imagens, etc. na pasta public, por padrão.

Agora nós criaremos um arquivo CSS para melhorar a aparência do nosso site. O intuito aqui não é fazer um site maravilhoso; é explicar o mecanismo de funcionamento do Sinatra.

Voltando à linha de comando e usando o CTRL+C para interromper o Sinatra, vamos criar a pasta public e o arquivo estilo.css dentro dela. Mas é importante frisar que não devemos referenciar a pasta public no código. Por exemplo, uma imagem em /public/teste.png deve ser referenciada apenas como /teste/png.

Pensamos em um CSS básico que apenas “ajusta” os itens na página e dá um pouco de cor para o site.

Depois de criar o CSS, devemos dizer ao nosso arquivo de layout que queremos utilizá-lo, de modo que ele seja aplicado em todas as páginas.

Vamos então editar o nosso arquivo de layout e incluir o CSS. Vamos aproveitar também para inserir algumas imagens que vamos baixar de bancos de imagens gratuitos. Vamos colocar uma imagem de pizza, de uma moto e de um refrigerante na página inicial.

Vamos colocar uma tag link, referenciando nosso novo CSS.

E agora vamos inserir as imagens na página inicial, aproveitando para colocar uma tag %p e um %strong no texto das caixinhas de destaque:

Como ficou nosso site? É hora de executar novamente o Sinatra e conferir o resultado no navegador.

W8

W9

W10

W11

W12

Conclusão

Este artigo foi uma pequena demonstração do ganho em produtividade que podemos atingir com um framework minimalista como o Sinatra.

Existe bastante documentação sobre o assunto, separamos aqui algumas referências:

Esperamos que vocês aproveitem! Se tiver alguma dúvida ou sugestão sobre as ferramentas que utilizamos, é só deixar seu comentário aqui embaixo. Até a próxima!