Noticia Tutorial NodeJS: Crear un portafolio estilo “GNOME Software” con el MEAN Stack

compudemano · 13 Feb 2014

NOTA: En este tutorial no planeo enseñarles todo lo referente a desarrollo web de una forma completa, simplemente vamos a hacer un rápido overview de lo más importante, crearemos nuestro proyecto y de ahí podrán seguir aprendiendo por su cuenta si así lo desean con los elementos bibliográficos que les dejaré al final.

El MEAN Stack (MongoDB, ExpressJS, AngularJS y NodeJS) es la “nueva corriente” del desarrollo web y nos permite crear aplicaciones y sitios web en cuestión de minutos gracias a un concepto de prototipado rápido y la convergencia de las plataformas a través de integridad en el código.

Al desarrollar en NodeJS (La implementación de Javascript en el servidor) podemos crear de todo: Desde aplicaciones y páginas web, pasando por apps en shell y nativas para escritorio/móvil o incluso hasta drivers para hardware, todo con prácticamente 1 solo lenguaje de programación la mayoría del tiempo: Javascript (o en su defecto, Coffeescript).

Hoy nos centraremos en el desarrollo web como ejemplo y lo que estaremos creando será un sitio web de portafolio tomando como entes figurativos para nuestra base de datos los proyectos OpenSource de mi empresa Xenode Systems.

¿Porqué decidí hacer esto? Porque tenemos mucho código por liberar (además del que ya hay) y se necesita un lugar centralizado a donde la gente pueda recurrir para ir a conocer lo que tenemos en este ramo, así que ¡a matar 2 pájaros de 1 tiro! LOL! xD

¿Y porqué publicar este tipo de tutorial en DesdeLinux? bueno, pues porque lo que vamos a estar construyendo el día de hoy (además de basarse en software libre y ser open source como tal) va a estar inspirado en la UI del Gnome Software Center para añadirle un poco de humor y vibra linuxera a las cosas jajajaja:

Paso 1: Prototipado

Lo primero que uno hace al crear un nuevo proyecto web, es “bajarlo en papel” por medio de planeación para la base de datos y wireframes.

Esta es mi parte favorita del proceso y es de hecho la más importante. Lo primero que hacemos es definir qué entidades conformarán nuestra base de datos.

En el caso de un portafolio basado en la UI que mostré, yo sé que quiero guardar Proyectos que tengan los siguientes datos:

ícono
nombre
descripción
autor
dirección BTC
dirección LTC
urls

Ahora a los wireframes. Para hacer éstos ocupamos una herramienta que se llama evolus-pencil (click en el enlace para ir a la página oficial del proyecto y así descargar el programa); Éste es multiplataforma.

Una vez instalado lo abrimos y el uso es bastante sencillo, sólo tenemos que ir arrastrando elementos al lienzo para ir dibujando nuestra interfaz.

En el caso de este proyecto, yo sé que únicamente voy a usar 2 vistas para el usuario: Una para mostrar todos los proyectos y una para mostrar 1 solo proyecto.

En programación web, la manera en que uno define sus vistas/rutas es en base a los nombres de las 7 acciones RESTful conocidas:

Index: Muestra todos los proyectos
Show: Muestra 1 solo proyecto
New: Muestra 1 formulario para crear un nuevo proyecto
Create: Es lo que sucede entre que rellenamos el formulario de New y el proyecto se crea.
Edit: Muestra 1 formulario para editar 1 proyecto existente
Update: Es lo que sucede entre que cambiamos los datos del formulario de Edit y el proyecto se guarda.
Destroy: Es lo que sucede cuando eliminamos un proyecto de nuestro portafolio

Más adelante nos adentraremos en esto, pero de momento es importante que sepan que ocuparemos crear 2 wireframes de vistas nada más para esta web: el de index y el de show, ya que únicamente serán esas 2 vistas las que vea el usuario final.

Sin más barullo, estos serían los wireframes de la UI (más no del sitio completo como tal) que vamos a crear para que se den una idea:

Cuando uno hace wireframes no es importante que nos queden 100% bien o no, sólo importa que de hecho los hagamos. ¿Porqué? sirven bastante bien para darse una idea de qué es lo que vamos a programar: tanto en interfaz como en funcionalidades (y también conceptualizar el requerimiento de algún proyecto que tengamos que realizar ya sea para nosotros o para alguien).

De hecho, en mi proceso, les puedo asegurar que un 90% del tiempo el concepto final difiere aunque sea un poco del primer wireframe realizado, pero éste me ayuda a entender la idea más allá del “vaporware” que puede generar mi imaginación jajajajaja.

Una pausa: Entorno de trabajo

Para poder llevar acabo nuestra hazaña, requeriremos tener instaladas en nuestro equipo todas y c/u de las piezas del MEAN Stack así como también a la mean-boilerplate.

El proceso de cómo lograr ambas cosas lo describo en este post dentro de mi blog oficial, así que aquí te pido que hagas una pausa y vayas para allá a preparar todo lo necesario para comenzar a trabajar.

De aquí en adelante asumiré que el lector tiene instalado todo lo necesario y ya tiene preparado su esqueleto de trabajo acorde a las instrucciones de aquél tutorial.

NOTA: Para efectos de este tutorial, recomiendo llamar a tu proyecto base portfolio.

Paso 2: ¡A programar se ha dicho!

Ok. Ya tenemos la plantilla y los elementos del mean stack instalados, ¡perfecto! Ahora convertiremos ese proyecto de boilerplate en un portafolio web tal y como hemos planeado, a lo que vamos:

MVC

Las aplicaciones web hoy en día se centran en un concepto programático llamado “MVC” o “Model, View, Controller” que básicamente se conforma de estos 3 elementos:

Modelos: Son archivos de configuración para aspectos de la base de datos
Vistas: Las “páginas/pantallas” con las que se interactúa en la aplicación
Contoladores: En términos sencillos “el pegamento” entre los Modelos y las Vistas

Primero lo primero: el modelo

Si abrimos nuestro proyecto base (creado con la mean-boilerplate como les indiqué arriba) en nuestro gestor de archivos veremos que hay varias carpetas en él, entre ellas una llamada entities.

La función de dicha carpeta es guardar subcarpetas de las entidades que manejaremos dentro de la base de datos (en este caso ya dijimos que manejaremos proyectos).

Y dentro de ella por ahora, encontrarán 2 archivos: adminAuth.coffee y cryptography.coffee (en los que no nos vamos a centrar para nada) y otra carpeta que se llama dummies.

Renombraremos esta última a projects por favor y abrimos la carpeta del proyecto entero (portfolio) en nuestro editor de texto favorito:

Dentro de la recién renombrada projects, veremos 2 archivos controller.coffee y model.coffee. Son archivos coffeescript, uno para el modelo y uno para el controlador, abrimos el archivo del modelo en nuestro editor y cambiamos las palabras siguientes por su respectiva contraparte:

Dummy – Project
Dummies – Projects
test – portfoliodb

Además de poner las propiedades necesarias para los Proyectos dentro de nuestra base de datos en el esquema… El código final resultante deberá verse así:

Portfolio – model.coffee (Descargar Gist)

Básicamente lo que acabamos de hacer es “describir” nuestra base de datos en un archivo coffeescript y esto es “modelar” una base de datos en desarrollo web.

El esquema para nuestra entidad (los proyectos) declara qué propiedades tendrá cada proyecto (las mismas que ya habíamos dicho arriba en este caso) y qué tipo de dato vamos a usar para almacenarlas, en este caso todas son texto (strings).

Ahora, el controlador

Ahora es el turno del controlador. (Abramos el archivo entities>projects>controller.coffee en nuestro editor de texto); Dentro el controlador debemos definir las rutas dentro de nuestra aplicación para las 7 acciones RESTful de las que hablamos anteriormente y escribir el código que se ejecutará en cada una de ellas para lograr las interacciones CRUD (Create, Read, Update, Delete); Les refresco la memoria:

Index: Muestra todos los proyectos
Show: Muestra 1 solo proyecto
New: Muestra 1 formulario para crear un nuevo proyecto
Create: Es lo que sucede entre que rellenamos el formulario de New y el proyecto se crea.
Edit: Muestra 1 formulario para editar 1 proyecto existente
Update: Es lo que sucede entre que cambiamos los datos del formulario de Edit y el proyecto se guarda.
Destroy: Es lo que sucede cuando eliminamos un proyecto de nuestro portafolio

Explicar lo que se tiene que hacer en c/u a nivel código me llevaría mucho tiempo y va más allá del objetivo de este tutorial, así que mejor les dejo por acá el código final del controlador, reemplacen el código dummy que hay dentro del que tienen por éste por favor:

Portfolio – controller.coffee

Lo que es importante entender aquí es que el código coffeescript que ven ahí en el enlace, lo que hace es precisamente lograr la descripción funcional de c/u de las acciones REST según corresponde en nuestra aplicación.

Si un usuario se va a la vista de index (la página principal donde se ven todos los proyectos) la acción index del controlador llama al modelo y le pide todos los proyectos, el modelo a su vez se los pide a la base de datos, ésta se los da, el modelo se los regresa al controlador y el controlador finalmente logra renderizarlos en la vista para el usuario (claro que ésta no es la explicación más exacta y veraz de lo que pasa, pero es más fácil que lo entiendan así si nunca han programado nada de ésto).

Y así sucesivamente según la acción que estemos agendando en X momento. Nótese que la acción index tiene una ruta más que es la que usamos para la magia de AngularJS más adelante jeje.

Finalmente, las vistas

Las vistas son “lo que el usuario ve”, y esto es, la expresión gráfica del código que hemos escrito hasta ahora así como también de los entes que tengamos guardados dentro de la base de datos.

Cuando desarrollamos con el MEAN Stack, nuestras vistas usan Jade en lugar de HTML y en el caso de la mean-boilerplate Less en lugar de CSS. Ahora nos iremos a la carpeta views de nuestro proyecto portfolio y renombraremos la carpeta dummies por projects otra vez para este segundo caso…

Igual que en el caso del controlador no vamos a adentrarnos a cuestiones más profundas aquí, pues nos iríamos lejos del propósito de este tutorial, pero para el código de las vistas (guardadas en la carpeta “views/projects” del proyecto “portfolio” como ya dije) usaremos los siguientes snippets:

En esta parte es importante destacar que las vistas usan tanto Jade como HTML y AngularJS mezclados según el caso. También es importante que sepan que Jade no es solo un simple preprocesador de HTML que hace que escribirlo sea más fácil sino que también añade características programativas como controles de flujo, loops, variables, javascript invisible al usuario (aunque esté escrito en la vista) y más.

De hecho, 2 de los campos que estoy ocupando en mi modelo les saco doble partido gracias a Jade, uno es author_url y el otro es urls: Estos 2 campos son strings (texto) dentro de la base de datos, pero por ejemplo en el caso de author_url relleno el formulario de “nuevo proyecto” para la base de datos con el usuario de twitter del autor y su url con una línea de texto que se parece a esta:

"@Jmlevick, http://twitter.com/Jmlevick" (Obviamente sin comillas)

y lo que hago con Jade en la vista show del proyecto es convertir esa string en un array separándola en el “, “ así puedo tomar el usuario como texto para un link y la url como el hipervínculo que se muestra en la vista individual “show” de cada proyecto (como veremos en vivo más adelante).

Este mismo truco lo aplico para URL’s y es una manera fácil de trabajar con campos que pueden ir necesitando varias cosas que se van a usar en las vistas según evolucione la app (especialmente en el caso de urls, que guarda 1 url para el demo y 1 para el git repo, pero quizá necesite 1 para descarga en el futuro por ejemplo).

De esta manera eliminas la necesidad de nuevos campos en la base de datos (sobretodo porque por ejemplo en este caso hay proyectos que por decir, no tendrían demo). He ahí la utilidad de Jade.

Paso 3: Diseño

Claro que un montón de Jade/HTML sin estilo no se va a parecer nada al Gnome Software Center, y es aquí donde entran en juego LESS y los assets estáticos.

Si nos vamos en nuestro gestor de archivos a la carpeta public de nuestro proyecto portfolio veremos la siguiente estructura de directorios y archivos:

Dado que los cambios y código aquí son bastante grandes (más que nada por las imágenes y así), necesito que borren todo el contenido de su carpeta public y la dejen vacía.

Descargaremos este comprimido (está en la CDN que ocupo para Xenode Systems, así que es una descarga segura HTTPS y además estará siempre disponible gracias a SpiderOak.

Y extraeremos sus contenidos en dicha carpeta vacía, para poder seguir con el tutorial… (Luego borramos el comprimido y la carpeta “public” que genera en la extracción); Aquí hay 2 cosas especialmente importantes:

public/coffee/custom.coffee

Guarda todo el código Coffeescript que vamos a ejecutar del lado del cliente, en este caso lo utilizo para las cuestiones de AngularJS, como verán en los comentarios:

De este archivo es importante destacar que hace absolutamente todo lo “interactivo y ajax” de la aplicación. No hay absolutamente nada de jQuery corriendo en el cliente.

De hecho un consejo que les doy es que si van a usar el MEAN Stack, traten de NO usar jQuery por más tentador que esto pueda ser. AngularJS ofrece mejores maneras de hacer las cosas y no sólo sirve para frontend, si le dan bien una oportunidad, verán que se terminan enamorando

La mean-boilerplate tiene jQuery integrado, y lo dejé en esta app porque en un futuro cuando se tengan más de 100 proyectos OpenSource en el portafolio oficial de Xenode Systems será bueno integrar scroll infinito y eso quiero hacerlo con esta librería porque quiero liberar mi propio plugin para dicha tarea.

Ahorita que veamos nuestra app en acción, se darán cuenta de cómo Angular no sólo nos permite búsquedas en vivo con animaciones por medio de ésa promesa que se ve en el código de arriba, sino que también se encarga de cosas más simples como el efecto “hover” para los proyectos y otros bindings por el estilo.

public/css/overrides.less

Esto es lo que le da el diseño estilo “Gnome Software” a las views, cabe destacar que todo el diseño de la aplicación está hecho en LESS y funciona gracias a las últimas tecnologías web (HTML5, CSS3) no hay ni una sola imagen de fondo por ejemplo.

El archivo overrides.less se compila a css automáticamente al correr el servidor y éste último es lo que llamamos en nuestra layout.

Otra Pausa: Generalidades

app.js

Este es el archivo “madre” de todo proyecto creado con ExpressJS (lo encontrarás en la raíz de tu proyecto portfolio), y el código que usaremos aquí es el siguiente:

Portfolio – app.js

package.json

Es el archivo que define cómo se llamará nuestra aplicación ante “npm” (node package manager) y otros lugares… También define las dependencias de la aplicación.

Aquí sólo tenemos que cambiar las líneas 2 y 3 para que reflejen un mejor nombre/versión (Ojo: el nombre va parametizado, nada de acentos, caracteres raros o espacios) para nuestra app:

routes.coffee

Son las rutas de nuestra aplicación (las URL’s a las que se puede navegar dentro de la app si quieres verlo así); Aquí el código deberá quedarte así:

Portfolio – routes.coffee (Descargar Gist)

Aquí básicamente importamos los controladores de c/u de los entes dentro de nuestra base de datos (en este caso sólo hay proyectos) y luego definimos otras rutas base (o que vayan sin controlador) yo simplemente redirijo la ruta raíz a la index de proyectos en este archivo para efectos de esta app por ejemplo.

app.yaml

Este archivo es específico de la mean-boilerplate y guarda variables especiales que no quieres dejar “a la mano en el código”. Se encuentra en portfolio/config y en él debemos cambiar los valores de tanto adminuser como password dentro de todos los entronos de manera que sólo nosotros conozcamos ese login, ya que en esta app sirve para acceder a funciones administrativas como crear, editar y borrar proyectos dentro de nuestro portafolio, ejemplo del cambio:

Otra Pausa: La base de Datos

Para poder ver nuestro proyecto funcionando, antes de abrir el localhost necesitamos seed data (de esta manera no tenemos que rellenar la base de datos a mano y tenemos algo que ver desde el inicio).

Para obtener dicha data haremos otra descarga directa de la CDN oficial de Xenode Systems (powered by SpiderOak) con el objetivo de obtener este otro archivo. Lo descomprimimos en nuestra carpeta personal y corremos en consola:

mongorestore -d portfoliodb ~/dummydata/portfoliodb

Básicamente, hemos terminado. Ahora nos vamos en consola hasta la carpeta del proyecto y lo iniciamos localmente:

1. cd ~
2. cd codeprojects/portfolio
3. npm start

Nos dirigimos en nuestro navegador web a http://lvh.me:3000 (acá el porqué este truco funciona) y si hicimos todo bien, deberíamos ver algo como esto:

Apláudanse y prueben su nuevo portafolio. Pueden buscar proyectos por nombre (y verán las animaciones básicas de AngularJS) ver la información específica de un proyecto, administrar sus proyectos y crear nuevos (en http://lvh.me:3000/projects/admin siempre y cuando usen su usuario y contraseña definidos en el app.yaml previamente).

Ver cómo el diseño se adapta a todo tipo de resoluciones desde 320px de ancho (móviles) hasta 1200px y superior (pantallas FullHD) Gracias a twitter bootstrap y demás…

Esta es una implementación lo más bare-bones posible para un sitio de este tipo y todavía se le pueden agregar y mejorar muchas cosas a entera personalización y gusto de quien lo monte. Eso les quedará de tarea jeje.

Paso 4: Deployment

Llegamos hasta acá… Sólo nos falta subir nuestra creación a la nube donde todo mundo pueda verla. En este paso hay muchas maneras de proceder y cada quién decidirá irse por una o por otra según sus necesidades y entorno, por lo tanto no tiene caso dar un workflow específico para este paso.

Sólo puedo recomendarles que si no tienen un servidor/nube de elección siempre pueden usar Heroku con la extensión MongoHQ para MongoDB (Tip: usen la versión sandbox de MongoHQ para un proyecto gratuito) y pues, información y how-to sobre este tipo de deployment la tienen en este enlace oficial.

Ahora, Sigue tu aprendizaje

Si te gustó lo que hicimos aquí, te recomiendo seguir aprendiendo sobre desarrollo con el MEAN Stack, he aquí una serie de recursos que te pueden resultar útiles en tu viaje como web developer:

Y pues si tienen dudas no lo piensen 2 veces: Contáctenme directamente vía twitter o para más rápido, pregunten en el facebook oficial de Xenode Systems (si no puedo contestar yo en el momento que escriban algún otro miembro del equipo o los mismos fans lo harán).

También, si alguien quiere un trabajo de desarrollo web se lo podemos hacer (trabajamos globalmente) pidan su cotización directamente en nuestra web oficial.

P.D. Hay bastantes cosas que puedes hacer para complementar el proyecto que creamos en este tutorial, entre ellas personalizar las páginas de error, mejorar el código less o bien, implementar alguna funcionalidad extra según se te ocurra. El código dummy que dejo en este tutorial está pensado para que precisamente construyas a partir de él y vayas aprendiendo. Espero que conforme vayas comprendiendo más y más acerca del desarrollo con el MEAN Stack este portafolio te sirva para ir “haciendo pruebas de campo” y al final termine siendo mucho más completo que lo que implementamos acá, happy coding!

Para ver el portafolio oficial de Xenode Systems pueden visitar: http://open.xenodesystems.com

Nos leemos en los comentarios.

Continúar leyendo...

Buscar

Buscar

Noticia Tutorial NodeJS: Crear un portafolio estilo “GNOME Software” con el MEAN Stack

compudemano

Moderador