Blog

A continuación explicaré de manera sencilla como poder subir imágenes a nuestra aplicación en rails, usando paperclip.

Paperclip.

Primero, veamos que es paperclip.

Paperclip es una gema que permite mediante el comando has_attached_file poder adjuntar imágenes de manera fácil.

Además, paperclip permite poder agregar validaciones, tales como tamaño, formato, presencia, etc.

Cabe mencionar que paperclip hace uso de las utilidades 'ImageMagick', las cuales permiten mostrar, manipular y convertir imágenes.

Requisitos.

Antes de comenzar, es necesario tener los siguientes requisitos para poder desarrollar esta aplicación.

• Tener la versión 2.0 de Ruby.
• Tener la versión de Ruby on Rails 4.0 rc1
• Tener instalado ImageMagick.

Nota: En este tutorial no se explica como instalar y/o configurar ruby, rails ni imagemagick.

Manos a la obra.

Si ya estas en este punto, quiere decir que cuentas con los requisitos antes mencionados. Entonces manos a la obra.

Creando nuestra aplicación.

Lo primero que necesitamos es crear nuestra aplicación, la cual llamaremos TestPaperclip. Así que abrimos nuestra terminal/consola y escribimos lo siguiente:

rails new TestPaperclip

Con el comando anterior, rails nos crea una carpeta llamada TestPaperclip (carpeta de aplicación), y dentro de esta carpeta se encuentran todos nuestros archivos necesarios para que nuestra aplicación rails funcione.

Nuevamente desde nuestra terminal/consola escribimos el siguiente comando, para poder entrar a la carpeta de nuestra aplicación.

cd TestPaperclip

Agregamos Paperclip.

Ahora es necesario agregar la gema de paperclip a nuestro archivo Gemfile, el cual se encuentra dentro de nuestra carpeta.

gem 'paperclip', git: 'git://github.com/thoughtbot/paperclip.git'

Se utiliza desde el repositorio, ya que hasta este momento no esta disponible una gema para Rails 4.0

Para poder instalar la gema de paperclip y poder usarla en nuestra aplicación, escribimos bundle en nuestra terminal/consola.

Creamos nuestro scaffold.

Después de haber instalado la gema, procederemos a crear nuestro modelo, controlador y vistas.

Nota: En este tutorial crearemos un scaffold para que rails nos cree rápidamente el modelo, controlador y las vistas necesarias, pero tu puedes crear los modelos, controladores y vistas individualmente si así lo deseas.

rails g scaffold Product name:string description:text

Gracias al comando anterior, rails nos ha creado un controlador llamado ProductsController, nos ha creado las vistas necesarias y nos ha creado un modelo llamado Product. Dicho modelo tendrá como atributos un nombre de tipo cadena y una descripción de tipo texto.

Configuramos nuestra migración.

Para generar la tabla de la base de datos, rails también ha generado una migración con los campos nombre y descripción. Es en esta migración donde debemos indicarle que queremos guardar los datos de la imagen. Para esto, abrimos la migración ubicada en db/migrate/ y le agregamos la siguiente línea: add_attachment :products, :image. De tal manera que nuestra migración queda de la siguiente manera:

class CreateProducts < ActiveRecord::Migration
  def change
    create_table :products do |t|
      t.string :name
      t.text :description

      t.timestamps
    end

   add_attachment :products, :image
  end
end

El método add_attachment es un helper que proporciona Paperclip para almacenar la información necesaria de las imágenes en la base de datos.

Ahora necesitamos correr nuestra migración para que se cree nuestra tabla products. Eso lo hacemos con el comando rake db:migrate.

Configurando nuestro modelo.

Ahora que ya tenemos nuestra tabla productos en la base de datos, el siguiente paso es abrir nuestro modelo de productos y decirle a rails que queremos que cada producto tenga una imagen.

class Product < ActiveRecord::Base
  has_attached_file :image, styles: { medium: '200x200>', thumb: '48x48>' }
end

Al igual que con la migración, has_attached_file es un método helper que nos ofrece Paperclip. :image es el nombre del atributo de nuestro modelo. :styles permite decirle a Paperclip que tamaño de imagen queremos almacenar. De esta manera, se nos almacenará en disco la imagen en tamaño original, mediano y thumb.

Nota: Todas las imágenes guardadas se encontrarán en public/system/products/images/000/000/.

Configurando nuestras vistas.

Ya que hemos configurado nuestro modelo, debemos modificar un poco nuestras vistas para que nos permitan poder adjuntar una imagen cada vez que queremos crear/editar nuestro producto.

Abrimos nuestra parcial _form.html.erb ubicada en app/views/products y antes de la línea <div class="actions"> agregaremos el siguiente código:

<div class="field">
  <%= f.label :image %>
  <%= f.file_field :image %>
</div>

Este pequeño código nos permitirá el poder adjuntar una imagen cada vez que queramos crear o editar un producto.

Siguiendo con nuestras vistas, ahora abriremos nuestro index.html.erb y le agregaremos 2 líneas de código:

• <th>Image</th> justo antes de <th>Name</th>. Con esto, nuestra tabla que muestra todos nuestros productos en el navegador, tendrá una columna llamada Image.

• <td><%= image_tag product.image.url(:thumb) %></td> justo antes de <td><%= product.name %></td>. Con esto, obtendremos la imagen (de tamaño thumb de cada producto).

Para finalizar con nuestras vistas, abriremos la vista show.html.erb y mostraremos la imagen del producto, pero esta vez de tamaño mediano:

<%= image_tag @product.image.url(:medium) %>

Configurando nuestro controlador.

Ahora si, hemos terminado editando nuestras vistas. Pero nos queda editar nuestro controlador products_controller.rb, el cual se encuentra en app/controllers/.

Al haber creado el scaffold, rails nos ha generado el código necesario para poder realizar las diferentes acciones (new, create, edit, update y destroy). Pero necesitamos decirle que al adjuntar una imagen, sea guardada.

Al final de nuestro controlador, se encuentran 2 métodos privados:

• set_product

• product_params. Éste método lo editaremos, para que quede de la siguiente manera:

  def product_params
    params.require(:product).permit(:name, :description, :image)
  end
  

Y nuestra aplicación.

Con esto, hemos terminado nuestra aplicación básica para poder adjuntar imágenes. Ahora solo queda verla en nuestro navegador, con lo que debemos correr el servidor. Escribimos el siguiente comando en nuestra terminal/consola:

rails s

Abrimos el navegador y escribimos localhost:3000/products para poder listar nuestros productos, que por el momento estará vacía. Así que a partir de aquí, podemos crear un producto y adjuntarle una imagen.

Finalizanding

Espero que este pequeño tutorial les haya sido de utilidad. Hasta la próxima.

¿Quieres descargar la aplicación? Aquí el link desde Github.

Isay Sosa es Ingeniero Junior en Crowd Interactive.

En este ejemplo muy sencillo vamos a aprender como cambiar el entorno de pruebas de Rails para usar RSpec, así como validar un modelo y escribir las pruebas necesarias para garantizar que dicho modelo funcione correctamente.

Para la elaboración de este ejemplo utilizaremos el enfoque TDD (Test Driven Development) donde primero se escriben las pruebas,luego debemos verificar que fallen, posteriormente escribir solo el código necesario para que pasen y finalmente refactorizar.

Llevaremos a cabo una simple y sencilla aplicación de agenda telefónica. Comencemos creando la aplicación con rails:

rails new PhonebookApp -T

Con el comando anterior, creamos una aplicación llamada PhonebookApp y la opción -T indica que no se debe de crear el directorio de test por default. Rails utiliza TestUnit para las pruebas por default. Nosotros usaremos RSpec por lo que dicho directorio no es necesario para este ejemplo.

Ahora es necesario entrar al directorio de nuestra aplicación desde la consola.

cd PhonebookApp

El siguiente paso es configurar el entorno de pruebas con RSpec para ello es necesario, abrir el archivo Gemfile, ubicado en la raiz de nuestra aplicación y añadir lo siguiente:

group :test, :development do
  gem "rspec-rails", "~> 2.0"
end

Hasta aquí ya tenemos configurado nuestro Gemfile para que incluya la gema "rspec-rails" y todas sus dependencias en los entornos de pruebas y desarrollos de nuestra aplicación. Ahora es necesario ejecutar el siguiente comando para instalar dichas gemas:

bundle

Continuando, debemos inicializar RSpec para ello ejecutamos el siguiente comando en la consola, lo que nos creará el directorio spec y algunos archivos necesarios para la ejecución de pruebas con RSpec:

rails generate rspec:install

Ahora crearemos el modelo, en una agenda teléfonica nos interesa tener los campos de nombre, apellido, teléfono, dirección y la edad. Los campos obligatorios serán nombre y teléfono. El modelo se genera utilizando el siguiente comando:

rails generate model phone_book name:string last_name:string phone:string address:string age:integer

A partir del modelo creado, necesitamos correr las migraciones, esto significa: crear las tablas en la base de datos. Para ello debemos ejecutar el siguiente comando:

rake db:migrate

Siguiendo el enfoque TDD debemos primero escribir las pruebas, para este ejemplo, las pruebas son: debe ser válido con todos los atributos, debe ser inválido sin nombre, debe ser inválido sin teléfono, debe ser válido solo con nombre y teléfono, edad debe ser válida con un número, edad debe ser inválida sin un número. Son 6 pruebas en total, para escribirlas, es necesario hacerlo en el archivo phonebookspec.rb generado automáticamente cuando generamos el modelo, en el directorio de spec/models.

require 'spec_helper'

describe PhoneBook do
  before {
    @valid_attrs = { name: "Juan", last_name: "Perez", phone: "999-99-9-99-99", address: "Col. Vista Hermosa", age: 10 }
  }

  context "model validations" do
    it "is valid with all the attributes" do
      phone_book = PhoneBook.new @valid_attrs

      phone_book.valid?.should be_true
    end

    it "is invalid without name" do
      @valid_attrs.delete(:name)
      phone_book = PhoneBook.new @valid_attrs

      phone_book.valid?.should be_false
      phone_book.errors[:name].size.should > 0
    end

    it "is invalid without phone" do
      @valid_attrs.delete(:phone)
      phone_book = PhoneBook.new @valid_attrs

      phone_book.valid?.should be_false
      phone_book.errors[:phone].size.should > 0
    end

    it "is valid only with name and phone" do 
      @valid_attrs.delete(:last_name)
      @valid_attrs.delete(:address)
      phone_book = PhoneBook.new @valid_attrs

      phone_book.valid?.should be_true
    end

    it "age is valid with a number" do
      phone_book = PhoneBook.new @valid_attrs
      phone_book.age = 10

      phone_book.valid?.should be_true
    end

    it "age is invalid without a number" do 
      phone_book = PhoneBook.new @valid_attrs
      phone_book.age = "Diez"

      phone_book.valid?.should be_false
      phone_book.errors[:age].size.should > 0
    end
  end
end

En el código anterior se muestran las pruebas ya escritas y funcionando, a continuación explicaré el código paso a paso:

• En la primer línea cargamos RSpec y sus métodos.
• describe PhoneBook do, indica que vamos a escribir pruebas para la clase del modelo PhoneBook.
• En el bloque before creamos un hash que contiene los atributos válidos para crear una instancia del modelo PhoneBook.
• Después definimos el contexto, que es lo que estamos probando, pues las validaciones del modelo.
• Dentro del contexto están las pruebas individuales, cada bloque de it "description" do
• En general, creamos instancias de PhoneBook pasandole el hash creado en el before, y para probar las diferentes validaciones, pues quitamos los elementos del hash pertinentes para probar cada escenario.
• Por ejemplo, en la primer prueba "debe ser válido con todos los atributos" pasamos el hash @valid_attrs tal cual. Para la segunda prueba "debe ser inválido sin nombre" eliminamos el elemento name del hash e instanciamos el modelo, después preguntamos si es válido y esperamos que la respuesta sea falsa. Caso similar con las demás pruebas.

Para ejecutar las pruebas y ver los resultados es necesario ejecutar el siguiente comando desde la consola:

rake

En este punto, nos arrojará 3 pruebas fallidas y 3 falsos positivos (pruebas que indican ser correctas, cuando en realidad no lo son) que dejarán de serlo una vez que escribamos el código necesario para hacer pasar las pruebas.

¿Qué es necesario para hacer pasar las pruebas? Escribir las validaciones pertinentes en el modelo, para ello, haremos uso de los métodos que nos brinda la clase ActiveRecord, clase que todos los modelos heredan automáticamente, el siguiente código deberá ser añadido al archivo phone_book.rb dentro de app/models:

validates :name, presence: true
validates :phone, presence: true
validates :age, numericality: true, allow_blank: true

• La primer línea, nos indica que el modelo, debe de validar la presencia del campo name esto quiere decir que es un campo requerido.
• La segunda línea es un caso similar, pero con el campo phone
• Finalmente, la tercer línea válida que la edad (campo age) sea un número, pero no es requerido, especificado mediante: allow_blank: true

Si en este punto ejecutamos el comando:

rake

Tendremos el resultado de 6 pruebas en verde, es decir 6 pruebas que han sido completadas satisfactoriamente, lo que garantiza que nuestro modelo esté bien validado, según los requerimientos dados.

Conclusiones.

Validar y probar modelos es muy sencillo gracias a los métodos ya definidos por la clase ActiveRecord de Rails. Para probarlos existen algunos frameworks de prueba, tales como RSpec, Minitest, TestUnit. En este ejemplo se utilizó RSpec pues hace que el escribir pruebas sea en un lenguaje muy natural y transparente para el usuario.

Si quieren descargarse el código fuente de este ejemplo, está disponible en el siguiente repositiorio de github:

https://github.com/efigarolam/phonebookexample.git

¡Saludos! Y hasta la próxima.

Eduardo Figarola.

Eduardo Figarola es Ingeniero Junior en Crowd Interactive.

El día de hoy hacemos un reboot de Rails Mx. Rails Mx se formó ya hace algunos años como una comunidad para ayudar y difundir el desarrollo en el marco de trabajo de Ruby on Rails.

Durante largo tiempo la comunidad se encargó de realizar diversas actividades como reuniones y conferencias virtuales en busca de lograr los objetivos de difusión trazados. Pero en algún momento Rails Mx perdió fuerza y se apagó.

El nuevo Rails Mx

El objetivo de este reboot no es simplemente cambiar el CSS y dejar que el resto continúe como hasta ahora.

El cambio debe de ir más allá, el objetivo es retomar donde Rails Mx se quedó y hacer de ésta una comunidad activa nuevamente. A partir de este momento buscamos reactivar:

• Las reuniones de comunidad, saber de ustedes mismos en que se puede apoyar. Quizás cambiar las reuniones del modelo de Presentador/audiencia a algún tipo OpenHack en Rails/Ruby, trabajando sobre cosas nuevas o resolviendo bugs a librerías.
• Volver a realizar Conferencias virtuales, tipo Google Hangout.
• Generar contenido nuevo y fresco en el blog.

Lo que buscamos es que el peso de la comunidad no caiga sobre una o unas personas, así como obtener retroalimentación por parte de ustedes sobre actividades que son de mas beneficio y en las cuales la comunidad sea participativa.

Por lo tanto los invitamos a entrar en contacto o a través de @railsmx.

El blog

El blog formó parte de este reboot, donde los posts anteriores no se migraron al nuevo blog, principalmente la razón es que en su gran mayoría los posts eran referentes a ofertas de trabajo.

La invitación está abierta a quien guste participar creando contenido técnico y de uso general, nos pueden hacer llegar sus participaciones a través de contacto.

Lo técnico

¿Qué fue lo que se hizo con el nuevo sitio de Rails Mx?

Para el nuevo sitio se desarrolló una aplicación de Ruby on Rails, el repositorio para Community está bajo la licencia MIT, por lo cual son libres de hacerle fork o enviar pull request.

Community hace uso de Crowdblog para el motor del Blog.