• Author / Uploaded
• Joao Corvacho

• Categories
• Ruby on Rails
• Marco de software
• Archivo de computadora
• Hojas de estilo en cascada
• Comillas

Citation preview

Versión 0.583

1) Temario: 1) Temario: 2) Motivación ¿Qué es Rails? ¿Por qué utilizar ruby on rails para mi aplicación? Deventajas de utilizar Ruby on Rails ¿Cómo está estructurado este libro? Sección I 3) Instalando las herramientas OSX Linux En Linux y OSX 4) Estructura de un proyecto en rails 5) Creando nuestra primera página web con rails Consola secuestrada. Creando nuestra primera página Introducción a controllers Errores de novato Introducción a las vistas Cómo convertir esta página en la página principal Creando nuestra segunda página Creando la ruta Creando un método en el controller Creando la vista. Agregando un link a una página interna 6) Agregando imágenes a nuestra primera página Los Assets El asset path Incorporando imágenes El método asset_path El método image_tag 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 ¿Qué es la precompilación de assets? El entorno La carpeta assets de vendor Agregando una carpeta nueva al asset_path Verificando el asset_path Incorporando tipografías locales Consecuencias de Sprockets Incorporando bootstrap. CDN Descargando los CSS Glyphicons Vistas parciales Cargando el navbar de bootstrap como una vista parcial Cargando un layout distinto Desafío 8) Creando un formulario de registro El tag form Revisando los parámetros enviados Guardando los datos Creando el primer modelo Corriendo las migraciones Rails console Creando un usuario Leyendo los usuarios desde la base de 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

MVC in a nutshell Form y action El método form_tag Mostrando los resultados del formulario Guardando los resultados Redirect_to Variables flashs Mostrando todos los usuarios en la base de datos Desafío 10) El gemfile Sección II 11) Deployment en Heroku Tipos de hosting Servidor propio Hosting clásico VPS PAAS Instalando el Toolbelt de heroku Claves SSH Repositiorio GIT Configurando GIT Creando el repositorio git Subiendo la aplicación a Heroku Creando el proyecto en heroku Setup del proyecto para deployment Subiendo los cambios a producción Razones por las que el paso de deployment puede fallar Revisando errores Sobre la precompilación de assets Migrando la base de datos de producción Cambiando el nombre de la aplicación en Heroku Desafío 12) Configurando el dominio (o subdominio) Configurando dominios cuyas autoridades no soportan redireccionamiento tipo CName Tips de mantención

Entrar a la consola del proyecto en producción Ver los últimos logs Dejar una consola con los logs corriendo Descargando la base de datos de heroku Desafio Sección III 13) SQL PostgreSQL Instalando PostgreSQL en OSX Instalando PostgreSQL en Linux Entrando a PSQL Insensible a las mayúsculas Creando usuarios Cambiando la clave Dando acceso de superusuario Listando a todos los usuarios creados en la base de datos. Creando una base de datos Listando una base de datos. Botando una base de datos Conectándose a una base de datos Manejo de tablas Introducción a tipos de datos. Creando una tabla Manipulando valores de una tabla Insertando valores Leyendo valores de una tabla. Actualizando valores de una tabla Borrando datos de una tabla Modificando una tabla Agregando una columna Removiendo una columna Constraints Evitando valores nulos El constraint Unique La clave primaria

Creando una tabla con primary key Ordenando los resultados. Mostrando los resultados ordenados por edad Mostrando los resultados ordenados por nombre alfabéticamente pero en reverso. Limitando la cantidad de resultados Conteo Select distinct Distinct y count Guía de ejercicios Peliculas CRUDS Sorting Conteo Productos 14) SQL con más de una tabla Integridad referencial Ambiguedad en los nombres Joins Tipos de joins Left Outer Join Right Outer Join Full Outer Join Tipos de relaciones Relaciones de uno a uno Relaciones de 1 a n Relaciones de n a n La clave foránea Ejercicios Shopping movieDB Relaciones n a n Exportando datos 14) Modelando con SQL

Modelando un blog Ejercicio Modelando Tinder Ejercicios de diagrama Ejercicios de SQL Modelando un carro de compras Ejercicio Sección IV: Backend 15) Rails con PSQL Instalando postgre en un proyecto existente Creando un proyecto con postgreSQL El error de socket 16) Los modelos en rails Los modelos como mapas a los objetos (ORM) Creando modelos Convención de nombres Creando un modelo vacío Creando un modelo con diversos campos Migraciones El archivo schema.rb Creando migraciones. Agregar una columna Remover una columna Generadores mágicos Revirtiendo una migraciones Enmendando un error. Cuidado con los branches Botón de autodestrucción Destruir un modelo Agregando un campo extra. Con helper Sin helper Correr las migraciones Revisar las migración generada Probar un modelo

Creando una FK con índice. Getters y setters El archivo seed Atributos virtuales Ejercicio 17) 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 18) Relaciones entre modelos Relaciones 1 a 1 Borrando una relación en cascada. Graficando las relaciones Relaciones de 1 a n El método build Múltiples relaciones de 1 a n Has many :through Relaciones n a n 19) Testing unitario de modelos Los fixtures Estructura de un test de modelo Formas de escribir un test El método assert Corriendo tests Cargando los fixtures en los tests 20) Creando un Blog Construyendo el modelo Construyendo los tests Test para modelo sin campo presente Test para modelo con campo único

Test para probar la relación Test de pertenencia Test para diferencias de tiempo Desafios 21) MVC Arquitectura REST Scaffold Strong parameters Nota sobre las migraciones Probando los strong params 22) El archivo de rutas a fondo Introducción al archivo de rutas El archivo routes.rb Rake routes Rutas sin parámetros Ruta con controller Rake routes a fondo Prefix: El prefijo Verb, el verbo URI pattern URI Controller#Action El archivo routes a fondo ruta sin controller Cambiando el prefijo Crear una ruta con un parámetro Rutas anidadas Crear una ruta que recibe dos parámetro Query strings Resources member vs collection member Collection 23) Rutas anidadadas 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 Manejando el redireccionamiento del create. 22) Relaciones n a n Implementando relaciones has_and_belongs_to_many Borrando la asociación: Testeando la relación Implementando relaciones con has_many :through Has_many through vs Has_and_belongs_to_many Ejercicio practico de uso 24) 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 25) 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 26) Devise avanzado Agregando el rol de usuario Agregando el campo Enums al rescate Testeando los accesos Códigos completos:

Tests Pages Controller Fixture de usuario Generando los controllers de devise Cambiando la página despues 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 27) Autorización con CanCanCan ¿Cuándo no utilizar CanCanCan? Instalando CanCanCan El árbol de habilidades Revisión de habilidades Bloqueo Manejo de conexiones no autorizadas Testeando las habilidades Habilidades basadas en la propiedad Habilidades en recursos anidados 28) Polimorfismo 29) Subiendo archivos con carrirewave Instalando carrierwave Generando el uploader Probando desde rails console. Creando una formulario con archivos 30) Amazon S3 Configuración para la gema de carrierwave-aws IAM Agregando las claves de entorno a heroku 31) Optimización n+1 queries en ruby on rails ¿Cuándo ocurre el problema de n+1 queries ? 32) Javascript, jQuery y Turbolinks Como organizar nuestro javascript:

Turbolinks Ejemplos de uso 33) Manejo de gráficos Haciendo los queries Generando los gráficos 34) Fullcalendar Agregando el plugin Cargando el fullcalendar 35) Envió de correos con Action Mailer Intro Creando nuestro mailer Modificando el mailer y como probarlo Crear un método para dar la bienvenida a quien se registra en nuestra pagina Enviando el correo usando ActionMailer y Gmail ActionMailer y Devise Primera Opción: creando el controlador de devise para el usuario Segunda Opción: modificando el modelo de usuario ActionMailer y ActiveJob: deliver_now, deliver_later? ActiveJob y deliver_later 36) Testings automatizado con Guard Instalar Guard en nuestro proyecto Configurar Guard Configurar Minitest-Reporters Correr Guard para automatizar el testing 37) 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 Invalid Locale Warning 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 Ahora que tenemos el servidor preparado podemos instalar Nginx con Passenger: Paso 4 – Habilitando Passenger en Nginx Paso 5 – Instalación y configuración de Postgres. Instalación Creación de un usuario en postgres Creación de la base de datos Paso 6 – Crear un Server Block Paso 7 – Ultimos detalles Extras 38) Deployment con Capistrano. Introducción Acerca de esta guía. Convenciones. 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 Añadir la llave en Github Añadir la llave en Bitbucket Paso 5 – Deploy! Cómo se hace? y qué hace? Ahora que sabemos cómo y qué hace Capistrano haremos un deploy de nuestra app

2) Motivación ¿Qué es 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 4.2 Rails no es lo mismo que Ruby, Ruby es un lenguaje de programación orientado objetos y Rails es un conjunto de herramientas construídas en Ruby para la construcció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 traer un conjunto de herramientas permite construir aplicaciones complejas y escalarlas a niveles enterprise con equipos de programación relativamente pequeños. Por otro lado también es sorprendemente 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 dejarlo subido en internet en sólo un par de horas.

Deventajas 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 a empezado a reconocer las ventajas de ruby on rails y ha empezado a migrar a este maravilloso framework. Otro aspecto a considerar es la curva de aprendizaje de este framework que es bastante dura. Ruby on Rails tiene muchas componentes que vamos a dicutir a lo largo de este libro y muchas cosas dan la impresión de funcionan solas y por arte de magia y es por eso que es difícil de aprender pero muy poderoso cuando se le domina. Finalmente está el tema del rendimiento, Ruby on Rails es un framework con muchas componentes por lo mismo tiene un gran footprint, o sea que es pesado, y eso conlleva a que se necesitan servidores más potentes para atender la misma cantidad de usuarios, por otro lado es bastante más sencillo construir aplicaciones que en otros framework.

Tanto Ruby como Ruby on Rails están pensandos 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 es una guía práctica de aprendizaje y en segundo contiene 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: Donde aprenderemos 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 con heroku: Donde aprenderemos a subir 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 Donde aprenderemos a manejar bases de datos en la suficiente medida para entender como funciona Rails, como realiza las consultas y como optimizarlas. Back-end con Rails Donde aprenderemos a construir aplicaciones web con bases de datos y autenticación de usaurios con controles de acceso y sistemas de pago. Deployment con Amazon y VPS Finalmente aprenderemos como subir nuestra aplicación a entornos enterprise como Amazon y VPS y configurar nuestros propios servidores ocupando NginX.

Sección I Front-end No todo lo que brilla es oro

3) Instalando las herramientas OSX Uitlizando 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

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

Linux No es necesario instalar ningún administrador de paquetes, al mayoría de las distribuciones viene con alguno incluído, ubuntu ocupa apt-get

En Linux y OSX Ahora instalaremos RVM, un programa que nos permite tener instalada diversas versiones de ruby y actualizarlo sin dolor, 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 o poner los comandos que nos pida en caso de que no. Con RVM instalado y los logs leídos (y asegurado de que todo terminó OK) ahora hay que reiniciar la terminal, luego podremos correr:

1

rvm install 2.2.3

Nuevamente esperaremos que termine de correr, esto puede demorar ya que necesita compilar los binarios de ruby. Una vez terminado el proceso debemos verificar que quedó instalado, esto lo podemos hacer con el comando:

1

rvm list

Eso nos muestra todas las versiones de ruby instaladas con RVM, de las cuales podemos escoger una con:

1

rvm use 2.2.3

O podemos establecer nuestra versión por defecto con:

1

rvm --default use 2.2.3

Para asegurarnos que estamos sobre la versión correcta debemos correr el comando:

1

ruby -v

Finalmente instalaremos rails con:

1

gem install rails

Las gemas que se instalan dependen de la versión de ruby, si cambiamos la versión tendremos que instalar rails nuevamente. Rails trabaja por defecto con SQLite es cuál es suficiente para construir prototipos pero queda corto a la hora de construir aplicaciones potentes, durante el capítulo de Heroku veremos como 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 que estamos ocupando de ruby? 4. ¿Con que motor de base de datos trabaja rails por defecto?

4) Estructura de un proyecto en rails Archivo

Para qué sirve

Gemfile

Administrar librerías depencias del proyecto

Gemfile.lock

Muestra todas las dependencias, generado a partir del Gemfile

README.rdoc

Para documentar el proyecto

Rakefile

Para crear 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

Directorio con archivos de configuración de rails, los entornos y la base de datos

config.ru

Contiene la configuración de Rack

db

Continee la información de la base de datos, el archivo de sqlite3 y las migraciones

lib

Modulos para la aplicación

log

Registro de los errores

public

Assets públicos

test

Scripts para tests automatizados

tmp

Para archivos temporales necearios durante la ejecución de rails

vendor

Assets de terceros

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 las componentes de vista y controlador creando una página estática con Ruby on Rails. Para empezar desde el terminal crearemos nuestro primer proyecto una simple página estática pero sobre rails.

1

rails new landing1

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

1 2

cd landing1 rails s

Para verificar 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 tab nuevo para poder seguir trabajando. Para terminar el servidor, o sea cerrarlo sin cerrar el tab podemos utilizar ctrl + c y eso terminará el programa devolviendonos el control para poder ejecutar comandos.

Creando nuestra primera página Introducción a controllers Para empezar con rails vamos a partir creando una página estática, para eso vamos a crear un controller que por ahora lo entenderemos 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 despúes) 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 hace sentido pensando en que son un grupo de páginas. Obtendremos como resultado en el mismo terminal:

create route invoke

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

create

app/views/pages

create

app/views/pages/index.html.erb

invoke create invoke

test_unit test/controllers/pages_controller_test.rb helper

create

app/helpers/pages_helper.rb

invoke

test_unit

invoke invoke create invoke create

assets coffee app/assets/javascripts/pages.coffee scss app/assets/stylesheets/pages.scss

Esto nos muestra todos los archivos creados y modificados, por ahora nos interesan sólo dos, el archivo de rutas route get 'pages/index' y la línea que dice donde se creó 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, podemos acceder a la página que creada a través de la URL: http://localhost:3000/pages/index

Esto sólo funcionará si el servidor está corriendo (hay una consola con rails s y si 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 pages

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 el archivo app/views/pages/index.html.erb 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 y , 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 el primer dos correspondiente al valor de 2, y el segundo al valor de b, pero la primera expresión no se muestre porque no incluye el signo igual =

¿Esto quiere decir que podemos enviar ruby al navegador del cliente? No, todo el contenido del archivo será transformado a HTML por rails antes de enviarlo, por lo que el navegador jamás ve nada relacionado con rails.

Cómo convertir esta página en la página principal

Si con nuestro navegador entramos a la dirección localhost:3000 veremos el aviso de rails, pero que pasa si queremos que la página que acabamos de crear sea la página principal, para eso tenemos que modificar el archivo config/routes.rb el cual es 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 como 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 gnerador de controllers puesto que ya tenemos el controller generado y no queremos sobreescribir los archivos. Una solución sería ccrear un segundo controller pero no es necesario crear un controller por página. Para crear una seguna página vamos a: 1. Crear una ruta a la pagína 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 necesesaria) 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 el agregaremos un get, sin los comentarios que vienen por defecto el archivo de rutas, este 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 en alguna terminal que no esté secuestrada dentro de la carpeta del proyecto. Al realizar rake routes, obtendremos:

Prefix Verb URI Pattern

Controller#Action

pages_index GET

/pages/index(.:format) pages#index

pages_about GET

/pages/about(.:format) pages#about

root GET

/

pages#index

Más adelante de este libro analizaremos más a fondo esta información, por ahora sabemos que es correcta porque se incluyó dentro del columna que dice URI Patten la página /pages/about , y con esto terminamos el paso de agregar la ruta de la página. Si nos hubiésemos saltado este paso, (o comentamos el get ‘pages/about’ que pusismos 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 entrar directamente a la página localhost:3000/pages/about veremos el siguiente error.

The action ‘about’ could not be found for PagesController O sea nos fala 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

El PagesController, es un controller que hereda de ApplicationController, dentro de el 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 Entonces si ya tenemos una ruta para about el paso siguiente es agregar un método (que es lo mismo que una cción) dentro de la clase:

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 el 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

Prefix Verb URI Pattern

Controller#Action

pages_index GET

/pages/index(.:format) pages#index

pages_about GET

/pages/about(.:format) pages#about

root GET

/

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 Hay que tener cuidado con un par de cosas, primero, la imagen si tiene que existir dentro de la carpeta /app/assets/images/, pero además debemos tener mucho cuidado con la sintaxis de asset_path, la zanahoria (), esta debe estar pegada a la primera comilla y el cierre de la zanahoria debe estar pegada a la segunda, esto para 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. Obviamente que para que cualquiera de estas 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 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, podemos tener varias pero por defecto es una sola y esta se llama application.html.erb Y si modificamos el layout modificaremos todas las otras vistas simultaneamente, 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 %>





Esta es la página maestra y en ella podemos definir el contenido y estilo que queramos compartir a lo

largo de todas las páginas de nuestra aplicación. Para probar que así 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

Entonces como 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 de ahí se cargaran en cada página gracias a que dentro de 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 cuál 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 dentro del archivo application.css en la posición mencionada, en el ejemplo, primero se cargaría el archivo reset, luego layout y luego chrome y finalmente todo el resto, si hubiese CSS dentro de este archivo application.css quedaría al final. Para probarlo vamos a definir un CSS sencillo, al que vamos a llamar style.css, y tiene que 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 ú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 defecto es app/assets/javascript/application.js 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 la librería de jQuery, y además, incluye la librería jquery_ujs que sirve para trabajar con javascript no intrusivo, además incluye 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. O sea 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 fallos debido al principio de graceful degradation, la precompilación de archivos CSS no es tan tolerante y un punto y coma sobrante causara 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. Preprocesadores Transforma los lenguajes a su forma compartible, por ejemplo los archivos coffescript se convierten en javascript, los archivos SASS se convierte en CSS. 2. Concatenados

Todos los CSS se juntan en un CSS final, todos los JS se juntan en un JS final, esto reduce el número de requests hechos al servidor traduciéndose en una página más rápida

3. Minificados Tanto al CSS final como al JS final se le remueven todos los caracteres innecesarios, como por ejemplo los saltos de líneas y los espacios, eso se traduce en archivos de menor peso y por lo mismo páginas más rápidas. 4. 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, 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 quremos 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 enconden 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 cargado 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.

Missing `secret_token` and `secret_key_base` for 'production' environment, set the se values in `config/secrets.yml`

En los capítulo de heroku tanto 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 incluídas 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 además tenemos que mencionarlos dentro del archivo, veremos un caso específico de esto en el ejemplo de bootstrap.

Agregando una carpeta nueva al asset_path Es posible agregar nuevas carpetas al asset_path ocupando 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

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 sóla página debe contener 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 nuesta página maestra en views/layouts/application.html.erb

1 2 3 4 5 6 7 8