Tutoriales 52

Construyendo una landing page en Ruby on Rails desde cero.

Este tutorial te enseñará a crear una landing page desde cero en rails, ojo que no se hablará de la parte de html o diseño, ahí puedes ocupar un template o hacerla a tu antojo, este tutorial te explica específicamente como crear el formulario de registro y si continúas con las segunda parte, te enseñará a publicar tu aplicación.

Si aún no tienes instalado Ruby on Rails lo puedes con esta guía paso a paso: InstalarRails.com/

Pase 0: Setup

Vamos a construir una aplicación de rails desde cero, para esto primero debes entrar al terminal y escribir lo siguiente: (signo $> simboliza que estamos en el bash, no hay que tipearlo)

$> rails new superLanding

Dentro del proyecto vamos a hacer un scaffold para guardar los leads, recordar que el nombre de los modelos (o recursos) va en singular

$> rails generate scaffold lead name:string email:string

Finalmente para tener el setup inicial nos falta migrar la base de datos

$> rake db:migrate

Paso 1: Página de inicio

Dentro de un scaffold se generan al menos 7 métodos acorde a la estructura REST, pero nosotros no necesitamos todo eso, de hecho sólo nos interesan 2 métodos, el formulario para que los usuarios se registren (en la misma página va estar todo el landing page) y el método para guardar los datos del formulario.

De todos los métodos generados por el scaffold el que tiene más sentido ocupar es el de new, pues ese muestra un formulario para crear datos, y con eso la parte más complicada de nuestra aplicación ya estaría lista.

Para cambar la página de inicio vamos al archivo config/routes.rb y agregamos:

root 'leads#new'

Paso 2: Redirección después de enviar el formulario

Pero todavía nos falta corregir algo, al hacer click en el botón del formulario se carga el método create, por lo tanto tenemos que revisar el método create de Leads Controller y vemos que después de guardar este nos redirige a @lead que es el equivalente a Leads#show

Lo que tenemos que hacer es redirigirlo a la página donde estábamos antes,o sea cambiar.

redirect_to @lead

por

redirect_to new_lead_path

además podemos cambiar el mensaje por uno a nuestro gusto.

Paso 3: Mostrando el mensaje de “Te has registrado”

Para esto tenemos que agregar a la vista leads/new la noticia flash. lo lógico es agregarla al principio del archivo pero eso depende del diseño del sitio.

<p id="notice"><%= notice %></p>

Paso 4: Bloqueando acceso a la lista de todos los leads.

Dentro del archivo routes, vamos a cambiar la línea que dice resource leads por:

resources :leads, only: [:new, :create]

Con eso evitamos que el usuario tenga acceso a ver o borrar leads.

Paso 5: Recuperando los leads

Finalmente si queremos recuperar un listado de todos los emails lo podemos hacer ocupando la gema activeadmin o en rails console ocupando:

Lead.all.collect{|user| [user.name, user.email]}

Si te interesa publicar de forma fácil tu aplicación en heroku, puedes hacerlo con este tutorial. Si quieres aprender más de manera presencial como crear aplicaciones web de alto nivel puedes tomar uno de nuestros talleres o además puedes ver la opción de Desafío Latam en donde podrás convertirte en un desarrollador Full-Stack.

Share
February 11, 2016 Ruby, Tutoriales, , ,

Friendly URL en Rails

Friendly URL

Una URL Amistosa o friendly url (en inglés), es una dirección que en lugar de tener números y cientos de símbolos raros contenga un titulo o un tag, o sea en lugar de:

http://www.desafiolatam.com/blog/20/

obtienes:

 http://www.desafiolatam.com/blog/articulo-genial-sobre-programacion/

y por qué esto es importante?

primero, para los humanos es más fácil leer y entender en que página están y lo que están viendo, o sea es human friendly, pero por otro lado, google (u otros indexadores) l utilizan el título de la página para determinar las palabras claves del sitio para calcular la relevancia, entonces al tener una url friendly mejoras el SEO de tu sitio, a esto se le denomina que el sitio sea SEO friendly.

Crear una friendly url en Ruby on Rails en 5 pasos

En este tutorial (repo en github) te explico como Crear una friendly url en Ruby on Rails en 5 pasos  a partir de un “slug” para tu aplicación en rails.

El concepto de Slug es un término que hace referencia al título de una noticia o artículo en el que se han sustituido los espacios en blanco por guiones y se han eliminado todos los caracteres que no sean letras o números.
Ahora que sabemos que es el slug, vamos al paso a paso para generar slug automáticamente para nuestros posts.

Ejemplo:
título de la noticia: ¿Cómo crear un Slug en Rais?
Slug: como-crear-un-slug-en-rails

1. Creando el Proyecto Blog.

Abres una Terminal y escribes:

$> rails new blog

Acceder a la carpeta “blog” desde el terminal:

$> cd blog
$> rails s

2. Creando el Scaffold: Post.

$> rails g scaffold post title:string description:text

Antes de este paso revisa siempre tu migración!. Luego ejecutamos en el terminal:

$> rake db:migrate

Cambiando el archivo Routes.rb

busca donde dice:

# root 'welcome#index'

Quita el signo # para descomentar y cámbialo por:

root 'posts#index'

3. Agregando una nueva columna “slug” a la tabla posts.

Como no queremos que el campo “slug” aparezca por pantalla ni tampoco como strong parameter, generamos una nueva migración al modelo de post:

 $> rails g migration addSlugToPost slug:string

Ejecutamos en otra terminal:

 $> rake db:migrate

el resultado debe ser el siguiente:

schema de post con slug

 4. Modificando el Modelo de Post (app/models/post.rb)

4.1. Definiendo Callbacks.

 #callbacks
 after_create :update_slug
 before_update :assign_slug

el primer callback es “after_create” el cual tendrá asociado un método llamado “update_slug” el cual se llama  inmediatamente “después de crear” un nuevo post.

el segundo callback es “before_update” el cual se llama “antes de actualizar” cualquier atributo del modelo post.

4.2. Reemplazando el método to_param.

 #redefinimos el metodo to_param
 def to_param
     slug
 end

Lo que acabamos de hacer es un “override” del método  to_param en nuestro modelo post, con el objetivo de que post_path contruya una ruta usando la columna “slug” de un post en lugar de su id. esto lo usaremos más adelante en el controller posts_controller.rb

4.3. Creando Metodos privados para manejar el valor del slug.

#metodos privados.
private

def assign_slug
    self.slug = "#{ title.parameterize }"
end

def update_slug
    update_attributes slug: assign_slug
end

El primer método “assign_slug” lo que hace es asignar un valor a slug, el cual será el “title” del post con un formato trabajado de manera que se reemplacen los caracteres especiales y se agreguen guiones entre espacios vacíos. este trabajo lo se lo dejaremos al método .parameterize.

Luego viene el siguiente método “update_slug”, el cual se gatilla con el callback “after_create” (que definimos al principio del modelo) es decir, inmediatamente después de crear un post, se actualizará el atributo “slug” con el valor que retorne el método assign_slug.

5. Último paso: Modificando el posts_controller.rb

Ahora que agregamos lo necesario en el modelo, vamos a intervenir el controller, abre app/controllers/posts_controller.rb y revisa el metodo set_post (se ubica al final del archivo)

def set_post
  @post = Post.find(params[:id])
end

Reemplázalo por esto:

def set_post
  @post = Post.find_by_slug(params[:id])
end

Hay un método que Rails nos provee que son los “find_by_algunAtributo” este tipo de métodos son convenientes para buscar registros a partir del valor de un atributo, estos métodos se denominan “dynamic finders” .

Observación: es importante que en el modelo esté el override de to_param bien definido para que params[:id] entienda que buscamos por columna slug y no por id.

y el Bonus track!

Podemos “ocultar” el controller de la url haciendo un truco muy sencillo en el archivo routes.rb de modo que:

http://www.example.com/posts/como-crear-un-slug-en-rails

se transforme a esto:

http://www.example.com/como-crear-un-slug-en-rails

Para ocultar el controller en la url tenemos que hacer lo siguiente, donde dice:

 resources :posts

cambia  por esto:

resources :posts, :path => ''

Ahora solo nos queda probar nuestra aplicación de Posts con url amistosas!

(repo en github)

KEEP CODING! 😀

Share
March 8, 2015 Tutoriales,

Borrar un Scaffold en Ruby on Rails

borrar scaffold en ruby on rails

Hay veces en que las cosas no salen bien y hay que hacer rollback en la vida. Por suerte, tenemos el comando rake db:rollback para deshacer migraciones en Rails, Cuando usarlo? bueno, si nos equivocamos en el nombre del scaffold, nos quedó mal hecho o un sin fin de razones más por las que quisieras borrar un Scaffold en Ruby on Rails. En esta infografía te explico como borrar uno y no morir en el intento.

Hay otras formas de borrar un Scaffold, como por ejemplo hacer una nueva migración que destruya la tabla y borrar el scaffold a mano. pero es más trabajo.

Esta es la forma fácil y bonita:

borra-scaffold-rake-db-rollback-en-ruby-on-rails

Share
January 24, 2015 Bases de datos, Tutoriales,

Entendiendo los objetos en Ruby

objetos y clases

Para muchos programadores ha sido complicado aprender a programar con objetos debido a la gran cantidad de conceptos que se introducen simultaneamente, pero a mi parecer es porque simplemente la teoría está explicada con una mala metáfora.

Se suele decir que las clases (la forma de definir objetos) son recetas, o son un esqueleto, y es mucho más fácil explicar que son los objetos y para que sirven sin entendemos a las clases como el molde, por ejemplo un molde de una pieza de lego y a los objetos como productos de este molde, o sea los legos.

Requisito (Entender funciones, paso de parámetros, return)

Los objetos tienen un identificador (por ejemplo nº serie), propiedades como el color y tamaño; y comportamientos como acoplarse y causar dolor infinito si uno los pisa.

El como se definen las clases y objetos depende del lenguaje de programación, en ruby que es un lenguaje que a mi me fascina por su simpleza se definen así:

class MoldeLego
end

Para crear un objeto a partir de ese molde hay que instanciarlo (otra palabra famosa dentro del mundo orientado a objetos), para instanciar basta con utilizar el nombre de la clase con el método new, o sea:

lego1 = MoldeLego.new

Este lego tiene un identificador, que se puede capturar en ruby con lego1.object_id pero todavía no tiene comportamiento ni propiedades, ahora el secreto para entender bien esta parte es que tanto el molde (la clase) como el objeto pueden tener comportamientos. Cuando los comportamientos son del molde se llaman métodos de clase, cuando lo son del objeto se llaman métodos de instancia.

Para agregar un método de instancia, (o sea un comportamiento del lego) lo hacemos de la siguiente forma:

class MoldeLego
  def metodoDeInstancia()
  end
end

Por ejemplo algo común sería que el lego tuviera la capacidad de acoplarse con otro lego, para eso el método tendría que ser capaz de recibir como parámetro el otro lego y devolver ahora un nuevo lego más grande.

class MoldeLego
  def acoplar(otro_lego)
    return MoldeLego.new()
  end
end

El problema es que para guardar cualquier estado del lego necesitamosvariables de instancias, y para eso necesitamos definirlas en elconstructor que en el caso de ruby se llama initialize() y si, este método también es un método de instancia, pero además tiene la gracia que se llama sólo cuando se instancia un objeto a través de new.

class MoldeLego
  def initialize()
     @size = 1 # las variables de instancia se definen con una @ 
  end
end

Cada vez que creamos un lego este tendrá tamaño 1,

lego1 = MoldeLego.new # Este Lego ahora tiene tamaño 1

Hagamos ahora un pequeño resumen:

Los objetos son instancias de una clase, cuando se utilizar la expresión clase.new entonces es cuando se instancia el objeto y automáticamente se llama al constructor, todo lo definido dentro del constructor se ejecuta.

Los constructores sirven principalmente para darle valores iniciales a las variables de instancias.

Volviendo a nuestro ejemplo, si queremos rescatar el tamaño tenemos un problema, no se puede acceder directamente a los estados internos de un objeto debido al principio de encapsulamiento, para acceder a los estados tenemos que crear getters y setters, o sea métodos para obtener los estados (getters) y métodos para cambiarlos (setters), así que nuestro MoldeLego quedaría así:

class MoldeLego
  def initialize()
     @size = 1 # las variables de instancia se definen con una @ 
  end
  def getSize()
     return @size
  end
  def setSize(new_size)
    @size = new_size
  end
end

Para usarlo, lo haríamos de la siguiente forma:

lego1 = MoldeLego.new # Este Lego ahora tiene tamaño 1
lego1.setSize(5)
lego1.getSize()

Exista una mejor forma de definir los getters y setters, que es hacerlo de tal manera que pareciera que estamos trabajando directamente sobre el atributo.

o sea:

class MoldeLego
  def initialize()
     @size = 1 # las variables de instancia se definen con una @ 
  end
  def size()
     return @size
  end
  def size=(new_size)
    @size = new_size
  end
end

de esta forma podemos ocupar el objeto así:

lego1 = MoldeLego.new # Este Lego ahora tiene tamaño 1
lego1.size # devuelve 1, pues es el tamaño original
lego1.size = 5
lego1.size # devuelve 5, ya que lo cambiamos

ahora en ruby es posible definir de forma simultánea la variable, los getters y setters a través del attr_accessor:

class MoldeLego
 attr_accessor :size
 def initialize()
     @size = 1 # las variables de instancia se definen con una @ 
  end
 end

y para ocuparlo sería exactamente que la forma anterior, ahora volvamos a la idea de acoplar:

class MoldeLego
  attr_accessor:size
  # Pasamos un valor al constructor 
  # para poder crear legos de otros tamaños
  # en caso de que se  omita es de tamaño 1
  def iniatilize(size_orig = 1) 
    @size = size_orig
  end
  def acoplar(otro_lego)
   return MoldeLego.new(self.size + otro_lego.size) # devolvemos un lego de la suma del tamaño de los otros legos
  end
end

¿Cómo se usa?

lego1 = MoldeLego.new
lego2 = MoldeLego.new
lego3 = lego1.acoplar(otro_lego)

Todavía podemos hacer una mejor más, en ruby al igual que otros lenguajes se puede redefinir una operación, en este caso vamos a redefinir la suma (sólo para los legos):

class MoldeLego
  attr_accessor:size
# Pasamos un valor al constructor 
  # para poder crear legos de otros tamaños
  # en caso de que se  omita es de tamaño 1
  def iniatilize(size_orig = 1) 
    @size = size_orig
  end
def +(otro_lego)
   return MoldeLego.new(self.size + otro_lego.size) # devolvemos un lego de la suma del tamaño de los otros legos
  end
end

Gracias a eso ahora podemos simplemente escribir:

lego1 = MoldeLego.new
lego2 = MoldeLego.new
lego3 = lego1 + lego2

¿Que pasaría si quisiéramos contar cuantos legos se han creado?

Eso no lo podemos hacer con una variable de instancia, necesitamos que sea el molde cuente, (algo así como imprimir el número de serie en el producto), o sea es una propiedad de la clase, estas se llaman formalmente variables de clase, en ruby se crean con 2 @@:

class MoldeLego
  attr_accessor:size
  @@cuenta_legos = 0
end

A diferencia de la variables de instancias estas no requieren definirse en el constructor, pues existen para la clase, independiente de si existen legos o no.

ahora si quisiéramos contar cada vez que se crea un lego nuevo, podríamos hacerlo así:

class MoldeLego
  attr_accessor:size
  @@cuenta_legos = 0
  def iniatilize(size_orig = 1) 
    @size = size_orig
    @@cuenta_legos += 1  
  end
end

si quisiéramos obtener las variables de clase toparíamos con el mismo problema de encapuslamiento, tenemos que definir getters y setters para estas, ahora lamenteblemente la sintaxis en ruby no es tan bonita, se hace asi:

class MoldeLego
  class << self; attr_accessor :cuenta_legos end 
  attr_accessor:size
  @@cuenta_legos = 0
  def iniatilize(size_orig = 1) 
    @size = size_orig
    @@cuenta_legos += 1  
  end
end

Sólo una cosa está quedando en el tintero, ¿cómo crear métodos de clase más allá de los getters y setter?

Para eso vamos a ocupar self, para este ejemplo voy a definir un getter de la forma no tan bonita para la cuenta legos, sería así:

class MoldeLego
  class << self; attr_accessor :cuenta_legos end
  def self.getCuentaLegos()
     return @@cuenta_legos
  end
end

De los legos al molde:

Una de las curiosidades que tienen los lenguajes orientados a objetos es que desde las instancias podemos rescatar las propiedades de la clase, pero desde las clase no podemos saber cuales son las propiedades de las instancias.

En la metáfora del lego podemos saber incluso de que color era el molde que lo fabricó sin embargo desde el molde no podemos saber de que color o cuantos legos se han acoplado a menos que llevemos específicamente la cuenta como en el caso del número de serie.

Para rescatar la clase a partir de la instancia basta con hacer:

lego.class.cuentaLegos

lo que es exactamente lo mismo que:

MoldeLego.cuentaLegos

Es importante no confundir esta metafora con la herencia, esta última es una característica de los objetos que les permite obtener los métodos y propiedades de sus padres, pero este tema lo tocaremos en un próximo artículo.

Con lo vista ya entendemos lo básico de objetos en Ruby (es bueno saber que con excepción de los attr_accessor este tutorial aplica a otros lenguajes orientados a objetos)

Share
January 21, 2015 Ruby, Tutoriales, ,

Tutorial de Infinite Scrolling en Rails

Infinite Scrolling en Rails

Infinite scrolling es una técnica que consiste que a medida te acerques al final de la página esta cargue nuevos datos y sirve para remplazar la componente típica de paginación, el si es recomendable implementarla o no en una página es un tema bien discutido en la internet, pero en este tutorial vamos a explicar como implementarla.

Paso 0: Setup

Partamos con una aplicación vacía de Ruby on Rails, y dentro haremos el scaffold del recurso Post que contendrán los campos title y content.

Paso 0.1: Desacoplar el index

En lugar de ocupar el archivo index creado por el scaffold vamos a ocupar una vista parcial que contenga la información de cada post, de esta forma vamos a poder hacer mucho más con menos código.

Así que crearemos la vista parcial _post.html.erb

<!— views/posts/_post.html.erb →
<%= div_for(post) do %>
 <h2><%= post.id %></h2>
 <h2><%= post.title %></h2>
 <p><%= post.content %></p>
<% end %>

Luego el archivo posts/index.html.erb queda de esta forma:

<div id="content">
 <%= render(partial: 'post', collection: @posts) %>
</div>

Paso 1: Instalar la gema Kaminari para la paginación

¿Por qué necesitamos una gema para la paginación?, La respuesta es simple, para escribir menos código, las gemas de paginación nos separan los resultados en grupos, dependiendo de la página, la página 0 (sin número) contiene los primeros x resultados, la segunda página (?page=2) contiene los segundos x resultados. El truco que haremos con infinite scrolling es ir llamando via AJAX a estas distintas páginas generadas por el paginador (Kaminari)

Para instalar la gema hay que abrir el gemfile y agregar la línea

gem 'kaminari'

Paso 2: Paginando

Para paginar tenemos que modificar el controller de posts para especificar que los resultados deben ser paginados, esto lo hacemos modificando el método index.

def index
 @posts = Post.page(params[:page]).per(5)
end

Paso 2.1 Link a la siguiente página

En la vista de posts simplemente haremos un link a la página siguiente, para eso ocuparemos el helper de rails url_for sólo especificando el query string page, o sea este método llamará a la misma página pero añadiendo ?page=2 (o 3, o 4, u otro valor dependiendo del caso)

<p id="view-more">
 <%= link_to('Ver Más', url_for(page: @posts.current_page + 1)) %>
</p>

Paso 3: Agregando datos

Hasta el momento nuestro sitio es un simple listado de posts páginado pero debería estar funcionando, para probarlo vamos a agregar datos ocupando el archivo seeds.rb y una gema espectacular para este propósito llamada Faker.

Paso 3.1: Agregar la gema Faker al gemfile y luego correr bundler

Paso 3.2: Agregar las siguientes líneas al archivo db/seeds.rb

50.times.each do |x| 
 Post.create(:title => Faker::Lorem.sentence, :content => Faker::Lorem.paragraph )
end

paso 3.3: Correr rake db:seeds

paso 3.4: Probar entrando a localhost:3000/posts y ver los resultados, hacer click en siguiente y ver que la paginación funciona.

Paso 4: Infinite Scrolling

Hay librerías que podemos descargarde infinite scrolling, pero con Jquery es posible hacer el efecto de forma sencilla en sólo un par de líneas de código, para hacerlo vamos a crear el archivo scrolling.js.coffee dentro de la carpeta app/assets/javascript

Dentro del archivo vamos a hacer la primera prueba

jQuery ->
 $(window).scroll ->
   if $(window).scrollTop() > $(document).height() — $(window).height() — 50
     alert("Final de la página")

al correr el sitio e ir al final de la página va a aparecer una alerta diciendo Final de la página, el valor -50 debera ser ajustado en casos especiales, como fixed footers que sean muy grandes.

Paso 4.2 Haciendo el llamado Ajax

Ahora vamos a ocupar la idea anterior pero cada vez que se llegue al final de la página vamos a cargar una página nueva con posts más antiguos, para eso el método $.getScript() de jquery a lo que el controller responderá con un archivo index.js.erb con los posts nuevos (al pedir un archivo javascript el controller devuelve lo pedido y lo ejecuta)

jQuery ->
 $(window).scroll ->
   url = $('#view-more a').attr('href')
   if url && $(window).scrollTop() > $(document).height() —    $(window).height() — 50
     $("#view-more").attr('href', '')
     $.getScript url

Lo último que falta es aprovechar el archivo javascript devuelto y utilizarlo para actualizar la página.

Paso 4.3 Cargando los posts.

El archivo devuelto, que todavía no hemos creado, es index.js.erb (siguiendo las convenciones de rails debe llamarse igual que el método), ahora creemos el archivo y dentro de el carguemos la vista parcial de post con la información de los nuevos post y actualizemos el link para que cargue posts aún más antiguos.

$('#content').append("<%= j render @posts %>");
$("#view-more").attr("href", "<%= j posts_path(page: @posts.current_page + 1) %>");

Y con eso logramos Infinite Scrolling

Happy Infinite Scrolling !!!

Paso 4.4 (Opcional, pero elegante): Removiendo el link al final del documento.

Para remover el link tenemos que saber si realemente estamos al final, para eso comparamos @posts.current_page == @posts.total_pages

$('#content').append("<%= j render @posts %>");
<% if @posts.current_page == @posts.total_pages %>
 $('#view-more').remove();
<% else %>
 $('#view-more').html("<%= j link_to('View More', url_for(page: @posts.current_page + 1)) %>");
<% end %>
Share
January 3, 2015 Ruby, Tutoriales, ,
Page 1 of 1112345...10...Last »