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.