Desenvolva sua primeira aplicação

Criado por Vesa Vänskä, @vesan

Você deverá ter Rails instalado. Consulte o guia de instalação se você ainda não instalou.

Passo 0: Conhecendo as ferramentas

Passo 1: Criando a aplicação

Vamos criar uma aplicação Rails denominada railsgirls.

Para começar vamos abrir o terminal:

Em seguida digite os comandos mostrados a seguir no terminal:

mkdir projects
cd projects
rails new railsgirls
cd railsgirls
rails server

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

Pressione CTRL-C no terminal para sair do servidor.

Coach: Explicar a finalidade de cada comando. O que foi criado? O que o servidor fez?

Passo 2: Criar Idea scaffold

Vamos usar uma funcionalidade do Rails denominada scaffold para criar um ponto de partida que nos permitirá listar, adicionar, remover, editar e ver as "coisas", no nosso caso ideas.

Coach: O que é Rails scaffolding? (Explicar o comando, o nome do modelo, as tabelas de banco de dados relacionadas, as convenções de nomes, atributos, tipos etc.) O que é migração e porquê são necessárias?

rails generate scaffold idea name:string description:text picture:string
rake db:migrate
rails server

Abra https://localhost:3000/ideas no seu navegador.

Pressione CTRL-C no terminal para sair do servidor.

Passo 3: Design

Coach: Fale sobre o relacionamento entre HTML e Rails. Quais são as visualizações geradas por HTML e quais são as geradas por Embedded Ruby (ERB)? O que é MVC é como ele se relaciona no contexto? (Modelos e controllers são responsáveis por gerar visualizações com HTML.)

Nossa app apresenta um design bem pobre por enquanto. Vamos providenciar melhorias nesse visual. Vamos usar o projeto Twitter Bootstrap para estilizar de uma maneira fácil nossa app.

Abra app/views/layouts/application.html.erb no seu editor de texto e acima da linha:

<%= stylesheet_link_tag "application" %>

acrescente o seguinte:

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

agora substitua:

<%= yield %>

por:

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

Vamos criar uma barra de navegação e um rodapé para nosso layout. No mesmo arquivo, logo após a tag de abertura <body> acrescente:

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

e, antes da tag de fechamento </body> acrescente:

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

Agora vamos alterar a estilização da tabela ideas. Abra app/assets/stylesheets/application.css e no final acrescente: 

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; }

Coach: Fale um pouco sobre CSS e layouts.

Passo 4: Criando mecanismo para upload de imagens

Vamos instalar um software que nos permita fazer upload de imagens com Rails.

Abra Gemfile localizado no diretório do projeto e depois da linha:

gem 'sqlite3'

acrescente o seguinte:

gem 'carrierwave'

Coach: Explique o que são bibliotecas e qual a sua utilidade. Fale um pouco sobre código aberto.

No terminal execute:

bundle

A essa altura você precisa restartar o servidor Rails no terminal. Isso é necessário para que a aplicação possa carregar a biblioteca que foi adicionada.

Agora podemos gerar o código para gerenciar uploads. No terminal execute:

rails generate uploader Picture

Abra app/models/idea.rb e embaixo da linha:

class Idea < ActiveRecord::Base

acrescente o seguinte:

mount_uploader :picture, PictureUploader

Abra app/views/ideas/_form.html.erb e altere:

<%= f.text_field :picture %>

para:

<%= f.file_field :picture %>

e

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

para:

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

Se você tentar fazer o upload de uma imagem será mostrado apenas o caminho para o arquivo e nada mais acontece. Vamos corrigir isso.

Abra app/views/ideas/show.html.erb e altere:

<%= @idea.picture %>

para:

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

Coach: Fale um pouco sobre HTML.

Passo 5: Acertos finais nos caminhos

Se você abrir https://localhost:3000 vai continuar vendo a página padrão. Vamos fazer um redirecionamento para a página ideas.

No Mac OS X e Linux execute a seguinte linha de código no terminal:

rm public/index.html

No Windows execute a seguinte linha de código no command prompt:

del public\index.html

Abra config/routes.rb e depois da primeira linha acrescente o seguinte:

root :to => redirect('/ideas')

Coach: Fale sobre caminhos.

O que vem a seguir?