ADK Setup Guide

Dein AI-Editor kennt ab jetzt deine Ninox-Datenbank – Setup in 10 Minuten

Du baust Ninox-Oberflächen mit Arc Rider Widgets und wünschst dir, dass dir jemand beim Code schreiben hilft? Jemand, der deine Datenbank kennt, die richtige Syntax beherrscht und weiß, wie die Widgets funktionieren?

Genau das macht das Arc Rider Developer Kit (ADK). Es verbindet einen AI-Editor mit deiner Ninox-Datenbank und unserer Widget-Dokumentation. Du beschreibst auf Deutsch, was du willst – die AI schreibt den Code.

Keine Programmierkenntnisse nötig. Kein Terminal-Wissen vorausgesetzt. In diesem Guide gehen wir jeden Schritt gemeinsam durch.

Was du am Ende hast

Nach diesem Guide hast du auf deinem Computer einen Projektordner mit allem, was die AI braucht:

Die AI liest diese Dateien automatisch im Hintergrund. Du musst dich darum nicht kümmern – du beschreibst einfach, was du bauen willst, und die AI nutzt den Kontext.

Voraussetzungen

Bevor du loslegst, brauchst du:

• Ninox-Account mit aktiven Arc Rider Widgets – Widgets bestellen

• Node.js (Version 18+) – ein kostenloses Hilfsprogramm, das wir für die Installation brauchen – Download

Node.js ist ein weit verbreitetes Tool, das Entwickler nutzen, um Programme und Pakete zu installieren. Du brauchst es nur einmal installieren – danach läuft alles im Hintergrund. Lade einfach die „LTS"-Version von der Website herunter und folge dem Installer.

Schritt 1: Cursor installieren – dein AI-Editor

Cursor ist ein Code-Editor mit eingebauter AI. Du kannst dir Cursor vorstellen wie ein intelligentes Notizbuch für Code: Du schreibst rein, was du willst – und die AI hilft dir beim Umsetzen.

Warum Cursor?

• Lokal auf deinem Computer: Cursor ist ein Programm, das auf deinem Rechner läuft. Deine Dateien bleiben bei dir – nichts wird in die Cloud hochgeladen.

• AI versteht Kontext: Anders als ChatGPT oder ähnliche Tools kann Cursor die Dateien in deinem Projekt lesen. Wenn dein Ninox-Schema lokal liegt, kennt die AI deine Tabellen und Felder.

• Kein Programmierwissen nötig: Du beschreibst auf Deutsch, was du bauen willst. Die AI schreibt den Code. Du kopierst ihn nach Ninox.

• Kostenlose Version reicht: Für den Einstieg brauchst du kein Abo.

So installierst du Cursor:

1. Gehe zu cursor.com

2. Lade die Version für dein Betriebssystem herunter

3. Installiere das Programm (wie jede andere App)

4. Erstelle einen kostenlosen Account

Schritt 2: Projektordner anlegen

Erstelle einen neuen, leeren Ordner – dort, wo du deine Projekte normalerweise speicherst. Auf dem Mac nutzen wir gerne den vorgefertigten Systemordner „Sites" (z.B. /Users/deinname/Sites/).

Mac: Finder → Ordner „Sites" öffnen (oder einen anderen Ort) → Rechtsklick → „Neuer Ordner" → z.B. mein-ninox-projekt Windows: Rechtsklick im Explorer → „Neu" → „Ordner" → z.B. mein-ninox-projekt

Öffne diesen Ordner jetzt in Cursor:

• Starte Cursor

• Gehe auf File → Open Folder (oder ziehe den Ordner einfach ins Cursor-Fenster)

• Wähle deinen neuen Ordner aus

Schritt 3: Pakete installieren & Projekt einrichten

Jetzt installieren wir das ADK und richten das Projekt ein. Öffne dazu das Terminal in Cursor – das ist eine Kommandozeile, die direkt in den Editor eingebaut ist:

• Mac: Drücke Ctrl + Backtick (```) oder gehe auf Terminal → New Terminal im Menü

• Windows: Gleiche Tastenkombination oder über das Menü

Tippe folgenden Befehl ein und drücke Enter:

npm

Was passiert hier?

• npm install lädt zwei Pakete herunter:

  • **@arcrider/developer-kit** – unsere Widget-Dokumentation, AI-Regeln und Referenz-Implementierungen

  • **@ninox/ninox** – das offizielle Ninox-Tool zum Herunterladen deines Datenbankschemas

• arc-rider-init richtet danach automatisch die Projektstruktur ein:

  • **.cursor/rules/** – AI-Regeln für NinoxScript-Syntax und Widget-Properties

  • **docs/** – Die komplette Widget-Referenz (jedes Widget, jede Property, jeder gültige Wert)

  • **ninox/** – Hier kommt gleich dein Datenbankschema rein

  • **spaces/** – Hier landen deine Widget-Konfigurationen (z.B. spaces/dashboard/main.arc)

Das dauert einen Moment. Schau danach die Sidebar in Cursor an – du siehst die neuen Ordner.

Schritt 4: Ninox-Zugangsdaten konfigurieren

Jetzt verbinden wir das Setup mit deiner Ninox-Datenbank. Dafür brauchst du drei Dinge aus Ninox:

API-Key erstellen

1. Öffne deine Ninox-Instanz im Browser

2. Klicke oben rechts auf dein Profil-Icon

3. Gehe zu „Einstellungen" → „API Keys"

4. Klicke auf „Neuen API-Key erstellen"

5. Kopiere den Key und speichere ihn sicher – du brauchst ihn gleich für die Konfiguration

⚠️ Sicherheit: API-Keys geben vollen Zugriff auf deine Ninox-Daten. Teile sie niemals öffentlich, speichere sie nicht in Screenshots oder geteilten Dokumenten. Die config.yaml mit deinem Key liegt nur lokal auf deinem Rechner und wird nicht ins Git committed.

Domain, Workspace-ID und Datenbank-ID finden

Workspace-ID und Datenbank-ID findest du in der Browser-URL, wenn du deine Ninox-Datenbank öffnest:

Public Cloud (app.ninox.com):

• URL-Beispiel: https://app.ninox.com/#/teams/Xk7mNpQr2sT4wYz/database/a9b3c7d2e1f/

• Workspace-ID: Der Teil nach teams/ (z.B. Xk7mNpQr2sT4wYz)

• Datenbank-ID: Der Teil nach database/ (z.B. a9b3c7d2e1f)

• Domain in der Config: Immer https://api.ninox.com (nicht app.ninox.com – das ist nur die Web-Oberfläche)

Private Cloud (eigene Ninox-Instanz):

• URL-Beispiel: https://meinefirma.ninoxdb.com/#/teams/abc123/database/xyz789/

• Domain in der Config: Deine API-URL, z.B. https://meinefirma.ninoxdb.com

• Workspace-ID: Der Teil nach teams/ (z.B. abc123)

• Datenbank-ID: Der Teil nach database/ (z.B. xyz789)

  
  

Konfigurationsdatei ausfüllen

Die Datei ninox/config.yaml wurde bereits von arc-rider-init angelegt. Öffne sie in Cursor (Klick in der Sidebar) und trage deine Daten unter environments.dev ein:

environments:
  dev:
    # Public Cloud: immer https://api.ninox.com (nicht app.ninox.com!)
    domain: https://api.ninox.com

    apiKey: dein-api-key
    workspaceId: DEINE_WORKSPACE_ID

    databases:
      - id: "DEINE_DATENBANK_ID"
        name: "Mein Projekt"

Hinweis zur Domain: In der Browser-URL siehst du app.ninox.com – das ist die Web-Oberfläche. Für die API-Konfiguration verwendest du https://api.ninox.com (Public Cloud). Bei Private Cloud: https://deinefirma.ninoxdb.com oder deine eigene API-URL.

⚠️ Wichtig: Die config.yaml enthält deinen API-Key und wird nie weitergegeben oder hochgeladen – sie ist automatisch geschützt.

Schritt 5: Datenbankschema herunterladen

Jetzt kommt der magische Moment. Tippe im Terminal:

npm

Wenn du mehrere Datenbanken in der Config hast, erscheint ein Auswahlmenü – wähle die gewünschte Datenbank. Bei nur einer Datenbank wird sie automatisch gewählt. Optional kannst du eine bestimmte Datenbank mit --db=DEINE_DB_ID angeben.

Dieser Befehl lädt dein gesamtes Datenbankschema herunter – als lesbare Dateien auf deinem Computer. Danach findest du unter ninox/src/Objects/ für jede Tabelle eine Datei mit allen Feldern, Feldtypen und Relationen.

Was gerade passiert ist: Dein AI-Editor kann ab sofort diese Dateien lesen. Er kennt jetzt:

• Alle Tabellennamen (exakt so, wie sie in Ninox heißen)

• Alle Feldnamen und ihre Typen (Text, Zahl, Datum, Auswahl, Verknüpfung)

• Alle Relationen zwischen Tabellen

Keine halluzinierten Feldnamen mehr. Die AI weiß, dass dein Feld „Priorität" heißt – nicht „Priority".

Fertig! Dein erster Prompt

Öffne den Cursor Agent (Cmd+L auf Mac, Ctrl+L auf Windows) und probiere es aus:

Die AI erstellt daraufhin einen neuen Ordner spaces/dashboard/ mit einer main.arc-Datei – deinem Widget-Code. So sieht die Struktur aus:

Jedes Feature bekommt seinen eigenen Space – so bleiben deine Widget-Codes sauber organisiert. Das shared/-Verzeichnis nutzt du für Farben, Schriftarten und wiederverwendbare Bausteine, die in mehreren Spaces verwendet werden.

Was die AI jetzt automatisch tut:

1. Liest die AI-Regeln → kennt NinoxScript-Syntax (keine JavaScript-Fehler)

2. Liest dein Ninox-Schema → verwendet die exakten Feld- und Tabellennamen

3. Referenziert die Widget-Docs → erzeugt valide Widget-Konfigurationen

4. Nutzt Referenz-Implementierungen als Vorlage → konsistenter, bewährter Code

5. Speichert den Code in spaces/ → strukturiert nach Feature

Code in Ninox einfügen

Den generierten Code aus spaces/dashboard/main.arc bringst du nach Ninox:

1. Öffne die Datei spaces/dashboard/main.arc in Cursor

2. Markiere den gesamten Code (Cmd+A / Ctrl+A) und kopiere ihn (Cmd+C / Ctrl+C)

3. In Ninox ein Funktionsfeld öffnen (oder erstellen) – dort, wo das Widget erscheinen soll

4. Code einfügen

5. Fertig – das Widget erscheint

Fortgeschritten: Code per CLI pushen

Wenn du dich mit dem Terminal wohlfühlst, kannst du Code auch direkt aus Cursor nach Ninox pushen, ohne Copy & Paste. Dafür konfigurierst du ein Mapping in ninox/ninox-mapping.yaml und nutzt npm run ninox:push.

⚠️ Hinweis: Der Ninox CLI kann auch Schema-Änderungen hochladen (ninox:upload). Das verändert direkt deine Datenbankstruktur. Nutze diese Funktion nur, wenn du genau weißt, was du tust – Schema-Änderungen über den CLI können bei falscher Anwendung Daten gefährden. Für den normalen Widget-Workflow brauchst du nur ninox:download (lesen) und ninox:push (Code in ein Formelfeld schreiben).

Tipps für bessere Prompts

Sei spezifisch mit Tabellen und Feldern:

Referenziere bestehende Vorlagen:

Beschreibe das Design:

Iteriere schrittweise:

Häufige Fragen

Muss ich Programmieren können? Nein. Du beschreibst der AI auf Deutsch, was du willst. Sie schreibt den Code. Du musst nur den Prompt formulieren und den Code in Ninox einfügen.

Was ist npm? npm (Node Package Manager) ist ein Werkzeug, das mit Node.js mitkommt. Es funktioniert ähnlich wie ein App Store: Mit einem kurzen Befehl im Terminal lädst du Pakete (Software-Bausteine) herunter und installierst sie. Du brauchst npm nur für die Einrichtung – danach arbeitest du ganz normal in Cursor.

Brauche ich die kostenpflichtige Cursor-Version? Nein, die kostenlose Version reicht für den Einstieg. Die Pro-Version bietet mehr AI-Anfragen pro Monat.

Was passiert, wenn sich mein Schema ändert? Wenn du in Ninox Tabellen oder Felder hinzufügst oder änderst, führe einfach erneut npm run ninox:download --db=DEINE_DB_ID aus. Das Schema wird aktualisiert und die AI kennt die neuen Felder.

Funktioniert das auch ohne Arc Rider Widgets? Das ADK ist speziell für Arc Rider Widgets entwickelt. Ohne die Widgets fehlt der sogenannte Global Code in Ninox – das technische Fundament, auf dem die generierten Widget-Konfigurationen aufbauen. Du brauchst also ein aktives Widget-Abo. Falls du noch keine Widgets hast, kannst du sie hier bestellen: Arc Rider Widget Store

Zusammenfassung

Zwei Befehle im Terminal – der Rest passiert automatisch:

npm install @arcrider/developer-kit @ninox/ninox && npx arc-rider-init
npm

Dein AI-Editor kennt jetzt deine Datenbank, deine Widgets und die richtige Syntax.

Viel Spaß beim Bauen. 🌊