Bitácora de desarrollo #3 Sesión: Inicio del Frontend con Next.js

Hora de inicio: 4:00pm
Hora de fin: 5:30pm

Horas trabajadas: 1h 30 minutos

Descripción de avances

Se creó el frontend (no conectado aún con el backend) de la aplicación de empleados para el curso, se hizo con Next.js usando React + Tailwind CSS en Typescript. Se detalla en cada elemento lo que se hizo:

Elemento 1: Se inicializó con el comando "npx create-next-app@latest ." un frontend con Server-Side Rendering de Next.js, para tener una base y seguir de ahí. 

Elemento 2: Se modificó la ruta principal / para tener la lista (por ahora con datos mockeados de ID, Nombre y Salario) de los empleados y el botón de Insertar.

Elemento 3: Se creó la ruta /insertar con un form para poder poner Nombre y Salario de empleado, además de los botones de Insertar y Regresar.

Problemas encontrados:

Problema 1: Inicialmente tuve problemas creando la ruta porque me salía un error 404 al entrar a la ruta en localhost.

Solución: como en Next.js se usa un App Router y no un router creado a mano, la solución era crear dentro de la carpeta /src/app la carpeta /insertar con un archivo page.tsx. El problema que estaba teniendo era que cree el archivo app.tsx (que no iba a servir).

Próximos pasos:

Integrar el frontend con el backend y la base de datos.

Probar todo el flujo y verificar que esté correcto.


Documentación utilizada para el desarrollo:
Documentación oficial de Next.js: https://nextjs.org/docs

Comentarios

Publicar un comentario

Entradas más populares de este blog

Bitácora de desarrollo #2 Sesión: Backend Node.js + Express + MSSQL

Autor: Santiago Villarreal Fecha: 17 de marzo de 2025 Hora de inicio: 14:00 Hora de fin: 17:00 Horas trabajadas: 3.5 h Descripción de avances En esta sesión se implementó el backend de la aplicación de empleados usando Node.js, TypeScript y Express, conectado a una base de datos Microsoft SQL Server en Docker. Trabajo realizado: - Base de datos: Se creó el procedimiento almacenado sp_insert_empleado en database.sql, que recibe @Nombre y @Salario, verifica duplicados y devuelve un código de resultado mediante un parámetro OUTPUT. - Estructura del backend: Se definió una arquitectura modular en proyecto-1/backend/ con carpetas para config, controllers, routes, types y utils. - Configuración: Se configuró el pool de conexiones MSSQL como singleton en db.ts, usando variables de entorno para credenciales. API REST: GET /empleados: Llama a sp_list_empleados y devuelve la lista ordenada por nombre. POST /empleados: Valida el body, llama a sp_insert_empleado y maneja el caso de nombre duplicad...
Leer más

Entrada sesión de prueba y error #1

Sesión 1 Configuración inicial del proyecto Hora de inicio: 11:00 pm Hora de fin: 12:00 AM Horas trabajadas: 1h Descripción de avances En esta primera sesión se trabajó en la documentación del proyecto: Formato del README: Se revisó y formateó el archivo README.md del proyecto para que cumpla con Markdown. Se corrigieron bloques de código SQL, se eliminaron etiquetas innecesarias y se organizaron encabezados, listas y viñetas. Enlace a la bitácora: Se añadió en el README el enlace a esta bitácora en la sección 6.1 (Bitácora de desarrollo), para que quede documentada la ubicación del registro de trabajo. Problemas encontrados El README original tenía etiquetas en todo el documento, probablemente de una exportación desde PDF. El bloque SQL del CREATE TABLE no estaba cerrado correctamente. El ejemplo de INSERT no estaba dentro de un bloque de código. Solución aplicada Se eliminaron todas las etiquetas [page:1]. Se cerraron correctamente los bloques de código con ```. Se aplicó una jerarqu...
Leer más

Bitácora de desarrollo #4 Sesión: Conexión backend con frontend y testing

Hora de inicio: 6:30pm Hora de fin: 8pm Horas trabajadas: 1h 30m Descripción de avances Se conectó el frontend con el backend, ahora hace API calls hacia el backend que realiza cosas en la base de datos. Elemento 1: Se arreglaron unos errores en el API relacionados a que faltaba el campo port en el archivo db.ts para la configuración de la conexión con la base de datos. Elemento 2: Se implementaron las API calls en el frontend hacia el backend, todo ya está funcional. Elemento 3: Se componetizó mejor, haciendo la tabla un componente por separado de la página principal. Elemento 4: Flujo probado y funciona satisfactoriamente Problemas encontrados: Problema 1: Se tuvo problemas con la conexión inicialmente del backend con el frontend, aunque todas las variables de entorno estuvieran seteadas. Solución: en el .env del frontend estaba el puerto 3000 y era el 3001. Próximos pasos: Hacer documentación.
Leer más