Entrada 6

Fecha: [22/03/2026]

Inicio: [9:30] | Fin: [11:20] U Inicio: [19:45] | Fin: [23:30] | Total: [5 horas 35 minutos]

Presentes: Sebastián Ramírez Abarca

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

¿QUÉ HICIMOS HOY?

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Sesión enfocada en el desarrollo de una versión de la interfaz inicial de la aplicación pero sin conectarse al resto de la tarea debido a que mi compañero, por razones personales no pudo dejar su PC encendida.

1. De 9:30 a.m. a 11:20 a.m. repasé lo que había investigado el día de ayer (21 de marzo de 2026) y en días anteriores.

2. A partir de las 19:45 (7:45 p.m.) comencé verdaderamente a desarrollar el código. Empecé creando el archivo empleados.json que contiene información que simula lo que serían 3 filas de tabla dbo.Empleado de la base de datos.

3. Cree index.html que tendrá la tabla y el botón.

4. Cree index.ts (versión exclusiva para esta prueba), en este cree interface Empleado con los mismos atributos que la tabla, luego lee el json, hace objetos y luego crea las filas de la tabla a mostrar. Luego, tuve un error al intentar compilar index.ts (ver detalle en PROBLEMAS ENCONTRADOS Y CÓMO SE RESOLVIERON) pero al solucionarlo levanté en localhost:3000 que muestra lo requerido en esta interfaz.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

PROBLEMAS ENCONTRADOS Y CÓMO SE RESOLVIERON

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Problema 1: Descripción: Al intentar compilar index.ts tiró error.

Mensaje de error:

"app.ts:7:16 - error TS2705: An async function or method in ES5 requires the 'Promise' constructor. Make sure you have a declaration for the 'Promise' constructor or include 'ES2015' in your '--lib' option.

7 async function cargarEmpleados() {

~~~~~~~~~~~~~~~

Found 2 errors in the same file, starting at: app.ts:7".

Solución: El error era que intentaba compilar con ES5 y debido a que async/await necesitan ES6 la solución fue compilar con el siguiente comando:
npx tsc app.ts --target ES6

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

DUDAS Y DIVERGENCIAS DE CRITERIO

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

En esta sesión no hubo.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

AVANCE DEL CÓDIGO (si aplica)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

- - - - - - - - - - - - empleados.json - - - - - - - - - - - - -

[
  { "Id": 1, "Nombre": "Juan Perez", "Salario": 5000.50 },
  { "Id": 2, "Nombre": "Maria Lopez", "Salario": 6500.00 },
  { "Id": 3, "Nombre": "Carlos Sanchez", "Salario": 72000.0 }

]

- - - - - - - - - - - - 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>
    <div style="text-align: center;">
    <button>Insertar</button>
    </div>
</a>

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

</body>
</html>

- - - - - - - - - - - - index.ts- - - - - - - - - - - - -

interface Empleado {
    Id: number;
    Nombre: string;
    Salario: number;
}

async function cargarEmpleados() {
    const response = await fetch("empleados.json");
    const data: Empleado[] = await response.json();

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

    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);
    });
}

cargarEmpleados();

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

MORALEJAS / CONSEJOS / BUENAS PRÁCTICAS

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Moraleja: Tener en cuenta la versión del compilador, no le había prestado atención a ese detalle antes.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

PRÓXIMA SESIÓN: ¿QUÉ SIGUE?

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Se intentará realizar las siguientes tareas:

- Conectar la interfaz inicial con el resto del proyecto.

- Conectar la interfaz inicial con la interfaz de insertar empleado.

Buscar este blog

Tarea 1 de Bases de Datos

Entrada 6

Comentarios

Publicar un comentario

Entradas más populares de este blog

Entrada 4