Overview

Framework-Uebersicht

WUIC Framework ist eine metadata-gesteuerte Plattform zum schnellen und konsistenten Erstellen von Business-Oberflaechen.

Was ist enthalten

DataSource und DataRepeater zur Orchestrierung von Daten und Rendering.
Visuelle Archetypes (list, map, scheduler, chart, carousel).
Runtime-Designer fuer Dashboards und dynamische Templates.
Workflow-Designer/Runner fuer operative Prozesse.
RAG Chatbot zum Abfragen der Codebasis in natuerlicher Sprache.

First Steps — Dev-Umgebung starten

Der WUIC-Stack besteht aus mehreren Diensten. Starte sie in der angegebenen Reihenfolge.

Voraussetzungen

Was	Verifikation	Hinweise
.NET 10 SDK	`dotnet --version`	Hosting Bundle fuer IIS in Produktion
Node.js 20+	`node --version`
SQL Server (Express)	`sqlcmd -S localhost\sqlexpress -E -C -Q "SELECT 1"`	Standardinstanz `sqlexpress`
Python 3.12	`python --version`	Nur fuer den RAG Chatbot (optional)

1. Projekt-Template herunterladen

Starten Sie mit dem Paket WuicTest-src-*.zip (Link im Download-Bereich der Website).

Entpacken Sie es in einen Arbeitsordner, z.B. C:\dev\WuicTest (die Dateien kommen direkt

in den Root, NICHT in einen src/-Unterordner). Das Paket enthaelt:

WuicTest.csproj → Host-Projekt mit <PackageReference Include="WuicCore" Version="..." />
wwwroot/ → Angular-App, deren package.json wuic-framework-lib aus der npm-Registry referenziert
appsettings.json vorkonfiguriert im firstRun = "true"-Modus mit __SET_*__-Platzhaltern
appsettings-samples/ → 6 fertige Templates (mssql/mysql, firstRun/post-firstRun, Development)

> Kein Klonen des Framework-Repositories noetig: WuicCore kommt als NuGet-Paket von

> nuget.org und wuic-framework-lib als npm-Paket aus der npm-Registry. Der Framework-

> Quellcode wird nur benoetigt, wenn Sie ihn modifizieren wollen — typischerweise nicht Ihr Fall.

2. Datenbank

Die Datenbanken muessen bereits vorhanden sein. Verbindungen in appsettings.json:

MetaDataSQLConnection — Metadata-DB (Menue, Tabellen, Spalten, Board, Benutzer)
DataSQLConnection — Anwendungsdaten-DB

Bei Erstinstallation (AppSettings.firstRun = "true" im Template) erstellt der Scaffolding-

Wizard beim ersten Start das Metadata-Schema und befuellt die Daten-DB.

Siehe Seite Initial Scaffolding fuer den gefuehrten Flow.

3. Backend (.NET)

Aus dem Root des entpackten Ordners (z.B. C:\dev\WuicTest):

Snippet 1PowerShell

# Erstes Mal: NuGet-Pakete wiederherstellen (holt WuicCore + deps von nuget.org, ~30 s)
dotnet restore

# Dev-Start mit Hot Reload
$env:ASPNETCORE_ENVIRONMENT = 'Development'
dotnet watch run

Das Backend stellt die APIs auf http://localhost:5000 bereit.

4. Frontend (Angular)

In einer zweiten Shell, aus dem Unterordner wwwroot/:

Snippet 2PowerShell

cd wwwroot

# Erstes Mal: npm-Abhaengigkeiten wiederherstellen (holt wuic-framework-lib aus npm-Registry, ~2 Min.)
npm install

# Dev-Server starten
npm run serve:dev

Das Frontend ist auf http://localhost:4200 verfuegbar.

Standard-Login (post-firstRun): admin / admin.

5. RAG Chatbot (optional)

Der RAG Chatbot (Amministrazione > RAG Chat) benoetigt einen Python-

FastAPI-Server auf 127.0.0.1:8765. Ohne ihn zeigt die Komponente das Banner

"RAG-Server nicht erreichbar" und den Status RAG offline — der Rest

der Anwendung funktioniert normal.

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

Snippet 3PowerShell

# Setup (einmalig) — erstellt venv und installiert Abhaengigkeiten
pwsh scripts/rag-setup.ps1

# Server starten
pwsh scripts/rag-setup.ps1 -Start

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

Fuer den Chat mit LLM: pwsh scripts/rag-setup.ps1 -Start -AnthropicApiKey "sk-ant-...".

Ohne API-Key funktioniert nur der Retrieval-Modus (Snippet-Suche).

Cold Start ~13 Sekunden. Sobald das Log

Uvicorn running on http://127.0.0.1:8765 anzeigt, die Seite im Browser neu laden.

Fuer Produktion (Windows-Service NSSM) siehe die Skill

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

Dienste-Zusammenfassung

Dienst	Port	Erforderlich	Schnellbefehl
SQL Server	1433	ja	(Windows-Dienst)
Backend .NET	5000	ja	`dotnet watch ... run`
Frontend Angular	4200	ja	`npm run serve:dev`
RAG Server Python	8765	nein	`uvicorn rag_server:app ...`

Quick Start — erste Komponente

1. AsmxProxy-Endpoint konfigurieren.

2. Route-Metadata und Spalten definieren.

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

Snippet 4HTML

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