My Concerts Wishlist Ajax Scaffold Ruby on Rails

Esta es una aplicación basada en un scaffold, sin embargo el CRUD está modificado para responder a peticiones Ajax en Rails.Comencemos con el paso a paso! la app la he llamado “My Concerts Wishlist” (ver screenshot aquí)

Creando el Proyecto wishlist.

Abres un Terminal y escribes:

Acceder a la carpeta “wishlist” desde el terminal:

Creando el Scaffold:  Band.

Ejecutamos en el terminal:

Analizando bands_controller.rb y el método “respond_to”

Cuando generamos el scaffold, abrimos el archivo app/controllers/bands_controller.rb y revisamos el método new,  vas a ver un código autogenerado con el método “respond_to”. (lo mismo tiene el método update,destroy).
El método Respond_to  es  una manera de decirle a tu controlador cómo responder a diferentes tipos de peticiones. Por ejemplo,  si queremos que nuestro controller “responda a” peticiones ajax agregamos a la lista la línea format.js

Estructura de la App.

1. Creando el menú superior.

navBar-superior-myconcertWishList

para esto crearemos una vista parcial  en views/layouts/_navbar.html.erb y escribimos el ya clásico navBar de bootstrap pero en el <ul> añadimos este bloque de código. Si se fijan en la línea 4 agregamos al Helper link_to, la propiedad :remote => true, lo que permitirá cargar contenido ajax.

no olvidar! hacer en   views\layouts\application.html.erb  la llamada a la vista parcial del navBar:

2. Estructura de la vista index.html.erb

Vamos a borrar todo el código autogenerado en la vista index.html.erb y vamos a pegar este bloque de código, que dibujará en  pantalla la lista de bandas. Usaremos el framework Bootstrap 3 para armar el layout. (pega antes de </head> los links de bootstrap cdn aquí)

Por cada iteración del Loop del objeto @bands, vamos a hacer un “render” de cada ítem, para lo cual creamos una vista parcial para organizar mejor las cosas. Vean que tenemos :remote => true en cada botón “show”/”edit”/”delete”. (img referencia!)

Vista parcial en views/bands/_band.html.erb

3. Creando el archivo javascript new.js.erb.

Creas un nuevo javascript en views/bands/new.js.erb

Desde ahora veremos en las vistas de extensión .js.erb cosas como  “j” y “render“.  la “j” es un alias del método escape_javascript y ayuda a “bloquear” retornos de carro, comillas simples/dobles que pueda tener tu vista parcial.  luego viene render que dibuja una vista parcial. Por si acaso…todo lo que vemos entre <% … %> es porque es código ruby.

luego crea una vista parcial views/bands/_form.html.erb

Este código dibujará el formulario por donde ingresamos/editamos  bandas. Es importante que el helper form_for tenga la propiedad  :remote => true para permitir contenido remoto ajax (img referencia)

ahora abres controllers/bands_controller.rb en su método new escribimos las líneas de código más abajo.

Entonces cuando enviamos una petición para agregar un nuevo item,  el controller  devuelve una “respuesta”  llamando específicamente a la vista new.js.erb.

4. Creando el archivo javascript create.js.erb.

Luego de presionar el botón “agregar”, hacemos otro request al controller.  En esta porción de código vemos que render tiene 2 parámetros, el primero es “band” que corresponde a la vista parcial “_band.html.erb” y el segundo corresponde al objeto @band que se comunicará con el model Band y asi podremos cargar la totalidad de registros de la base de datos, los cuales dibujaremos dentro de div #bands.

crea un nuevo javascript en  views/bands/create.js.erb

y en el bands_controller.rb en su método create escribimos:

5. Creando el archivo Javascript show.js.erb

Crea un nuevo javascript en  views/bands/show.js.erb

Para mostrar cada item con más elegancia…agregaremos un efecto fadeIn en jquery para que aparezca el render de la vista parcial _show.html.erb  (img referencia)

inmediatamente después, creas otro archivo más para la vista Parcial views/bands/_show.html.erb

Nos ayudamos de bootstrap 3 para crear el contenedor.

y en el bands_controller.rb en su método show escribimos el siguiente código. ¿Pero por qué? Porque queremos que al enviar una petición para “mostrar” una banda, el método “show” del controller responda invocando a  views/show.js.erb y no a show.html.erb

 6. Edit & Destroy lo dejo en el Repo de github

Tarea para la casa la creación de edit.js.erb y destroy.js.erb pero!  puedes revisar desde el github el código fuente que comparto con ustedes,  si seguíste la secuencia de new y create, verás similitudes en la lógica.

Fork
Download

Bonus track!

Para alegrar el ejercicio con lindos colores, agregué un jquery que hace que cambien de color los div con la clase .item a modo de “chimuchina extra” de feliz año 2015 =D

Si quieres compartir tu gitHub con una versión mejorada de mi propuesta, bienvenido sea! Puedes agregar un Buscador por ejemplo…y lo compartes en los comentarios, o si ves que hay código que se puede mejorar y cómo envíame también un mensaje a través de los comentarios…lo bueno se comparte! 😉

Que tengan un 2015 full de aprendizaje y desafíos profesionales.

 

 

Written by Daniela Gattoni

Software Engineering Student at USM, Santiago, Chile. Web Designer & programmer. #hack4good Santiago 1st place 2014 with #BringYourCup app.

Leave a Comment

Your email address will not be published. Required fields are marked *