sábado, 17 de enero de 2015

Tutorial Node.js: Avanzado


​ Hoy trataremos la librería Express.js que podemos usar en Node.js para lograr tener un manejo de URLs, cargar archivos y mostrar contenido de una forma más sencilla.

Express.js lo podemos usar simplemente en nuestro proyecto, al agregar la librería en nuestro archivo que ejecuta el servidor, aunque de esta forma ciertamente tenemos muchas facilidades, realmente no estamos aprovechando en su totalidad a Express.js, ya que podemos crear un proyecto completo que contenga carpetas y permita de forma intuitiva entender y trabajar el.

Al igual que cualquier otra librería en node.js podemos usar el package.json o instalar Express.js con el comando ​npm install express.

1 - Hola Express.js
Al usar la librería, la estructura del archivo luce diferente, porque no tenemos un área en la que se cree el servidor y código que se mantenga en ejecución todo el tiempo, más bien tenemos una configuración inicial del servidor que indica el uso de Express.js (líneas 6 y 7), luego tenemos el manejo de las rutas que estan escuchando cualquier consulta a través de los métodos:
  • get:Muestra información consultada. El link puede contener atributos con valores, como por ejemplo /inicio?nombre=Tony&apellido=Lattke.
  • post:Recibe información. El link guarda dentro la información cifrada y por tanto este no debería mostrar los valores de los atributos. Este método es el que solemos usar para enviar contraseñas al iniciar sesión
  • put:Actualiza información.
  • delete:Elimina instancias.
Para el ejemplo vemos en la línea 11 que se usa el método get para manejar la consulta al link /, que significa consultar el link localhost:3000 y mostrará el mensaje Hola Express. Para cualquier otro link dará error la consulta, ya que no se posee una página por defecto.

2 - Manejo de URLs con Express.js
El manejo de los URLs mejora en gran medida gracias a Express.js, ya que no tenemos que interpretar el string "manualmente" y podemos inclusive extraer valores con el uso de variables dentro del link.

En la línea 12 del ejemplo tenemos una función que maneja el link /objeto/:id, esto significa que podemos hacer uso del valor que sea pasado a través de la consulta, accediendo a la variable req.params.id. Y para el ejemplo lo que tenemos es que se imprime este valor dentro del HTML. El potencial de esta variable es muy alto ya que podemos hacer consultas a la base de datos, mostrar contenido según el año, país... usen su imaginación :)

Un link sin pasar valores es muy parecido, ejemplo de esto es la línea 16.

Un contenido por defecto lo tenemos al colocar la expresión *, esto significa que no importa el link, si este no se iguala con los 2 anteriores, mostrará siempre el mismo contenido que maneje esta función.

3 - Projecto con Express.js

Ahora bien si queremos hacer un proyecto bien estructurado lo mejor que podemos hacer con Express.js es crear la aplicación completa con el comando express miprueba donde miprueba es el nombre de la aplicación. Este último comando creará una carpeta con el nombre miprueba con carpetas y archivos que se estructuran como la siguiente imagen:


Luego lo que necesitamos es ejecutar dentro de a carpeta npm install para instalar todas las librerías necesarias. El significado de esta estructura de archivos es la siguiente:
  • app.js: Contiene todos los enlaces a las carpetas del proyecto.
  • package.json: Se encuentran los requisitos de las librerías.
  • bin: Tiene la configuración, creación, manejo de errores y eventos del servidor .
  • node_modules: Se encuentran todas las librerías descargadas y usadas en el proyecto.
  • public: Es la carpeta donde colocaremos todos nuestros archivos de imágenes, javascript y css.
  • routes: Aquí se encuentran todas las funciones que manejan los URLs. Solemos llamar a esta sección la encargada de la lógica de nuestra aplicación.
  • views: Contiene nuestros archivos HTML, solo que usamos la extensión .jade para hacer uso de etiquetas y funciones especiales para estructurar el HTML más fácilmente.
    • error.jade: Página para mostrar errores.
    • index.jade: Página de inicio en la ruta /. Hereda layout.jade
    • layout.jade: Página base en la que podemos tener la estructura plantilla que usarán todas las vistas. Esta página se suele estructurar de tal forma que todas puedan heredar de ella.
Finalmente para ver nuestro proyecto en funcionamiento ejecutamos DEBUG=miprueba ./bin/www​ y con esto veremos en el explorador al consultar localhost:3000, una página parecida a la siguiente imagen (puede que con actualizaciones en la librería esto cambie).


Hasta este punto ya tenemos una noción de como se estructura un proyecto web que usa un Framework, porque así como este existen otros que estructuran de una forma muy similar y que veremos en próximos tutoriales. Para más funciones se puede consultar la página oficial de Express.js.

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Descarga aquí todos los archivos fuente.

No hay comentarios:

Publicar un comentario