Skip to Content
AppSDKErste Schritte

Erste Schritte

Dieses Tutorial zeigt, wie du mit dem App-SDK in wenigen Minuten eine erste Seite mit Engine-Anbindung erstellst.

Voraussetzung: Das SDK ist bereits installiert und konfiguriert. Falls nicht, siehe Installation. Für eine laufende Umgebung mit Engine, Authority und Datenbank siehe AppTemplate → Erste Schritte.

Quick Start

User Tasks abrufen

Erstelle eine Seite, die wartende User Tasks von der Engine abruft:

app/page.tsx
import { getWaitingUserTasks } from '@5minds/processcube_app_sdk/server';
 
export default async function Page() {
  const { userTasks } = await getWaitingUserTasks();
 
  return (
    <div>
      <h1>Wartende Aufgaben</h1>
      <ul>
        {userTasks.map((task) => (
          <li key={task.flowNodeInstanceId}>{task.flowNodeName}</li>
        ))}
      </ul>
    </div>
  );
}

Development Server starten

npm run dev

Öffne http://localhost:3000  im Browser.

Die drei Import-Pfade

Das SDK hat drei Einstiegspunkte — je nach Umgebung:

Import-PfadUmgebungInhalt
@5minds/processcube_app_sdkClient + ServerGemeinsame Typen, RemoteUserTask, hasClaim
@5minds/processcube_app_sdk/serverNur ServerEngine-Funktionen, Auth, External Tasks
@5minds/processcube_app_sdk/clientNur ClientReact-Komponenten (BPMNViewer, DynamicUi, …)
// Server Component
import { getWaitingUserTasks } from '@5minds/processcube_app_sdk/server';
 
// Client Component
import { BPMNViewerNextJS } from '@5minds/processcube_app_sdk/client';
 
// Überall
import { hasClaim } from '@5minds/processcube_app_sdk';

Bevorzuge Server-Side Functions — sie sind performanter und erfordern keine Authentifizierung im Browser.

Vollständiges Beispiel

Eine Seite mit User Task Handling über Server Actions:

app/tasks/page.tsx
import { getWaitingUserTasks, finishUserTask } from '@5minds/processcube_app_sdk/server';
import { revalidatePath } from 'next/cache';
 
export default async function TasksPage() {
  const { userTasks } = await getWaitingUserTasks();
 
  async function handleFinish(flowNodeInstanceId: string) {
    'use server';
    await finishUserTask(flowNodeInstanceId, { approved: true });
    revalidatePath('/tasks');
  }
 
  return (
    <div>
      <h1>Meine Aufgaben</h1>
      {userTasks.length === 0 ? (
        <p>Keine wartenden Aufgaben</p>
      ) : (
        <ul>
          {userTasks.map((task) => (
            <li key={task.flowNodeInstanceId}>
              {task.flowNodeName}
              <form action={handleFinish.bind(null, task.flowNodeInstanceId)}>
                <button type="submit">Abschließen</button>
              </form>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

Ein vollständiges Praxis-Beispiel mit Engine, Authority und BPMN-Prozess findest du im AppTemplate.

Nächste Schritte

InstallationArchitektur