DevNote

 Generador de Arquitectura ExpressJS

Introducción

Nos puede pasar que necesitemos iniciar un nuevo proyecto (bajo las condiciones de hacerlo sobre NodeJS) y es necesario empezar rápido y organizado, pues aquí les traigo una solución generosa de parte de la librería ExpressJS. Con el paquete express-generator podremos dar inicio rápido al desarrollo de nuestros proyectos, que incluso nos incluye trabajar sobre nuestras vistas, ya que con este generador estaremos trabajando con el modelo de arquitectura MVC. Puedes saber más de MVC aquí.

Que necesitamos

Realmente es muy sencillo iniciar un proyecto con express-generator, solo necesitamos tener instalado en nuestra PC NodeJS en su última versión estable. Igualmente pueden seguir la documentación de Express aquí.

Manos a la obra

Lo primero que debemos hacer es instalar globalmente el paquete anterior mencionado, de la siguiente manera:

npm install -g express-generator

Luego vamos a la carpeta donde queremos que se cree nuestro proyecto (Ojo, si queremos crear el proyecto project_pug, no creen la carpeta con este nombre, ya el generador nos crea está carpeta por nosotros). Para generar el proyecto con soporte de vistas pug haremos lo siguiente:

express project_pug --view=pug .

Luego que se genera el proyecto con su respectiva estructura (tarea que hace por nosotros), procedemos a entrar en el directorio del proyecto e instalar los paquetes necesarios.

cd project_pug/
yarn install ó npm install

Como ven lo pueden instalar ya sea con el gestor de paquetes NPM o Yarn, como ustedes prefieran. Una vez todo instalado procedemos a ejecutar y visualizar su funcionamiento en el navegador.

yarn start ó npm run start

Listo ya en este punto podemos empezar a desarrollar. Cabe destacar que no solo podemos iniciar con el generador de vistas pug, hay otras como jade, hbs, hjs, etc., que igualmente podemos ver con este comando:

express --help

Nota: También podemos iniciar nuestro proyecto sin vistas, ideal para crear nuestras Web API.

Como por aquí nos gusta usar Typescript, también hay un generador de proyecto para ello, mucho más simple, no tiene las opciones de ayuda, ni generador de vistas como el anterior. Está diseñado para que se comporte como una Web API. Este paquete es express-generator-typescript, aquí les dejó el enlace para que le puedan echar una ojeada.

Bien sin más me despido, espero que les sea de mucha ayuda para empezar sus proyectos y que se fijen como distribuyen los contenidos del proyecto y aplicar buenas prácticas en su desarrollo, hasta pronto.

Arquitectura Modelo Vista Controlador

Introducción

Seguro habrás escuchado sobre el Patrón de diseño MVC o si no lo has escuchado, perfecto sabrás un poco sobre el ámbito del desarrollo web después de leer está publicación.

Empecemos comentando que son los Patrones de Diseño.

Patrón de Diseño

No es más que una estructura bien definida y comprobada para solucionar problemas especifico en el desarrollo de software (Aplicaciones Web, Móviles, Robótica, etc). Por lo general estos problemas se han presentado varias veces en la historia y lo que se hace es estructurar una forma común de resolverlo. Algo así, para no estar reinventando la rueda.

¿Qué es MVC?

MVC en sus siglas en ingles Model-View-Controller, que en su traducción al español es Modelo-Vista-Controlador, es una estructura de software que parte el desarrollo en dos partes, uno que se focaliza en la interacción del usuario con la aplicación y otra en la gestión de la información del negocio. Con este Patrón busca solucionar problemas de organización de proyecto, ya que de esta forma todo queda de forma modularizada y permite la reutilización de código.

Este modelo lo podemos ver con un ejemplo más digerible a lo cotidiano, que podría ser de la siguiente manera: Se quiere hacer una encuesta para obtener de una población el porcentaje de quienes les gusta el chocolate amargo, entonces:

• Vista (View): Es toda interacción con el usuario hacia el sistema, por lo general de forma visual. Para el ejemplo anterior, sería la hoja con la encuesta o formulario web y las gráficas que obtenemos a partir de los resultados.
• Modelo (Model): Es donde almacenamos la información de nuestro sistema, por lo general lo trabajamos con base de datos y muchas veces lo llamamos como la persistencia de datos. Para nuestro ejemplo, sería nuestro documento de texto o boceto con las preguntas a realizar y el archivador o las hojas de cálculo con las respuestas obtenidas.
• Controlador (Controller): Aquí donde se concentra la lógica que interrelaciona la vista con el modelo. Básicamente este módulo se encarga de recibir las interacciones del usuario con el sistema, comprender que desea el usuario y emitir un evento para informar al usuario con lo solicitado. Mientras hace lo anterior, debe verificar si debe obtener o guardar la información en la base de datos. Siguiendo nuestro ejemplo, sería la vez que estamos generando los bocetos, la parametrización de las gráficas a generar a partir de los resultados, guardando las respuestas, etc.

 Instalación Vue con Typescript

Introducción

Seguro más de uno conocerá el Framework VueJS, que en resumen es un marco de trabajo para desarrollo frontend con Javascript. Este posee todo un ecosistema que nos permite gestionar componentes, manejar estados por componente y/o global en la aplicación, manejo de rutas, entre otras utilidades que poco a poco se han ido acoplando a este framework. Además en sus ultimas versiones se puede trabajar con Typescript (En este caso hablo de la versión 2, pero la 3 también tiene la posibilidad de trabajar Javascript o Typescript).

En está publicación haremos los pasos básicos para hacer una instalación de Vue con Typescript, que poco se puede ir añadiendo elementos y UI que disponibles para este framework.

Requisitos del sistema

• Tener instalado la última versión estable de NodeJS.
• Tener acceso al terminal de comandos.
• (Opcional) Tener instalado globalmente Yarn.

npm install -g @vue/cli

vue --version

vue create vue-typescript

Aquí podemos seleccionar como que queremos nos indique los errores y aplicación de mejores prácticas en nuestro código. En este caso selecciono solo ESlint con prevención de errores, así me menciona los errores de sintaxis (que no son más que advertencias) y me deja continuar si no afecta el funcionamiento de la aplicación:

cd vue-typescript

yarn serve

npm serve

Ya en este punto nuestro proyecto Vue está funcionando y listo para empezar a desarrollar sobre él. Incluso si abrimos el archivo src/components/HelloWorld.vue veremos una sintaxis parecida a esta:

Y si queremos verlo desde nuestro celular o verlo desde otra PC en nuestra casa o trabajo (dependiendo de las restricciones de seguridad de la empresa donde laboren), pueden hacer este ajuste en los script del package.json y aquí ya podrían colocar la IP de su máquina en la URL del navegador de los otros dispositivos seguido del puerto.

Conclusión

Configurar Environments para NestJS

Introducción

Para casi cualquier proyecto de desarrollo, es necesario tener variables globales para el proyecto, que cambiarán según en el entorno que estemos. Por lo general se genera uno o más archivos environments, y para los que usamos el Framework NestJS no es la excepción.

Aquí haré un ejemplo corto de como configurar en NestJS las variables de entorno a nuestra aplicación.

Requisitos del sistema

• Tener instalador NodeJS en nuestro S.O., mínimo la versión estable 12.
• Tener acceso al terminal de comandos.
• (Opcional) Tener instalado el gestor de paquetes yarn globalmente.

npm i -g @nestjs/cli

nest new project-devnote

cd project-devnote

yarn start:dev ó npm run start:dev

yarn add @nestjs/config

npm i --save @nestjs/config

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ConfigModule } from '@nestjs/config';

@Module({
    imports: [
        ConfigModule.forRoot({
            envFilePath: process.env.NODE_ENV
                ? `.${process.env.NODE_ENV}.env`
                : '.development.env',
        }),
    ],
    controllers: [AppController],
    providers: [AppService],
})
export class AppModule {}
    

Como pueden ver entre los parámetros del ConfigModule.forRoot se le está indicando el envFilePath que no es más que el archivo de configuración. En este caso lo hice dinámico para diferentes archivos de configuración.

Ahora para hacer funcionar debemos crearnos un archivo .developement.env, no se olviden crearlo con el punto(.) por delante y en la raíz de nuestro proyecto. Debe quedar así.

NODE_ENV=development
DB_HOST=localhost
DB_USER=admin
DB_PASSWORD=admin
DB_DATABASE=devnote
    

Donde la variable NODE_ENV la dejé con el mismo nombre del archivo para no confundirnos más adelante y que tampoco lo sustituya la aplicación cuando entre en ejecución.

Ahora para que la ejecución del proyecto reconozca cual environments va a leer las variables, procedemos a editar los parámetros del script de ejecución de NestJS. Vamos a ir al archivo package.json y nos vamos a ir al script start:dev, donde añadiremos por delante NODE_ENV=development.

Luego para verificar que si esté funcionando, vamos a editar el src/app.service.ts para que en vez de devolvernos el Hello World! que tiene por defecto, nos devuelva nuestras variables de entorno. Lo dejaremos de la siguiente manera:

Y aquí el código para que lo puedan copiar y pegar:

import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  getHello(): Object {

    return {
      NODE_ENV: process.env.NODE_ENV,
      DB_HOST: process.env.DB_HOST,
      DB_USER: process.env.DB_USER,
      DB_PASSWORD: process.env.DB_PASSWORD,
      DB_DATABASE: process.env.DB_DATABASE,
    }
    // return 'Hello World!';
  }
}
    

También editaremos el archivo src/app.controller.ts, donde solamente cambiaremos para que el método de getHello, que la función retorné un valor de tipo Object.

Con todo esto ya debe funcionar nuestro proyecto con las variables de entorno, ahora lo volvemos a ejecutar con el mismo comando en el terminal (Importante que esté detenido la aplicación). Una vez en ejecución, volvemos a nuestra pestaña del navegador y recargamos, para que nos aparezca todas nuestra variables, así como aquí muestro:

 

Conclusión

Realmente es sencillo agregar environments a NestJS, si es un poco metódico pero se pueden sacar buenos resultados y dinámicos, con el cual nos puede satisfacer para distintos entornos. Al final puedes agregar cuantos environments deseen, siempre y cuando el comando de ejecución se especifique cual usar. Bueno sin más que decir, me despido y espero sus comentarios de como les fue con está práctica con el Framework NestJS.