Hinzufügen eines App-Streams

App-Verzeichnis-SDK

Hinzufügen eines App-Streams

1. Dateieinrichtung

Für die Beispiel-App muss die folgende Datei im Stammverzeichnis Ihrer Domain gehostet werden:

  • my_app.html: Die Landing-Page für den ersten App-Stream Ihrer App im Hootsuite Dashboard.

2. Erstellen eines App-Streams

So erstellen Sie einen Stream für Ihre App unter Meine Apps:

  • Klicken Sie auf den Namen Ihrer App.
  • Klicken Sie auf Neuer Stream.
  • Geben Sie einen Titel für den Stream im Feld Titel ein.
  • Sie können optional ein Symbol als Bild für den Stream angeben:
    • Speichern Sie dieses Bild im Stammverzeichnis der Domain.
    • Verweisen Sie auf die absolute URL des Bildes im Feld Symbol unter App-Stream-Bild.
  • Um die zum Laden des App-Streams verwendete URL anzugeben, geben Sie diese in das Feld <iframe> URL ein (z. B. https://localhost/app.html).
  • Klicken Sie auf Speichern.

Sie haben nun einen Stream für Ihre App erstellt.

3. Einrichtung der JS-Bibliothek

Damit Ihre App Nachrichten an das Hootsuite Dashboard senden und von diesem empfangen kann, müssen Sie dem von Hootsuite gehosteten Teil des App-Verzeichnis-SDKs eine Referenz hinzufügen. Diese Datei befindet sich hier:

https://d2l6uygi1pgnys.cloudfront.net/jsapi/2-0/hsp.js

Um dieses Skript zu referenzieren, fügen Sie den folgenden HTML-Ausschnitt oben im Abschnitt <body> der Datei my_app.html hinzu:

<script src="https://d2l6uygi1pgnys.cloudfront.net/jsapi/2-0/hsp.js"></script> 

4. Einrichten des App-Dashboard-Events

Initialisieren Sie die JS-API in my_app.html mit der Funktion hsp.init, und stellen Sie die hsp-Parameter ein:

  • Verwenden Sie den zuvor abgerufenen und gespeicherten API-Schlüssel als apiKey-String. 

Fügen Sie diesen Code zwischen HTML-Skript-Tags im Abschnitt <body> der Datei ein:

<script> hsp.init({ }); </script>

5. Hinzufügen von Inhalten

Fügen Sie Inhalte zu Ihrer App hinzu. Fügen Sie in der Datei my_app.html oben im Abschnitt <body> die folgende HTML hinzu:

<h2>Meine erste App</h2>

6. App-Stream-Installation

In Ihrem Hootsuite Dashboard:

  • Rufen Sie in der Startleiste die Option Tools > App-Verzeichnis auf.
  • Klicken Sie auf Meine Apps. Ihre App sollte im Menü angezeigt werden.
  • Klicken Sie neben dem Namen Ihrer App auf Installieren.
  • Fügen Sie den für die App erstellten Stream entsprechend den Anweisungen auf dem Bildschirm hinzu.

Jetzt sollte die App in einem Hootsuite-Stream mit der in Schritt 5 hinzugefügten Überschrift angezeigt werden. Dies sollte in etwa folgendermaßen aussehen:

myFirstApp.c13669b3

7. Senden von Nachrichten an Hootsuite

Fügen wir Funktionen hinzu, über die Ihre App mit dem Hootsuite Dashboard kommunizieren kann. Dafür verwenden wir eine grundlegende Funktion in hsp.js:

  • hsp.showUser(twitterHandle): Öffnet ein Benutzerinfo-Popup für den angegebenen Twitter-Benutzernamen. Verwenden wir Hootsuite (@hootsuite) als Beispiel.

Der Code muss im Abschnitt <body> von my_app.html direkt nach der inSchritt 5 eingefügten Überschrift eingegeben werden. Dies sollte in etwa folgendermaßen aussehen (Zeilenumbruch-Tags sind optional):

<br /> <a href="#" onclick="hsp.showUser('hootsuite'); return false;">Anzeigen von @hootsuite-Info</a>

8. Empfangen von Nachrichten von Hootsuite

Prüfen wir, ob Ihre App Events vom Hootsuite Dashboard über die Funktion hsp.bind() für zwei unterschiedliche Event-Typen empfangen kann:

  • refresh: Wird ausgelöst, wenn der App-Stream aktualisiert wird.
  • dropUser: Wird ausgelöst, wenn ein Benutzer ein Twitter-Konto aus dem Hootsuite Dashboard in Ihren App-Stream zieht.

Wir fügen diese Funktion in my_app.html zwischen die für hsp.init() verwendeten Skript-Tags direkt hinter der in Schritt 4 erstellten Funktion ein.

hsp.bind('refresh', function() { window.location.reload(); }); hsp.bind('dropuser', function(username, tweetID) { hsp.showUser(username); });

Dabei wird mit window.location.reload() das Fenster des App-Streams neu geladen und für das Ziehen eines Twitter-Kontos in den App-Stream wird die in Schritt 7 beschriebene Funktion hsp.showUser(twitterHandle) verwendet.

Nachdem der Stream eingerichtet ist, können Sie mit dem Hinzufügen eines App-Plug-ins fortfahren, mit dem Sie den Umfang der Aktionen erweitern können, die für im Hootsuite Dashboard empfangene Nachrichten ausgeführt werden können.