Skip to Content
AppTemplateErste Schritte

Erste Schritte

Diese Anleitung zeigt den schnellsten Weg zu einer funktionierenden App — für beide Entwicklungswege.

Voraussetzungen

Repository klonen und starten

git clone https://github.com/5minds/ProcessCube.AppTemplate.git
cd ProcessCube.AppTemplate
docker compose up

Nach dem Start sind alle Services erreichbar:

DienstURL
Node-RED (LowCode)http://localhost:1880 
AppSDK Samplehttp://localhost:3000 
Enginehttp://localhost:8000 
Authorityhttp://localhost:11560 
WhoDBhttp://localhost:8080 

LowCode: Erster Flow

Node-RED öffnen

Navigieren Sie zu http://localhost:1880  — der Node-RED Editor öffnet sich.

Hello Node finden

In der Palette links unter der Kategorie MyProject finden Sie den mitgelieferten Hello Node. Ziehen Sie ihn auf den Flow.

Flow verbinden

Verbinden Sie einen Inject-Node (links) mit dem Hello Node und einen Debug-Node (rechts):

[Inject] → [Hello] → [Debug]

Deploy und testen

Klicken Sie Deploy und dann den Button am Inject-Node. Im Debug-Panel rechts erscheint die Begrüßung.

Widget im Dashboard ansehen

Unter MyProject in der Palette finden Sie auch die UI-Widgets (Hello, Thermometer). Ziehen Sie eines in einen Flow mit einer Dashboard-2 Gruppe, deployen Sie, und öffnen Sie das Dashboard unter http://localhost:1880/dashboard .

AppSDK: Erster Prozess

App öffnen

Navigieren Sie zu http://localhost:3000  — die AppSDK Sample-App erscheint.

Prozess starten

Klicken Sie auf “Prozess starten”. Im Hintergrund wird der BPMN-Prozess SampleWithAppSDK_Process gestartet.

UserTask bearbeiten

Nach wenigen Sekunden erscheint ein Task in der Liste. Klicken Sie darauf — ein Formular zum Eingeben einer Begrüßung wird angezeigt.

Begrüßung eingeben

Geben Sie z.B. “Hallo ProcessCube!” ein und klicken Sie “Abschließen”.

Ergebnis sehen

Der External Task Worker verarbeitet die Eingabe. Ein zweiter Task erscheint mit der Antwort. Schließen Sie auch diesen ab — der Prozess ist beendet.

Projektstruktur

ProcessCube.AppTemplate/
├── apps/
│   ├── lowcode/                 # LowCode-App (Node-RED)
│   │   ├── src/
│   │   │   ├── nodes/           # Custom Nodes und Plugins
│   │   │   ├── ui/              # Vue.js Widgets
│   │   │   └── package.json     # Paket-Registrierung
│   │   └── Dockerfile
│   └── appsdk_sample/           # AppSDK-App (Next.js)
│       ├── app/
│       │   ├── page.tsx         # Haupt-UI
│       │   ├── actions.ts       # Server Actions
│       │   └── appsdk_greeting/ # External Task Handler
│       └── Dockerfile
├── processes/                   # BPMN-Prozesse (Auto-Seed)
├── .processcube/                # Engine + Authority Config
└── docker-compose.yml           # Service-Orchestrierung

Build-Befehle

LowCode: Vue.js Widgets bauen

cd apps/lowcode/src
npm install
npm run build          # Alle Widgets
npm run build:hello    # Nur Hello-Widget
npm run build:thermo   # Nur Thermometer-Widget

AppSDK: Next.js App bauen

cd apps/appsdk_sample
npm install
npm run build

Docker-Images neu bauen

docker compose build lowcode            # LowCode-Image
docker compose build appsdk_sample      # AppSDK-Image

Nach Änderungen am Quellcode müssen die Docker-Images neu gebaut werden, damit die Änderungen im Container verfügbar sind.

Nächste Schritte

LowCode-Weg

AppSDK-Weg

Allgemein

InstallationArchitektur