Archivos de la categoría desarrollo web

Artículos sobre desarrollo de aplicaciones web.

Rails 4: where (first) vs find_by (take)

Normalmente para encontrar un registro, que sabía de antemano era único, usaba algo como:

Usuario.where( email: "hola@correo.com" ).first

Sin embargo, me acabo de enterar que en Rails 4 agregaron un método que lo abrevia:

Usuario.find_by( email: "hola@correo.com" )

Y cuando el elemento a encontrar es forzoso, podemos agregar un “!” para que mande una excepción de ActiveRecord::RecordNotFound si no lo encuentra:

Usuario.find_by!( email: "hola@correo.com" )

Y es que no solo se escribe un poco menos, sino que es más eficiente, ya que viendo la definición de find_by:

# File activerecord/lib/active_record/relation/finder_methods.rb, line 80
def find_by(*args)
  where(*args).take
end

Nos damos cuenta que usa take en lugar de first y la diferencia entre ellos es que first hace un ORDER extra:

First:

SELECT "usuarios".* FROM "usuarios" WHERE "usuarios"."email" = 'hola@correo.com' ORDER BY "usuarios"."id" ASC LIMIT 1

Take:

SELECT "usuarios".* FROM "usuarios" WHERE "usuarios"."email" = 'hola@correo.com' LIMIT 1

Por lo que si lo que necesitamos es obtener un registro único, es mejor utilizar find_by. :)

Configuración de una aplicación Rails 4 tradicional

Aplicación Rails tradicional vs SPA (Single Page Application)

Actualmente existen dos enfoques para desarrollar una aplicación web, el tradicional, que es impulsado por frameworks como Rails 4 y el de las SPA (Single Page Application).

En el enfoque tradicional tenemos todo nuestro código en una aplicación Rails. En ella tenemos toda la lógica de negocios en los modelos, el cómo la operamos en los controladores y la interfaz de usuario en las vistas. Programamos las vistas con HAML, Ruby y SASS, usamos gemas como simple_form para poder describir formularios en Ruby.

El enfoque SPA, por su lado, cuenta con dos aplicaciones, básicamente separadas: Un cliente web para la UI (en Javascript) y la aplicación servidor (Ruby+Rails). Esta separación nos lleva a diseñar la aplicación del servidor con una API JSON enfrente. Programamos las vistas con HTML, CSS y Javascript.

En principio, puede parecer atractiva la idea de hacer las vistas con Ruby y sus amigos, pero la verdad es que no hay como trabajar en el lenguaje del ambiente natural en donde se despliegan nuestras aplicaciones: Javascript.

En principio, también, puede parecer meh trabajar con HTML y amigos, sin embargo cuando descubres cosas como Grunt, Yeoman, Bower y AngularJS y lo que te permiten hacer en cuestión de organización del proceso de desarrollo, simplemente no puedes dar marcha atrás.

El desarrollo de la UI (User Interface) es en sí, un universo propio, requiere de herramientas adecuadas para poderla desarrollar de manera efectiva.

Ambos enfoques me agradan y he hecho buen uso de ellos en algunos proyectos que he desarrollado, sin embargo, me siento mucho más atraído por las ventajas que percibo en las SPA.

Proceso de creación

A continuación viene el comando que utilizo para crear una nueva aplicación Rails:

rails new NuevaAplicacion --skip-test-unit --database=postgresql

TODO: jruby con MS sqlserver

Prefiero minitest a testunit, y PostgreSQL a MySQL.

Inicializa git y realiza el primer commit.

cd NuevaAplicacion
git init
git add .
git commit -m "Commit inicial"

Proceso de configuración

Agrega el directorio de los IDEs de JetBrains a la lista de ignorados.

echo ".idea" >> .gitignore

Modifica Gemfile.

gem 'minitest-rails'
gem 'minitest-reporters'
gem 'pg'
gem 'slim-rails'
gem 'bootstrap-sass', '~> 3.0.0'
gem 'simple_form'

Instala las gemas.

bundle install

Genera configuraciones.

rails g mini_test:install
rails g simple_form:install --bootstrap

Modifica config/application.rb

config.i18n.enforce_available_locales = true
config.time_zone = 'Mexico City'
config.i18n.default_locale = "es-MX"
config.sass.preferred_syntax = :sass
config.generators do |g|
  g.stylesheets false
  g.test_framework :mini_test, :spec => true, :fixture => true
end

#TODO: Crear un usuario y una base de datos para esta aplicación.

Configura el host y el password en config/database.yml

development:
  host: localhost
  adapter: postgresql
  encoding: unicode
  database: NuevaAplicacion_development
  pool: 5
  username: NuevaAplicacion
  password: MiPalabraSecreta123

(Para las tres configuraciones: development, test & production).

Coloca config/locales/es-MX.yml
Lista de localizaciones para Rails

Modifica config/initializers/inflections.rb

ActiveSupport::Inflector.inflections(:en) do |inflect|
  inflect.clear
 
  inflect.plural(/$/, 's')
  inflect.plural(/([^aeéiou])$/i, '\1es')
  inflect.plural(/([aeiou]s)$/i, '\1')
  inflect.plural(/z$/i, 'ces')
  inflect.plural(/á([sn])$/i, 'a\1es')
  inflect.plural(/é([sn])$/i, 'e\1es')
  inflect.plural(/í([sn])$/i, 'i\1es')
  inflect.plural(/ó([sn])$/i, 'o\1es')
  inflect.plural(/ú([sn])$/i, 'u\1es')
 
  inflect.singular(/s$/, '')
  inflect.singular(/es$/, '')
 
  inflect.irregular('el', 'los')
end
Debes usar ActiveSupport::Inflector.inflections(:en) (en Inglés) para que Rails pluralice de forma adecuada nombres de rutas, controladores y modelos.

Crea app/assets/stylesheets/estilos.css.sass

@import "bootstrap"

Modifica app/assets/scripts/application.js

// Loads all Bootstrap javascripts
//= require bootstrap

Realiza el commit con los cambios en la configuración.

git add --all
git commit -m "Configuración inicial"

¡Listo, a desarrollar! ;)

Recursos

Inflexiones en español para Rails
Configurar usuario y base de datos en PostgreSQL

Katamari Hack

[singlepic=717,160,,,left]¿Jugaron alguna vez Katamari Damacy? ¿no? yo tampoco… :(
Pero ahora tenemos la oportunidad de saborear una probadita de su mecánica de juego sobre cualquier página web.

¡A rodar se ha dicho! :D

Arrastra el siguiente enlace a tu barra de marcadores para poder activarlo sobre cualquier sitio fácilmente, o simplemente da clic aquí: ¡Katamari!

O copia y pega este código en la barra del URL de tu navegador cuando visites otra página:

1
javascript:var i,s,ss=['http://kathack.com/js/kh.js','http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);

Te aparecerá un diálogo con opciones de configuración, presiona Start! para comenzar.
Para controlar la katamari (pelota) sólo deja presionado el botón derecho de tu ratón.

(funciona mejor en chrome)

Depredado en

Katamari Hack

Missing host to link to! Please provide :host parameter or set default_url_options[:host]

Al estar desarrollando una aplicación web con Rails 3 y Devise, me apareció el siguiente error al estar jugando con la característica lockable:

ActionView::Template::Error (Missing host to link to! Please provide :host parameter or set default_url_options[:host])

Investigando un poco me topé con que la solución consistía en hacer caso a la indicación que aparece en el README de Devise. Je.

Necesitamos configurar en cada ambiente (development, production, etc.) las URLs que se emplearán en el envío de correos electrónicos:

Aquí está la configuración para config/environments/development.rb:

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

Y aquí una de ejemplo para config/environments/production.rb:

config.action_mailer.default_url_options = { :host => 'lobotuerto.com' }

Aprende acerca del posicionamiento con CSS

Seguramente has visto código como este en algunas hojas de estilo CSS:

1
2
3
4
5
6
7
8
9
10
11
12
#div-1 {
  position:relative;
  top:20px;
  left:-40px;
}
 
#div-1a {
  position:absolute;
  top:0;
  right:0;
  width:200px;
}

Pero, ¿te has preguntado qué hacen, cómo funcionan o cómo interactúan exactamente las posiciones absolute y relative?

¿Si? Pues yo también, y fue hasta que encontré este sitio que todas mis dudas fueron despejadas:
Learn CSS Positioning in Ten Steps

¡Una lectura bastante recomendada, si andas en el rollo del diseño web! :)

Un reproductor multimedia de código abierto para aplicaciones web

[singlepic=704,180,,,left]

¿Eres un desarrollador de aplicaciones web (Rails, PHP, ASP, etc.) y necesitas reproducir video o música y no estás seguro de qué usar?

Te presento Flowplayer: Reproductor Flash de video para la web.

Flowplayer es un reproductor de video de código abierto (GPL 3) para la web. Úsalo para embeber videos y películas en tus páginas y sitios.

Descárgalo aquí.

Cómo instalar PostgreSQL en Ubuntu 11.04

[singlepic=668,160,,,left]

Acabo de incorporarme a un proyecto en Rails en el que usan PostgreSQL, y como recién formateé y le puse Ubuntu 9.04 a la laptop, necesito ahora instalar este manejador de base de datos.

Y es un buen pretexto para por fin escribir la guía de cómo instalarlo en Ubuntu.

Como siempre, vamos a la terminal (Aplicaciones → Accesorios → Terminal) y tecleamos:

1
sudo apt-get install postgresql postgresql-client postgresql-contrib libpq-dev pgadmin3

Eso instala el cliente y servidor de la base de datos, algunos scripts de utilería y la aplicación pgAdmin para administrar la base de datos. El paquete de libpq-dev nos servirá para poder compilar la gema Ruby de PostgreSQL más adelante.

Confirmemos que la instalación terminó adecuadamente teclando:

1
psql --version

En mi caso la respuesta fue:
psql (PostgreSQL) 8.4.7

Cambiar la contraseña del usuario administrador

Ahora necesitamos establecer la contraseña del usuario administrador postgres. Teclea la siguiente línea en la terminal (cambia la palabra password por la contraseña que desees usar):

1
2
3
sudo su postgres -c psql
ALTER USER postgres WITH PASSWORD 'password';
q

Eso altera la contraseña dentro de la base de datos, ahora necesitamos hacer lo mismo para el usuario Linux postgres:

1
2
sudo passwd -d postgres
sudo su postgres -c passwd

Te aparecerá un prompt, introduce la misma contraseña que pusiste antes.

Poner a punto pgAdmin

Listo, de ahora en adelante podemos usar pgAdmin o la terminal para administrar nuestra base de datos como el usuario postgres. Pero antes de que te metas a pgAdmin deberías configurar el PostgreSQL Admin Pack, que te permite llevar un mejor registro y monitoreo de tu base de datos.

Ejecuta lo siguiente desde la línea de comandos en tu terminal:

1
sudo su postgres -c psql < /usr/share/postgresql/8.4/contrib/adminpack.sql

Para ejecutar pgAdmin ve a tu menú de aplicaciones:
Aplicaciones → Programación → pgAdmin III

Cambiar el esquema de autentificación de PostgreSQL

Al ejecutar algunos comandos de base de datos, es posible que te encuentres con un error que dice algo como:

FATAL: la autentificación Ident falló para el usuario «x»

Para evitarlo necesitas editar el archivo /etc/postgresql/8.4/main/pg_hba.conf y cambiar el esquema de autentificación. Abre el archivo con privilegios de root:

1
sudo gedit /etc/postgresql/8.4/main/pg_hba.conf

Y cambia esto:

1
2
# Database administrative login by UNIX sockets
local   all         postgres                          ident

Por:

1
2
# Database administrative login by UNIX sockets
local   all         postgres                          md5

Reinicia el servidor de PostgreSQL tecleando en tu terminal:

1
sudo /etc/init.d/postgresql restart

PostgreSQL Ruby gem

Si planeas usar PostgreSQL dentro de Ruby, necesitarás esto:

1
gem install pg

Si deseas instalar la gema desde código fuente, sigue estas instrucciones.

En Rails 3, puedes crear una aplicación configurada para usar PostgreSQL con este comando:

1
rails new mi-nueva-aplicacion -d postgresql

¡Listo! :D

Recursos

Install PostgreSQL on Ubuntu 8.04 (cómo acceder de manera remota a tu servidor)
Switching Rails to PostgreSQL

Enlaces sobre desarrollo web

[singlepic=575,120,,,left]

Aquí les traigo una serie de enlaces a diferentes artículos y tutoriales, que tratan el tema del desarrollo web, espero les sean útiles:

Ahora que Javascript no es menospreciado, ¿a quién no le gustaría aprender algo de Javascript avanzado?

O si no eres avanzado, tal vez te interese conocer 24 mejores prácticas con Javascript para principiantes.

También por ahí anda un artículo con 30 mejores prácticas con HTML para principiantes

Cuando te sientas un poco suelto en el webdev, podrías echarle una mirada a detalle al 960 CSS Framework, un framework en CSS para desarrollo rápido de aplicaciones web.

Andando en los frameworks, ¿por qué no conocer 10 maneras de incrementar tu desempeño en jQuery? Y de paso aprender a hacer animaciones asombrosas con jQuery.
O un slideshow, al estilo de algún software de presentación ¡pero en la red!

Y ya que seas todo un master, puedes darte una vuelta por las instrucciones paso a paso para usar la API de Google Maps.

Ext JS 3.0 ya está aquí

[singlepic=651,60,,,left]

Fue liberada hace unos días la versión 3.0 de este framework para desarrollo de aplicaciones web.

Entre sus monerías incluye:

  • Soporte para peticiones directas, CRUD y REST
  • Nuevos ejemplos y componentes (incluye un componente para gráficas)
  • Más de 1,000 mejoras y correcciones – administración de memoria mejorada para IE6 (¡guácala!)
  • API documentada y CSS refactorizado
  • Compatibilidad con versiones anteriores

Aquí puedes ver una lista más detallada sobre lo nuevo.
O revisar algunas de las cosas que puedes hacer con él.