2. 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/
4. 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/
5. 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/
6. 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/
7. 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;
8. 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)
9. 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/
10. 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/
13. 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
15. 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
17. 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
18. ADICIONANDO USUÁRIOS
Criar model User
rails generate devise user
Executar alterações no banco de dados
bundle exec rake db:migrate
20. PRIMEIRO CONTROLLER
Criar controller home com action index
rails g controller home index
Executar a aplicação e acessar a rota ROOT
localhost:3000
21. PRIMEIRA VIEW
Abrir o arquivo app/views/home/index.html.erb
Substituir o conteúdo
<h1>Bem-vindo ao Gerenciador de Tarefas</h1>
Executar a aplicação e acessar a rota ROOT
localhost:3000
24. 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 %>
28. 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’
Executar a aplicação e acessar a rota ROOT
localhost:3000
32. TESTES UNITÁRIOS
Instalar o Rspec na aplicação
rails generate rspec:install
Executando testes
bundle exec rspec
33. 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
38. 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!
40. 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
41. DEPLOY
Executar no console
cd path/to/app
Realizar autenticação no heroku
heroku login
Inserir suas credenciais de acesso
42. 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
43. 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...
44. 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
45. 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.
47. MUDANDO O VISUAL
Adicionar no Gemfile
gem 'twitter-bootstrap-rails'
gem 'devise-bootstrap-views'
gem 'jquery-rails’
Executar no console
bundle install
48. 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
49. CRIANDO TAREFAS
Personalizar views de tarefas com bootstrap
rails g bootstrap:themed Tasks
Remover app/assets/stylesheets/scaffolds.scss
51. 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
52. MUDANDO O VISUAL
Personalizando layout principal
rails g bootstrap:layout application
Personalizando layouts do devise
rails g devise:views:bootstrap_templates
55. 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><!--/row-->
</div> <!-- /container -->
56. FICANDO MAIS BONITO AINDA
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>
57. FICANDO MAIS BONITO AINDA
Substituir link em app/helpers/application_helper.rb
link_to(I18n.t('application.signout'), destroy_user_session_path, method:
:delete)
58. FICANDO MAIS BONITO AINDA
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'
64. 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) %>
66. 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
