Overview

Panorama du Framework

WUIC Framework est une plateforme pilotee par metadata pour creer des interfaces metier de maniere rapide et coherente.

Contenu

DataSource et DataRepeater pour orchestrer les donnees et le rendu.
Archetypes visuels (list, map, scheduler, chart, carousel).
Designer runtime pour les dashboards et les templates dynamiques.
Workflow designer/runner pour les processus operationnels.
RAG Chatbot pour interroger la codebase en langage naturel.

First Steps — Demarrage de l'environnement dev

La stack WUIC est composee de plusieurs services. Demarrez-les dans l'ordre indique.

Prerequis

Element	Verification	Notes
.NET 10 SDK	`dotnet --version`	Hosting Bundle pour IIS en production
Node.js 20+	`node --version`
SQL Server (Express)	`sqlcmd -S localhost\sqlexpress -E -C -Q "SELECT 1"`	Instance `sqlexpress` par defaut
Python 3.12	`python --version`	Uniquement pour le RAG Chatbot (optionnel)

1. Telecharger le template de projet

Partez du paquet WuicTest-src-*.zip (lien dans la section Download du site).

Extrayez-le dans un dossier de travail, ex. C:\dev\WuicTest (les fichiers vont directement

a la racine, PAS dans un sous-dossier src/). Le paquet contient :

WuicTest.csproj → projet host avec <PackageReference Include="WuicCore" Version="..." />
wwwroot/ → app Angular avec package.json qui reference wuic-framework-lib depuis le registre npm
appsettings.json preconfigure en mode firstRun = "true" avec placeholders __SET_*__
appsettings-samples/ → 6 templates prets (mssql/mysql, firstRun/post-firstRun, Development)

> Pas besoin de cloner le repository du framework : WuicCore arrive comme paquet NuGet

> depuis nuget.org et wuic-framework-lib comme paquet npm depuis le registre npm. Le source

> du framework n'est necessaire que si vous voulez le modifier — typiquement pas votre cas.

2. Base de donnees

Les bases de donnees doivent deja etre presentes. Connexions dans appsettings.json :

MetaDataSQLConnection — DB metadata (menu, tables, colonnes, board, utilisateurs)
DataSQLConnection — DB donnees applicatives

S'il s'agit de la premiere installation (AppSettings.firstRun = "true" dans le template),

le wizard de scaffolding au premier demarrage cree le schema metadata et peuple le DB donnees.

Voir la page Scaffolding initial pour le flux guide.

3. Backend (.NET)

Depuis la racine du dossier extrait (ex. C:\dev\WuicTest) :

Snippet 1PowerShell

# Premiere fois : restore des paquets NuGet (pulls WuicCore + deps depuis nuget.org, ~30 s)
dotnet restore

# Demarrage dev avec hot reload
$env:ASPNETCORE_ENVIRONMENT = 'Development'
dotnet watch run

Le backend expose les API sur http://localhost:5000.

4. Frontend (Angular)

Dans un second shell, depuis le sous-dossier wwwroot/ :

Snippet 2PowerShell

cd wwwroot

# Premiere fois : restore des dependances npm (pulls wuic-framework-lib depuis npm registry, ~2 min)
npm install

# Demarrage dev server
npm run serve:dev

Le frontend est disponible sur http://localhost:4200.

5. RAG Chatbot (optionnel)

Le RAG Chatbot (Administration > RAG Chat) requiert un serveur Python

FastAPI sur 127.0.0.1:8765. Sans celui-ci, le composant affiche la banniere

"Serveur RAG injoignable" et l'etat RAG offline — le reste de

l'application fonctionne normalement.

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

Snippet 3PowerShell

# Setup (une seule fois) — cree le venv et installe les dependances
pwsh scripts/rag-setup.ps1

# Demarrage du serveur
pwsh scripts/rag-setup.ps1 -Start

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

Pour le chat avec LLM : pwsh scripts/rag-setup.ps1 -Start -AnthropicApiKey "sk-ant-...".

Sans cle API, seul le mode retrieval (recherche de snippets) fonctionne.

Cold start ~13 secondes. Une fois que le log affiche

Uvicorn running on http://127.0.0.1:8765, rechargez la page dans le navigateur.

Pour la production (service Windows NSSM) voir la skill

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

Recapitulatif des services

Service	Port	Obligatoire	Commande rapide
SQL Server	1433	oui	(service Windows)
Backend .NET	5000	oui	`dotnet watch ... run`
Frontend Angular	4200	oui	`npm run serve:dev`
RAG Server Python	8765	non	`uvicorn rag_server:app ...`

Quick Start — premier composant

1. Configurez l'endpoint AsmxProxy.

2. Definissez la route metadata et les colonnes.

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

Snippet 4HTML

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