Integrar Twitter Bootstrap con Ruby on Rails

Twitter Bootstrap es un framework que nos ayuda a desarrollar de forma rápida aplicaciones web. Provee una amplia variedad de código CSS y Javascript para implementar layouts, navegaciones y formularios, así como soporte para diseño adaptativo (Responsive Web Design).

Una opción para usar Bootstrap es la de descargarnos desde la página del framework el CSS y el Javascript e importarlos en el directorio /app/assets/ de nuestro proyecto rails, pero esta no sería la mejor manera de hacerlo si usamos Rails. Twitter Boostrap está escrito con LESS, que es un preprocesador de CSS similar al que usa Rails (SASS), así que si queremos aprovechar todo el potencial de Bootstrap, deberíamos usar un lenguaje como LESS, en lugar de ficheros estáticos. Para integrar LESS con Rails debemos usar varias gemas, como twitter-bootstrap-rails, que es la que yo he usado, aunque hay otras opciones.

Para integrar Bootstrap debemos partir de una aplicación rails ya creada mediante la orden rails new [nombre_app], así como algún modelo del tipo rails g scaffold product name price:decimal –skip-stylesheets. Hemos utilizado la opción --skip-stylesheets porque queremos utilizar las CSS de Bootstrap en lugar de la que sería generada automáticamente. Después, generamos la tabla en base de datos con rake db:migrate. Una vez hecho esto ya es posible ejecutar la aplicación pero con un aspecto nada atractivo todavía. Es hora de integrar Bootstrap.

Lo primero que hay que hacer es añadir la gema twitter-bootstrap-rails al fichero Gemfile que se encuentra en el directorio raíz de la aplicación.

/Gemfile
# Gems used only for assets and not required
# in production environments by default.
group :assets do
        gem 'sass-rails',   '~> 3.2.3'
        gem 'coffee-rails', '~> 3.2.1'

        # See https://github.com/sstephenson/execjs#readme for more supported runtimes
        # gem 'therubyracer'

        gem 'uglifier', '>= 1.0.3'
        gem 'twitter-bootstrap-rails'
end

Instalamos twitter-bootstrap-rails y sus dependencias (libv8 y less-rails) ejecutando bundle install. Una vez ejecutada la orden anterior, llamamos al generador para finalizar el proceso de instalación y colocar Bootstrap (javascript, css) en el directorio /app/assets.

$ rails g bootstrap:install
insert  app/assets/javascripts/application.js
create  app/assets/javascripts/bootstrap.js.coffee
create  app/assets/stylesheets/bootstrap_and_overrides.css.less
gsub  app/assets/stylesheets/application.css
gsub  app/assets/stylesheets/application.css

En el directorio css está situado el fichero bootstrap_and_overrides.css.less, que es el sitio ideal para personalizar nuestros estilos de la aplicación. De echo, si ejecutamos a continuación la aplicación, veremos que la misma tiene otro aspecto, aunque aún es mejorable.

A partir de ahora empezaríamos a diseñar el layout de la aplicación. Editaremos el fichero application.html.erb para incluir el header (encabezado) de todas las páginas de la aplicación:

/app/views/layouts/application.html.erb 
<!DOCTYPE html>
<html>
    <head>
            <title>Store</title>
            <%= stylesheet_link_tag    "application", :media => "all" %>
            <%= javascript_include_tag "application" %>
            <%= csrf_meta_tags %>
    </head>
    <body>
        <div class="container">
                <%= yield %>
        </div>
    </body>
</html>

Con el código insertado entre los tags head mejoramos el comportamiento de HTML5 para versiones anteriores de Internet Explorer, e incluimos los META para incluir Responsive Design para su mejor visualización en los dispositivos móviles. A partir de este momento podemos incorporar cualquier elemento que aparece en la sección de componentes de Bootstrap siguiendo la documentación existente, de manera fácil e intuitiva y utilizando el fichero bootstrap_and_overrides.css.less para personalizar los estilos.

Lo Básico

Si nunca has utilizado Bootstrap debes saber que utiliza un sistema de rejilla de 12 columnas, lo que facilita la creación de un layout especificando la anchura de cada columna. Este layout será responsive, por lo que si modificamos el ancho de la ventana, el contenido se adaptará al nuevo ancho, ideal para visualizar el diseño con un smartphone o tablet. Un ejemplo sería el siguiente, que crea una barra lateral con tamaño de 3 columnas (span3) y el contenido de nuestra aplicación en 9 columnas (span9).

 /app/views/layouts/application.html.erb 
<!DOCTYPE html>
<html>
    <head>
            <title>Store</title>
            <%= stylesheet_link_tag    "application", :media => "all" %>
            <%= javascript_include_tag "application" %>
            <%= csrf_meta_tags %>
    </head>
    <body>
        <div class="container">
                 <div class="row">
                      <div class="span9"><%= yield %></div>
                      <div class="span3">
                         <h2>About Us</h2>
                         <p>Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum.</p>        
                      </div>
                 </div>
       </div>
    </body>
</html>

Para añadir una barra de navegación responsive en la parte superior de la pantalla, cuyo menú se colapse en un icono desplegable con los enlaces del menú cuando el ancho de la ventana se reduzca, Bootstrap incluye estilos para el siguiente código:

/app/views/layouts/application.html.erb
<div>
    <div>
        <div>
            <a data-toggle="collapse" data-target=".nav-collapse">
                <span></span>
                <span></span>
                <span></span>
            </a>
            <a href="#">Some Store</a>
            <div>
                <ul>
                    <li><%= link_to "Browse Products", products_path %>
                          </li>
                    <li><%= link_to "Price List" %></li>
                    <li><%= link_to "Contact Us" %></li>
                    <li><%= link_to "Cart" %></li>
                </ul>
            </div>
        </div>
    </div>
</div>

 

somestore

En este post hemos visto como integrar Bootstrap en una aplicación rails mediante twitter-bootstrap-rails, como personalizar los estilos en el fichero bootstrap_and_overrides.css.less mediante LESS y como incorporar componentes básicos en nuestra aplicación.

Instalar Ruby on Rails en Windows

En este post te mostraré cómo instalar Ruby on Rails en Windows y preparar el entorno para comenzar a desarrollar en este sistema operativo, mediante RailsInstaller.

En este post te mostraré cómo instalar Ruby on Rails en Windows y preparar el entorno para comenzar a desarrollar en este sistema operativo. Yo personalmente recomiendo Linux, pero lo normal es que manejemos varios equipos, incluido el del trabajo en el que no tengo elección del sistema operativo a utilizar. Si estás en esta situación o simplemente tu equipo es Windows sigue leyendo.

Para esto vamos a utilizar RailsInstaller, un proyecto simple para proporcionar, de manera muy simple, el entorno de Ruby on Rails sobre Windows XP o superior. Tras una sola instalación guiada por un asistente o wizard, tendríamos Ruby 1.9.3, Rails 3.2, Git 1.7.6 y la base de datos SQLite 3.

Para empezar ejecutamos un navegador y abrimos la url railsinstaller.org, allí descargamos el Kit de instalación de los paquetes anteriormente descritos. Una vez descargado, abrimos la carpeta de descarga en la que se almacenó el archivo con nombre railsinstaller-versión.exe. Hacemos doble clic para ejecutarlo. Comenzará inmediatamente el asistente de instalación con un mensaje de bienvenida. Pulsamos Next. En el siguiente paso debemos aceptar los términos de la licencia. Para continuar debemos aceptar y pulsar Next. Tan sólo nos queda especificar la ruta en la que instalar. Una vez especificada pulsamos Install. El tamaño de la instalación suele ser aproximadamente 447 Mb.

Cuando hayamos completado la instalación aparecerá un mensaje indicándolo con un botón Finish. Pulsamos el botón y aparecerá la consola para configurar git y ssh. Para configurar git debemos introducir un nombre de usuario y una dirección de correo. De momento no debes preocuparte por la clave ssh generada.

Una vez hecho esto cierra la ventana y abre una nueva ventana de línea de comandos pulsando Inicio, Ejecutar…, teclea cmd y pulsa Aceptar. Ya tienes preparado el entorno para comenzar a construir tus proyectos con Ruby on Rails. Puedes probar que se han instalado las versiones correspondiente ejecutando los comandos:

C:\>rails -v
 Rails 3.2.13

C:\>ruby -v
 ruby 1.9.3p392 (2013-02-22) [i386-mingw32]

Si eres nuevo en esto de la programación de aplicaciones con RoR (Ruby on Rails) te aconsejo no utilizar un IDE (entorno de desarrollo integrado). Aunque parezca sorprendente, la mayoría de los desarrolladores de Rails no utilizan un IDE, sino editores de texto plano con más o menos funcionalidades. Yo utilizo Sublime Text 2, un editor avanzado multiplataforma con multitud de añadidos como múltiples selecciones, reconocimiento de sintaxis, paleta de comandos, interfaz personalizable e incluso modo sin distracciones, entre otras. Sublime Text lo puedes descargar y usar de forma gratuita, pero cada cierto tiempo de uso te avisará que estás utilizando una versión gratuita y consideres la opción de comprar una licencia.

Tras la instalación del entorno revisa Rails Guides (en inglés) para obtener información sobre desarrollo de aplicaciones Ruby on Rails.

Ruby on Rails: Autenticación y Autorización (I)

Uno de los puntos débiles (o fuertes, según se mire) de Ruby on Rails (RoR) es que requiere de la configuración de su propia autenticación y sistemas de autorización. Tiene sentido teniendo en cuenta que se trata de un framework para el desarrollo de aplicaciones, más que un completo sistema de gestión de contenidos como Drupal, por ejemplo. Esto requiere de más tiempo para construir una aplicación web básica. En este post explicaremos la manera de configurar un sistema de autenticación para una aplicación desarrollada con RoR.

Uno de los puntos débiles (o fuertes, según se mire) de Ruby on Rails (RoR) es que requiere de la configuración de su propia autenticación y sistemas de autorización. Tiene sentido teniendo en cuenta que se trata de un framework para el desarrollo de aplicaciones, más que un completo sistema de gestión de contenidos como Drupal, por ejemplo. Esto requiere de más tiempo para construir una aplicación web básica. En este post explicaremos la manera de configurar un sistema de autenticación para una aplicación desarrollada con RoR. Se requiere conocimientos de Ruby y tener instalado el mismo en el sistema.

A veces se confunde Autenticación con Autorización. La autenticación o autentificación es cualquier proceso mediante el cual se verifica que alguien es quien dice ser. Esto suele ser gestionado por una pantalla de inicio de sesión. La autorización es cualquier proceso por el cual a alguien se le permite estar donde quiere ir, o tener la información que quiere tener. En un ejemplo como el correo electrónico, al entrar en el sistema, la autenticación indica al proveedor de correo electrónico que yo estoy accediendo a consultar mis mensajes. (El proceso por el cual, una vez dentro, se me permite el acceso a qué páginas o recursos sería la autorización).

Se puede crear un sistema de autenticación desde cero, creando nuestro propio modelo de datos, nuestras vistas e incluso utilizar el sistema de encriptación que deseemos para las contraseñas. Aquí vamos a aprender a configurar de manera básica Devise. Devise es una solución de autenticación para Rails, siguiendo el estándar MVC, basada en el concepto de modularidad, es decir, se utiliza lo que se necesita.

Lo primero que tenemos que hacer es abrir un terminal con el entorno Rails configurado y listo, e instalamos Devise con el comando “gem install devise

A continuación debemos configurar Devise. Para ello vamos a crear nuestra aplicación Rails a la que vamos a llamar “mysecureapp”. Para ello ejecutamos el comando “rails new mysecureapp”

Nuestra aplicación RoR ha sido creada en el directorio en el que hemos ejecutado el comando. Cambiamos al directorio recién creado “mysecureapp” y editamos el fichero “Gemfile. Vamos a añadir la línea gem ‘devise’ como mostramos abajo:

gem 'sqlite3'

gem 'devise'

El siguiente paso es instalar Devise usando el comando “rails generate devise:install” que producirá el siguiente resultado:

Seguimos las instrucciones que nos indica la salida del comando. Añadimos la siguiente línea al fichero de nuestra aplicación “mysecurity/config/environments/development.rb”:

config.action_mailer.default_url_options = { :host => 'localhost:3000' }

Añadimos los mensajes en el fichero “app/views/layouts/application.html.erb” dentro del body de la página:

<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>

Cambiamos al directorio “mysecurity/config” y añadimos al fichero de rutas routes.rb la siguiente línea:

root :to => "home#index"

A continuación generaremos el modelo para el objeto Usuario (rails generate devise user) y ejecutaremos “rake db:migrate” para crear las tablas en la base de datos. Si queremos que el nombre del modelo y de la tabla que almacena los usuarios se llame de manera diferente (admin, member, etc.) debemos indicarlo al generarlo (rails generate devise NOMBRE_MODELO). Recordemos que si no especificamos otra base de datos, las tablas se crean en la base de datos por defecto para desarrollo, SQLite que incorpora RoR. Si el nombre del modelo es “user” creará una tabla con el nombre en plural “users”:

Comprobamos que todo ha funcionado correctamente ejecutando el servidor Rails (ejecutar el comando “rails server”) y en un navegador tecleamos la siguiente URL “http://localhost:3000/users/sign_in”. Si todo ha ido bien veremos que se muestra lo siguiente:

Devise nos genera URLs para login, alta de usuario, cerrar sesión, cancelar usuario, recordar contraseña, editar usuario, etc. Para ver todas las rutas podemos ejecutar el comando “rake routes” desde la línea de comandos:

Podemos usar el complemento SQLite Manager de Firefox para ver la base de datos de desarrollo SQLite. Está localizada en el sistema de ficheros, dentro del directorio “mysecurity/db” de nuestra aplicación, en el fichero development.sqlite3. Podemos observar las columnas generadas en la tabla “users”.

Devise creará varios métodos helpers para usar dentro de nuestros controladores y vistas. Para configurar que un controlador requiere autenticación del usuario añadimos el siguiente filtro:

before_filter :authenticate_user!

Para verificar que un usuario ha realizado login, usamos el siguiente helper:

user_signed_in?

Para conocer el usuario que se ha logado:

current_user

Para acceder a la variable del entorno de sesión

user_session

Hay que tener en cuenta que si habíamos renombrado nuestro modelo con otro nombre como “member”, por ejemplo, hay que sustituir la palabra “user” por “member”:

before_filter :authenticate_member!

member_signed_in?

current_member

member_session

Es importante conocer que todas las vistas están empaquetadas en Devise. Para generarlas y tener accesibilidad para poder personalizarlas ejecutamos el siguiente comando:

rails generate devise:views

Esto generará las vistas en el directorio /app/views/devise.

Ahora que tenemos la autenticación configurada y funcionando podemos empezar a mejorarla. Nos gustaría tener un enlace en la parte superior de la página que nos diga si tenemos sesión iniciada y otro que nos permita iniciar y cerrar una sesión.

Lo podemos hacer modificando el fichero de layout de la aplicación de forma que los enlaces sean visibles en todas las páginas. Añadamos las siguientes líneas justo después del código que muestra los mensajes:

<div id="user_nav">
  <% if user_signed_in? %>
    Conectado como <%= current_user.email %>. No eres t&uacute;?
    <%= link_to "Log off", destroy_user_session_path, :method => :delete%>
  <% else %>
    <%= link_to "Alta", new_user_registration_path %> o
    <%= link_to "Login", new_user_session_path %>
  <% end %>
</div>

Como puede verse, con Devise es muy sencillo configurar toda la funcionalidad de autenticación, añadiendo sin esfuerzo la capacidad de registrar nuevos usuarios y permitirles iniciar y cerrar sesión.