Categoría: Desarrollo web

Desarrollo de aplicaciones web con MEAN.io (Mongo, Express, Angular y NodeJS)

Publicado por Miguel Useche el 14 de julio de 2014

Hace unas semanas, elaborando un sistema interno para Oja.la tuve la libertad de escoger la plataforma a desarrollar y como este año me había decidido a realizar una aplicación web escrita 100% en Javascript empecé a investigar sobre como empezar con la plataforma MEAN (Mongo, Express, Angular y NodeJS), para quienes no la conocen, es como LAMP (Linux, Apache, MySQL y PHP) pero orientada a usar JS tanto en frontend como en el backend. Investigando conseguí MEAN JS, un framework para desarrollar bajo esta plataforma.

Instalación

Al momento de iniciar el proyecto, no sabía utilizar Express ni Mongo, respecto a NodeJS sólo había hecho unos experimentos sencillos para ver como funcionaba, pero ya tenía experiencia en AngularJS y herramientas como: Yeoman, Grunt, Bower y NPM. Por ello, la instalación de este framework me pareció muy sencilla: clonar el repositorio y luego mediante bower instalar todas las dependencias automáticamente. Solo realicé algunos cambios para evitar actualizar versiones no estables de librerías (no me gusta actualizar en pleno desarrollo para evitar incompatibilidades con funcionalidades ya escritas) y eliminar cosas innecesarias para el proyecto (como autenticación usando redes sociales).

Esqueleto inicial

La forma en como está estructurado me ha gustado mucho, la separación del backend y frontend se hace notable. Respecto a Express, la estructura es muy sencilla, principalmente se divide en las carpetas: models (los objetos que permiten se comunican con la BD), controllers (donde se guarda la lógica del proceso), routes (maneja las rutas de las peticiones del servicio web), views (las vistas a mostrar desde el servidor, las cuales son diferentes de las vistas generadas en el frontend).

En la parte pública se trabaja como cualquier aplicación de Angular, se crean carpetas por cada módulo a desarrollar, por defecto vienen incluidas 2: auth y system. La primera es el módulo de autenticación que trae MEAN.io para permitir identificarse utilizando redes sociales y la segunda, donde va la aplicación como tal. También se incluyen los archivos para manejar las dependencias del proyecto usando npm, bower y se incluye un archivo de Grunt.

Este último, trae configuraciones para montar un servidor: de desarrollo, pruebas y producción. Cada uno de ellos tiene su propia configuración, permitiéndote trabajar con diferentes bases de datos, bibliotecas comprimidas solo en la versión de producción y pruebas. Me pareció raro que no incluía la tarea grunt-ngmin, pues permite facilitar la compresión de archivos JS de AngularJS.

Logo de Mean.io, chévere que sea una chica ninja

Desarrollo

El desarrollo de la aplicación se me hizo fácil gracias a esta plantilla base, si nunca has desarrollado una aplicación bajo este modelo, te recomiendo iniciarte con MEAN.io. Lo único extraño es que generalmente en otras plataformas el código de backend es diferente al de frontend, permitiendo determinar fácilmente la ubicación del código que estas viendo, como aquí todo es JS a veces debes mirar la ruta para ver si estas en frontend o backend, además, probablemente llames a los modelos de Express y Angular con el mismo nombre, confundiendo a veces la apertura de archivos.

La desventajas que vi con esta plataforma fue: la poca documentación debido a su poco tiempo de disponibilidad e incompatibilidad para navegadores antiguos (Android 2.3, IE 8, entre otros), sé de la disminución de la cuota de mercado de estos navegadores, pero aún existen clientes/usuarios que lo utilizan y en el ambiente empresarial se les debe dar soporte. Y finalmente, no me gustó mucho trabajar con MongoDB, es muy chévere almacenar los objetos en JSON y la lectura se hace rápida, pero no sé si es por mi años utilizando BD relacionales pero la falta de restricciones de diseño o tanta libertad de almacenar lo que se desee allí, me parece que puede crear daños en la integridad de datos en el futuro. Tal vez porque estoy acostumbrado a manejar toda la validación de la data en la BD y no en la aplicación, me pareció inseguro que con MongoDB toda la validación se hace en la aplicación (si me equivoco, por favor me lo aclaran en los comentarios).

Recomendaciones

Te recomiendo utilizar Mean.io si deseas hacer una aplicación bajo esta plataforma en poco tiempo, realmente es sencilla de usar si tienes experiencia desarrollando aplicaciones web con Javascript. Probablemente la curva de aprendizaje para un novato sea fuerte pero vale la pena el esfuerzo. Si deseas algo mas sencillo o simple (sin sacrificar calidad), puedes probar Mean.JS un fork realizado por el autor de Mean.io para mejorar algunos problemas de diseño de la plataforma.

Actualización al 17/10/2019: El proyecto ha migrado a su fork MeanJS, realizado por el mismo autor del proyecto.

4 comentarios

Añadir soporte a Firefox OS en MobilePress

Publicado por Miguel Useche el 28 de octubre de 2013

MobilePress es un buen complemento para WordPress para crear una versión móvil del sitio. Básicamente su función es detectar si se visita desde un dispositivo móvil (teléfono o tableta) y muestra un tema adaptado a las resoluciones que manejan las pantallas de esos.

Su funcionamiento es muy bueno y lo utilizo desde hace años por la facilidad para crear un tema móvil. Sin embargo, al acceder desde un dispositivo con Firefox OS me llevaba al sitio de escritorio, revisando me di cuenta que el «Agente de Usuario (User Agent)» del navegador utiliza:
Mozilla/5.0 (Mobile; rv:18.0) Gecko/18.0 Firefox/18.0

Al verlo me llamó la atención la ausencia de identificación del sistema operativo, esto se debe según Mozilla a que la web es la plataforma y no Firefox OS. Como la mayoría de programas identifican a los sistemas móviles por su marca: Android, iPhone, etc. No suelen detectar la palabra Mobile. Revisando el plugin MobilePress, en el archivo mobilepress/classes/check.php hay una función llamada function is_mobile() donde a través de una expresión regular revisa varios agentes de usuario escritos y si lo encuentra muestra la versión móvil. Entonces al cambiar la expresión regular y añadir Mobile (con mayúscula):
preg_match( '/(Mobile|alcatel|

Una vez guardados los cambios, ahora podrás disfrutar de tu sitio móvil en Firefox OS.

Deja un comentario

Automatiza tareas de desarrollo web con Guard

Publicado por Miguel Useche el 8 de junio de 2013

Hace tiempo en una charla de Paul Irish, ví un programa llamado Live-reload para recargar automáticamente una página en el navegador cada vez que realicemos un cambio en ella. Pero nunca había podido configurarla en Linux, luego hace unos días en una entrevista de Addi Osmani vi un comentario que me hizo volver a tratar de instalarla, su comentario fue: «Ya en el 2013 nadie debería perder tiempo en recargar manualmente el navegador».

Así que me puse instalar el programa y descubrí Guard, una aplicación hecha en Ruby para chequear las modificaciones realizadas a archivos y realizar acciones en base a ello. Esto permite por ejemplo, que al realizar algún cambio en un archivo escrito con SASS o SCSS genere el CSS automáticamente, si modificas un archivo JS de desarrollo genere el archivo final ya comprimido, generar el archivo JS desde CoffeScript, entre otros. De esta manera automatiza gran cantidad de tareas que usualmente harías manualmente a través de comandos del Editor/IDE.

Instalación

Aunque existen instaladores para MacOS y Windows los desarrolladores prefieren instalarlo a través de Ruby GEMs, el proceso es sencillo y se aplica para todos los sistemas operativos que soporten Ruby, para ello en la consola debes ejecutar los comandos:

gem install bundle #facilita el proceso
gem install guard #el programa que estamos comentado
gem install guard-livereload #extensión para actualizar el navegador
gem install guard-sass #para pre-procesado de CSS

Configuración

Luego te diriges a la raíz del proyecto que estás elaborando, allí ejecutas el comando:’

bundle init

Nota: Si el comando falla es porque no tienes el comando gem en tu variable $PATH
Esto creará un archivo llamado Gemfile que contiene toda la información de los gems utilizados en el proyecto y las dependencias de lo mismos. Una vez creado con el comando mencionado, lo abres y agregas el siguiente contenido:

gem 'guard'
gem 'guard-livereload'
gem 'guard-sass', :require => false

Luego debes crear un archivo con el nombre Guardfile en la raíz del proyecto, en él se definirán las reglas que deben ocurrir para realizar las acciones. El siguiente ejemplo está diseñado para ser usado en un proyecto PHP con el framework Yii:

# Módulo para que al modificar un archivo SASS genere el CSS ya comprimido
guard 'sass',
:input => 'css',
:output => 'css',
:style => :compressed

#reglas para la recarga del navegador
guard 'livereload' do

#actualiza el navegador al ocurrir cambios en las vistas, modelos y controladores.
watch(%r{protected/views/.+\.php})
watch(%r{protected/views/.+/.+\.php})
watch(%r{protected/views/.+/.+/.+\.php})
watch(%r{protected/models/(.+)/(.+)\.php$})
watch(%r{protected/controllers/(.+)\.php$})

#Comprime los archivos de Javascript utilizando un script llamado compressJS ubicado en la carpeta js/
watch(%r{js/.+\.original\.js}) {`js/compressJs`}

#Una vez generado los archivos JS finales (ya comprimidos) recarga el navegador
watch(%r{js/.+\.js})

#Recarga el navegador cuando se modifica un archivo CSS
watch(%r{css/.+\.css})
end

La sintaxis es watch(%r{EXPRESION_REGULAR_DE_ARCHIVOS}) {comando a ejecutar}, con esto puedes jugar a detectar cambios en algunos archivos y realizar a través de una secuencia de comandos, tareas respecto a ese archivo modificado. También noten como por ejemplo al comprimir el archivo JS no se recarga el navegador, sino en otra regla cuando se modifica un archivo JS, es decir, algunas cosas deben hacerse a través de la definición de varias reglas.

Uso del programa

Para ejecutarlo debes iniciar guard con el comando:

bundle exec guard

A partir de ahora guard chequeará los cambios en los archivos y ejecutará las acciones configuradas. Para refrescar el navegador automáticamente, es necesario instalar LiveReload para Firefox o Chrome . Una vez instalada, ve a la pestaña donde estas visualizando el proyecto, presionas el botón de LiveReload y debería conectarse sin problemas a guard.

Complemento de LiveReload — Botón para conectarse con Guard LiveReload

Para probarlo, edita un archivo de vista y debería actualizarse la página sin problemas. También al editar un archivo SASS (o SCSS) debería generar el archivo CSS y a su vez recargar la página para ver la nueva apariencia, al editar los archivos de Javascript deberían comprimirse y cualquier otra acción que hayas configurado.

Ahora depende de ustedes que utilicen estas herramientas todos los días, pues mejorarán su trabajo al automatizar ciertas tareas y enfocarse en otras mas importantes. Si alguien conoce otra utilidad para Guard, no duden en dejar un comentario.

1 comentario

Mi experiencia al desarrollar 2 plugins de WordPress bajo software libre

Publicado por Miguel Useche el 17 de abril de 2013

Este artículo cuenta mi experiencia luego de tres años, al desarrollar un proyecto de software libre (licencia GPL) y motivarlos a crear sus propios proyectos o colaborar en los existentes. Si no te gusta leer mucho, básicamente quiero compartir que al crear y mantener un proyecto de software libre logras: aprender a ser mejor programador al recibir correcciones de otras personas, conoces gente de varias partes del mundo interesadas en tu programa, ves correr el programa en lugares no pensados, recibes código programado por otras personas, puedes recibir dinero sin previo aviso y sin nada a cambio, consigues futuros clientes y recibes felicitaciones por resolver un problema de otra persona.

Inicio

Como mi blog hecho con WordPress empezó a acumular años, el historial de artículos se hizo grande y ocupaba mucho espacio para mostrarlo. La solución por defecto es mostrar los años en una caja desplegable pero lucía muy feo y conseguí un sencillo plugin que los mostraba en un menú desplegable con animación hecha en Javascript. El plugin dejó de soportarse al poco tiempo y no siguió funcionando con WordPress, por ello, decidí hacer uno similar y como estaba aprendiendo jQuery (estaba de moda) lo utilicé para la implementación y nombre. Escribirlo fue fácil pues WordPress ofrece una excelente documentación, además, utilicé el plugin que usaba como base.

¿Ofrecerlo como software libre o usar una licencia cerrada y venderlo?

Una vez terminado, pense en 3 posibilidades: usarlo para mi mismo, venderlo por un precio muy barato y ganar algo de dinero por él, liberarlo como software libre porque le podría servir a alguien con la misma necesidad que yo. Decidí ésta última porque por primera vez tenía algo que surgía de una necesidad y estaba seguro de servirle a mucha gente en la misma situación que yo. Lo subí a WordPress y mi sorpresa es que tuvo bastantes descargas los primeros días (creo que como 300).

Por novatada, empecé a recibir peticiones (no quejas) de gente que deseaba mejor código porque no me entendían, soporte para otros días (me decían que si hablaba español por qué no había menús en este lenguaje), soporte para cambiar el formato del mes, etc. Aproveché un tiempo libre y lancé una segunda versión con el código mas sencillo y limpio, documentado, soporte para multi-idioma (en ese momento inglés y español) e implementé la funcionalidad del mes.

Primeras contribuciones

Luego de esos cambios pensé que el plugin estaba listo y no era necesario hacer mas cosas, para mi sorpresa empecé a recibir ideas de nuevas funcionalidades, código de personas para añadir compatibilidad de características de WordPress desconocidas para mi, por ejemplo, para ese entonces no conocida de WordPress MU, shortcodes, filtros, etc. Recibí parches para mejorar el código SQL porque había una persona con miles de posts, etc.

Mi sorpresa es ver como gente desconocida, se tomó el tiempo para estudiar el código elaborado por mí, modificarlo para soportar sus necesidades y compartirlo conmigo para incluirlo en la rama oficial, permitiendo al resto de usuarios disfrutar de estas funcionalidades. Además, las funcionalidades implementadas eran interesantes y muy variadas, yo sólo no hubiese podido hacerlas porque eran situaciones muy distintas en cada caso. Otra cosa interesante, fue que uno de los primeros programadores en enviarme código, tradujo el plugin a Checo y Esloveno, dos idiomas que jamás pensé contar en mi plugin.

Mantenimiento

Una vez con una base de funcionalidades generales, gente empieza a pedir características mas complejas, a veces fuera de las funcionalidades o el objetivo del plugin, generalmente algunas se resolvían con otro plugin y otras tuve que agregarlas. Una de las mas solicitadas era la posibilidad de excluir tareas pero fallé, sin embargo, otro de los primeros programadores en contribuir lo implementó sin que le pidiera ayuda y pude ofrecerlo al resto.

Al momento de estabilizarse el proyecto: buena base de usuarios, programadores voluntarios contribuyendo en el proyecto. Noté un incremento en el soporte, la gente al ver que el plugin funciona bien desean expandir sus posibilidades y empiezan a contactarte para ver como realizar ciertas cosas o dar nuevas idea. Comencé a recibir donaciones simplemente por realizar el plugin, motivandome a realizar nuevas funcionalidades (como soportar muchas instancias que requería casi re-escritura total).

En otras palabras, una vez que el proyecto se mantiene, el mantenimiento consiste en arreglar bugs, dar soporte a las personas y dependiendo de la frecuencia de solicitudes, agregar funcionalidades nuevas. En este punto es bien porque ya vez el fruto del esfuerzo realizado anteriormente, sin embargo, me parece delicado descuidarlo porque se puede ir todo para atrás. Pues aquí la gente confía mas en tí y espera respuestas rápidas, tal vez algunas sean incómodas al exigir como si estuviesen pagando altas sumas por ello, pero otras son buenas al agradecerte por el esfuerzo realizado.

Conclusiones

Después de este tiempo, puedo decir que es uno de los proyectos mas satisfactorios a nivel profesional y pesonal, en el primer ámbito porque me permite mejorar mis capacidades de programación, conseguir nuevos clientes (mi mayor cliente lo conseguí al solucionarle un problema con este plugin), mejora el currículo (puedo demostrar capacidad de liderar un proyecto, experiencia con PHP y WordPress, Javascript, etc) y mas. Respecto a la parte personal, cada vez que recibo un correo de una persona agradeciendome por el trabajo, por el tiempo ahorrado al utilizar este programa, al ver ejecútandose en sitios conocidos o muy extraños. Me alegra saber que he ayudado a otra persona sin nada a cambio, además cuando recibo donaciones pues también es bien saber que se recibe una recompensa monetaria extra por un trabajo que muchas veces es para mí (para mi blog).

Si alguno tiene una idea o programa en mente, es sencillo y sienten que pueden ayudar a otro, liberelenlo bajo una licencia de código abierto, publiquen el repositorio y con el tiempo verás como crece con la ayuda de otros programadores. Realmente es una buena experiencia.

Si alguno desea conocer o probar mis 2 plugins, pueden hacerlo en las siguientes direcciones:

Happy Hacking!

1 comentario