Work para explicar la creación de una App Rails: * Creando la aplicación Rails * Utilizando el Scaffold * Migrando la base de datos * Agregando validaciones * Agregando relaciones entre los modelos * Utilizando Nested Routes * Utilizando View Helpers * Agregando AJAX

1. Ruby On Rails Workshop - 21/10/2009
Table of Contents
De que se trata la aplicación.......................................................................................................................1
Creando la aplicación Rails........................................................................................................................1
Ejecutando la aplicación............................................................................................................................4
Utilizando el Scaffold................................................................................................................................6
Migrando la base de datos..........................................................................................................................8
Agregando validaciones...........................................................................................................................10
Agregando relaciones entre los modelos..................................................................................................12
Utilizando Nested Routes.........................................................................................................................14
Jugando con la consola............................................................................................................................14
Utilizando View Helpers..........................................................................................................................15
Agregando AJAX.....................................................................................................................................16
Utilizando RJS templates.........................................................................................................................20
Creando un custom helper........................................................................................................................21
De que se trata la aplicación
Para el workshop se eligió crear una aplicación de bloging. Se eligió este tipo de aplicación por ser algo
sencillo, de solo un par de modelos y pocas vistas. Además, ultimamente, en la mayoria de los nuevos
frameworks web se utiliza un ejemplo similar para crear la primera aplicación de ejemplo, algo asi
como el nuevo “Hello world”. La idea es hacer algo sencillo donde se puedan aplicar varios de los
conceptos básicos de rails como es scaffold, generators, helpers, custom helpers, templates, ajax,
validations, relationships, etc.
Basicamente el usuario final va a poder crear posts, editarlos y borrarlos asi como también se podrán
agregar comentarios a los posts.
Creando la aplicación Rails
File/new Project
Elegir
Categories : Ruby
Projects: Ruby on Rails application
Presionar “Next”.

2. Elegir las siguientes opciones:
Project Name: blog
Ruby Platform: Ruby 1.8.6
Presionar Next

3. Seleccionar:
Specify Database Information Directory
Database Adapter: sqlite3
Presionar Next

4. Seleccionar:
Rails Version: 2.3.4
Presionar Finish

5. Observar la ventana de output:
Ejecutando la aplicación
Abrir la vista “Projects”, darle botón derecho sobre la aplicación “blog” y elegir “run”

6. Observar la página de inicio de la aplicación:

7. Utilizando el Scaffold
Nuevamente abrir la vista “Projects”, presionar botón derecho y elegir la opción “Generate” .
Cargar las siguientes opciones:
Generator: scaffold
Model Name: post
Attribute Pairs:
title:string body:text
Presionar “OK”

8. Observar la ventana de output de “Rails Generator”
También observar la migration creada, haciendo click directamente en el link que nos muestra la
ventana del output de “Rails Generator” o bien abrir el archivo desde la vista “Projects”.

9. Migrando la base de datos
En el punto anterior se creó una migration pero aún no se modificó nada en la base de datos. Asi que
para esto se debe migrar a la última versión. Esto se hace haciendo botón derecho sobre la aplicación
en la vista “Projects” y elegir “Migrate Database” y luego “To current version”.

10. Observar el output de este comando.
En el navegador dirigirse a :

11. Agregando validaciones
Para validar que los Post que se crean sean “validos” se deberia de validar que el usuario especifique un
“title” y un “body” para el post.
Para eso se abre el modelo “post” dentro de la vista “Projects”.
y dentro de la clase escribir el texto:
validates
y presionar la convinación de teclas “CTRL+SPACE” para activar el autocomplete:

12. Se puede observar no solo las opciones de validaciones sinó también la ayuda y documentación de la
API de rails.
Seleccionar “validates_prescense_of” y especificar los campos “body” y “title”:
validates_presence_of :title, :body
Ahora probar de crear un post sin escribir alguno de los atributos anteriormente mencionados. Y
verificar el siguiente error:

13. Agregando relaciones entre los modelos
Por ahora solo existe el modelo “post”. Pero se puede agregar a la aplicación de blog la posibilidad de
escribir comentarios para cada post.
Para eso se va a crear el modelo “comment”. Ir a la vista “Projects” botón derecho sobre la aplicación,
“Generate” y en “Generator” elegir “model”. Presionar “OK”.

14. Luego migrar la base para que cree la tabla “comments”, botón derecho sobre la aplicación, elegir
“Migrate Database” y luego “to current version”.
Los “post” van a estar relacionados con los comments en la relación 1 a N.
Es decir “un post tiene muchos comments”.
Es decir, en inglés, “post has many comments”.
Es decir en Rails, se especifica dentro del modelo “post” con un “has_many :comments”.
Abrir el modelo post y escribir:
has_many :comments
y en el modelo “comments” escribir:
belongs_to :post

15. Utilizando Nested Routes
Para poder referenciar a los comentarios en forma de Recursos pertenencientes a Posts deberiamos
hacerlo a travez de una URL como la siguiente:
http://localhost:3000/posts/1/comments
Y para referirnos a un comentario en particular deberiamos hacerlo a travez de una URL como la
siguietne:
http://localhost:3000/posts/1/comments/1
Para esto debemos modificar las rutas. Las rutas están definidas en el archivo route.rb ubicado en la
carpeta config. O dentro de la vista “Projects” ir al proyecto y en “Configuration” abrir el archivo
“routes.rb” y agregarle a la definición de la ruta de post, lo siguiente:
map.resources :posts, :has_many => :comments
Jugando con la consola
Para ver los modelos en rails y jugar un poco con los modelos recién creados se puede abrir la consola
de rails y manipular los modelos directamente en la consola.
Para esto presionamos botón derecho sobre el proyecto y elegir “Rails console”.
Ahora creamos un Post nuevo desde la consola con la siguiente instrucción:
post1 = Post.create(:title => "desde la consola", :body => "el body desde la consola :P")
este devolverá el post creado seteandole automaticamente el timestampo en los campos “created_at” y
“updated_at”.

16. E inmediatamente se puede ver el post en la aplicación en el navegador. Eso es porque el server está
levantado usando el entorno de “Development” al igual que la consola. Por eso es que utilizan la misma
base de datos.
Volviendo a la consola, teniamos asignado en la variable “post1” el post recientemente creado, ahora
vamos a agregarle un comentario (también desde la consola).
Creamos un nuevo comentario y lo asignamos a una variable:
c1 = Comment.new
luego le seteamos el “body” a ese comentario.
c1.body = "este es el primer comentario del post"
y luego agregamos ese comentario al post1:
post1.comments << c1
Podemos verificar que cuando creamos el comment con la llamada a “.new” el comentario aún no tenia
asignado ningún id en la tabla. Al agregarlo al post automaticamente se guarda en la tabla el comentario
al mismo tiempo que la variable post_id se asigna con el id del post1. Eso es gracias a las relations que
especificamos anteriormente.
Utilizando View Helpers
Para mostrar los comentarios vamos a mostrarlos dentro de la vista “show” perteneciente a posts.

17. Para eso abrimos la vista show dentro de “Projects/views/posts/show.html.erb”.
Y agregamos al final del codigo de la vista lo siguiente:
<% content_tag(:div, :id => :comments ) do %>
<% @post.comments.each do | comment | %>
<% content_tag(:p) do %>
<%= label_tag(:comment_body, comment.body) %>,
<%= content_tag(:i, comment.created_at) %>
<% end %>
<% end %>
<% end %>
Se puede observar que se utilizaron algunos view helpers como “content_tag” y “label_tag”.
Generando un html como el siguiente:
Agregando AJAX
Para agregar los comentarios vamos a hacerlo a travez de ajax. Para eso vamos a agregar el formulario
de comments solamente en la vista “show” perteneciente a “posts”.
Primero y principal necesitamos que el template tenga las librerias necesarias para poder utilizar AJAX
en rails (librerias de Prototype y de Scriptaculous). Entonces abrimos el layout de posts
(“Projects/views/layouts/posts.html.erb”) y agregamos la siguiente instrucción en el head:
<%= javascript_include_tag :defaults %>

18. Ahora, abrir la vista show dentro de “Projects/views/posts/show.html.erb”.
Y agregar el siguiente formulario remoto al final de la vista:
<% remote_form_for([@post, Comment.new]) do |f| %>
<%= content_tag(:strong, "Send your comment:") %>
<% content_tag(:p) do %>
<%= f.text_area :body %>
<% end %>
<%= submit_tag 'comment' %>
<% end %>

19. El formulario remoto está apuntando al controller “comments” que aún no hemos creado:
Asi que generamos el controller haciendo botón derecho sobre la aplicación “Generate”, elegimos en
“generator” elegimos “controller” y en “name” elegimos:
Comments

20. Y dentro del controller de Comments agregamos la acción “create”
def create
post = Post.find(params[:post_id])
@comment = Comment.new(params[:comment])
post.comments << @comment
end
Si probamos de escribir algún comentario podemos notar un par de cosas.
Al presionar sobre el botón comment no notamos ninguna diferencia, pero si abrimos el log del
servidor (es una de las ventanas de OUTPUT, con el titulo de “Webrick for blog”) podemos ver que el
comentario se creó pero luego el controller lanzó un error al intentar encontrar un template para
renderizar esa acción:

21. Utilizando RJS templates.
Para crear el template de la acción create, presionamos botón derecho sobre la carpeta “comments”
dentro de “views”, luego “new” y luego “Empty RJS Template”.
Luego en Filename escribir “create” y presionar sobre “Finish”.

22. y ponerle el siguiente script:
page.insert_html(:bottom, :comments, content_tag(:p) do
label_tag(:comment_body, @comment.body) + ', ' +
content_tag(:i, @comment.created_at)
end
)
page["comment_body"].value = ''
Creando un custom helper
Una de las prácticas de Ruby on Rails es la de DRY. En nuestro anterior ejemplo repetimos
exactamente el mismo codigo en 2 lugares diferentes. Y ya se vió en la parte teorica los beneficios de
tener todo DRY y no tener codigo duplicado.

23. Asi que para esto vamos a crear un Custom Helper que haga ese trabajo en 1 solo lado.
Para esto abrimos el helper “application_helper.rb” en la vista “Projects” dentro de la aplicación y
dentro de “Helpers” y agregamos el siguiente metodo.
module ApplicationHelper
def get_comment_html(comment)
content_tag(:p) do
label_tag(:comment_body, comment.body) + ', ' +
content_tag(:i, comment.created_at)
end
end
end
Y modificamos los templates “show.html.erb” y “create.rjs” para que queden asi respectivamente: