title
Creación de pantallas - Tutorial ISJ NET

Tutorial rápido: Crear una nueva pantalla con Cursor (VB.NET → Angular + C# API)

Requisitos

• Proyecto abierto en Cursor en c:\Proyectos\Pasantia\isj-net.
• Backend .NET 9 y Frontend Angular 19 funcionando localmente.
• Archivos de apoyo:
  • MIGRATION_PROMPT.md
  • ISJ/TablesInfo.txt (agrega aquí estructuras si faltan)

Flujo resumido (lo que harás en el chat)

1. Enviar el archivo .vb del WinForms.
2. Esperar a que analice el archivo. Si falta alguna tabla, cursor lo va a indicar y hará siempre una consulta por un mockup para el frontend, este es opcional.
3. Si hay mockup, adjuntarlo (como una imagen) e indciarle por secciones si es el titulo, filtro o contenido. Si faltan tablas, pega su CREATE TABLE en el chat o edita ISJ/TablesInfo.txt e indicale que se encuentra ahi.
4. Esperar a que termine la creación (backend + frontend).
5. Probar y reportar errores (frontend y/o backend) pegando mensajes/logs en el chat.
6. Verificar todo nuevamente tras las correcciones.

---

Paso a paso en Cursor

1) Enviar el .vb

Metodo sugerido:

• Buscar el archivo en el directorio, arrastrar y soltarlo al chat de cursor.

`frmX.vb`

2) Aportar mockup y/o tablas que falten

• Si tienes mockup, súbelo como imagen o indica layout esperado.
• Si faltan tablas: pega CREATE TABLE ... en el chat o abre ISJ/TablesInfo.txt y agrega la estructura allí.

Ejemplo breve a pegar:

CREATE TABLE [dbo].[NUEVA_TABLA] (
  [id] INT NOT NULL,
  [nombre] VARCHAR(50) NOT NULL
)

{width=683 height=358}

3) El asistente crea backend y frontend

• Reutiliza repositorios/servicios existentes y crea lo que falte.
• Sigue Clean Architecture y Dapper (no EF).
• Frontend con Angular Material, standalone components y Reactive Forms.

{width=1386 height=705}

{width=1397 height=555}

4) Probar localmente

• Backend (desde ISJ/ISJ.Web):

dotnet run
# Swagger: https://localhost:5231

• Frontend (desde ISJ.Web.Angular/ISJ.Academic-System-UI):

npm i # si no se ha descargado las dependencias
ng serve
# App: http://localhost:4200

{width=1383 height=708}

{width=1385 height=708}

5) Reportar errores para corrección

Pega siempre:

• Mensaje de error (console o terminal)
• Dónde ocurrió (pantalla/endpoint)

Ejemplo:

NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.
src/app/app/modules/academic/maintenance/pages/section-assignment/section-assignment.component.html:98:14

Se puede indicar tambien errores visuales, como campos no funcionales o cambios al frontend- {width=783 height=92}

---

Ejemplo guiado: frmAsignaSeccion.vb

1. Enviar .vb:

{width=782 height=69}

2. Confirmar recursos existentes (el asistente lo hace automáticamente) y aportar lo faltante:

• Si falta endpoint de secciones: se crea.
• Si hay una tabla nueva no modelada, agregar su CREATE TABLE a ISJ/TablesInfo.txt e indicarle.
• Si hay un mockup, indicarle de manera seccionada, como header, filtro y contenido

3. Generación:

• Backend: Models/Repositories (Dapper) → Services → Controllers.
• Frontend: models backend/frontend, data service, mapper, list + dialog.

4. Pruebas:

• Swagger: listar/crear/editar/eliminar.
• Angular: tabla con paginator/sort, dialog con validaciones.

5. Correcciones:

• Pegar errores y se ajusta.

{width=778 height=612}

---

Plantillas de mensaje útiles

• Inicio:

frmX.vb

• Estructura de tabla faltante:

Agregué la tabla NUEVA_TABLA a @ISJ/TablesInfo.txt (ver última sección).

• Error de prueba:

Angular: error en POST /api/x. Console: 500. Stack adjunto.

---

Checklist rápido

• VB enviado
• Mockup o estructura de tabla proporcionados (si aplica)
• Backend corre en Swagger sin errores
• Frontend levanta y la pantalla lista datos
• Crear/Editar/Eliminar OK
• Validaciones UI correctas
• Errores corregidos y verificados