Ajouter un flux d'application

SDK du Répertoire des applis

Ajouter un flux d'application

1. Configurer les fichiers

Votre exemple d'application nécessite que le fichier suivant soit hébergé dans le répertoire racine du domaine :

  • my_app.html : page d'accueil du premier flux d'application de votre application sur le tableau de bord Hootsuite.

2. Créer un flux d'application

Pour créer un flux pour votre application dans My Apps :

  • Cliquez sur le nom de votre application
  • Cliquez sur New Stream
  • Donnez un titre à votre flux dans le champ « Title »
  • Spécifiez une icône comme image du flux (facultatif) :
    • Enregistrez l'image dans le répertoire racine du domaine
    • Pointez vers l'URL absolue de l'image dans le champ « Icon » sous « App Stream Image »
  • Pour spécifier l'URL utilisée pour charger votre flux d'application, entrez-la dans le champ de l'URL <iframe> (ex. https://localhost/app.html)
  • Cliquez sur Save

Vous avez désormais créé un flux pour votre application !

3. Configurer la bibliothèque JS

Afin de permettre à votre application d'envoyer et de recevoir des messages depuis et vers le tableau de bord Hootsuite, vous devez ajouter une référence à la partie du SDK du répertoire des applis qui est hébergée sur Hootsuite. Le fichier se trouve ici :

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

Pour référencer ce script, ajoutez le snippet HTML suivant en haut de la section <body> de votre fichier my_app.html :

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

4. Configurer les événements du tableau de bord de l'application

Dans le fichier my_app.html, initialisez l’API JS au moyen de la fonction hsp.init et définissez les paramètres hsp :

  • Comme chaîne apiKey, utilisez la clé API que vous avez récupérée et stockée précédemment 

Insérez ce code entre les balises de script HTML, dans la section <body> du fichier :

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

5. Ajouter du contenu

Ajoutez du contenu dans votre application. Dans le fichier my_app.html , en haut de la section <body> du document, insérez le code HTML suivant :

<h2>Ma première application</h2>

6. Installer un flux d'application

Dans votre tableau de bord Hootsuite :

  • Dans la barre de lancement, sélectionnez Tools > App Directory
  • Cliquez sur My Apps. Votre application doit apparaître dans le menu
  • Cliquez sur Install (au regard du nom de votre application)
  • Ajoutez le flux que vous avez créé pour votre application en suivant les instructions données à l'écran.

À ce stade, vous devez voir apparaître votre application dans un flux Hootsuite, associée à l'en-tête que vous avez ajouté à l'Étape 5. Le résultat doit ressembler à ceci :

myFirstApp.c13669b3

7. Envoyer des messages vers Hootsuite

Nous allons ajouter des fonctionnalités qui permettront à votre application de communiquer avec le tableau de bord Hootsuite. Pour cela, nous allons utiliser une fonction de base disponible dans hsp.js :

  • hsp.showUser(twitterHandle) : Ouvre un pop-up d'informations utilisateur pour le nom d'utilisateur Twitter spécifié. Prenons Hootsuite (@Hootsuite) comme exemple.

Le code doit être placé dans la section <body> du fichier my_app.html, juste après l'en-tête que vous avez ajouté à l'Étape 5. Le résultat doit ressembler à ceci (les balises de saut de ligne sont facultatives) :

<br /> <a href="#" onclick="hsp.showUser('hootsuite'); return false;">Afficher les informations @Hootsuite</a>

8. Recevoir des messages depuis Hootsuite

Nous allons vérifier si votre application peut recevoir des événements depuis le tableau de bord Hootsuite en utilisant la fonction hsp.bind() pour deux types d'événements :

  • refresh : se lance lorsque le flux d'application est actualisé.
  • dropUser : se lance lorsqu'un utilisateur fait un glisser-déposer d'un compte Twitter depuis le tableau de bord Hootsuite vers votre flux d'application.

Vous devez placer ces fonctions dans le fichier my_app.html, entre les balises de script utilisées pour hsp.init(), juste après la fonction créée à l'Étape 4.

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

window.location.reload() recharge la fenêtre des flux d'application et le dépôt d'un compte Twitter dans le flux d'application activera la fonction hsp.showUser(twitterHandle), décrite à l'Étape 7.

Une fois votre flux configuré, vous devez ajouter un plug-in d'application qui vous permettra d'étendre la palette des opérations réalisables sur les messages reçus dans le tableau de bord Hootsuite.