Tutorial App Rails Girls Berlim

Nota do tradutor: Esse tutorial explica a criação de uma aplicação Rail desenvolvida no WorkShop Rails Girls realizado em Berlim em abril de 2012.

Hoje iremos criar juntos nossa primeira aplicação Rails.

Essa aplicação nos ensinará os fundamentos da linguagem de programação Ruby on Rails. Nós preparamos a aplicação de modo que você possa focar e entender o que estaremos fazendo.

Sobre o quê será a aplicação?

Basicamente é uma aplicação sobre esse WorkShop contendo um mapa no qual o visitante poderá visualizar o lugar de origem de cada participante do WorkShop. É também uma espécie de livro de visitas no qual será possível fazer comentários. É uma aplicação bem simples que pode facilmente ser adaptada para contemplar às suas próprias idéias e necessidades.

Para uma visão antecipada da aplicação funcionando visite essa página (abre em nova janela).

Divirta-se codificando e não hesite em perguntar aos coaches sempre que tiver uma dúvida.;-)

Passo 0: As ferramentas de desenvolvimento

As instruções para instalação das ferramentas podem ser encontradas em Instale Ruby on Rails (abre em nova janela)

Editor de texto: (Gedit, Vim, Emacs, Komodo Edit, Sublime Text, Textmate) são exemplos de editores de texto que você poderá usar para escrever e editar códigos.
Terminal / Command Prompt é a interface para executar comandos e rodar o servidor.
Navegador (web browser) (Firefox, Safari, Chrome) para visualizar suas aplicações.

Passo 1: Criando a aplicação

Vamos criar uma aplicação denominada railsgirls.

Para começar abra o Terminal/Command Prompt:
OS X: Abra Spotlight, digite Terminal e clique a opção Terminal.
Windows: Clique Start-menu procure por Command Prompt clique em Command Prompt with Ruby on Rails.

Digite os seguintes comandos:

mkdir projects 
cd projects
rails new railsgirls 
cd railsgirls 
rails s

Abra https://localhost:3000 no navegador.
Tecle CTRL-C noTerminal/Command Prompt para parar o servidor.

Coach: Explicar a finalidade e função de cada comando. O que foi criado? Qual o comportamento do servidor.

Passo 2: Criar o scaffold para participantes

Vamos usar scaffolds Rails para criar um ponto de partida que nos permitirá listar, adicionar, remover, editar e visualizar as "coisas"; no nosso caso os participantes do WorkShop.

Coach: Explicar o que é scaffold (1. o comando; 2. o nome do modelo e a tabela do banco de dados; as convenções de pluralização para nomes, 3. os atributos e os tipos.).
O que são migrações, quando e porquê é necessário usá-las.

rails generate scaffold attendee name:string twitter_handle:string bio:text address:text picture:string
rake db:migrate
rails s

Abra https://localhost:3000/attendees no navegador.

Teclar CTRL-C para o servidor.

Passo 3: Design

Coach: Fale sobre o relacionamento entre HTML e Rails;
quais partes da visualização são geradas por HTML e quais são as geradas por Embedded Ruby (ERB)?
Como isso está relacionado com MVC (modelos e controladores gerenciando a lógica de geração de HTML dinâmico). Explique como são ordenadas e classificadas as pastas dos arquivos da aplicação.

O design da aplicação é rudimentar. Vamos fazer algo para melhorar. Usaremos o projeto Twitter's Bootstrap para nos proporcionar uma maneira fácil de obter estilização.

Abra app/views/layouts/application.html.erb e acrescente antes da linha:

<%= stylesheet_link_tag "application" %>

a seguinte linha de código:

<link rel="stylesheet" href="https://railsgirls.com/assets/bootstrap.css">

e altere a linha:

<%= yield %>

para:

<div class="container"><%= yield %></div>

Vamos acrescentar uma barra de topo e um rodapé no layout e estilizá-los, estilizando também a tabela dos participantes. No arquivo application.html.erb logo após a tag de abertura <body> acrescente a seguinte marcação HTML:

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container"><a class="brand" href="/">The workshop app</a><ul class="nav">
              <li class="active"><a href="/attendees">attendees</a></li>
            </ul>
        </div>
    </div>
</div>

antes da tag de fechamento </body> acrescente a seguinte marcação HTML:

<footer>
    <div class="container">Rails Girls 2012</div>
</footer>

Abra app/assets/stylesheets/application.css e acrescente no final as seguintes regras CSS:

#logo { 
    font-size: 20px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    float: left;
    padding: 10px;
}
body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle !important; border: none !important; }
th { border-bottom: 1px solid #DDD !important; }
td.picture { width: 140px; }
td.picture img { width: 140px; }

Coach: falar sobre CSS e layouts.

Passo 4: Funcionalidade para upload de imagens

Precisamos instalar uma biblioteca para processamento de imagens. Abra Gemfile e acrescente:

gem 'carrierwave'

logo após a linha:

gem 'sqlite3'

Coach: Fale sobre bibliotecas e para que são usadas. Fale um pouco sobre Open Source.

Vamos criar o código para manipulação de imagens.

No Terminal/Command Prompt rode:

bundle

A essa altura você precisa iniciar o servidor Rails no Terminal/Command Prompt. Isso é necessário para carregamento da gem adicionada.

Agora você pode fazer o upload de uma imagem rodando o seguinte código:

rails generate uploader Picture

Abra app/models/attendee.rb e acrescente:

mount_uploader :picture, PictureUploader

logo após a linha:

class Attendee < ActiveRecord::Base

Abra app/views/attendees/_form.html.erb e altere a linha:

<%= f.text_field :picture %>

para:

<%= f.file_field :picture %>

altere também a linha:

<%= form_for(@attendee) do |f| %>

para:

<%= form_for(@attendee, :html => {:multipart => true}) do |f| %>

Você verá apenas o caminho para o arquivo e nada mais acontece. Vamos resolver isso.
Abra app/views/attendees/show.html.erb e altere a linha:

<%= @attendee.picture %>

para:

<%= image_tag(@attendee.picture_url, :width => 600) if @attendee.picture.present? %>

Coach: Fale um pouco sobre HTML.

Passo 5: Acertos finais

Se você abrir https://localhost:3000 vai visualizar a página padrão. Vamos redirecionar isso para a página dos participantes.
Em OS X and Linux, rode no terminal o seguinte código:

rm public/index.html

Em Windows, rode no Command Prompt o seguinte código:

del public\index.html

A seguir abra config/routes.rb e acrescente a seguinte linha de código depois da primeira linha:

root :to => redirect("/attendees")

Coach:Fale sobre routes.

Passo 6: Adicione Geolocalização e Google Maps

Para marcar a localização do participante no mapa precisamos acrescentar duas gems: uma para cálculo da posição e uma para mostrar a posição no mapa..
Começaremos por adicionar geolocalização ao perfil do participante.

Abra Gemfile e acrescente

gem 'geocoder'

e

gem 'gmaps4rails'

depois da linha:

gem 'carrierwave'

No Terminal/Command Prompt rode:

bundle

e a seguir:

rails generate migration AddLatitudeAndLongitudeToAttendee latitude:float longitude:float
rake db:migrate

Abra app/models/attendee.rb e acrescente:

geocoded_by :address
after_validation :geocode

depois de:

mount_uploader :picture, PictureUploader

Ainda não terminamos, precisamos adicionar o mapa.
No Terminal/Command Prompt rode

rails generate gmaps4rails:install

Volte ao arquivo app/models/attendee.rb e acrescente:

acts_as_gmappable :process_geocoding => false

depois de:

after_validation :geocode

Abra app/controllers/attendees_controller.rb e acrescente

@pins = @attendees.to_gmaps4rails

no método index method, depois de:

@attendees = Attendees.all

Mais um passo e o mapa aparece na aplicação.

Abra app/views/attendees/index.html.erb e acrescente:

<br/> 
<%= gmaps4rails(@pins) %> 
<%= yield :scripts %>

após a tabela.

Agora reestarte o servidor Rails noTerminal/Command Prompt.
Para marcar a localização dos participantes no mapa precisamos atualizar seus perfis.