Talle de Introducción a Ruby on Rails impartido en Diacode Talks! http://talks.diacode.com http://diacode.com http://twitter.com/diacode

1. 2ª Parte
Javier Cuevas - Diacode.com

2. Menú del día
• Repaso a generadores y aclaraciones sobre
Scaffolding
• AJAX con Rails
• Autentificación de usuarios con Devise
• Resolución del ejercicio propuesto

3. Repaso a generadores y
aclaraciones sobre
Scaffolding

4. Para tener un CRUD de un
modelo necesitamos:
• Modelo
• Controlador
• Vistas
• Tabla en la base de datos (migración)
• Rutas configuradas (routes.rb)

5. Para tener un CRUD de un
modelo necesitamos:
• Modelo Todo esto nos
lo ofrece
• Controlador el scaffold
• Vistas
• Tabla en la base de datos (migración)
• Rutas configuradas (routes.rb)

6. El Scaffold además...
rails g scaffold Task invoke active_record
create db/migrate/20120224135839_create_tasks.rb
name:string create app/models/task.rb
description:text invoke test_unit
priority:integer create test/unit/task_test.rb
create test/fixtures/tasks.yml
due_to:date route resources :tasks
done:boolean invoke scaffold_controller
create app/controllers/tasks_controller.rb
category:references invoke erb
create app/views/tasks
create app/views/tasks/index.html.erb
create app/views/tasks/edit.html.erb
create app/views/tasks/show.html.erb
create app/views/tasks/new.html.erb
create app/views/tasks/_form.html.erb
invoke test_unit
create test/functional/tasks_controller_test.rb
invoke helper
create app/helpers/tasks_helper.rb
invoke test_unit
create test/unit/helpers/tasks_helper_test.rb
invoke assets
invoke coffee
create app/assets/javascripts/tasks.js.coffee
invoke scss
create app/assets/stylesheets/tasks.css.scss
invoke scss
create app/assets/stylesheets/scaffolds.css.scss

7. El Scaffold además...
rails g scaffold Task invoke active_record
create db/migrate/20120224135839_create_tasks.rb
name:string create app/models/task.rb
description:text invoke test_unit
priority:integer create test/unit/task_test.rb
create test/fixtures/tasks.yml
due_to:date route resources :tasks
done:boolean invoke scaffold_controller
create app/controllers/tasks_controller.rb
category:references invoke erb
create app/views/tasks
create app/views/tasks/index.html.erb
Genera create
create
create
app/views/tasks/edit.html.erb
app/views/tasks/show.html.erb
app/views/tasks/new.html.erb
CSS (SCSS), create
invoke
create
app/views/tasks/_form.html.erb
test_unit
test/functional/tasks_controller_test.rb
Javascript invoke
create
invoke
helper
app/helpers/tasks_helper.rb
test_unit
(Coffee), create
invoke
invoke
assets
test/unit/helpers/tasks_helper_test.rb
coffee
Helpers, y create
invoke
create
app/assets/javascripts/tasks.js.coffee
scss
app/assets/stylesheets/tasks.css.scss
Tests invoke
create
scss
app/assets/stylesheets/scaffolds.css.scss

8. El Scaffold NO hace...
• No incluye selects para relacionar modelos
en los formularios que crea.
• Si hiciste scaffold, y posteriormente incluyes
un campo nuevo a la tabla de tu modelo, las
vistas no se actualizan solas: tendrás que
actualizarlas tú.
• Si añades nuevas acciones a tu controlador,
tendrás que incluirlas en el routes.rb. El
scaffold solo define rutas para el CRUD.

9. Montando un CRUD
SIN Scaffold
• Modelo y Tabla (migración)
rails g model User name:string
rake db:migrate
• Modelo sin Tabla (migración)
rails g model User name:string --migrations false
• Controlador
rails g controller User
tip: rails g controller --help
• Tendremos que añadir las acciones CRUD (index, show,
edit, create, update, destroy) al controlador a mano
• Las vistas las creamos a mano desde nuestro editor
• Tendremos que editar el routes.rb y añadir rutas CRUD
(resources :users) o rutas propias

10. AJAX
con Rails

11. Algunas notas sobre
Rails y Javascript
• Rails es Javascript framework agnostic, es
decir, que puede integrarse tanto con jQuery
como con Prototype, etc.
• Para integrar Rails con cada framework se
usan “adaptadores”.
• Por defecto Rails añade al Gemfile el
adaptador jquery-rails. Es decir: sin hacer
nada, podemos empezar a usar jQuery.

12. Generar petición AJAX
con Rails
<%= link_to 'Destroy', task, confirm: 'Are you sure?',
method: :delete, :remote => true %>
<%= form_for(@task, :remote => true) do |f| %>

13. Generar petición AJAX
con Rails
<%= link_to 'Destroy', task, confirm: 'Are you sure?',
method: :delete, :remote => true %>
<%= form_for(@task, :remote => true) do |f| %>
Por defecto estas
peticiones esperan
recibir código
Javascript

14. ¿Qué debe devolver la
petición AJAX?
• Una petición AJAX puede devolver
diferentes tipos de datos:
• Código Javascript
• JSON
• JSONP (llamada a función JS + datos JSON)
• Texto
• HTML

15. ¿Qué debe devolver la
petición AJAX?
• Una petición AJAX puede devolver
diferentes tipos de datos:
• Código Javascript Normalmente
usaremos
• JSON estos dos
• JSONP (llamada a función JS + datos JSON)
• Texto
• HTML

16. Javascript VS JSON

17. Javascript VS JSON
• Devolver Javascript

18. Javascript VS JSON
• Devolver Javascript
• A cada petición AJAXbloque de
contestamos con un
código Javascript, resultante de
interpretar un archivo .js.erb

19. Javascript VS JSON
• Devolver Javascript
• A cada petición AJAXbloque de
contestamos con un
código Javascript, resultante de
interpretar un archivo .js.erb
• Los archivos .js.erb mezclan JS y
Ruby.

20. Javascript VS JSON
• Devolver Javascript
• A cada petición AJAXbloque de
contestamos con un
código Javascript, resultante de
interpretar un archivo .js.erb
• Los archivos .js.erb mezclan JS y
Ruby.
• Se almacenan en la carpeta
app/views

21. Javascript VS JSON
• Devolver Javascript
• A cada petición AJAXbloque de
contestamos con un
código Javascript, resultante de
interpretar un archivo .js.erb
• Los archivos .js.erb mezclan JS y
Ruby.
• Se almacenan en la carpeta
app/views
• Insertandorenderizar vistas,
podemos:
código ERB:
usar helpers, iterar con Ruby,
etc.

22. Javascript VS JSON
• Devolver Javascript
• A cada petición AJAXbloque de
contestamos con un
código Javascript, resultante de
interpretar un archivo .js.erb
• Los archivos .js.erb mezclan JS y
Ruby.
• Se almacenan en la carpeta
app/views
• Insertandorenderizar vistas,
podemos:
código ERB:
usar helpers, iterar con Ruby,
etc.
• Tardan un poco más en ser
ejecutados por el navegador.

23. Javascript VS JSON
• Devolver Javascript • Devolver JSON
• A cada petición AJAXbloque de
contestamos con un
código Javascript, resultante de
interpretar un archivo .js.erb
• Los archivos .js.erb mezclan JS y
Ruby.
• Se almacenan en la carpeta
app/views
• Insertandorenderizar vistas,
podemos:
código ERB:
usar helpers, iterar con Ruby,
etc.
• Tardan un poco más en ser
ejecutados por el navegador.

24. Javascript VS JSON
• Devolver Javascript • Devolver JSON
• A cada petición AJAXbloque de
contestamos con un
• En un archivo .js normal, con
jQuery escucharemos los
código Javascript, resultante de eventos Ajax (success, error,
interpretar un archivo .js.erb etc).
• Los archivos .js.erb mezclan JS y
Ruby.
• Se almacenan en la carpeta
app/views
• Insertandorenderizar vistas,
podemos:
código ERB:
usar helpers, iterar con Ruby,
etc.
• Tardan un poco más en ser
ejecutados por el navegador.

25. Javascript VS JSON
• Devolver Javascript • Devolver JSON
• A cada petición AJAXbloque de
contestamos con un
• En un archivo .js normal, con
jQuery escucharemos los
código Javascript, resultante de eventos Ajax (success, error,
interpretar un archivo .js.erb etc).
• Los archivos .js.erb mezclan JS y
Ruby. • El controlador Rails
codificará los datos en
• Se almacenan en la carpeta
app/views
JSON
render json: @task
• Insertandorenderizar vistas,
podemos:
código ERB:
usar helpers, iterar con Ruby,
etc.
• Tardan un poco más en ser
ejecutados por el navegador.

26. Javascript VS JSON
• Devolver Javascript • Devolver JSON
• A cada petición AJAXbloque de
contestamos con un
• En un archivo .js normal, con
jQuery escucharemos los
código Javascript, resultante de eventos Ajax (success, error,
interpretar un archivo .js.erb etc).
• Los archivos .js.erb mezclan JS y
Ruby. • El controlador Rails
codificará los datos en
• Se almacenan en la carpeta
app/views
JSON
render json: @task
• Insertandorenderizar vistas,
podemos:
código ERB: • La función de archivo .js
callback
definida en el
usar helpers, iterar con Ruby, normal recibirá los datos
etc. JSON y hará algo con ellos.
• Tardan un poco más en ser
ejecutados por el navegador.

27. Devolviendo Javascript
con Rails
En nuestro controlador:
def create
@task = Task.new(params[:task])
respond_to do |format|
if @task.save
format.html { redirect_to @task, notice: 'Task was successfully created.' }
format.js # Por defecto buscará create.js.erb
else
format.html { render action: "new" }
format.js # Por defecto buscará create.js.erb
end
end
end
Vista
$('ul[data-category_id='+<%= @task.category_id %>+']').append('<li><%= escape_javascript
render("header_task", :task => @task) %></li>');

28. Autentificación de Usuarios con
Devise
https://github.com/plataformatec/devise

29. Resolución del
ejercicio propuesto

30. Eso es todo :)
Gracias!