Rails na prática

RAILS NA PRÁTICA
3 e 5 de Outubro

marcoafilho@gmail.com
marcoafilho

@marcoafilho

MARCO ANTONIO
FILHO
COORDENADOR DE TI INPACT.ME

#What? #FirstSteps #Bootstrapping #Mastering #Logic #KeepWalking

Rails?
#Framework
#Ruby
#DesenvolvimentoWeb
#MVC
#DRY
#ConvencaoSobreConfiguracao
#REST


Rails?

“#Framework implementado em #Ruby para
#DesenvolvimentoWeb seguindo a arquitetura
#MVC e tem como filosofia as seguintes práticas:
#DRY, #ConvencaoSobreConfiguracao, #REST.”


Ruby
#
1.
Tudo
eh
um
objeto

5.times
{
print
"Hello
World!"
}

#
2.
Blocos

sample_array.each
{
|element|
print
element
}

#
3.
Retorno
de
funcao
implicito

def
sum(a,b)

a
+
b

end

#
4.
Tudo
eh
aberto

class
Fixnum

def
previous

self
–
1

end

end

6.previous

#
5.
Operadores
unarios.
Nao
ha
++,
-‐-‐;
Use
+=


Ruby
#
6.
Atribuicao
paralela

a,
b
=
b,
a

#
7.
Cada
string
é
um
objeto

print
"hello".object_id

print
"hello".object_id
#
Um
novo
objeto

#
8.
Verdadeiro
e
falso
em
Ruby

if
0

print
"Hello
World"

end

#
9.
Suporte
a
faixa
de
numeros
e
expressoes
regulares
de
forma
nativa

(1..10).each
{
print
"Hello
World"
}

#
10.
Indicadores
de
metodo

class
Woman

def
loves?(thing)

thing
==
"chocolate"
?
true
:
false

end

end


MVC
DATABASE

MODEL
2
. 3
.
D D
E A
M T
A A
N
D

4. RESPONSE
CONTROLLER VIEW

1. REQUEST


A aplicacão
OBJETIVO
Desenvolver uma plataforma para gerenciamento de finanças pessoais.

FUNCIONALIDADES
Manutenção de contas (Corrente, Poupança, Carteira);
Manutenção de gastos;
Relatórios.


Wireframes


Criando Uma Aplicação Rails
Configuração
Ruby 1.9.3
Rails 3.2.8
Git 1.7.4.x

Configuração
Abra o terminal e digite:

$
rails
new
my_budget


Estrutura de diretórios


Preparando para implantar
Gemfile
group
:development,
:test
do

gem
'sqlite3'

end

group
:production
do

gem
'pg'

end

Git
$
git
config
-‐-‐global
config.name
"Marco
Antonio"

$
git
config
-‐-‐global
config.email
"marcoafilho@gmail.com"

$
git
init

$
git
add
.

$
git
commit
-‐m
"Meu
primeiro
commit."


Heroku
1. Crie uma conta em heroku.com
2. Configure o heroku com a sua aplicação
Dentro da pasta do seu projeto:

$
gem
install
heroku

$
ssh
keygen
-‐t
rsa

$
heroku
login

$
heroku
keys:add

$
heroku
create
-‐-‐stack
cedar

$
git
push
heroku
master

$
heroku
open


Página inicial
Criando um controle para abarcar páginas
$
rails
g
controller
Pages
home

Editando o html
Uma página é criada em app/views/pages/home

<img
alt="Welcome
picture"
src="/assets/welcome.png">


Página inicial
Visualizando alterações localmente
Execute o comando a seguir e acesse http://localhost:3000

$
rails
s

Alterando as rotas
Entre no arquivo config/routes.rb e adicione a seguinte linha:

root
to:
"pages#home"

Remova a public/index.html e reinicie o servidor caso seja necessário.


Publicando as alterações
$
git
rm
public/index.html

$
git
add
.

$
git
commit
-‐m
"Nova
home
page."

$
git
push
heroku
master

$
heroku
open


CRUD de contas
Definindo um modelo de contas
$
rails
g
scaffold
Account
name:string
model:string

Compondo o bando de dados

$
rake
db:migrate

Acesse a rota http://localhost:3000/accounts e veja o reultado final


O que aconteceu?
Rails gerou automaticamente as 3 camadas do MVC
-  Um arquivo de migração que descreve a nova tabela no banco de dados;
-  Um modelo Account que interage com o banco de dados;
-  Um controlador AccountsController que liga o modelo Account a ações;
-  5 páginas que representam algumas ações básicas como listagem e edição;
-  Folhas de estilo e um javascripts;
-  Alguns arquivos para escrever testes;

Publicando as rotas
$
git
add
.

$
git
commit
-‐m
"Pagina
de
gerenciamento
de
contas."

$
git
push
heroku
master

$
heroku
run
rake
db:migrate

$
heroku
open


Entendendo a mágica
Migrations
Alterações na estrutura do banco de dados:
Abra o arquivo db/migrate/[timestamp]_create_accounts.rb
class
CreateAccounts
<
ActiveRecord::Migration

def
change

create_table
:accounts
do
|t|

t.string
:name

t.string
:model

t.timestamps

end

end

end


Models
Em sua maior parte são representações de tabelas no banco em objetos Ruby;
Abra o arquivo app/models/account.rb

class
Account
<
ActiveRecord::Base

attr_accessible
:model,
:name

end


Controllers
Representam ações que podem ser feitas usando modelos ou não;
Veja o arquivo app/controllers/accounts_controller.rb
class
AccountsController
<
ApplicationController

def
index

@accounts
=
Account.all

respond_to
do
|format|

format.html
#
index.html.erb

format.json
{
render
json:
@accounts
}

end

end

...

end


Views
Representam ações que podem ser feitas usando modelos ou não;
Veja o arquivo app/views/index.html.erb
<%
@accounts.each
do
|account|
%>

<tr>

<td><%=
account.name
%></td>

<td><%=
account.model
%></td>

<td><%=
link_to
'Show',
account
%></td>

<td><%=
link_to
'Edit',
edit_account_path(account)
%></
td>

<td><%=
link_to
'Destroy',
account,
method:
:delete,

data:
{
confirm:
'Are
you
sure?'
}
%></td>

</tr>

<%
end
%>


Routes
Definem url a partir de ações de controladores;
O comando resources cria as rotas para as ações Restful de um controlador;
Abra o arquivo config/routes.rb

MyBudgetTraining::Application.routes.draw
do

resources
:accounts

root
to:
"pages#home"

end

DANDO VIDA
À APLICAÇÃO


Twitter Bootstrap


Twitter Bootstrap Rails
Inserindo a gem na aplicação
Vá no arquivo Gemfile e adicione:

gem
'twitter-‐bootstrap-‐rails',
'2.1.3'

Instalando e usando a gem
$
bundle
install

$
rails
g
bootstrap:install

$
rails
g
bootstrap:layout
application
fixed

$
rails
g
bootstrap:themed
Accounts

Remova os comandos favicon_link_tag do arquivo layouts/application.html.erb
Para saber mais, verifique a documentação do twitter bootstrap


Publique mais uma vez
Envie sua aplicação para o heroku
$
git
add
.

$
git
commit
-‐m
"Template
usando
twitter
bootstrap."

$
git
push
heroku
master

$
heroku
open

Porque estamos fazendo isso?
A entrega contínua é uma prática de desenvolvimento ágil (XP)

APROFUNDANDO
UM POUCO MAIS


Gerenciamento de transações
Model
$
rails
g
model
Transaction
account:references

>
description:string
value:decimal
performed_at:datetime

>
kind:string

Execute a nova migration
A entrega contínua é uma prática de desenvolvimento ágil (XP)

$
rake
db:migrate

Importante!
No arquivo models/transaction.rb adicione como attr_accessible o valor :account_id


Controllers
$
rails
g
controller
Transactions

Adicione ações ao controller
Adicionaremos sete ações ao controller index, show, new, create, edit, update, destroy;

class
TransactionsController
<
ApplicationController

def
index

end

end


Ação index
Representa uma listagem do modelo

def
index

@transactions
=
Transaction.all

end

Ação show
Representa uma nova instância de um modelo para apresentação

def
show

@transaction
=
Transaction.find(params[:id])

end


Ação new
Representa uma nova instância de um modelo

def
new

@transaction
=
Transaction.new

end

Ação edit
Representa uma instância de um modelo existente para ser modificada

def
edit

@transaction
=

end


Ação create
Cria um objeto no banco

def
create

@transaction
=
Transaction.new(params[:transaction])

if
@transaction.save

redirect_to
@transaction,
notice:
"Transaction
created"

else

render
action:
"new"

end

end


Ação update
Atualiza um objeto no banco

def
update

@transaction
=

if
@transaction.update_attributes(params[:transaction])

redirect_to
@transaction,
notice:
"Transaction
updated"

else

render
action:
"edit"

end

end


Ação destroy
Elimina um objeto do banco de dados

def
destroy

@transaction
=

@transaction.destroy

redirect_to
transactions_path

end


Rotas
Adicionaremos uma rota para os recursos do controle transação

MyBudgetTraining::Application.routes.draw
do

resources
:accounts

resources
:transactions

root
to:
"pages#home"

end

Agora temos o mesmo conjunto de endereços que temos em contas;

Precisamos da camada de visualização!


Views
-  São páginas html com ruby embutido (erb);
-  Rails não provê nenhum gerador para criação de views;
-  Crie manualmente na pasta views/transactions os arquivos:
-  index.html.erb;
-  show.html.erb;
-  new.html.erb;
-  edit.html.erb;
-  _form.html.erb;


<%
#index.html.erb
%>

<div
class="page-‐header"><h1>Transações</h1></div>

<table
class="table
table-‐striped">

<thead>

<tr>

<td>Descrição</td>

<td>...</td>

</tr>

</thead>

<tbody>

<%
@transactions.each
do
|transaction|
%>

<tr>

<td><%=
link_to
transaction.description,
transaction
%></td>

<td>...</td>

<td><%=
link_to
'Editar',
edit_transaction_path(transaction),
class:
"btn
btn-‐
mini"
%></td>

<td><%=
link_to
'Remover',
transaction_path(transaction),
method:
:delete,

data:
{
confirm:
"Tem
certeza?"
},
class:
"btn
btn-‐mini
btn-‐danger"
%></td>

</tr>

<%
end
%>

</tbody>

</table>

<%=
link_to
'Nova',
new_transaction_path,
class:
"btn
btn-‐primary"
%>


<%
#show.html.erb
%>

<div
class="page-‐header"><h1>Transação</h1></div>

<dl
class="dl-‐horizontal">

<dt><strong>Conta:</strong></dt>

<dd><%=
@transaction.account.name
%></dd>

<dt><strong>Descrição:</strong></dt>

<dd><%=
@transaction.description
%></dd>

<dt><strong>Valor:</strong></dt>

<dd><%=
@transaction.value
%></dd>

<dt><strong>Efetuado
em:</strong></dt>

<dd><%=
@transaction.performed_at
%></dd>

<dt><strong>Tipo:</strong></dt>

<dd><%=
@transaction.kind
%></dd>

</dl>

<div
class="form-‐actions">

<%=
link_to
'Retornar',
transactions_path,
class:
'btn'
%>

<%=
link_to
'Editar',
edit_transaction_path(@transaction),
class:
'btn'
%>

<%=
link_to
'Remover',
transaction_path(@transaction),
method:
:delete,

data:
{
confirm:
'Tem
certeza?'
},
class:
'btn
btn-‐danger'
%>

</div>


<%
#new.html.erb
%>

<div
class="page-‐header"><h1>Nova
transação</h1></div>

<%=
render
'form'
%>

<%
#edit.html.erb
%>

<div
class="page-‐header"><h1>Editar
transação</h1></div>

<%=
render
'form'
%>


<%
#_form.html.erb
%>

<%=
form_for
@transaction,
html:
{
class:
'form-‐horizontal'
}
do
|f|
%>

<div
class="control-‐group">

<%=
f.label
:account_id,
class:
'control-‐label'
%>

<div
class="controls">

<%=
f.select
:account_id,
Account.all.map{
|a|
[a.name,
a.id]
},

class:
'number_field'
%>

</div>

</div>

<div

<%=
f.label
:description,
class:
'control-‐label'
%>

<div
class="controls"><%=
f.text_field
:description,
class:
'text_field'
%></div>

</div>

...

<div

<%=
f.label
:performed_at,
class:
'control-‐label'
%>

<div
class="controls">

<%=
f.date_select
:performed_at,
class:
'datetime_select'
%>

</div>

</div>

<div
class="form-‐actions">

<%=
f.submit
'Salvar',
class:
'btn
btn-‐primary'
%>

<%=
link_to
'Cancelar',
transactions_path,
class:
'btn'
%>

</div>

<%
end
%>


Layout da aplicação
De onde vem o menu e a barra lateral?
Da pasta views/layouts/application.html.erb
Substitua os links da ul.nav pelos seguintes comandos:

<%=
link_to
"Contas",
accounts_path
%>

<%=
link_to
"Transações",
transactions_path
%>

No wireframe não há uma barra lateral;
Remova a div.span3 e todo o seu conteúdo

Clicar no logo MyBudget deveria levar para home

<%=
link_to
"MyBudget",
root_path,
class:
"Brand"
%>


Publique as alterações
Navegue localmente e verifique se tudo está certo

E execute o velho código para publicar
$
git
add
.

$
git
commit
-‐m
"Pagina
de
gerenciamento
de
transacoes."

$
git
push
heroku
master

$
heroku
run
rake
db:migrate

$
heroku
open

ADICIONANDO UM
POUCO DE LÓGICA


Relacionamento de objetos
Uma conta tem muitas transações...
Se formos à classe models/transaction.rb vemos a seguinte linha

belongs_to
:account

Devemos agora adicionar o inverso na classe models/account.rb

has_many
:transactions

Isso fornecerá uma série de métodos para manipular transações a partir de uma conta

Observe o uso do plural no segundo comando


Apresentando o total da conta
Uma conta tem muitas transações...
Vá até a classe models/account.rb vemos a seguinte linha
def
current_amount

transactions.where(kind:
"Income").sum(:value)
-‐

transactions.where(kind:
"Expense").sum(:value)

end

Precisamos apresentar essa informação agora na listagem e na visualização

<%
#views/accounts/index.html.erb
%>

<td><%=
account.current_amount
%></td>

<%
#views/accounts/show.html.erb
%>

<dt>Total</dt>

<dd><%=
@account.current_amount
%></dd>


Restrigindo os gastos por tipo
Uma transação pode ser uma saída ou uma entrada
Vá até a classe models/transaction.rb e adicione a constante

TYPES
=
["Income",
"Expense"]

E no arquivo views/transactions/_form.html.erb substitua:

<%=
f.text_field
:kind,
class:
'text_field'
%>

Por

<%=
f.select
:kind,
Transaction::TYPES
%>


Exercícios
Aplicação:
-  Use páginação com o plugin will_paginate: http://goo.gl/c3OGx
-  Estilize com bootstrap-will_paginate: http://goo.gl/XZUy8

Visualização de contas (show)
-  Apresente uma paginação para as últimas 5 transações;
-  Ordene as transações por data;

Relatórios
-  Crie uma página de relatórios em que deve ser apresentado as despesas por dia e mês;
-  Integre com o Google Charts: http://goo.gl/7bWlQ


Gems
Anotar
Annotate Models (https://github.com/ctran/annotate_models)

Template
Haml e Haml-rails (https://github.com/indirect/haml-rails)

Autenticação
Devise (https://github.com/plataformatec/devise)

Testes
Rspec (https://github.com/dchelimsky/rspec)
Capybara (https://github.com/jnicklas/capybara)
Factory Girl (https://github.com/thoughtbot/factory_girl_rails)

Upload de arquivos
Carrierwave (https://github.com/jnicklas/carrierwave)


Editores de texto
Multiplataforma
Sublime Text 2 (http://www.sublimetext.com/2)
Vim (http://www.vim.org/)
Aptana (http://www.aptana.com/)
MAC OS X
Textmate (http://macromates.com/)
LINUX
Komodo Edit (http://www.activestate.com/komodo-edit)


Referências
Livros
Learn To Program (http://pine.fm/LearnToProgram/)
Rails Tutorial (http://ruby.railstutorial.org/)
Rails guides (http://guides.rubyonrails.org/)
Documentação
Rails API (http://api.rubyonrails.org/)
Vídeos
Railscasts (http://railscasts.com/)
An Introduction to Rails (http://goo.gl/HA5Np)
Tutorial dinâmico
Code School (http://www.codeschool.com/)
Ruby Weekly (http://rubyweekly.com/)

Dúvidas
? ? ?
?
?
?
? ? ?
?
?
?

MUITO OBRIGADO!

marcoafilho@gmail.com
marcoafilho

@marcoafilho

Rails na prática

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Rails na prática

Rails na prática