Allgemein

Mittels unserer HTML5 Apps Funktion können eigene Webanwendungen in sklera integriert und verwendet werden. Die App wird als ZIP Datei wie gewohnt in die Mediathek hochgeladen und anschließend auf den Playern offlinefähig verteilt. Zur einfachen Kommunikation der Apps mit unserer Player Anwendung wird eine Javascript Bibliothek bereitgestellt.


Aufbau einer App

Eine App sollte zumindest folgende Grundstruktur aufweisen:


manifest.json

index.html

img/thumb.jpg

img/snap.jpg

js/sklera-sdk-VERSION.js


In der manifest.json Datei wird der Name, die Versionsnummer und zwei Vorschaubilder für das CMS angegeben. Die Vorschaubilder müssen ebenfalls im Ziparchiv enthalten sein.


Zusätzliche Javascript, CSS oder Mediendateien können selbstverständlich im Zip eingebunden werden.


App Manifest

Die manifest.json Datei beschreibt die jeweilige App im JSON Format nach folgender Struktur:


{
  "manifest_version": 1,
  "name": "Hello World",
  "short_name": "Hello World",
  "description": "Example Hello World App",
  "author": "sklera GmbH",
  "version": "0.0.2",
  "offline_enabled": true,
  "thumbnail": "img/thumb_320x180.jpg",
  "snapshot": "img/snap_1280x720.jpg",
  "config": [
    {
      "name": "de_hello_world",
      "label": "Hello World Text (German)",
      "type": "string"
    },
    {
      "name": "en_hello_world",
      "label": "Hello World Text (English)",
      "type": "string"
    },
    {
      "name": "show_dark_mode",
      "label": "Show Dark mode",
      "type": "boolean"
    },
    {
      "name": "color",
      "label": "Language text color",
      "type": "select",
      "values": ["red", "green", "blue", "white", "black"],
      "desc": "Select a Textcolor"
    },
    {
      "name": "language",
      "label": "Language Select",
      "type": "select",
      "values": [
        { "label": "German", "value": "de" },
        { "label": "English", "value": "en" }
      ],
      "desc": "Select a language"
    }
  ]
}


App Settings

Konfigurationswerte für die App können im Manifest unter dem Key "config" wie im obigen Beispiel ersichtlich definiert werden.


Im sklera CMS können zu einer solchen App benutzerdefinierte Werte unter dem Menüpunkt "App Settings" in der Mediathek, Spot oder Layout-Widget abgespeichert werden:





Auf die konfigurierten Werte kann in der App entweder über die SDK Methode getConfig zugegriffen werden oder alternativ werden diese als zweiter Parameter der loaded Callback Funktion mit übergeben.


sklera Javascript SDK

Zur Kommunikation mit unserer Playeranwendung wird eine Javascript Bibliothek bereitgestellt, welche in der App eingebunden werden kann um zusätzliche Features zu verwenden.


Es stehen unter anderem folgende Aktionen zur Verfügung:

  • Auslesen von Playerdaten wie Name, Adresse, Postleitzahl
  • Pausieren und Fortsetzen des Players
  • Anzeige und Verbergen der App
  • Anzeige und Verbergen eines Layoutwidgets
  • Abspeichern und Auslesen von Textdaten am Player

Das SDK wird unter folgenden Link inklusive Dokumentation und einer Beispiel App in der aktuellsten Version bereitgestellt:

https://sklera.tv/js-sdk