Aggiungi uno stream dell'app

SDK dell'App Directory

Aggiungi uno stream dell'app

1. Impostazione dei file

La tua app di esempio necessita che il seguente file sia ospitato all'interno della root directory del tuo dominio:

  • my_app.html - La landing page del primo stream della tua app all'interno della dashboard di Hootsuite.

2. Creare uno stream dell'app

Per creare uno stream per la tua app in Le mie app:

  • Fai clic sul nome della tua app
  • Fai clic su Nuovo stream
  • Inserisci un titolo per il tuo stream nel campo 'Titolo'
  • Se lo desideri, fornisci un'icona che diventerà l'immagine dello stream:
    • Conserva questa immagine nella root directory del dominio
    • Punta all'URL assoluto dell'immagine nel campo 'Icona' in 'Immagine dello stream dell'app'
  • Per specificare l'URL utilizzato per caricare lo stream della tua app, digitalo nel campo <iframe> URL (ad esempio, https://localhost/app.html)
  • Fai clic su Salva

Hai creato uno stream per la tua app!

3. Impostazione della libreria JS

Per abilitare la tua app a inviare e ricevere messaggi da e verso la dashboard di Hootsuite, devi aggiungere un riferimento alla sezione dell'SDK dell'App Directory ospitata da Hootsuite. Tale file si trova qui:

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

Per fare riferimento a questo script, aggiungi il seguente snippet HTML al livello più alto della sezione <body> del tuo file my_app.html:

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

4. Impostazione eventi nella dashboard dell'app

In my_app.html, esegui l'inizializzazione di JS API utilizzando la funzione hsp.init e imposta i parametri hsp:

  • Come stringa apiKey utilizza l'API Key recuperata e archiviata in precedenza 

Inserisci questo codice tra tag HTML nella sezione <body> del file:

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

5. Aggiungi contenuti

Aggiungi dei contenuti alla tua app. Nel file my_app.html, al livello più alto della sezione <body> del documento, inserisci il seguente codice HTML:

<h2>La mia prima app</h2>

6. Installazione dello stream dell'app

All'interno della tua dashboard di Hootsuite:

  • Nella Barra di avvio, passa a Strumenti > App Directory
  • Fai clic su Le mie app. La tua app dovrebbe essere visualizzata nel menu
  • Fai clic su Installa (accanto al nome della tua app)
  • Aggiungi lo stream che hai creato per la tua app seguendo le istruzioni che appaiono sullo schermo.

A questo punto, dovresti vedere la tua app in uno stream di Hootsuite insieme all'intestazione che hai aggiunto durante il Passaggio 5.. Dovresti visualizzare qualcosa di simile a questo:

myFirstApp.c13669b3

7. Invia messaggi a Hootsuite

Aggiungiamo una funzionalità che permetterà alla tua app di comunicare con la dashboard di Hootsuite. Faremo ciò utilizzando una funzione base disponibile in hsp.js:

  • hsp.showUser(twitterHandle): Apre una finestra pop-up con le informazioni utente relative al nome utente di Twitter specificato. Possiamo utilizzare Hootsuite (@hootsuite) come esempio.

Il codice dovrebbe essere inserito nella sezione <body> di my_app.html, subito dopo il titolo aggiunto con il Passaggio 5.. Dovresti visualizzare qualcosa come questo (i tag di interruzione di linea sono facoltativi):

<br />
<a href="#" onclick="hsp.showUser('hootsuite'); return false;">Show @hootsuite info</a>

8. Ricevi messaggi da Hootsuite

Controlliamo che la tua app sia abilitata a ricevere eventi dalla dashboard di Hootsuite utilizzando la funzione hsp.bind() per due diversi tipi di evento:

  • refresh: Lanciato quando lo stream dell'app viene aggiornato.
  • dropUser: Lanciato quando un utente trascina e rilascia un account Twitter dalla dashboard di Hootsuite nello stream della tua app.

Posizioniamo questa funzione in my_app.html, tra i tag utilizzati per hsp.init(), subito dopo la funzione creata nel Passaggio 4.

hsp.bind('refresh', function() {
    window.location.reload();
});

hsp.bind('dropuser', function(username, tweetID) {
    hsp.showUser(username);
});

Dove window.location.reload() carica nuovamente le finestre degli stream dell'app, mentre il rilascio di un account di Twitter nello stream dell'app utilizza la funzione hsp.showUser(twitterHandle) descritta nel Passaggio 7.

Una volta impostato il tuo stream, è il momento di aggiungere un plug-in dell'app che ti consentirà di ampliare il set di azioni che è possibile compiere sui messaggi ricevuti nella dashboard di Hootsuite.