Overview

Panorámica del Framework

WUIC Framework es una plataforma metadata-driven para crear interfaces de negocio de forma rápida y coherente.

Qué incluye

DataSource y DataRepeater para orquestar datos y renderizado.
Archetypes visuales (list, map, scheduler, chart, carousel).
Designer runtime para dashboards y templates dinámicos.
Workflow designer/runner para procesos operativos.
RAG Chatbot para consultar la codebase en lenguaje natural.

First Steps — Arranque del entorno dev

El stack WUIC está compuesto por varios servicios. Arráncalos en el orden indicado.

Prerrequisitos

Qué	Verificación	Notas
.NET 10 SDK	`dotnet --version`	Hosting Bundle para IIS en producción
Node.js 20+	`node --version`
SQL Server (Express)	`sqlcmd -S localhost\sqlexpress -E -C -Q "SELECT 1"`	Instancia `sqlexpress` por defecto
Python 3.12	`python --version`	Solo para el RAG Chatbot (opcional)

1. Descarga el template de proyecto

Parte del paquete WuicTest-src-*.zip (enlace en la sección Download del sitio).

Extráelo en una carpeta de trabajo, p. ej. C:\dev\WuicTest (los archivos van directamente

en la raíz, NO dentro de una subcarpeta src/). El paquete contiene:

WuicTest.csproj → proyecto host con <PackageReference Include="WuicCore" Version="..." />
wwwroot/ → app Angular cuyo package.json referencia wuic-framework-lib desde el registry npm
appsettings.json preconfigurado en modo firstRun = "true" con placeholders __SET_*__
appsettings-samples/ → 6 templates listos (mssql/mysql, firstRun/post-firstRun, Development)

> No hace falta clonar el repositorio del framework: WuicCore llega como paquete NuGet

> desde nuget.org y wuic-framework-lib como paquete npm desde el registry npm. El código

> fuente del framework solo se necesita si quieres modificarlo — típicamente no es tu caso.

2. Database

Las bases de datos deben estar ya presentes. Conexiones en appsettings.json:

MetaDataSQLConnection — DB metadata (menú, tablas, columnas, boards, usuarios)
DataSQLConnection — DB datos de la aplicación

Si es la primera instalación (AppSettings.firstRun = "true" en el template),

el wizard de scaffolding en el primer arranque crea el esquema metadata y puebla el DB datos.

Ver la página Scaffolding inicial para el flujo guiado.

3. Backend (.NET)

Desde la raíz de la carpeta extraída (p. ej. C:\dev\WuicTest):

Snippet 1PowerShell

# Primera vez: restore paquetes NuGet (pulls WuicCore + deps desde nuget.org, ~30 s)
dotnet restore

# Arranque dev con hot reload
$env:ASPNETCORE_ENVIRONMENT = 'Development'
dotnet watch run

El backend expone las API en http://localhost:5000.

4. Frontend (Angular)

En una segunda shell, desde la subcarpeta wwwroot/:

Snippet 2PowerShell

cd wwwroot

# Primera vez: restore dependencias npm (pulls wuic-framework-lib desde npm registry, ~2 min)
npm install

# Arranque dev server
npm run serve:dev

El frontend está disponible en http://localhost:4200.

5. RAG Chatbot (opcional)

El RAG Chatbot (Administración > RAG Chat) requiere un servidor Python

FastAPI en 127.0.0.1:8765. Sin él, el componente muestra el banner

"Server RAG no alcanzable" y el estado RAG offline — el resto

de la aplicación funciona normalmente.

Prerrequisitos: Python 3.12 (winget install Python.Python.3.12)

Snippet 3PowerShell

# Setup (una sola vez) — crea venv e instala dependencias
pwsh scripts/rag-setup.ps1

# Arranque del servidor
pwsh scripts/rag-setup.ps1 -Start

Para GPU CUDA: pwsh scripts/rag-setup.ps1 -CudaVersion 12.1.

Para el chat con LLM: pwsh scripts/rag-setup.ps1 -Start -AnthropicApiKey "sk-ant-...".

Sin API key funciona solo el modo retrieval (búsqueda de snippets).

Cold start ~13 segundos. Una vez que el log muestra

Uvicorn running on http://127.0.0.1:8765, recarga la página en el navegador.

Para producción (Windows service NSSM) ver la skill

skills/rag-chatbot-deploy/SKILL.md.

Resumen de servicios

Servicio	Puerto	Obligatorio	Comando rápido
SQL Server	1433	sí	(servicio Windows)
Backend .NET	5000	sí	`dotnet watch ... run`
Frontend Angular	4200	sí	`npm run serve:dev`
RAG Server Python	8765	no	`uvicorn rag_server:app ...`

Quick Start — primer componente

1. Configura el endpoint AsmxProxy.

2. Define route metadata y columnas.

3. Monta wuic-data-source + wuic-data-repeater.

Snippet 4HTML

<wuic-data-source [hardcodedRoute]="'cities'"></wuic-data-source>
<wuic-data-repeater [hardcodedAction]="'list'"></wuic-data-repeater>