Leonardo José Castillo Lacruz - freeCodeCamp.org

Docker y dockerizar - qué significan estos términos?

Leonardo José Castillo Lacruz — Fri, 11 Apr 2025 20:41:20 +0000

Docker es una de las herramientas más populares en el mundo del desarrollo de software, especialmente en el ámbito de la virtualización y la gestión de aplicaciones. Empecemos por lo básico, partiendo con las definiciones y avanzamos en aspectos particulares más adelante.

¿Qué es Docker?

Docker es una plataforma de código abierto que permite a los desarrolladores crear, implementar y ejecutar aplicaciones en contenedores, ¿pero qué es un contenedor?

Un contenedor es una unidad ligera y portátil que incluye todo lo necesario para que una aplicación funcione: código, bibliotecas, dependencias y configuraciones. Más adelante encontrarás una definición formal tanto de imagen como de contenedor.

Esto asegura que las aplicaciones se ejecuten de manera consistente en cualquier entorno, ya sea en tu máquina local, en un servidor o en la nube.

Aspectos importantes de usar Docker

Docker ha revolucionado la forma en que se desarrollan y despliegan aplicaciones debido a sus múltiples beneficios:

Portabilidad: Los contenedores Docker funcionan de la misma manera en cualquier sistema operativo que soporte Docker, eliminando problemas de compatibilidad.
Eficiencia: Los contenedores son más ligeros que las máquinas virtuales, ya que comparten el kernel del sistema operativo, lo que reduce el uso de recursos.
Escalabilidad: Facilita la creación de entornos replicables, lo que permite escalar aplicaciones rápidamente.
Aislamiento: Cada contenedor es independiente, lo que evita conflictos entre aplicaciones o dependencias.
Automatización: Docker simplifica los procesos de integración y entrega continua (CI/CD).

Guía rápida de instalación

Para instalar Docker en tu sistema, sigue estos pasos básicos:

Linux (Ubuntu): bashCopy Codesudo apt update sudo apt install docker.io sudo systemctl start docker sudo systemctl enable docker
Windows/Mac:

Descarga Docker Desktop desde docker.com.
Sigue las instrucciones del instalador.
Asegúrate de habilitar la integración con WSL 2 (en Windows).

Verifica la instalación:
Ejecuta el siguiente comando para confirmar que Docker está instalado correctamente: bashCopy Codedocker --version

Quieres un paso a paso de instalar Docker, acá te comparto un contenido donde mostramos la instalación en Windows usando WSL2, así que funciona también para Linux.

¿Qué es una imagen?

Una imagen en Docker es una plantilla inmutable que contiene todo lo necesario para ejecutar una aplicación, incluyendo el sistema operativo base, las dependencias y el código de la aplicación. Las imágenes son la base para crear contenedores y se almacenan en repositorios como Docker Hub.

¿Qué es un contenedor?

Un contenedor es una instancia en ejecución de una imagen. Es un entorno aislado que ejecuta una aplicación de manera independiente. Los contenedores son ligeros, rápidos y desechables, lo que significa que puedes detenerlos, eliminarlos y recrearlos fácilmente.

¿Cómo correr un contenedor de una imagen?

Para ejecutar un contenedor a partir de una imagen, utiliza el siguiente comando:

docker run -d --name nombre_del_contenedor imagen

Por ejemplo, para ejecutar un servidor web Nginx:

docker run -d --name mi_nginx -p 8080:80 nginx

Este comando ejecuta un contenedor en segundo plano (-d), lo nombra como mi_nginx y mapea el puerto 80 del contenedor al puerto 8080 de tu máquina.

Con esto tendras un servidor web en tu máquina ejecutandose en el puerto 8080.

¿Qué es dockerizar una aplicación?

Dockerizar una aplicación significa empaquetarla en un contenedor Docker para que pueda ejecutarse de manera consistente en cualquier entorno. Esto incluye agregar todas las dependencias, configuraciones y scripts necesarios en una imagen Docker.

¿Qué es el Dockerfile?

El Dockerfile es un archivo de texto que contiene una serie de instrucciones para construir una imagen Docker. Cada instrucción en el Dockerfile define una capa en la imagen, lo que permite que Docker reutilice capas anteriores para optimizar el proceso de construcción.

Comandos básicos del Dockerfile

Algunos comandos comunes en un Dockerfile son:

FROM: Define la imagen base. dockerfileCopy CodeFROM node:16
WORKDIR: Establece el directorio de trabajo dentro del contenedor. dockerfileCopy CodeWORKDIR /app
COPY: Copia archivos desde el sistema host al contenedor. dockerfileCopy CodeCOPY . .
RUN: Ejecuta comandos durante la construcción de la imagen. dockerfileCopy CodeRUN npm install
CMD: Define el comando que se ejecutará cuando el contenedor inicie. dockerfileCopy CodeCMD ["npm", "start"]

¿Cómo dockerizar una aplicación Node.js?

Para dockerizar una aplicación Node.js, sigue estos pasos:

Crea un archivo Dockerfile:
Este archivo define cómo se construirá la imagen Docker. Un ejemplo básico para una aplicación Node.js sería:

# Usa una imagen base de Node.js 
FROM node:16 

# Establece el directorio de trabajo 
WORKDIR /app 

# Copia la definición del proyecto 
COPY package*.json ./ 

#Carga las dependencias
RUN npm install 

# Copia los archivos de la aplicación 
COPY . . 

# Expone el puerto de la aplicación 
EXPOSE 3000 

# Comando para ejecutar la aplicación 
CMD ["npm", "start"]

Crea un archivo .dockerignore:
Este archivo especifica qué archivos o carpetas deben excluirse al construir la imagen. Por ejemplo:

node_modules  
npm-debug.log

Construye la imagen:

docker build -t mi_app_node .

Ejecuta el contenedor:

docker run -d -p 3000:3000 mi_app_node

Importancia del archivo `.dockerignore`

El archivo .dockerignore es crucial para optimizar el proceso de construcción de imágenes Docker. Este archivo especifica qué archivos o carpetas deben excluirse al construir la imagen, lo que reduce el tamaño de la imagen y mejora la seguridad al evitar incluir archivos sensibles o innecesarios, como:

Archivos de configuración locales.
Dependencias ya instaladas (como node_modules).
Archivos temporales o de depuración.

Un ejemplo de .dockerignore sería:

node_modules  
*.log  
.env

Veamos un ejemplo práctico de como dockerizar una aplicación Node.

Rutas en Angular. Como implementarlas

Leonardo José Castillo Lacruz — Tue, 11 Feb 2025 18:39:09 +0000

Introducción a las Rutas en Angular

Las aplicaciones en general presentan diferentes vistas, en el caso de aplicaciones web de tipo SPA (Single Page Application), el poder cambiar de vistas es un proceso normal, pero que por la naturaleza del tipo de aplicación requiere algunas tomar algunas consideraciones. En Angular, este proceso es realizado por el sistema de enrutamiento (Angular Router), el cual permite gestionar la navegación entre diferentes vistas sin necesidad de recargar la página (principio básico de las SPA)

¿Cómo funciona el enrutamiento en Angular?

El enrutamiento en Angular se basa en la manipulación del historial del navegador utilizando la API de History de JavaScript. Cuando el usuario cambia de ruta, Angular intercepta la petición y renderiza el componente correspondiente dentro del RouterOutlet sin necesidad de recargar la página.

Tipos de Rutas en Angular

En Angular, existen diferentes tipos de rutas que podemos implementar según nuestras necesidades:

🔹 Rutas Estáticas

Son rutas predefinidas en la aplicación y no cambian en función de los datos o acciones del usuario. Se definen con un path o camino fijo.

Ejemplo:

const routes: Routes = [ 
	{ path: 'home', component: HomeComponent }, 
    { path: 'about', component: AboutComponent } 
];

🔹 Rutas Dinámicas

Permiten que un componente reciba parámetros en la URL, lo que es útil para mostrar información específica, como detalles de un producto o perfil de usuario.

Ejemplo:

const routes: Routes = [ 
	{ path: 'producto/:id', component: ProductoComponent } 
];

🔹 Rutas Programadas (Programáticas)

Nos permiten cambiar de ruta desde el código de TypeScript sin necesidad de que el usuario haga clic en un enlace. Se usa el servicio Router para navegar de manera dinámica.

Ejemplo:

this.router.navigate(['/detalle-producto', id]);

Elementos claves para implementar rutas en Angular

Para implementar rutas en Angular, debemos conocer los siguientes conceptos y herramientas:

📌 `RouterOutlet`

Es una directiva que actúa como un contenedor donde se renderizan los componentes en función de la ruta activa. Se coloca en el app.component.html o en cualquier otro lugar donde queramos que aparezcan las vistas dinámicas.

📌 `routerLink`

Es una directiva de Angular que permite definir enlaces de navegación dentro de la aplicación sin recargar la página.

Ir a Inicio

📌 `ActivatedRoute`

Es un servicio que nos permite acceder a los parámetros de la URL dentro de un componente.

constructor(private route: ActivatedRoute) { 
} 

ngOnInit() { 
	const id = this.route.snapshot.paramMap.get('id'); 
}

📌 `Router`

Es un servicio que nos permite cambiar de ruta de forma programática. Simplemente, lo importamos en nuestro componente y hacemos uso del mismo.

this.router.navigate(['/dashboard']);

Ahora tomemos hagamos la implementación en una aplicación real.

Configuración Inicial

Primero, creamos un nuevo proyecto de Angular si no lo tenemos:

ng new mi-proyecto-angular
cd mi-proyecto-angular
ng serve

Luego, creamos los siguientes componentes para las diferentes vistas, nos aprovechamos del cliente Angular para realizar esta tarea, en nuestro caso vamos a crear un componente para una ruta estática y otro para una ruta dinámica:

ng generate component components/quienes-somos 
ng generate component components/detalle-mascota

Configuración del Módulo de Rutas (`app-routing.ts`)

Definimos las rutas de la aplicación en el archivo app-routing.module.ts:

import { Routes } from '@angular/router';
import { QuienesSomosComponent } from './components/quienes-somos/quienes-somos.component';
import { MascotasListComponent } from './components/mascotas-list/mascotas-list.component';
import { DetalleMascotaComponent } from './components/detalle-mascota/detalle-mascota.component';
import { FormularioComponent } from './components/formulario/formulario.component';

export const routes: Routes = [
    { path: '', component: MascotasListComponent },
    { path: 'mascota/:id', component: DetalleMascotaComponent },
    { path: 'quienes-somos', component: QuienesSomosComponent },
    { path: 'adopcion/:id', component: FormularioComponent }
];

Uso de `routerLink` en la Barra de Navegación

En navbar.component.html, agregamos enlaces de navegación con routerLink:

  
	Inicio  
    Quiénes Somos

Mostrar Componentes con `RouterOutlet`

En app.component.html, añadimos el RouterOutlet para mostrar las vistas dinámicamente:

Implementar una Ruta Dinámica

En detalle-mascota.component.ts, obtenemos el ID de la mascota desde la URL usando ActivatedRoute:

export class DetalleMascotaComponent implements OnInit {
  mascota?: Mascota;
  loading: boolean = true;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private mascotaService: MascotaService
  ) { }

  ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id');

    if (id) {
      this.mascotaService.
        getMascotaById(Number(id)).
        subscribe({
          next: (mascota) => {
            this.mascota = mascota;
            this.loading = false;
          }
        })
    }
  }

Y en mascota.component.html, enlazamos a la ruta dinámica usando routerLink:


	Ver detalles de {{ mascota.nombre }}

Navegación Programática con `Router`

Para cambiar de ruta desde TypeScript, usamos el servicio Router. Por ejemplo, si queremos redirigir al usuario a un formulario de adopción:

import { Router } from '@angular/router'; 

export class DetalleMascotaComponent { 
	constructor(private router: Router) {
    } 
    
    irAFormulario() { 
    	this.router.navigate(['/adopcion', this.id]); 
    } 
}

Y en detalle-mascota.component.html:

Siguiendo este paso a paso, podrás implementar los tipos de rutas que Angular nos permite construir y con ello lograrás mejorar la usabilidad de tus aplicaciones.

Si te gustó el contenido, compártelo en tus redes.

Para cualquier duda me puedes contactar por:

Introducción a los Hooks Avanzados

Leonardo José Castillo Lacruz — Mon, 13 Jan 2025 14:49:22 +0000

Explorando useMemo, useCallback y useLayoutEffect en React

React nos ha proporcionado herramientas poderosas para desarrollar aplicaciones web interactivas y eficientes. Con la introducción de los hooks, se abrió un mundo de posibilidades para manejar estados, efectos y funciones de manera más declarativa. Más allá de los hooks básicos (useState, useEffect), existen otros más avanzados como useMemo, useCallback y useLayoutEffect, diseñados para abordar desafíos específicos relacionados con el rendimiento y la experiencia del usuario.

En este artículo, exploraremos estos tres hooks en profundidad, desde sus fundamentos teóricos hasta su implementación práctica en una aplicación React que simula un ecommerce.

1. useMemo: Optimizando cálculos innecesarios

¿Qué es?

useMemo es un hook que nos permite memorizar el resultado de una función costosa para evitar que se recalculen innecesariamente en cada renderizado. Es especialmente útil cuando trabajamos con grandes conjuntos de datos o funciones intensivas en computación.

¿Cómo funciona?

Cuando React renderiza un componente, todas las funciones dentro del componente se ejecutan. Si una función realiza cálculos pesados, esto puede afectar significativamente el rendimiento. Aquí es donde entra useMemo, que guarda ("memoriza") el resultado de una función y solo la vuelve a ejecutar si alguna de las dependencias cambia.

Características clave:

Memoriza valores computados.
Se usa principalmente para optimizar componentes que dependen de cálculos intensivos.
Acepta dos argumentos: una función y un arreglo de dependencias.

Ejemplo básico:

const memoizedValue = useMemo(() => { 
	return computeExpensiveValue(a, b); 
}, [a, b]);

En este caso, computeExpensiveValue solo se recalculará cuando a o b cambien.

2. useCallback: Memoriza funciones

¿Qué es?

useCallback se utiliza para memorizar funciones, evitando que React cree nuevas instancias de la función en cada renderizado. Esto es útil cuando pasamos funciones como props a componentes hijos, ya que previene que estos se re-rendericen innecesariamente.

¿Por qué es importante?

En React, cuando un componente padre se vuelve a renderizar, React considera que cualquier función definida dentro de ese componente es "nueva". Esto puede llevar a que los componentes hijos que reciben esa función como prop también se re-rendericen, incluso si no es necesario.

Características clave:

Memoriza la referencia de una función.
Es útil en combinación con React.memo, que optimiza componentes para no renderizarse si sus props no cambian.
Acepta dos argumentos: una función y un arreglo de dependencias.

Ejemplo básico:

const memoizedCallback = useCallback(() => { 
	doSomething(a, b); 
}, [a, b]);

Aquí, la función doSomething se volverá a definir únicamente si a o b cambian.

3. useLayoutEffect: Ajustes visuales antes del renderizado

¿Qué es?

useLayoutEffect es similar a useEffect, pero se ejecuta de manera síncrona después de que React ha realizado todas las modificaciones al DOM y antes de que el navegador pinte la pantalla. Esto permite realizar ajustes visuales inmediatos, como calcular dimensiones o reposicionar elementos.

¿Cuándo usarlo?

Se utiliza en situaciones donde necesitas leer o escribir directamente en el DOM y esos cambios deben reflejarse antes de que el usuario vea algo en pantalla.

Características clave:

Se ejecuta antes del renderizado visual.
Es útil para medir dimensiones, realizar cálculos de posición o sincronizar animaciones.
Acepta dos argumentos: una función y un array de dependencias.

Ejemplo básico:

useLayoutEffect(() => { 
	const dimension = element.getBoundingClientRect();
    console.log(dimension); 
}, [element]);

Implementación Práctica

Para fortalecer el conocimiento, vamos a aplicar estos hooks en una aplicación React, un ecommerce que hemos venido desarrollando. El objetivo es mejorar el rendimiento y la experiencia del usuario utilizando useMemo, useCallback y useLayoutEffect.

Contexto de la Aplicación:

Es un ecommerce que ya utiliza hooks como useState y useEffect.
Necesitamos agregar filtros y tooltips, los cuales pueden generar impacto en el performance.
Queremos optimizar cálculos, evitar renders innecesarios y ajustar elementos visuales dinámicamente.

1. Aplicación de useMemo: Filtros dinámicos

En el componente ProductFilters.jsx, utilizamos useMemo para calcular las categorías y el rango de precios:

const categories = useMemo(() => { 
	return [...new Set(products.map((product) => product.category))]; }, [products]); 
    
const priceRange = useMemo(() => { 
	const prices = products.map((product) => product.price); 
    return { min: Math.floor(Math.min(...prices)), 
    		 max: Math.ceil(Math.max(...prices)), 
    }; 
 }, [products]);

Esto asegura que las categorías y los precios solo se recalculen cuando products cambie, mejorando el rendimiento en aplicaciones con grandes cantidades de datos.

2. Aplicación de useCallback: Optimización de funciones

En Home.jsx, usamos useCallback para manejar cambios en los filtros:

const handleCategoryChange = useCallback((category) => { 
	setCategory(category); 
}, []); 

const handlePriceChange = useCallback((price) => { 
	setMaxPrice(price); 
}, []);

Esto evita que las funciones sean recreadas en cada renderizado, reduciendo renders innecesarios en el componente ProductFilters.

3. Aplicación de useLayoutEffect: Tooltips ajustables

En el componente PriceTooltip.jsx, utilizamos useLayoutEffect para ajustar la posición de un tooltip dentro del viewport:

useLayoutEffect(() => { 
	if (showTooltip && tooltipRef.current && containerRef.current) { 
    	const containerRect = containerRef.current.getBoundingClientRect(); 
        const tooltipRect = tooltipRef.current.getBoundingClientRect(); 
        const newPosition = { 
        	top: -tooltipRect.height, 
        	left: containerRect.left + tooltipRect.width > window.innerWidth ? -(tooltipRect.width - containerRect.width) : 0, 
        }; 
       	setTooltipPosition(newPosition); 
    } 
}, [showTooltip]);

Esto asegura que los tooltips sean visibles y estén correctamente posicionados en todo momento.

Al finalizar la implementación de filtros y mejoras visuales, usando la combinación de useMemo, useCallback y useLayoutEffect, logramos mejorar el perfomance de nuestra aplicación y en general estos hooks permiten crear aplicaciones React más rápidas, eficientes y visualmente atractivas.

Estos hooks avanzados no solo mejoran el rendimiento, sino que también optimizan la experiencia del usuario, llevándote un paso más allá en el desarrollo frontend. ¡Ponlos en práctica y observa cómo tus aplicaciones alcanzan un nuevo nivel!

Documentando APIs REST en Node.js con Swagger Autogen y Swagger UI Express

Leonardo José Castillo Lacruz — Tue, 10 Dec 2024 02:26:55 +0000

La documentación de APIs REST es una tarea esencial para garantizar que otros desarrolladores puedan consumir y comprender el funcionamiento de nuestras APIs. Una buena documentación no solo es un signo de profesionalismo, sino también una herramienta poderosa para optimizar la colaboración y la eficiencia.

Vamos a aprender a documentar una API REST creada en Node.js utilizando las herramientas Swagger Autogen y Swagger UI Express. Además, exploraremos las ventajas que estas herramientas ofrecen para facilitar el desarrollo y el consumo de APIs.

¿Qué es Swagger?

Swagger es un conjunto de herramientas para definir y documentar APIs REST bajo el estándar OpenAPI. Es importante destacar que Swagger no está ligado a un lenguaje de programación específico, sino que su objetivo principal es describir de manera clara cómo interactuar con los servicios de una API. Con Swagger, es posible crear documentación interactiva que permite a los desarrolladores explorar y probar los endpoints directamente desde el navegador.

Nota: Aunque Swagger facilita la visualización y uso de la documentación, no genera automáticamente el archivo de especificación de la API. Este trabajo es realizado por herramientas como Swagger Autogen, que automatiza la creación de dicho archivo JSON o YAML.

Ventajas de usar Swagger y Swagger Autogen

Automatización del proceso de documentación
Con Swagger Autogen, puedes generar el archivo de especificación a partir de tu código, reduciendo la carga manual y garantizando que siempre esté actualizado.
Interfaz interactiva con Swagger UI Express
La integración con Swagger UI Express permite visualizar y probar los endpoints de manera fácil y amigable.
Estandarización y compatibilidad
Al seguir el estándar OpenAPI, las APIs documentadas con Swagger son fácilmente entendibles por otros desarrolladores y herramientas.
Reducción de Errores y Mejor Colaboración
La sincronización entre código y documentación minimiza malentendidos y agiliza la colaboración entre equipos.
Experiencia mejorada para consumidores
Los desarrolladores que consumen tu API pueden integrarse más rápido gracias a la claridad y accesibilidad de la documentación.

Cómo documentar tu API REST con Swagger Autogen y Swagger UI Express

1. Preparación del proyecto

Inicia un proyecto Node.js
Si aún no tienes un proyecto, inicialízalo con:

npm init -y

Instala las dependencias necesarias
Usa los siguientes comandos para instalar las herramientas requeridas:

npm install swagger-ui-express npm install --save-dev swagger-autogen

2. Configuración de Swagger Autogen

Crea el Archivo de Configuración
Añade un archivo swagger.js en el directorio raíz con el siguiente contenido:

const swaggerAutogen = require('swagger-autogen')();

const doc = {
    info: {
        title: 'API de Mascotas',
        description: 'Documentación de la API para la gestión de mascotas',
    },
    host: 'localhost:3000',
    schemes: ['http'],
};

const outputFile = './swagger_output.json';
const endpointsFiles = ['./index.js']; // Cambia este archivo según el punto de entrada de tu API

swaggerAutogen(outputFile, endpointsFiles).then(() => {
    require('./index'); // Inicia el servidor automáticamente
});

En el script anterior, importamos el paquete swagger-autogen y definimos las configuraciones necesarias para realizar la construcción del archivo .json necesario para mostrar la documentación.

Ejecuta el script de generación
Ejecuta el siguiente comando para generar el archivo JSON de especificación:bashCopiar códigonode swagger.js

Esto creará un archivo llamado swagger_output.json que contiene la descripción de los endpoints de tu API. Este archivo será usado por el paquete swagger-ui-express.

3. Integración con Swagger UI Express

Configura la ruta de documentación
Modifica el archivo principal de tu API (index.js) para incluir el middleware de Swagger UI Express:

const express = require('express');
const swaggerUi = require('swagger-ui-express');
const swaggerFile = require('./swagger_output.json');

const app = express();

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerFile));

app.listen(3000, () => {
    console.log('Servidor corriendo en http://localhost:3000');
});

Accede a la documentación
Inicia tu servidor y abre un navegador en http://localhost:3000/api-docs para explorar los endpoints de tu API a través de la interfaz interactiva.

Swagger Autogen, hace una lectura del código, luego lo verifica y a partir del él va a generar todo lo necesario.

Importante cuando uses métodos que requieren o usan el payload (req.body) haz la desestructuración que swagger autogen, va a incluir esta definición en la llamada o uso del endpoint respectivo.

Si deseas personalizar o complementar la documentación, puedes agregar comentarios en el controller de forma que swagger autogen los tome en cuenta.

Ejemplo de código documentado

El uso de comentarios en tus controladores puede mejorar la documentación generada. Por ejemplo:

/**
 * @route GET /pets
 * @description Obtiene una lista de mascotas
 * @response 200 - Lista de mascotas
 */
app.get('/pets', (req, res) => {
    res.send([{ id: 1, name: 'Fido' }, { id: 2, name: 'Luna' }]);
});

Swagger Autogen extraerá estos comentarios para enriquecer la especificación de tu API.

El uso de Swagger Autogen y Swagger UI Express transforma la documentación de APIs REST en un proceso eficiente y profesional. Estas herramientas no solo automatizan tareas tediosas, sino que también proporcionan una experiencia superior para los consumidores de la API, quienes pueden explorar y probar los servicios de manera intuitiva.

Implementar Swagger en tus proyectos garantiza una documentación clara, estandarizada y accesible, facilitando la colaboración entre equipos y mejorando la percepción de calidad de tu API.

En este contenido, realizamos la implementación de la documentación de una API real, donde hacemos el paso a paso y obtenemos el swagger a partir de la ejecución de lo descrito anteriormente.

Servicios y Observables en Angular

Leonardo José Castillo Lacruz — Mon, 25 Nov 2024 14:49:09 +0000

¿Qué son los servicios en Angular?

Un servicio es una clase diseñada para encapsular lógica o funcionalidad que debe ser compartida entre diferentes partes de la aplicación. Se utiliza principalmente para:

Separar lógica de negocio del componente.
Compartir datos y métodos entre componentes.
Facilitar pruebas unitarias al desacoplar funcionalidades.
Gestionar recursos externos como APIs o almacenamiento local.

Angular proporciona el mecanismo de inyección de dependencias (DI) para gestionar servicios, lo que garantiza que siempre se trabaje con una única instancia compartida (Patrón Singleton) a menos que se configure de otra manera.

Cómo se implementa un servicio

Crear e implementar un servicio es sencillo gracias al Cliente Angular y al patrón de inyección de dependencias. Veamos los pasos necesarios para realizar esta implementación.

1. Crear un servicio

Utiliza el comando de Angular CLI para generar un servicio:

ng generate service nombre-del-servicio

Este comando genera dos archivos:

nombre-del-servicio.service.ts (código del servicio).
nombre-del-servicio.service.spec.ts (archivo de pruebas).

El archivo generado podría verse así:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Proveedor en el nivel raíz
})
export class NombreDelServicio {
  constructor() { }
}

2. Proveer el servicio

Angular registra automáticamente el servicio en el nivel raíz mediante el decorador @Injectable({ providedIn: 'root' }). Esto significa que estará disponible en toda la aplicación como un Singleton.

Si necesitas limitar el alcance del servicio, puedes especificarlo manualmente en los providers de un módulo o componente.

En Angular, además del nivel raíz, podemos registrar el servicio a nivel de módulo o de componente.

Casos de uso de los servicios

1. Lógica de negocio compartida

Por ejemplo, nuestra aplicación de adopción de mascotas puede necesitar filtrar o procesar datos sobre mascotas disponibles:

export class MascotaService {
  filtrarPorEdad(mascotas: Mascota[], edad: number): Mascota[] {
    return mascotas.filter(m => m.edad === edad);
  }
}

2. Gestión de estados o datos globales

Los servicios permiten compartir datos entre componentes sin necesidad de usar un patrón de emisión de eventos.

export class SesionService {
  private usuarioLogeado: Usuario | null = null;

  setUsuario(usuario: Usuario): void {
    this.usuarioLogeado = usuario;
  }

  getUsuario(): Usuario | null {
    return this.usuarioLogeado;
  }
}

Para gestión de estados simples, usar servicios es posible y puede ser una solución aplicable.

3. Consumo de APIs

Este es uno de los casos más comunes. Un servicio interactúa con un backend para enviar o recibir datos.

Vamos a entrar en detalle para este caso de aplicación.

Uso de servicios con consumos de APIs

Para consumir APIs en Angular, utilizamos el módulo HttpClientModule y las herramientas de RxJS. A continuación, veamos cómo integrarlos.

1. Configuración inicial

Primero, asegúrate de importar el módulo HttpClientModule en el archivo principal del módulo de tu aplicación (app.module.ts):

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // Importar aquí
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Crear el servicio para la API

Supongamos que estamos construyendo una aplicación de adopción de mascotas y queremos consumir una API que proporciona una lista de mascotas. El servicio podría verse así:

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

export interface Mascota {
  id: number;
  nombre: string;
  edad: number;
  tipo: string;
}

@Injectable({
  providedIn: 'root' // Disponible en toda la aplicación
})
export class MascotaService {
  private apiUrl = 'http:/localhost:5000/mascotas';

  constructor(private http: HttpClient) {}

  // Obtener la lista de mascotas
  getMascotas(): Observable {
    return this.http.get(this.apiUrl).pipe(
      map(data => data), // Transforma los datos si es necesario
      catchError(this.handleError) // Manejo de errores
    );
  }

  // Manejo de errores
  private handleError(error: HttpErrorResponse) {
    let mensaje = 'Ocurrió un error inesperado.';
    if (error.error instanceof ErrorEvent) {
      // Error del cliente
      mensaje = `Error del cliente: ${error.error.message}`;
    } else {
      // Error del servidor
      mensaje = `Error del servidor: ${error.status}, mensaje: ${error.message}`;
    }
    return throwError(() => mensaje);
  }
}

3. Consumir el servicio en un componente

Ahora que tenemos el servicio, podemos utilizarlo en un componente para mostrar la lista de mascotas.

import { Component, OnInit } from '@angular/core';
import { MascotaService, Mascota } from './mascota.service';

@Component({
  selector: 'app-lista-mascotas',
  template: `
    
      
        {{ mascota.nombre }} - {{ mascota.tipo }}
      
    
    
      Cargando mascotas...
    
  `
})
export class ListaMascotasComponent implements OnInit {
  mascotas: Mascota[] | null = null;

  constructor(private mascotaService: MascotaService) {}

  ngOnInit() {
    this.mascotaService.getMascotas().subscribe({
      next: (data) => (this.mascotas = data),
      error: (error) => console.error('Error al cargar mascotas:', error),
    });
  }
}

4. Ventajas de usar Observables

Al usar Observables en Angular:

Puedes cancelar suscripciones automáticamente con operadores como takeUntil.
Es posible combinar flujos de datos con operadores como combineLatest.
Tienes más control sobre el manejo de errores y la transformación de datos.

Los servicios son una herramienta fundamental en Angular para estructurar aplicaciones bien organizadas y escalables. Al integrarlos con HttpClient y RxJS, puedes manejar flujos de datos asíncronos de manera eficiente, aprovechar los operadores para transformar datos y garantizar una mejor experiencia del usuario.

Practicar la implementación de servicios con APIs reales es una excelente manera de dominar este concepto y sacarle el máximo provecho a Angular.

Te dejo un video donde de forma práctica verificamos los conceptos que hemos revisado anteriormente.

Consumiendo servicios API desde Javascript

Leonardo José Castillo Lacruz — Wed, 30 Oct 2024 13:06:08 +0000

Cuando desarrollamos para la web, es una tarea común y crítica, el consumo de servicios de datos, que serán parte fundamental de nuestra aplicación. Siendo que JavaScript es el lenguaje que usamos para dar interactividad, revisemos como consumir APIs desde nuestras aplicaciones web, para obtener y manipular datos de forma dinámica. En las siguientes líneas vamos a verificar cómo funcionan las solicitudes HTTP, el uso de fetch y el papel de async/await en el consumo de APIs. Usaremos la API de REST Countries como ejemplo, permitiéndonos acceder y mostrar datos detallados sobre países en una aplicación interactiva.

Introducción a las APIs y REST

¿Qué es una API?

API, o Interfaz de Programación de Aplicaciones (Application Programming Interface), es un conjunto de reglas y protocolos que permite que dos aplicaciones se comuniquen entre sí. Piensa en una API como un puente que conecta dos aplicaciones: una puede pedirle datos o servicios a otra sin necesidad de conocer su funcionamiento interno.

¿Qué es REST?

REST, o Transferencia de Estado Representacional (Representational State Transfer), es un estilo arquitectónico para diseñar APIs. Las APIs REST suelen usar URLs para identificar recursos (como países, en nuestro caso) y métodos HTTP (GET, POST, PUT, DELETE) para definir las acciones a realizar sobre esos recursos.

Métodos HTTP en el Consumo de APIs

Las APIs REST se basan en el protocolo HTTP, el cual es el mismo protocolo que usamos al navegar en la web. Cada acción que llevamos a cabo con la API (consultar datos, crear un nuevo registro, actualizar o eliminar un registro) se representa a través de un método HTTP. Estos métodos son parte integral de la arquitectura REST, ya que permiten manipular recursos de forma estandarizada.

Cada método HTTP tiene un propósito específico y su propio rol en la interacción con la API:

GET: Este es el método más común y se usa para recuperar datos de un recurso específico. Es como una consulta de solo lectura; no cambia ni afecta el estado de los datos en el servidor.

Ejemplo: Al consultar la API para obtener una lista de países, usamos una solicitud GET.

POST: Este método se utiliza para enviar datos al servidor y crear un nuevo recurso en él. A diferencia de GET, POST modifica el estado del servidor al agregar datos.

Ejemplo: En una API de usuarios, un POST a la URL https://api.ejemplo.com/usuarios podría crear un nuevo usuario en la base de datos.

PUT: Se usa para actualizar un recurso existente en el servidor. En general, se espera que una solicitud PUT contenga todos los datos del recurso a actualizar, y reemplaza el recurso en el servidor con los datos enviados.

Ejemplo: Actualizar los detalles de un país en la base de datos mediante una solicitud PUT a https://api.ejemplo.com/paises/{id}.

DELETE: Este método se utiliza para eliminar un recurso específico en el servidor. Como su nombre lo indica, DELETE quita o borra datos de la base de datos o sistema remoto.

Ejemplo: Una solicitud DELETE a https://api.ejemplo.com/usuarios/{id} eliminaría al usuario con el ID especificado.

Cada uno de estos métodos se representa en las aplicaciones REST de forma clara, permitiendo a los desarrolladores y al servidor entender qué acción se desea realizar sobre los datos. Estos métodos, cuando se usan con fetch en JavaScript, nos permiten manipular y gestionar datos de manera precisa y efectiva en la aplicación.

Ejemplo de Solicitudes HTTP con `fetch`

El método fetch en JavaScript nos permite implementar fácilmente cualquiera de estos métodos HTTP:

GET: Para recuperar datos, pasamos solo la URL a fetch.
POST, PUT y DELETE: Estos métodos requieren configuraciones adicionales en fetch, como el tipo de método, los encabezados y el cuerpo de la solicitud.

Uso de `fetch` en JavaScript

fetch es una función nativa en JavaScript que facilita el envío de solicitudes HTTP, devolviendo una promesa. Usar fetch con async/await mejora la legibilidad del código y simplifica la gestión de las respuestas, lo que es especialmente útil cuando trabajamos con datos de una API.

Estructura Básica de `fetch`

La sintaxis básica de fetch para una solicitud GET es:

fetch(url)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

O usando async/await:

async function getData(url) {
    try {
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

Solicitud GET con `fetch`

En una solicitud GET, simplemente se pasa la URL de la API a fetch. Nuestro ejemplo utiliza este método para obtener datos de países según su subregión.

async function getDatos(subregion) {
    try {
        const res = await fetch(`https://restcountries.com/v3.1/subregion/${subregion}`);
        const data = await res.json();
        dibujaCards(data);
    } catch (error) {
        alert('No pude conectarme a la API');
    }
}

Solicitud POST, PUT y DELETE con `fetch`

Para otras operaciones (POST, PUT, DELETE), podemos añadir una configuración adicional a fetch, especificando el método, encabezados y el cuerpo de la solicitud.

Ejemplo de POST

Un ejemplo típico de POST podría ser enviar datos a una API para crear un nuevo recurso, como un usuario.

async function createUser(userData) {
    try {
        const response = await fetch('https://example.com/api/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(userData)
        });
        const data = await response.json();
        console.log('Usuario creado:', data);
    } catch (error) {
        console.error('Error al crear usuario:', error);
    }
}

Ejemplo de PUT

PUT se usa para actualizar un recurso existente. Este ejemplo muestra cómo modificar los datos de un usuario:

async function updateUser(userId, updatedData) {
    try {
        const response = await fetch(`https://example.com/api/users/${userId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(updatedData)
        });
        const data = await response.json();
        console.log('Usuario actualizado:', data);
    } catch (error) {
        console.error('Error al actualizar usuario:', error);
    }
}

Ejemplo de DELETE

Para eliminar un recurso, simplemente usamos el método DELETE y la URL correspondiente.

async function deleteUser(userId) {
    try {
        const response = await fetch(`https://example.com/api/users/${userId}`, {
            method: 'DELETE'
        });
        if (response.ok) {
            console.log('Usuario eliminado');
        }
    } catch (error) {
        console.error('Error al eliminar usuario:', error);
    }
}

Proyecto: Explorador de Países

Vamos a crear una pequeña aplicación, que consuma datos de la API de REST Countries y poder generar una presentación de galería, así como una presentación de detalle por país, con ello vamos a poder poner en práctica los conceptos anteriormente explicados.

Proyecto: Explorador de Países

El proyecto está compuesto por:

HTML (index.html): Define la estructura de la aplicación.
JavaScript (script.js): Realiza la solicitud a la API para obtener datos de países según la subregión seleccionada.
HTML (detail.html): Define la estructura de la presentación de detalle del país.
JavaScript de Detalle (detail.js): Muestra detalles específicos de un país.

HTML de la Página Principal

En el archivo index.html, configuramos una barra de navegación para seleccionar una subregión (América del Norte, América del Sur o América Central) y una galería donde se muestran los países.


    
        América del Norte
        América del Sur
        América Central
    

Cargando...


    © 2024 América - Explorando Países

Función para Obtener Datos en `script.js`

Aquí, fetch se usa para hacer una solicitud GET a la API y obtener datos sobre países de una subregión. Se muestra un indicador de carga durante la consulta y se actualiza la galería una vez que se reciben los datos.

const loadingIndicator = document.getElementById('loading');

function showLoading() {
    loadingIndicator.classList.remove('hidden');
}

function hideLoading() {
    loadingIndicator.classList.add('hidden');
}

async function getDatos(subregion) {
    try {
        showLoading();
        const res = await fetch(`https://restcountries.com/v3.1/subregion/${subregion}`);
        const data = await res.json();
        dibujaCards(data);
    } catch (error) {
        alert('No pude conectarme a la API');
    } finally {
        hideLoading();
    }
}

Función `dibujaCards(paises)`

Esta función recibe los datos de la API y los muestra en una tarjeta HTML para cada país.

function dibujaCards(paises) {
    const galeria = document.querySelector('.gallery');
    let htmlPaises = '';
    paises.forEach((pais) => {
        htmlPaises += `
        
            ${pais.name.official}
            Capital: ${pais.capital ? pais.capital[0] : 'No Disponible'}
            Idioma: ${Object.values(pais.languages || { '': 'No Disponible' }).join(', ')}
            
        
        `;
    });
    galeria.innerHTML = htmlPaises;
}

Resumiendo lo realizado, fetch y async/await nos brindan una forma poderosa y sencilla de consumir APIs en JavaScript. Al conocer los diferentes métodos HTTP y cómo configurarlos en fetch, ahora tienes las bases para manejar solicitudes GET, POST, PUT y DELETE, lo cual te abrirá muchas posibilidades para crear aplicaciones interactivas que consuman o modifiquen datos de forma dinámica.

Primeros pasos con Angular 18

Leonardo José Castillo Lacruz — Mon, 23 Sep 2024 13:15:13 +0000

Empecemos por definir que es angular: un framework de desarrollo web desarrollado y mantenido por Google, diseñado para crear aplicaciones web dinámicas y robustas. Angular utiliza un enfoque modular basado en componentes, lo que facilita la organización y mantenimiento de proyectos grandes.

La filosofía de Angular, es trabajar como una SPA (Single Page Application), de forma que la usabilidad y el performance sea lo mejor posible.

Preparando el ambiente

Instalar Node.js y npm

Angular se ejecuta sobre Node.js, que es un entorno de ejecución de JavaScript orientado a backend. Esto significa que para poder trabajar con Angular, primero necesitas tener Node.js instalado en tu computadora.

npm (Node Package Manager) es la herramienta que viene con Node.js y nos permite instalar paquetes y librerías necesarios para el desarrollo. A través de npm, también instalaremos Angular.

Instalación de Node.js:

Visita el sitio oficial de Node.js y descarga la versión recomendada (LTS - Long Term Support). Sigue las instrucciones para instalarlo en tu sistema operativo.

Una vez instalado, abre una terminal y verifica que Node.js y npm se hayan instalado correctamente ejecutando los siguientes comandos:

node -v
npm -v

Este comando muestra en la pantalla la versión instalada de Node.js y npm, con ello sabemos que tenemos lo necesario para iniciar el aprendizaje de Angular.

Conociendo a Angular CLI

Angular tiene una herramienta muy útil llamada Angular CLI (Command Line Interface). Esta herramienta permite crear y gestionar proyectos de Angular mediante comandos sencillos. Nos ayuda a generar la estructura del proyecto, añadir componentes, servicios, y mucho más.

Para instalar Angular CLI, ejecuta el siguiente comando en tu terminal:

npm install -g @angular/cli

Este comando descarga e instala Angular CLI de forma global en tu sistema, lo que significa que puedes usarlo desde cualquier carpeta en tu computadora.

Una vez completada la instalación, verifica que Angular CLI esté correctamente instalado ejecutando:

ng version

Esto mostrará la versión de Angular CLI y otras herramientas relacionadas.

En este enlace podrás encontrar la referencia completa de los comandos disponibles para ejecutar en Angular CLI: https://angular.dev/cli

Entiendo la estructura de la aplicación

Ahora que tienes Angular CLI instalado, ya estás listo para crear tu primer proyecto Angular. Vamos a hacerlo paso a paso.

Abre la terminal en la carpeta donde quieras crear el proyecto.
Ejecuta el siguiente comando para crear un nuevo proyecto Angular:

ng new nombre-del-proyecto

Angular CLI te hará algunas preguntas, como si deseas añadir un enrutador (router) y qué formato de estilos (CSS, SCSS, etc.) prefieres usar. Responde según tus preferencias.

Después de responder estas preguntas, Angular CLI generará toda la estructura del proyecto y descargará las dependencias necesarias.

Recuerda que el nombre del proyecto no debe llevar espacios en blanco, caracteres especiales o acentos.

Cuando Angular CLI crea un proyecto, organiza todo en carpetas y archivos. Algunos de los archivos clave incluyen:

src/app: Aquí es donde se encuentra el código de tu aplicación. Contiene componentes, módulos y servicios.
src/app/app.component.ts: Es el componente principal de la aplicación.
src/app/app.module.ts: Define los módulos de la aplicación.
angular.json: Archivo de configuración del proyecto Angular.

Ejecutar Tu Proyecto Angular

Una vez que el proyecto ha sido creado, es hora de ejecutarlo y ver tu primera aplicación Angular en acción. Angular CLI te permite correr un servidor de desarrollo para que puedas ver los cambios que haces en tiempo real.

Para iniciar el servidor, ejecuta el siguiente comando en la terminal desde la carpeta de tu proyecto:

ng serve

Angular comenzará a compilar el proyecto y luego te mostrará una URL que puedes abrir en tu navegador (por defecto es http://localhost:4200). Abre esa URL en tu navegador y deberías ver la página inicial de tu nueva aplicación Angular.

Cada vez que hagas un cambio en tu código, Angular recargará automáticamente la página para reflejar los cambios, lo que hace el desarrollo más eficiente y fluido.

Creando componentes

Sabiendo que Angular basa su funcionamiento en componentes, es natural que podamos crearlos de forma rápida y simple, usando a Angular CLI. Para ello ejecutamos el siguiente comando:

ng generate component nombre-componente

Con esto Angular CLI generará los siguientes archivos:

.ts (TypeScript): Contiene la lógica del componente. Define la clase que controla su comportamiento.
.html: Es la plantilla o vista, donde se define el contenido visual.
.css: Aquí se especifican los estilos específicos del componente.
.spec.ts: Es el archivo de pruebas unitarias, utilizado para verificar que el componente funcione como se espera.

Cada componente trabaja de manera modular, permitiendo reutilización y organización clara del código.

Ahora solo queda que practiques, para ello te dejó un video donde paso a paso damos estos primeros pasos e incluso iniciamos un proyecto, para poner la práctica los conceptos anteriormente revisados.

Si tienes alguna duda, me puedes mandar un mensaje a mi LinkedIn, con gusto te respondo.

Formularios en ReactJS. Cómo manejarlos?

Leonardo José Castillo Lacruz — Thu, 06 Jun 2024 14:03:32 +0000

Cuando desarrollamos aplicaciones, una tarea común, fundamental y crítica es la recepción de datos por parte del usuario. Es esta actividad la inicia el proceso básico de un sistema:

Entrada (Input del usuario) --> Procesamiento --> Salida (Presentación de resultados).

Veamos como realizamos esta tarea en ReactJS, partiendo de la forma básica, para ello vamos a crear un componente llamado Formulario el cual va a permitirle al usuario indicar sus datos y luego estos serán enviados a una API para ser procesados y guardados.

Recordemos que con ReactJS implementamos SPAs (Single Page Applications), por lo tanto, la gestión del formulario va a variar un poco con relación a un form tradicional de HTML.

Formulario como componente con useState

Para este componente formulario, nos vamos a apoyar en el hook useState, de forma tal que podamos capturar los valores introducidos por el usuario, toda vez que haga algún cambio en él alguna de las entradas disponibles. El código de ese componente será el siguiente:

import React, { useState } from 'react';

const countries = [
  "Argentina", "Bolivia", "Brasil", "Chile", "Colombia",
  "Ecuador", "Guyana", "Paraguay", "Perú", "Surinam",
  "Uruguay", "Venezuela"
];

const Formulario = () => {
  const [formData, setFormData] = useState({
    email: '',
    password: '',
    confirmPassword: '',
    name: '',
    country: '',
    phone: '',
    photo: null
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handlePhotoChange = (e) => {
    setFormData({ ...formData, photo: e.target.files[0] });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form data submitted:', formData);
  };

  return (
    
      
        Datos de Acceso
        
          Email:
          
        
        
          Clave:
          
        
        
          Confirmar Clave:
          
        
        Datos Personales
        
          Nombre:
          
        
        
          País:
          
        
        
          Teléfono:
          
        
        
          Foto:
          
        
        
      
    
  );
};

export default Formulario;

El componente tiene 3 funciones, las cuales explicamos:

handleChange, encargada de capturar el evento onChange de las cajas y listas del formulario, con ello actualizamos el estado definido al inicio que contendrá los valores indicados por el usuario.
handlePhotoChange, la cual nos ayudará a capturar la información de la foto solicitada en el formulario, siendo que el tipo de input file se maneja de forma diferente, por ello es importante separar esta funcionalidad.
handleSubmit, en esta función implementaremos lo necesario para enviar los datos a la capa de backend.

Enviando la foto en formato base64

Es común que el envío de archivos implique realizar algunos procesos adicionales, por ejemplo, tomar el contenido y codificarlo en base64 para transformarlo en un string y así poderlo enviar de forma más fácil a la capa de backend, para ello agregamos una función responsable de esa tarea en el código:

const toBase64 = (file) => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });

Observa, que por ser una operación que implica tiempo no determinado, JavaScript la maneja como una promesa, es decir, cuando finalice la conversión, nos va a llamar y nos dará el resultado.

Además de hacer esa transformación, es importante que enviemos los datos de nombre original de archivo, su tamaño y su tipo de contenido, ya que en la capa de backend esos datos serán necesarios, para ello mejoramos la función handlePhotoChange, dejándola de esta forma:

  const handlePhotoChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      setFormData({
        ...formData,
        photo: file,
        photoName: file.name,
        photoType: file.type,
        photoSize: file.size
      });
    }
  };

Ahora con este proceso podemos mejorar nuestra función handleSubmit incorporando la conversión de la foto y el envío de los datos a la capa de backend.

const handleSubmit = async (e) => {
    e.preventDefault();

    // Convertir la foto a base64
    let base64Photo = '';
    if (formData.photo) {
      base64Photo = await toBase64(formData.photo);
    }

    // Crear el objeto con los datos del formulario
    const dataToSend = {
      email: formData.email,
      password: formData.password,
      confirmPassword: formData.confirmPassword,
      name: formData.name,
      country: formData.country,
      phone: formData.phone,
      photo: {
        base64: base64Photo,
        name: formData.photoName,
        type: formData.photoType,
        size: formData.photoSize
      }
    };

    // Enviar la solicitud POST a la API
    try {
      const response = await fetch('https://leonardojose.dev/api/usuarios', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(dataToSend)
      });

      if (!response.ok) {
        throw new Error('Error en la solicitud');
      }

      const result = await response.json();
      console.log('Form data submitted:', result);
    } catch (error) {
      console.error('Error:', error);
    }
  };

Recuerda, React trabaja como SPA, por lo tanto, el envío de datos es asíncrono, es por ello que lo primero que realizamos en la función de submit es evitar que el navegador nos haga un envío de datos o POST con la línea: e.preventDefault();

Trabajando con TypeScript

El código anteriormente implementado es totalmente váildo cuando trabajamos en JavaScript, solo que actualmente, ha tenido un gran auge, el uso del SuperJavascript, o mejor conocido como TypeScript.

Vamos a convertir nuestro componente a lenguaje typescript, para ello vamos a definir los tipos de datos correctamente, vamos a cambiar la extensión del componente para Formulario.tsx y con ello vamos a aprovechar las bondades que TypeScript, nos da, la principal para mí, poder determinar errores en tiempo de compilación.

El código del componente ahora quedará:

import React, { useState, ChangeEvent, FormEvent } from 'react';

const countries = [
  "Argentina", "Bolivia", "Brasil", "Chile", "Colombia",
  "Ecuador", "Guyana", "Paraguay", "Perú", "Surinam",
  "Uruguay", "Venezuela"
];

interface FormData {
  email: string;
  password: string;
  confirmPassword: string;
  name: string;
  country: string;
  phone: string;
  photo: File | null;
  photoName: string;
  photoType: string;
  photoSize: number | string;
}

const Formulario: React.FC = () => {
  const [formData, setFormData] = useState({
    email: '',
    password: '',
    confirmPassword: '',
    name: '',
    country: '',
    phone: '',
    photo: null,
    photoName: '',
    photoType: '',
    photoSize: ''
  });

  const handleChange = (e: ChangeEvent) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handlePhotoChange = (e: ChangeEvent) => {
    const file = e.target.files ? e.target.files[0] : null;
    if (file) {
      setFormData({
        ...formData,
        photo: file,
        photoName: file.name,
        photoType: file.type,
        photoSize: file.size
      });
    }
  };

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();

    // Convertir la foto a base64
    let base64Photo = '';
    if (formData.photo) {
      base64Photo = await toBase64(formData.photo);
    }

    // Crear el objeto con los datos del formulario
    const dataToSend = {
      email: formData.email,
      password: formData.password,
      confirmPassword: formData.confirmPassword,
      name: formData.name,
      country: formData.country,
      phone: formData.phone,
      photo: {
        base64: base64Photo,
        name: formData.photoName,
        type: formData.photoType,
        size: formData.photoSize
      }
    };

    // Enviar la solicitud POST a la API
    try {
      const response = await fetch('https://leonardojose.dev/api/usuarios', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(dataToSend)
      });

      if (!response.ok) {
        throw new Error('Error en la solicitud');
      }

      const result = await response.json();
      console.log('Form data submitted:', result);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  const toBase64 = (file: File) => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = (error) => reject(error);
  });

  return (
    
      
        Datos de Acceso
        
          Email:
          
        
        
          Clave:
          
        
        
          Confirmar Clave:
          
        
        Datos Personales
        
          Nombre:
          
        
        
          País:
          
        
        
          Teléfono:
          
        
        
          Foto:
          
        
        
      
    
  );
};

export default Formulario;

Observa que aparecen los tipos de datos de cada propiedad, de casda evento e incluso del componente React, algo que es fundamental para la mantenibilidad y legibilidad del código.

Luego nuestro código podrá ser incoporado en proyectos que usen TypeScript como base, lo cual está sucediendo con más frecuencia cada día.

Mejorando la visual del formulario

Hasta ahora nuestro código apenas tiene HTML y no usa nada de las bondades de CSS, por lo tanto, será funcional, pero no será agradable a la vista. Para ello vamos a incorporarle estilos del framework para CSS tailwind, específicamente del plugin daisyui.

Para instalar Tailwind en una aplicación react con vite, puedes seguir estas instrucciones:

How to Setup React and Tailwind CSS with Vite in a Project

Tailwind CSS is a popular CSS framework, and React is one of the most popularJavaScript libraries. And Tailwind CSS and React are a great combo to use if you’re building afrontend project. In this article, you will learn how to setup your coding environment with Vite,install React and Tailwind …

freeCodeCamp.orgSegun Ajibola

Luego de instalado Tailwind, debemos instalar daisyui, esto lo logramos con las siguientes instrucciones:

npm install daisyui

Incluso es posible usar un paquete que ya genera los componentes para react, llamado react-daisyui (no lo usamos aquí, pero es interesante conocerlo), el cual podemos instalar con el siguiente comando:

npm install react-daisyui

Ahora corresponde realizar el ajuste en nuestro componente, de forma que podamos aprovechar la visual de daisyui, quedando nuestro componente como sigue:

import React, { useState, ChangeEvent, FormEvent } from 'react';
import 'daisyui/dist/full.css';

const countries = [
  "Argentina", "Bolivia", "Brasil", "Chile", "Colombia",
  "Ecuador", "Guyana", "Paraguay", "Perú", "Surinam",
  "Uruguay", "Venezuela"
];

interface FormData {
  email: string;
  password: string;
  confirmPassword: string;
  name: string;
  country: string;
  phone: string;
  photo: File 
  photoName: string;
  photoType: string;
  photoSize: number | string;
}

const Formulario: React.FC = () => {
  const [formData, setFormData] = useState({
    email: '',
    password: '',
    confirmPassword: '',
    name: '',
    country: '',
    phone: '',
    photo: null,
    photoName: '',
    photoType: '',
    photoSize: ''
  });

  const handleChange = (e: ChangeEvent) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handlePhotoChange = (e: ChangeEvent) => {
    const file = e.target.files ? e.target.files[0] : null;
    if (file) {
      setFormData({
        ...formData,
        photo: file,
        photoName: file.name,
        photoType: file.type,
        photoSize: file.size
      });
    }
  };

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();

    // Convertir la foto a base64
    let base64Photo = '';
    if (formData.photo) {
      base64Photo = await toBase64(formData.photo);
    }

    // Crear el objeto con los datos del formulario
    const dataToSend = {
      email: formData.email,
      password: formData.password,
      confirmPassword: formData.confirmPassword,
      name: formData.name,
      country: formData.country,
      phone: formData.phone,
      photo: {
        base64: base64Photo,
        name: formData.photoName,
        type: formData.photoType,
        size: formData.photoSize
      }
    };

    // Enviar la solicitud POST a la API
    try {
      const response = await fetch('https://leonardojose.dev/api/usuarios', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(dataToSend)
      });

      if (!response.ok) {
        throw new Error('Error en la solicitud');
      }

      const result = await response.json();
      console.log('Form data submitted:', result);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  const toBase64 = (file: File) => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = (error) => reject(error);
  });

  return (
    
      
        Datos de Acceso
        
          Email:
          
        
        
          Clave:
          
        
        
          Confirmar Clave:
          
        
        Datos Personales
        
          Nombre:
          
        
        
          País:
          
        
        
          Teléfono:
          
        
        
          Foto:
          
        
        
      
    
  );
};

export default Formulario;

Observa que el código anterior ahora:

Importa DaisyUI CSS: import 'daisyui/dist/full.css'; asegurando que DaisyUI está incluido.
Uso de Clases de DaisyUI: Se aplicaron clases de DaisyUI como input input-bordered, select select-bordered, y btn btn-primary para estilizar los componentes del formulario.
Estructura del Formulario: La estructura del formulario incluye contenedores como div y form con clases de TailwindCSS y DaisyUI para un diseño limpio y responsive.

Con ello logramos una apariencia mucho más linda y agradable.

Puedes observar en el siguiente video, lo que hemos realizado y lo que explicaremos más adelante, con lo cual vas a reforzar los conocimientos.

Incorporando a react-hook-form

En el código anterior, la gestión de los valores la hicimos, usando a useState, no tenemos gestión de errores y tampoco tenemos validaciones. Podemos realizar esto de forma manual, sí, pero si nos aprovechamos de un paquete que ya realiza esto, y que además es altamente usado por la comunidad, es decir, está probado y es código que los desarrolladores ya conocemos, ¿mejor aún cierto?

Para instalar a react-hook-form, solo debemos hacer lo siguiente:

npm install react-hook-form

Luego incorporamos los hooks del paquete de esta forma:

const { register, handleSubmit, watch, formState: { errors } } = useForm();
const photoFile = watch('photo');

register, nos permite indicarle al hook qué campos del formulario vamos a utilizar.
handleSubmit, es la función propia de react-hook-form que va a manejar los valores de los campos (esto antes lo haciamos nosotros manualmente), y luego podemos indicar un callback para llamar nuestro backend.
watch, nos permite colocar una referencia para saber en todo momento el valor de un campo, en nuestro caso observamos la foto porque debemos convertirla a base64.
formState, nos indica en que estado está el formulario, por enviar, enviando o enviado y nos permite obtener los errores que se produjeron al momento de validar los campos (sí! Validaciones 😃)

Y que tal agregar algunas validaciones, como por ejemplo que la contraseña sea a la confirmación, y que la contraseña además tenga 8 caracteres, un número y un carácter especial. Queremos adicionalmente que la foto venga en formato png o jpg. Todo esto es posible haciendo uso de react-hook-form.

Veamos algunos de los ajustes que debemos realizar para que nuestro formulario sea fácilmente administrable con react-hook-form:


          {errors.email && {errors.email.message}}

Observa que agregamos el uso de register y colocamos una validación, que sea obligatorio el valor, luego si hay error lo mostramos en pantalla.

Ahora veamos un caso más complejo, la contraseña:


          {errors.password && {errors.password.message}}

Se puede identificar que cuando usamos el register, podemos indicar si es obligatorio (required), el mensaje de error (message) y el tamaño del valor mínimo aceptable (minLength) y el patrón (pattern) del valor para obligar colocar un número y un carácter especial.

Con solo eso ya hemos hecho validaciones complejas de ese campo.

Veamos como queda el componente luego de todos los cambios realizados:

import React from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import 'daisyui/dist/full.css';

const countries = [
  "Argentina", "Bolivia", "Brasil", "Chile", "Colombia",
  "Ecuador", "Guyana", "Paraguay", "Perú", "Surinam",
  "Uruguay", "Venezuela"
];

interface FormData {
  email: string;
  password: string;
  confirmPassword: string;
  name: string;
  country: string;
  phone: string;
  photo: FileList;
}

const Formulario: React.FC = () => {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const password = watch('password');
  const photoFile = watch('photo');

  const onSubmit: SubmitHandler = async (data) => {
    // Convertir la foto a base64
    let base64Photo = '';
    const file = data.photo[0];
    if (file) {
      base64Photo = await toBase64(file);
    }

    // Crear el objeto con los datos del formulario
    const dataToSend = {
      email: data.email,
      password: data.password,
      confirmPassword: data.confirmPassword,
      name: data.name,
      country: data.country,
      phone: data.phone,
      photo: {
        base64: base64Photo,
        name: file.name,
        type: file.type,
        size: file.size
      }
    };

    // Enviar la solicitud POST a la API
    try {
      const response = await fetch('https://leonardojose.dev/api/usuarios', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(dataToSend)
      });

      if (!response.ok) {
        throw new Error('Error en la solicitud');
      }

      const result = await response.json();
      console.log('Form data submitted:', result);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  const toBase64 = (file: File) => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = (error) => reject(error);
  });

  return (
    
      
        Datos de Acceso
        
          Email:
          
          {errors.email && {errors.email.message}}
        
        
          Clave:
          
          {errors.password && {errors.password.message}}
        
        
          Confirmar Clave:
           value === password || "Las claves no coinciden"
            })}
            className="input input-bordered w-full"
          />
          {errors.confirmPassword && {errors.confirmPassword.message}}
        
        Datos Personales
        
          Nombre:
          
          {errors.name && {errors.name.message}}
        
        
          País:
          
          {errors.country && {errors.country.message}}
        
        
          Teléfono:
          
          {errors.phone && {errors.phone.message}}
        
        
          Foto:
           files[0] && ['image/jpeg', 'image/png'].includes(files[0]?.type) || "Solo se permiten fotos en formato PNG o JPG"
              }
            })}
            accept="image/*"
            className="file-input file-input-bordered w-full"
          />
          {errors.photo && {errors.photo.message}}
        
        
      
    
  );
};

export default Formulario;

En el código anterior hemos realizado lo siguiente:

Validación del Email: required: "Email es requerido".
Validación de la Clave:

Mínimo 8 caracteres.
Al menos un número y un carácter especial.

3. Validación de Confirmar Clave: Verificamos que coincida con la clave.

4. Validación del País: Obligatorio.

5. Validación del Teléfono: Obligatorio y solo números

6. Validación de la Foto:

Obligatorio.
Formatos permitidos: PNG o JPG.

En el video indicado anteriormente vas a poder visualizar en detalle cada paso realizado y podrás ver como evolucionamos en el uso de formulario en la aplicación que tomamos de ejemplo.

Para cualquier duda o comentario, me puedes enviar un mensaje en mis redes:

Primeros pasos con GoLang

Leonardo José Castillo Lacruz — Mon, 15 Apr 2024 13:39:24 +0000

Empecemos por conocer qué es GoLang o simplemente "Go":

GoLang, también conocido como simplemente ‘Go’, es un lenguaje de programación creado por Rob Pike, Ken Thompson y Robert Griesemer en 2007, lanzado en 2009, que cuenta con el patrocinio de Google. Está diseñado para trabajar en soluciones que requieren un alto rendimiento y escalabilidad, especialmente en el procesamiento de datos y las conexiones de red.

Características claves de Go:

Compilado: Go se compila y genera código de máquina, lo que lo hace rápido y eficiente. Ya que nos evitamos el tiempo de interpretación de código que otros lenguajes como Javsscript o Python requieren.
Tipado estático: Las variables deben declararse con un tipo específico, esto garantiza el orden y permite evitar problemas por inconsistencias a la hora de usar las variables.
Programación concorrente/paralela nativa: Go tiene excelentes capacidades para manejar múltiples hilos de ejecución. Esto hace de Go eficiente y orientado a aplicaciones donde la cantidad de solicitudes sea alta.
Garbage Collector Nativo: Go gestiona automáticamente la memoria, de esta manera nosotros no debemos preocuparnos por alocar o liberar la memoria como en otros lenguajes como C++.
Simplista al extremo: Go elimina características complejas como clases y herencias, sobreescrituras de métodos, hasta el famoso try/catch fue removido, esto porque Go se enfoca en la velocidad y el perfomance, pero ojo es de igual forma podemos aplicar el paradigma de la programación orientada a objetos.

Diferencias entre lenguajes compilados e interpretados:

Compilado: En Go, todas las instrucciones del código fuente se convierten en lenguaje de máquina antes de la ejecución. Esto proporciona mayor velocidad y por lo tanto mayor rendimiento.
Interpretado: En lenguajes interpretados, como Python o JavaScript, el código se ejecuta línea por línea en tiempo real, lo cual puede tener una perdida de velocidad, pero también se gana la facilidad de realizar cambios.

Recuerden no todo es ganancia o pérdida, aunque en el caso anterior me quedo con los lenguajes compilados.

Instalación del ambiente

Para trabajar con Go, debemos hacer lo que denominamos la instalación de la infraestructura de trabajo, que se reduce a tener el compilador disponible en nuestro computador.

Go, para recordar es un proyecto Open Source y multiplataforma, es decir lo podemos usar en Windows, Linux o Mac. Tenemos procesos de instalación para cada uno de los sistemas operativos, sólo debemos acceder al sitio web de Go (https://go.dev) y buscar el correspondiente a nuestro sistema operativo.

Veamos los pasos para cada uno de ellos:

Windows. Siempre simple, es sólo hacer la descarga del programa de instalación y seguir el paso a paso de asistente hasta finalizar.
Linux. Lo instalamos vía línea de comandos, desde una terminal, ejecutando el comando:

sudo snap install go --classic

Mac. Es bajar el archivo .pkg y realizar el proceso de desempaquetado.

Finalizado el proceso, podemos comprobar si todo está bien, ejecutando el comando:

go version

Este comando debe mostrar algo como esto:

Al llegar a este punto, ya tenemos todo lo necesario para iniciar nuestro camino con Go.

Hola Mundo en Go

Como siempre, cuando iniciamos en un lenguaje de programación, lo tradicional es que iniciemos con un primer programa, el cual llamamos "Hola Mundo', donde tenemos ese primer contacto y ya nos comenzamos a empoderar de la nueva herrramienta de desarrollo.

En el caso de Go, no será la excepción, empecemos con este "Hola Mundo", el cual sigue a continuación:

package main

import "fmt"

func main() {
	// De esta forma comentamos el código
	fmt.Println("Hola Mundo!")
}

Revisemos las líneas de código anteriores y destaquemos algunas características:

Existe la importación de un paquete llamado main, el cual define la estructura de la aplicación, todo programa Go usa este paquete.
La función main, es el punto de inicial o de entrada de nuestra aplicación. A partir de allí desarrollamos nuestra aplicación.
Luego tenemos las importaciones, Go trabaja con paquetes, de entrada él tiene lo que se denomina la librería standard, que ya nos provee de una serie de funcionalidades interesantes (https://pkg.go.dev/std), en esta caso de esa librería, tomamos a "fmt" para realizar operaciones de escritura en la pantalla.

Con ello ya tenemos nuestra primera aplicación Go ejecutandose!

Tipos de Datos en Go

En Go podemos manejar datos de los tipos primitivos, así como en cualquier lenguaje de programación, entremos en detalle:

Tipo de datos númericos enteros:

En el caso de los números enteros, en Go, podemos decir si vamos a manejar con signo positivo o negativo, o simplemente los positivos. Además tienen la particularidad, de definir el rango, de esta forma podemos ser óptimos y usar los recursos de memoria que realmente necesitamos.

Enteros con signo:

int8: Puede almacenar valores desde -128 hasta 127. Esto se denominan enteros de 8 bits.
int16: Almacena enteros con signo de 16 bits, con un rango de -32,768 a 32,767.
int32 (también conocido como rune): Utilizado para caracteres Unicode y tiene un rango de -2,147,483,648 a 2,147,483,647.
int64: Maneja números enteros con signo de 64 bits, con un rango de -9,223,372,036,854,775,808 a 9,223,372,036,854,775,807.
int: Su tamaño depende de la arquitectura subyacente (32 o 64 bits).

Enteros sin signo, o sólo valores positivos.

uint8 (también conocido como byte): Representa enteros sin signo de 8 bits, con valores entre 0 y 255.
uint16: Números desde 0 a 65,535. Almacena enteros sin signo de 16 bits.
uint32: Utilizado para números grandes sin signo, con un rango de 0 a 4,294,967,295.
uint64: Almacena enteros sin signo de 64 bits, con un rango de 0 a 18,446,744,073,709,551,615.
uint: Su tamaño también depende de la arquitectura (32 o 64 bits).

Tipos de datos números decimales o de punto flotante:

En el caso de números decimales, no tenemos tanta variedad de tipos, sólo tenemos una diferencia y es por la arquitectura donde se ejecuta el programa (32 o 64 bits), pero vale la pena conocer sus características:

float32:

Representa números de punto flotante de 32 bits.
Puede almacenar valores con precisión hasta 7 dígitos decimales.
Es adecuado para cálculos donde la precisión no necesita ser extremadamente alta.

float64:

Es el tipo de punto flotante más común en Go.
Utiliza 64 bits para representar números de punto flotante.
Ofrece mayor precisión que float32, con capacidad para almacenar hasta 15 dígitos decimales.

Es común usar float64 por su mayor precisión a la hora de almacenar datos (15 decimales!)

Otros tipos de datos primitivos

En Go, podemos manejar:

string: Con este tipo de datos podemos almacenar cadenas alfanuméricas, para definir sus valores, basta usar comillas dobles ("") o comillas simples (''), el compilador las reconoce de igual forma.
bool: A partir de este tipo de dato podemos manejar valores lógicos: true o false, los cuales son muy útiles cuando manejamos condiciones.
struct: Este tipo de dato es muy útil, debido a que con el podemos definir datos personalizados. En Go no hay clases, pero con struct, es posible crear una suerte de interface o clase de sólo propiedades. De esta forma podemos una entidad con sus campos y manejarla de forma agrupada.

Tipos de datos compuestos

En Go podemos los siguientes tipos de datos que son combinaciones o mezcla de tipos de datos primitivos:

Arreglos: En un tipo de datos que representa una colección de elementos del mismo tipo. La longitud de un array es fija y se especifica al declararlo, a diferencia de otros lenguajes donde declaramos arreglos sin tamaño, en Go debemos indicar el tamaño al declararlo.

Ejemplo:

var miArray [5]int // Un array de 5 enteros

En Go, no es posible mezclar los tipos de datos de los valores que son parte de un arreglo, como por ejemplo si podemos hacer en Javascript.

Slices: Son arreglos sin tamaño, es decir, si hay posibilidad de definir arreglos sin tamaño pero Go, los denonima como slides. Varía un poco su forma de declararlos.

Ejemplo:

paises := []string{"Venezuela","Brasil","Chile"}

Mapas: Son un tipo de datos usado por excelencia, se definen como lista basada en el par: clave-valor, es decir cada valor está identificado por un índice personalizado (a diferencia de los arreglos que son identificado por un índice numérico secuencial).

Algunas características de los maps:

Las claves deben ser únicas y comparables (por ejemplo, strings, ints, etc.).
Los valores pueden ser de cualquier tipo y se define al declararlo.
Para declarar un mapa, utilizamos la sintaxis map[TipoClave]TipoValor.
Los mapas no siguen un orden, ni mantienen el orden de la declaración, hay que tener eso en cuenta.

Ejemplo:

miMapa := map[string]string{
   "clave1": "valor1",
   "clave2": "valor2",
   "clave3": "valor3",
}

Para agregar nuevos valores al mapa, basta apenas indicar la nueva clave y su valor como sigue:

miMapa["clave4"] = "Valor4"

Para borrar una de las propiedades del mapa usamos el método delete:

delete(miMapa, "clave1")

En el caso anterior estariamos borrando la clave clave1 de miMapa .

Adicionalmente en Go, tenemos la posibilidad gestionar las variables, a nivel de memoria, este tipo de datos se denomina Punteros. En realidad los punteros no son variables sino referencias a variables, esto es especialmente útil para poder reutilizar espacios de memoria por ejemplo al usar parámetros (que por defecto hacen una copia y consumen nuevamente los recursos).declarar

Veamos como se usa un puntero sobre una variable numerica:

package main

import "fmt"

func main() {
    var miVariable int = 10
    var miPuntero *int = &miVariable

    fmt.Println("Valor de miVariable:", miVariable)
    fmt.Println("Valor de miPuntero (dirección de memoria):", miPuntero)
    fmt.Println("Valor apuntado por miPuntero:", *miPuntero)
}

Observa que si pedimos el valor del puntero, lo que vamos a obtener es la dirección de memoria de la caja o variable. Este tipo de datos es super útil cuando queremos tener control de la gestión de memoria.

Declaración de variables en Go

En Go tenemos 2 formas de declarar variables, veamos en detalle:

Declaración formal:

var nombreVariable

Inferencia del tipo a partir del valor inicial:

var nombreVariable =

La variable toma el tipo de dato del valor indicado.

Adicionalmente tenemos una forma abreviada de declarar variables:

nombreVariable :=

De lo anterior, Go infiere de igual forma el tipo de dato a partir del valor indicado.

Puedes profundizar en el uso de los tipos de datos y declaración de variables en el siguiente video:

Condicionales en Go

En Go, similar a otros lenguajes de programación, usamos las palabras reservadas if, else, switch, para poder evaluar expresiones y ejecutar código de forma condicional, es decir ejecutar código cuando se cumple o no cumple alguna condición.

Una característica interesante de Go, es que las condiciones no necesitan parentesis para ser evaluadas, a diferencia de otros lenguajes de programación donde es obligatorio encerrar entre paréntesis la condición, así sea simple.

Ejemplos:

Condición simple.

package main

import (
	"fmt"
)

func main() {
	var userInput int
	fmt.Print("Ingresa un valor: ")
	fmt.Scan(&userInput)

	if userInput > 10 {
		fmt.Print("Valor ingresado mayor a 10: ")
	}
}

2. Condicional evaluando cuando se cumple y cuando no se cumple la condición

package main

import (
	"fmt"
)

func main() {
	var userInput int
	fmt.Print("Ingresa un valor: ")
	fmt.Scan(&userInput)

	if userInput > 10 {
		fmt.Print("Valor ingresado mayor a 10: ")
	} else {
		fmt.Print("Valor ingresado es menor o igual 10: ")
	}
}

3. Condicionales anidados, donde evaluamos múltiples condiciones:

package main

import (
	"fmt"
)

func main() {
	var userInput int
	fmt.Print("Ingresa un valor: ")
	fmt.Scan(&userInput)

	if userInput > 10 {
		fmt.Print("Valor ingresado mayor a 10: ")
	} else if userInput < 10 {
		fmt.Print("Valor ingresado es menor a 10: ")
	} else {
		fmt.Print("Valor ingresado es 10: ")
	}
}

Veamos ahora como funciona el comando switch, el cual nos permite de forma fácil evaluar múltiples condiciones, permitiendo ejecutar bloques de código. Sigue un ejemplo:

package main

import (
	"fmt"
)

func main() {
	var fruta string

	fmt.Print("Ingresa un valor alfanumérico: ")
	fmt.Scan(&fruta)

	switch fruta {
	case "manzana":
		fmt.Println("Has ingresado 'manzana'.")
	case "banana":
		fmt.Println("Has ingresado 'banana'.")
	case "pera":
		fmt.Println("Has ingresado 'pera'.")
	default:
		fmt.Println("No reconozco ese valor.")
	}
}

Lazos en Go

Es tarea cotidiana, dentro del desarrollo de software, que existan procesos o bloques de código que necesitamos ejecutar más de una vez, Go implementa las estructuras de repetición usando sólo la palabra reservada for.

La sintaxis general del for es la siguiente:

for [Instrucción Inicial]; [Condición]; [Instrucción Posterior] {
    // Acción a realizar en cada iteración
}

Veamos como implementamos algnos procesos de repetición:

Repita para, donde definimos la cantidad de veces que el proceso se va a repetir. Por ejemplo queremos ejecutar la suma de los primeros 100 numeros.

package main

import "fmt"

func main() {
    sum := 0

    for i := 0; i <= 100; i++ {
        if i%2 != 0 {
            sum += i
        }
    }

    fmt.Printf("La suma de los números impares entre 0 y 100 es: %d\n", sum)
}

Observa que se definen:

Instrucción Inicial: Se asigna el valor 0 al contador.
Condición: Se verifica si ya llegamos al número 100.
Instrucción Posterior: Avanzamos al siguiente número.

2. Ahora simulemos lo que en otros lenguajes conocemos como for-each, usando for

package main

import (
	"fmt"
)

func main() {

	var m map[string]string = map[string]string{
		"clave1": "valor1",
		"clave2": "valor2",
		"clave3": "valor3",
		"clave4": "valor4",
	}

	for k, v := range m {
		fmt.Println(k, v)
	}

}

3. Implementando un repita mientras usando for, en Go no tenemos while o do-while, pero podemos representar la acción de la siguiente forma:

package main

import (
	"fmt"
	"strings"
)

func main() {
	var fruta string

	for {
		fmt.Print("Ingresa una fruta: ")
		fmt.Scan(&fruta)

		// Convertimos la entrada a minúsculas para evitar problemas de capitalización
		fruta = strings.ToLower(fruta)

		if fruta == "naranja" {
			fmt.Println("¡Has ingresado una naranja! El bucle se detiene.")
			break
		} else {
			fmt.Println("No es una naranja. Inténtalo nuevamente.")
		}
	}
}

Observa que usamos el for sin otros parámetros:

for {
}

Mediante lo anterior generamos un bucle infinito y es nuestra responsabilidad a lo interno validar la condición de salida. Es este punto el que no define si es un repita mientras o un repita hasta, recordando que la diferencia entre ellos es que el repita mientras se puede o no ejecutar, pues la condición se debe evaluar al inicio del proceso y el repita hasta al menos se ejecuta una vez. El código anterior es un repita hasta si lo analizamos en detalle porque se lee la fruta al menos una vez, veamos como seria en forma de repita mientras.

package main

import (
	"fmt"
	"strings"
)

func main() {
	fruta := "banana"

	for {

		if fruta == "naranja" {
			fmt.Println("¡Has ingresado una naranja! El bucle se detiene.")
			break
		} else {
			fmt.Println("No es una naranja. Inténtalo nuevamente.")
		}

		fmt.Print("Ingresa una fruta: ")
		fmt.Scan(&fruta)

		// Convertimos la entrada a minúsculas para evitar problemas de capitalización
		fruta = strings.ToLower(fruta)

	}
}

Go, es un lenguaje altamente demandado actualmente, usado por empresas de gran tamaño, así que es una herramienta super atractiva de aprender, para más contenidos puedes verificar mis perfiles en:

Freecodecamp.org: https://www.freecodecamp.org/espanol/news/author/leonardo/
Linkedin: https://www.linkedin.com/in/leonardo-castillo-4911571a/
Youtube: https://www.youtube.com/channel/UCBltbOgO-DUW_SVa2zSg3Yg
Twitter: https://twitter.com/ljcl79

Consumiendo APIs con React Query

Leonardo José Castillo Lacruz — Tue, 05 Mar 2024 15:17:42 +0000

Actualmente, las aplicaciones web, destacan por tener bien diferenciadas las capas: frontend, backend y datos. La comunicación entre el frontend (o interface) y el backend (o capa que implementa la lógica de negocio), es realizada a través de lo que se denomina APIs, generalmente del tipo REST. Esta es una tarea crítica y cotidiana.

Si deseas profundizar más en cuanto a los conceptos de APIs y como es posible realizar la implementación de una capa de backend te invito a revisar este artículo, acá en freeCodeCamp en Español: Construyendo una API REST con Node + Fastify + Sequelize + PostgreSQL.

Cuando implementamos aplicaciones usando ReactJS, para realizar este proceso de consumo podemos usar las funciones especiales que la librería ofrece: useState y useEffect. Si deseas verificar en forma práctica como realizar este consumo, puedes revisar este material Consumiendo APIs con ReactJS: Aprende useEffect y useState que tenemos disponible aquí en freeCodeCamp en Español.

Ahora bien, el proceso anterior puede ser un poco extenso, es por ello en las próximas líneas vamos a mostrar un paquete que tiene como propósito facilitar y simplificar el consumo de APIs REST desde React. El nombre del paquete es: React Query o como es conocido actualmente: TanStack Query.

¿Cómo instalar React Query?

Para realizar la instalación del paquete, hacemos uso de la NPM, con el siguiente comando:

npm i @tanstack/react-query

En caso de utilizar yarn como gestor de paquetes puedes usar el comando:

yarn add @tanstack/react-query

Si usas bun, el paquete ya tienen soporte, entonces la instalación se realiza con el siguiente comando:

bun add @tanstack/react-query

Instalado el paquete, lo siguiente es entender los pasos que debemos ejecutar para hacer su implementación, estos los podemos resumir de esta forma:

Habilitando el uso del paquete en la aplicación

Para dejar disponible a React Query, debemos envolver los componentes que necesiten consumir datos, su comportamiento o uso es similar a context API, en nuestro caso vamos a suponer que estamos en una aplicación pequeña, que tiene una barra de navegación (Nav), un banner o Hero, una Galería de imágenes (Gallery) y un pie o Footer, por lo que vamos a realizar este proceso a nivel de la definición de la aplicación.

Importamos los componentes necesarios:

import { QueryClientProvider, QueryClient } from '@tanstack/react-query';

Creamos una instancia del cliente QueryCliente:

const queryClient = new QueryClient();

Luego envolvemos la aplicación quedando el código del componente principal de esta forma:

const queryClient = new QueryClient();

function App() {

  return (
    
    
      
      
      
      
    
    
  )
}

Con el código anterior, ya podemos hacer uso de React Query, en cualquiera de los componentes envueltos.

Consumiendo una API REST

Para hacer uso de React Query, lo primero es hacer las importaciones necesarias dentro del componente, en este caso importamos el hook useQuery de esta forma:

import { useQuery } from '@tanstack/react-query';

Luego le definimos la configuración necesaria a useQuery colocando los siguientes parámetros:

queryKey, nombre o identificador de la consulta a realizar
queryFn, es la promesa encargada de procesar la consulta, importante tener en cuenta que se debe esperar a la ejecución, React Query hace eso por nosotros, entonces no debemos colocar await.

Al usar el hook useQuery, él nos retorna una serie de variables superútiles, veamos esto con un código de ejemplo:

  const { isLoading, data, isError, error, isSuccess } = useQuery(
            {
                queryKey: ['productos'],
                queryFn: async () => {
                    const res = await fetch('https://apiexpress-x7sl.onrender.com/productos');
                    return res.json();
                }
            });

Observemos que recibimos un objeto con propiedades que desestructuramos en la misma línea, revisemos cada una de ellas:

isLoading, es una variable booleana (true, false) que nos indica si la consulta está cargando datos.
data, son los datos retornados por la consulta, que estarán disponibles luego de la carga, es decir, cuando isLoading pase a ser false.
isError, otra variable booleana (true/false) que nos indica si hubo algún error a la hora de ejecutar la consulta.
error, almacena cualquier error que haya sucedido, importante para poder dar respuesta al usuario en caso de que no haya podido realizarse la consulta.
isSuccess, variable booleana que va a estar en true cuando la consulta sea realizada con éxito.

Además de las anteriores, existen otras variables que nos dan aún más información y que puedes consultar en la documentación oficial del paquete.

Aplicando useQuery en un componente real

Vamos a construir un componente que haga uso de React Query, de acuerdo a lo indicado anteriormente. Este componente retornará un mensaje, en caso de que esté cargando los datos, un mensaje de error en caso de suceder algún problema y mostrará la data de productos consultados (porque estamos consultando una API de productos).

Veamos el componente:

import { useQuery } from '@tanstack/react-query';
import Product from '../Product/Product';



const Gallery = () => {
    
    const { isLoading, data, isError, error } = useQuery(
            {
                queryKey: ['productos'],
                queryFn: async () => {
                    const res = await fetch('https://apiexpress-x7sl.onrender.com/productos');
                    return res.json();
                }
            });
    
    if (isLoading)
        return (
            <>
                Cargando productos...
            
        )

    if (isError) {
        return (
            <>
                {error.message}
            
        )
    }
  return (
    <>
        
            
                Our Services
                
            
            {
                data?.map((producto) => {
                    return 
                })
            }
            
         
        
    
  )
}

export default Gallery

Nótese que no se usan estados ni efectos secundarios (useState o useEffect), el código está completamente limpio y legible, características positivas de usar React Query para esta tarea tan crítica.

En este vídeo, puedes seguir el paso a paso de la aplicación de los conceptos anteriormente estudiados.

Si tienes alguna duda, me puedes mandar un mensaje a mi LinkedIn, con gusto te respondo.

Javascript para Backend - Comparando Node / Deno / Bun

Leonardo José Castillo Lacruz — Mon, 26 Feb 2024 16:51:57 +0000

Cuando trabajamos con JavaScript, lo primero que se nos viene a la mente es un navegador, aunque esta percepción ha cambiado, debido a que JavaScript ha dejado de ser un lenguaje de la web, para convertirse en un lenguaje de programación maduro, con impacto y con gran performance del lado del servidor. Esto sumado a su facilidad en cuanto a sintaxis, lo han hecho una herramienta muy interesante para la implementación de capas de backend.

Así es, JavaScript ha entrado en la competencia en el área de backend, gracias a que existen entornos de ejecución que proveen características interesantes que hacen atractivo a JavaScript para el desarrollo de APIs por ejemplo.

Conozcamos algunos de los protagonistas de JavaScript para Backend:

Node o NodeJS

Node nació en el año 2009, de la mano de Ryan Dalh, con la idea de poder ejecutar JavaScript fuera de los navegadores. Entre sus características más resaltantes está:

La ejecución no bloqueante: para las operaciones de entrada y salida (ejemplo archivos, base de datos o integraciones), Node no se queda esperando, sino que continúa el flujo y al tener respuesta ejecuta una función de callback, lo que permite a Node hacer múltiples operaciones al mismo tiempo.
Programación orientada a eventos, el cual es un paradigma de programación que permite ejecutar código a partir de eventos, como pueden ser acciones de usuarios o respuesta de ejecución de operaciones. Lo cual permite ejecutar múltiples acciones en simultáneo, ya que se crea un hilo separado por ejecución, el cual queda escuchando y reaccionando a los eventos.
Alto Rendimiento: Gracias al motor V8 de Google Chrome, Node.js puede ejecutar código JavaScript de forma eficiente y rápida.
Arquitectura Escalable: Node tiene la característica de que puede crecer en la medida que sea necesario, ya que por su gestión de eventos e hilos, sumado a su naturaleza asincrónica, es posible atender múltiples peticiones de forma simultáneas. Con la adición de recursos de hardware la aplicación escala sin ningún problema.
Gestión de Paquetes con NPM: Node.js tiene disponible lo que se denomina el repositorio de paquetes que agregan funciones, el cual conocemos como NPM o Node Package Manager.
Comunidad Activa: Una de las fortalezas más interesantes de un software es cuando tiene una comunidad activa importante, ¿por qué? Porque esto garantiza primero que el software es usado, luego que el software va a ser mejorado y que es probado continuamente. Node tiene una comunidad muy grande, por lo cual esto es una característica fundamental.
Multiplataforma: Node.js puede ser utilizado para desarrollar aplicaciones para diferentes plataformas, incluyendo servidores web, aplicaciones de escritorio y móviles.

Ahora comentemos algunos puntos que podrían ser mejorados en NodeJS:

Soporte nativo a Typescript. Para usar Typescript en Node es necesario hacer una serie de instalaciones y configuraciones que ya deberían venir realizadas disponibles al instalar.
Mejora en la gestión de paquetes adicionales. Actualmente, los modulos adicionales o lo que conocemos como node_modules, generan una carga en general excesiva y a veces innecesaria.

Con una estimativa de 30 millones de websites usando NodeJs como plataforma de backend, es por ahora el rey de los entornos de ejecución para JavaScript del lado del servidor.

Acá puedes apreciar algunas características de forma práctica de NodeJS

Deno

El segundo entorno de ejecución, también fue creado por Ryan Dalh, como has podido apreciar Deno es la inversión del nombre Node 😲. En su lanzamiento, en el año 2018, el creador indicó que Deno llegaba para corregir las cosas que no se realizaron correctamente en Node, es decir que Deno nació algunos puntos que Node aún no tiene o apenas lanzó recientemente. La primera versión estable oficial de Deno fue lanzada en 2020.

Deno está construido bajo Rush, un lenguaje que conocido por ser seguro y con alto performance. Al igual que NodeJS, Deno trabaja con el eventloop o el paradigma de programación en eventos, con ello el performance es similar, así como las aplicaciones que se pueden construir son escalables.

Características o diferenciales de Deno

Seguridad y permisos, Deno es estricto en cuanto al acceso a los recursos, es decir, debe indicarse de manera explícita el uso de lectura y escritura de archivos, acceso a la red o acceso a las variables de ambiente (enviroment), de esta forma, nuestro código actua de forma menos arriesgada, ya que es necesario liberar los permisos mediante opciones de ejecución.
Typescript nativo, desde que lo instalas, Deno tiene la capacidad de ejecutar código Typescript, sin necesidad de realizar alguna configuración. Es posible parametrizar la generación, sólo si queremos cambiar los ajustes por defecto.
Importación de paquetes eficiente, Deno no tiene node_modules, incluso si importas paquetes de la npm (que es una maravilla), la gestión de las importaciones se pueden hacer directamente de una url, por lo que no es necesario instalar previamente, al importar, si el paquete no está disponible será descargado.
DenoKV, es una base de datos que se encuentra en fase beta, pero que próximamente será parte del kernel estable de Deno, la cual nos permite sin necesidad de usar otra herramienta, hacer uso de una base de datos tipo Clave-Valor (NoSQL), lo cual facilita el trabajo en cuanto a manejar una capa de datos sencilla.
Sistemas de permisiones

Acá podemos ver mediante ejemplos prácticos, las características o diferenciales que Deno posee:

Bun

El más reciente en torno de ejecución de JavaScript para Backend es Bun, creado en 2021 y lanzada su primera versión estable en 2024. Bun está construido en el lenguaje de bajo nivel Zig, con lo cual logra una eficiencia y una velocidad importante.

Características o diferenciales de Bun

Velocidad de ejecución o performance, ha llamado poderosamente la atención por la velocidad de ejecución, la cual es sorprendentemente mayor que la de Deno y Node.
Compatibilidad con paquetes de node (npm), Es compatible con la mayoría de paquetes de Node, por lo que es muy simple levantar en Bun una aplicación hecha en Node, ya que el grado compatibilidad es alto, por ejemplo paquetes como ExpressJS o creación de aplicaciones React con Vite funcionan sin ningún problema en Bun.
Typescript y JSX nativos, es posible implementar código TS sin ninguna configuración adicional, e incluso construir código JSX sin tener que agregar alguna libreria.

Bun aún está bastante joven, pero parece tener un futuro promisorio. En el siguiente video podrás observar algunos ejemplos de uso práctico de Bun.

Nociones básicas de Javascript

Leonardo José Castillo Lacruz — Sat, 03 Feb 2024 04:24:25 +0000

A continuación encontraras explicación a temas básicos o fundamentales del lenguaje Javascript, siendo que este lenguaje, es el referente actual del mercado, es interesante e importante manejar los conceptos iniciales.

Por qué nace Javascript?

En el año 1995, la www (World Wide Web) o lo que conocemos comunmente denominamos internet de forma errada, iniciaba su auge, con la posibilidad de compartir de forma fácil contenido (para aquel momento, la forma común era a través de CD/DVDs y el medio común eran las revistas). Este contenido era estático pero de forma fácil llegaba a nuestras pantallas. Sólo que en la medida que el contenido fue creciendo, se hizo necesario mejorar la interactividad de la comunicación, de forma tal que el usuario no solo fue un receptor de contenidos, en su lugar se convirtió en un actor importante del proceso, con el envío de datos.

Así nace Javascript, como un lenguaje orientado a mejorar la usabilidad de los sitios web, a permtir que las interfaces tomaran dinamismo y que la comunicación entre cliente y sitios web fuese más simple e incluso más divertida.

Pero el punto no quedó allí, Javascript fue creciendo, al inicio era normal que un navegador como Internet Explorer o Netscape Navigator (los navegadores que existían y dominaron el inicio de la WWW), no soportase el uso de Javascript, pero su crecimiento fue tal, que en la medida que la WWW evolucionaba, Javascript lo hacía también, convirtiendose en parte fundamental de estos programas.

Ahora mismo Javascript, ya es un lenguaje de programación maduro, con impacto no sólo en la plataforma web, sino que se ha convertido en un lenguaje multifacético, que permite trabajar del lado de la interfaz (web o frontend) y del lado del servidor (backend), además tenemos Javascript para desarrollo móvil (React Native por ejemplo) y Javascript para desarrollo de aplicaciones Desktop o Cliente/Servidor (Electron).

Por todo lo anterior (un muy breve resumen) es importante conocer los aspectos básicos de Javascript, que se indican a continuación.

Tipos de Datos en Javascript

Javascript como lenguaje de programación, tiene interesantes características que lo hacen versatil y funcional, una de ellas es como gestiona sus tipos de datos. En Javascript los tipos no se definen, es decir hablamos que es un lenguaje de tipado débil, pero eso no significa que no tenga tipos, por ello es fundamental conocer cuales de ellos están disponibles:

String para gestión variables con valores alfanuméricos y cualquier otro carácter.
Number para representar los números ya sean enteros o decimales.
BigInt, usado para representar números enteros.
Boolean para manipular los valores lógicos (true y false)
Object, con el fin de poder gestionar y representar objetos, conocidos por sus propiedades y métodos
Symbol, son un nuevo tipo de tipo de datos primitivo introducido en la versión ES6 del lenguaje. Se utilizan para representar valores únicos que se pueden utilizar como identificadores o claves en los objetos. También se utilizan para crear propiedades y métodos privados en las clases.
Null, El valor nulo representa la ausencia intencional de cualquier valor de objeto. Existe como tipo de dato primitivo de JavaScript y se trata como falso para las operaciones booleanas.
undefined, es un valor primitivo automáticamente asignado a las variables que solo han sido declarados o a los argumentos formales para los cuales no existe argumentos reales. Es decir si no asignamos ningún valor a una variable, está tendrá ese valor undefined.
Function, es un tipo de dato especial usado para reconocer cuando trabajamos sobre un función, que es un fragmento de código que realiza una tarea específica y devuelve un valor.

Como obtener el tipo de dato de un campo

En Javascript como comentamos al anteriormente, la gestión de tipos de datos es débil, no es necesario indicar el tipo de dato cuando declaramos una variable, por ello es importante saber como determinar el tipo de dato a una variable declarada. Este tipo de dato será automáticamente atribuido por Javascript a partir del valor asignado.

Para realizar esta tarea podemos usar la función typeof , como sigue a continuación:

console.log(typeof 42);// Tipo de dato esperado: "number"

console.log(typeof 'texto');// Tipo de dato esperado: "string"

console.log(typeof true);// Tipo de dato esperado: "boolean"

console.log(typeof varSinValor);// Tipo de dato esperado: "undefined"

Un punto importante a recordar es que Javascript hace conversión automática de los tipos, a partir de un valor asignado, pero existen formas para asignar tipos de forma implicita, esto lo logramos usando clases como:

Number, con esta clase conseguimos transformar un valor numérico en un tipo de dato explicito Number, cuando el valor no es un número válido será retornado el valor especial NaN.

Ejemplo de uso:

 let numeroExplicito = Number('234');

String, a partir de la declaración de esta clase, el valor pasado por argumento será definido como tipo string forma explicita.

Ejemplo de uso:

let cadenaExplicita = String(123);

Boolean, usando esta clase podemos definir un valor como tipo de dato lógico, recordando que al hacer conversión automática, el valor 0 se toma como false y cualquier otro valor se toma como true.

Ejemplo de uso:

let valorLogicoExplicito = Boolean(0);//tomará el valor false

Gestión de variables en Javascript

Anteriormente revisamos que tipos de datos podemos manejar en Javascript, de forma tal que los datos que manejemos en nuestros programas serán clasificados dentro de alguno de esos tipos, ahora bien estos datos, cómo son manejados?, de que forma serán almacenados?

Los lenguajes de programación en general, usan la memoria del computador como pequeñas cajas, en donde cada caja corresponde a un dato (que tiene su tipo), ese espacio o caja en la memoria se denomina variable. A través de las variables podemos mantener, crear, actualizar y borrar los datos en la memoria y es lo que va a permitir que podamos desarrollar programas genéricos, preparados para distintos escenarios y valores.

En Javascript las variables se manejan haciendo de tres palabras reservadas: var, const y let. Cada una de ellas tiene particularidades

Hablemos de var

La palabra reservada var permite definir una variable (o espacio de memoria) que va a estar disponible en todo el sistema, a partir del punto que sea definida y esta variable es posible cambiarla en cualquier momento, veamos un ejemplo:

var nombre = 'Diego';

function primeraFuncion() {
    console.log('La variable nombre esta disponible en la primera funcion. Nombre:' + nombre);
}

function segundaFuncion() {
    console.log('La variable nombre esta disponible en la segunda funcion. Nombre:' + nombre);
}

console.log('La variable nombre está disponible en el cuerpo principal del programa. Nombre:' + nombre);

//Llamadas a las funciones
primeraFuncion();
segundaFuncion();

En el ejemplo anterior, la variable nombre está disponible en todo el programa, porque está declarada al inicio del programa.

Si ejecutamos el código vamos a obtener el siguiente resultado:

La variable nombre está disponible en el cuerpo principal del programa. Nombre:Diego
La variable nombre esta disponible en la primera funcion. Nombre:Diego
La variable nombre esta disponible en la segunda funcion. Nombre:Diego

Ahora si cambiamos la declaración de la variable, y la colocamos dentro de primeraFuncion y ejecutamos nuestro código, vamos a obtener un error.

function primeraFuncion() {
    var nombre = 'Diego';
    console.log('La variable nombre esta disponible en la primera funcion. Nombre:' + nombre);
}

function segundaFuncion() {
    //Error porque la variable nombre no está disponible en este ámbito o alcance  
    console.log('La variable nombre esta disponible en la segunda funcion. Nombre:' + nombre);
}

//Error porque la variable nombre no está disponible en este ámbito o alcance
console.log('La variable nombre está disponible en el cuerpo principal del programa. Nombre:' + nombre);
primeraFuncion();
segundaFuncion();

¿Por qué sucede ese error? Sucede por el alcance de la variable, cuando declaramos la variable dentro de primeraFuncion su alcance es sólo dentro de esa función, al intentar llamarla fuera de esa función, la variable no existe, por ello el error.

Veamos ahora cuál es el comportamiento de una variable declarada con var en cuanto a modificar su valor: cuando se declara de esta forma, es posible modificar su valor sin problema, esto puede ser bueno pero a la vez puede generarnos problemas si no estamos conscientes de su alcance, veamos el primer código pero ahora modificando el valor de la variable en algunas de las funciones:

var nombre = 'Diego';

function primeraFuncion() {
    nombre = 'Leonardo';
    console.log('La variable nombre esta disponible en la primera funcion. Nombre:' + nombre);
}

function segundaFuncion() {
    console.log('La variable nombre esta disponible en la segunda funcion. Nombre:' + nombre);
}

console.log('La variable nombre está disponible en el cuerpo principal del programa. Nombre:' + nombre);
primeraFuncion();
segundaFuncion();

El resultado de la ejecución del código anterior es:

La variable nombre está disponible en el cuerpo principal del programa. Nombre:Diego
La variable nombre esta disponible en la primera funcion. Nombre:Leonardo
La variable nombre esta disponible en la segunda funcion. Nombre:Leonardo

Observamos como la variable fue modificada en la primera función, y de allí en adelante la variable ya queda con ese valor, si en la segunda función eso no era lo esperado, se puede producir un comportamiento no esperado, sin generar errores de ejecución.

Hablemos de let

Con la palabra reservada let también podemos declarar variables en nuestras aplicaciones Javascript. Si en nuestro ejemplo inicial cambiamos por var por let, no vamos a obtener ninguna diferencia, pues el alcance de la variable es global. Ahora donde se comporta let de manera diferente? Cuando definimos variables dentro de bloques (recordando que un bloque puede ser el código dentro de un condicional ifo dentro del estructura de repetición whileo for) el comportamiento va a ser diferente. Veamos el siguiente ejemplo:

function mostrandoDiffVarYLet(nombre) {
    //Alcance de la función  
    if (nombre == 'Diego') {
        //Alcance del bloque.    
        var profesion = 'Escritor';
        let apellido = 'Castillo';
        console.log('Dentro del bloque. Profesión:' + profesion);
        console.log('Dentro del bloque. Apellido:' + apellido);
    }
    console.log('Fuera del bloque. Profesión:' + profesion); //En esta línea va a generarse un error  
    //porque apellido fue declarado dentro del alcance del bloque  
    console.log('Fuera del bloque. Apellido:' + apellido);
}
mostrandoDiffVarYLet('Diego');

En la ejecución del código anterior, al intentar usar la variable apellido fuera del bloque condicional, se genera un error. De esta forma vemos que la variable declara con var se mantiene disponible durante el ámbito o alcance de la función, mientras que la variable declara con let se mantiene solo dentro del alcance del bloque.

Nosotros podemos usar let en lugar de var en ese ejemplo, simplemente movemos la declaración al alcance de la función y la variable profesion se va a comportar como queremos y sólo haciendo uso de la palabra let .

En cuanto a modificar o no el valor de una variable declarada con let , cambia con respecto a declararla con var ? No cambia, es posible modificar su valor siempre y cuando esté dentro del ámbito o alcance. Veamos el ejemplo ahora ajustado, usando let para todas las variable y actualizando su valor.

function mostrandoDiffVarYLet(nombre) {
    //Alcance de la función  
    let profesion = 'Escritor';
    if (nombre == 'Diego') {
        //Alcance del bloque.    
        let apellido = 'Castillo';
        console.log('Dentro del bloque. Profesión:' + profesion);
        console.log('Dentro del bloque. Apellido:' + apellido);
    }
    //Actualizamos su valor  
    profesion = 'Corredor de F1';
    console.log('Fuera del bloque. Profesión:' + profesion);
    //En esta línea va a generarse un error.  
    //porque apellido fue declarado dentro del alcance del bloque.  
    //La dejamos comentada  
    //console.log('Fuera del bloque. Apellido:'+apellido);
}
mostrandoDiffVarYLet('Diego');

Al ejecutar el código anterior, obtenemos lo siguiente:

Dentro del bloque. Profesión:Escritor
Dentro del bloque. Apellido:Castillo
Fuera del bloque. Profesión:Corredor de F1

Hablemos de const

Cuando usamos la palabra reservada const le indicamos a Javascript dos cosas:

Nuestra variable es para usarse dentro del ámbito o alcance del bloque, es decir se comporta como let
Nuestro valor se define al declarar la variable y no se cambia en ningún otro punto del sistema. Si se intenta cambiar vamos a obtener un error.

Veamos esto con un ejemplo:

function mostrandoDiffVarYLetYConst(nombre) {  
    //Alcance de la función  
    if (nombre == 'Diego') {    
        //Alcance del bloque.    
        var profesion = 'Escritor';    
        let apellido = 'Castillo';    
        const edad = 13;    
        console.log('Dentro del bloque. Profesión:'+profesion);    
        console.log('Dentro del bloque. Apellido:'+apellido);    
        console.log('Dentro del bloque. Edad:'+edad);    
        //Esta línea va a generar un error   
         //No es posible cambiar el valor    
         edad = 14;  
    }  
    profesion = 'Corredor de F1';  
    console.log('Fuera del bloque. Profesión:'+profesion);  
    //En estas líneas se va a generar errores.  
    //porque apellido y edad fueron declarados dentro del alcance del bloque  
    console.log('Fuera del bloque. Apellido:'+apellido);  
    console.log('Fuera del bloque. Edad:'+edad);
}

mostrandoDiffVarYLetYConst('Diego');

Observando el código anterior, vemos que al intentar modificar el valor de edad se genera un error, porque declaramos, le dijimos a Javascript que esa variable en memoria debe permanecer con su valor inicial, al intentarse cambiar, Javascript sigue lo definido, protege la variable y marca un error.

Luego observamos que tanto const como let, su ámbito o alcance es de bloque, es decir, son validas dentro de una función, o dentro de un condicional o dentro de un bloque de repetición, de acuerdo a como sean declarados.

Para el caso de const, existen un conjunto de variables que denominamos estructuradas, que posible que cambiemos su "valor", dejo entre comillas esto, porque en realidad, sigue el comportamiento anteriormente descrito, pero vamos a tener la sensación que es posible cambiar su valor, cuando la realidad es que estas variables se manejan por referencia, es decir su valor corresponde a su posición o referencia en la memoria, la cual al ser const sigue siendo constante, lo que sucede es que por ser estructurados vamos a acceder de forma diferente, veamos esto en detalle, revisanod Arreglos y Objetos en Javascript

Manejo de arreglos en Javascript

Los arreglos o arrays, son estructuras que nos permiten manipular de forma eficientes datos que por su naturaleza son repetibles, es decir que se pueden agrupar y se manipulados como una variable única. Ejemplo de ello: los nombres de productos, las notas de un alumno, las ciudades de un país. Imaginemos que sea necesario crear una variable para almacenar por ejemplo las ciudades de un país, sería una gestión ineficiente y que muy posiblemente nos llevaría a errores.

Es por ello que los lenguajes de programación implementan esta estructura de datos llamada arrays, y Javascript no es la excepción.

Veamos como declarar un arreglo y sus operaciones básicas:

Declaración de un arreglo o array

En Javascript podemos declarar una variable de tipo array, de las siguientes formas:

Declaración a partir del constructor de la clase

//Declara un arreglo vacio
const arreglo = new Array();

//Declara un arreglo con elemento iniciales
const arreglo1 = new Array('Elemento 1','Elemento 2');

//Declara un arreglo con un tamaño definido pero sin elementos definidos
const arreglo2 = new Array(2);

Declaración en notación literal

//Declara un arreglo vacio
const arreglo = [];

//Declara un arreglo con elemento iniciales
const arreglo1 = ['Elemento 1','Elemento 2'];

Los arreglos pueden almacenar datos de distintos tipos: primitivos y estructurados. Esto significa que podemos tener arreglos de números, cadenas de caracteres, datos lógicos, así como arreglos de objetos y arreglos dentro de arreglos, esto es super interesante y poderoso.

En buena práctica mantener los arreglos con tipos de datos similares, pero es importante saber que Javascript acepta arreglos con diferentes tipos de datos, por lo que un arreglo como el que sigue sería totalmente válido:

const arregloMultiple = [3, 5, 9, 'Hola', true];

Sólo que mi recomendación es evitar este tipo de arreglos, para mantener buenas prácticas y un código mejor estructurado.

Métodos de arreglos

Uno de los puntos de más interesante de la gestión de arreglos, es su dinamismo en cuanto a los datos, es decir nosotros podemos: agregar, actualizar y borrar elementos a un arreglo de forma fácil.

Como accedemos o actualizamos un arreglo?

Lo hacemos a través de su posición, porque cada uno de los elementos de un arreglo posee una posición o indice única, comenzando desde la posición 0, por lo que el primer elemento de un arreglo siempre estará en esta posición.

const arreglo = ['Primer elemento', 'Segundo elemento'];

//Para mostrar el primer elemento ejecutamos:
console.log(arreglo[0]);

Agregando elementos:

A un arreglo podemos agregarle elementos en su inicio o en su final, para ello nos aprovechamos de 2 métodos que Javascript nos provee:

push(), nos permite agregar elementos al final de un arreglo.

const arreglo = ['Primer elemento', 'Segundo elemento'];

//Agregando al final
arreglo.push('Tercer elemento');

//El arreglo ahora será: ['Primer elemento', 'Segundo elemento','Tercer elemento'];

unshift(), nos permite agregar elementos al inicio de un arreglo

const arreglo = ['Primer elemento', 'Segundo elemento'];

//Agregando al final
arreglo.unshift('Elemento antes del primero');

//El arreglo ahora será: ['Elemento antes del primero','Primer elemento', 'Segundo elemento'];

Eliminando elementos:

Podemos eliminar elementos tanto al inicio como al final, para ello usamos los siguientes métodos:

pop() nos permite borrar o extraer elementos del final del arreglo, el elemento extraido lo podemos pasar a una variable si fuese necesario.

const arreglo = ['Primer elemento', 'Segundo elemento','Tercer elemento'];

//Extrayendo del final
const elemento = arreglo.pop();

//El arreglo ahora será: ['Primer elemento', 'Segundo elemento'];

shift() nos permite borrar o extraer elementos del inicio del arreglo, al igual que el caso anterior, el elemento extraido lo podemos pasar a una variable.

const arreglo = ['Primer elemento', 'Segundo elemento'];

//Extrayendo del inicio
const elemento = arreglo.shift();

//El arreglo ahora será: ['Segundo elemento'];

Actualizando el valor de un elemento

Para ello lo que definimos es un nuevo valor en la posición del elemento que deseamos actualizar, veamos un ejemplo:

const arreglo = ['Primer elemento', 'Segundo elemento'];

arreglo[1] = 'Segundo elemento actualizado';

Otros métodos de uso regular de los arreglos:

Existe una cantidad interesante de métodos, que es importante conocer, de igual forma te dejo acá el link a la documentación de la MDN con todos los métodos disponibles.

Veamos los métodos que en particular más uso cuando trabajo con arreglos:

filter(), nos permite obtener un nuevo arreglo filtrado, es decir, aplicamos una condición y será creado un nuevo arreglo con sólo aquellos elementos que cumplan la condición indicada, filter no modifica el arreglo original. Importante tener esto en cuenta.

const arreglo = [1, 3, 5, 7, 9, 11];

//Queremos solo los elementos menores a 6

const arregloFiltrado = arreglo.filter((e) => e < 6);
//arregloFiltrado será: [1, 3, 5]

findIndex(), nos retorna la posición del primer elemento que cumpla la condición indicada. Es útil cuando conocemos el valor pero necesitamos la posición, para realizar algún proceso.

const arreglo = ['Primer elemento', 'Segundo elemento','Tercer elemento'];

//Obteniendo la posición del elemento
const posicion = arreglo.findIndex((e) => e === 'Segundo elemento');
//Posición tendrá el valor 1, que es la posición del elemento buscado

slice(), permite que obtegamos un pedazo (slice) o subarreglo de un arreglo, interesante e importante cuando deseamos realizar algún proceso sobre sólo un parte del arreglo.

const arreglo = ['1 elemento', '2 elemento','3 elemento','4 elemento'];

//Extrayendo un pedazo
const subArreglo = arreglo.slice(1,2);

//De esta forma subArreglo será: ['2 elemento','3 elemento']
//Podemos también solo indicar el inicio y obtendremos el resto del arreglo
const subArreglo2 = arreglo.slice(2);
//De esta forma subArreglo2 será: ['3 elemento','4 elemento'];

include(), permite determinar si un elemento del arreglo corresponde con el parámetro pasado, de esta forma podemos evaluar si dentro del array existe este valor.

const arreglo = ['1 elemento', '2 elemento','3 elemento','4 elemento'];

//Verificamos si el valor existe, esto no va a retornar true o false
const existeValor = arreglo.includes('1 eleme1nto');

//Mostramos el valor de la verificación
console.log(existeValor);

Además de estos métodos, existen una cantidad bien importante de otros métodos que nos permiten realizar múltiples operaciones sobre los arrays, puedes consultar este enlace de la MDN, con la explicación de cada uno de ellos.

Funciones en Javascript

Cuando hablamos de funciones, nos viene a la mente aquel concepto matemático, donde a partir de una entrada obtenemos un resultado procesado.

En programación el concepto de función tiene cierta similitud, en cuanto a que tenemos una entrada (parámetros) y obtenemos un resultado (retorno de la función), adicionalmente tenemos que decir que una función es un bloque código, que podemos ejecutar tantas veces necesitemos, de tal forma que hablamos de reutilización de recursos.

Qué es una función en Javascript

Con la premisa anteriormente indicada, hablemos ahora de funciones en Javascript, las cuales serán bloques de código que recibiran parámetros y retornaran un resultado. Así es, tan simple como ello, ahora vemos un ejemplo de código:

function nombreDeLaFuncion(parametro1, parametro2) {
  // Código que realiza una tarea
  return resultado;
}

Esa es la anatomía de una función, lleva un nombre (puede que a veces no 😎), recibe un conjunto de parámetros, que buscan generalizar o cubrir la mayor cantidad de comportamientos de acuerdo al proceso a implementar y al final retorna un resultado, el cual pudiera ser simplemente un return sin ningun resultado.

Que tan complejo puede ser el cuerpo de la función?

Desarrollemos siempre de forma tal que sea simple el cuerpo, si este es complejo se puede dividir en otras funciones que serán llamadas o invocadas desde una función principal.

De lo anterior, debemos diferenciar 2 momentos en la vida de una función:

Declaración: es cuando definimos su código: parámetros, cuerpo y resultado.
Ejecución, llamada o invocación: se refiere al caso en que dentro de nuestro código en otro punto, colocamos su nombre y le pedimos al interprete de Javascript que realice la ejecución de su código.

//Declaración o definición
function nombreDeLaFuncion(parametro1, parametro2) {
  // Código que realiza una tarea
  return resultado;
}

//Ejecución
nombreDeLaFuncion(valor1, valor2);

Cuál es la importancia de las funciones?

Cuando desarrollamos, en general debemos buscar ser óptimos, es decir que podamos delegar el trabajo al computador, es allí donde las funciones cobran importancia, por ser ese bloque de código que podemos llamar n veces con diferentes argumentos y la función ejecutará el proceso retornando ese resultado.

Para organizar el código siempre es importante aplicar el concepto de: divide y venceras, las funciones nos permite organizar el código de tal forma que podamos delegar a ella una tarea, en caso de ser necesario algún ajuste o mantenimiento, el cambio será realizado sólo en el cuerpo de la función.

La escalabilidad, al tener organizado nuestro código, es posible hacer crecer las caracteristicas de nuestra aplicación, será menos complicado y más factible poder extender las funcionalidades, por ello usar funciones es fundamental, no sólo en Javascript, la realidad es que se deb usar este concepto en general en el desarrollo de software.

Retornos de las funciones

Un aspecto bien interesante de las funciones, es que además de realizar un proceso, son capaces de retornar un resultado, este resultado puede ser tan simple como: verdadero, un número, una cadena de caracteres o pudiese ser tan complejo como un arreglo o lista, un objeto, una lista de objetos e incluso una función (Las llamadas funciones de orden superior).

Al ser tan flexible la gestión de funciones, se hace un recurso super interesante de aprender y de usar en nuestros desarrollos de forma constante.

Como declaramos una función en Javascript?

Existen múltiples formas declarar funciones y cada una tiene sus particularidades, veamos cuales son:

Declaración de función

Es la forma más simple y tradicional de declarar o definir una función, su anatomía sigue a continuación:

function  (,,...) {
  ...Bloque de código

  return ;
}

Expresión de función

En Javascript tenemos la particularidad de que podemos tratar las funciones como una variable cualquiera, entonces tomando esta afirmación, veamos como podemos expresar una función:

//Observa que se declara similar a una variable
const  = function(,,...) {
  return ;
}

Función de flecha o arrow function

Similar al caso anterior, una función de flecha se declara como una expresión de función, pero con la particularidad de no tener que usar la palabra reservada function, además de tener un par de características adicionales:

Si es posible realizar el proceso en una sola línea, no es necesario usar { } ni la palabra reservada return.
No tiene contexto de variables

//Es similar a una expresión de función
const  = (,,...) => {
  ...
  return ;
}

Arrow function en una línea

//Es similar a una expresión de función
const  = (,,...) => ;

IIFE (Immediately Invoked Function Expression)

Son funciones que no tienen nombre (anónimas) y que se ejecutan al momento de declararse, a diferencia de las anteriores, que separan los procesos de declaración y de ejecución. Su sintaxis sigue la siguiente anatomía:

( function () {
    let texto = 'Esta es una función de tipo IIFE';
    return `Función con resultado: ${texto}`
})()

Function constructor

Otra particularidad que Javascript nos ofrece es tener un tipo de dato para identificar las funciones, el tipo Function como lo vimos en el texto de Tipos de Datos de Javascript.

Ahora bien, cómo declaramos una función siguendo esta sintaxis?, veamos:

const  = new Function('parametro1', 'parametro2', ... , 
   'return '
);

Es importante destacar en este tipo de declaración, que tanto los parámetros (los que sean necesarios) y el código de la función se pasan como cadena de caracteres (encerrados entre comillas) y es la clase Function la que a partir de esos datos construye y devuelve una variable de tipo Function

Ahora que sabemos como declarar funciones, usemos la forma más útil en cada caso según nuestras necesidades!

En Javascript también podemos hacer gestión de otro tipo de datos super interesante que es el objeto, mapa o diccionario, veamos un poco sobre el.

Objetos, mapas o diccionarios.

Como tipo de dato estructurado, un objeto, mapa o diccionario, sigue la siguiente anatomía o estructura:

const objeto = {
	//Propiedades, de la forma nombre: valor
}

Con lo anterior, podemos inferir que un objeto se compone de diferentes propiedades, cada una con su valor específico, siendo estas propiedades de cualquier de los tipos de datos definimos (y revisados al inicio del documento) en Javascript, veamos entonces un ejemplo:

const persona = {
    nombre: 'Leonardo',
    edad: 39,
    profesion: 'Desarrollador de software',
    casado: true
}

Observa que en la definición anterior, usamos tipos de datos como: cadenas, números y lógicos o booleanos, en este caso nuestro objeto representa a una persona, por lo que la flexibilidad que permite este tipo de dato, es enorme.

Ahora veamos un ejemplo más complejo:

const persona = {
    nombre: 'Leonardo',
    edad: 39,
    profesion: 'Desarrollador de software',
    casado: true,
    hijo: {
        nombre: 'Diego',
        edad: 15,
        hobbies: ['Artes marciales','Fútbol','Lectura']
    }
}

En este ejemplo asociamos un objeto dentro de un objeto, de forma tal que se pueden crear relaciones a lo interno de la definición, dejando la gestión de datos de una forma super eficiente y aún más fléxible. Incluso percibe que agregamos una propiedad de tipo arreglo de cadena de caracteres.

Y será que podemos hacerlo aún más complejo, veamos este otro ejemplo:

const persona = {
    nombre: 'Leonardo',
    edad: 39,
    profesion: 'Desarrollador de software',
    casado: true,
    familia: [
        {
            nombre: 'Diego',
            edad: 15,
            hobbies: ['Artes marciales','Fútbol','Lectura'],
            parentesco: 'hijo'
        },
        {
            nombre: 'Isveli',
            edad: 34,
            peliculasFavoritas: ['Una esposa de mentira','Harry Potter'],
            parentesco: 'esposa'
        },
        {
            nombre: 'Julia',
            edad: 64,
            profesion: 'Docente'
        }
    ]   
}

Observa que ahora tenemos una propiedad de tipo arreglo de objetos 🤪

Con los objetos podemos gestionar los datos de forma eficiente, flexible y poderosa, es por excelencia el tipo de dato usado, en conjunto con los arreglos para la gestión de datos en nuestras aplicaciones.

Formas de acceder a las propiedades de un objeto

Cuando estamos en código, podemos hacer uso de las propiedades de la siguiente forma:

//Tomando el ejemplo anterior, acceder a la propiedad nombre
console.log(persona.nombre);

Ahora bien que pasa si por alguna razón tenemos una propiedad con espacios, ejemplo de una declaración de ese tipo:

const persona = {
    nombre: 'Leonardo',
    'direccion de la persona': 'Planeta tierra',
    edad: 39
}

Tomando la primera definición de acceso a las propiedades, nos encontrariamos con un problema ya que esto no es válido:

//No es válido
console.log(persona.direccion de la persona);

Entonces como resolvemos?, Javascript tiene para todo una solución :), veamos como se debe acceder entonces a este tipo de propiedad:

//Válido
console.log(persona['direccion de la persona']);

Lo cual también es valido si usamos el primer ejemplo:

//Válido
console.log(persona.['nombre']);

Métodos para manejar objetos en Javascript

Existen un par métodos que son muy usados cuando trabajamos con objetos, para acceder a sus propiedades y sus valores, estos son:

Object.keys(objeto), pasandole a este método un objeto, el nos devuelve un arreglo con cada una de las propiedades definidas para el objeto. Tomando el último ejemplo, la ejecución de este método nos retorna lo siguiente:

console.log(Object.keys(persona));
// [ "nombre", "direccion de la persona", "edad", "profesion", "casado", "familia" ]

Object.values(objeto), en este caso el método funciona similar al anterior, pero retornando los valores de cada propiedad. Incluso, mostrando los arreglos como valores. Siguiendo el mismo ejemplo:

console.log(Object.values(persona));
//La salida será:
/*
[ "Leonardo", "Planeta tierra", 39, "Desarrollador de software", true, [
    {
      nombre: "Diego",
      edad: 15,
      hobbies: [ "Artes marciales", "Fútbol", "Lectura" ],
      parentesco: "hijo",
    }, {
      nombre: "Isveli",
      edad: 34,
      peliculasFavoritas: [ "Una esposa de mentira", "Harry Potter" ],
      parentesco: "esposa",
    }, {
      nombre: "Julia",
      edad: 64,
      profesion: "Docente",
    }
  ] ]
  */

Como agregamos, actualizamos o removemos propiedades de un objeto?

Para agregar una propiedad a un objeto basta con definirla, de acuerdo a los visto anteriormente:

const persona = {
	nombre: 'Sirius'
};

//Agregamos una nueva propiedad
persona.genero = 'Gato';

Para actualizar, seguimos la línea del ejemplo anterior, es simplemente atribuir un nuevo valor a la propiedad:

const persona = {
	nombre: 'Sirius'
};

//Agregamos una nueva propiedad
persona.genero = 'Gato';
//Actualizamos las propiedades
persona.nombre = 'Sirius Black';
persona.genero = 'Gato Siames';

Para eliminar o remover una propiedad hacemos uso del método delete

const persona = {
	nombre: 'Sirius'
};

//Agregamos una nueva propiedad
persona.genero = 'Gato';
//Removemos la propiedad
delete persona.genero;

console.log(persona.genero); //Resultado undefined

Javascript es muy versatil, como vimos al inicio, da para usar en web, backend, desarrollo móvil y hasta desarrollo desktop, así que a colocar las manos en el código que Javascript tiene muchos desafíos interesantes.

Construyendo una API REST con Node + Fastify + Sequelize + PostgreSQL

Leonardo José Castillo Lacruz — Sat, 30 Dec 2023 02:29:10 +0000

En las próximas líneas vamos a describir los pasos para realizar la implementación de una API REST que realizará las funciones de la capa de backend y será responsable de la gestión de datos de un sistema de gestiṍn de turnos o tickets.

Si deseas profundizar en cuanto a como funciona una API REST, sus elementos y particularidades, puedes consultar este artículo de freecodecamp.org, que describe de forma detallada los conceptos anteriormente mencionados.

Cuando construimos una API REST, debemos identificar que datos para gestionar, en nuestro caso, vamos a tomar como ejemplo un sistema de gestión de tickets, que tendría un modelo de datos similar al que vemos en el siguiente diagrama:

Modelo entidad-relación. Sistema de turnos/tickets

Tomando en cuenta lo indicado, a partir del modelo entidad-relación anterior, es importante identificar los elementos que van a actuar como componentes de nuestra API REST.

Elementos componentes de una API REST

Vamos a identificar 3 componentes principales en la construcción de una API REST, estos son:

Modelos, que serán las representación de las entidades que iremos a gestionar en la API, es la abstracción de los datos del mundo real al mundo digital.
Controladores, responsables de implementar las operaciones a realizar sobre los modelos, a veces denominada capa de lógica de negocios.
Rutas, definiciones de como nuestra API puede interactuar con el mundo exterior, es decir a través de las rutas definimos la comunicación entre la implementación que vamos a realizar con los servicios o herramientas que irán a consumir lo que realicemos.

Para construir esta API vamos a usar NodeJS, que es el entorno de ejecución de javascript para backend.

Definiendo a NodeJS

Según la web oficial de nodejs.org, la definición de Node es:

Ideado como un entorno de ejecución de JavaScript orientado a eventos asíncronos, Node.js está diseñado para crear aplicaciones network escalables.

En el siguiente material tendrás algunas orientaciones básicas de como funciona y como realizar la instalación del mismo.

Qué es Fastify

Partiendo de los elementos indicados como componentes de una API, vamos a explicar que paquetes vamos a utilizar para la implementacion de cada uno de ellos. Comencemos por el responsable de las rutas o mejor en forma general, por la comunicación y transporte de datos.

Es a través de este proceso (comunicación y transporte) que nuestra API REST va a recibir y enviar datos a quien esté consumiendo el servicio. Esto se hace a través de rutas.

Para esta tarea tenemos varias opciones, como usar las clases nativas de NodeJS, usar el framework expressjs o en nuestro caso usar el framework fastify. Te preguntaras por qué Fastify?. Varias razones: simplicidad, rapidez y escabilidad del framework.

Primero vamos a crear nuestro proyecto node, con la siguiente instrucción:

npm init

Ahora avancemos a la instalación de fastify, esta muy simple, sólo ejecutanos el siguiente comando y con ello ya en nuestro proyecto podemos usar sus métodos y funcionalidades, pero comencemos por crear el proyecto:

npm install fastify

Ahora procedemos a construir el esqueleto de nuestra API.

Construyendo los elementos de nuestra API REST

Empecemos por el archivo principal, el cual será: index.js El contenido del archivo index.js será:

import Fastify from 'fastify';

const fastify = Fastify({
    logger: true
});

// Ruta inicial
fastify.get('/', async function handler (req, res) {
    return { hello: 'world' };
});
  
// Ejecución de la aplicación
try {
    await fastify.listen({ port: 3000 });
} catch (err) {
    fastify.log.error(err);
    process.exit(1);
}

Con lo anterior, ya tenemos en pocas líneas, una API funcional, que solo tiene una ruta, pero que en esencia está completa. Ahora pasemos a la extensión de sus rutas.

Definiendo las rutas básicas

Procedemos entonces a definir las rutas que nuestra API va a implementar, en este caso creamos un nuevo archivo llamado routes.js, en el cual definimos los CRUDs de cada uno de nuestros modelos, siendo que CRUD será (C-reate, R-ead, U-pdate, D-elete), en español serán las operaciones de Inserción, Lectura, Actualización y Borrado.

El archivo quedará de esta forma:

const rutas = [
    {
        method: "POST",
        url: "/usuarios",
        handler: async (req, res) => {
            res.status(200).send({status: 'OK - POST'});
        }
    },
    {
        method: "GET",
        url: "/usuarios",
        handler: async (req, res) => {
            res.status(200).send({status: 'OK - GET'});
        }
    },
    {
        method: "PUT",
        url: "/usuarios/:id",
        handler: async (req, res) => {
            res.status(200).send({status: 'OK - PUT'});
        }
    },
    {
        method: "DELETE",
        url: "/usuarios/:id",
        handler: async (req, res) => {
            res.status(200).send({status: 'OK - DELETE'});
        }
    }
]

export default rutas;

Observa que algunas rutas tienen :/id, esto lo explicaremos en detalle más adelante.

Con las rutas ya definidas, el siguiente paso será definir los modelos, notese que en el archivo anterior, dejamos la propiedad handler apuntando a una función básica que siempre retorna OK.

handler: (req,res) => {
	res.status(200).send('OK');
}

Esto significa que por ahora no tenemos ningún proceso asociado a las rutas, pero hemos dejado ya la estructura hecha. La implementación será realizada más adelante.

Incorporemos las rutas a nuestro archivo principal index.js, quedando este de la siguiente forma:

import Fastify from 'fastify';
import rutas from './rutas.js';
import cors from '@fastify/cors';

const fastify = Fastify({logger:true});
await fastify.register(cors, {

});

//POST - Inserciones                C-REATE
//GET - Consulta                    R-EAD
//PUT, PATCH - Actualizaciones      U-PDATE
//DELETE - Borrado                  D-ELETE

fastify.get("/",async function(req, res) {
    return { hello: 'world'};
});

//Incorporación de las rutas
rutas.forEach((ruta) => {
    fastify.route(ruta);
});

try {
    fastify.listen({port:3500});
} catch(erro) {
    console.log(erro);
}

En el siguiente material podrás visualizar el paso de la construcción que hemos hecho hasta ahora.

Modelos

Acá vamos a definir los datos que nuestra API procesará, tomemos la primera entidad "Usuarios" y definamos su modelo, para ello nos vamos a apoyar en sequelize, que nos permite hacer una definición que luego se reflejará en la base de datos, esto debido a que Sequelize actua como un ORM (Object Relation Mapping).

Pero qué es un ORM - Object Relation Mapping?

Tomando lo que https://en.wikipedia.com nos indica, podemos citar lo que es un ORM:

Un ORM (Object-Relational Mapping) es una técnica de programación que permite la conversión de datos entre una base de datos relacional y un lenguaje de programación orientado a objetos. En otras palabras, un ORM es una herramienta que ayuda a simplificar la traducción entre los dos paradigmas: objetos y tablas de bases de datos relacionales. Puede utilizar definiciones de clases (modelos) para crear, mantener y proporcionar acceso completo a los datos de los objetos y su persistencia en la base de datos.

Instalando Sequelizer

Para realizar la instalación de Sequelizer, necesitamos ejecutar sólo este comnpm install sequelizerando:

npm install sequelizer

Ejecutando lo anterior, tenemos ya disponible el paquete en nuestro proyecto, es momento de conectar nuestra base de datos, para ello creamos un nuevo archivo llamado db.js y colocamos los parámetros de conexión correspondientes:

/* eslint-disable require-jsdoc */
import Sequelize from 'sequelize';

/*
Clase de conexión a la base de datos
*/
class DBInstance {
	constructor() {
		const dbCfg = {
			user: '',
			host: '',
			database: '',
			password: '',
			port: 5432,
		};
		this.sequelize = new Sequelize(dbCfg.database, dbCfg.user, dbCfg.password, {
			host: dbCfg.host,
			dialect: 'postgres',
			logging: false,
		});
	}
}

export default new DBInstance().sequelize;

Con lo anterior, ya tenemos conexión a nuestra base de datos. Ajustamos nuestro archivo index.js para importar este proceso de conexión y dejarlo ejecutandose cuando sea iniciada la API. Quedando su código de esta forma:

import Fastify from 'fastify';
import db from './db.js';
import rutas from './rutas.js';
import cors from '@fastify/cors';

const fastify = Fastify({logger:true});
await fastify.register(cors, {

});

//POST - Inserciones                C-REATE
//GET - Consulta                    R-EAD
//PUT, PATCH - Actualizaciones      U-PDATE
//DELETE - Borrado                  D-ELETE

// eslint-disable-next-line no-unused-vars
fastify.get('/',async function(req, res) {
	return { hello: 'world'};
});

//Incorporación de las rutas
rutas.forEach((ruta) => {
	fastify.route(ruta);
});

async function database() {
	try {
		await db.sync();
		console.log('Conectado a la base de datos');
	} catch(e) {
		console.log(e);
	}
}

try {
	fastify.listen({port:3500});
	database();
} catch(erro) {
	console.log(erro);
}

Observa que hemos creado una función asincrona llamada database() y luego al iniciar la API, la invocamos para que se realice la conexión y sincronización del modelo.

Ahora procedemos a crear el modelo, recordando que un modelo es la representación de los datos que vamos a gestionar del mundo real en nuestra API.

Comencemos por el modelo de Usuarios:

import sequelize from "sequelizer";

const User = sequelize.define("User", {
    id : {
        type: sequelize.STRING,
        allowNull: false,
        primaryKey: true,
    },
    fullname: {
        type: sequelize.STRING,
        allowNull: false,
    },
    password: {
        type: sequelize.STRING,
        allowNull: false,
    },
});

export default User;

Observa que cada propiedad del objeto que define el modelo, corresponde con el nombre del campo que definimos en nuestro modelo de entidad-relación al inicio del documento, el nombre de cada propiedad representa cada campo, así que debemos tener cuidado con el nombre que le indiquemos, mi recomendación usar letras minusculas, no usar caracteres especiales.

En el caso de password, vamos usar un paquete adicional, para poder encriptar el contenido de la misma, recordando que por seguridad, los datos de claves no se deben guardar de forma plana o legible en la base de datos.

Para lograr que nuestro password quede guardado de forma segura, hacemos uso del paquete bcrypt, el cual nos permite codificar el valor enviado por el usuario y luego con un método propio del paquete podemos validar si clave es la guardada, de esta forma el modelo de Usuarios queda implementado con el siguiente código:

import sequelize from 'sequelize';
import bcrypt from 'bcrypt';
import db from '../db.js';


const UserModel = db.define('users', {
  id: {
    type: sequelize.STRING,
    allowNull: false,
    primaryKey: true,
  },
  fullname: {
    type: sequelize.STRING,
    allowNull: false,
  },
  password: {
    type: sequelize.STRING,
    allowNull: false,
  },
}, {
  hooks: {
    beforeCreate: (user) => {
      const salt = bcrypt.genSaltSync();
      user.password = bcrypt.hashSync(user.password, salt);
    },
  },
});

UserModel.prototype.validPassword = function(password) {
  return bcrypt.compareSync(password, this.password);
};

export default UserModel;

Modelo de Usuarios

Para el caso del modelo de tiendas o comercios, siguiendo lo definido anteriormente, el modelo queda representado con el siguiente código:

import sequelize from 'sequelize';
import db from '../db.js';

const StoreModel = db.define('stores', {
  id: {
    type: sequelize.INTEGER,
    autoIncrement: true,
    allowNull: false,
    primaryKey: true,
  },
  store_name: {
    type: sequelize.STRING,
    allowNull: false,
  },
  category_store: {
    type: sequelize.STRING,
    allowNull: false,
  },
});


export default StoreModel;

Modelo de Tiendas/Comercios

Algunas diferencias notorias, en el caso de id, usamos una propiedad dentro del objeto id que es autoIncrement, la cual define que el campo en la base de datos será del valor automático e incremental, de esta forma la base de datos asignará el id correspondiente. Otro punto interesante es el tipo de datos, en el caso de id usamos el tipo INTEGER, para definir que es un número entero.

Pasemos ahora al modelo de Tickets o Turnos, hacemos la implementación, recordando que este modelo se relaciona con Usuarios y Tiendas, de forma que un Usuario tiene N Tickets y una Tienda también tiene N Tickets, de esta forma el modelo implementado será:

import sequelize from 'sequelize';
import db from '../db.js';
import UserModel from './Users.js';
import StoreModel from './Stores.js';

const TicketModel = db.define('tickets', {
  id: {
    type: sequelize.STRING,
    allowNull: false,
    primaryKey: true,
  },
  date_time: {
    type: 'TIMESTAMP',
    allowNull: false,
  },
  status: {
    // eslint-disable-next-line new-cap
    type: sequelize.ENUM(['Creado', 'Confirmado', 'Atendido', 'Cancelado',
      'En progreso']),
    allowNull: false,
  },
  observation: {
    type: sequelize.TEXT,
    allowNull: false,
  },
  end_date_time: {
    type: 'TIMESTAMP',
    allowNull: false,
  },
});

UserModel.hasMany(TicketModel, {
  foreignKey: {
    name: 'user_id',
    type: sequelize.STRING,
    allowNull: false,
  },
});

StoreModel.hasMany(TicketModel, {
  foreignKey: {
    name: 'store_id',
    type: sequelize.INTEGER,
    allowNull: false,
  },
});


export default TicketModel;

Modelo de Turnos o Tickets

En este modelo tenemos algunas particularidades que valen la pena analizar:

Tenemos nuevos tipos de datos: TEXTpara almacenar grandes cantidad de datos (mayores a 255 caracteres), ENUM para definir un conjunto de valores cerrados para un campo en particular. TIMESTAMP para definir campos de tipo fecha/hora.
Relaciones, en este modelo le decimos a sequelize que queremos relacionar los modelos en este segmento de código:

UserModel.hasMany(TicketModel, {
  foreignKey: {
    name: 'user_id',
    type: sequelize.STRING,
    allowNull: false,
  },
});

StoreModel.hasMany(TicketModel, {
  foreignKey: {
    name: 'store_id',
    type: sequelize.INTEGER,
    allowNull: false,
  },
});

Observa que se indica que el modelo Usuarios (UserModel) tiene muchos Tickets con la instrucción: hasMany, lo mismo sucede en el caso de Tiendas (StoreModel), le indicamos que va a tener múlples Tickets.

Con ellos hemos finalizado los modelos a implementar, ahora pasemos a la lógica de negocios.

Controladores

Estos elementos tan importantes a la hora de construir nuestra API REST, son los responsables de implementar lo que denominamos la lógica de negocios, es decir ellos reciben los datos enviados por quienes consumen el servicio o la API, los procesan, envian a la capa de datos cuando corresponde y retornan una respuesta.

De acuerdo con lo anterior, entonces en los controladores donde vamos a implementar el famoso CRUD (Create, Read, Update and Delete), el cual ya citamos anteriormente. Ahora bien, definamos la anatomía de un controlador:

import Model from "../models/Model.js";

class ModeloController {
    constructor() {

    }
    
    //Creación de registros
    async create (req, res)  {
    }
    
    //Consulta de todos los registros del modelo
    async getAll(req, res) {
    }

	//Consulta de un registro en particular
    async getOne(req, res) {
    }
    
    //Actualización de un registro
    async update(req, res) {
    }
    
    
    //Borrado de un registro
    async delete(req, res) {
    }
    
 }

Notemos que el controlador implementar como comentarmos anteriormente cada una de las operaciones del CRUD, que la API va a realizar para cada uno de los modelos construidos, de esta forma, vamos a tener que crear un controlador para usuarios, otro para tiendas y uno más para los tickets o turnos.

En este material realizamos la implementación de los modelos y parte de los controladores:

Ahora para cada modelo que hemos definido en nuestra API, construimos sus controladores, quedando su código de esta forma:

UsersController

/* eslint-disable require-jsdoc */
import UserModel from '../models/Users.js';

class UsersController {
  constructor() {

  }

  async create(req, res) {
    try {
      const userModel = await UserModel.create(req.body);

      if (userModel) {
        res.status(200).send({status: true, id: userModel.id});
      }
    } catch (e) {
      res.status(500).send({error: e});
    }
  }

  async getAll(req, res) {
    try {
      const where = {...req.query};
      const usuarios = await UserModel.findAll({where});
      res.status(201).send(usuarios);
    } catch (err) {
      res.status(500).send(
          {message: err.message || 'Error al consultar usuarios'},
      );
    }
  }

  async getOne(req, res) {
    try {
      const {id} = req.params;

      const userModel = await UserModel.findByPk(id);

      if (userModel) {
        res.status(201).send(userModel);
      } else {
        res.status(404).send(
            {message: 'Registro no encontrado'},
        );
      }
    } catch (err) {
      res.status(500).send(
          {message: err.message || 'Error al consultar el usuario'},
      );
    }
  }

  async update(req, res) {
    try {
      const {id} = req.params;

      const userModel = await UserModel.update(req.body,
          {where: {id}});

      if (typeof (userModel[0]) !== 'undefined' && userModel[0] === 1) {
        res.status(201).send({
          status: true,
        });
      } else {
        res.status(404).send(
            {message: 'Registro no encontrado'},
        );
      }
    } catch (err) {
      res.status(500).send(
          {message: err.message || 'Error al actualizar el usuario'},
      );
    }
  }

  async delete(req, res) {
    try {
      const {id} = req.params;

      const userModel = await UserModel.destroy({where: {id}});

      if (userModel) {
        res.status(201).send({
          status: true,
        });
      } else {
        res.status(404).send(
            {message: 'Registro no encontrado'},
        );
      }
    } catch (err) {
      res.status(500).send(
          {message: err.message || 'Error al intentar borrar un usuario'},
      );
    }
  }
}

export default new UsersController();

Del código anterior podemos resaltar algunas caracteristicas:

Todos los métodos son asincronos, es decir por ser operaciones de base de datos, estos procesos deben esperar resultados y recordamos que Javascript no espera a nadie por lo tanto usamos las palabras reservadas async e await para lograr ese objetivo.
Encerramos el procesamiento o la lógica de cada operación entre las palabras try y catch de forma tal que cualquier error, lo podamos capturar y retornar a quien nos consume los servicios.
En cada uno de los métodos de nuestros controladores, nos vamos a apoyar en métodos de Sequelize, que nos van a facilitar el acceso y la gestión de los datos a nivel de base de datos. En la creación usamos create, en la búsqueda usamos findAll, para conseguir un registro en particular usamos findByPk, para actualizar usamos update y para borrar usamos destroy.
En las operaciones que envuelven acceso a un registro en particular usamos del objeto req la propiedad params, es decir usamos req.params para obtener el id del registro. Este parámetro lo definimos en la ruta.
Cuando hacemos operaciones de envio de datos, sea en la creación o en la actualización, el cuerpo o data la recibimos en lo que se denomina el body de la requisición, esto se obtiene con req.body.

Veamos como ha quedado el controlador de tiendas:

import StoreModel from '../models/Stores.js';


/* eslint-disable require-jsdoc */
class StoreController {
  constructor() {

  }

  async create(req, res) {
    try {
      const storeModel = await StoreModel.create(req.body);

      if (storeModel) {
        res.status(201).send({status: true, id: storeModel.id});
      }
    } catch (e) {
      res.status(500).send(e);
    }
  }

  async getAll(req, res) {
    try {
      const where = req.query;

      const tiendas = await StoreModel.findAll({where});
      res.status(201).send(tiendas);
    } catch (err) {
      res.status(500).send(
          {message: err.message || 'Error al consultar tiendas'},
      );
    }
  }

  async getOne(req, res) {
    try {
      const {id} = req.params;

      const storeModel = await StoreModel.findByPk(id);
      if (storeModel) {
        res.status(201).send(storeModel);
      } else {
        res.status(404).send(
            {message: 'Registro no encontrado'},
        );
      }
    } catch (err) {
      res.status(500).send(
          {message: err.message || 'Error al consultar la tienda'},
      );
    }
  }

  async update(req, res) {
    try {
      const {id} = req.params;
      const data = {...req.body};

      delete data.id;

      const storeModel = await StoreModel.update(data,
          {where: {id}});

      if (typeof (storeModel[0]) !== 'undefined' && storeModel[0] === 1) {
        res.status(201).send({
          status: true,
        });
      } else {
        res.status(404).send(
            {message: 'Registro no encontrado'},
        );
      }
    } catch (err) {
      res.status(500).send(
          {message: err.message || 'Error al actualizar la tienda'},
      );
    }
  }

  async delete(req, res) {
    try {
      const {id} = req.params;

      const storeModel = await StoreModel.destroy({where: {id}});

      if (storeModel) {
        res.status(201).send({
          status: true,
        });
      } else {
        res.status(404).send(
            {message: 'Registro no encontrado'},
        );
      }
    } catch (err) {
      res.status(500).send(
          {message: err.message || 'Error al intentar borrar una tienda'},
      );
    }
  }
}

export default new StoreController();

El controlador es bien similar al de usuarios, implementado en la clase UserController, solo en el método de actualización (update), agregamos está linea: delete data.id; para evitar que sea modificar el id interno del registro.

El controlador de Turnos, sigue a continuación, este controlador también tiene la protección para evitar que el campo autonumérico sea modificado en el método de actualización (update).

import TicketModel from '../models/Tickets.js';

/* eslint-disable require-jsdoc */
class TicketController {
	constructor() {

	}

	async create(req, res) {
		try {
			const ticketModel = await TicketModel.create(req.body);

			if (ticketModel) {
				res.status(201).send({status: true, id: ticketModel.id});
			}
		} catch (e) {
			res.status(500).send(e);
		}
	}

	async getAll(req, res) {
		try {
			const where = req.query;

			const tickets = await TicketModel.findAll({where});
			res.status(201).send(tickets);
		} catch (err) {
			res.status(500).send(
				{message: err.message || 'Error al consultar tickets'},
			);
		}
	}

	async getOne(req, res) {
		try {
			const {id} = req.params;

			const ticketModel = await TicketModel.findByPk(id);
			if (ticketModel) {
				res.status(201).send(ticketModel);
			} else {
				res.status(404).send(
					{message: 'Registro no encontrado'},
				);
			}
		} catch (err) {
			res.status(500).send(
				{message: err.message || 'Error al consultar el ticket'},
			);
		}
	}

	async update(req, res) {
		try {
			const {id} = req.params;
			const data = {...req.body};
			delete data.id;

			const ticketModel = await TicketModel.update(data,
				{where: {id}});

			if (typeof (ticketModel[0]) !== 'undefined' && ticketModel[0] === 1) {
				res.status(201).send({
					status: true,
				});
			} else {
				res.status(404).send(
					{message: 'Registro no encontrado'},
				);
			}
		} catch (err) {
			res.status(500).send(
				{message: err.message || 'Error al actualizar el ticket'},
			);
		}
	}

	async delete(req, res) {
		try {
			const {id} = req.params;

			const ticketModel = await TicketModel.destroy({where: {id}});

			if (ticketModel) {
				res.status(201).send({
					status: true,
				});
			} else {
				res.status(404).send(
					{message: 'Registro no encontrado'},
				);
			}
		} catch (err) {
			res.status(500).send(
				{message: err.message || 'Error al intentar borrar un ticket'},
			);
		}
	}
}

export default new TicketController();

Con esto hemos finalizado los controladores.

Rutas actualizadas

Ahora es momento de revisar como llamamos todo lo implementado en nuestras rutas, recordando que al inicio generamos las rutas para el módelo de usuarios, pero llamando a métodos genéricos en lugar de nuestros controladores, con ellos implementados, podemos ajustar el código, el cual queda de la siguiente forma:

import UsersController from './controllers/Users.js';
import StoreController from './controllers/Stores.js';
import TicketController from './controllers/Tickets.js';

const rutas = [
	{
		method: 'POST',
		url: '/usuarios',
		handler: UsersController.create,
	},
	{
		method: 'GET',
		url: '/usuarios',
		handler: UsersController.getAll,
	},
	{
		method: 'GET',
		url: '/usuarios/:id',
		handler: UsersController.getOne,
	},
	{
		method: 'PUT',
		url: '/usuarios/:id',
		handler: UsersController.update,
	},
	{
		method: 'DELETE',
		url: '/usuarios/:id',
		handler: UsersController.delete,
	},

	/* Rutas de tiendas */
	{
		method: 'POST',
		url: '/tiendas',
		handler: StoreController.create,
	},
	{
		method: 'GET',
		url: '/tiendas',
		handler: StoreController.getAll,
	},
	{
		method: 'GET',
		url: '/tiendas/:id',
		handler: StoreController.getOne,
	},
	{
		method: 'PUT',
		url: '/tiendas/:id',
		handler: StoreController.update,
	},
	{
		method: 'DELETE',
		url: '/tiendas/:id',
		handler: StoreController.delete,
	},

	/* Rutas de turnos */
	{
		method: 'POST',
		url: '/turnos',
		handler: TicketController.create,
	},
	{
		method: 'GET',
		url: '/turnos',
		handler: TicketController.getAll,
	},
	{
		method: 'GET',
		url: '/turnos/:id',
		handler: TicketController.getOne,
	},
	{
		method: 'PUT',
		url: '/turnos/:id',
		handler: TicketController.update,
	},
	{
		method: 'DELETE',
		url: '/turnos/:id',
		handler: TicketController.delete,
	},
];

export default rutas;

Interesante que nuestro archivo raiz index.js no sufre ninguna alteración, esto debido al grado de encapsulamiento y desacoplamiento que hemos implementado.

Con esto ya tenemos una API Rest funcional, implementada con NodeJS, Fastify, Sequelize y PostgreSQL.

Puedes verificar la implementación de los controladores y de todos sus métodos en este material:

Consultando bases de datos relacionales: Funciones de Agregado en SQL: Cómo Usar GROUP BY con COUNT, SUM, AVG, MAX, MIN y Más

Leonardo José Castillo Lacruz — Fri, 24 Nov 2023 01:26:13 +0000

El mundo de las bases de datos relacionales o bases de datos SQL es maravilloso, sólo que a veces nos puede resultar complejo, por no tener conocimiento de todas las herramientas que tenemos a disposición.

Hagamos un repaso rápido de que es una base de datos y sus tipos. Una base de datos es una herramienta que nos permite almacenar datos de forma permanente. Existen 2 tipos de bases de datos que difieren en su forma de almacenar y recuperar los datos pero cumplen el objetivo anteriormente descrito, veamos un poco en detalle esto.

Tipos de bases de datos:

Relacionales o SQL. Los datos se almacenan en tablas y campos, donde una tabla puede tener múltiples campos y estos campos almacenan un dato, que puede ser cadena de caracteres, textos (cadenas con más de 255 caracteres), números (enteros y decimales), fecha, fecha y hora, datos binarios. Cada herramientas de gestión de base de datos SQL puede tener algunos tipos de campos adicionales.
NoSQL o no solo SQL. Los datos se van a almacenar de acuerdo a como la herramienta lo implemente, siendo las más usadas: colecciones y documentos, par registros de la forma llave-valor, columnas anchas (donde se generan tablas y campos pero con la ventaja de cada registro puede tener diferentes campos), grafos.

De acuerdo la necesidad que se tenga, se selecciona el tipo de base de datos a utilizar. Nuestro foco en este artículo es el de las bases de datos relacionales o SQL. Para ello vamos a partir de un ejemplo que tenemos pre-construido, donde la base de datos posee 3 tablas, relacionadas entre sí, de acuerdo con el siguiente módelo: entidad-relación (es el modelo usado por excelencia para representar bases de datos SQL):

Base de datos de ejemplo:

En nuestro caso partimos de una base de datos que simula un sistema de gestión de tickets o turnos, que está compuesto de 3 tablas, que representan las 3 entidades envueltas:

users, es la tabla que nos permite representar los usuarios o clientes que van a solicitar turnos o tickets.
stores, almacena los datos de las tiendas o comercios que ofrecen los servicios y que desean tener control de los turnos o tickets de sus clientes.
tickets, tabla que almacena los turnos o tickets de los clientes en las tiendas o comercios.

Modelo entidad-relación de una base de datos de ejemplo

De acuerdo al modelo anterior, podemos entender que un usuario (registro en la tabla users) puede tener n turnos, en este caso hablamos de una relación 1 -> N, luego podemos observar que una tienda (registro en la tabla stores) va a disponer o habilitar n turnos, entonces la relación será de la misma forma: 1 -> N. Luego es posible observar que un usuario va a n turnos en n tiendas, por lo tanto la relación de usuarios con tiendas será N -> M.

Puedes obtener la base de datos de ejemplo para práctica en el siguiente link:
https://github.com/ljcl79/practica-joins

Como realizar consultas sobre una base de datos SQL

Para realizar una consulta sobre una base de datos SQL, recordemos que usamos el comando SELECT, el cual nos retorna los campos de los registros que cumplan la condición de búsqueda. La anatomía de un SELECT sigue a continuación:

En este video podrás encontrar un mejor detalle de como realizar consultas básicas, hacemos uso de la misma base de datos del documento actual.

Con el contexto anterior, podemos avanzar un nivel en cuanto a consultas de base de datos SQL, es el uso de JOINs. Los JOINs nos permites relacionar tablas por campos, que generalmente corresponden a campos que identifican registros en la tabla principal y referencia a un campo en la tabla destino.

Por ejemplo en el modelo que estamos usando como ejemplo, tenemos las relaciones indicadas anteriormente:

Tabla users por el campo id está relacionado con la tabla tickets por el campo user_id.
Tabla stores por el campo id está relacionado con la tabla tickets por el campo store_id

Ahora pensemos en como hacer una consulta que relacione las tablas, ejemplo, saber que usuarios tienen turnos, ya sea realizados o agendados. Para ello podemos aplicar el uso de JOIN, en este caso veamos la siguiente figura:

JOINs visualizado a partir de la herramienta: https://sql-joins.leopard.in.ua/

En el caso anterior la tabla A será la tabla users y la tabla B será la tabla tickets, la consulta a ejecutar para obtener que usuarios tienen turnos, como indicamos anteriormente será:

SELECT * FROM users A INNER JOIN tickets B ON A.id = B.user_id;

Observando la gráfica podemos obtener los distintos tipos de JOINs que SQL permite realizar:

INNER JOIN

Tomado de: https://sql-joins.leopard.in.ua/

LEFT JOIN

Tomado de: https://sql-joins.leopard.in.ua/

RIGHT JOIN

Tomado de: https://sql-joins.leopard.in.ua/

FULL JOIN

Para profundizar sobre el tema de JOINs puedes acceder a este artículo de freeCodeCamp.org en español: https://www.freecodecamp.org/espanol/news/tutorial-de-uniones-en-sql/.

De igual forma, en el siguiente video podrás entrar en detalle de como realizar consultas usando JOINs.

Consultas a realizar

Con el modelo anterior indicado, pensemos en algunas consultas que serán interesantes realizar:

Cantidad de usuarios con ticket por día en un periodo
Promedio de turnos por día en un periodo
Cantidad de turnos mayor o menor por dia.
Cantidad de turnos ejecutados mayor o menor por dia.
Cantidad de turnos por Tienda por día en un periodo
Top 10 de las tiendas con mayor cantidad de turnos ejecutados.

Todas las consultas anteriores tienen un elemento en común, es que necesitan agruparse para poder hacer las operaciones de cálculo, para ello, SQL tiene un palabra reservada que podemos ejecutar en nuestras queries: GROUP BY, que adicionalmente se puede filtrar usando la palabra reserva HAVING.

Además de ello, de las consultas podemos entender que debemos conseguir el valor mayor, el valor menor, el promedio por ejemplo, todo lo anterior se denomina, funciones de agregado, veamos esto en detalle.

Agrupando los resultados por campos

Cuando realizamos una consulta, podemos definir que los resultados se agrupen por los valores de un campo, de esta forma, luego podemos obtener valores como conteo, suma o promedio de valores, incluso obtener el mayor o el menor valor de un campo . Adicionalmente cuando agrupamos podemos filtrar esos resultados agrupados aplicando los criterios anteriomente indicados (conteo, suma, etc);

Anatamía de un GROUP BY con HAVING:

Ordenando los resultados

Al momento de realizar consultas, es posible querer que estas se ordenen por algun campo, siendo los criterios disponibles: de forma ascendente y de forma descendente. Esto nos permite obtener los datos con una visual definida de tal forma que sea facil ubicar los datos y también poder comparar sus valores.

Para ordenar una consulta simplemente agregamos al final de ella, las palabras reservadas ORDER BY y luego el o los campos los cuales deseamos ordenar, siendo posible ordenar por multiples campos y cada campo tenga su criterio (ascendente o descendente).

Limitando los resultados

En alguna oportunidades queremos solo obtener el primer registro de la consulta (aunque sea haya retornado una cantidad mayor de registros), o por ejemplo queremos obtener el top 10 de registros con cierta condición, para ello usamos cada herramienta de base de datos posee una palabra reservada, en nuestro caso, usando MySQL o PostgreSQL, la palabra reservada será LIMIT.

Más adelante usaremos tanto el orden como la limitación para ajustar nuestras consultas.

Funciones de agregado

Estas son funciones de SQL (Si SQL así como un lenguaje de programación tienen funciones, lo que lo haces aún más poderoso 😎), que realizan un calculo, en base a un campo o expresión de campos, sobre un conjunto de datos y retornan un resultado.

Tomando en cuenta lo indicado en punto anterior, las funciones de agregado generalmente van acompañadas de las palabras reservadas GROUP BY y en algunos casos de la palabra HAVING (estas trabajan en conjunto se mencionó anteriormente), pero esto no es regla, es decir no es necesario ello. Entendido esto, podemos obtener una única fila como resultado de una consulta con una función de agregado, o una fila por cada grupo generado en la query (usando GROUP BY)

Anatomía de las funciones de agregado

Las consultas o SELECT usando funciones de agregado van a seguir la siguiente forma:

Ejemplo de consultas que retornarian un único resultado:

Día del primer turno registrado
Día del último turno registrado
Cantidad de turnos procesados por el sistema
Si le agregamos a la tabla de tickets, los minutos de cada turno ejecutado, podemos obtener la suma de tiempo ejecutado.

Estos 4 ejemplos nos van a retornar una fila de resultado solamente, porque no estamos agrupando por ningún elemento.

Ahora bien, veamos cuales son esas funciones de agregado:

COUNT

Nos permite hacer el conteo, o contar cuantos registros o filas que cumplen la condición de la consulta. Su sintaxis es muy simple: ]

SELECT COUNT(campo o *) FROM tabla1 INNER JOIN tabla2 ON (tabla1.key = tabla2.key) WHERE

La anterior consulta nos va a retornar una sola fila

Ahora vemos la siguiente consulta:

SELECT COUNT(campo o *) FROM tabla1 INNER JOIN tabla2 ON (tabla1.key = tabla2.key) WHERE  GROUP BY

La anterior consulta nos va a retornar una fila por cada uno de los distintos valores de campo1

SUM

Nos permite hacer la suma de los valores del campo de los registros o filas que cumplen la condición de la consulta. Tiene sentido cuando el campo es numérico. Su sintaxis sigue a continuación:

SELECT SUM(campo) FROM tabla1 INNER JOIN tabla2 ON (tabla1.key = tabla2.key) WHERE

Agrupando por algún campo queda:

SELECT SUM(campo) FROM tabla1 INNER JOIN tabla2 ON (tabla1.key = tabla2.key) WHERE  GROUP BY

AVG

Esta función calcula el promedio de los valores del campo de los registros o filas que cumplen la condición de la consulta, se entiende como el promedio a la suma de los valores dividido entre la cantidad de registros, sería algo como SUM/COUNT. Sólo funciona si el campo es numérico. La sintaxis es:

SELECT AVG(campo) FROM tabla1 INNER JOIN tabla2 ON (tabla1.key = tabla2.key) WHERE

Agrupando por algún campo queda:

SELECT AVG(campo) FROM tabla1 INNER JOIN tabla2 ON (tabla1.key = tabla2.key) WHERE  GROUP BY

MAX

La función MAX, nos permite calcular el máximo o mayor valor de un conjunto de registros o filas que cumplen la condición de la consulta (siempre comento esto porque estas funciones se pueden o no combinar con condiciones de consulta). A diferencia de las anteriores, es posible usarla en cualquier tipo de dato que sea ordenable, por ejemplo, textos y números. La usamos de la siguiente forma es:

SELECT MAX(campo) FROM tabla1 INNER JOIN tabla2 ON (tabla1.key = tabla2.key) WHERE

Agrupando por algún campo queda:

SELECT MAX(campo) FROM tabla1 INNER JOIN tabla2 ON (tabla1.key = tabla2.key) WHERE  GROUP BY

MIN

La función MIN, nos permite calcular el menor valor o el valor mínimo de un conjunto de registros o filas devueltos a realizar una consulta, esta puede tener o no condiciones. Como su antecesora (MAX), es posible usarla en cualquier tipo de dato que sea ordenable, caso más usado: textos y números. Para ejecutarla, lo indicamos de la siguiente forma:

SELECT MIN(campo) FROM tabla1 INNER JOIN tabla2 ON (tabla1.key = tabla2.key) WHERE

Agrupando por algún campo queda:

SELECT MIN(campo) FROM tabla1 INNER JOIN tabla2 ON (tabla1.key = tabla2.key) WHERE  GROUP BY

Implementando las consultas solicitadas en SQL

Vamos a realizar el código SQL para cada una de las consultas planteadas anteriormente, para ello vamos a usar lo que hemos aprendido: Funciones de agregado, agrupamiento y relacionamiento.

Cantidad de usuarios con ticket por día en un periodo. Definamos ese periodo para el ejemplo como el mes de julio de 2023.

En este caso, lo que requerimos es cantidad de registros, es contar por lo tanto la función de agregado que vamos a usar es COUNT, adicionalmente nos piden que ese conteo, sea realizado por día, es decir debemos agrupar los datos por el día del turno.

Con lo anterior la consulta a construir será:

SELECT COUNT(*) FROM users INNER JOIN tickets ON (users.id = tickets.user_id) WHERE date_time >= '2023-07-01' AND date_time < '2023-08-01' GROUP BY date_time

La consulta está correcta de sintaxis, pero el campo date_time es de tipo fecha y hora, por lo tanto, esta agrupando siempre que el ticket fuese realizado en el mismo día y a la misma hora, lo cual no es lo solicitado, para ello vamos a hacer uso de una función especial que nos retorne la fecha solamente en el caso de un campo de tipo datetime, en ese caso la función es DATE, luego es necesario que ademas del conteo, mostremos el día, por lo que la consulta queda:

SELECT DATE(date_time), COUNT(*) FROM users INNER JOIN tickets ON (users.id = tickets.user_id) WHERE date_time >= '2023-07-01' AND date_time < '2023-08-01' GROUP BY DATE(date_time)

Resultado obtenido de la consulta anterior.

Promedio de turnos por día en un periodo

Para esta consulta debemos hacer uso de la función AVG, ya que lo nos piden es el promedio de turnos por dia, en un periodo, en ese caso, tomamos la consulta anterior, y sobre esa consulta aplicamos un concepto que se denomina SUBSELECT. Cuando hacemos uso de SUBSELECT debemos encerrar entre () la consulta original y luego le damos un nombre, observa como queda la consulta:

SELECT AVG(total) FROM 
(SELECT DATE(date_time), COUNT(*) as total FROM users INNER JOIN tickets ON (users.id = tickets.user_id) WHERE date_time >= '2023-07-01' AND date_time < '2023-08-01' GROUP BY DATE(date_time)) as t1

El texto as t1 es el que nos permite indicarle a SQL que ese SUBSELECT que está entre parentesis: (SELECT DATE(date_time), COUNT(*) as total FROM users INNER JOIN tickets ON (users.id = tickets.user_id) WHERE date_time >= '2023-07-01' AND date_time < '2023-08-01' GROUP BY DATE(date_time))

Otro punto interesante es que le dimos un nombre al valor de conteo, para poder luego obtener su promedio, eso lo hicimos de esta forma: COUNT(*) as total

Este es el resultado de la consulta de promedio

Cantidad de turnos mayor o menor por dia.

En este caso debemos usar las funciones de MAX y MIN, vamos a realizar 2 consultas para ello. Para obtener el día con mayor cantidad de turnos esperados (es decir sin importar su status), hacemos la siguiente consulta:

SELECT MAX(t1.total) FROM 
(
SELECT DATE(date_time) as fecha, COUNT(*) as total FROM users INNER JOIN tickets ON (users.id = tickets.user_id) 
WHERE date_time >= '2023-07-01' AND date_time < '2023-08-01' GROUP BY DATE(date_time)
) as t1;

La consulta anterior nos devuelve la cantidad máximas de turnos, pero no obtenemos el día, lo cual sería importante, por lo que en ese caso podemos hacer uso de otra herramienta que no es función de agregado, pero que es básica para cualquier consulta, el ordenar, luego si solo queremos un registro, nos apoyamos en otra herramientas disponible que es la de limitar como vimos anteriormente.

Como queda nuestra consulta para obtener el día com mayor cantidad de turnos, usando orden y limitación:

SELECT DATE(date_time) as fecha, COUNT(*) as total FROM users INNER JOIN tickets ON (users.id = tickets.user_id) 
WHERE date_time >= '2023-07-01' AND date_time < '2023-08-01' 
GROUP BY DATE(date_time) 
ORDER BY 2 DESC LIMIT 1

Ahora obtenemos tanto el día como la cantidad

Para obtener la cantidad menor de turnos en un día usamos las mismas consultas, sólo ajustando las funciones de agregado o el criterio de orden.

SELECT MIN(t1.total) FROM 
(
SELECT DATE(date_time) as fecha, COUNT(*) as total FROM users INNER JOIN tickets ON (users.id = tickets.user_id) 
WHERE date_time >= '2023-07-01' AND date_time < '2023-08-01' GROUP BY DATE(date_time)
) as t1;

Observa que en este caso cambiamos MAX por MIN.

Ahora usando orden y limitación:

SELECT DATE(date_time) as fecha, COUNT(*) as total FROM users INNER JOIN tickets ON (users.id = tickets.user_id) 
WHERE date_time >= '2023-07-01' AND date_time < '2023-08-01' 
GROUP BY DATE(date_time) 
ORDER BY 2 ASC LIMIT 1

Para este caso solo cambiamos es DESC por ASC.

Día con mayor o menor cantidad de turnos ejecutados

Esta consulta es similar a la anterior, solo que en este caso vamos a agregar una condición del valor del campo status, que sea igual a realizado, observa como quedan las consultas:

Primero veamos el día con mayor cantidad de turnos realizados o ejecutados:

SELECT MAX(t1.total) FROM 
(
SELECT DATE(date_time) as fecha, COUNT(*) as total FROM users INNER JOIN tickets ON (users.id = tickets.user_id) 
WHERE date_time >= '2023-07-01' AND date_time < '2023-08-01' AND status = 'Realizado' GROUP BY DATE(date_time)
) as t1;

Recordando que si queremos la fecha, usamos orden y limitación:

SELECT DATE(date_time) as fecha, COUNT(*) as total FROM users INNER JOIN tickets ON (users.id = tickets.user_id) 
WHERE date_time >= '2023-07-01' AND date_time < '2023-08-01' AND status = 'Realizado'
GROUP BY DATE(date_time) 
ORDER BY 2 DESC LIMIT 1

Ahora veamos el día con menor cantidad de turnos realizados o ejecutados:

SELECT MIN(t1.total) FROM 
(
SELECT DATE(date_time) as fecha, COUNT(*) as total FROM users INNER JOIN tickets ON (users.id = tickets.user_id) 
WHERE date_time >= '2023-07-01' AND date_time < '2023-08-01' AND status = 'Realizado' GROUP BY DATE(date_time)
) as t1;

Usando orden y limitación, obtenemos tanto la cantidad como la fecha que sucedió:

SELECT DATE(date_time) as fecha, COUNT(*) as total FROM users INNER JOIN tickets ON (users.id = tickets.user_id) 
WHERE date_time >= '2023-07-01' AND date_time < '2023-08-01' AND status = 'Realizado'
GROUP BY DATE(date_time) 
ORDER BY 2 ASC LIMIT 1

Cantidad de turnos por Tienda por día en un periodo

Veamos ahora este ejemplo, donde la función de agregado es la de conteo, pero debemos agrupar por 2 campos, en este será la fecha del turno y el nombre de la tienda, los campos están en 2 tablas diferentes pero esto no será problema para nuestra consulta. Veamos como queda:

SELECT store_name, DATE(date_time) as fecha, COUNT(*) as total FROM stores INNER JOIN tickets ON (stores.id = tickets.store_id) 
WHERE date_time >= '2023-07-01' AND date_time < '2023-08-01' GROUP BY store_name, DATE(date_time)

En la consulta apreciamos que el agrupamiento se realizó por el nombre de la tienda y la fecha del turno: GROUP BY store_name, DATE(date_time)

Top 10 de las tiendas con mayor cantidad de turnos ejecutados.

En este caso, analicemos la consulta, vamos a necesitar contar los turnos, función COUNT, luego debemos agruparlos por cada tienda, de esta forma obtenemos la cantidad por tienda, luego aplicamos un criterio de orden descendente, para que las primeras sean las tiendas de mayor cantidad de turnos y luego lo limitamos a 10. Excelente!, veamos la query.

SELECT store_name, COUNT(*) as total FROM stores INNER JOIN tickets ON (stores.id = tickets.store_id) 
WHERE date_time >= '2023-07-01' AND date_time < '2023-08-01' GROUP BY store_name ORDER BY total DESC LIMIT 10

Resultando lo siguiente:

Veamos aquellas consultas que sabemos que no tienen agrupamiento:

Día del primer turno registrado

SELECT MIN(date_time) FROM tickets t

De forma rápida apreciamos que usando la función MIN, obtemos el valor mínimo de ese campo.

Día del último turno registrado

SELECT MAX(date_time) FROM tickets t

Acá apreciamos que logramos obtener el valor máximo del campo fecha del turno.

Cantidad de turnos procesados por el sistema

Consulta básica:

SELECT COUNT(*) FROM tickets WHERE status = 'Realizado'

Si le agregamos a la tabla de tickets, los minutos de cada turno ejecutado, podemos obtener la suma de tiempo ejecutado.

SELECT SUM(tiempo) FROM tickets WHERE status = 'Realizado'

Recuerden que para poder ejecutar la consulta anterior debe agregarse la columna tiempo en la tabla tickets.

Todo lo realizado hasta aquí lo puedes ver en la práctica en el siguiente video:

Consumiendo APIs con ReactJS: Aprende useEffect y useState

Leonardo José Castillo Lacruz — Mon, 13 Nov 2023 02:43:05 +0000

Introducción a las APIs

Empecemos por conocer lo que es una API. Estas letras son el acrónimo de application programming interface, en español lo podemos traducir como Interfaz de programación de aplicaciones, su objetivo fundamental es permitir que la comunicación entre 2 o más elementos o sistemas.

Con la definición anterior, también indicar que existen diferentes tipos de API, una de las más conocidas es la API que ofrece Windows para poder acceder a los recursos del sistema operativo y construir aplicaciones sobre él. Otro tipo de API y es el foco de nuestra atención, es el tipo encargado del transporte de datos entre sistemas, siendo ampliamente utilizado actualmente.

Arquitecturas de API para transporte de datos

Dado su amplio uso, las APIs de transporte de datos se pueden organizar o implementar de diferentes formas, teniendo como aspectos diferenciales, el formato de datos y la forma como se definen las reglas de comunicación entre los principales puntos a definir, veamos algunos tipos de arquitectura de API para transporte de datos:

REST (Representational State Transfer o Transferencia del estado representacional), es actualmente la arquitectura más usada, utiliza el protocolo http como base para el transporte de datos, cada petición u operación es independiente y realiza una tarea completa, es decir no hay dependencia entre operaciones.
GraphQL, al igual que REST, esta basado en el protocolo http, pero se diferencia en la forma como realiza las operaciones, ya que estas se basan en un lenguaje de consulta y manipulación de datos, lo cual hace posible manejarlas de manera más detallada y óptima pero incrementando un poco la complejidad.
Websocket. Es una arquitectura basada en el concepto de socket, el cual mediante el protocolo TCP, crea una conexión directa entre 2 puntos y la mantiene abierta, de forma tal que cualquier operación se ejecuta en el menor tiempo posible. Es indicada para casos en que la comunicación debe realizarse en tiempo real.
Webhook. Es un tipo de arquitectura un poco diferente a las anteriores, el inicio del proceso se atribuye a eventos, es decir, es a partir de una acción, que el proceso se inicia, como por ejemplo, cuando un registro en el sistema está en la condición X, se ejecuta la petición a la URL y en general son respuestas a procesos, por lo que esta arquitectura se denomina API reversa o inversa.
RPC y gRPC. Esta arquitectura actua como un proceso remoto ejecutado en ambiente local, trabaja bajo http, tcp, o udp. Se base en la definición de un servicio que es invocado por el cliente y resuelto por el servidor, a diferencia de REST, tanto como cliente como servidor comparten definiciones del servicio, es decir debe haber correspondencia en sus implementaciones, en REST cada lado implementa de su forma y es solo en el transporte de datos que debe correspondencia.
SOAP. Mas que una arquitectura es protocolo de comunicación, basado en http pero con transporte de datos hecho en XML (eXtensible Markup Language, o en español 'Lenguaje de Marcado Extensible'), su forma de trabajo es basada en acceso a objetos y tiene un conjunto de reglas y restricciones que la hacen un poco más compleja de manejar pero posee mayor seguridad.

Tipos de arquitecturas más conocidos. Tomado de: https://www.linkedin.com/in/brijpandeyji/

Detallando una API REST

Como comentamos anteriormente, una API REST es una herramienta o mecanismo que permite interconectar componentes o sistemas. Su uso actualmente se ha enfocado en ser la forma ideal para implementar procesos de gestión de datos, conocidos como CRUD (C-reate, R-ead, U-pdate y D-elete), de uso común para cualquier aplicación.

El formato común de transporte de datos este tipo de APIs es JSON (Javascript Object Notation), el cual por ser liviano y muy bien estructurado permite que podamos representar de forma simple y entendible los modelos que serán procesados.

La comunicación entre el cliente y el servicio se realiza a través de protocolo http como indicamos anteriormente y cada tipo de operación está relacionada o identificada por un verbo, veamos que significa ello.

Para saber que operación se va a realizar existen 2 elementos fundamentales que permiten definirla, la ruta o endpoint y el verbo. Cuandon realizamos operaciones sobre una API REST, estas las denominamos peticiones, solicitudes o requisiciones, recordando que quien inicia la operación es el cliente, conversando con el servicio que dispone o habilita la API.

Ruta o endpoint de una petición en API REST

Es la dirección o url que se va a ejecutar cuando realicemos la petición, solicitud o requisición, de esta forma el protocolo http, identificará que servidor va a responder y que modelo o entidad es la que se va a procesar. Sigue a continuación lo que se denomina la anatomía de una ruta o endpoint.

Elementos o partes de un endpoint

Verbos de una API REST

Para que esta conversación sea posible, existen lo que se denominan verbos, que son los que definen que tipo de operación se va a realizar, los verbos más comunes en una API REST son:

GET: se define o identifica como el verbo que permite realizar consultas, es importante indicar que este verbo trabaja de la misma forma que en el protocolo http, donde los datos que enviamos quedan expuestos en la url. Esta operación es la R de R-ead.
POST: es el verbo que nos permite definir operaciones de creación de registros, los datos al igual que en el protocolo http, viajan por un mecanismo interno o cuerpo de la petición, no son visibles. En este caso enviamos los datos en lo que denominamos el cuerpo o body de la petición, generalmente se envian en formato JSON
PUT: mediante este verbo hacemos actualizaciones completas de registros, es decir, lo que enviamos va a sustituir lo que existe, generalmente en la url o endpoint de la petición se envía un identificador que permite saber sobre que registro se hace la actualización, importante tener claro este punto, ya que en REST tenemos 2 formas de actualizar registros, los datos al igual que en POST, no son visibles en el envío.
PATCH: con el uso de este verbo, podemos realizar actualizaciones de forma incremental, es decir podemos cambiar partes de registro sin afectarlo por completo, es decir son actualizaciones parciales. Los datos en este caso de igual forma viajan mediante el cuerpo o body de la petición, es decir no son visibles en el envío. En la ruta o endpoint generalmente se indica un parámetro que pemite identificar el registro a ser actualizado.
DELETE: a través de este verbo podemos indicar la operación de borrado de registros. No es necesario enviar body, ya que en la ruta o endpoint se indica un parámetro que permite identificar que registro se va a eliminar.

En las definiciones anteriores se indica que para identificar un registro, la buena práctica o común implementación es indicarlo en la ruta, pero no hay una restricción técnica que sea de obligatorio cumplimiento.

ReactJS y los hooks

Iniciamos recordando que ReactJS es una libreria que permite implementar y construir el front-end para aplicaciones web, esta libreria es de amplio uso, por estar basada en Javascript tiene una comunidad fuerte que apoya su evolución continua.

React trabaja de la forma en que la aplicación sólo comunica al navegador la página inicial, esto se denomina SPA o Single Page Application, y toda la lógica es controlada e implementada por la libreria, esto hace que el performance y la usabilidad de cara al usuario sea mucho mejor que las aplicaciones web tradicionales (basadas en html+css+JS y renderizado total).

Uno de los puntos fuertes que surgió a partir de la versión 16.8, es la implementación en base a componentes funcionales, lo cual facilitó de forma enorme la construcción e implementación, de igual manera en esa versión nacieron los hooks, pero que son y como funcionan?, en las siguientes lineas lo revisamos en detalle.

Entiendo los hooks de ReactJS

Empecemos por definir y entender que son los Hooks, expresémoslo en los términos más simples, un hook es una función, partiendo de esa premisa entonces podemos indicar que no es cualquier función, está claro ello, en ese caso podemos decir:

Un hook es una función especial con un objetivo especifico, simplificar algún proceso que hasta el momento se realizaba de otra forma.

Con este concepto más amplio, podemos decir que los hooks, son funciones que simplifican procesos relacionados al ciclo de vida de componente funcionales, porque hasta la versión 16.7 de React, los componentes funcionales sólo recibían props y no era posible gestionar su estado, solo los componentes de clases (antigua forma de construir componentes, basada en POO ) soportaban está gestión.

Un detalle interesante, es que dada la usabilidad y potencia de los Hooks, no solo la librería base React actualmente tiene hooks, ahora otros paquetes de amplio uso también implementan hooks, tal como es el caso de react-router-dom por ejemplo.

Gestión de estado - useState en ReactJS

Uno de los puntos críticos y de suma importancia cuando construimos aplicaciones de una sóla página (SPA - Single Page Application) es la gestión de estado, dado que en el enfoque tradicional (html + css + js + server), la gestión es realizada mediante la gestión de sesiones en el lado del server, en el enfoque de ReactJS, la gestión es hecha a través de hooks, siendo el hook encargado de esta operación el useState.

Conociendo a useState

Este hook permite mantener el control de los estados de un componente, entiendo a los estados como las características o propiedades que definen el comportamiento y presentación del componente. Toda vez que un estado cambia, significa que el componente ha cambiado y por tanto debe actualizarse o renderizarse (es decir construirse nuevamente).

Tomemos un ejemplo práctico, una aplicación que presenta productos, en ese caso hablamos de un componente tipo "Galeria", que muestra datos y fotos de estos productos. Al iniciar no tiene productos, es decir, tenemos un estado tipo lista o arreglo, pero que está vacía al inicio, por lo tanto se presenta un mensaje de "Sin productos disponibles". Ahora mediante algún proceso (que vamos a entender más adelante), esa lista se llena con algunos datos, que debe suceder? que al recibirlos estos datos disparan un proceso de actualización del componente "Galeria".

Entendido el concepto teórico de funcionamiento de la gestión de estado, pasemos a colocar las manos en el código. Vamos a crear una aplicación con Vite y vamos a crear un componente funcional llamado Galeria. En este material puedes verificar como se realiza la creación de componentes en React.

Para definir un estado se sigue la siguiente anatomia:

//Definición de un estado
const [estado, setEstado] = useState();

Observa que siempre que se define un estado, se invoca al hook useState el cual nos retorna un arreglo que desestructuramos (recordar que la desestructuración está disponible en Javascript desde la versión ES2015) en 2 variables, una se refiere al estado en sí y otra es la función que permite asignar o atribuirle valor a ese estado.

Por ser de manejo especial, a los estados no le podemos asignar valor, como tradicionalmente lo hacemos en Javascript, entonces lo hacemos siempre a través de la función setteadora.

Por nuestra aplicación necesitar presentar múltiples productos, también va a ser necesario crear un componente para esta gestión. Es buena práctica en ReactJS, granular o despiezar de la manera más detallada la gestión de componentes, para que podamos aprovechar las características de la libreria y obtener un comportamiento óptimo de nuestras aplicaciones.

Veamos el código del componente Galeria:

import React, { useState } from 'react'
import Product from '../Product/Product';

const productos = [
    {
        "_id": "652803510a598cf5573918f3",
        "nombre": "The Complete Common Core: State Standards Kit, Grade 5",
        "sku": "D82015FFBF",
        "precio": 12.88,
        "descripcion": "...",
        "imagenes": [
        {
        "_id": "654f7cae84c15e3104b1b006",
        "url": "https://images-na.ssl-images-amazon.com/images/I/41gxkFaSFfL.jpg",
        "nombre": "https://images-na.ssl-images-amazon.com/images/I/41gxkFaSFfL.jpg"
        },
        ]
    },
    {
        "_id": "652803510a598cf5573918f4",
        "nombre": "Flash Furniture 25''W x 45''L Trapezoid Red HP Laminate Activity Table - Height Adjustable Short Legs",
        "sku": "39F1B8A212",
        "precio": 117.26,
        "descripcion": "...",
        "imagenes": [
        {
        "_id": "654f7cae84c15e3104b1b00b",
        "url": "https://images-na.ssl-images-amazon.com/images/I/31WxfYlS8XL.jpg",
        "nombre": "https://images-na.ssl-images-amazon.com/images/I/31WxfYlS8XL.jpg"
        },
        ]
    },
    {
        "_id": "652803510a598cf5573918f3",
        "nombre": "The Complete Common Core: State Standards Kit, Grade 5",
        "sku": "D82015FFBF",
        "precio": 12.88,
        "descripcion": "...",
        "imagenes": [
        {
        "_id": "654f7cae84c15e3104b1b006",
        "url": "https://images-na.ssl-images-amazon.com/images/I/41gxkFaSFfL.jpg",
        "nombre": "https://images-na.ssl-images-amazon.com/images/I/41gxkFaSFfL.jpg"
        },
        ]
    },
    {
        "_id": "652803510a598cf5573918f4",
        "nombre": "Flash Furniture 25''W x 45''L Trapezoid Red HP Laminate Activity Table - Height Adjustable Short Legs",
        "sku": "39F1B8A212",
        "precio": 117.26,
        "descripcion": "...",
        "imagenes": [
        {
        "_id": "654f7cae84c15e3104b1b00b",
        "url": "https://images-na.ssl-images-amazon.com/images/I/31WxfYlS8XL.jpg",
        "nombre": "https://images-na.ssl-images-amazon.com/images/I/31WxfYlS8XL.jpg"
        },
        ]
    },
    {
        "_id": "652803510a598cf5573918f3",
        "nombre": "The Complete Common Core: State Standards Kit, Grade 5",
        "sku": "D82015FFBF",
        "precio": 12.88,
        "descripcion": "...",
        "imagenes": [
        {
        "_id": "654f7cae84c15e3104b1b006",
        "url": "https://images-na.ssl-images-amazon.com/images/I/41gxkFaSFfL.jpg",
        "nombre": "https://images-na.ssl-images-amazon.com/images/I/41gxkFaSFfL.jpg"
        },
        ]
    },
    {
        "_id": "652803510a598cf5573918f4",
        "nombre": "Flash Furniture 25''W x 45''L Trapezoid Red HP Laminate Activity Table - Height Adjustable Short Legs",
        "sku": "39F1B8A212",
        "precio": 117.26,
        "descripcion": "...",
        "imagenes": [
        {
        "_id": "654f7cae84c15e3104b1b00b",
        "url": "https://images-na.ssl-images-amazon.com/images/I/31WxfYlS8XL.jpg",
        "nombre": "https://images-na.ssl-images-amazon.com/images/I/31WxfYlS8XL.jpg"
        },
        ]
    },
];


const Gallery = () => {
    //Definición del estado
    const [listaProductos, setListaProductos] = useState([]);

    const llenarProductos = () => {
        setListaProductos([...productos]);
    }

    //Si no hay producto emitimos un mensaje
    if (listaProductos.length === 0) {
        return <>
        No hay productos disponibles
        
        
    }
    
    //Mostramos los productos
  return (
    
    {
        listaProductos.map((p) => {
            return 
        })
    }
    
    
  )
}

export default Gallery

Expliquemos un poco el código anterior, empecemos por definir el estado, esto se encuentra en la siguiente línea:

	//Definición del estado
    const [listaProductos, setListaProductos] = useState([]);

Como indicamos anteriormente, realizamos la llamada al hook useState el cual nos retorna 2 variables, nuestro estado listaProductos y su función setteadora setListaProductos, notese que le pasamos a useState un arreglo vacío como valor inicial, de esta forma estamos indicando que el estado va a ser de tipo arreglo.

Luego tenemos una expresión de función que nos va a servir para llenar el arreglo a partir de un evento, este evento será el click de un botón que hemos agregado al mostrar el mensaje de "No hay productos disponibles".

Observa que en esta función llenarProductos se realiza la asignación del estado, de un modo que para quien viene de Javascript puro o vanilla, puede en principio no ser entendida, vamos explicar un poco porque se hace así:

const llenarProductos = () => {
	setListaProductos([...productos]);
}

Observa que se usa el spread operator, el cual es una característica disponible de ES2015, este operador básicamente lo que hace es crear un nuevo arreglo y lo que pasamos como: ..., se copia inmediamente a este nuevo arreglo, de esta forma lo que estamos realizando es la creación de un arreglo con los datos de productos, al ser un nuevo arreglo hay cambio de estado y ReactJS reacciona, actualizando el componente. Y por qué no usar el método push por ejemplo, porque en ese caso estariamos agregando un valor, solo que el arreglo para React no estaria modificado, por ser un tipo de dato estructurado y manejado por referencia, en esencia por ser inmutable, en este caso, para React el arreglo sigue igual, no hay cambio de estado por lo tanto no se renderiza.

Avanzando en el código nos encontramos la implementación del componente, donde lo primero que realizamos es la verificación de existencia o no de productos, si no existen se muestra un mensaje y un botón para cargar productos. En caso de existir productos, se hace un recorrido, recordando que por ser un arreglo, tenemos disponible sus métodos nativos de Javascript, entre ellos el método map.

Recorremos el arreglo y para cada producto construimos un componente de tipo Product. Este componente recibe los datos de cada producto y hace una presentación en pantalla de las informaciones. Sigue a continuación el código del componente Product

import React from 'react'

const Product = ({product}) => {
  return (
    
        
        
        
            
                {product.nombre}
            
            
                {product.descripcion}
            
        
        
            
                Precio: {product.precio}
            
            
                SKU: {product.sku}
            
                
    
  )
}

export default Product

Este código es simple, lo que retorna es el HTML necesario para presentar los datos de productos, le hemos hecho algunos ajustes en cuanto a CSS para presentar la información de una forma agradable. Nota que valimos si hay imágenes en el producto, de lo contrario presentamos una imagen por defecto.

Ya hemos visto como funciona la gestión de estado, solo que en este caso nuestros datos están en memoria o en el código, luego hemos tenido que hacer un clic para poder cargarlos. Avancemos en el uso de otro hook que nos va a permitir, consultar una API externa y luego cargar mediante la actualización del estado.

Efectos secundarios - useEffect en ReactJS

Los efectos secundarios, son acciones que podemos ejecutar durante el ciclo de vida de un componente ReactJS, para ello detallemos cual es el ciclo de vida que ReactJS implementa:

Montaje, es cuando el componente es creado.
Actualización, proceso ejecutado toda vez que un estado del componente cambia, por tanto es necesario reconstruir el componente
Desmontaje, cuando se destruye el componente, por ejemplo si nos cambiamos de vista.

Analizando este ciclo, entendemos que nuestro componente es creado, solo se actualiza por un cambio de estado, el cual es generado a partir de un evento, generalmente ejecutado o invocado por el usuario y luego se destruye. Pensemos ahora que deseamos presentar nuestros productos al momento de que se cargue el componente, sólo que estos productos seran consultados a una API externa, por lo cual no se van a mostrar de inmediato, en el mejor de los casos puede que sean algunos segundos de tiempo, pero puede pasar que sea necesario un tiempo mayor, o peor aún que se genere algún error, en ese caso nuestro usuario va a estar esperando con una pantalla blanca, esto no es correcto.

Es allí en ese punto anterior, que useEffect y los efectos secundario entran en escena. Ahora lo anterior con useEffect, queda de la siguiente forma:

Creamos el componente, sabiendo que no tiene datos, por lo tanto podemos informar al usuario de esto, o mejor aún podemos decirle que estamos buscando los datos.
Inmediatamente luego de creado el componente, podemos invocar a useEffect, el cual ejecutará un callback, donde nosotros tenemos la libertad de poder consumir la API indicada (recordando que esto se hace con promesas o async/await de Javascript).
Al llegar los datos podemos actualizar nuestro estado listaProductos, luego esto va a disparar la actualización del componente. Nuestro usuario va a estar atento y siempre informado de lo que sucede (usabilidad)

Y como se implementan los pasos anteriormente descritos?, vayamos al código, tomando en cuenta que vamos a consumir una API que se encuentra en la siguiente URL: https://apiexpress-x7sl.onrender.com/productos, esta API fue desarrollada por mi y es pública, así que puedes usarla para que realices tus ejercicios.

Implementando el consumo de una API con ReactJS

En nuestro caso, el consumo de datos que queremos realizar es a nivel del componente Galeria, el cual actualmente tiene los datos en memoria, como debemos ajustar su código, primero empecemos por conocer la anatomía del useEffect:

useEffect(() => {
      //Callback a ejecutar en el proceso de montaje y/o actualización
    
      return () => {
        //Callback a ejecutar en el proceso de desmontaje
      }
    }, [Arreglo de dependencias para saber cuando ejecutar el useEffect])

Con lo anterior podemos percibir que el useEffect cumple a cabalidad el ciclo de vida de componentes, de acuerdo a lo indicado anteriormente:

Ejecuta un callback (bloque de código o función) al hacer el montaje (Paso 1 del ciclo de vida) y al hacer actualizaciones (Paso 2 del ciclo de vida, esta ejecución es opcional y va a depender del arreglo de dependencias).
Puede ejecutar un callback al hacer el desmontaje (Paso 3 del ciclo de vida, este es opcional)

Sólo hay una restricción en el useEffect, se ejecuta siempre en el proceso de montaje de acuerdo a lo anterior.

Expliquemos ahora el arreglo de dependencias:

Si el arreglo no se indica, el useEffect se ejecuta tanto en el montaje como en cualquier cambio de estado.
Si el arreglo se indica vacio [], el useEffectse ejecuta solo en el proceso de montaje.
Si dentro del arreglo, indicamos algunos estados, el useEffect se ejecuta tanto en el montaje, como cuando esos estados indicados cambien.

Con ello tenemos flexibilidad para indicar, como queremos que sea ejecutado este efecto secundario.

Veamos como queda nuestro código luego de implementado el useEffect:

import React, { useState, useEffect } from 'react'
import Product from '../Product/Product';



const Gallery = () => {
    //Definición del estado
    const [listaProductos, setListaProductos] = useState([]);

    useEffect(() => {
      const obtenerDatos = async () => {
        const res = await fetch('https://apiexpress-x7sl.onrender.com/productos');
        const data = await res.json();
        setListaProductos([...data]);
      }

      obtenerDatos();

    }, []);
    

    //Si no hay producto emitimos un mensaje
    if (listaProductos.length === 0) {
        return <>
        Cargando productos
        
    }
    
    //Mostramos los productos
  return (
    
    {
        listaProductos.map((p, i) => {
            return 
        })
    }
    
    
  )
}

export default Gallery

Expliquemos los cambios que hemos realizado:

Ya no es necesario tener el arreglo de productos, ni el botón para cargar datos, ni el handler para el clic llenarProductos, con esto nuestro código ha quedado más simple.
Luego hemos implementado el useEffect de la siguiente forma:

useEffect(() => {
      const obtenerDatos = async () => {
        const res = await fetch('https://apiexpress-x7sl.onrender.com/productos');
        const data = await res.json();
        setListaProductos([...data]);
      }

      obtenerDatos();

    }, []);

Tenemos una función de callBack llamada obtenerDatos, la cual de forma asincronica, se conecta con la API (https://apiexpress-x7sl.onrender.com/productos) y obtiene una respuesta, luego pedimos solo los datos en formato JSON, tal como indicamos que la API los retornaba, un ejemplo de los datos se puede ver en la siguiente imagen:

Ejemplo de retorno de la API que estamos usando

Estos datos nos han quedado disponibles en la variable: data, ahora esta variable que es un arreglo de objetos, se lo asignamos al estado listadoProductos, con lo que explicamos anteriormente, este cambio de estado dispara la actualización del componente Galeria, y con ello hemos podido lograr el objetivo planteado, consumir datos via API y usando useState y useEffect.

En el siguiente video podrás apreciar la construcción de todo lo explicado anteriormente.

Leonardo José Castillo Lacruz - freeCodeCamp.org

Docker y dockerizar - qué significan estos términos?

¿Qué es Docker?

Aspectos importantes de usar Docker

Guía rápida de instalación

¿Qué es una imagen?

¿Qué es un contenedor?

¿Cómo correr un contenedor de una imagen?

¿Qué es dockerizar una aplicación?

¿Qué es el Dockerfile?

Comandos básicos del Dockerfile

¿Cómo dockerizar una aplicación Node.js?

Importancia del archivo .dockerignore

Rutas en Angular. Como implementarlas

Introducción a las Rutas en Angular

¿Cómo funciona el enrutamiento en Angular?

Tipos de Rutas en Angular

🔹 Rutas Estáticas

🔹 Rutas Dinámicas

🔹 Rutas Programadas (Programáticas)

Elementos claves para implementar rutas en Angular

📌 RouterOutlet

📌 routerLink

📌 ActivatedRoute

📌 Router

Configuración Inicial

Configuración del Módulo de Rutas (app-routing.ts)

Uso de routerLink en la Barra de Navegación

Mostrar Componentes con RouterOutlet

Implementar una Ruta Dinámica

Navegación Programática con Router

Introducción a los Hooks Avanzados

Explorando useMemo, useCallback y useLayoutEffect en React

1. useMemo: Optimizando cálculos innecesarios

2. useCallback: Memoriza funciones

3. useLayoutEffect: Ajustes visuales antes del renderizado

Implementación Práctica

1. Aplicación de useMemo: Filtros dinámicos

2. Aplicación de useCallback: Optimización de funciones

3. Aplicación de useLayoutEffect: Tooltips ajustables

Documentando APIs REST en Node.js con Swagger Autogen y Swagger UI Express

¿Qué es Swagger?

Ventajas de usar Swagger y Swagger Autogen

Cómo documentar tu API REST con Swagger Autogen y Swagger UI Express

1. Preparación del proyecto

2. Configuración de Swagger Autogen

3. Integración con Swagger UI Express

Ejemplo de código documentado

Servicios y Observables en Angular

¿Qué son los servicios en Angular?

Cómo se implementa un servicio

1. Crear un servicio

2. Proveer el servicio

Casos de uso de los servicios

1. Lógica de negocio compartida

2. Gestión de estados o datos globales

3. Consumo de APIs

Uso de servicios con consumos de APIs

1. Configuración inicial

2. Crear el servicio para la API

Consumiendo servicios API desde Javascript

Introducción a las APIs y REST

¿Qué es una API?

¿Qué es REST?

Métodos HTTP en el Consumo de APIs

Ejemplo de Solicitudes HTTP con fetch

Uso de fetch en JavaScript

Estructura Básica de fetch

Solicitud GET con fetch

Solicitud POST, PUT y DELETE con fetch

Ejemplo de POST

Ejemplo de PUT

Ejemplo de DELETE

Proyecto: Explorador de Países

Proyecto: Explorador de Países

HTML de la Página Principal

Función para Obtener Datos en script.js

Función dibujaCards(paises)

${pais.name.official}

Primeros pasos con Angular 18

Importancia del archivo `.dockerignore`

📌 `RouterOutlet`

📌 `routerLink`

📌 `ActivatedRoute`

📌 `Router`

Configuración del Módulo de Rutas (`app-routing.ts`)

Uso de `routerLink` en la Barra de Navegación

Mostrar Componentes con `RouterOutlet`

Navegación Programática con `Router`

Ejemplo de Solicitudes HTTP con `fetch`

Uso de `fetch` en JavaScript

Estructura Básica de `fetch`

Solicitud GET con `fetch`

Solicitud POST, PUT y DELETE con `fetch`

Función para Obtener Datos en `script.js`

Función `dibujaCards(paises)`