Aula Ruby

RUBY ON RAILS
Criando uma aplicação do inicio ao fim

APRESENTAÇÃO
Felipe Gadelha Ruoso
Pós-graduando em Desenvolvimento Web e Aplicativos Móveis
5 anos de experiência com Ruby
Desenvolvedor Ruby na Tray
RubyConf 2017
https://felipegruoso.herokuapp.com/

COUNTEÚDO
• Introdução
• O que vamos construir?
• Quais recursos vamos utilizar?
• Testes
• Deploy

INTRODUÇÃO - RUBY
Ruby é uma linguagem dinâmica, open source com foco na
simplicidade e na produtividade. Tem uma sintaxe elegante de leitura
natural e fácil escrita.
Criado por: Yukihiro Matsumoto - Matz (1995)
Versão atual: 2.3.5
https://www.ruby-lang.org/pt/

INTRODUÇÃO - RAILS
Rails é um framework para aplicações web baseado no modelo MVC.
Contém tudo que é necessário para construir aplicações fantásticas
de maneira simples e divertida.
Criado por: David Heinemeier Hansson - DHH (2003)
Versão atual: 5.1.4
http://rubyonrails.org/

INTRODUÇÃO - GEM
Gem é a abstração de um trecho de código ou conjunto de arquivos
reutilizáveis etiquetadas com um nome e versão.
Criado por: Nick Quaranto (2009)
http://www.akitaonrails.com/2009/2/2/entendendo-rubygems
https://rubygems.org/

O QUE VAMOS CONSTRUIR?
Vamos fazer algo simples e rápido!
Nossa aplicação vai ser um gerenciador de tarefas, também
conhecido como TODO List. Precisamos basicamente de:
• Login de usuário;
• Gerenciamento de Tarefas;

QUAIS RECURSOS VAMOS UTILIZAR?
Essa aplicação parece simples, porém, existe uma certa complexidade
Controle de usuário – Devise (Gem - Engine)
Controle de Idioma – Internacionalização (I18n)
Testes - Rspec
Deploy – Heroku
Interface – Bootstrap (Gem)

TESTES
Manter a qualidade da sua aplicação é extremamente importante. Além de
auxiliar na manutenção, ajuda na detecção de falhas (bugs) antes de sua
publicação no mercado.
TDD - Rspec (Gem)
BDD – Cucumber (Gem)
http://rspec.info/
https://cucumber.io/

DEPLOY
Deploy é o processo de publicação de uma aplicação. É nesse momento
que seu código “vai para produção”.
Heroku é uma plataforma cloud desenvolvida em Ruby preparada para
hospedar aplicações de várias linguagens. Possui um ambiente
customizável, de fácil utilização e oferece planos gratuitos.
https://www.heroku.com/

HANDS ON RAILS
Vamos trabalhar...

CRIANDO A APLICAÇÃO
Executar no console
rails new todo_list -d mysql
Criar banco de dados
bundle exec rake db:create
Rodar a aplicação
rails s -p 3000 -b 0.0.0.0

ALTERAR A GEM DE TESTES
Adicionar em group :development, :test no Gemfile
gem ‘rspec-rails’
Executar no console
bundle install
Remover a pasta test
rm –rf test

ADICIONANDO USUÁRIOS
Adicionar no Gemfile
gem 'devise’
Executar no console
bundle install
rails generate devise:install
Seguir os passos 1 e 2 apresentados no console

ADICIONANDO USUÁRIOS
Criar model User
rails generate devise user
Executar alterações no banco de dados
bundle exec rake db:migrate

PASSO 3
Primeiro controller e primeira view

PRIMEIRO CONTROLLER
Criar controller home com action index
rails g controller home index
Executar a aplicação e acessar a rota ROOT
localhost:3000

PRIMEIRA VIEW
Abrir o arquivo app/views/home/index.html.erb
Substituir o conteúdo
<h1>Bem-vindo ao Gerenciador de Tarefas</h1>
localhost:3000

LINKS
Adicionar em app/views/home/index.html.erb
<%= link_to “Signin”, new_user_session_path %>
<%= link_to “Signup”, new_user_registration_path %>
Adicionar em app/views/devise/_links.html.erb
<%= link_to “Home”, root_path %>

LINKS
Adicionar em app/helpers/application_helper.rb
def signout_link
return if current_user.blank?
content_tag :li do
link_to(“Logout”, destroy_user_session_path, method: :delete)
end
end
Adicionar dentro da tag body em app/views/layouts/application.html.erb
<%= signout_link %>

CONHECENDO O I18N
gem 'rails-i18n’
Executar no console
bundle install

CONHECENDO O I18N
Alterar arquivo config/application.rb
config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '*'
,'*.{rb,yml}').to_s]
config.i18n.default_locale = :'pt-BR’
Substituir conteúdo do arquivo app/views/home/index.html.erb
<h1><%= I18n.t('home.welcome') %></h1>

CONHECENDO O I18N
Adicionar arquivos config/locales/home/pt-BR.yml com o conteúdo
pt-BR:
home:
welcome: 'Bem-vindo ao Gerenciador de Tarefas’
localhost:3000

CRIANDO TAREFAS
Criar model task
rails g scaffold task name:string description:string done:boolean
user:references
Atualizar banco de dados
bundle exec rake db:migrate
Adicionar relacionamento em app/model/user.rb
has_many :tasks

TESTES UNITÁRIOS
Instalar o Rspec na aplicação
rails generate rspec:install
Executando testes
bundle exec rspec

TESTES UNITÁRIOS
Criar arquivo spec/task_spec.rb com o conteúdo
require 'rails_helper'
describe Task, type: :model do
before do
User.create(email: 'user@gmail.com', password: '123456789')
end
context 'when all parameters are given' do
let(:params) { { user: User.last, name: 'My Task', description:
'Teach Tests' } }
it 'persists the task' do
task = Task.create(params)
expect(task).to be_persisted
end
end
context 'when some parameter is missing' do
let(:params) { { user: User.last } }
it 'does not persist the task' do
task = Task.create(params)
expect(task).not_to be_persisted
end
end
end

VALIDAÇÕES
Adicionar em app/models/task.rb
validates :name, :description, presence: true
Alterar action index em app/controllers/tasks_controller.rb
@tasks = current_user.tasks
Alterar action new em app/controllers/tasks_controller.rb
@task = current_user.tasks.new

VALIDAÇÕES
Alterar action create em app/controllers/tasks_controller.rb
@task = current_user.tasks.new(task_params)
Alterar set_task em app/controllers/tasks_controller.rb
@task = Task.find_by!(id: params[:id], user_id: current_user.id)
Alterar task_params em app/controllers/tasks_controller.rb
params.require(:task).permit(:name, :description, :done)

PERMISSÕES DE ACESSO
Pedir autenticação de usuário em
app/controllers/application_controller.rb
before_action :authenticate_user!
Ignorar autenticação de usuário em
app/controllers/home_controller.rb
skip_before_action :authenticate_user!

DEPLOY
Criar conta no heroku
https://signup.heroku.com
Instalar Heroku-CLI
https://devcenter.heroku.com/articles/heroku-cli#download-and-install
Criar uma aplicação
https://dashboard.heroku.com/new-app

DEPLOY
Executar no console
cd path/to/app
Realizar autenticação no heroku
heroku login
Inserir suas credenciais de acesso

DEPLOY
Selecionar a forma que deseja realizar o deploy e seguir os passos
https://dashboard.heroku.com/apps/new-blog-teste/deploy/heroku-git
Para esse exemplo, vamos usar o git. Executar no console
git init
Adicionar referência do heroku como remote executando no console
heroku git:remote -a app-name

DEPLOY
Adicionar addon gratuito de banco de dados no heroku executando no console
heroku addons:create cleardb:ignite
Recuperar URL do banco de daods adicionado. Executar no console
heroku config | grep CLEARDB_DATABASE_URL
O retorno do comando anterior será algo nesse formato
CLEARDB_DATABASE_URL: mysql://user:pass@host.cleardb.net...

DEPLOY
Para que o heroku se conecte no banco, é necessário atribuir a variável de
ambiente DATABASE_URL
Executar no console
heroku config:set DATABASE_URL=‘mysql2://user:pass@host.cleardb.net...’
ATENÇÃO: Alterar mysql:// para mysql2://
Pelo console, executar migrations no banco de dados
heroku run rake db:migrate

DEPLOY
Executar o seguinte comando no console para visualizar a URL de
acesso da sua aplicação
heroku apps:open
Manually visit https://app-name.herokuapp.com in your browser.

MUDANDO O VISUAL
gem 'twitter-bootstrap-rails'
gem 'devise-bootstrap-views'
gem 'jquery-rails’
Executar no console
bundle install

MUDANDO O VISUAL
Adicionar em cima do primeiro require em
app/assets/javascripts/application.js
//= require twitter/bootstrap
Adicionar arquivos do bootstrap na aplicação
rails generate bootstrap:install static

CRIANDO TAREFAS
Personalizar views de tarefas com bootstrap
rails g bootstrap:themed Tasks
Remover app/assets/stylesheets/scaffolds.scss

MUDANDO O VISUAL
Criar arquivo config/locales/pt-BR.bootstrap.yml com o conteúdo
pt-BR:
breadcrumbs:
application:
root: "Início"
pages:
pages: "Páginas"
helpers:
actions: "Ações"
links:
back: "Voltar"
cancel: "Cancelar"
confirm: "Tem certeza?"
destroy: "Excluir"
new: "Novo"
edit: "Editar"
show: "Detalhes"
titles:
edit: "Editar %{model}"
save: "Salvar %{model}"
new: "Novo %{model}"
delete: "Excluir %{model}"

MUDANDO O VISUAL
Adicionar em cima do primeiro require em
app/assets/stylesheets/application.css
*= require devise_bootstrap_views
Gerar locales para views do devise
rails g devise:views:locale pt-BR

MUDANDO O VISUAL
Personalizando layout principal
rails g bootstrap:layout application
Personalizando layouts do devise
rails g devise:views:bootstrap_templates

MUDANDO O VISUAL
Comentar as tags favicon_link_tag nas linhas 14, 18, 22, 26 e 30 do
arquivo app/views/layout/application.html.erb
<%#= favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-
touch-icon-precomposed', :type => 'image/png', :sizes => '144x144’ %>
…
<%#= favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-
touch-icon-precomposed', :type => 'image/png', :sizes => '114x114’ %>
…
<%#= favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-
icon-precomposed', :type => 'image/png', :sizes => '72x72’ %>
…
<%#= favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-
precomposed', :type => 'image/png' %>
…
<%#= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %>

PASSO 12
Ficando mais bonito ainda

FICANDO MAIS BONITO AINDA
Substituir container do layout app/views/layouts/application.html.erb
<div class="container">
<div class="row">
<div class="col-lg-12">
<%= bootstrap_flash %>
<%= yield %>
</div>
</div>
</div>

Substituir o element ul do layout
app/views/layouts/application.html.erb
<ul class="nav navbar-nav">
<%= signout_link %>
</ul>
Substituir link do layout app/views/layouts/application.html.erb
<a class="navbar-brand" href="/">Todo List</a>

Substituir link em app/helpers/application_helper.rb
link_to(I18n.t('application.signout'), destroy_user_session_path, method:
:delete)

Adicionando links de login e cadastro em app/views/home/index.html.erb
<%= link_to I18n.t('application.signin'), new_user_session_path, class: 'btn btn-default' %>
<%= link_to I18n.t('application.signup'), new_user_registration_path, class: 'btn btn-primary’
%>
Adicionar I18n config/locales/application/pt-BR.yml
pt-BR:
application:
signout: 'Sair'
signin: 'Entrar'
signup: 'Cadastrar'

AJUSTANDO VIEWS
Remover campo user_id em app/views/tasks/_form.html.erb
<div class="form-group">
<%= f.label :user_id, :class => 'control-label col-lg-2' %>
<%= f.text_field :user_id, :class => 'form-control' %>
</div>
<%=f.error_span(:user_id) %>
</div>

AJUSTANDO VIEWS
Alterar campo done em app/views/tasks/_form.html.erb
<div class="form-group">
<%= f.label :done, :class => 'control-label col-lg-2' %>
<div class="checkbox">
<label><%= f.check_box :done %></label>
</div>
</div>
<%=f.error_span(:done) %>
</div>

AJUSTANDO VIEWS
Remover campo user_id em app/views/tasks/show.html.erb
<dt><strong><%= model_class.human_attribute_name(:user_id)
%>:</strong></dt>
<dd><%= @task.user_id %></dd>
Remover campo user_id em app/views/tasks/index.html.erb
<th><%= model_class.human_attribute_name(:user_id) %></th>
...
<td><%= task.user_id %></td>

FALTA POUCO
Alterar botão em app/views/tasks/_form.html.erb
<%= f.submit t('.' + action_name), :class => 'btn btn-primary’ %>
Alterar mensagem de erro em app/views/tasks/_form.html.erb
<h3 class="panel-title"><%= t('application.prohibited_from_being_saved', count:
@task.errors.count) %>:</h3>
Mover error_span para dentro da div col em app/views/tasks/_form.html.erb
<%= f.error_span(:done) %>

FALTA POUCO
Criar o arquivo
config/locales/task/pt-BR.yml com o
conteúdo
pt-BR:
tasks:
index:
title: 'Minhas tarefas'
new: 'Nova tarefa'
new:
title: 'Nova tarefa'
submit: 'Criar tarefa'
create:
title: 'Nova tarefa'
submit: 'Criar tarefa'
edit:
title: 'Editar tarefa'
submit: 'Atualizar tarefa'
update:
title: 'Editar tarefa'
form:
new: 'Criar tarefa'
create: 'Criar tarefa'
edit: 'Atualizar tarefa'
update: 'Atualizar tarefa'
activerecord:
attributes:
task:
id: 'ID'
name: 'Nome'
description: 'Descrição'
done: 'Finalizada'
created_at: 'Criada em'

FALTA POUCO
Adicionar em config/locales/application/pt-BR.yml
prohibited_from_being_saved:
one: '%{count} erro não permitiu que esse item fosse salvo'
other: '%{count} errors não permitiram que esse item fosse salvo’
Executar a aplicação e navegar a vontade

PASSO 15
Atualizando versão de produção

ATUALIZANDO VERSÃO DE PRODUÇÃO
Commitar Código
git add .
git commit –m “Changes on interface.”
Executar no console
git heroku push master

TERMINOU
Aplicação finalizada

OBRIGADO
/felipegruoso
/in/felipegruoso
felipe.gruoso@gmail.com
https://felipegruoso.herokuapp.com

Aula Ruby

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Aula Ruby (20)

Último (6)

Aula Ruby