Referenz
Headless CMS und HbbTV-App für Bibel TV
Bibel TV · Medien & Rundfunk · seit 2021
Drupal als Headless CMS, HbbTV-App mit React
Projekt
Ausgangslage
Bibel TV ist ein christlicher Fernsehsender mit Sitz in Hamburg. Auf Smart-TVs erreicht der Sender seine Zuschauer auch über HbbTV, also über eine Anwendung, die direkt auf dem Fernseher läuft. Diese Anwendung sollte von Grund auf erneuert werden.
Aufgabe
Gefragt waren zwei Dinge: ein Backend auf Basis von Drupal und eine neu gestaltete HbbTV-App mit einem aktuellen Frontend-Framework.
Die Daten für die App liegen in verschiedenen Systemen des Senders. Videos und ihre Metadaten kommen aus einer Video-Plattform, das Programm aus einer Programmdaten-Schnittstelle. Die App braucht diese Daten in einer einheitlichen, schlanken Struktur, und sie braucht sie schnell, denn Fernseher haben wenig Rechenleistung. Dazu kommen Inhalte, die es nur in der App gibt und die die Redaktion selbst pflegen soll.
Lösung
Drupal als Headless CMS. Drupal hat hier keine öffentliche Website. Es ist nur für angemeldete Benutzer erreichbar und dient der Redaktion als Arbeitsplatz für die App.
Eigene Inhaltstypen für die App. Drei Inhaltstypen steuern, was auf dem Fernseher erscheint:
- Switch-ins: Bilder, die die App täglich zu festen Uhrzeiten oder in einem festgelegten Zeitraum einblendet, dazu ein Standardbild. Einzelne Einblendungen lassen sich auf Samsung-Geräte beschränken.
- Werbeclips: Pre- und Postrolls, wahlweise für ein bestimmtes Video, eine ganze Serie, den Blue Button oder alle Inhalte.
- Ein Text für die Startseite der App.
Die Formulare zeigen nur die Felder, die zur jeweiligen Auswahl passen. Zeitfelder erscheinen zum Beispiel nur bei täglichen Einblendungen.
JSON-Dateien statt Live-Abfragen. Jeder Inhaltstyp hat ein eigenes Drupal-Modul. Speichert die Redaktion einen Eintrag, schreibt ein Export-Service alle veröffentlichten Einträge als JSON-Datei ins öffentliche Dateisystem. Bilder bringt ein eigener Bildstil dabei auf das Format für den Fernseher. Die App lädt nur diese Dateien. Drupal muss für den Abruf nicht starten, die Last auf dem Server bleibt gering.
Schnittstellenschicht zu den Quellsystemen. Neben Drupal läuft eine schlanke PHP-Schicht, über die die App mit den Systemen des Senders spricht:
- ein GraphQL-Endpunkt, der Abfragen der App an die Video-Plattform weiterreicht
- REST-Endpunkte für den elektronischen Programmführer (EPG): das Tagesprogramm eines Senders, zwei Sender nebeneinander, ein Zeitfenster über mehrere Sender und die gerade laufende Sendung
- ein Endpunkt für Standortabfragen der App
Die Schicht reduziert die Programmdaten auf das, was die App braucht: Titel, Sendezeiten, Genre, Produktionsland und -jahr, Bilder, Video und Personen. Ausgegeben wird alles einheitlich als JSON.
Caching und Zeitlimits. Programmdaten und die laufende Sendung werden mit Symfony Cache für eine festgelegte Zeit zwischengespeichert. So fragt nicht jeder Fernseher die Quellsysteme direkt ab. Feste Zeitlimits für alle externen Aufrufe sorgen dafür, dass ein langsames Quellsystem die App nicht aufhält.
HbbTV-App mit React. Die App bündelt eine Mediathek mit eigenem HbbTV-Videoplayer und VAST-Anbindung zur Werbeausspielung, den Programmführer, eine dynamische Suche und vier zusätzliche Livestreams.
Redaktion. Die Redaktion arbeitet im Admin-Theme Gin mit einer eigenen Rolle und der Media-Bibliothek. Titel lassen sich automatisch aus der ersten Überschrift im Text erzeugen.
Betrieb. Das System läuft als Docker-Container mit PHP 8.3 und Apache. GitLab CI baut für jede Umgebung ein eigenes Image, für Stage, Integration und Live. Beim Start installiert der Container die Abhängigkeiten per Composer, führt Datenbank-Updates aus und importiert die versionierte Konfiguration. Eine tägliche Sicherung läuft über Backup and Migrate.
Die Rolle von RedOrbit
RedOrbit hat das Projekt beraten und konzipiert, das Headless CMS aufgesetzt, die eigenen Drupal-Module und die Schnittstellenschicht entwickelt und die HbbTV-App gebaut. Zum Projekt gehörte auch eine Schulung.
Seit dem Start 2021 betreuen wir das System laufend. 2025 haben wir es schrittweise auf Drupal 11 gehoben: erst die Contrib-Module und die eigenen Module vorbereitet, dann den Core aktualisiert und PHP 8.3 eingeführt. 2026 folgten ein neues Basis-Image, Zeitlimits für die externen Aufrufe und eine Korrektur, damit Einblendungen auch nach der Zeitumstellung zur richtigen Uhrzeit erscheinen.
Ergebnis
Bibel TV hat ein zentrales System für alles, was die App selbst steuert, und eine einheitliche Schnittstelle zu den Daten aus Video-Plattform und Programmdaten. Die Fernseher laden schlanke JSON-Dateien und zwischengespeicherte Daten statt die Quellsysteme direkt abzufragen. Die Zuschauer bekommen eine App, die Mediathek, Programm, Suche und Live-Angebot an einer Stelle bündelt. Das Projekt läuft seit 2021 und ist heute auf Drupal 11.
Einblicke
Technik
- Drupal 11 als Headless CMS, nur für die Redaktion erreichbar
- Drei eigene Drupal-Module mit JSON-Export für die App
- Inhaltstypen für Switch-ins, Werbeclips und Startseitentext
- GraphQL-Endpunkt zur Video-Plattform des Senders
- REST-Endpunkte für Programmführer und laufende Sendung
- Symfony Cache und Zeitlimits für externe Aufrufe
- HbbTV-App mit React, Videoplayer mit VAST-Anbindung
- Docker mit PHP 8.3 und Apache, GitLab CI für Stage, Integration, Live
- Gin, Media-Bibliothek, Backup and Migrate, Pathauto