Forem: Anderson Sinaluisa

Building an AI tool that generates SQL queries from natural language

Anderson Sinaluisa — Tue, 10 Mar 2026 16:14:37 +0000

The problem

Writing SQL queries is something most developers do frequently, but it can still be slow and repetitive.

Sometimes you just want to ask something simple like:

"show users created this month"

Instead of switching context, checking the schema, and writing the query manually.

I started experimenting with an idea:

What if you could generate SQL queries using natural language?

The idea

The goal was simple:

Describe the query in plain English and automatically generate the SQL.

Example:

Input:

show users created this month

Output:

SELECT *
FROM users
WHERE created_at >= DATE_TRUNC('month', CURRENT_DATE);

The idea is not to replace developers, but to make it faster to:

explore databases
generate queries quickly
understand complex SQL

Challenges

While experimenting with this approach, I ran into several interesting problems.

Schema understanding

The model needs to understand:

tables
relationships
column names

Without that context, the generated SQL can be incorrect.

Complex joins

Queries involving multiple tables are much harder.

For example:

join conditions
nested queries
aggregations

These require much more context.

Ambiguous column names

Many databases have columns like:

id
name
created_at

Without schema awareness, it becomes difficult to determine the correct table.

The experiment

To explore this idea further, I built a small prototype that generates SQL queries from natural language prompts.

You can try it here:

https://chatsql.andersonsinaluisa.com

It can also:

explain complex SQL queries
help explore database structures
assist with query generation

I'm curious about your thoughts

Do you think tools like this can realistically fit into a developer workflow?

Or are they mainly useful for simple queries?

I'd love to hear your feedback.

Cómo Ejecutar Tareas Asíncronas en React Usando Web Workers

Anderson Sinaluisa — Mon, 30 Dec 2024 04:26:12 +0000

Cuando trabajas con React, tarde o temprano te vas a topar con situaciones donde necesitas ejecutar tareas que toman tiempo, como consultar una API cada cierto tiempo para ver si un proceso terminó. Si no lo manejas bien, puedes trabar la app o saturar el navegador. Para evitar eso, podemos usar Web Workers.

Voy a explicarte un ejemplo que hice para monitorear el estado de un reporte que se genera en el backend.

¿Qué Necesitamos Hacer?

Llamar a la API para iniciar el proceso de generación del reporte.
Obtener un task_id que identifica esa tarea.
Consultar cada 30 segundos si la tarea ya terminó.
Manejar todo esto sin afectar la interfaz del usuario.
El truco aquí está en usar un Web Worker, que es como un ayudante en segundo plano que se encarga de hacer todo el trabajo pesado sin bloquear la app.

El Código

Paso 1: Configura Axios para la API

Lo primero es preparar Axios para que pueda conectarse a la API. Aquí configuro un cliente que tiene la URL base y los headers que necesito:

import axios from "axios";

export const apiClient = axios.create({
  baseURL: "https://example.com/api", // Cambia esta URL por la base de tu API
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
  },
});

Paso 2: Crea el Web Worker

El Web Worker es donde pasa la magia. Básicamente, este chico está revisando la API cada 30 segundos para ver si la tarea ya terminó:

self.onmessage = async (event) => {
  const { task_id, apiEndpoint } = event.data;

  const checkTaskStatus = async () => {
    try {
      const response = await fetch(`${apiEndpoint}/${task_id}`);
      const task = await response.json();

      self.postMessage(task);

      if (task.status !== "SUCCESS" && task.status !== "FAILURE") {
        setTimeout(checkTaskStatus, 30000);
      }
    } catch (error) {
      console.error("Error en el Worker:", error);
    }
  };

  checkTaskStatus();
};

Paso 3: Maneja el Worker en React

En tu app React, necesitas controlar este Web Worker: iniciarlo, pasarle datos, y manejar las respuestas que te manda.

export class AsyncTaskManager {
  private worker: Worker | null = null;

  public async startTask(taskId: string, apiEndpoint: string, onResult: (data: any) => void) {
    if (this.worker) {
      this.worker.terminate();
    }

    this.worker = new Worker(new URL("./GenericWorker.js", import.meta.url), { type: "module" });

    this.worker.postMessage({ task_id: taskId, apiEndpoint });

    this.worker.onmessage = (event) => {
      const data = event.data;
      onResult(data);

      if (data.status === "SUCCESS" || data.status === "FAILURE") {
        this.stopWorker();
      }
    };
  }

  public stopWorker() {
    if (this.worker) {
      this.worker.terminate();
      this.worker = null;
    }
  }
}

Paso 4: Uso en el componente

Ahora, en el componente de React, utilizamos el AsyncTaskManager para gestionar la tarea. El proceso incluye iniciar la tarea, mostrar un cargando, y actualizar el estado cuando se recibe el resultado de la tarea:

import React, { useState } from "react";
import { AsyncTaskManager } from "./AsyncTaskManager";

const taskManager = new AsyncTaskManager();

export const ExampleComponent = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [result, setResult] = useState(null);

  const handleStartTask = async () => {
    setIsLoading(true);

    // Simula el inicio de una tarea en el backend
    const response = await fetch("https://example.com/api/start-task", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
    });
    const { task_id } = await response.json();

    taskManager.startTask(task_id, "https://example.com/api/task-status", (data) => {
      if (data.status === "SUCCESS" || data.status === "FAILURE") {
        setIsLoading(false);
        setResult(data.result); // Maneja el resultado de la tarea
      }
    });
  };

  return (
    <div>
      <button onClick={handleStartTask} disabled={isLoading}>
        {isLoading ? "Procesando..." : "Iniciar Tarea"}
      </button>
      {result && <div>Resultado: {JSON.stringify(result)}</div>}
    </div>
  );
};

Explicación del Flujo

Generar el Reporte: Al hacer clic en "Iniciar Tarea", se llama a una API que inicia el proceso de generación del reporte y devuelve un task_id.

Monitoreo en Segundo Plano: Usamos un Web Worker que recibe este task_id y consulta la API de estado cada 30 segundos, enviando el estado de la tarea de vuelta a React.

Actualizar UI: Mientras la tarea se ejecuta, la UI permanece fluida, con un botón que muestra "Procesando..." y, una vez completada la tarea, muestra el resultado.

Liberar Recursos: Cuando la tarea termina (ya sea con éxito o fracaso), el Worker se detiene para liberar recursos y evitar procesos innecesarios en segundo plano.

¿Por Qué Hacerlo Así?

Este enfoque es súper útil porque:

No bloqueas la interfaz del usuario mientras consultas la API.
Puedes manejar procesos largos sin que la app se congele.
El usuario siempre sabe qué está pasando gracias a los loaders y notificaciones.

Como Crear anotaciones en Java

Anderson Sinaluisa — Sat, 22 Jul 2023 21:02:55 +0000

Las anotaciones en Java son una poderosa herramienta que permite agregar metadatos personalizados a clases, métodos, variables y otros elementos del código. Estas anotaciones pueden ser utilizadas para proporcionar información adicional, configurar comportamientos especiales o simplificar la lógica de programación. En este artículo, exploraremos cómo crear anotaciones en Java y cómo aprovechar su potencial para mejorar la legibilidad y funcionalidad de tu código.

¿Qué son las anotaciones en Java?

En esencia, una anotación en Java es una forma de metadatos que se puede agregar al código fuente. Las anotaciones comienzan con el símbolo @, seguido del nombre de la anotación. Estas pueden incluir parámetros que se utilizan para personalizar su comportamiento.

Java incluye muchas anotaciones integradas, como @Override, @Deprecated y @SuppressWarnings, que proporcionan información adicional sobre el código. Sin embargo, también puedes crear tus propias anotaciones personalizadas para adaptarlas a tus necesidades específicas.

Creando una Anotación Personalizada

Para crear una anotación personalizada en Java, debes definir una nueva interfaz y marcarla con la anotación @interface. Veamos un ejemplo sencillo de una anotación para marcar métodos que requieren ser probados exhaustivamente:

package com.asinaluisa.annotations;

import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;

@Retention(RetentionPolicy.RUNTIME)
public @interface ApiClass {
    String value() default "";

    String keyProjectId() default "{projectId}";

    String[] methods() default {};

    String[] methodclass() default {};

    String[] keyPath() default {};    

}

En este ejemplo, hemos creado la anotación @ApiClass. También hemos especificado que la anotación debe conservarse en tiempo de ejecución (RetentionPolicy.RUNTIME), lo que permitirá que se acceda a ella mediante reflexión.

La anotación tiene varios parámetros, responsable y casos, que son de tipo String y String[], respectivamente. Estos parámetros permitirán proporcionar información adicional al marcar una clase con esta anotación.

Aplicando la Anotación en Código

Una vez creada la anotación, podemos aplicarla a un método en nuestro código. Supongamos que tenemos una clase Foldery queremos relacionarla con una url para enviar los datos a un API Rest,


@ApiClass(value="/projects/{projectId}/testcase-folders",
            keyProjectId = "{projectId}", methods = {"POST","GET","PUT","DELETE","GET"},
            methodclass = {"save","get","update","delete","getAll"}, keyPath = {"{projectId}"}
)
public class Folder extends QMetryAPI<Folder>  {

    private String folderName;
    private int parentId;

    public Folder() {
        super("10000");
    }


    public Folder(String folderName, int parentId) {
        this.folderName = folderName;
        this.parentId = parentId;
    }


    public String getFolderName() {
        return folderName;
    }

    public int getParentId() {
        return parentId;
    }

    public void setFolderName(String folderName) {
        this.folderName = folderName;
    }

    public void setParentId(int parentId) {
        this.parentId = parentId;
    }

}

En este caso, hemos aplicado la anotación @ApiClass a la clase Folder, proporcionando valores para los parámetros.

Recuperando Anotaciones mediante Reflexión

Un aspecto interesante de las anotaciones en Java es que puedes recuperar la información que contienen mediante reflexión. Esto es útil cuando deseas analizar o procesar la anotación en tiempo de ejecución. A continuación, se muestra un ejemplo sencillo de cómo recuperar la información de la anotación

@ApiClass

aplicada en la clase Padre QMetryAPI<T>

public class QMetryAPI<T>{

    private final String URL = "https://private-anon-643f6a92e0-qmetryforjiracloud40.apiary-mock.com/rest/api/latest";

    private final String APIKEY = "";



    public T save() {
        ApiClass api = null ;
        Class<?> subclase =  this.getClass();

        api = getApiClass(subclase);


        String[] methods = api.methods();
        String[] methodsClass = api.methodclass();
        String Path =api.value();

    }

    protected ApiClass getApiClass(Class<?> c){
        ApiClass apiClass = null;

        boolean isApiClass = c.isAnnotationPresent(ApiClass.class);



        if (isApiClass) {
            apiClass = c.getAnnotation(ApiClass.class);
        }
        return apiClass;
    }
}

Las anotaciones en Java son una característica valiosa que te permite agregar metadatos personalizados a tu código. Al crear tus propias anotaciones, puedes mejorar la legibilidad, el mantenimiento y la funcionalidad de tus programas, proporcionando información adicional o configurando comportamientos específicos. Además, la capacidad de recuperar anotaciones mediante reflexión abre un mundo de posibilidades para la creación de bibliotecas y marcos avanzados.

¿Qué son los Server-Sent Events (SSE) y cómo funcionan?

Anderson Sinaluisa — Wed, 08 Mar 2023 16:33:51 +0000

En una aplicación web tradicional, la actualización de información en tiempo real puede ser un problema, ya que requiere una comunicación constante entre el cliente y el servidor. En estos casos, se suelen utilizar técnicas como polling o long-polling, en las que el cliente realiza peticiones al servidor en intervalos regulares para obtener actualizaciones de información.

Sin embargo, estas técnicas pueden resultar ineficientes en situaciones en las que se necesita una actualización constante de información, ya que pueden generar un tráfico excesivo en la red y un aumento en el consumo de recursos del servidor.

¿Cómo solucionar estos problemas?

Para solucionar estos problemas, se han desarrollado alternativas más eficientes como WebSockets y Server-Sent Events (SSE), que permiten una comunicación bidireccional entre el cliente y el servidor y una actualización constante de información en tiempo real sin tener que realizar peticiones innecesarias al servidor.

Los Server-Sent Events (SSE) son una tecnología web que permite a los servidores enviar datos a los clientes de forma asincrónica, en tiempo real y sin necesidad de realizar peticiones adicionales al servidor. Esto se logra a través de una conexión HTTP de larga duración entre el cliente y el servidor, en la que el servidor envía eventos al cliente cuando se producen actualizaciones en los datos.
El protocolo HTTP es el que se utiliza para establecer la conexión SSE, utilizando una petición GET con una cabecera específica que indica que se desea una respuesta en formato de eventos. El servidor envía los eventos al cliente en un stream continuo, separados por líneas en blanco y precedidos por un identificador único y opcionalmente, otros campos de metadatos.
El cliente recibe los eventos en tiempo real y puede procesarlos para actualizar la información en la página web sin necesidad de refrescarla. Además, los SSE permiten la gestión de errores y la posibilidad de reintentar la conexión en caso de fallos.
Un ejemplo sencillo de cómo se ve un stream de eventos en el navegador sería el siguiente:

var source = new EventSource('/stream');
source.onmessage = function(event) {
  console.log(event.data);
};

En este ejemplo, se crea una instancia de EventSource para conectarse al servidor y recibir los eventos. El servidor envía los eventos a través de la ruta «/stream» y el cliente los recibe mediante la función «onmessage», que muestra los datos del evento en la consola del navegador.

Ventajas y desventajas de los Server-Sent Events

Los Server-Sent Events (SSE), WebSockets y polling son tecnologías que permiten la actualización de información en tiempo real en aplicaciones web, pero presentan diferencias en cuanto a sus ventajas y desventajas.

Las principales ventajas de los SSE son:

Compatibilidad con el protocolo HTTP: Los SSE utilizan el protocolo HTTP, lo que significa que no es necesario abrir un nuevo canal de comunicación, como en el caso de WebSockets, y pueden utilizarse con servidores web estándar.
Fácil implementación: La implementación de SSE es relativamente sencilla y no requiere conocimientos avanzados de programación.
Consumo de recursos limitado: Los SSE son menos demandantes en cuanto a recursos del servidor y del cliente que otras tecnologías, como WebSockets o polling, lo que puede resultar beneficioso en aplicaciones con grandes volúmenes de tráfico.
Capacidad de reintentar la conexión: En caso de fallos en la conexión, los SSE permiten la reanudación automática de la conexión, lo que mejora la fiabilidad de la tecnología.
Sin embargo, los SSE también presentan algunas desventajas, entre ellas:

Limitaciones en la comunicación bidireccional: Los SSE solo permiten la comunicación unidireccional, es decir, del servidor al cliente, lo que puede ser un problema en aplicaciones que requieren una comunicación bidireccional, como en juegos en línea.
Limitaciones en la cantidad y tamaño de los datos: Los SSE pueden ser limitados en cuanto a la cantidad y tamaño de los datos que se pueden enviar en cada evento, lo que puede limitar su utilidad en aplicaciones con grandes volúmenes de información.
En cuanto a cuándo es recomendable utilizar SSE, esta tecnología puede ser una buena opción en aplicaciones que requieren actualizaciones en tiempo real de información, pero no necesitan una comunicación bidireccional constante y no tienen grandes volúmenes de información para enviar. Por ejemplo, en aplicaciones de noticias, actualizaciones de redes sociales o seguimiento de eventos en tiempo real.

Implementación de Server-Sent Events en una aplicación web

Aquí describiré un ejemplo de implementación de Server-Sent Events (SSE) utilizando PHP y JavaScript:

En el lado del servidor (PHP):

En primer lugar, se debe habilitar la respuesta HTTP de SSE en el servidor mediante la configuración de cabeceras. Para ello, se debe enviar una respuesta con las siguientes cabeceras:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\StreamedResponse;

class StreamController extends Controller
{
    public function stream()
    {
        $response = new StreamedResponse();
        $response->headers->set('Content-Type', 'text/event-stream');
        $response->headers->set('Cache-Control', 'no-cache');
        $response->headers->set('Connection', 'keep-alive');

        $response->setCallback(function () {
            while (true) {
                // Agrega aquí la lógica para obtener los datos que deseas enviar
                $data = [
                    'mensaje' => 'Este es un mensaje de ejemplo',
                    'fecha' => date('Y-m-d H:i:s')
                ];

                // Crea el evento Server-Sent Event y envía los datos
                echo 
"event: nombre_del_evento\n";
                echo "data: " . json_encode($data) . "\n\n";
                ob_flush();
                flush();

                // Espera 10 segundos antes de enviar el siguiente evento
                sleep(10);
            }
        });

        return $response;
    }
}

A continuación, se deben enviar los eventos desde el servidor. Esto se hace mediante la escritura de los eventos en el cuerpo de la respuesta HTTP.
echo "event: nombre_del_evento\n";
echo "data: " . $datos_del_evento . "\n\n";
Aquí, el «nombre_del_evento» es un nombre arbitrario que se le da al evento, y los «datos_del_evento» son los datos que se envían con el evento.

Es necesario enviar un carácter de nueva línea en blanco («\n\n») después de cada evento para que el navegador pueda procesarlo adecuadamente.

En el lado del cliente (JavaScript):

Se debe crear un objeto EventSource en JavaScript para conectarse al servidor y recibir los eventos.

const source = new EventSource('url_del_servidor');
A continuación, se deben definir los manejadores de eventos para procesar los eventos recibidos del servidor.

source.addEventListener('nombre_del_evento', function(evento) {
  console.log(evento.data); // procesa los datos del evento recibido
});

Es posible definir manejadores de eventos para diferentes eventos en el servidor.

source.addEventListener('otro_nombre_de_evento', function(evento) {
  console.log(evento.data); // procesa los datos del evento recibido
});

En resumen, el proceso de envío de eventos desde el servidor a través de SSE se realiza mediante la configuración de cabeceras para habilitar la respuesta HTTP SSE, la escritura de eventos en el cuerpo de la respuesta y el envío de un carácter de nueva línea en blanco después de cada evento. Por otro lado, en el lado del cliente, se debe crear un objeto EventSource para conectarse al servidor y definir manejadores de eventos para procesar los eventos recibidos del servidor.

Las principales ventajas de los SSE son:

Casos de uso de Server-Sent Events

Server-Sent Events (SSE) es una tecnología que permite enviar eventos desde el servidor al cliente de forma asíncrona y en tiempo real. A continuación, se presentan algunos casos de uso comunes de SSE:

Notificaciones en tiempo real: Las notificaciones en tiempo real son un caso de uso común para SSE. Por ejemplo, una aplicación de mensajería puede utilizar SSE para enviar notificaciones a los usuarios en tiempo real cuando reciben un nuevo mensaje.
Actualización de feeds de redes sociales: Las redes sociales pueden utilizar SSE para actualizar los feeds de los usuarios en tiempo real. Por ejemplo, cuando un usuario sigue a otra persona, SSE puede utilizarse para actualizar automáticamente el feed de ese usuario con las publicaciones más recientes de la persona que sigue.
Monitoreo de eventos en tiempo real: Las empresas pueden utilizar SSE para monitorear eventos en tiempo real, como el rendimiento del servidor o el comportamiento de los usuarios en una aplicación. SSE permite que las empresas reciban alertas en tiempo real cuando ocurre un evento importante.
Actualización de información en tiempo real: Las aplicaciones pueden utilizar SSE para actualizar la información en tiempo real en el navegador sin necesidad de recargar la página. Por ejemplo, una aplicación de seguimiento de precios puede utilizar SSE para actualizar los precios de los productos en tiempo real.
SSE es una solución más adecuada en estos casos que otras alternativas como el polling o WebSockets por las siguientes razones:

SSE utiliza una conexión HTTP de larga duración, lo que reduce la sobrecarga de red en comparación con el polling, donde el cliente debe realizar solicitudes frecuentes al servidor.
SSE es una solución más simple que WebSockets y no requiere la implementación de un protocolo personalizado.
SSE es compatible con la mayoría de los navegadores modernos, lo que lo hace una opción más accesible que WebSockets.
En general, SSE es una solución adecuada para casos de uso que requieren actualizaciones en tiempo real, pero que no requieren una comunicación bidireccional compleja entre el servidor y el cliente.

Es importante destacar que SSE es una opción más simple y accesible que WebSockets, por lo que es ideal para aplicaciones que no requieren una comunicación bidireccional compleja. Además, SSE ofrece una solución más eficiente que el polling, ya que reduce la sobrecarga de red al mantener una conexión HTTP de larga duración. En general, SSE es una herramienta valiosa para mantener a los usuarios informados en tiempo real sobre los eventos importantes en una aplicación.

Referencias
«Server-Sent Events» en MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events
«HTML5 Server-Sent Events» en W3Schools: https://www.w3schools.com/html/html5_serversentevents.asp
«How to Use Server-Sent Events (SSE) in Your Node.js App» en SitePoint: https://www.sitepoint.com/server-sent-events-nodejs/
«Server-Sent Events (SSE) with PHP» en Tania Rascia’s blog: https://www.taniarascia.com/server-sent-events-php/
«Server-Sent Events (SSE) with Express» en Tania Rascia’s blog: https://www.taniarascia.com/server-sent-events-with-node-js/
«Real-time Notifications with Server-Sent Events» en Scotch.io: https://scotch.io/tutorials/real-time-notifications-with-server-sent-events#toc-part-1-what-are-server-sent-events-sse-