Mejora de Interfaces con Bootstrap en Aplicaciones Rails
Todos los cursos GRATIS
Se acaba en:
:::
Objetivo
En esta clase vamos a tomar las vistas y usando convenciones de clases de estilo, helpers de vistas y algunas refactorizaciones de modelo, mejoraremos y embelleceremos toda nuestra aplicación, obteniendo un producto final como está en la imagen abajo, para esta clase usaremos Bootstrap como framework de componentes gráficos, sin embargo, no es objetivo de la clase hacer un tutorial de Bootstrap o abordarlo con profundidad, sino más bien establecer una conexión entre Rails y este framework.
Layouts
Vamos a retomar nuestra layout por defecto y agregar componentes que podamos reusar en las vistas tal y como te lo mencionaba en la clase de Assets y Layouts.
Vamos a plantear una estructura gráfica de tres secciones en nuestra aplicación: header (cabecera con barra de navegación superior), messages (mensajes) y main container (contenedor principal)
Lo primero que vamos a hacer es transformar el archivo app/views/layouts/application.html.erb a HAML, para esto podemos: hacerlo manual, usar la tarea de hamlit-rails, o usar la página https://htmltohaml.com/
En este caso, usaremos la última opción así que copiaremos el contenido del archivo app/views/layouts/application.html.erb a la sección izquierda de la página mencionada.
Seleccionaremos toda la sección derecha y la pegaremos de vuelta al archivo app/views/layouts/application.html.erb, por último cambiaremos el nombre del mismo archivo de application.html.erb a application.html.haml quedando de la siguiente forma:
En el bloque anterior, en el primer render estamos invocando al parcial encargado de top navbar o de la barra de navegación, el segundo render está invocando al parcial de los mensajes, que contendrán alertas de procesos CRUD (creación, lectura, actualización o eliminación) o similares en los registros de base de datos de nuestra aplicación, finalmente, el yield estará encargado de invocar la renderización de nuestras vistas, es decir, el contenido que hemos manipulado hasta ahora en los archivos .haml de la carpeta app/views que hemos generado con los scaffold o procesos similares. Debes tener en cuenta que ninguno de los parciales ha sido creado hasta ahora, estos los crearemos en los siguientes bloques
Barra de navegación
La barra de navegación será un parcial que crearemos en el archivo app/views/layouts/_navbar.html.haml con el siguiente contenido (recuerda que los parciales en Rails comienzan con _ underscore)
Gran parte del contenido, es extraído de una barra de navegación de bootstrap, por primera hemos introducido el helper image_tag apuntando a una imagen que debemos copiar y colocar dentro del directorio app/assets/images y que tiene por nombre logo.png:
Por otro lado, es importante mencionar, que por convención el image_tag helper siempre buscará de forma natural las imágenes dentro de la carpeta app/assets/images y no debes prefijar la ruta completa hacia la imagen, por lo que image_tag(logo.png) buscará automáticamente la imagen en la ruta app/assets/images/logo.png.
Por otro lado, dentro de la barra se encuentran dos enlaces importantes, el enlace para la gestión de categorías y el enlace para la creación de una nueva tarea, haciendo uso del ya conocido link_to helper. Tanto image_tag como link_to son helpers de rails que al final de la renderización de la página en el servidor son traducidos a HTML, en este a las etiquetas <img> y <a> respectivamente. Estos enlaces están usando helpers de rutas que son formados automáticamente a partir de la definición de las rutas en el archivo config/routes.rb de allí podemos usar categories_path, new_task_path y destroy_user_session_path como ya lo habíamos visto antes en pasadas clases.
Finalmente estamos usando la plataforma https://robohash.org (plataforma externa e independiente de Rails) para crear imágenes de perfil asociadas con el email del usuario, y también estamos usando dropdowns de bootstrap para colocar un enlace a cerrar sesión como lo teníamos previamente en el layout.
Mensajes de alerta
Los mensajes de alerta, será un parcial que crearemos en el archivo app/views/layouts/_messages.html.haml con el siguiente contenido
En el anterior bloque estamos introduciendo el objeto flash de Rails, a través de este, vas a poder pasar de forma temporal algunos tipos de datos entre acciones de rails, los tipos de dato que puedes pasar son: String, Array y Hash, normalmente el objeto flash se usa para pasar alertas de error o de notificaciones relacionadas a procesos de CRUD de registros, y como es tan común hacer esos envíos de mensajes, Rails ha propuesto flash[:notice] = ‘...’ y flash[:error] = ‘...’ como notificadores de alertas para ser usado comúnmente dentro de los controladores.
Cada que hacemos uso de flash como objeto insertando nuevas alertas, internamente flash almacena la información en un enumerador que permitirá recorrer todas las notificaciones como si se tratase de un arreglo convencional, es por esa razón que podemos usar el método each en la línea - flash.each do |name, msg| el resto del código es obtenido de las alertas colapsables de bootstrap.
Configuración de bootstrap
En pasadas clases hemos configurado parcialmente bootstrap como librería, usando yarn y webpacker para eso, así que bootstrap como librería o paquete ya está completamente instalado, pero no está referenciado para su uso en el proyecto, para hacer esto, debemos hacer dos pasos: añadir la relación en el pack de javascript (similar a lo generado con cocoon), y añadir una referencia de importación de las hojas de estilo usando sass y el mismo pack editado anteriormente.
Para el primer paso, debemos ir al archivo app/javascript/packs/application.js y allí antes de de la importación de cocoon como módulo, vamos a importar dos paquetes, bootstrap y robot-fontface, el primero trae toda la funcionalidad de javascript de bootstrap y el segundo es un paquete externo que ya había sido instalado y nos permitirá usar una fuente tipográfica llamada roboto, por lo que nuestro archivo quedará de la siguiente forma
El segundo paso es añadir la referencia a las reglas de estilo de bootstrap, para esto vamos a seguir usando webpacker y nuestro archivo app/javascript/packs/application.js y al final de este añadiremos una importación relativa a un nuevo archivo que crearemos en un momento.
import"../src/stylesheets/application"
El nuevo archivo deberá ser creado en la ruta app/javascript/src/stylesheets/application.sass, y si, tal como lo ves allí, dentro de mi pack puedo añadir referencias explícitas a hojas de estilo, en este caso en formato SASS. este nuevo archivo tendrá el siguiente contenido
@import"~bootstrap/scss/bootstrap"
Hoja de estilo para Layout
Para finalizar con nuestra incursión en la página de Layout, para a añadir una hoja de estilo con una referencia a la librería de iconos font-awesome, que será enlazada al proyecto usando la gema gem 'font-awesome-sass', '~> 5.12.0'
Para instalar esta gema debemos añadir su definición al archivo Gemfile, debajo de la gema gem 'cancancan'
# Gemfilegem 'font-awesome-sass','~> 5.12.0'
Luego en la raíz del proyecto debes correr el comando bundle install
➜ organizador ~ bi
Una vez instalada la gema, crearemos el archivo layout.sass en la ruta app/assets/stylesheets/layout.sass con el siguiente contenido
@import"font-awesome-sprockets"@import"font-awesome"nav.navbar&.bg-dark-blue
background-color: #273b47
.navbar-nav
.nav-item.active font-weight: bold
.dropdown-user
img
border-radius:50% background-color: white
margin-left: 15px
.btn-interaction
font-size: small
.card border-radius: 10px
Para que puedas ver el resultado de los cambios generados, deberás reiniciar el servidor, debido a que has añadido e instalado una nueva gema, una vez hayas reiniciado el servidor podrás ver la renderización de la página principal de la siguiente forma.
La anterior visualización sólo podrás verla si hay un usuario con sesión iniciada dentro del sistema, por el contrario, si no tienes una sesión iniciada te encontrarás con el siguiente error
Rails te está diciendo que no puede encontrar el método email de un objeto nil, esto es normal, debido a que si no hay un usuario con sesión iniciada entonces el valor del método current_user será nil, hay varias formas de resolver esta situación, sin embargo, vamos a abordar una que te servirá para conocer otra particularidad de las Layouts, y es que puedes tener varias de estas conviviendo en el mismo espacio.
Por ejemplo, para el inicio de sesión no necesitamos una barra de navegación (que es donde está originado el problema), sólo necesitamos la sección de mensajes y la llamada al contenedor principal a través del yield, así que crearemos una nueva layout usando un nuevo archivo, que tendrá un nombre especial (debe llamarse así) llamada devise.html.haml en la ruta app/views/layouts/devise.html.haml.
La razón de este nombre tan especial, es porque estamos llamando a la layout de la misma forma como se llama el controlador que está a cargo del inicio y registro de usuarios, se trata de Devise, la gema que habíamos abordado en pasadas clases, y que además usa un espacio de nombres llamado devise, así que de forma inteligente Rails sabe que si la layout es llamada devise.html.haml nos estamos refiriendo a los controladores de Devise como gema. Así es, Devise aporta varios controladores que tú desde el código no puedes ver de forma natural pero conviven en tu proyecto gracias a la gema.
De esta forma, nuestro nuevo archivo app/views/layouts/devise.html.haml tendrá el siguiente contenido
Así que cuando intentes acceder a la página web principal de tu proyecto http://localhost:3000 serás redireccionado al inicio de sesión con la nueva layout y deberás ver lo siguiente:
Embelleciendo nuestras categorías
Las categorías de nuestro proyecto se encuentran en la ruta app/views/categories allí vamos a embellecer la lista de categorías (acción index), la vista de mostrar (acción show) y nuestros formularios de creación y edición.
Para la lista de categorías, vamos a abrir el archivo app/views/categories/index.html.haml y a cambiar totalmente su contenido por el siguiente
En el anterior bloque hemos añadido una mejor visualización de nuestra lista usando los componentes de bootstrap llamados table y cards, además estamos usando el helper link_to de nuevo, al que le estamos pasando las clases de estilo btn btn-info, apoyados con la internacionalización de Rails apuntando a la ruta ‘common.<clave de traducción>’, recuerda que podemos usar la herramienta i18n-tasks para crear el árbol de traducciones en los archivos de localización de la siguiente forma
➜ organizador ~ i18n-tasks add-missing
Obteniendo como respuesta lo siguiente:
+--------+---------------------+--------------+|Locale|Key|Value|+--------+---------------------+--------------+| en | common.are_you_sure|Are you sure || en | common.destroy|Destroy|| en | common.edit|Edit|| en | common.show|Show|| es | common.are_you_sure|Are you sure || es | common.destroy|Destroy|| es | common.edit|Edit|| es | common.show|Show|+--------+---------------------+--------------+
Ahora, deberás ir al archivo de traducción ubicado en config/locales/es.yml, buscar las claves que han sido agregadas por el i18n-tasks y reemplazarlas por su valor en español
Ahora nuestra sección de categorías se deberá ver de la siguiente forma
Una vez hemos terminado con la página de lista de categorías, abordemos la página de mostrar (acción show), para esto abramos el archivo show.html.haml en la ruta app/views/categories/show.html.haml y reemplacemos todo el contenido por el siguiente
En el anterior bloque de código no hay nada diferente a lo visto hasta ahora, seguimos incorporando componentes gráficos de bootstrap junto con helpers de Rails.
Para concluir con la sección de categorías, abordaremos los archivos de formularios, reemplazando totalmente su contenido por el de la siguiente secuencia:
De igual forma, en los bloques anteriores, hemos abordado los componentes gráficos vistos hasta el momento enfocados en dos vistas y un parcial, en este parcial hemos conservado la estructura base de simple_form pero se han hemos añadido una pequeña grilla basada en bootstrap
Al final tendremos un formulario renderizado como se muestra aquí
Embelleciendo nuestras tareas
Las páginas de gestión de tareas son más ricas en contenido y tipos de entrada de datos, por lo que separaremos esta sección en tres subsecciones: lista de tareas, mostrar tarea y formulario de tareas
Lista de tareas
En el archivo app/views/tasks/index.html.haml vamos a reemplazar todo su contenido por el siguiente
.tasks.index-page
.display-4Lista de Tareas%p.text-muted.mb-2A continuación verás toda la lista de tareas creadas, podrás crear una nueva tarea, editarla o eliminarla si eres el creador de la misma
.card.bg-gray
.card-body.pb-2.tasks-container
- @tasks.eachdo|task|.task-container
.task-info
.task-title
%span.small="[##{task.code}]"= task.name%span.task-category
= task.category.name.task-description= task.description.task-dates
%b= task.owner.email="creado el #{l task.created_at, format: :long} / vence el #{task.due_date}".task-interactions
.task-participants
- task.participating_users.includes(:user).eachdo|participant|.task-participant{class:"task-participant--#{participant.role}"}= image_tag "https://robohash.org/#{participant.user.email}?size=60x60",title: participant.user.email.task-actions
.dropdown%a#taskMenu{"aria-expanded"=>"false","aria-haspopup"=>"true","data-toggle"=>"dropdown"}.fas.fa-ellipsis-v
.dropdown-menu{"aria-labelledby"=>"taskMenu"}= link_to t('common.show'), task,class:'dropdown-item'= link_to t('common.edit'),edit_task_path(task),class:'dropdown-item'= link_to t('common.destroy), task, :method => :delete, :data => { :confirm => t('common.are_you_sure') }, class: 'dropdown-item'
En el anterior bloque de código hemos transformado totalmente la visualización gráfica de la lista de tareas, sin embargo, seguimos usando los mismos elementos gráficos introducidos en las anteriores secciones de la clase con excepción de dos elementos importantes, el helper de fecha y el método includes para hacer eager loading (pronunciado [iguer loudin] /ˈiɡər ˈloʊdɪŋ/).
Abordemos primero el helper de decoración de fecha
="creado el #{l task.created_at, format: :long} / vence el #{task.due_date}"
El helper es invocado con el método l el cual es un alias del método localize, este recibe como parámetro un campo de tipo fecha o tiempo, y te devolverá una fecha en un formato más amigable al humano, como estamos usando la gema rails-i18n y hemos configurado por defecto el idioma español en clases pasadas, esta internacionalización por defecto nos presentará el valor de la fecha y tiempo en español, sin embargo, podemos definir ante este helper en qué formato queremos la salida, nosotros hemos elegido el formato extenso, por lo que verás una salida similar a esta
#=> creado el 2 de junio de 202016:28/ vence el 2020-06-17
Ahora abordemos el método includes en la siguiente sección de código
En el anterior bloque de código estamos accediendo desde la tarea a los participantes de la misma, pero debes tener en cuenta que estamos accediendo a los registros de la tabla o modelo intermedio entre la tarea y el usuario, es decir a Participant, sin embargo, en la línea precedida por el image_tag se necesita una información de la relación con el modelo User, necesitamos el campo email para usar el servicio de robohash.
Si no usamos el método includes, cada vez que llamemos a la relación user para obtener el valor campo email en la iteración, estaríamos llamando a la base de datos por cada más de una vez por cada relación participante / usuario que tengamos, esto no es bueno en términos de rendimiento.
Al usar el método includes(:user) cuando llamamos a la relación participanting_users, estamos al mismo tiempo trayendo la información de la relación con user en memoria, evitando que cuando se acceda a ella más adelante tengamos que hacer una nueva petición a la base de datos.
Por otro lado, la línea mostrada abajo perteneciente al mismo bloque de código anterior, también tiene un aspecto más que es relevante. La introducción del método participant.role dentro de la interpolación en las clases de estilo del contenedor task-participant
Actualmente este método participant.role nos está devolviendo un número, un uno o un dos, sin embargo, en este contexto sería mucho más útil que en lugar de devolver un número nos devolviera un término, como: responsible o follower (responsable o seguidor), para lograr esto vamos a introducir el método enum role: { responsible: 1, follower: 2 } que nos permitirá hacer una equivalencia clave valor de forma automática entre un atributo de tipo Integer (nuestro role) y un arreglo de términos ordenados, en este caso responsible es 1 y follower es 2.
Así vamos a abrir el modelo app/models/participant.rb y añadir la línea mencionada en el anterior párrafo
classParticipant<ApplicationRecordenumrole:{responsible:1,follower:2}belongs_to:user
belongs_to:task
end
Una vez modificado este archivo semilla, añadiremos una hoja de estilo para todo nuestra sección de tareas, asi que cambiaremos el nombre del archivo existente app/assets/stylesheets/tasks.scss a app/assets/stylesheets/tasks.sass y reemplazaremos todo el contenido de ese archivo por lo siguiente
Al finalizar, cuando refresques la página principal de tu aplicación deberás ver algo como lo siguiente
Mostrar tarea
En esta subsección mejoraremos la presentación de la página de mostrar tarea, abramos el archivo app/views/tasks/show.html.haml y reemplacemos todo su contenido a:
A pesar de que el nuevo bloque de código es extenso, lo único que hemos hecho es añadir estructuras gráficas como tablas, tarjetas, contenedores e imágenes a nuestra ya existente lógica, y hemos usado los mismos componentes que habíamos visto en la secciones pasadas.
Ahora, añadiremos una mejor estructura para nuestras notas en la tarea, por lo que reemplazaremos todo el contenido del archivo app/views/tasks/notes/_note.html.haml por el siguiente
Por último, como nuestro elemento contenedor de nota debe tener la clase .note-element debemos añadir una nueva línea de código en el archivo de javascript llamado app/views/tasks/notes/create.js.erb debajo de la línea 3, de esta forma la línea 4 deberá aparecer con el siguiente contenido div.classList.add("note-element");, en este archivo no debes reemplazar ninguna línea existente, sólo debes añadir la nueva.
Al final obtendremos una página web renderizada de la siguiente forma
Formularios de tarea
En esta subsección nos centraremos en los parciales de los formularios, tanto el principal como el anidado, pero antes de hacerlo debemos cambiar el contenido de los siguientes archivos:
En el bloque anterior, lo que hemos hecho es añadir de nuevo elementos gráficos de grilla y cartas provenientes de bootstrap, la lógica y la interacción con el helper de cocoon se ha conservado totalmente.
Sin embargo, hemos usado el parámetro input_html para modificar el tipo de elemento de entrada de la fecha de vencimiento en la línea como es mostrado abajo, de esta manera estoy forzando el tipo de elemento DATE disponible en HTML5 sobre la etiqueta input renderizada haciendo uso del constructor de formularios de simple_form
= f.input:due_date,as::string,input_html:{type::date },label:'Fecha de vencimiento'
Ahora, reemplacemos todo el contenido del archivo app/views/tasks/_participating_user_fields.html.haml por el siguiente
En el bloque de código anterior estamos introduciendo dos parámetros muy importantes de simple_form en términos de renderización de elementos de tipo select, se trata de los parámetros label_method y value_method quienes me permitirán acceder a la colección parametrizada en collection y acceder a la iteración de forma directa usando métodos Lambda (similar a las funciones anónimas, aunque en Ruby no existe a título propio el concepto de función). Un elemento select de HTML tiene options, e internamente estas tienen un sistema de clave valor value:label, estos parámetros label_method y value_method se usan para manipular ese valor en el momento en el que el constructor de formularios esté creando el elemento select completo
En el primer parámetro label_method hará que en lugar de imprimir la referencia del usuario en HTML, nos imprima el correo del usuario, un comportamiento similar tiene el segundo parámetro value_method el cual nos asignará al valor el término numérico del rol definido en el método enum dentro del modelo Participant.
Al final, el formulario de creación de una nueva tarea deberá verse de la siguiente forma
Fue necesario hacer algo de refactorizacion en el codigo, porque algunos estilos no estaban trabajando correctamente, y parte del codigo perdia la identacion, pero finalmente lo hice funcionar. 👌
Home
Show Activity
Category list
Para este tipo de casos es mejor dejar el codigo en snipets de Github.
De echo, este curso está siendo un suplicio. De principio a fin, inconsistencia, explicaciones tibias, cambios de versiones, enrevesamiento innecesario...
De hecho, empecé el curso con Rails 7, y tuve que hacer un monton de cambios para conseguir llevarlo a cabo...
Ahora empecé de nuevo el curso montandome una máquina virtual con rails 6, ubuntu 20 (porque con la version que tengo yo instalada en el PC no podía instalar mongodb, lo cual es un requisito para la continuacion de este curso... un desastre), y aún así, me encuentro cientos de problemas a cada paso... Muy insatisfecho con este curso! Y muy poca información de Rails en Platzi!
🙋🏻 Hola para todos aquellos que están teniendo problemas con esta clase.....aca les dejo mi repositorio, en el pueden ver los archivos creados en esta clase y ahorrarse problemas.
Si les sirvio de ayuda mi repo...denle una estrellita, se los agradeceria mucho.
Repo organizador-de-tareas repo - JorgeRodz
Gracias me facilitó el resolver varios problemas que tuve.
Estan caidas algunas imagenes y en la siguiente clase tambien
Tengo un problema que los efectos no ocurren
Hola Jesus, si pusiste el import en el archivo app/javascript/packs/application.js ya sea para bootstrap, roboto-fontface, intenta cambiar el import por el require.
Si gracias, despues de varios minutos ese dia lo puse solucionar :) haciendo eso.
¡Excelente! Creo que este curso va a animar a muchos que están dando sus primeros pasos con Rails.
esta lleno de errores el código, o al menos al ser copiado y pegado da errores a cascoporro como decimos aquí
Para importar Bootstrap, solamente agregue la siguiente linea en el archivo application.scss
@import'bootstrap/scss/bootstrap';
¡Muy chévere!
Hoy quise avanzar y al levantar el servidor me apareció este error, si alguien me ayuda?, gracias!
could not connect to server: No such file or directory
Is the server running locally and accepting
connections on Unix domain socket "/tmp/.s.PGSQL.5432"?
Revisa tu archivo de configuración de postgresql
Soy el único que no encuentra la pestaña de recursos en esta clase? La estoy buscando para buscar la imagen logo.png
¡Hola! Los recursos están debajo del video :D
Hola gracias por la respuesta. Pero es que esta clase es solo lectura. Si puedo ver la pestaña de recursos en las clases con video pero en esta que es de solo lectura no la veo.
En mi proyecto al colocar la imagen en el directorio que se indica en el curso app/assets/images me indicaba un error porque no encontraba el recurso.
al investigar un poco encontré este post:
donde comenta que si no esta configurado el asset pipeline en el proyecto, la imagen se debería copiar en app/public/images y cuando lo hice, en efecto se mostró sin problemas.
Espero que le pueda ser útil al que se encuentre en esa situación. Saludos 👋
Ahh se me olvidó comentar que además de pegar la imagen en app/public/images también hay que hacer un cambio en la forma en que la referencia en el código, quedando de la siguiente forma:
= image_tag '/assets/logo.png', alt: 'Description of the image', class: 'd-inline-block align-top', width: 85, alt: 'Logo'
