SlideShare a Scribd company logo
1 of 41
Download to read offline
Desenvolvimento
Web com Ruby on
Rails
João Lucas Pereira de Santana
gtalk | linkedin | twitter: jlucasps
Layouts e Partials
@jlucasps
<!DOCTYPE html>
<html>
<head>
<title>FirstApp</title>
<%= stylesheet_link_tag "application", :media => "all"
%>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
Layouts e Partials
Alterar application.js
@jlucasps
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require jquery
//= require jquery_ujs
//= require bootstrap.js
Layouts e Partials
Alterar application.css
@jlucasps
*= require_self
*= require_tree .
*= require bootstrap.css
*= require bootstrap-responsive.css
*= require custom.css
Layouts e Partials
$ git add .
$ git commit -m "Especificando arquivos no
application.js e application.css"
@jlucasps
Layouts e Partials
Criar novo arquivo de layout
/app/views/layouts/application_black.html.erb
Adicionar atributo style à tag body
<body style='background-color:black;'>
Criar nova action 'black' no controller
Welcome
@jlucasps
def black
render :layout => 'application_black'
end
Layouts e Partials
Criar rota para action 'black'
match 'black' => 'welcome#black', :via => :get,
:as => :black
Criar template para a nova action:
/app/views/welcome/index.html.erb
Acessar URL http://localhost:3000/black
@jlucasps
Layouts e Partials
$ git add .
$ git commit -m "Utilizando mais de 1 layout"
Tente definir um layout para várias actions
Dica: layout 'application_black', :only => :black
@jlucasps
Layouts e Partials
Utilizando o content_for
Atualizem o layout application.html.erb
@jlucasps
<!DOCTYPE html>
<html>
<head>
<title>FirstApp</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<div class='row-fluid'>
<div class='span3'>
<%= yield :sidebar %>
</div>
<div class='span9'>
<%= yield %>
</div>
</div>
</body>
</html>
Layouts e Partials
Atualizem o template welcome/index.html.erb
@jlucasps
<h1>Conteúdo central</h1>
<%= content_for :sidebar do %>
<h4>sidebar</h4>
<% end %>
Layouts e Partials
@jlucasps
$ git add .
$ git commit -m "Configurando a sidebar"
Layouts e Partials
@jlucasps
Configurar layout para que fique como no exemplo
abaixo utilizando partials e content_for
Layouts e Partials
@jlucasps
Criar arquivo /app/assets/stylesheets/custom.css
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
@media (max-width: 980px) {
/* Enable use of floated navbar text */
.navbar-text.pull-right {
float: none;
padding-left: 5px;
padding-right: 5px;
}
}
Layouts e Partials
@jlucasps
Alterar layout /app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>FirstApp</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render :partial => 'shared/menu_top' %>
<div class="container-fluid">
<div class="row-fluid">
<%= yield :sidebar %>
<%= yield %>
</div>
<%= render :partial => 'shared/footer' %>
</div>
</body>
</html>
Layouts e Partials
@jlucasps
Criar partial views/shared/_footer.html.erb
<hr>
<footer>
<p>&copy; Company 2013</p>
</footer>
Layouts e Partials
@jlucasps
Criar partial views/shared/_menu_top.html.erb
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".
nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<p class="navbar-text pull-right">
Logged in as <a href="#" class="navbar-link">Username</a>
</p>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Layouts e Partials
@jlucasps
Criar partial views/shared/_sidebar.html.erb
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
Layouts e Partials
@jlucasps
Alterar template /app/views/welcome/index.html.erb
<div class="span9">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called
the hero unit and three supporting pieces of content. Use it as a starting point to create something more
unique.</p>
<p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>
<div class="row-fluid">
<div class="span6">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div><!--/span-->
<div class="span6">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
<%= content_for :sidebar do %>
<%= render :partial => 'shared/sidebar' %>
<% end %>
Layouts e Partials
@jlucasps
$ git add .
$ git commit -m "Configurando layout com partial e content_for"
Primeiros Testes
Antes.....
Configurar arquivo Gemfile com links e
documentações
Adicionar ao Gemfile
group :test do
gem 'capybara'
gem rspec-rails'
end
Executar $ bundle install
Remover diretório /test
Executar $ rails g rspec:install
@jlucasps
Primeiros Testes
@jlucasps
$ rails generate rspec:install
create .rspec
create spec
create spec/spec_helper.rb
Modificar o arquivo spec/spec_helper.rb
Primeiros Testes
@jlucasps
Adicionar as linhas em negrito ao arquivo
require File.expand_path("../..
/config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rails'
require 'capybara/rspec'
# Requires supporting ruby files with custom
matchers and macros, etc,
# in spec/support/ and its subdirectories.
Dir[Rails.root.join("spec/support/**/*.rb")].each
{ |f| require f }
Primeiros Testes
@jlucasps
Adicionar as linhas em negrito ao bloco config do arquivoRSpec.configure do |config|
# ## Mock Framework
# If you prefer to use mocha, flexmock or RR,
uncomment the appropriate line:
# config.mock_with :mocha
# config.mock_with :flexmock
# config.mock_with :rr
config.include Capybara::DSL
config.include Rails.application.routes.
url_helpers
# Remove this line if you're not using
ActiveRecord or ActiveRecord fixtures
config.fixture_path = "#{::Rails.root}
/spec/fixtures"
# .......
Primeiros Testes
@jlucasps
$ git add .
$ git commit -m "Setup RSpec"
Criar o primeiro Teste
/spec/features/welcome/index.html.erb_spec.rb
Primeiros Testes
@jlucasps
require 'spec_helper'
describe ".index", :type => :feature do
it "access index page" do
visit index_path
page.should have_content("Hello, world!")
end
end
/spec/features/welcome/index.html.erb_spec.rb
Primeiros Testes
@jlucasps
jlucasps@lotus:/media/first_app$ rspec
.
Finished in 0.18264 seconds
1 example, 0 failures
Randomized with seed 64721
jlucasps@lotus:/media/first_app$
$ git add .
$ git commit -m "Primeiro teste com sucesso"
Primeiros Testes
@jlucasps
require 'spec_helper'
describe ".about", :type => :feature do
it "access about page" do
visit about_path
page.should have_content("About us")
end
end
/spec/features/welcome/about.html.erb_spec.rb
Primeiros Testes
@jlucasps
jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
rspec
F.
Failures:
1) .about access about page
Failure/Error: visit about_path
NameError:
undefined local variable or method `about_path' for
#<RSpec::Core::ExampleGroup::Nested_1:
0x00000003991378>
# ./spec/features/welcome/about.html.erb_spec.rb:6:in
`block (2 levels) in <top (required)>'
Finished in 0.18221 seconds
2 examples, 1 failure
Failed examples:
rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # .
about access about page
Randomized with seed 10191
jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
Primeiros Testes
Criar uma nova rota para action about
@jlucasps
FirstApp::Application.routes.draw do
root :to => 'welcome#index', :as => :index
match 'about' => 'welcome#about', :as => :
about
match 'black' => 'welcome#black', :via => :get,
:as => :black
end
Primeiros Testes
@jlucasps
jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec
F.
Failures:
1) .about access about page
Failure/Error: visit about_path
AbstractController::ActionNotFound:
The action 'about' could not be found for WelcomeController
# ./spec/features/welcome/about.html.erb_spec.rb:6:in `block
(2 levels) in <top (required)>'
Finished in 0.19052 seconds
2 examples, 1 failure
Failed examples:
rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # .about
access about page
Randomized with seed 45018
jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
@jlucasps
Primeiros Testes
class WelcomeController < ApplicationController
def index
end
def black
render :layout => 'application_black'
end
def about
end
end
Primeiros Testes
@jlucasps
jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec
.F
Failures:
1) .about access about page
Failure/Error: visit about_path
ActionView::MissingTemplate:
Missing template welcome/about, application/about with {:locale=>
[:en], :formats=>[:html], :handlers=>[:erb, :builder, :coffee]}.
Searched in:
* "/media/truecrypt1/handsonrails/first_app/app/views"
# ./spec/features/welcome/about.html.erb_spec.rb:6:in `block (2
levels) in <top (required)>'
Finished in 0.21562 seconds
2 examples, 1 failure
Failed examples:
rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # .about
access about page
Randomized with seed 15753
jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
Primeiros Testes
Criar arquivo /app/views/welcome/about.html.erb e
executar $ rspec
@jlucasps
jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec
F.
Failures:
1) .about access about page
Failure/Error: page.should have_content("About us")
expected to find text "About us" in "Project name Logged in as
Username Home About Contact © Company 2013"
# ./spec/features/welcome/about.html.erb_spec.rb:7:in `block (2
levels) in <top (required)>'
Finished in 0.21174 seconds
2 examples, 1 failure
Failed examples:
rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # .about access
about page
Randomized with seed 30415
jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
Primeiros Testes
Criar conteúdo para /app/views/welcome/about.html.erb
@jlucasps
Primeiros Testes
Executar $ rspec
@jlucasps
jlucasps@lotus:
/media/truecrypt1/handsonrails/first_app$ rspec
..
Finished in 0.19564 seconds
2 examples, 0 failures
Randomized with seed 30993
jlucasps@lotus:
/media/truecrypt1/handsonrails/first_app$
Primeiros Testes
Executar mesmos procedimento para página
/app/views/welcome/contact.html.erb
@jlucasps
jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
rspec
...
Finished in 0.20856 seconds
3 examples, 0 failures
Randomized with seed 28272
jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
$ git add .
$ git commit -m "Páginas index, about e contact"
Primeiros Testes
Adicionar mais um bloco it .... do
@jlucasps
require 'spec_helper'
describe ".index", :type => :feature do
it "access index page" do
visit index_path
page.should have_content("Hello, world!")
end
it "access public pages" do
visit index_path
page.should have_content("Hello, world!")
click_link "About"
page.should have_content("About us")
click_link "Contact"
page.should have_content("How to find us")
click_link "Home"
page.should have_content("Hello, world!")
end
end
Primeiros Testes
@jlucasps
jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec
.F..
Failures:
1) .index access public pages
Failure/Error: page.should have_content("About us")
expected to find text "About us" in "Project name Logged in as Username Home
About Contact Sidebar Link Link Link Link Hello, world! This is a template for a
simple marketing or informational website. It includes a large callout called the hero
unit and three supporting pieces of content. Use it as a starting point to create
something more unique. Learn more » Heading Donec id elit non mi porta gravida
at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem
malesuada magna mollis euismod. Donec sed odio dui. View details » Heading
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. View
details » © Company 2013"
# ./spec/features/welcome/index.html.erb_spec.rb:15:in `block (2 levels) in
<top (required)>'
Finished in 0.30914 seconds
4 examples, 1 failure
Failed examples:
rspec ./spec/features/welcome/index.html.erb_spec.rb:10 # .index access public
pages
Randomized with seed 34047
Primeiros Testes
Alterar o partial /app/views/shared/_menu_top.html.erb
@jlucasps
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-
collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to "Project name", index_path, :class => "brand" %>
<div class="nav-collapse collapse">
<p class="navbar-text pull-right">
Logged in as <a href="#" class="navbar-link">Username</a>
</p>
<ul class="nav">
<li class="active"><%= link_to "Home", index_path %></li>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Contact", contact_path %></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Primeiros Testes
@jlucasps
jlucasps@lotus:
/media/truecrypt1/handsonrails/first_app$ rspec
....
Finished in 0.3571 seconds
4 examples, 0 failures
Randomized with seed 51426
jlucasps@lotus:
/media/truecrypt1/handsonrails/first_app$
$ git add .
$ git commit -m "Navegação em páginas públicas"
$ git push
Desenvolvimento
Web com Ruby on
Rails
João Lucas Pereira de Santana
gtalk | linkedin | twitter: jlucasps
Obrigado

More Related Content

What's hot

Pretty Bookmarkable JSF: PrettyFaces
Pretty Bookmarkable JSF: PrettyFacesPretty Bookmarkable JSF: PrettyFaces
Pretty Bookmarkable JSF: PrettyFacesLincoln III
 
Different way to share data between controllers in angular js
Different way to share data between controllers in angular jsDifferent way to share data between controllers in angular js
Different way to share data between controllers in angular jscodeandyou forums
 
Angular JS blog tutorial
Angular JS blog tutorialAngular JS blog tutorial
Angular JS blog tutorialClaude Tech
 
Dethroning Grunt: Simple and Effective Builds with gulp.js
Dethroning Grunt: Simple and Effective Builds with gulp.jsDethroning Grunt: Simple and Effective Builds with gulp.js
Dethroning Grunt: Simple and Effective Builds with gulp.jsJay Harris
 
Resource and view
Resource and viewResource and view
Resource and viewPapp Laszlo
 
ChocolateChip-UI
ChocolateChip-UIChocolateChip-UI
ChocolateChip-UIGeorgeIshak
 
243329387 angular-docs
243329387 angular-docs243329387 angular-docs
243329387 angular-docsAbhi166803
 
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.jsCourse CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.jsVinícius de Moraes
 
Bookmarkable JSF: PrettyFaces
Bookmarkable JSF: PrettyFacesBookmarkable JSF: PrettyFaces
Bookmarkable JSF: PrettyFacesLincoln III
 
PrettyFaces URLRewrite for Servlet & JavaEE @ Devoxx 2010
PrettyFaces URLRewrite for Servlet & JavaEE @ Devoxx 2010PrettyFaces URLRewrite for Servlet & JavaEE @ Devoxx 2010
PrettyFaces URLRewrite for Servlet & JavaEE @ Devoxx 2010Lincoln III
 
PrimeTime JSF with PrimeFaces - Dec 2014
PrimeTime JSF with PrimeFaces - Dec 2014PrimeTime JSF with PrimeFaces - Dec 2014
PrimeTime JSF with PrimeFaces - Dec 2014cagataycivici
 
Templates81 special document
Templates81 special documentTemplates81 special document
Templates81 special documentLan Nguyen
 
Templates81 special document
Templates81 special documentTemplates81 special document
Templates81 special documentLan Nguyen
 
Ruby on Rails : RESTful 和 Ajax
Ruby on Rails : RESTful 和 AjaxRuby on Rails : RESTful 和 Ajax
Ruby on Rails : RESTful 和 AjaxWen-Tien Chang
 
Private slideshow
Private slideshowPrivate slideshow
Private slideshowsblackman
 
ASP.NET MVC introduction
ASP.NET MVC introductionASP.NET MVC introduction
ASP.NET MVC introductionTomi Juhola
 

What's hot (20)

Pretty Bookmarkable JSF: PrettyFaces
Pretty Bookmarkable JSF: PrettyFacesPretty Bookmarkable JSF: PrettyFaces
Pretty Bookmarkable JSF: PrettyFaces
 
Different way to share data between controllers in angular js
Different way to share data between controllers in angular jsDifferent way to share data between controllers in angular js
Different way to share data between controllers in angular js
 
Angular JS blog tutorial
Angular JS blog tutorialAngular JS blog tutorial
Angular JS blog tutorial
 
Dethroning Grunt: Simple and Effective Builds with gulp.js
Dethroning Grunt: Simple and Effective Builds with gulp.jsDethroning Grunt: Simple and Effective Builds with gulp.js
Dethroning Grunt: Simple and Effective Builds with gulp.js
 
Resource and view
Resource and viewResource and view
Resource and view
 
Yerbabuena eRCP OSGi-based
Yerbabuena eRCP OSGi-basedYerbabuena eRCP OSGi-based
Yerbabuena eRCP OSGi-based
 
Test upload
Test uploadTest upload
Test upload
 
ChocolateChip-UI
ChocolateChip-UIChocolateChip-UI
ChocolateChip-UI
 
243329387 angular-docs
243329387 angular-docs243329387 angular-docs
243329387 angular-docs
 
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.jsCourse CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
 
Bookmarkable JSF: PrettyFaces
Bookmarkable JSF: PrettyFacesBookmarkable JSF: PrettyFaces
Bookmarkable JSF: PrettyFaces
 
PrettyFaces URLRewrite for Servlet & JavaEE @ Devoxx 2010
PrettyFaces URLRewrite for Servlet & JavaEE @ Devoxx 2010PrettyFaces URLRewrite for Servlet & JavaEE @ Devoxx 2010
PrettyFaces URLRewrite for Servlet & JavaEE @ Devoxx 2010
 
PrimeTime JSF with PrimeFaces - Dec 2014
PrimeTime JSF with PrimeFaces - Dec 2014PrimeTime JSF with PrimeFaces - Dec 2014
PrimeTime JSF with PrimeFaces - Dec 2014
 
Templates81 special document
Templates81 special documentTemplates81 special document
Templates81 special document
 
Templates81 special document
Templates81 special documentTemplates81 special document
Templates81 special document
 
Ruby on Rails : RESTful 和 Ajax
Ruby on Rails : RESTful 和 AjaxRuby on Rails : RESTful 和 Ajax
Ruby on Rails : RESTful 和 Ajax
 
Private slideshow
Private slideshowPrivate slideshow
Private slideshow
 
All in one_seo_pack
All in one_seo_packAll in one_seo_pack
All in one_seo_pack
 
ASP.NET MVC introduction
ASP.NET MVC introductionASP.NET MVC introduction
ASP.NET MVC introduction
 
I Love codeigniter, You?
I Love codeigniter, You?I Love codeigniter, You?
I Love codeigniter, You?
 

Viewers also liked

Consultation on 16 19 vocational reform fa qs (5)
Consultation on 16 19 vocational reform fa qs (5)Consultation on 16 19 vocational reform fa qs (5)
Consultation on 16 19 vocational reform fa qs (5)amyclaire
 
Desenvolvimento web com Ruby on Rails (parte 4)
Desenvolvimento web com Ruby on Rails (parte 4)Desenvolvimento web com Ruby on Rails (parte 4)
Desenvolvimento web com Ruby on Rails (parte 4)Joao Lucas Santana
 
Desenvolvimento web com Ruby on Rails (parte 3)
Desenvolvimento web com Ruby on Rails (parte 3)Desenvolvimento web com Ruby on Rails (parte 3)
Desenvolvimento web com Ruby on Rails (parte 3)Joao Lucas Santana
 
Desenvolvimento web com Ruby on Rails (parte 6)
Desenvolvimento web com Ruby on Rails (parte 6)Desenvolvimento web com Ruby on Rails (parte 6)
Desenvolvimento web com Ruby on Rails (parte 6)Joao Lucas Santana
 
Curso de Ruby on Rails - Aula 04
Curso de Ruby on Rails - Aula 04Curso de Ruby on Rails - Aula 04
Curso de Ruby on Rails - Aula 04Maurício Linhares
 
Desenvolvimento web com Ruby on Rails (extras)
Desenvolvimento web com Ruby on Rails (extras)Desenvolvimento web com Ruby on Rails (extras)
Desenvolvimento web com Ruby on Rails (extras)Joao Lucas Santana
 
Servidores de E-mail: Qmail, Sendmail e Postfix
Servidores de E-mail: Qmail, Sendmail e PostfixServidores de E-mail: Qmail, Sendmail e Postfix
Servidores de E-mail: Qmail, Sendmail e PostfixAlvaro Oliveira
 

Viewers also liked (7)

Consultation on 16 19 vocational reform fa qs (5)
Consultation on 16 19 vocational reform fa qs (5)Consultation on 16 19 vocational reform fa qs (5)
Consultation on 16 19 vocational reform fa qs (5)
 
Desenvolvimento web com Ruby on Rails (parte 4)
Desenvolvimento web com Ruby on Rails (parte 4)Desenvolvimento web com Ruby on Rails (parte 4)
Desenvolvimento web com Ruby on Rails (parte 4)
 
Desenvolvimento web com Ruby on Rails (parte 3)
Desenvolvimento web com Ruby on Rails (parte 3)Desenvolvimento web com Ruby on Rails (parte 3)
Desenvolvimento web com Ruby on Rails (parte 3)
 
Desenvolvimento web com Ruby on Rails (parte 6)
Desenvolvimento web com Ruby on Rails (parte 6)Desenvolvimento web com Ruby on Rails (parte 6)
Desenvolvimento web com Ruby on Rails (parte 6)
 
Curso de Ruby on Rails - Aula 04
Curso de Ruby on Rails - Aula 04Curso de Ruby on Rails - Aula 04
Curso de Ruby on Rails - Aula 04
 
Desenvolvimento web com Ruby on Rails (extras)
Desenvolvimento web com Ruby on Rails (extras)Desenvolvimento web com Ruby on Rails (extras)
Desenvolvimento web com Ruby on Rails (extras)
 
Servidores de E-mail: Qmail, Sendmail e Postfix
Servidores de E-mail: Qmail, Sendmail e PostfixServidores de E-mail: Qmail, Sendmail e Postfix
Servidores de E-mail: Qmail, Sendmail e Postfix
 

Similar to Desenvolvimento web com Ruby on Rails (parte 2)

Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.jsTechExeter
 
Rails 3 overview
Rails 3 overviewRails 3 overview
Rails 3 overviewYehuda Katz
 
Survey of Front End Topics in Rails
Survey of Front End Topics in RailsSurvey of Front End Topics in Rails
Survey of Front End Topics in RailsBenjamin Vandgrift
 
20190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React201920190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React2019Makoto Mori
 
Rails 3: Dashing to the Finish
Rails 3: Dashing to the FinishRails 3: Dashing to the Finish
Rails 3: Dashing to the FinishYehuda Katz
 
Rails Antipatterns | Open Session with Chad Pytel
Rails Antipatterns | Open Session with Chad Pytel Rails Antipatterns | Open Session with Chad Pytel
Rails Antipatterns | Open Session with Chad Pytel Engine Yard
 
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFabio Akita
 
Ride on the Fast Track of Web with Ruby on Rails- Part 2
Ride on the Fast Track of Web with Ruby on Rails- Part 2Ride on the Fast Track of Web with Ruby on Rails- Part 2
Ride on the Fast Track of Web with Ruby on Rails- Part 2A.K.M. Ahsrafuzzaman
 
HTTP REQUEST RESPONSE OBJECT - WEB APPLICATION USING C# LAB
HTTP REQUEST RESPONSE OBJECT - WEB APPLICATION USING C# LABHTTP REQUEST RESPONSE OBJECT - WEB APPLICATION USING C# LAB
HTTP REQUEST RESPONSE OBJECT - WEB APPLICATION USING C# LABpriya Nithya
 
Angular.js Fundamentals
Angular.js FundamentalsAngular.js Fundamentals
Angular.js FundamentalsMark
 
Ss 36932418[1]
Ss 36932418[1]Ss 36932418[1]
Ss 36932418[1]Ya Jinda
 
Rich Portlet Development in uPortal
Rich Portlet Development in uPortalRich Portlet Development in uPortal
Rich Portlet Development in uPortalJennifer Bourey
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012crokitta
 
Your Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckYour Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckAnthony Montalbano
 

Similar to Desenvolvimento web com Ruby on Rails (parte 2) (20)

Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.js
 
Rails 3 overview
Rails 3 overviewRails 3 overview
Rails 3 overview
 
Survey of Front End Topics in Rails
Survey of Front End Topics in RailsSurvey of Front End Topics in Rails
Survey of Front End Topics in Rails
 
20190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React201920190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React2019
 
Rails 3: Dashing to the Finish
Rails 3: Dashing to the FinishRails 3: Dashing to the Finish
Rails 3: Dashing to the Finish
 
Rails Antipatterns | Open Session with Chad Pytel
Rails Antipatterns | Open Session with Chad Pytel Rails Antipatterns | Open Session with Chad Pytel
Rails Antipatterns | Open Session with Chad Pytel
 
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
 
Upload[1]
Upload[1]Upload[1]
Upload[1]
 
Ride on the Fast Track of Web with Ruby on Rails- Part 2
Ride on the Fast Track of Web with Ruby on Rails- Part 2Ride on the Fast Track of Web with Ruby on Rails- Part 2
Ride on the Fast Track of Web with Ruby on Rails- Part 2
 
HTTP REQUEST RESPONSE OBJECT - WEB APPLICATION USING C# LAB
HTTP REQUEST RESPONSE OBJECT - WEB APPLICATION USING C# LABHTTP REQUEST RESPONSE OBJECT - WEB APPLICATION USING C# LAB
HTTP REQUEST RESPONSE OBJECT - WEB APPLICATION USING C# LAB
 
The Rails Way
The Rails WayThe Rails Way
The Rails Way
 
Web-Performance
Web-PerformanceWeb-Performance
Web-Performance
 
JS-05-Handlebars.ppt
JS-05-Handlebars.pptJS-05-Handlebars.ppt
JS-05-Handlebars.ppt
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
 
Angular.js Fundamentals
Angular.js FundamentalsAngular.js Fundamentals
Angular.js Fundamentals
 
Ss 36932418[1]
Ss 36932418[1]Ss 36932418[1]
Ss 36932418[1]
 
Rich Portlet Development in uPortal
Rich Portlet Development in uPortalRich Portlet Development in uPortal
Rich Portlet Development in uPortal
 
Mobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLsMobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLs
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
 
Your Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckYour Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages Suck
 

Recently uploaded

Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 

Recently uploaded (20)

Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 

Desenvolvimento web com Ruby on Rails (parte 2)

  • 1. Desenvolvimento Web com Ruby on Rails João Lucas Pereira de Santana gtalk | linkedin | twitter: jlucasps
  • 2. Layouts e Partials @jlucasps <!DOCTYPE html> <html> <head> <title>FirstApp</title> <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <%= yield %> </body> </html>
  • 3. Layouts e Partials Alterar application.js @jlucasps //= require jquery //= require jquery_ujs //= require_tree . //= require jquery //= require jquery_ujs //= require bootstrap.js
  • 4. Layouts e Partials Alterar application.css @jlucasps *= require_self *= require_tree . *= require bootstrap.css *= require bootstrap-responsive.css *= require custom.css
  • 5. Layouts e Partials $ git add . $ git commit -m "Especificando arquivos no application.js e application.css" @jlucasps
  • 6. Layouts e Partials Criar novo arquivo de layout /app/views/layouts/application_black.html.erb Adicionar atributo style à tag body <body style='background-color:black;'> Criar nova action 'black' no controller Welcome @jlucasps def black render :layout => 'application_black' end
  • 7. Layouts e Partials Criar rota para action 'black' match 'black' => 'welcome#black', :via => :get, :as => :black Criar template para a nova action: /app/views/welcome/index.html.erb Acessar URL http://localhost:3000/black @jlucasps
  • 8. Layouts e Partials $ git add . $ git commit -m "Utilizando mais de 1 layout" Tente definir um layout para várias actions Dica: layout 'application_black', :only => :black @jlucasps
  • 9. Layouts e Partials Utilizando o content_for Atualizem o layout application.html.erb @jlucasps <!DOCTYPE html> <html> <head> <title>FirstApp</title> <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <div class='row-fluid'> <div class='span3'> <%= yield :sidebar %> </div> <div class='span9'> <%= yield %> </div> </div> </body> </html>
  • 10. Layouts e Partials Atualizem o template welcome/index.html.erb @jlucasps <h1>Conteúdo central</h1> <%= content_for :sidebar do %> <h4>sidebar</h4> <% end %>
  • 11. Layouts e Partials @jlucasps $ git add . $ git commit -m "Configurando a sidebar"
  • 12. Layouts e Partials @jlucasps Configurar layout para que fique como no exemplo abaixo utilizando partials e content_for
  • 13. Layouts e Partials @jlucasps Criar arquivo /app/assets/stylesheets/custom.css body { padding-top: 60px; padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } @media (max-width: 980px) { /* Enable use of floated navbar text */ .navbar-text.pull-right { float: none; padding-left: 5px; padding-right: 5px; } }
  • 14. Layouts e Partials @jlucasps Alterar layout /app/views/layouts/application.html.erb <!DOCTYPE html> <html> <head> <title>FirstApp</title> <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <%= render :partial => 'shared/menu_top' %> <div class="container-fluid"> <div class="row-fluid"> <%= yield :sidebar %> <%= yield %> </div> <%= render :partial => 'shared/footer' %> </div> </body> </html>
  • 15. Layouts e Partials @jlucasps Criar partial views/shared/_footer.html.erb <hr> <footer> <p>&copy; Company 2013</p> </footer>
  • 16. Layouts e Partials @jlucasps Criar partial views/shared/_menu_top.html.erb <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=". nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="#">Project name</a> <div class="nav-collapse collapse"> <p class="navbar-text pull-right"> Logged in as <a href="#" class="navbar-link">Username</a> </p> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div>
  • 17. Layouts e Partials @jlucasps Criar partial views/shared/_sidebar.html.erb <div class="span3"> <div class="well sidebar-nav"> <ul class="nav nav-list"> <li class="nav-header">Sidebar</li> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div><!--/.well --> </div><!--/span-->
  • 18. Layouts e Partials @jlucasps Alterar template /app/views/welcome/index.html.erb <div class="span9"> <div class="hero-unit"> <h1>Hello, world!</h1> <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p> </div> <div class="row-fluid"> <div class="span6"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details &raquo;</a></p> </div><!--/span--> <div class="span6"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details &raquo;</a></p> </div><!--/span--> </div><!--/row--> </div><!--/span--> <%= content_for :sidebar do %> <%= render :partial => 'shared/sidebar' %> <% end %>
  • 19. Layouts e Partials @jlucasps $ git add . $ git commit -m "Configurando layout com partial e content_for"
  • 20. Primeiros Testes Antes..... Configurar arquivo Gemfile com links e documentações Adicionar ao Gemfile group :test do gem 'capybara' gem rspec-rails' end Executar $ bundle install Remover diretório /test Executar $ rails g rspec:install @jlucasps
  • 21. Primeiros Testes @jlucasps $ rails generate rspec:install create .rspec create spec create spec/spec_helper.rb Modificar o arquivo spec/spec_helper.rb
  • 22. Primeiros Testes @jlucasps Adicionar as linhas em negrito ao arquivo require File.expand_path("../.. /config/environment", __FILE__) require 'rspec/rails' require 'rspec/autorun' require 'capybara/rails' require 'capybara/rspec' # Requires supporting ruby files with custom matchers and macros, etc, # in spec/support/ and its subdirectories. Dir[Rails.root.join("spec/support/**/*.rb")].each { |f| require f }
  • 23. Primeiros Testes @jlucasps Adicionar as linhas em negrito ao bloco config do arquivoRSpec.configure do |config| # ## Mock Framework # If you prefer to use mocha, flexmock or RR, uncomment the appropriate line: # config.mock_with :mocha # config.mock_with :flexmock # config.mock_with :rr config.include Capybara::DSL config.include Rails.application.routes. url_helpers # Remove this line if you're not using ActiveRecord or ActiveRecord fixtures config.fixture_path = "#{::Rails.root} /spec/fixtures" # .......
  • 24. Primeiros Testes @jlucasps $ git add . $ git commit -m "Setup RSpec" Criar o primeiro Teste /spec/features/welcome/index.html.erb_spec.rb
  • 25. Primeiros Testes @jlucasps require 'spec_helper' describe ".index", :type => :feature do it "access index page" do visit index_path page.should have_content("Hello, world!") end end /spec/features/welcome/index.html.erb_spec.rb
  • 26. Primeiros Testes @jlucasps jlucasps@lotus:/media/first_app$ rspec . Finished in 0.18264 seconds 1 example, 0 failures Randomized with seed 64721 jlucasps@lotus:/media/first_app$ $ git add . $ git commit -m "Primeiro teste com sucesso"
  • 27. Primeiros Testes @jlucasps require 'spec_helper' describe ".about", :type => :feature do it "access about page" do visit about_path page.should have_content("About us") end end /spec/features/welcome/about.html.erb_spec.rb
  • 28. Primeiros Testes @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec F. Failures: 1) .about access about page Failure/Error: visit about_path NameError: undefined local variable or method `about_path' for #<RSpec::Core::ExampleGroup::Nested_1: 0x00000003991378> # ./spec/features/welcome/about.html.erb_spec.rb:6:in `block (2 levels) in <top (required)>' Finished in 0.18221 seconds 2 examples, 1 failure Failed examples: rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # . about access about page Randomized with seed 10191 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
  • 29. Primeiros Testes Criar uma nova rota para action about @jlucasps FirstApp::Application.routes.draw do root :to => 'welcome#index', :as => :index match 'about' => 'welcome#about', :as => : about match 'black' => 'welcome#black', :via => :get, :as => :black end
  • 30. Primeiros Testes @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec F. Failures: 1) .about access about page Failure/Error: visit about_path AbstractController::ActionNotFound: The action 'about' could not be found for WelcomeController # ./spec/features/welcome/about.html.erb_spec.rb:6:in `block (2 levels) in <top (required)>' Finished in 0.19052 seconds 2 examples, 1 failure Failed examples: rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # .about access about page Randomized with seed 45018 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
  • 31. @jlucasps Primeiros Testes class WelcomeController < ApplicationController def index end def black render :layout => 'application_black' end def about end end
  • 32. Primeiros Testes @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec .F Failures: 1) .about access about page Failure/Error: visit about_path ActionView::MissingTemplate: Missing template welcome/about, application/about with {:locale=> [:en], :formats=>[:html], :handlers=>[:erb, :builder, :coffee]}. Searched in: * "/media/truecrypt1/handsonrails/first_app/app/views" # ./spec/features/welcome/about.html.erb_spec.rb:6:in `block (2 levels) in <top (required)>' Finished in 0.21562 seconds 2 examples, 1 failure Failed examples: rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # .about access about page Randomized with seed 15753 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
  • 33. Primeiros Testes Criar arquivo /app/views/welcome/about.html.erb e executar $ rspec @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec F. Failures: 1) .about access about page Failure/Error: page.should have_content("About us") expected to find text "About us" in "Project name Logged in as Username Home About Contact © Company 2013" # ./spec/features/welcome/about.html.erb_spec.rb:7:in `block (2 levels) in <top (required)>' Finished in 0.21174 seconds 2 examples, 1 failure Failed examples: rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # .about access about page Randomized with seed 30415 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
  • 34. Primeiros Testes Criar conteúdo para /app/views/welcome/about.html.erb @jlucasps
  • 35. Primeiros Testes Executar $ rspec @jlucasps jlucasps@lotus: /media/truecrypt1/handsonrails/first_app$ rspec .. Finished in 0.19564 seconds 2 examples, 0 failures Randomized with seed 30993 jlucasps@lotus: /media/truecrypt1/handsonrails/first_app$
  • 36. Primeiros Testes Executar mesmos procedimento para página /app/views/welcome/contact.html.erb @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec ... Finished in 0.20856 seconds 3 examples, 0 failures Randomized with seed 28272 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ $ git add . $ git commit -m "Páginas index, about e contact"
  • 37. Primeiros Testes Adicionar mais um bloco it .... do @jlucasps require 'spec_helper' describe ".index", :type => :feature do it "access index page" do visit index_path page.should have_content("Hello, world!") end it "access public pages" do visit index_path page.should have_content("Hello, world!") click_link "About" page.should have_content("About us") click_link "Contact" page.should have_content("How to find us") click_link "Home" page.should have_content("Hello, world!") end end
  • 38. Primeiros Testes @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec .F.. Failures: 1) .index access public pages Failure/Error: page.should have_content("About us") expected to find text "About us" in "Project name Logged in as Username Home About Contact Sidebar Link Link Link Link Hello, world! This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique. Learn more » Heading Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. View details » Heading Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. View details » © Company 2013" # ./spec/features/welcome/index.html.erb_spec.rb:15:in `block (2 levels) in <top (required)>' Finished in 0.30914 seconds 4 examples, 1 failure Failed examples: rspec ./spec/features/welcome/index.html.erb_spec.rb:10 # .index access public pages Randomized with seed 34047
  • 39. Primeiros Testes Alterar o partial /app/views/shared/_menu_top.html.erb @jlucasps <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav- collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <%= link_to "Project name", index_path, :class => "brand" %> <div class="nav-collapse collapse"> <p class="navbar-text pull-right"> Logged in as <a href="#" class="navbar-link">Username</a> </p> <ul class="nav"> <li class="active"><%= link_to "Home", index_path %></li> <li><%= link_to "About", about_path %></li> <li><%= link_to "Contact", contact_path %></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div>
  • 40. Primeiros Testes @jlucasps jlucasps@lotus: /media/truecrypt1/handsonrails/first_app$ rspec .... Finished in 0.3571 seconds 4 examples, 0 failures Randomized with seed 51426 jlucasps@lotus: /media/truecrypt1/handsonrails/first_app$ $ git add . $ git commit -m "Navegação em páginas públicas" $ git push
  • 41. Desenvolvimento Web com Ruby on Rails João Lucas Pereira de Santana gtalk | linkedin | twitter: jlucasps Obrigado