StreetmusicMap parte 1: Combobox uno a muchos en Ruby on Rails

Hola Rubystas!  para  poner en práctica lo aprendido, lo mejor es crear proyectos experimentales para jugar. Aquí les presento una aplicación llamada streetmusicMap, está en su fase inicial, prototipo que comenzó este fin de semana, y el cual estoy construyendo junto con mi partner de Software  y coFundadora del blog ConciertosComentados: Melissa.

Para desarrollar esta app, comenzaré con la creación de 2 Scaffolds: Musician e Instrument. y los uniremos en el modelo a través de una relación  “uno a muchos”, en donde visualmente nos ayudará un Combobox.  En la Segunda Parte (en desarrollo..se viene se viene!)  mostraré como esa data la integramos a un Google Map, usando la gema gmaps4Rails.

Creando la App.

Abres un Terminal y escribes:

Acceder al proyecto desde el terminal:

Creando el Scaffold: Musician

(*el campo instrument_id:integer es una clave foranea del scaffold Instrument que realizaremos a continuación. y el campo latitude:float longitude:float los usaremos mas adelante en la parte 2 del streetMusicmap cuanodo integremos la gem gmaps4rails)

Ejecutamos en el terminal:

Creando el Scaffold: Instrument

Ejecutamos en el terminal:

Ok,   ahora tenemos 2 CRUDMusician e Instrument (usen conceptos en inglés para crear scaffolds)

Agregar Instrumentos es simple, ya que es sólo un nombre. La parte que nos interesa es cuando agregamos un Músico, y tenemos que categorizarlo mediante un combobox cargado con instrumentos.

Modelo: Creando la relación Uno a Muchos

Accedemos al archivo routes a través de mapa/config/routes.rb y  cambiamos “welcome#index”  por:

 

Al acceder por browser a nuestra vista de músicos http://locahost:3000/musicians los datos  se muestran de esta manera: Nombre del Musico / ID del instrumento…pero lo que queremos ver por pantalla es el nombre del instrumento no su ID!  Para lograr este proposito es que creamos la relación “uno a muchos” en el modelo:

En app/models/musician.rb escribe:

Y en app/models/instrument.rb escribes:

la relación entre Músico e Instrumento en nuestro ejercicio específicamente  se lee así:

“un Músico pertenece_a una categoría” (belongs_to)

y “Una categoría tiene_muchos Musicos”. (has_many)

la Vista: Cambiando el instrument_id por el Nombre del instrumento

en app/views/ musicians/ index.html.erb buscas:

y lo reemplazas por:

Refrescas el browser y verás por pantalla ahora el Nombre del instrumento en lugar de su ID..mucho mejor!

El Controller: Modificando el Controller Musicians

Al mostrar la view /musicians/new tenemos que agregar un nuevo objeto @instruments, el cual recibirá todos los registros que el Modelo le devuelva y esos datos lo vamos a cargar en un combobox.

En app/controllers/musicians_controller.rb  busca:

y lo reemplazas por:

Ahora en la vista parcial app/views/musicians/_form.html.erb  busca:

y reemplázalo por este helper: (ésta línea dibuja el combobox de instrumentos por pantalla)

Desde tu navegador ingresa a:

http://localhost:3000/musician/new

Excelente! :) Ahora vemos un Combobox para categorizar a nuestros musicos. Más info sobre este Helper collection_select aquí!

Seguramente si accedes a la view “edit” verás un error, eso es porque tenemos que agregar un objeto @instruments en el método “edit” del controller musician ya que también al editar un registro de músico, necesitamos ver el combobox cargado pero posicionando en primer item el instrumento que le pertenece a este músico.

En app/controllers/musicians_controller.rb  busca:

y lo reemplazas por:

Ya estamos casi terminando nuestra primera parte de la aplicación, sólo un detalle más…

En app/views/musicians/show.html.erb  busca:

y lo reemplazas por:

Y ya tienes una aplicación uniendo 2 scaffolds y cargando un combobox en la Vista!

Esta es la versión actualizada y en español del tutorial original escrito por Bevan 😉

espero sus comentarios y/o sugerencias.

 

pd: Si  te interesa la idea de ser Colaborador/a de Streetmusicmap enviame un mail a danigattoni (@) gmail.com 😉

Written by Daniela Gattoni

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

This article has 1 comment

  1. Pingback: StreetmusicMap parte 2: Integración Gmaps4Rails | Daniela Gattoni web developer, Santiago Chile

Leave a Comment

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