DevNote

Crear servidor mongo con Docker

Introducción

Que necesitaremos para este tutorial

• Docker y docker compose instalado en su sistema operativo.
• IDE para escribir las configuraciones.
• Algún cliente para conectarse a la Base de datos, por ejemplo NoSQLBooster o Robo3T.

    MONGO_INITDB_ROOT_USERNAME=admin
    MONGO_INITDB_ROOT_PASSWORD=admin

    version: "3.7"

    services:
        mongo:
            image: mongo:4.4
            restart: always
            env_file: .env
            ports: 
                - 27017:27017

    docker-compose up -d

¿Quieres aprender más sobre los fundamentos de docker? Te ofrezco un cupón con nuestro curso Docker: Desarrollo Práctico, ingresando desde aquí.

Validaciones con Framework NestJS

Introducción

Cuando estamos construyendo Web API para nuestras aplicaciones, debemos garantizar que el cliente debe enviar los parámetros correctos y necesarios para que nuestra funcionalidad no se rompa o genere algún error en el proceso a realizar. Muchos frameworks actuales para aplicaciones Web tienen este módulo y como es de esperar, el Framework NestJS también nos facilita dicha validación.

Para este ejercicio tendremos como base el CRUD creado en está publicación (aquí), donde ya tenemos todo listo y configurado.

Manos a la obra

Lo primero que haremos es instalar unos paquetes necesarios para que el componente ValidationPipe nos facilite las validaciones en el framework. Dichos paquetes los instalamos de la siguiente manera:

yarn add class-validator class-transformer

Luego de haber instalado vamos a proceder a crear una clase CreateCourseDto, donde colocaremos las validaciones de nuestra API. Aquí nos centramos en la Post, que precisamente es para crear un curso que estamos siguiendo, y que para la creación es necesario el nombre (name) y el estado (state). Para crear nuestra clase podemos ejecutar la siguiente instrucción:

nest g cl course/CreateCourseDto

Nos crear el archivo en src/course/create-course-dto.ts con su respectivo spec. Luego debe quedar lo siguiente forma:

import { IsString, MaxLength, IsNotEmpty, IsEnum } from "class-validator";
import { State } from '../app.service';

export default class CreateCourseDto {

    @IsString()
    @MaxLength(20)
    @IsNotEmpty()
    name: string;

    @IsNotEmpty()
    @IsEnum(State)
    state: State;

}  

Nota: Pueden copiar y pegar el código, pero les recomiendo que al menos un atributo lo escriban para que vayan viendo las ayudas y descripciones de cada validación.

Básicamente creamos unos atributos a la clase y sobre cada uno de estos atributos le colocamos decoradores que son como tal las validaciones. Aquí la descripción de cada uno:

• IsString: La entrada deber ser una cadena de caracteres.
• MaxLength: La cadena de caracteres tiene un tamaño máximo de caracteres.
• IsNotEmpty: El atributo es requerido, por lo tanto debe tener valores
• IsEnum: El atributo debe corresponder al Enum especificado. En nuestro ejemplo, debe ser wait, progress y completed. 

yarn start:dev

import { IsString, MaxLength, IsNotEmpty, IsEnum } from 'class-validator';
import { State } from '../app.service';

class CreateCourseDto {
  @IsString({
    message: messageProperty('debe ser una cadena de texto'),
  })
  @MaxLength(20, {
    message: messageProperty('debe ser máximo $constraint1 caracteres'),
  })
  @IsNotEmpty({
    message: messageProperty('es requerido'),
  })
  name: string;

  @IsNotEmpty({
    message: messageProperty('es requerido'),
  })
  @IsEnum(State, {
    message: messageProperty('no es válido'),
  })
  state: State;
}

function messageProperty(message: string): string {
  return `La propiedad $property ${message}`;
}

export default CreateCourseDto;    

Fíjense que el cambio que realice, además de colocar el export default al final, agregué una función que retorna por defecto el inicio de cada mensaje de error y un objeto json con la clave message dentro de cada decorador. Cabe destacar que los atributos $property y $constraint1 son propios de class-validator y cada uno trae el nombre de la propiedad validada y el o los valores de la regla respectivamente. Igualmente existe otra forma de obtener estos atributos, que nos puede permitir hacer lógica diferente para el tratamiento de los mensajes de salida.

Luego de lo anterior vamos a Postman y volvemos a hacer la petición para ver los cambios realizado en cuando a los mensajes de error.

Conclusión

He aquí el final de este ejercicio, ya dejo a su disposición hacer la prueba con el método Put de actualización de un curso y probar otras maneras de personalizar los mensajes de error. No está demás comentar que en la documentación del Framework NestJS nos cuenta un poco más de como usar en el proyecto, que pueden revisar desde aquí. Sin más me despido, muchas gracias por llegar hasta aquí, espero sus comentarios, hasta pronto.

Agregar Quasar Vue con Typescript

Introducción

En esta ocasión les traigo como integrar Quasar Framework a nuestro proyecto VueJS 2 con Typescript, cabe destacar que desde este enlace tengo la instalación de nuestro proyecto aquí. Quasar Framework nos muchas herramientas además de gran cantidad de componentes, una documentación bien hecha, tiene gran soporte, tiene soporte Typescript tantos en componentes como el CLI y permite integraciones web, ElectronJS y aplicaciones híbridas. 

Para realizar la integración sería factible que tuviesen el proyecto desde cero para no haber complicaciones en el camino.

Manos a la obra

Lo primero que haremos es editar el archivo .eslintrc que se encuentra en la raíz del proyecto, esto con el objetivo de que no falle la importación de Quasar al proyecto.

"@typescript-eslint/no-var-requires": 0,

Ahora dentro del directorio, vamos a ejecutar el siguiente comando (Con esto nos saldrá una interfaz en el terminal para ir haciendo las configuraciones):

vue add quasar

Luego elegimos Sass recomendado y en este caso usaremos MDI (Material Design Icons) o cualquier otro repositorio de iconos que prefiramos.

Configuramos el paquete de idioma que tendrá por defecto la aplicación y aceptaremos que tenga soporte multi-idiomas (si ustedes lo desean). Cabe destacar que deben revisar los idiomas disponibles desde el repositorio aquí.

Ya para finalizar, añadir las características que queremos agregar a la aplicación. En mi caso solo le dí soporte a Internet Explorer 11 (Que para estas fechas ya Microsoft indica que lo descontinuarán) y MDI, como para asegurar las importaciones de los iconos. 

Nota: Se selecciona con espacio las características que queramos agregar.

Ya una vez finalizado la instalación, podemos proceder ejecutando lo siguiente en el terminal:

yarn serve

Luego desde el navegador accedemos por URL http://localhost:8080/. En este punto parece funcionar todo bien. Haremos una pequeña prueba con un componente diseñado por ellos.

Vamos a dirigirnos a su sitio web en este enlace y en este caso buscaremos el componente Avatar y nos copiaremos el componente como describo a continuación

Nos copiamos esta línea y la vamos a pegar en el archivo src/components/HelloWorld.vue en la línea siguiente del logo. Así como les muestro a continuación.

En este caso modifique el atributo icon con mdi-blogger, porque justamente cambie los iconos por defecto de la aplicación. Igualmente podemos elegir otro icono buscándolo en este enlace.

Ya por último podemos guardar los cambios y automáticamente debemos ver los cambios en el navegador, así como vemos a continuación.

Conclusión

 Snippets con Visual Studio Code

Introducción

Para los que hemos trabajado con Visual Studio Code y hemos instalado algunos plugins para que nos ayude en el desarrollo y nos autocomplete algunos fragmentos que siempre u ocasionalmente usamos, eso mis queridos developers, son snippets. Básicamente un snippet en programación es un fragmento de código que por lo general usamos muchas veces en el desarrollo y que siempre mantiene una misma sintaxis.

Ejemplo que normalmente podemos ver, cuando se quiere hacer un if, ifelseif, switch, for, foreach, div, section, ul, entre otros más elaborados, ya sea para una librería, frameworks, textos en específicos. 

Así como los plugins hacen uso de estos dichosos snippets, nosotros también podemos darnos el lujo de crearlos a gusto. Ahora describo a continuación como crearlos de manera fácil. Para este ejemplo me apoyo en el Post Crud sencillo con framework Nestjs que cree anteriormente, pero igualmente ustedes lo pueden hacer con otro código que ustedes tengan y quieran pasarlo a un snippet.

Manos a la obra

Vamos a ir a Visual Studio Code, y vamos a dar clic sobre Extensions (Extensiones), que se encuentra en el panel del extremo izquierdo por defecto. Y una vez allí en el buscador de arriba (panel que remarco en azul), buscamos Convert text/code to a snippet.

Presionamos donde dice Instalar y esperamos a que finalice.

Una vez ya haya finalizado, procedemos a ir a nuestro código. Van a remarcar el código que ustedes quieran pasar a snippet, luego con la combinación de teclas Ctrl+Shift+P y escribiendo Conver, nos debe aparecer la opción para convertir que es Convert to Snippet. Presionamos allí y completamos la información de nuestros snippet que vamos a ir aceptando con Enter, así como veremos el siguiente ejemplo:

Título del Snippet

Descripción del Snippet

Script del Snippet (combinación de caracteres para activar el snippet)

Luego que presionemos Enter al último paso, en el Output de VSCODE, nos aparece el fragmento del snippet que se nos ha generado.

Ahora debemos guardar nuestro snippet para poderlo usar, para ello debemos igualmente realizar la combinación de teclas Ctrl+Shift+P y escribir Snippe, allí debemos seleccionar la opción que vemos a continuación:

Luego de seleccionar nos muestra donde está configurado los snippets que ya poseemos por defecto y los agregado con los plugins, en este caso yo elegiré crear uno global:

Le definimos un nombre a nuestro snippet:

Vamos a copiar únicamente está sección del Output de nuestro snippet.

Lo vamos a pegar después de las líneas comentadas del archivo snippet que nos creó VSCODE, y lo vamos a editar de la siguiente manera:

Donde ${#:texto} es nuestra entrada al snippet, que # quiere decir en que orden lo vamos a editar y el texto es el nombre descriptivo simple (para poder identificar que debemos colocar allí) que será sustituido por nuestroavariable o parámetro.

Guardamos los cambios aplicados en el archivo, ahora vamos a ir a nuestro código, vamos a escribir el script en alguna sección donde queremos colocar el resultado generado de nuestro snippet, que seguramente mientras escribes, VSCODE te va mostrar un cuadro de dialogo para autocompletar.

Le vamos a dar Enter y nos escribirá nuestro snippet, haciendo enfoque en el primer elemento a editar. Podemos ir editando y con tabulador ir pasando entre los parámetros.

Cabe destacar que todo lo que complete debería tener sentido para su código, en mi caso la función upFile de mi servicio no existe y me lo remarca en rojo. Otra cuestión a considerar es que pueden repetir el número de orden, suponiendo que un mismo parámetro se repita en varias partes de nuestra sintaxis generada.

Conclusión

Bueno hemos llegado al final de este tutorial, espero les sea de mucha ayuda crear sus propios snippets, cabe destacar que puede que otros nos hayan hecho este trabajo y no sea necesario crearnos uno nosotros para los frameworks o lenguajes, pero puede que para los proyecto que trabajemos si sea necesario para agilizar un poco las cosas. También si quieren aprender más de como crearlos y personalizarlos, aquí el enlace está la documentación sobre los snippets de Visual Studio Code. Sin más me despido, gracias por llegar hasta aquí. Hasta pronto.

Importancia de crear componentes reutilizables

Introducción

Cuando trabajamos en proyectos de desarrollo pequeños o grandes (desde backend o frontend), siempre terminamos haciendo funciones o diseños que se repiten en varias partes de la aplicación o página web. Es nuestro deber identificar esos componentes que se estarán repitiendo y generalizarlos, para que solo tengamos que reutilizarlos.

¿Como reconozco que van a ser reutilizados?

Muchas veces puede estar en el boceto o en el análisis previo al desarrollo, también puede darse luego de llevar varias líneas de código, que llega un momento y te dices, está función o diseño ya estaba previamente hecho en otra parte de la aplicación, es buen momento para generalizarlo.

Aquí ejemplos previos al desarrollo:

• Cuando se están haciendo el mockup o la maquetación, podemos reconocer un componente que es parecido entre las diferentes pantallas. Por ejemplo puede ser el diseño de un botón, un modal de edición/creación (por cada CRUD), el diseño del header, etc.
• Al crear API Rest, cuando requerimos devolver siempre una misma estructura en las respuestas, aquí podríamos desarrollar una función que generalice dicha estructura.
• Estados en la base de datos que se aplicarán de la misma manera a diferentes módulos, por ejemplo un estado de activo e inactivo, cuando sabemos que solo tendrán estos dos estados, podemos generalizarlos.

Estilos de liderazgo - Súbete al balcón (observa)

Estilos de Liderazgo: opciones para avanzar en desafíos complejos. Actividad: Observa lo que esta pasando.

 CRUD sencillo con Framework NestJS

Introducción

Para casi todas las aplicaciones es necesario hacer un CRUD con ciertos elementos de base de datos. Pero en sí ¿Qué es un CRUD?. CRUD es un acrónimo que cada una de sus letras significa:

• C (Create): Que es el procedimiento en el cual se crea un objeto en base de datos.
• R (Read): Cuando realizamos la acción de leer objeto u objetos de la base de datos.
• U (Update): Cuando queremos actualizar uno o más elemento (por lo general es uno, pero siempre habrán donde se tenga que actualizar varios en una sola petición)
• D (Delete): Para indicar que se debe remover un objeto de la base de datos.

Para poder ejecutar este tutorial, necesitas haber instalado y poder ejecutar NestJS con lo básico, igualmente desde este enlace puedes hacer la parte de instalación.

Manos a la obra

Primero que nada, les regalo la colección JSON con las API Request que usaremos y que pueden importar fácilmente en la aplicación Postman, les dejó el enlace aquí. Haremos un CRUD de cursos, donde listaremos cuales tenemos en espera, en progreso y finalizados.

Para realizar el CRUD, necesitaremos un lugar donde guardar los datos y la lógica que supondrá almacenarla, actualizar, listarla y eliminarla. Para ello trabajaremos en nuestro archivo src/app.service.ts (Básicamente el framework nos recomienda trabajar nuestra lógica en los archivos services de nuestro módulos), nos debe quedar de la siguiente manera:

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

// Recomendación pasar enum e interfaces a archivos dedicados a tal fin
export enum State {
  wait,
  progress,
  completed
}

export interface ICourseKey {
  id:number;
}

export interface ICourseAttributes {
  name: string;
  state: State;
}

export interface ICourse extends ICourseKey, ICourseAttributes {}

@Injectable()
export class AppService {

  private courses: ICourse[] = []

  async getCourses(): Promise<ICourse[]>{
    return this.courses
  }

  async findCourse( id: number): Promise<ICourse>{
    return this.courses.find((item) => item.id == <number>id)
  }

  async createCourse( course: ICourseAttributes ): Promise<ICourse>{

    const idNext = (this.courses.length)? this.courses[this.courses.length - 1].id + 1: 1
    const newLength = this.courses.push({ id:idNext, ...course })
    
    return this.courses[newLength - 1]
  }

  async updateCourse( id: number, course: ICourseAttributes ): Promise<ICourse>{

    const updateIndex: number = this.courses.findIndex(item => item.id == <number>id)
    this.courses[updateIndex].name = course.name
    this.courses[updateIndex].state = course.state

    return this.courses[updateIndex]
  }

  async deleteCourse(id: number): Promise<ICourse> {

    const startIndex:number = this.courses.findIndex(item => item.id === id)
    const deleteCourse = this.courses.splice(startIndex, 1)

    return deleteCourse[0]
  }

}

Donde la primara parte se crean las interfaces y enum que usaremos para este CRUD. Cabe destacar que estos archivos por lo general se colocan en un archivo aparte destinado para ello, pero para hacerlo más rápido lo coloque aquí. Si se fijan los estoy exportando, precisamente para que puedan ser usados en el exterior.

Como vemos en el enum State dejamos claro que solo existen 3 tipos de estado y dividimos en tres partes las características del curso, donde una interfaz indica las llaves que identifica un objeto y el otro los atributos, para finalmente unirse en ICourse.

Luego llegamos a la clase AppService, donde se concentrá la lógica del CRUD y la variable donde almacenamos los cursos.

Donde courses es la variable donde almacenamos la información de nuestros cursos y lo siguiente son los métodos asíncronos, donde en cada uno retornamos una promesa ya de sea un objeto o varios objetos de tipo ICourse. Igualmente aquí describo que hace cada método para que lo puedan analizar:

• getCourses: Obtiene un listado de todos los cursos.
• findCourse: Obtiene un curso mediante el id (Identificador) del curso.
• createCourse: Crea un curso y lo guarda en la lista de cursos.
• updateCourse: Actualiza un curso de la lista de cursos guardados, mediante su id (Identificador).
• deleteCourse: Eliminar un curso de la lista de cursos guardados, mediante su id (Identificador).

import { Controller, Get, Post, Body, Put, Param, Delete } from '@nestjs/common';
import { AppService, ICourseAttributes } from './app.service';

@Controller()
export class AppController {

  constructor(private readonly appService: AppService) {}

  @Get()
  getCourses(){
    return this.appService.getCourses()
  }

  @Post()
  createCourse(@Body() course:ICourseAttributes){
    return this.appService.createCourse(course)
  }

  @Delete(':id')
  deleteCourse(@Param('id') id:number){
    return this.appService.deleteCourse(id)
  }
}

Como vemos en el controlador ya fue inyectado el objeto appService, donde posee todos los métodos pertinentes para el CRUD.

Elementos importantes:

@Get: Decorador que indica que para ejecutar este método accedemos con el método GET de una petición API Rest.
@Post: Decorador que indica que para ejecutar este método accedemos con el método POST de una petición API Rest.
@Delete: Decorador que indica que para ejecutar este método accedemos con el método DELETE de una petición API Rest.
@Put: Decorador que indica que para ejecutar este método accedemos con el método PUT de una petición API Rest.
@Body: Decorador que indica obtener los valores del body de la petición API Rest.
@Param: Decorador que indica obtener los valores dispuestos en la URL. Previamente debe indicar que valores recibirá la API, como trabajamos con express sobre Nestjs, debemos colocar por delante ":" para indicar el parámetro a recibir.

Ya en este punto pueden crear cursos, luego consultarlos y si quieren los pueden eliminar. Para que lo puedan ver en ejecución y probar con Postman, deben ejecutar el siguiente comando en el terminal:

yarn start:dev

IMPORTANTE:  Aquí solo muestro obtener todos los cursos, crear un curso y eliminarlo, queda como tarea obtener un solo curso y actualizar un curso sabiendo su id. Es decir deben hacer funcionar todas las API Request que están en la colección que les dí en un principio.

Conclusión

Hasta aquí ha llegado este tutorial de como implementar un CRUD con NestJS, realmente no es difícil aplicarlo, sino hay que seguir ciertas pautas, para obtener un desarrollo más limpio y organizado. Sin más me despido, espero les vaya muy bien con las API restantes que dejé como tarea, hasta pronto.