Eine App mit der Datenbank verbinden

Du brauchst eine SQL-Tabelle. posts mit id und title reicht. Du brauchst außerdem einen API-Schlüssel auf diesem SQL-Connector. Erstelle ihn unter Workspace settings, API Keys, wenn die Action meldet, dass der Schlüssel fehlt. Du fügst den Schlüssel nicht in die App ein. Die Action liest ihn aus orbi.project.apiKeys.

1. Öffne die App.
2. Füge eine Server action namens list_posts hinzu.
3. Ersetze den Code durch das Beispiel.
4. Speichere und führe die Action aus.

Du siehst ein Array von Zeilen. Ein leeres Array bedeutet, dass die Tabelle noch keine Zeilen hat.

async ({ orbi }) => {
  const apiKey = orbi.project.apiKeys.find((key) => key.connectorId)
  if (!apiKey) throw new Error("Create an API key for the database under Workspace settings, API Keys.")
  const response = await fetch("https://core.orbitype.com/api/sql/v1?sql=" + encodeURIComponent("SELECT id, title FROM posts ORDER BY id"), {
    headers: { "X-API-KEY": apiKey.key },
  })
  if (!response.ok) throw new Error(await response.text())
  return await response.json()
}

Apps sind interaktive Seiten, die du direkt in Orbitype erstellst. Sie eignen sich ideal für öffentliche Formulare, Preisrechner, interne Tools, Dashboards und individuelle Datenoberflächen.

Was ein App enthält

• Titel: eindeutiger Name deines Apps

• Beschreibung: Kontext für Team und Nutzer

• HTML: die UI im Live-Preview

• Actions: Backend-Funktionen aus der UI aufrufbar

• Sichtbarkeit: private oder public

Warum Apps nutzen

• Schnelle Umsetzung für individuelle Seiten und Rechner

• Direkte Verbindung zur Orbitype-Runtime

• Einfaches Teilen und Einbetten

• Keine zusätzliche Hosting-Konfiguration für Standardfälle

Schritt für Schritt

1. Öffne Apps in der Sidebar.
2. Klicke auf New app.
3. Füge Titel und Beschreibung hinzu.
4. Baue die Oberfläche im HTML-Editor.
5. Teste das Verhalten im Live-Preview.
6. Speichere und verbessere iterativ.

Typische Beispiele

• Lead-Formular mit Validierung
• ROI- oder Preisrechner
• Kampagnen-Performance-Rechner
• Interaktiver Onboarding-Check

Editor-Tipps

• Ein App sollte eine klare Hauptaufgabe haben
• Nutze verständliche Labels und leere Zustände
• Wenn extern geteilt: mobile-first gestalten

Nutze Actions, wenn dein Formular oder Rechner sichere serverseitige Logik benötigt (Datenbankabfragen, APIs, AI-Aufrufe, Enrichment usw.).

Action aus dem App aufrufen

const result = await Orbi.action("load_kpis", { range: "30d" })
console.log(result)

Action-Modell

• name: eindeutige Kennung für Orbi.action(...)
• code: serverseitige Funktionslogik
• input: Payload aus der UI
• output: Ergebnis für das Rendering

Empfohlenes Output-Format

{
  "ok": true,
  "data": { ... },
  "error": null
}

Stabile Response-Strukturen vereinfachen Rendering und Fehlerbehandlung im Frontend.

Sichtbarkeit

• Private: nur im Workspace-Kontext zugänglich
• Public: über öffentlichen Link erreichbar

Sharing-Optionen

• Öffentliche Seiten-URL öffnen
• Embed-iframe-Snippet kopieren
• In externe Websites oder Dokus einbetten

Vor dem Umschalten auf public

• Kompletten Nutzerfluss testen
• Leere Zustände und Fehler prüfen
• Texte, Labels und Mobile-Layout prüfen
• Sicherstellen, dass keine internen Daten sichtbar sind

• Starte mit einem klaren Ergebnis pro App
• Geschäftslogik in Actions, nicht in UI-Skripten
• Explizite Action-Namen verwenden (calculate_offer, submit_lead)
• Konsistente JSON-Strukturen zurückgeben
• Loading-, Empty- und Error-States sauber behandeln

Häufige Probleme

• Action nicht gefunden: prüfen, ob der Name exakt übereinstimmt.
• Keine Daten in der UI: prüfen, ob die Action die erwarteten JSON-Felder liefert.
• Runtime-Fehler: Input validieren und kritische Logik mit try/catch absichern.
• Public-Link funktioniert nicht: Sichtbarkeit auf public setzen.

Create an API key bedeutet, dass kein Schlüssel für einen Connector gespeichert ist. Erstelle einen auf dem SQL-Connector. relation posts does not exist bedeutet, dass der Tabellenname anders ist. Ändere posts auf deine Tabelle.