Entrada 9

 Fecha: 25/03/2025

Inicio: [0:00] | Fin: [1:27] || Total: [1 hora y 27 minutos]

 Presentes: Sebastian Ramírez Abarca

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
¿QUÉ HICIMOS HOY?
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
En esta sesión: 
1. Se arregló el problema con la tabla (no mostraba los empleados, solo el encabezado de la tabla), para que se muestren los empleados.
2. Se modificó index.ts (archivo para el frontend de la interfaz de listado) para que maneje errores con try catch.
3. Conexión desde la interfaz de listado a la interfaz de insertar por medio del botón "Insertar" debajo de la tabla agregando el atributo href en la etiqueta <a> de forma que  <a href="insertar.html">.
4. Se realizaron pruebas de:
- Validaciones de formato de los campos de Nombre y Salario. Exitosas.
- Se realizaron pruebas de validación de nombre repetido sin sensibilidad de mayúsculas y minúsculas. Exitosas.
- Verificar que al detectarse los distintos errores se le muestre al usuario el error cometido. Exitosas.
- Verificación de que la tabla de la interfaz de listado se actualice al insertar nuevo empleado. Exitosa.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PROBLEMAS ENCONTRADOS Y CÓMO SE RESOLVIERON
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Problema 1:
Descripción: Error de conexión a la IP, al volver a actualizar los archivos volvió la configuración server 'localhost' en connection.ts y Sebas tiene que cambiarlo y poner la dirección IP proporcionada, anteriormente, por Matías.

Mensaje de error:
Error al conectar a la BD: ConnectionError: Failed to connect to 25.0.119.25:1433 in 15000ms
    at connectListener (D:\TP1_BD1\Tarea1-BD\node_modules\mssql\lib\tedious\connection-pool.js:85:17)
    at Connection.onConnect (D:\TP1_BD1\Tarea1-BD\node_modules\tedious\src\connection.ts:1812:9)
    at Object.onceWrapper (node:events:623:12)
    at Connection.emit (node:events:508:20)
    at Connection.emit (node:domain:489:12)
    at Connection.emit (D:\TP1_BD1\Tarea1-BD\node_modules\tedious\src\connection.ts:1974:18)
    at D:\TP1_BD1\Tarea1-BD\node_modules\tedious\src\connection.ts:1834:14
    at processTicksAndRejections (node:internal/process/task_queues:85:11) {
  code: 'ETIMEOUT',
  originalError: ConnectionError: Failed to connect to 25.0.119.25:1433 in 15000ms
      at Timeout.<anonymous> (D:\TP1_BD1\Tarea1-BD\node_modules\tedious\src\connection.ts:2004:31)
      at listOnTimeout (node:internal/timers:605:17)
      at processTimers (node:internal/timers:541:7) {
    code: 'ETIMEOUT'
  }
}

Solución:  Resultó ser que la dirección que copió Sebas de Hamachi es diferente a la que le había pasado Matías, Sebas copió la de Hamachi y ahí es donde le dio error, al cambiarla por la proporcionada por Matías se solucionó.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DUDAS Y DIVERGENCIAS DE CRITERIO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- En esta sesión no hubo dudas y divergencias de criterio.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
AVANCE DEL CÓDIGO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
----------------------index.ts (frontend) ---------------------
interface Empleado {
    Id: number;
    Nombre: string;
    Salario: number;
}

async function cargarEmpleados(): Promise<void> {
    try {
        const response = await fetch("http://localhost:3000/api/empleados");

        if (!response.ok) {
            throw new Error("Error en la respuesta del servidor");
        }

        const result = await response.json();

        // Validar estructura
        if (!result.success) {
            throw new Error("Error lógico en la API");
        }

        const data: Empleado[] = result.data;

        const tbody = document.querySelector("#tabla tbody") as HTMLElement;

        // Limpiar tabla por si se recarga
        tbody.innerHTML = "";

        data.forEach((emp: Empleado) => {
            const fila = document.createElement("tr");

            fila.innerHTML = `
                <td>${emp.Id}</td>
                <td>${emp.Nombre}</td>
                <td>${emp.Salario}</td>
            `;

            tbody.appendChild(fila);
        });

    } catch (error) {
        console.error("Error cargando empleados:", error);

        const tbody = document.querySelector("#tabla tbody") as HTMLElement;

        tbody.innerHTML = `
            <tr>
                <td colspan="3">Error al cargar empleados</td>
            </tr>
        `;
    }
}

// Ejecutar al cargar la página
cargarEmpleados();
----------------------index.js (tras compilar index.ts) -------------------------------
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
function cargarEmpleados() {
    return __awaiter(this, void 0, void 0, function* () {
        try {
            const response = yield fetch("http://localhost:3000/api/empleados");
            if (!response.ok) {
                throw new Error("Error en la respuesta del servidor");
            }
            const result = yield response.json();
            // Validar estructura esperada
            if (!result.success) {
                throw new Error("Error lógico en la API");
            }
            const data = result.data;
            const tbody = document.querySelector("#tabla tbody");
            // Limpiar tabla por si se recarga
            tbody.innerHTML = "";
            data.forEach((emp) => {
                const fila = document.createElement("tr");
                fila.innerHTML = `
                <td>${emp.Id}</td>
                <td>${emp.Nombre}</td>
                <td>${emp.Salario}</td>
            `;
                tbody.appendChild(fila);
            });
        }
        catch (error) {
            console.error("Error cargando empleados:", error);
            const tbody = document.querySelector("#tabla tbody");
            tbody.innerHTML = `
            <tr>
                <td colspan="3">Error al cargar empleados</td>
            </tr>
        `;
        }
    });
}
// Ejecutar al cargar la página
cargarEmpleados();
---------------------------index.html------------------------------
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Empleados</title>
</head>
<body>

<div style="text-align: center;">
    <h1>Lista de Empleados</h1>
</div>

<table border="1" id="tabla" align="center">
    <thead>
        <tr>
            <th width="50">ID</th>
            <th width="200">Nombre</th>
            <th width="100">Salario</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<br><br>

<a href="insertar.html">
    <div style="text-align: center;">
    <button>Insertar</button>
    </div>
</a>

<script src="js/index.js"></script>

</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
MORALEJAS / BUENAS PRÁCTICAS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Siempre tener presente que al cambiar la dirección de un archivo o la organización de los archivos de todo el proyecto se van a tener que cambiar las direcciones utilizadas dentro del mismo proyecto.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PRÓXIMA SESIÓN: ¿QUÉ SIGUE?
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Llenar la tabla de resultados del documento con los porcentajes reales de cada ítem.
- Agregar los diagramas de arquitectura al documento. 
- Completar las métricas finales (horas totales, commits, líneas de código). 

Comentarios

Publicar un comentario

Entradas más populares de este blog

Entrada 4

 Fecha: [19/03/2026] Inicio: [18:30] | Fin: [21:05] | Total: [2 horas y 30 minutos] Presentes: Matías Benavides Sandoval / Sebastián Ramírez Abarca ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ¿QUÉ HICIMOS HOY? ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Sesión enfocada en configurar el proyecto Node.js + TypeScript y lograr la primera conexión exitosa entre el backend y SQL Server 1. Corregimos el error de PowerShell que impedía usar npm en VS Code.  2. Inicializamos el proyecto con npm init y creamos la estructura de carpetas: src/db, src/controllers, src/routes public/css, public/js  3. Instalamos las dependencias de producción: express y mssql.  4. Instalamos las dependencias de desarrollo: typescript, ts-node  5. Configuramos el archivo tsconfig.json con las opciones necesarias para el proyecto.  6. Creamos el archivo connection.ts con la configuración de conexión a SQL Server.  7. Habilitamos el usuario sa en SQL Server y le asignamos contraseña para poder conectarse des...
Leer más