Projektstruktur

Projektstruktur

Jede UserApp besteht aus einer festen Dateistruktur, die per FTP auf den Knuddels-Server hochgeladen wird.

---

Minimale Struktur

meine-app/
├── main.js          # Server-seitige Logik (Pflicht)
├── app.config       # App-Konfiguration (Pflicht)
└── www/             # Frontend-Dateien (optional)
    └── index.html   # Haupt-HTML-Datei

---

main.js

Die Stammdatei für die serverseitige Logik. Hier definierst du App-Hooks, Chat-Befehle und die gesamte Backend-Logik. Diese Datei wird automatisch beim Start der App geladen.

Du kannst zusätzliche JavaScript-Dateien einbinden:

// Weitere Dateien laden
KnuddelsServer.require('utils.js');
KnuddelsServer.require('commands.js');

Wichtig: Auf dem Server läuft die Rhino Engine 1.9.1 im ES6-Modus. Viele ES6-Funktionen werden unterstützt, aber nicht der vollständige Standard. Informationen zur Kompatibilität findest du in der Rhino-Kompatibilitätstabelle. Im Frontend (www/) kannst du modernes JavaScript verwenden, da es im Browser des Clients läuft.

---

app.config

Die Konfigurationsdatei im Properties-Format definiert die Metadaten deiner App:

# Pflichtfelder
appName = MeineApp
appVersion = 1.0

# Automatisches Update bei Dateiänderung
autoUpdate = true

# Entwickler-Zuordnung (pro Server)
appDeveloper.knuddelsDEV = DeinNick
appDeveloper.knuddelsDE = DeinNick

# Wer darf die App installieren?
mayBeInstalledBy.1 = DeinNick.knuddelsDEV
mayBeInstalledBy.2 = DeinNick.knuddelsDE

Optionale Einstellungen

# Jeder auf dem Server darf die App installieren
mayBeInstalledBy.3 = *.knuddelsDE

# App funktioniert auch in Tochterchannels
multiChannel = true

# Direct Connection für schnellere Kommunikation (siehe Best Practices)
directConnection = knuddelsDE

# Apple Developer ID (nötig für iOS-Unterstützung)
appleDeveloperId = DEINE_APPLE_ID

Erklärung der Felder

Feld	Beschreibung
appName	Anzeigename der App
appVersion	Versionsnummer (frei wählbar)
autoUpdate	Bei true wird die App bei FTP-Upload automatisch aktualisiert
appDeveloper.<server>	Dein Nickname auf dem jeweiligen Server
mayBeInstalledBy.<n>	Liste von Nicknames, die die App installieren dürfen
multiChannel	Bei true funktioniert die App auch in Tochterchannels des Channels, in dem sie installiert ist
directConnection	Aktiviert Direct Connection für den angegebenen Server
appleDeveloperId	Nötig, damit die App unter iOS funktioniert

---

www/ – Frontend-Ordner

Enthält alle Client-seitigen Dateien: HTML, CSS, JavaScript, Bilder usw. Die Haupt-HTML-Datei wird serverseitig referenziert:

var htmlFile = new HTMLFile("index.html", pageData);

Der Pfad ist relativ zum www/-Ordner. Du kannst Unterordner verwenden:

www/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── app.js
└── img/
    └── logo.png

Tipp: Nutze Client.includeJS('js/app.js') und Client.includeCSS('css/style.css') um Dateien einzubinden, statt sie direkt im HTML zu referenzieren. Das vermeidet Cache-Probleme.

---

Zusätzliche Server-Dateien

Du kannst beliebige weitere .js-Dateien neben main.js anlegen und mit KnuddelsServer.require() laden:

meine-app/
├── main.js
├── commands.js       # Chat-Befehle
├── utils.js          # Hilfsfunktionen
├── game-logic.js     # Spiellogik
├── app.config
└── www/
    └── ...

// In main.js
KnuddelsServer.require('commands.js');
KnuddelsServer.require('utils.js');
KnuddelsServer.require('game-logic.js');

---

Shared-Ordner (Code zwischen Apps teilen)

Wenn du Code zwischen mehreren Apps teilen möchtest, bieten die App-Server zwei spezielle Ordner im FTP:

• ftp/shared/ → wird beim App-Start nach /shared/ kopiert (Server-Code)
• ftp/wwwShared/ → wird nach /www/shared/ kopiert (Frontend-Code)

ftp/
├── shared/
│   └── helpers.js          # Serverseitig: KnuddelsServer.require('shared/helpers.js')
├── wwwShared/
│   └── common-styles.css   # Client-seitig: im www/shared/ verfügbar
├── app1/
│   ├── main.js
│   └── www/index.html
└── app2/
    ├── main.js
    └── www/index.html

Beim Start von app1 sind dann im Runtime-Ordner verfügbar:

main.js
shared/helpers.js
www/index.html
www/shared/common-styles.css

---

Nächste Schritte

• App-Lifecycle – Wie deine App startet und auf Events reagiert
• Dev-Server – Die Entwicklungsumgebung nutzen

---

← Zurück zur Übersicht