• Author / Uploaded
• Jehú Guillén

• Categories
• Ruby on Rails
• Marco de software
• Red mundial
• Tecnología
• Comillas

Citation preview

Introducción a

Ruby on Rails desde cero

www.desafiolatam.com

Versión 0.712

2) Motivación ¿Qué es Ruby on Rails? ¿Por qué utilizar Ruby on Rails para mi aplicación? Desventajas de utilizar Ruby on Rails ¿Cómo está estructurado este libro? Sección I: Front-end con Rails 3) Instalando las herramientas OSX Linux En Linux y OSX 4) Estructura básica de un proyecto de Ruby on Rails 5) Creando nuestra primera página web con Rails Consola secuestrada. Creando nuestra primera página Creando nuestra segunda página 6) Agregando imágenes a nuestra primera página Los Assets El asset_path 7) Nuestra primera página con layout El Layout Incorporando CSS Incorporando Javascript Incorporando imágenes (u otros assets) dentro del CSS y del JS Consecuencias de Sprockets Incorporando Bootstrap. Vistas parciales

Cargando un layout distinto Desafío 8) Creando un formulario de registro El tag form Guardando los datos Guardando los usuarios dentro de Rails Cambiando la página de inicio Desafío 9) Formulario 2.0 Creando un proyecto nuevo Enviando un formulario por POST Mostrando todos los usuarios en la base de datos Desafío 10) El Gemfile Sección II: Deployment 11) Deployment en Heroku Tipos de hosting Instalando el Toolbelt de Heroku Claves SSH Repositiorio Git Subiendo la aplicación a Heroku Desafío 12) Configurando el dominio (o subdominio) Configurando dominios cuyas autoridades no soportan redireccionamiento tipo CName Tips de mantención Desafío Sección III: SQL y modelado de bases de datos

13) SQL ¿Qué es SQL? PostgreSQL Instalando PostgreSQL en OSX Instalando PostgreSQL en Linux Entrando a PSQL Problemas típicos de Configuración de PostgreSQL El dilema del usuario y de la base de datos Nuestros Primeros pasos en SQL Manipulando valores de una tabla Modificando una tabla Constraints Ventajas de la clave primaria Tablas con valores autoincrementales Ordenando los resultados. Distinct y count Agrupando datos Guía de ejercicios 14) SQL con más de una tabla Integridad referencial Joins Explain Tipos de relaciones La clave foránea Ejercicios 15) Modelando con SQL Modelando un blog

Ejercicio Modelando Tinder Ejercicios de diagrama Ejercicios de SQL Modelando un carro de compras Ejercicio Sección IV: Back-End con Rails 16) Rails con PSQL Instalando Postgre en un proyecto existente Creando un proyecto con postgreSQL El error de socket 17) Los modelos en Rails Los modelos como mapas a los objetos (ORM) Creando modelos Migraciones El archivo schema.rb Creando migraciones. Creando una FK con índice. Getters y setters El archivo seed Atributos virtuales Ejercicio 18) Reglas del negocio Protegiendo la integridad de los datos Validando la presencia de un campo Validando que el campo sea único Validaciones custom

Valores iniciales Callbacks Ejercicios 19) Relaciones entre modelos Relaciones 1 a 1 Graficando las relaciones Relaciones de 1 a n 20) Testing unitario de modelos La Carpeta de Tests Estructura de un test de modelo Corriendo tests Los fixtures Cargando los fixtures en los tests Fixtures y relaciones Otros tipos de testing 21) Creando un Blog Construyendo el modelo Construyendo los tests Desafios 22) MVC Arquitectura REST Scaffold Strong parameters Probando los strong params 23) El archivo de rutas a fondo Introducción al archivo de rutas Rake routes a fondo

El archivo routes a fondo Resources 24) Rutas anidadas y métodos REST anidados Introducción a rutas anidadas Creando un scaffold anidado Testeando una ruta anidada Obteniendo y mostrando los resultados. El detalle del tweet Formulario para un nuevo tweet Creando el método create 25) Relaciones N a N Introducción a relaciones N a N Creando modelos con has_and_belongs_to_many Agregando elementos Borrando la asociación: Tests para la relación Implementando relaciones con has_many :through Has_many through vs Has_and_belongs_to_many 26) Haciendo un cloudtag Creando datos para la nube de tags Creando el controller y cargando los datos para hacer la nube de tags Creando la vista con la nube de tags 27) Devise Empezando con devise Creando el modelo de devise Ingreso, registro y salida Login or logout

El objeto current_user Modificando los formularios de ingresar y registro Agregando un dato al modelo de usuarios Bloqueando el acceso Recuperando la contraseña 28) Devise avanzado Agregando el rol de usuario Testeando los accesos Códigos completos: Generando los controllers de devise Cambiando la página después de registrarse Cambiando la página después de ingresar Configurando action_mailer para enviar correos con gmail Protegiendo las claves con dot-env Configurando Heroku para dot-env Quiz 29) Autorización con CanCanCan ¿Cuándo no utilizar CanCanCan? Big picture Instalando CanCanCan El árbol de habilidades El método can Los roles Revisión de habilidades Bloqueo y carga Manejo de conexiones no autorizadas Probando las habilidades en la consola

Habilidades basadas en la propiedad Habilidades en recursos anidados 30) Polimorfismo 31) Subiendo archivos con carrirewave Instalando carrierwave Generando el uploader Probando desde rails console. Creando una formulario con archivos 32) Amazon S3 Configuración para la gema de carrierwave-aws IAM Agregando las claves de entorno a Heroku 33) Optimización find_each N+1 queries en Ruby on Rails N+1 en conteo Contando con includes Contando con SQL Contando con left join La gema bullet Desnormalización y Counter caché 34) Javascript, jQuery y Turbolinks ¿Cómo organizar nuestro javascript? Turbolinks Ejemplos de uso 35) A JAX, Remotes y UJS ¿Para qué sirve A JAX?

UJS 36) El método .ajax 37) Manejo de gráficos Haciendo los queries Generando los gráficos Construyendo un calendario de eventos con Rails y Fullcalendar Setup del proyecto Setup de FullCalendar Agregando eventos al calendario 39) Envío de correos con Action Mailer Intro Creando nuestro mailer Modificando el mailer y como probarlo Enviando el correo usando ActionMailer y Gmail ActionMailer y Devise ActionMailer y ActiveJob: deliver_now, deliver_later? 40) Testings automatizado con Guard Instalar Guard en nuestro proyecto Configurar Guard Configurar Minitest-Reporters Correr Guard para automatizar el testing Sección V: Deployment avanzado con Amazon y VPS 41) Rails y Nginx con Passenger en Ubuntu: Preparando nuestro entorno de producción (DigitalOcean). Introducción Acerca de esta guía. Convenciones. Paso 0 – Como acceder a nuestro servidor

Configurar el timezone en nuestro servidor Acerca del usuario Root ¿Cómo ingresar sin tener que ingresar la clave cada vez que nos queremos conectar a nuestro servidor? Paso 1 – Instalación de RVM Paso 2 – Instalación de Ruby y de Rails Paso 3 – Instalación de Nginx y Passenger Paso 4 – Habilitando Passenger en Nginx Paso 5 – Instalación y configuración de Postgres. Paso 6 – Crear un Server Block Paso 7 – Últimos detalles Extras 42) Deployment con Capistrano Introducción Paso 0 – La Aplicación Paso 1 – Añadir Capistrano a nuestra app. Paso 2 – Preparación de nuestro proyecto Paso 3 – Tareas personalizadas Paso 4 – Conectando el servidor con el repositorio Paso 5 – Deploy! Cómo se hace? y qué hace?

2) Motivación ¿Qué es Ruby on Rails? Rails en un framework especializado en la construcción de aplicaciones web, su principales ventajas es que es sólido, rápido y escalable.

La versión actual de Ruby on Rails es 5.0 y se publicó hace algunos días. Si bien este libro podría servir para utilizar la última versión, la documentación aun no esta completa y podría generar más de algún error. Es por eso que para efectos de este libro seguiremos utilizando la versión anterior (4.2.7) hasta que la documentación sea lo suficientemente buena como para asegurar que no habrán problemas.

Ruby no es lo mismo que Rails, el primero es un lenguaje de programación orientado a objetos y el segundo es un conjunto de herramientas construidas en Ruby para la creación de aplicaciones web.

¿Por qué utilizar Ruby on Rails para mi aplicación? Ruby on Rails es impresionantemente efectivo para la construcción de aplicaciones web, con sólo un par de líneas de código puedes tener una mini aplicación web funcionando. Además trae un conjunto de herramientas que permiten crear aplicaciones complejas y escalables a niveles enterprise con equipos de programación relativamente pequeños.

Por otro lado también es sorprendentemente rápido para la

construcción de prototipos. Para una persona entendida en el tema es posible crear un prototipo funcional de un proyecto y publicarlo en internet en sólo un par de horas.

Desventajas de utilizar Ruby on Rails Es un framework complejo y Ruby no es tan masivo como otros lenguajes como PHP, por lo que cuesta un poco más encontrar programadores. Sin embargo tiene una muy buena comunidad y es fácil encontrar documentación y componentes para todo lo que necesitas. Además día a día el mundo de la informática ha empezado a reconocer las ventajas de Ruby on Rails y esta comenzando a migrar a este maravilloso framework.

Ruby on Rails tiene muchos componentes -que vamos a discutir a lo largo del libro- que dan la impresión de que funcionan solas o por arte de magia. Es por esto que su curva de aprendizaje es bastante dura a pesar de ser un poderoso framework cuando se le domina.

Finalmente está el tema del rendimiento que, al estar creado en base a varios componentes, tiene un gran footprint. Eso significa que es pesado y conlleva a que se necesiten servidores más potentes para atender la misma cantidad de usuarios, toda una contraposición a la facilidad con que se construyen aplicaciones en este framework en comparación a otros.

Tanto Ruby como Ruby on Rails están pensados en la felicidad del programador en lugar de la eficiencia del programa.

¿Cómo está estructurado este libro?

Este libro cumple dos funciones; en primer lugar ser una guía práctica de aprendizaje y en segundo contener los pasos necesarios para construir diversos proyectos tipos, de los cuales se pueden sacar varias ideas para emprendimientos.

Este libro se compone en 5 grandes secciones.

Front-End con Rails:

Veremos todo lo necesario para crear páginas web con Rails y a manejar correctamente el asset_path, crear pequeños formularios y entender los conceptos básicos de MVC.

Deployment:

Subiremos aplicaciones a la web y aprenderemos a configurar una página .com o cualquier otro tipo de dominio.

SQL y modelado de bases de datos

Estudiaremos lo necesario para a manejar y entender las bases de datos y su funcionamiento en Rails, como se realizan las consultas y como se optimizan.

Back-End con Rails

Aprenderemos a construir aplicaciones web con bases de datos y autenticación de usuarios, con controles de acceso y con sistemas de pago.

Deployment avanzado con Amazon y VPS

Finalmente aprenderemos a subir nuestra aplicación a entornos enterprise como Amazon o un VPS y configuraremos nuestros propios servidores ocupando NginX.

Sección I: Front-end con Rails En esta sección estudiaremos todo lo referente a vistas o layouts.

3) Instalando las herramientas Objetivos 1. Instalar la herramientas necesarias para trabajar con Ruby on Rails 2. Conocer las ventajas de RVM

OSX Utilizando la versión de Ruby que viene instalada de fábrica instalaremos Homebrew, un administrador de paquetes para OSX. Para eso abriremos la terminal y pegaremos lo siguiente:

1

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master

Linux No es necesario instalar ningún administrador de paquetes, la mayoría de las distribuciones viene con alguno incluido. Por ejemplo Ubuntu ocupa apt-get.

En Linux y OSX Ahora instalaremos RVM, un programa que nos permite tener diversas

versiones

de

Ruby

instaladas

y

actualizarlas

sin

problemas. Existen otros como Rbenv y chruby, las diferencias son menores y sólo afectarán en la última parte de deployment así que para uniformar el proceso recomendamos a todos instalar RVM.

Correr este comando sólo en OSX

1

brew install rvm

Correr este comando sólo en Linux

1

apt-get install rvm

Es importante leer siempre los logs de la instalación para asegurarnos que haya terminado exitosamente y estar atentos a poner los comandos que nos pida en caso de requerirlos.

Una vez que hemos instalado RVM y leído todos los logs (para asegurarnos de que todo se instaló correctamente), reiniciaremos la terminal para instalar la última versión de Ruby:

1

rvm install 2.3.1

Esta instalación puede demorar ya que necesita compilar los binarios de Ruby. Una vez terminado el proceso debemos verificar qué es lo que se instaló y lo haremos con el comando:

1

rvm list

Eso nos mostrará todas las versiones de Ruby instaladas con RVM, de las cuales podemos escoger una con:

1

rvm use 2.3.1

Si queremos establecer nuestra versión por defecto lo haremos con:

1

rvm --default use 2.3.1

Para asegurarnos de estar sobre la versión correcta debemos correr el comando:

1

ruby -v

Finalmente instalaremos Rails con:

1

gem install rails -v 4.2.7

Las gemas que se instalarán dependiendo de la versión de Ruby, si cambiamos la versión tendremos que instalar todas las gemas nuevamente, incluyendo Rails.

Rails trabaja por defecto con SQLite y es más que suficiente para construir prototipos, pero queda corto a la hora de construir aplicaciones potentes. Durante el capítulo de Heroku veremos cómo instalar la gema de PostgreSQL.

Preguntas 1. ¿Qué es RVM? 2. ¿Cómo mostramos todas las versiones que tenemos instaladas de Ruby? 3. ¿Cómo cambiamos la versión de Ruby que estamos ocupando?

4. ¿Qué motor de base de datos utiliza Rails por defecto?

4) Estructura básica de un proyecto de Ruby on Rails Al crear un proyecto nuevo con Ruby on Rails se crearán las siguientes carpetas y archivos de forma automática.

Archivo

Para qué sirve

Gemfile

Administrar librerías dependencias del proyecto

Gemfile.lock

Muestra todas las dependencias, generado a partir del Gemfile

README.rdoc

Para documentar el proyecto

Rakefile

Crea tareas rake

app

Toda la aplicación, assets, vistas, controllers y modelos van dentro

bin

Contiene los binstubs, los cuales son wrappers sobre gemas ejecutables

config config.ru db

Directorio con archivos de configuración de Rails, los entornos y la base de datos Contiene la configuración de Rack Contiene la información de la base de datos, el archivo de sqlite3 y las migraciones

lib

Módulos para la aplicación

log

Registro de los errores

public

Assets públicos

test

Scripts para tests automatizados

tmp

Para archivos temporales necesarios durante la ejecución de Rails

vendor

Assets de terceros

Cada carpeta tiene una función específica y que iremos detallando a lo largo del libro.

5) Creando nuestra primera página web con Rails Objetivos 1. Aprender a crear un proyecto en Rails desde cero 2. Definir la página de inicio de un proyecto Rails 3. Conocer el lenguajes de templates erb 4. Crear accesos a nuevas páginas

Rails es un framework MVC, esto quiere decir que divide la información a lo largo de 3 capas principales: el modelo, la vista y el controlador.

En este capítulo abordaremos los componentes de vista y controlador, para lograrlo crearemos una página estática con Ruby on Rails.

Para empezar crearemos desde el terminal nuestro primer proyecto: una página estática sobre Rails.

1

rails new landing1

Luego entraremos a la carpeta del proyecto desde el terminal y corremos el servidor.

1 2

cd landing1 rails s

Si entramos a la carpeta landing1, encontraremos la estructura de archivos y directorios que estudiamos en el capítulo anterior.

Antes de seguir avanzando, verificaremos que todo funcione: abriremos el navegador y entramos a la página localhost:3000

Consola secuestrada. Mientras esté corriendo el servidor en la consola, esta estará secuestrada.

Esto quiere decir que no la podemos seguir utilizando para lanzar comandos y por lo tanto tenemos que abrir un nuevo tab para seguir trabajando.

Para terminar el servidor -o sea cerrarlo- sin cerrar el tab podemos utilizar ctrl + c . Eso terminará el programa devolviéndonos el control para ejecutar otros comandos.

Creando nuestra primera página Introducción a controllers

Si bien hemos creado un nuevo proyecto en Rails, aun no hemos agregado ninguna página. Es por eso que a continuación vamos a crear

un

controller

y,

aunque

no

lo

hemos

descrito

completamente, por ahora solo nos interesará entenderlo como un grupo de páginas.

Por ejemplo; si creamos el controller grupo1, nuestras páginas serían:

localhost:3000/grupo1/inicio localhost:3000/grupo1/formulario

Tanto los controllers como los modelos y vistas (los cuales veremos después) se pueden crear manualmente o con el generador de Rails.

Para crear un controller con el generador tenemos que escribir:

1

rails g controller nombre_grupo pag1 pag2 pag3 ...

Por ejemplo si queremos crear únicamente la página inicial (index), lo hacemos de la siguiente forma:

1

rails g controller pages index

Es convención de Rails que los controller siempre tengan un nombre plural y, a su vez, tiene sentido pensando que son un grupo de páginas.

Obtendremos como resultado en el mismo terminal:

1 2

create route

app/controllers/pages_controller.rb get 'pages/index'

3 4 5 6 7 8 9 10 11 12 13 14 15

invoke create create invoke create invoke create invoke invoke invoke create invoke create

erb app/views/pages app/views/pages/index.html.erb test_unit test/controllers/pages_controller_test.rb helper app/helpers/pages_helper.rb test_unit assets coffee app/assets/javascripts/pages.coffee scss app/assets/stylesheets/pages.scss

Esto nos muestra todos los archivos creados y modificados, pero por

ahora

nos

interesan

sólo

route get 'pages/index'

dos:

el

archivo

de

rutas

y la línea donde se crea la vista

app/views/pages/index.html.erb

Antes de proceder a explicar las vistas y el archivo de rutas, veamos lo creado. Para poder hacerlo accederemos a la página creada

a

través

de

http://localhost:3000/pages/index

la

URL:

Esto sólo funcionará si el servidor está corriendo y si además no hay errores en el código.

Errores de novato 1) No tener el server corriendo

Revisar rails s

2) No haber cargado el server en la carpeta correcta

Volver a la terminal ver donde está corriendo el server

3) Haber creado el controller con nombre en singular

Podemos

destruir

el

controller

con

rails destroy controller page

Introducción a las vistas Actualmente sólo tenemos un título y un párrafo pero aquí es donde podemos empezar a agregar nuestro contenido.

Para

eso

podemos

abrir

app/views/pages/index.html.erb

el

archivo

y modificar el HTML,

incluso podemos escribir Ruby, esto lo podemos hacer gracias al lenguaje de template de Ruby llamado erb, por eso el formato del archivo es .html.erb

Para escribir Ruby tenemos que hacerlo dentro de las expresiones en o . La primera expresión se ocupa para mostrar el contenido, el segundo sirve para evaluar, miremos los siguientes ejemplos:

1 2 3



Esto mostraría dentro del navegador 2 2 ; la primera expresión no se muestre porque no incluye el signo igual = , por lo tanto el primer dos correspondiente al valor de a ( a = 2 ) y el segundo 2 corresponde al valor de b ( b = 2 ).

¿Esto quiere decir que podemos enviar Ruby al navegador del cliente?

No, todo el contenido del archivo será transformado a HTML por Rails antes ser enviado. Esto es necesario porque los navegadores no son capaces de procesar el lenguaje Ruby, por lo que jamás entendería lo que se le envía. Por otro lado sería peligroso, porque personas con malas intenciones podrían estudiar tu código e intentar algo deshonesto.

¿Cómo convertir esta página en la página principal? Si

con

nuestro

navegador

entramos

a

la

dirección

localhost:3000 y vemos el aviso de Rails, es porque aun no hemos configurado en nuestra aplicación la página principal y Rails no sabe qué debe mostrar. Para eso tenemos que modificar el archivo

routes.rb,

el

encargado

de

manejar

todos

los

enrutamientos.

Dentro del archivo

config/routes.rb

encontraremos una

línea comentada que dice:

1

# root 'welcome#index

Esta línea es un recordatorio de Rails que nos dice cómo podemos definir una página inicial. Para utilizarla vamos a descomentarla

(remover el ‘#’) y luego apuntar al controller y la página respectiva, o sea en nuestro caso debería decir:

1

# root 'pages#index'

Si ahora entramos a

localhost:3000

veremos la misma

página.

Creando nuestra segunda página Ya no podemos ocupar le generador de controllers puesto que ya tenemos el controller generado y no queremos sobreescribir los archivos.

Una solución sería crear un segundo controller pero no es necesario crear un controller por página.

Para crear una segunda página vamos a:

1. Crear una ruta a la página. 2. Crear un método en el controller. 3. Crear la vista. 4. Agregar el link a la página nueva. (esta parte no es estrictamente necesaria),

Para nuestra prueba vamos a crear la página about (nosotros).

Creando la ruta Para agregar la ruta nueva debemos abrir el mismo archivo de rutas que abrimos anteriormente

config/routes.rb

dentro

de él agregaremos get y la ruta a nuestra nueva página (about) Se debería ver así:

1 2 3 4 5

Rails.application.routes.draw do get 'pages/index' get 'pages/about' root 'pages#index' end

Existe un comando que nos permite verificar las rutas creadas, este comando se llama rake routes y lo tenemos que correr dentro de la carpeta del proyecto, en alguna terminal que no esté secuestrada.

Al realizar rake routes, obtendremos:

1 2 3 4

Prefix pages_index pages_about root

Verb GET GET GET

URI Pattern /pages/index(.:format) /pages/about(.:format) /

Controller#Action pages#index pages#about pages#index

Más adelante, en este libro, analizaremos en profundidad esta información, pero por ahora sabemos que es correcta porque se incluyó dentro de la columna llamada URI Patten la página /pages/about , y con esto terminamos el paso de agregar la ruta.

Si nos hubiésemos saltado este paso (o comentamos el get ‘pages/about’ que pusimos en el archivo config/routes.rb ) e intentamos entrar a la página obtendríamos este error:

Cada vez que tengamos un error de rutas, sabemos que el archivo culpable es routes.rb.

Ahora; si intentamos saltarnos el paso 2 y entramos directamente a

la

página

siguiente error.

localhost:3000/pages/about ,

veremos

el

The action ‘about’ could not be found for PagesController

O sea nos falta la acción.

Creando un método en el controller Anteriormente habíamos hablado del controller, pero asumimos que funcionaba de forma mágica, ahora vamos a tener que modificarlo para agregar una página nueva, para eso abriremos el archivo app/controllers/pages_controller en el editor, y veremos:

1 2 3

class PagesController < ApplicationController def index end

PagesController

es

un

controller

que

hereda

de

ApplicationController, dentro de él cada método llama a su respectiva vista, pero lo hace de forma implícita. Esta vista se encuentra dentro de views/pages/index.html.erb .

Si ya tenemos una ruta para about el paso siguiente es agregar un método (que es lo mismo que una acción) dentro del controlador:

1 2

def about end

Creando la vista. Con la ruta y el método del controller creado ahora procederemos a crear el archivo views/pages/about.html.erb y dentro de él podemos agregar lo que queramos.

Finalmente podemos acceder a la página nueva si entramos localhost:3000/pages/about

Agregando un link a una página interna Rails crea variables para todas nuestras páginas internas, para poder ver como se llaman esas variables tenemos que ocupar rake routes

1 2 3 4

Prefix pages_index pages_about root

Verb GET GET GET

URI Pattern /pages/index(.:format) /pages/about(.:format) /

Controller#Action pages#index pages#about pages#index

La columna que dice prefix son los nombres de la variable, bueno casi, es un prefijo porque hay dos: aquellas que terminan en path y contienen la ruta relativa, y aquellas que terminan en url que contienen la ruta absoluta.

Si queremos ver el link tenemos que recordar que la variable está en Ruby, así que tenemos que imprimirla en la vista ocupando la zanahoria

Se debe tener cuidado con un par de cosas; la imagen tiene que

existir dentro de la carpeta /app/assets/images/ y además se debe tener mucho cuidado con la sintaxis del asset_path, porque no debe quedar ningún espacio en blanco entre el inicio o el cierre de la zanahoria () y la comilla correspondiente. Esto último es con la finalidad de evitar dejar espacios vacíos en el nombre del archivo que no forman parte del nombre.

El método image_tag Hay una forma más breve de incluir imágenes, pero no aplica a los otros assets, y esta es ocupando el método image_tag.

Para incorporar la misma foto que incorporamos previamente sería con:

image_tag además puede recibir otros parámetros como el id o la clase.

Una ventaja de ocupar image_tag es que automáticamente genera un atributo alt utilizando el nombre del archivo.

Es necesario aclarar que, para que cualquiera de estas dos soluciones funcione, tenemos que estar ocupando la extensión erb; o sea nuestro archivo debe ser .html.erb (por defecto en Ruby).

7) Nuestra primera página con layout Objetivos 1. Aprender a utilizar la página maestra 2. Profundizar en el concepto de asset_path 3. Descubrir como manejar diversos CSS y javascript en una aplicación Rails 4. Entender el proceso de precompilación de assets 5. Aprender a reutilizar código con las vistas parciales 6. Saber cambiar el layout de los controllers y métodos

El Layout Si observamos detenidamente las vistas nos daremos cuenta que no están completas; no tienen la estructura típica de un documento HTML y, si es así, ¿de adonde sale el título de la página?

Dentro de la carpeta views existe una subcarpeta llamada layouts, estas son las páginas maestras. Es posible tener varias pero por defecto es una sola y esta se llama application.html.erb

Si modificamos el layout cambiaremos todas las otras vistas simultáneamente, probemos que esto sea cierto. Al abrir el layout veremos lo siguiente:

1 2 3



4 5 6 7 8 9 10 11 12 13 14

Basic true %> true %>





En esta página maestra podemos definir el contenido y estilo que queramos, compartir a lo largo de todas las páginas de nuestra aplicación o solo utilizarla con algunas.

Para verificar que sea cierto vamos agregar el siguiente texto antes de la instrucción yield:

1 2

HOLA !!! Modificando el layout

Y luego, si abrimos las páginas, veremos que en ambas dice el texto.

Por otro lado ¿Cómo cambiamos el estilo de nuestro sitio? Para eso tenemos que agregar CSS.

Incorporando CSS

Los archivos CSS son fáciles de incorporar, simplemente debes colocarlo dentro de la carpeta

apps/assets/stylesheets .

Todos los archivos presentes en esa carpeta se cargarán en cada página gracias a que en nuestro layout viene incorporada la siguiente línea.

1 2

true %>

Esa

línea

lo

que

hace

es

cargar

el

archivo

app/assets/stylesheets/application.css el cual además de un par de comentarios contiene:

1 2 3 4

/* *= require_tree . *= require_self */

En primer lugar hay que aclarar que estas líneas están comentadas al estilo CSS para evitar que la página web las cargue, puesto que require

no es un instrucción de CSS válida, pero en este

archivo si puede haber CSS.

Cabe destacar que este archivo recibe el nombre de manifiesto y cada una de las líneas require dentro recibe el nombre de directivas.

Lo siguiente que vemos es require_tree, esta es la línea responsable de cargar recursivamente, tanto directorios como subdirectorios, todos los CSS dentro de esta carpeta.

En este archivo el orden de carga importa y si fuera necesario establecer un orden de carga este se puede especificar en este

mismo archivo a través de la instrucción require y nombrando los css, por ejemplo:

1 2 3 4 5 6 7

/* *= *= *= *= *= */

… require reset require layout require chrome require_tree . require_self

Mientras que require_self carga el CSS (si es que hay contenido) del archivo application.css en la posición mencionada. En el ejemplo; primero se cargaría el archivo reset, luego layout y luego chrome. A continuación cargaría -a través de require_tree . todos los otros archivos que existan dentro de la carpeta CSS y finalmente el código dentro de este archivo application.css en el caso de que hubiese.

Para probarlo vamos a definir un CSS sencillo, al que vamos a llamar

style.css

y

debe

estar

dentro

de

la

carpeta

app/assets/css .

1 2 3 4 5 6 7

body{ background-color:#ddd; font-color:#333; width:80%; margin:20px auto; font-family: 'helvetica'; }

Si ahora cargamos nuestra página veremos que el fondo es gris, los márgenes y que la tipografía cargó.

La librería encargada de procesar estas directivas y convertir todos los CSS (y otros assets) en un único archivo recibe el nombre de Sprockets

Incorporando Javascript Con respecto a este punto no nos extenderemos puesto que funciona exactamente igual que los CSS, la diferencia es que la línea que carga todos los js dentro del layout es:

1

true %>

El

archivo

cargado

por

app/assets/javascript/application.js

defecto

es

y funciona de la

misma forma que application.css. Dentro del archivo se encuentra lo siguiente:

1 2 3 4

//= //= //= //=

require jquery require jquery_ujs require turbolinks require_tree .

O sea Rails incluye las librerías de jQuery, jQuery_ujs -que sirve para trabajar con javascript no intrusivo- y turbolinks, del cual hablaremos más adelante.

Incorporando imágenes (u otros assets) dentro del CSS y del JS Los assets incorporados dentro de los archivos CSS están sujetos a las mismas condiciones que los que ya hemos visto, pero para poder ocupar el método asset_path dentro de estos necesitamos que estos archivos además contengan la extensión .erb.

Por ejemplo: si tenemos un archivo style.css el cual pone una imagen como background de fondo, entonces debemos nombrarlo

style.css.erb y luego dentro de la url(fondo1.png) cambiarlo por:

1

url('')

Es muy importante que nos fijemos bien en la sintaxis de nuestro archivo CSS. Si bien CSS es tolerante a fallas debido al principio de graceful degradation, la precompilación de archivos CSS no es tan tolerante y un punto y coma sobrante causará problemas a la hora de enviar nuestro proyecto a producción.

¿Qué es la precompilación de assets? La precompilación de assets es un proceso por el cual los assets son preparados para producción.

1. Preprocesador Transforma los lenguajes a su forma compartible, por ejemplo los archivos coffescript se convierten en javascript, los archivos SASS se convierte en CSS. 2. Concatenador Todos los CSS se juntan en un solo archivo final, todos los JS se juntan en un archivo final, esto reduce el número de requests hechos al servidor traduciéndose en una página más rápida.

1. Minificador

Cuando al CSS final y al JS final se le remueven todos los caracteres innecesarios, como por ejemplo los saltos de líneas y los espacios, se traduce en archivos de menor peso y por lo mismo páginas más rápidas. 2. Fingerprint Consiste en agregar una secuencia de números para convertir el nombre de un asset en un nombre único y realizar de forma más sencilla el caching de los assets.

El entorno En Ruby on Rails existen distintos entornos de funcionamiento, pero por defecto son tres; desarrollo, testing y producción. En algunas ocasiones es útil agregar un 4º llamado staging.

La razón por la que existen diversos entornos es porque tienen distintos

funcionamientos,

cuando

trabajamos

en

nuestro

computador queremos ver los errores con el mayor detalle posible, pero cuando nuestra aplicación está online y la está ocupando una persona externa y sucede algún error queremos estar seguros de que no expondremos una falla de seguridad de nuestro sistema y por lo mismo en Rails se esconden los errores en modo de producción.

El modo testing sirve para correr pruebas, lo ocuparemos más adelante en este libro.

El modo staging se agrega cuando se quiere un paso previo a producción (a veces con clientes reales o a veces solo homologando el ambiente para prueba) y prevenir errores inesperados al dar el paso a producción.

Cuando uno trabaja en el entorno de desarrollo no se realizan todos los procesos de precompilación de assets, sólo se realiza el preprocesado para poder utilizar sass y

coffeescript, el resto de los procesos sólo se procesan cuando

pasamos

al

entorno

de

producción

o

si

modificamos nuestro entorno de desarrollo para que lo haga.

Los archivos donde se especifica esta configuración se encuentran en

config/enviromments , estos archivos también permiten

modificar otros comportamientos como por ejemplo si se deben mostrar los errores.

Podemos correr Rails en modo de producción dentro de nuestro computador cargando el server con el parámetro -e production

1

rails s -e production

Pero esto nos generará conflictos ya que todavía no tenemos configurado algunos archivos, así que el intentar cargar la página obtendremos el siguiente error.

1

Missing `secret_token` and `secret_key_base` for 'production' environment, set these val

En el capítulo de Heroku como en los últimos capítulos de este libro hablaremos con más detalle del paso a producción.

La carpeta assets de vendor Rails trae tres carpetas de assets incluidas en el asset_path, hasta el momento sólo hemos mencionado la que se encuentra dentro de app, pero dentro de la carpeta vendor y dentro de la carpeta lib también es posible agregar assets.

La idea es que la carpeta

app/assets

contenga los assets

específicos del proyecto, la carpeta vendor contenga los assets de librerías de terceros (como por ejemplo los de Bootstrap) y finalmente la carpeta lib para otros casos.

Cuando colocamos los assets en otras carpetas el require_tree no es suficiente para cargarlos, ya que este tree se refiere al de app/assets/stylesheets . Entonces, para que los archivos se puedan ser utilizados, se deberá agregar la carpeta al asset_path.

Agregando una carpeta nueva al asset_path Es posible agregar nuevas carpetas al asset_path modificando el archivo /config/initializers/assets.rb

1

Rails.application.config.assets.paths

En ese caso si cargamos el método landing dentro de pages obtendremos:

1

Queda un paso que en teoría es sencillo, ahora cada CSS que sea específico a una grupo de página debe tener junto a cada marca un .nombre-controller y cada CSS específico a una sola página debe empezar con un .nombre-controller .nombre-acción

Incorporando Bootstrap. Hay varias formas de incorporar Bootstrap, la primera y más sencilla es ocupar el CDN.

CDN El CDN consiste en 2 CSS, uno el base, y el otro el tema junto con los JS para alguna de las funcionalidades.

Estos debemos copiarlos dentro de nuestra página maestra en views/layouts/application.html.erb

1 2 3 4 5 6 7 8