Claper installieren: Interaktive Präsentationen selbst hosten mit Docker

Langweilige, einseitige Vorträge? Das muss nicht sein. Stell dir vor, du könntest dein Publikum direkt in deine Präsentation einbinden – mit Live-Umfragen, einem interaktiven Quiz oder einer moderierten Q&A-Runde. Genau das ermöglicht Claper, ein Open-Source-Tool, das deine Vorträge zum Leben erweckt.

Während es einen gehosteten Dienst auf claper.co gibt, wollen wir hier die volle Kontrolle behalten und Claper auf unserem eigenen Server installieren. In dieser Anleitung zeige ich dir, wie du Claper mit Docker und Docker Compose aufsetzt und über einen Reverse Proxy sicher veröffentlichst.

Was ist Claper?

Claper ist ein Tool, das hilft, Vorträge interaktiver zu gestalten. Anstatt nur Folien zu zeigen, kannst du dein Publikum direkt einbeziehen. Die wichtigsten Funktionen sind:

• Fragen & Antworten (Q&A): Das Publikum kann Fragen einreichen, die du moderieren und live beantworten kannst.
• Quiz und Umfragen: Erstelle Multiple-Choice-Fragen oder offene Umfragen und zeige die Ergebnisse in Echtzeit an.
• Formulare: Sammle strukturiertes Feedback oder Informationen von den Teilnehmern.
• Webinhalte einbetten: Integriere externe Webseiten oder Videos direkt in deine Präsentation.
• Moderationswerkzeuge: Behalte die Kontrolle darüber, welche Inhalte für alle sichtbar sind.
• Berichte: Analysiere nach dem Vortrag das Engagement und die Ergebnisse.

Da es sich bei Claper um eine Open-Source-Software mit einer GNU v3.0 Lizenz handelt, können wir sie kostenlos auf unserem eigenen Server betreiben.

Schritt 1: Server-Vorbereitung und Docker-Installation

Ich setze für diese Anleitung voraus, dass du bereits einen laufenden Server mit Docker und Docker Compose hast. Falls nicht, hier die Kurzfassung:

1. Server und Domain: Du benötigst einen Server (z.B. einen VPS bei Hetzner oder Netcup) und eine Domain, die auf die IP-Adresse des Servers zeigt. Überprüfe das mit ping deine-domain.de. Mehr Details zur Ersteinrichtung findest du in meinem VPS-Grundlagen-Guide.

2. Mit dem Server verbinden:

   ssh dein-benutzer@DEINE_SERVER_IP

3. Docker installieren (falls noch nicht geschehen):

   # Abhängigkeiten installieren
   sudo apt-get update
   sudo apt-get install -y ca-certificates curl
   sudo install -m 0755 -d /etc/apt/keyrings
   sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
   sudo chmod a+r /etc/apt/keyrings/docker.asc
   
   # Repository hinzufügen und Docker installieren
   echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
   sudo apt-get update
   sudo apt-get install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

   Überprüfe die Installation mit docker --version und docker compose version.

Schritt 2: Claper mit Docker Compose installieren

Jetzt richten wir Claper ein. Wir orientieren uns an der compose.yaml aus dem offiziellen Claper GitHub-Repository.

Verzeichnisstruktur anlegen

Zuerst erstellen wir einen dedizierten Ordner für unser Claper-Projekt.

mkdir claper
cd claper

Falls du Probleme mit den Befehlen im Terminal hast, schau dir gerne meinen Blogpost zu den wichtigsten Terminal-Befehlen an.

Docker Compose und Konfigurationsdateien erstellen

Wir erstellen nun alle notwendigen Dateien und Ordner.

# Ordner für persistente Daten anlegen
mkdir db uploads

# Konfigurationsdateien erstellen
touch compose.yaml .env

Jetzt bearbeiten wir die compose.yaml-Datei mit einem Editor wie vim oder nano. Mit i wechselst du in Vim in den Insert-Mode.

vim compose.yaml

Kopiere den folgenden Inhalt hinein. Ich habe ihn bereits leicht angepasst:

services:
  db:
    image: postgres:16
    container_name: claper-db
    restart: unless-stopped
    volumes:
      - ./db:/var/lib/postgresql/data
    healthcheck:
      test:
        - CMD
        - pg_isready
        - "-q"
        - "-d"
        - "claper"
        - "-U"
        - "claper"
      retries: 3
      timeout: 5s
    environment:
      POSTGRES_PASSWORD: claper
      POSTGRES_USER: claper
      POSTGRES_DB: claper
    networks:
      - claper-net

  app:
    image: ghcr.io/claper-app/claper:2
    ports:
      - 4000:4000
    container_name: claper
    restart: unless-stopped
    volumes:
      - ./uploads:/app/uploads
    healthcheck:
      test: curl --fail http://localhost:4000 || exit 1
      retries: 3
      start_period: 20s
      timeout: 5s
    env_file: .env
    depends_on:
      db:
        condition: service_healthy
    networks:
      - claper-net

networks:
  claper-net:
    external: false

Anpassungen in der compose.yaml

• image: Ich habe die PostgreSQL-Version auf 16 und Claper auf Version 2 festgelegt. Das verhindert unerwartete “Breaking Changes” bei einem latest-Update.
• volumes: Ich habe die benannten Volumes durch Bind Mounts (./db und ./uploads) ersetzt. So liegen die Daten direkt in unserem Projektordner, was Backups vereinfacht.
• ports: Der Port 4000 wird freigegeben, damit wir Claper direkt erreichen können, bevor der Reverse Proxy konfiguriert ist.

Speichere die Datei mit :x und Enter.

Die .env-Datei konfigurieren

Jetzt kommt die wichtigste Konfigurationsdatei. Die env.sample aus dem Claper-Repository gibt uns die Vorlage.

vim .env

Füge diesen Inhalt ein und passe ihn an:

# Claper-Einstellungen
BASE_URL=http://DEINE_SERVER_IP:4000
DATABASE_URL=postgres://claper:claper@db:5432/claper
SECRET_KEY_BASE=DEIN_SEHR_GEHEIMER_SCHLUESSEL
PRESENTATION_STORAGE=local
PRESENTATION_STORAGE_DIR=/app/uploads

# Mail configuration

MAIL_TRANSPORT=local
MAIL_FROM=noreply@claper.co
MAIL_FROM_NAME=Claper

#SMTP_RELAY=xx.example.com
#SMTP_USERNAME=johndoe@example.com
#SMTP_PASSWORD=xxx
#SMTP_PORT=465

# SMTP-Einstellungen (Optional, für E-Mail-Funktionen)
# SMTP_HOST=
# SMTP_PORT=
# SMTP_USERNAME=
# SMTP_PASSWORD=
# SMTP_SENDER_EMAIL=

# Claper configuration
#ENABLE_ACCOUNT_CREATION=true

• SECRET_KEY_BASE: Ersetze dies durch eine lange, zufällige Zeichenkette. Du kannst eine mit openssl rand -base64 32 generieren.
• BASE_URL: Trage hier vorerst die IP-Adresse deines Servers und den Port 4000 ein.

Container starten

Jetzt sind wir bereit. Führe im claper-Verzeichnis aus:

sudo docker compose up -d

Beim ersten Start werden die Docker-Images heruntergeladen. Wenn alles geklappt hat, kannst du Claper unter http://DEINE_SERVER_IP:4000 im Browser aufrufen.

Schritt 3: Ersteinrichtung und Absicherung

Du solltest nun die Startseite von Claper sehen.

1. Benutzerkonto erstellen: Klicke auf “Anmeldung” und erstelle dein Admin-Konto.
2. Registrierung deaktivieren: Nach der Erstellung deines Kontos können sich auch andere Personen registrieren. Das wollen wir verhindern.
   • Stoppe die Container: sudo docker compose down
   • Bearbeite die .env-Datei: vim .env
   • Ändere #ENABLE_ACCOUNT_CREATION=true zu ENABLE_ACCOUNT_CREATION=false.
   • Starte die Container neu: sudo docker compose up -d

Schritt 4: Reverse Proxy mit Caddy einrichten (empfohlen)

Um Claper sicher über eine Domain mit HTTPS zu erreichen, ist ein Reverse Proxy die beste Lösung.

1. Netzwerk erstellen (falls noch nicht geschehen):

   sudo docker network create proxy

2. Caddy einrichten: Erstelle ein separates Verzeichnis für Caddy mit den nötigen Dateien. Eine detaillierte Anleitung dazu findest du in meinem Nextcloud-Tutorial. Hier die Kurzfassung:

   ~/caddy/docker-compose.yml:

   services:
     caddy:
       image: caddy:2
       container_name: caddy
       restart: unless-stopped
       ports: ["80:80", "443:443", "443:443/udp"]
       volumes: ["./Caddyfile:/etc/caddy/Caddyfile", "./data:/data", "./config:/config"]
       networks:
         - proxy
   networks:
     proxy:
       external: true

   ~/caddy/Caddyfile:

   claper.deine-domain.de {
       reverse_proxy claper:4000
   }

3. Claper für den Proxy anpassen:

   • Bearbeite die compose.yaml von Claper:
     • Füge claper und proxy zu den Netzwerken hinzu.
     • Entferne den ports-Abschnitt.
   • Bearbeite die .env-Datei von Claper:
     • Ändere die BASE_URL auf https://claper.deine-domain.de.

4. Alles starten:

   # Im Caddy-Verzeichnis
   sudo docker compose up -d
   
   # Im Claper-Verzeichnis
   sudo docker compose up -d

Jetzt solltest du Claper sicher unter deiner Domain erreichen, mit einem gültigen SSL-Zertifikat.

Praxis-Test: Eine interaktive Präsentation erstellen

Nachdem alles läuft, können wir Claper ausprobieren.

• Veranstaltung erstellen: Gib deiner Präsentation einen Namen und lade eine PDF- oder PowerPoint-Datei hoch.
• Teilnehmer einladen: Teile den angezeigten Code oder QR-Code mit deinem Publikum.
• Interaktionen hinzufügen:
  • Klicke auf “Interaktion hinzufügen”.
  • Erstelle eine Umfrage mit Ja/Nein-Antworten.
  • Füge ein Quiz hinzu und markiere die richtige Antwort.
  • Bette ein YouTube-Video oder eine andere Webseite ein.

Während deiner Präsentation kannst du die Interaktionen aktivieren und die Ergebnisse live anzeigen lassen. Teilnehmer können über ihr Smartphone Nachrichten und Reaktionen senden. Nach dem Vortrag steht dir ein detaillierter Bericht zur Verfügung.

Fazit

Claper ist ein unglaublich nützliches Tool, um Präsentationen und Vorträge auf das nächste Level zu heben. Die Installation mit Docker ist, wenn man die kleinen Hürden kennt, schnell erledigt. Mit einer selbst gehosteten Instanz behältst du die volle Kontrolle und kannst dein Publikum auf eine neue, interaktive Weise einbinden.