Skip to content

Erste Schritte

Jump to bottom
Marc Staebler edited this page Mar 24, 2026 · 6 revisions

Erste Schritte

Diese Anleitung führt dich Schritt für Schritt von der Registrierung als Entwickler bis zu deiner ersten laufenden UserApp.

Voraussetzungen

Bevor du loslegen kannst, brauchst du:

  1. Knuddels Desktop App – Download
  2. Knuddels-Account mit mindestens Status "Family Mitglied"
  3. Gültige Handynummer (zur Verifizierung)
  4. Gültige E-Mail-Adresse
  5. Akzeptierte Entwickler-AGB
  6. FTP-Programm – z.B. FileZilla
  7. Texteditor / IDE – z.B. Visual Studio Code

Entwicklerzugang aktivieren

  1. Logge dich in die Knuddels Desktop App ein
  2. Gib in einem beliebigen Channel den Befehl /apps developer ein
  3. Bestätige deine E-Mail-Adresse, Handynummer und die AGB
  4. Deine FTP-Zugangsdaten werden dir von James (dem Knuddels-Bot) zugeschickt

Tipp: Bewahre deine FTP-Zugangsdaten sicher auf. Bei Problemen mit den Zugangsdaten wende dich an hilfe.knuddels.de.

Deine erste App erstellen

1. Projektordner anlegen

Erstelle auf deinem Computer folgende Dateistruktur:

meine-erste-app/
├── main.js          # Server-Logik
├── app.config       # App-Konfiguration
└── www/
    └── index.html   # Frontend (HTML-UI)

2. app.config anlegen

Die app.config enthält die Metadaten deiner App:

appName = MeineErsteApp
appVersion = 1.0
autoUpdate = true
appDeveloper.knuddelsDEV = DeinNickname
appDeveloper.knuddelsDE = DeinNickname
mayBeInstalledBy.1 = DeinNickname.knuddelsDEV
mayBeInstalledBy.2 = DeinNickname.knuddelsDE

Hinweis: Ersetze DeinNickname durch deinen tatsächlichen Knuddels-Nicknamen.

3. main.js – Dein erster Server-Code

// Wird aufgerufen, wenn die App initialisiert wird
App.onInitApp = function() {
    KnuddelsServer.getDefaultLogger().info('App wurde gestartet!');
};

// Wird aufgerufen, wenn ein Nutzer den Channel betritt
App.onUserJoined = function(user) {
    user.sendPrivateMessage('Willkommen! Gib °>/meineApp|Klick hier<° ein, um die App zu öffnen.');
};

// Chat-Befehl zum Öffnen der App
App.chatCommands.meineApp = function(user, params, func) {
    var htmlFile = new HTMLFile("index.html", {});
    var popup = AppContent.popupContent(htmlFile, 400, 300);
    popup.setResponsive(true);

    if (user.canShowAppViewMode(AppViewMode.Popup)) {
        user.sendAppContent(popup);
    } else {
        user.sendPrivateMessage("Die App kann auf deinem Gerät leider nicht angezeigt werden.");
    }
};

4. www/index.html – Dein erstes Frontend

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: #f0f0f0;
        }
        .container {
            text-align: center;
            padding: 20px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            background: #4CAF50;
            color: white;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Meine erste App!</h1>
        <p id="status">Verbindung zum Server...</p>
        <button onclick="ping()">Ping senden</button>
    </div>
    <script>
        // pageData enthält die Daten, die der Server beim Öffnen mitgeschickt hat
        var pageData = {};
        if (typeof Client !== 'undefined') {
            pageData = Client.pageData;
        }

        document.getElementById('status').textContent = 'Verbunden!';

        function ping() {
            if (typeof Client !== 'undefined' && Client.sendEvent) {
                Client.sendEvent('ping', {});
            }
        }

        // Events vom Server empfangen
        if (typeof Client !== 'undefined') {
            Client.addEventListener("pong", function(event) {
                document.getElementById('status').textContent = 'Pong erhalten!';
            });
        }
    </script>
</body>
</html>

5. Server-seitig auf den Ping reagieren

Füge in main.js folgende Zeile hinzu:

App.onEventReceived = function(user, type, data, appContentSession) {
    if (type === "ping") {
        if (appContentSession) {
            appContentSession.sendEvent('pong', { success: true });
        }
    }
};

App hochladen und installieren

Per FTP hochladen

  1. Öffne FileZilla und verbinde dich mit den erhaltenen FTP-Zugangsdaten
  2. Lade den gesamten Projektordner auf den Server hoch

App installieren

  1. Gehe in deinen eigenen MyChannel (oder erstelle einen)
  2. Gib /apps ein
  3. Klicke auf "App installieren"
  4. Beim ersten Installieren musst du einen AppBot anlegen – gib ihm einen beliebigen Namen
  5. Fertig! Deine App läuft

Entwicklungsworkflow

Der empfohlene Ablauf für die Entwicklung:

  1. Lokal entwickeln – Ändere deine Dateien in deinem Editor
  2. Per FTP hochladen – Lade die geänderten Dateien auf den Server
  3. App aktualisieren – Gib /apps ein und klicke auf "update/restart"
  4. Testen – Teste die Änderungen im Channel

Wichtig: Nutze den Dev-Server zum Entwickeln und Testen. Auf dem Live-Server (DE) solltest du nur stabile Versionen installieren. Mehr dazu unter Dev-Server.

Nächste Schritte

← Zurück zur Übersicht

Navigation

Einstieg

Kernkonzepte

Features

Tutorials

Referenz & Hilfe

Clone this wiki locally