DEV Community: Henri de la Hoz

Prompt Engineering: Guía Clara y Práctica

Henri de la Hoz — Tue, 23 Dec 2025 13:16:34 +0000

Qué es un buen prompt

Un buen prompt es específico. La ingeniería de prompts consiste en traducir conceptos que solemos manejar de manera intuitiva o desde el sentido común y convertirlos en instrucciones explícitas y conscientes.

Al hacer estas relaciones más claras, los LLM pueden capturar conexiones más profundas y complejas entre las ideas.

Siempre que sea posible, es recomendable redactar el prompt en tu lenguaje nativo, ya que mejora la precisión semántica.

Framework para crear prompts efectivos

1. Rol

Asignar un rol mueve al modelo hacia áreas de conocimiento específicas. Esto permite respuestas más alineadas con el resultado que buscamos.

Un rol puede ser, por ejemplo: “Actúa como un analista financiero senior” o “Eres un profesor experto en historia latinoamericana”.

Dentro del rol también se puede incluir el objetivo general que se espera que cumpla.

2. Enfoque

Aquí se indica con precisión qué quieres que haga el modelo: clasificar, redactar, resumir, corregir, analizar, crear ideas, etc.

3. Contexto

Incluye los datos, ejemplos, herramientas o referencias que el modelo utilizará para realizar la tarea.

Sin contexto adecuado, un buen prompt puede fracasar.

4. Límites

Definen las reglas que restringen la creatividad del modelo y evitan la divagación.

Sirven para especificar qué no debe hacer el modelo o qué debe cumplir estrictamente para obtener el resultado esperado.

Comparativa entre diferentes tipos de LLMs

No existe un modelo que sea “el mejor para todo”. Cada usuario debe elegir la herramienta que mejor se adapte a su necesidad.

Modelos rápidos: Responden sin planificar en detalle. Son ideales para tareas simples y directas.
Modelos “thinking” o reflexivos: Dedican tiempo a planificar su cadena de razonamiento. Son más lentos, pero ofrecen respuestas más profundas y acertadas.

Few-Shot Prompting

El few-shot prompting es útil para tareas donde la información es ambigua o abstracta, como:

Clasificar textos por emoción.
Categorizar contenido según impacto.
Identificar patrones en datos difusos.

Los ejemplos (buenos y malos) ayudan al modelo a entender lo que se busca, pero deben usarse con equilibrio para no limitar su creatividad ni inducir sesgos.

Recomendaciones:

Variar el orden de los ejemplos.
Usarlo cuando hay ambigüedad, complejidad o se requiere alta precisión.

Cómo estructurar un prompt

Usar formato como Markdown, HTML o pseudo-ML ayuda al modelo a entender con claridad dónde empieza y termina cada sección.

El formateo permite:

Aumentar la consistencia en los resultados.
Resaltar instrucciones críticas.
Minimizar malentendidos.

Mitigar el problema de la ventana de contexto

Los modelos prestan más atención a lo más reciente. Para evitar pérdidas de información clave:

Recordar periódicamente las instrucciones importantes.
Utilizar formato para resaltar lo crítico.
Hacer preguntas para detectar olvidos o alucinaciones.

Cuando la conversación es muy larga, es útil extraer y resumir la información relevante, para luego continuar en un nuevo hilo con ese resumen como punto de partida.

Técnicas de mitigación

Grounding

Consiste en aclarar explícitamente cuál debe ser la fuente de la respuesta.

Se puede lograr:

Usando mayúsculas o etiquetas.
Indicando frases como “solo usa esta información”.

También ayuda a evitar alucinaciones pedir al modelo que, si no encuentra la respuesta, declare que no está disponible.

Cadena de pensamiento (Chain-of-thought)

Solicitar que el modelo responda paso a paso permite analizar su proceso y mejorar la calidad de sus soluciones.

También se puede pedir que genere múltiples propuestas antes de seleccionar la mejor.

Prompt Chaining

Cuando conocemos la lógica del negocio, podemos dividir un proyecto grande en varias tareas pequeñas, cada una representada por un prompt.

Esto ayuda a optimizar la ventana de contexto y mejora la calidad del resultado final.

Parámetros: Temperatura y Top-P

Temperatura

Baja: Para consistencia, precisión y tareas analíticas.
Alta: Para creatividad, generación de ideas o contenido original.

Top-P

Controla la diversidad del vocabulario:

Top-P alto: Mayor variedad de palabras, más libertad creativa y exploración semántica.
Top-P bajo: El modelo se limita a las palabras más probables y seguras.

Cómo evaluar la efectividad de un prompt

Consistencia: Repetir el prompt y obtener resultados similares.
Precisión: Especialmente importante cuando no queremos creatividad.
Relevancia: Que el contenido generado responda exactamente a lo solicitado.
Claridad: El modelo debe mantener el tono y formato indicado.

Un LLM puede usarse para evaluar estos criterios sobre respuestas generadas por otro LLM.

Including standalone components in your module based Angular application routes.

Henri de la Hoz — Sat, 17 Dec 2022 17:39:22 +0000

As you know, one of the new features from Angular 15 is the concept of standalone components.

Basically what the Angular team is doing by introducing this feature is making components the basic foundation to develop in Angular.

Before, the basic foundation to develop in Angular was NgModules, in other words you needed to understand how NgModules work in order to develop apps in Angular correctly.
On the other hand, React, Vue and others frameworks / libraries are based mainly on components, so moving from one of them to Angular required some extra effort because of the differences in the basic concepts I just mentioned.

Standalone components reduces that friction and helps in the transition from developing in React, Vue or others to develop in Angular.

But what if you are already workin in Angular and you already have a module-based application? How can I render SaC (standalone component) in my module-based Angular app routes?

Create your standalone component

Imagine you need to create a new form page in your web app and you want to implement it using an standalone component, you can create this new component using the command

ng g c new-form-page --standalone

We are telling Angular to generate a new component named new-fprm-page and using the flag standalone we are making it standalone (obviously).

This is going to create the component and is not going to modify any other file from our project.

Add your new standalone component page in your routes

Rendering only your component without lazy loading


const routes: Routes = [
    {
        path: 'my-new-standaline-form-page',
        pathMatch: 'full',
        component: NewFormPageComponent,
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule {}

Rendering only your component with lazy loading


const routes: Routes = [
    {
        path: 'my-new-standaline-form-page',
        pathMatch: 'full',
        loadComponent: () => import('path/to/new-fprm-page.component').then(com => com.NewFormPageComponent)
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule {}

Rendering your component inside a layout component with lazy loading


const routes: Routes = [
    {
        path: 'my-new-standaline-form-page',
        pathMatch: 'full',
        component: LayoutComponent,
        children: [
            {
                path: '',
                loadComponent: () =>
                    import('path/to/new-fprm-page.component').then((c) => c.NewFormPageComponent),
            },
        ],
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule {}

Hope it works for you.

Implementing and consuming a notification service

Henri de la Hoz — Fri, 07 Oct 2022 20:58:36 +0000

In this post we are going to see one way we can implement a notification Angular service that can be used in different pages or use cases in our app.

What is needed before working in our service?

This example was done in Angular 14 and RXjs 6
We need to create a shared module that is going to expose our notification component. Remember that a shared module is a module that is included in the file app.module.ts when we do that, we are making the module available all over our app.

import { SharedModule } from './shared/shared.module';

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        AppRoutingModule,
        SharedModule,
        BrowserAnimationsModule,
    ],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

Create the service via CLI

The first step is simply generating our service by the following command

ng g s shared/services/notification

you can place the service wherever you want, in my case I chose the shared folder because the service follows the principle of being available to other modules in the app.

Implementing notification service

For the sake of Typescript principles, we will use an interface for typing the notification object that is going to "travel" through our service.

export enum NotificationType {
  success = 'is-success',
  danger = 'is-danger',
  warning = 'is-warning',
}

export interface MaNotification {
  title: string;
  message: string;
  type: NotificationType;
}

Simply, our notification object will have a title, a message and a type.

Now let's import our notification interface and implement our service.

import { Injectable } from '@angular/core';
import { ReplaySubject } from 'rxjs';
import { MaNotification } from 'src/app/models/notification.model';

@Injectable({
    providedIn: 'root',
})
export class NotificationService {
    private notifyRequest = new ReplaySubject<MaNotification>();

    notifyRequest$ = this.notifyRequest.asObservable();

    constructor() {}

    notify(notification: MaNotification) {
        this.notifyRequest.next(notification);
    }
}

So, what do we see here?

We see the annotation Injectable that has the attribute providedIn, this setting is allowing us to use our service all over the app.
We notice that we have a private attribute named notifyRequest, this is a ReplaySubject object (a ReplaySubject is an observable and it emits/send values to the observers subscribed to it)
we can also see another attribute and this one is not private. this attribute is an observable that is going to be used by the notification component to react when a new value is received (we will see this later).
finally, we see a notify method. This method is going to be used by the service consumers that are interested in display a notification (we will see this later).

Create the component via CLI

Obviously, a notification needs to be visual. So, we create our component as follows

ng g s shared/component/notification

Once the component is generated, we need to make it available to the consumers (other pieces of the app like components, etc.). We do that by adding our component to the exports array in our shared module as follows

import { NotificationComponent } from './components/notification/notification.component';

@NgModule({
    declarations: [NotificationComponent,],
    // providers, imports go here
    exports: [NotificationComponent],
})
export class SharedModule {}

Of course, your shared module will contain more stuff / code. Here I am just focusing the code on what is connected to our notification implementation.

Before implementing a our component, remember the enum we created previously NotificationType. The values of such enum fit the classes from material design css library.

Now we will implement the component logic as follows

import { Component, OnInit } from '@angular/core';
import { debounceTime, map, tap } from 'rxjs/operators';
import {
    MaNotification,
    NotificationType,
} from 'src/app/models/notification.model';

//Importing our notification service
import { NotificationService } from '../../services/notification/notification.service';

@Component({
    selector: 'ma-notification',
    templateUrl: './notification.component.html',
    styleUrls: ['./notification.component.scss'],
})
export class NotificationComponent implements OnInit {
    //Flag that is going to be used in the view to determine if the notification should be visible or not.
    showNotification: boolean = false;

//Notification object with the data that is going to be showed.
    incommingNotification: MaNotification = {
        title: '',
        message: '',
        type: NotificationType.danger,
    };

    constructor(private notificationService: NotificationService) {}

    ngOnInit(): void {
       //We subscribe or listens to new values / notification requests.
        this.notificationService.notifyRequest$
            .pipe(
//we receive new notification and update the values of the notification object we have in this component.
// we alse make the notification visible.
                tap((notification: MaNotification) => {
                    this.incommingNotification = notification;
                    this.showNotification = true;
                }),
//we wait for 3 seconds before updating the visibility of the notification
                debounceTime(3000),
//3 seconds later, we make our notification invisible again and ready for the value.
                tap(() => {
                    this.showNotification = false;
                })
            )
            .subscribe();
    }

Perfect, now let's see the visual part of our component.

<div
    [class.is-visible-notification]="showNotification"
    class="ma-notification"
    [class]="incommingNotification.type"
>
    <h3 class="ma-notification-title">
        {{ incommingNotification.title }}
    </h3>
    <p class="ma-notification-paragraph">{{ incommingNotification.message }}</p>
</div>

Simple, right?

By means of a css class we control the visibility, and you can also see that incommingNotification.type set the value of a class, such value fits with a Material Design built-in class and in that way, we set the color. If you don't use MD you just need to set css classes that set the color to the div (a "danger" class, "warning" class, etc.).

But how to consume this service?

We will consume it in a hypothetic login component page

import { Component, OnInit } from '@angular/core';

import { NotificationType } from 'src/app/models/notification.model';
import { NotificationService } from 'src/app/shared/services/notification/notification.service';
import { LoginRequest } from '../../../shared/services/user/user.model';
import { UserService } from '../../../shared/services/user/user.service';

const { home } = environment.pages;

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {
    constructor(
        private notificationService: NotificationService
    ) {
    }

    ngOnInit(): void {}

    async handleSubmit(loginRequest: LoginRequest): Promise<void> {
        const signInRes = await this.userService.authenticate(loginRequest);
        if (signInRes.error) {
            this.notificationService.notify({
                title: 'Oh Oh 😕',
                type: NotificationType.danger,
                message: signInRes.error.message,
            });
        }
    }
}

Implementando un Camino Aleatorio

Henri de la Hoz — Thu, 06 Oct 2022 14:37:30 +0000

Un sistema no determinista es aquel que incluye aleatoriedad y también se apoya en diferentes distribuciones de probabilidad para modelar sistemas complejos.

Los caminos aleatorios se utilizan en sistemas no deterministas e incluyen elementos aleatorios. En otras palabras son sistemas que no obtienen el mismo output para el mismo input al ejecutar varias veces la misma operación.

Los caminos aleatorios son usados por ejemplo en simulación de movimientos de partículas, el comportamiento de los mercados, etc.

Esta estrategia computacional se utiliza en especial en soluciones de software en las que se busca simular el comportamiento de un suceso o fenómeno físico, tal vez en el estudio del comportamiento de partículas o en la realización de software para ser usado en los mercados de financiero.

Pensemos en un programa que permite manejar el trafico en un cruce de la carretera. En otras palabras, que controla las luces del semáforo.

La forma no determinista de implementar este programa es entender cuales son los patrones de uso de la intersección (estos patrones se pueden obtener al usar calculo de probabilidades, realizando muchas veces una simulación del tráfico, entre otras formas de solución) y estimar cuando tendríamos que prender el semáforo a verde y cuando a rojo.

En este contexto, recordemos que la probabilidad es la medida de la certidumbre asociada a un evento o suceso futuro y suele expresarse como un numero entre 0 y 1.

class Borracho:

    def __init__ (self, nombre):
        self.nombre = nombre


class BorrachoTradicional(Borracho):
    def __init__ (self, nombre):
        super().__init__(nombre)

    def caminar(self):
        return random.choice([(0,1), (0, -1), (1,0),(-1,0)])

class Campo:
    def __init__(self):
        self.coordenadas_de_borrachos = {}

    def agregar_borracho(self, borracho, coordenada):
        self.coordenadas_de_borrachos[borracho] = coordenada

    def mover_borracho(self,borracho):
        delta_x, delta_y = borracho.caminar()
        coordenada_actual=self.coordenadas_de_borrachos[borracho]
        nueva_coordenada = coordenada_actual.mover(delta_x, delta_y)

        self.coordenadas_de_borrachos[borracho] = nueva_coordenada

    def obtener_coordenada(self, borracho):
        return self.coordenadas_de_borrachos[borracho]

class Coordenada:
    def __init__(self, x,y):
        self.x = x
        self.y = y

    def mover(self, delta_x, delta_y):
        return Coordenada(self.x + delta_x, self.y + delta_y)


    def distancia(self, otra_coordenada):
        delta_x = self.x - otra_coordenada.x
        delta_y = self.y - otra_coordenada.y

        return (delta_x**2 + delta_y**2)**0.5

from borracho import BorrachoTradicional
from campo import Campo
from coordenadas import Coordenada
from bokeh.plotting import figure, show

def caminata(campo, borracho, pasos):
    inicio = campo.obtener_coordenada(borracho)
    for _ in range(pasos):
        campo.mover_borracho(borracho)

    return inicio.distancia(campo.obtener_coordenada(borracho))

def simular_caminata(pasos, numero_de_intentos, tipo_de_borracho):
    borracho = tipo_de_borracho(nombre="David")
    origen = Coordenada(0,0)
    distancias = []

    for _ in range(numero_de_intentos):
        campo = Campo()
        campo.agregar_borracho(borracho, origen)
        simulacion_caminata = caminata(campo, borracho, pasos)
        distancias.append(round(simulacion_caminata,1))
    return distancias

def graficar(x, y):
    grafica = figure(title="Camino Aleatorio", x_axis_label="Pasos", y_axis_label="Distancia")
    grafica.line(x,y, legend="Distancia Media")
    show(grafica)

def main(distancias_de_caminata, numero_de_intentos, tipo_de_borracho):
    distancias_media_por_caminata=[]
    for pasos in distancias_de_caminata:
        distancias = simular_caminata(pasos, numero_de_intentos, tipo_de_borracho)
        distancia_media = round(sum(distancias)/len(distancias),4)
        distancia_maxima = max(distancias)
        distancia_minima = min(distancias)
        distancias_media_por_caminata.append(distancia_media)
        print(f'{tipo_de_borracho.__name__} caminata aleatoria de {pasos} pasos')
        print(f'Media = {distancia_media}')
        print(f'Max = {distancia_maxima}')
        print(f'Min = {distancia_minima}')
    graficar(distancias_de_caminata, distancias_media_por_caminata)


if __name__ == '__main__':
    distancias_de_caminata = [10,100,1000,10000]
    numero_de_intentos = 100

    main(distancias_de_caminata, numero_de_intentos,BorrachoTradicional)

Qué es Programación Dinámica

Henri de la Hoz — Thu, 06 Oct 2022 14:33:32 +0000

Técnica para optimizar problemas que tienen la característica de contar con una sub estructura óptima.

Básicamente estamos optimizando problemas mediante una optimización de los problemas más pequeños que componen el problema más grande en cuestión.

Se necesita tener problemas empalmados para poder utilizar programación dinámica. Esto quiere decir que la solución óptima se obtiene al resolver el mismo problema en varias ocasiones.

Un buen ejemplo de la optimización siguiendo la descripción anterior es la memoización.

Memoización

Memoización es guardar el resultado de operaciones previas para que en el futuro sea simplemente consultar en la memoria el resultado previamente guardado y de esa manera ahorrar en tiempo de ejecución.

Ejemplo:

Número de Fibonacci

F(n) = F(n-1) + F(n-2)

Al implementar fibonacci siguiendo el proceso estricto de la fórmula, se obtiene un algoritmo ineficiente porque el crecimiento computacional (complejidad) es exponencial.

Sin embargo, para poder obtener una respuesta favorable y correcta, es obligatorio realizar el mismo proceso repetitivo.

Entonces, debido a que es un problema que se soluciona realizando una tarea de forma repetitiva, es posible aplicar dynamic programming para optimizar el resultado, se aplica al utilizar memoización en nuestra solución.

import sys

def fibonacci_recursive(n):
    if n == 0 or n == 1:
        return 1
    return fibonacci_recursive(n - 1) + fibonacci_recursive(n - 2)

def fibonacci_with_memo(n, memo={}):
    if n == 0 or n == 1:
        return 1
    try:
        return memo[n]
    except KeyError:
        resultado = fibonacci_with_memo(n - 1, memo) + fibonacci_with_memo(n - 2, memo)
        memo[n] = resultado
    return resultado

if __name__ == "__main__":
    sys.setrecursionlimit(10002)
    n = int(input("Escoger número: "))
    result = fibonacci_with_memo(n)
    print(result)

Calcular el valor de pi a través de una Simulación de Montecarlo

Henri de la Hoz — Thu, 06 Oct 2022 14:28:38 +0000

Las Simulaciones de Montecarlo son simulaciones que utilizan la aleatoriedad para predecir el resultado de un problema.

Permiten transformar un problema determinístico en uno no determinístico.

Convertiremos mediante simulación de Montecarlo la obtención de pi (solución determinística) en una solución estocástica.

Inicialmente se parte del conocimiento de las fórmulas matemáticas del área de un cuadrado y de un círculo.

Recordemos que el área de un cuadrado es base por altura y el área de un círculo es pi por radio al cuadrado.

Consideremos un circulo que cabe exactamente dentro de un cuadrado con base y altura de 2.
Entonces podemos concluir que el radio del círculo es de 1 y a el área del cuadrado es de 4, además podemos concluir que el área del círculo es igual a pi.

En definitiva, si sabemos cuánto es el área del círculo en este problema, sabremos el valor de pi.

Para resolver este problema de forma no determinista simularemos que se lanzan o avientan muchas agujas y veremos cuántas caen fuera y cuántas dentro del círculo.
Este acercamiento nos permite tener la proporción de agujas afuera del círculo y dentro del círculo y por ende la proporción de las áreas del círculo y el cuadrado.

Agujas en cuadrado = agujas fuera del círculo

Agujas en círculo / agujas en cuadrado = área circulo / área cuadrado

Área circulo = (4 * agujas circulo) = agujas cuadrado.

Suponiendo que el centro del círculo y del cuadrado están en la coordenada 0,0
Los alfileres deberán caer dentro del rango de -1 y 1 para x y -1 & 1 para y (recordemos que el radio del círculo es 1).

Pero, ¿cómo sabemos que una aguja cayó adentro o afuera del círculo?
Usaremos el teorema de Pitágoras.
Calcularemos las hipotenusas que se forman de los triángulos, producto de los valores para y & x de las coordenadas de las agujas que se obtengan aleatoriamente.

Hipotenusas mayores a 1, significará que el alfiler o aguja cayó por fuera del círculo, hipotenusas menores o iguales a 1 son alfileres o agujas que caen dentro del círculo.

import math
# incluir estadisticas
from estadisticas import desviacion_estandar, media


def aventar_agujas(numero_de_agujas):
    adentro_del_circulo = 0

    for _ in range(numero_de_agujas):
        x = random.random() * random.choice([-1, 1])
        y = random.random() * random.choice([-1, 1])
        distancia_desde_el_centro = math.sqrt(x**2 + y**2)

        if distancia_desde_el_centro <= 1:
            adentro_del_circulo += 1

    return (4 * adentro_del_circulo) / numero_de_agujas


def estimacion(numero_de_agujas, numero_de_intentos):
    estimados = []
    for _ in range(numero_de_intentos):
        estimacion_pi = aventar_agujas(numero_de_agujas)
        estimados.append(estimacion_pi)

    media_estimados = media(estimados)
    sigma = desviacion_estandar(estimados)
    return (media_estimados, sigma)


def estimar_pi(precision, numero_de_intentos):
    numero_de_agujas = 1000
    sigma = precision

    while sigma >= precision/1.96:  # intervalo de confianza
        media, sigma = estimacion(numero_de_agujas, numero_de_intentos)
        numero_de_agujas *= 2

    return media


if __name__ == '__main__':
    estimar_pi(0.01, 1000)

Qué es la Programación Estocástica

Henri de la Hoz — Thu, 06 Oct 2022 14:26:20 +0000

La programación estocástica es el uso de probabilidades a la hora de plantear la solución del problema en el que estamos trabajando, en otras palabras, usamos programación estocástica en la solución de problemas no deterministas.

Conceptos estadísticos

Las distribuciones permiten entender de diferentes maneras cómo están repartidos los diferentes valores de una variable, dentro de una población.

La distribución normal se define con base en la media y la desviación estándar.

El valor promedio o medida de tendencia central, nos permite ver en dónde se encuentran la mayoría de los valores de la muestra y normalmente es la media de la población.

Varianza y Desviación son datos de dispersión.

La varianza mide la propagación de un conjunto de datos en relación a la media.

La desviación estándar es la raíz cuadrada de la varianza.
Esto permite manejar media y su dispersión en la misma unidad.

Muestreo

El muestreo es muy importante cuando no tenemos acceso a toda la población que queremos explorar. Uno de los grandes descubrimientos de la estadística es que las muestras aleatorias tienden a mostrar las mismas propiedades de la población objetivo. Hasta este punto todos los muestreos que hemos hecho son de tipo probabilísticos.

En un muestreo aleatorio cualquier miembro de la población tiene la misma probabilidad de ser escogido.

En un muestreo estratificado tomamos en consideración las características de la población para partirla en subgrupos y luego tomamos muestras de cada subgrupo, esto incrementa la probabilidad de que el muestreo sea representativo de la población.

Inferencia

Se utiliza para estimar o realizar conclusiones con respecto a una población, a partir de una muestra aleatoria.
Esto se debe a que una muestra aleatoria tiende a manifestar las mismas características que la población de la cual fue extraída.

Sesgar una muestra, es sesgar las conclusiones acerca de la población que se harán a partir de la muestra.

Falacia del Apostador
Es una mentira en la que se cree que debido a que un suceso independiente extremo ocurre, ocurrirán eventos extremos opuestos al anterior para nivelar la media.

Regresión a la Media.
Señala que después de un evento aleatorio extremo, el siguiente evento probablemente será menos extremo.

Guardando JWT en una Cookie

Henri de la Hoz — Thu, 06 Oct 2022 14:23:16 +0000

Como sabemos, uno de los mecanismos de autenticación más comunes para aplicaciones webs desacopladas, APIs, etc. es mediante un JSON Web Token.

Cuando estamos desarrollando una SPA puede resultarnos muy fácil utilizar el localStorage o el sessionStorage para persistir nuestro token en el lado del cliente. Aunque esto puede ser fácil, tiene un costo de seguridad considerable. Por lo tanto, un mecanismo más seguro para persistir nuestro token de autorización, es guardarlo en una cookie. Veamos cómo podemos hacer esto en un app con backend en Express.

Lo primero que debemos hacer es instalar el middleware de express cookie-parser.

Adicionalmente, instalaremos los módulos básicos para nuestro servidor web.

npm i express express-jwt jsonwebtoken cors cookie-parser --save

Este middleware inyecta las cookies provenientes en el request desde el cliente a nuestro objeto req. Este middleware facilita la lectura de las cookies al procesar solicitudes a nuestros endpoints.

Posteriormente podemos crear nuestra cookie una vez el token ha sido firmado y la cookie contendrá dicho token.

// server.js

const express = require('express');
const jwt = require('express-jwt');
const jsonwebtoken = require('jsonwebtoken');
const cors = require('cors');
const jwtSecret = process.env.SECRET;
const app = express();

app.use(cors());
app.use(cookieParser());
app.use(
  jwt(
  { 
    secret: jwtSecret, 
    algorithms: ['HS256'],
    getToken: req => req.cookies.token
  }));

app.post('/login', (req, res) => {
    let authenticatedUser;
    // implementación del mecanismo de autenticación. buscar las credenciales en la base de datos u otro método, etc.
    // al finalizar el mecanismo anterior, pasamos a asignarle un valor a authenticatedUser
      const token = jsonwebtoken.sign(authenticatedUser, jwtSecret);

      res.cookie('token', token, { httpOnly: true });

      res.json({ success: 'welcome' });
});

app.listen(3000);

la línea 19 es la clave en este punto. En esta instrucción estamos logrando 2 objetivos:

Estamos creando un header en la respuesta que se enviará al cliente. Este header es Set-Cookie y contendrá el token generado. A partir de aquí, todos los requests http provenientes del cliente, tendrán el token en las cookies y servirá para validar a nuestro usuario.
La bandera httpOnly servirá para prevenir el acceso a esta cookie mediante javascript, adicionalmente sólo podrá ser usada en el protocolo http al mismo origin del que provino, mismo servidor e incluso mismo puerto. ****

¿cómo validamos el token una vez comencemos a recibir request desde el cliente autenticado?

Es muy sencillo, hagamos un zoom a nuestro código

app.use(
  jwt(
  { 
    secret: jwtSecret, 
    algorithms: ['HS256'],
    getToken: req => req.cookies.token
  }));

Como notamos, para que el middleware express-jwt , valide el token alojado en las cookies, es necesario una función corta que le avise al middleware dónde debe ir a buscar el token, en este caso en el objeto req en el atributo cookies, subatributo token (recordemos que cookie-parser se encarga de hacer la inyección de las cookies en el objeto req).

De esta manera podemos utilizar nuestros JWT alojándolos en Cookies.

Introducción a JWT en NodeJS

Henri de la Hoz — Thu, 06 Oct 2022 14:22:05 +0000

Actualmente el stack de seguridad para aplicaciones en node js y otras tecnologías web está compuesto por

JWT.
OAuth 2.0: Estandar que permite implementar autorización (no es lo mismo que autenticación).
OpenID Connect: Capa adicional de autenticación.

Autenticación es la acción de verificar la identidad de un usuario.

Autorización es la acción de otorgar permisos limitados de uso a los usuarios.

Sesión, es un registro de información que se comparte entre diferentes request de tipo http (teniendo en cuenta que estas peticiones no tienene estado), adicionalmente cuando hay un proceso de autenticación se relaciona la sesión con el usuario autenticado. Naturalmente para poder mantener este registro de datos entre peticiones http se necesita una base de datos en memoria preferiblemente, por ejemplo Redis.

Anatomía JWT

Un token es un estandar del facto que se utiliza como un mecanismo de autenticación para peticiones http, se compone principalmente de 3 partes separadas por un punto.

Header: Contiene el tipo de token, la mayoría de las veces se especifíca como JWT y también en esta parte se describe el tipo de algoritmo de encriptación. Los algoritmos de encriptación pueden ser síncronos o asíncronos, los primeros son algoritmos con los que se encripta y desencripta con la misma llave; los segundos utilizan llave pública y llave privada.
Payload: aquí viene toda la información específica del usuario, como por ejemplos los permisos que tiene el usuario logueado.
Firma: Codificación del header y el payload. Esta codificación se realiza mediante el algortimo expresado en la sección header más un secret.

Autenticación tradicional vs Autenticación con JWT

Tradicional

Se crea una sesión en el servidor y se manda la información de la sesión al navegador en forma de cookie. A partir de allí, todas las peticiones http llevarán la cookie para poder relacionar la petición con la sesión en el servidor.
Problemas del enfoque
- Las SPAs se ven afectadas ya que su ciclo de vida es mayormente en el cliente, por lo tanto no se le notifica ni se da por enterada en cuanto a cambios en la sesión en el backend.
- REST APIs están pensadas para no tener estado, por ende para no tener sesiones.
- El control de acceso siempre requiere una revisión en la base de datos, lo que amplia los tiempos de latencia.
- Mayor consumo de memoria, más usuarios con sesión mayor uso de memoria.

JWT

No se crea una sesión, sólo se firma un token una vez el usuario se ha autenticado.
Todos los request que realice el cliente una vez recibido el token deben llevar dicho token.
Ya no hace falta que una SPA trabaje con el backend para saber si el usuario está autenticado. Al tener el token es prueba de que se autenticó en el algún momento del pasado, dependiendo de la expiración del token.
Se reduce el consumo de memoria del lado del backend ya que simplemente hace falta determinar que el token fue firmado correctamente y está vigente.
Problemas
- Es decodificable, por lo tanto debemos evitar agregar información sensible en él. Esto puede incluir contraseñas, keys, nùmeros de cuenta, etc.
- Si no se establece un tiempo de expiración, podría ser utilizado por un largo período sin ninguna caducidad y constituiría un riesgo de seguridad.
- No se debe usar el localStorage ni sessionStorage para guardar los tokens, se debe usar memoria o cookie.

Firmando un JWT

//index.js
const jwt = require('jsonwebtoken');

const [, , option, secret, nameOrToken ] = process.argv;

if ( !option || !secret || !nameOrToken) {
    return console.log("Missing arguments");

}

function signToken(payload, secret) {
    return jwt.sign (payload, secret);
}

function verifyToken(token, secret) {
    return jwt.verify(token, secret);
}

if(option == 'sign') {
    console.log(signToken({ sub: nameOrToken}, secret ));
} else if ( option == 'verify') {
    console.log(verifyToken(nameOrToken, secret));
} else {
    console.log('Option needs to be "sign" or "verify"');
}

Cookie

Las cookies son básicamente registros de datos que permiten mejorar la experiencia de usuario. Entre las cookies podemos mencionar las siguientes, según sus tipos:

Cookie Session: Son cookies de corta vida, en otras palabras expiran en un corto tiempo. Se remueven cuando se cierra el tab o el navegador.
Cookies persistentes: Guardan datos por un mayor tiempo y generalmente se usan para capturar información de la experiencia del usuario en la aplicación para mejorar su experiencia al usar el sitio.
Secured Cookis: guardan la información de manera cifrada para evitar que terceros malintencionados usen esa data. Suelen usarse en https.

Es importante siempre avisarle al usuario acerca del uso de cookies. Es necesario el consentimiento del usuario.

Fundamentos de Machine Learning (Parte 2)

Henri de la Hoz — Thu, 06 Oct 2022 14:20:26 +0000

Algoritmos de agrupamiento

Estos algoritmos buscan agrupar elementos de un arreglo, busca características similares en los elementos e intenta agruparlos basandose en dichas características.
Lógicamente, estos algoritmos son especialmente de utilidad en los casos en los que no es sencillo un agrupamiento de los datos, tal vez por la gran cantidad de los mismos, porque son muy variables entre sí o porque sus características similares no son tan evidentes.
Por ejemplo, en redes sociales se utiliza este tipo de algoritmos para agrupar personas que aparentemente son muy diferentes, tal vez ni se conocen y se arman nichos a los que puede interesarle el mismo tipo de cosas, De esa manera se les envía publicidad que puede motivarlos a comprar.
En escenarios con grandes cantidades de datos, los algoritmos de agrupamiento también nos permiten tener una idea de la forma en la que los datos en conjunto están estructurados.

Agrupamiento jerárquico

Toma los puntos (elemanto, datos) más cercanos, los agrupa en un cluster. Posteriormente toma este cluster y ubica el punto más cercano a dicho cluster. Finalmente, crea un cluster nuevo formado por el cluster del paso anterior junto con el punto más cercano encontrado en este último paso. Este algoritmo se repite hasta que ya queda un sólo "supercluster" que incorpora a todos los puntos o datos.
El resultado de este algoritmo es un dendograma. Esta gráfica señala o describe la relación de cada individuo, dato o elemente, con respecto al grupo o supercluster como tal.

Aspectos que se tienen en cuenta en el agrupamiento jerárquico

Se parte del supuesto de que todos los puntos con los que se inicia, corresponden a un dato único e individual. En otras palabras, el punto de inicio es un set de datos sin clusterizar o agrupar.
Se debe determinar la forma en la que se calculará la distancia entre los puntos. (euclidiana, de Manhattan, etc.) El tipo de proyecto o lo que se quiere encontrar, determinará el tipo de cáculo para la distancia que se utilizará.
Qué tipo de criterio se usará para enlazar los puntos. Es decir, a partir de la segunda iteración, deberemos calcular la distancia del cluster que formamos en el primer paso al siguiente punto más cercano. Sin embargo, si notamos bien, un cluster es un grupo de datos, gráficamente sería un grupo de coordenadas cartesianas, entonces nos preguntamos, de este grupo de coordenadas, ¿cuál será la que usarémos como punto de referencia a partir del cual calcular la distancia? a eso nos referimos al decir, "'¿qué tipo de criterio se usará para enlazar los puntos?". Para responder esta pregunta, tenemos 3 opciones de criterio.
- Single Linkage, consiste en tomar los puntos más cercanos.
- Complete Linkage, consiste en tomar los puntos más lejanos
- Average Linkage, consiste en encontrar una coordenada promedio y usar esta coordanda como punto referencia para el cluster, en otras palabras el punto punto representativo a partir del cual se calculará la distancia.

Agrupamiento K means

Este proceso está bajo el contexto de aprendizaje no supervisado. En el agrupamiento K means, se tiene un set de datos del que se desea conocer cómo los features vectores se correlacionan entre sí. Este ejercicio permite entre otra cosas, encontrar grupos de personas con intereses similares, automatizar el control de calidad de granos de café, etc.

El proceso consiste en seleccionar el número de grupos (k) en los que se desea agrupar el dataset.
Por cada k, se seleccionan k puntos del dataset que serán los centroides iniciales. Esta selección de centroides, es arbitraria y sirve nada más que, como punto de partida inicial de la ejecución del algoritmo. Se asume que, cada centroide corresponde a un grupo diferente....
Con el valor de k, es decir, numero de grupos en los que se agrupará y los k centroides elegidos al azar, se inicia un proceso iterativo.

Se calcula la distancia de cada punto del dataset a los centroides seleccionados.
Una vez calculadas las distancias a cada centroide, por cada punto, se toma la distancia más cerca a un centroide y se asigna dicho punto como parte del grupo al que el centroide pertenece.
Teniendo los puntos del dataset, asignados a un grupo, se calcula la media de los datos de cada grupo, obtendremos k medias y estas medias serán nuestros nuevos centroides.
Repetimos los pasos 1 al 3 hasta que los centroides ya no cambien de una iteración a otra. ### Aspectos que se tienen en cuenta en el agrupamiento K means Con relación a la selección del valor k. En general, ese valor (k) es arbitrario, sin embargo, para una mayor precisión y efectividad del algoritmo, se recomienda seleccionar este número basado en la intuición que viene de entender con claridad la lógica del negocio. Al ser un algoritmo iterativo y que calcula la distancia por cada punto, es computacionalmente costoso. Teniendo en cuenta lo anterior, no se recomienda ejecutar el algoritmo sobre todo el dataset. Tal vez es suficiente utilizar una muestra representativa y por infererencia, hacer una generalización para toda la población.

import math
from functools import reduce

class Node:
    def __init__(self, coordinates, children, distance):
        self.coordinates = coordinates
        self.children = children
        self.distance = distance

    def addChildren (self, children):
        self.children = children

class Coordinate:
    def __init__(self, x, y):
        self.x = x
        self.y = y

    def calcEuclidianDistanceTo(self, anotherCoordinate):
        a = (anotherCoordinate.x - self.x) ** 2
        b = (anotherCoordinate.y - self.y) ** 2
        return math.sqrt(a + b)

def avg(l): 
    avg = reduce(lambda x, y: x + y, l) / len(l)
    return avg

def clustering(dataSet):
    if (len(dataSet) == 1) :
        return dataSet
    else :
        lowest = None
        i = 0
        index1 = None
        index2 = None
        for element1 in dataSet:
            j = 0
            for element2 in dataSet:
                currentDistance = element1.coordinates.calcEuclidianDistanceTo(element2.coordinates)
                if ((lowest != None and lowest > currentDistance) or lowest == None):
                    index1 = i
                    index2 = j
                    lowest = currentDistance
                j = j + 1
            i = i + 1
        newX = avg([ dataSet[index1].coordinates.x, dataSet[index2].coordinates.x ])
        newY = avg([ dataSet[index1].coordinates.y, dataSet[index2].coordinates.y ])
        newCoordinates = Coordinate(newX, newY)
        newNode = Node(newCoordinates, [ dataSet[index1], dataSet[index2] ], lowest)
        del dataSet[index1]
        del dataSet[index2]
        dataSet.append(newNode)
        return clustering(dataSet)

def main():
    coord1 = Coordinate(1.0, 1.0)
    coord2 = Coordinate(2.0, 2.0)
    coord3 = Coordinate(5.0, 5.0)
    coord4 = Coordinate(8.0, 8.0)
    coord5 = Coordinate(10.0, 10.0)
    node1 = Node(coord1, None, None)
    node2 = Node(coord2, None, None)
    node3 = Node(coord3, None, None)
    node4 = Node(coord4, None, None)
    node5 = Node(coord5, None, None)
    dataSet = [node1, node2, node3, node4, node5]
    cluster = clustering(dataSet)

if __name__ == "__main__":
    main()

Fundamentos de Machine Learning (Parte 2)

Henri de la Hoz — Thu, 06 Oct 2022 14:18:19 +0000

Algoritmos de clasificación

Los algoritmos de clasificación son una técnica de aprendizaje supervisado que se aplica en ML para asignarle una etiqueta a un dato dependiendo de su ubicación en un plano de coordenadas.
A diferencia de la clusterización o agrupamiento, en la clasificación es importante que conozcamos las etiquetas que el algoritmo asignará a los datos bajo evaluación.

Clasificadores lineales

Los algoritmos que realizan una clasificación lineal, dividen los datos a través de una línea. Esta línea básicamente representa la medida que determina si un data point pertenece a una clase o a otra.
La línea funciona como un delimitador de áreas dentro del plano que contiene el data set, de tal manera que al ubicar un punto nuevo, podamos clasificarlo o ubicarlo dentro de una zona o área, que al final del día indicará a qué clase pertenece.
Cabe recordar que los ejes del plano no siempre serán 2 (plano bidimensional) pueden ser múltiples dimensiones, esto depende de la cantidad de features o características representativas que describen una clase o etiqueta.

K nearest neighbors

En este algoritmo se parte del supuesto de que ya se cuenta con un conjunto de datos clasificados, podemos pensar en un plano de coordenadas con un conjunto de datos ubicados en él y dadas las ubicaciones de los mismos, ya sabemos a qué clase pertenecen.
Al recibir un valor o data point del cual no conocemos su etiqueta o clase, determinamos sus K vecinos más cercanos y de acuerdo a su cercanía con dichos vecinos, el data point se le asignará una clase o etiqueta.
En este algoritmo el valor de K corresponde al número de vecinos necesarios para que un vector o data point se le asigna la clase o etiqueta correspondiente a esos vecinos.
Si un data point no llega exactamente a tener K vecinos, entonces se le asigna la clase a la que pertenecen la mayor cantidad de vecinos más cercanos.
Por ejemplo, si K es igual a 5, con 3 vecinos de una clase es suficiente para que se le asigne dicha clase al data point entrante.
Este algoritmo es computacionalmente costoso, por lo tanto no se recomienda utilizar toda la población de datos para su ejecución, en vez de eso, se puede utilizar una muestra representativa.

Fundamentos de Machine Learning (Parte 1)

Henri de la Hoz — Thu, 06 Oct 2022 14:17:28 +0000

Machine Learning es la capacidad de las computadoras de aprender a resolver problemas o dar soluciones apróximdas, sin ser explícitamente programadas para resolver dicho problema.

En machine learning el programa recibe datos en vez de instrucciones.

Machine Learning empieza con el Teorema de Bayes. El Tearema de Bayes nos permite incorporar conocimiento o experiencia nueva adquirida al procesamiento del calculo de nuevas probabilidades, dadas los eventos anteriores.

Machine Learning se puede utilizar en 2 escenarios, cuando no contamos con un algoritmo que solucione un problema o cuando deseamos encontrar patrones en un set de datos.

Featured Vectors

Un elemento presente en la mayoría de algoritmos de machine learning, son los features vectores. Los features vectors son un mecanismo para combertir lo que conocemos o percibimos en el mundo real (que al final del día, serán los datos de aprendizaje del algoritmo) en valores numéricos que puedan ser utilizados como insumos del computo.

Por ejemplo representar colores con RGB.

El reto en esta fase es definir cuales son los aspectos relevantes para el algoritmos y cuales no.

Se debe intentar varias veces, qué valores se tienen que incluir y que valores se deben obviar o dejar por fuera. Siguiendo el principio de GIGO (garbage in, garbage out) es importante seleccionar bien los datos e incluso depurar datos encontrados.

Distancia entre vectores

Otro elemento base de machine learning son las métricas de distancia entre vectores, las cuales nos permiten tener una forma de cuantificar que tan cercanos o lejanos estan los vectores que estamos incorporando al algoritmo. Esto conceptualmente nos puede permitir estimar que tan igual o que tan diferentes son los datos con los que se está alimentando el algoritmo.

En un algoritmo de optimización, se busca optimizar la distancia entre vectores.

Las distancias se miden de varias formas, por ejemplo la forma Euclidiana, la forma de Manhattan.