Adición de una columna de aplicaciones

SDK del directorio de aplicaciones

Adición de una columna de aplicaciones

1. Configuración de archivos

La aplicación de muestra precisará que el siguiente archivo se encuentre alojado en el directorio raíz de su dominio:

  • my_app.html: la página de destino de la primera columna de aplicaciones de la aplicación en el panel de control de Hootsuite.

2. Creación de una columna de aplicaciones

Si desea crear una columna para su aplicación en My Apps (Mis aplicaciones), siga estos pasos:

  • Haga clic en el nombre de su aplicación.
  • Haga clic en New Stream (Nueva columna).
  • Inserte un título para su columna en el campo de título.
  • También puede asignarle a la columna un icono como imagen representativa:
    • Almacene esta imagen en el directorio raíz del dominio.
    • Escriba la URL absoluta de la imagen en el campo de icono que se encuentra en "App Stream Image" (Imagen de la columna de aplicaciones).
  • Para especificar la URL utilizada para cargar su columna de aplicaciones, escríbala en el campo de <iframe> URL (por ejemplo, https://localhost/app.html)
  • Haga clic en Save (Guardar).

Ya ha creado una columna para su aplicación.

3. Configuración de la biblioteca JavaScript

Para que su aplicación pueda enviar y recibir mensajes con el panel de control de Hootsuite como origen y destino, tendrá que agregar una referencia a la parte del SDK del directorio de aplicaciones que se encuentra alojada en Hootsuite. Aquí se encuentra el archivo:

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

Para hacer referencia a este script, agregue el siguiente fragmento HTML en la parte superior de la sección <body> (cuerpo) del archivo my_app.html:

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

4. Configuración de eventos entre el panel de control y la aplicación

En my_app.html, inicie la API de JavaScript utilizando la función hsp.init y establezca los parámetros de hsp.

Inserte este código entre las etiquetas HTML de script, que se encuentran en la sección <body> (cuerpo) del archivo:

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

5. Adición de contenido

Agregue contenido a su aplicación. En la parte superior de la sección <body> (cuerpo) del archivo my_app.html, inserte el siguiente código HTML:

<h2>Mi primera aplicación</h2>

6. Instalación de columnas de aplicaciones

Siga estos pasos en el panel de control de Hootsuite:

  • En la barra de inicio, vaya a Tools (Herramientas) > App Directory (Directorio de aplicaciones).
  • Haga clic en My Apps (Mis aplicaciones). Su aplicación debería aparecer en el menú.
  • Haga clic en Install (Instalar); esta opción se encuentra junto al nombre de la aplicación.
  • Agregue la columna que ha creado para la aplicación siguiendo las instrucciones que aparecen en pantalla.

En este punto, debería ver que su aplicación aparece en una columna de Hootsuite con el título que agregó en el paso 5.. Debe mostrarse algo similar a esto:

myFirstApp.c13669b3

7. Envío de mensajes a Hootsuite

Agreguemos la funcionalidad que permite que su aplicación se comunique con el panel de control de Hootsuite. Para ello, usaremos una función básica que está disponible en hsp.js:

  • hsp.showUser(twitterHandle): Abre una ventana emergente con información del usuario correspondiente al nombre de usuario en Twitter especificado. Utilicemos Hootsuite (@hootsuite) como ejemplo.

El código debe colocarse en la sección <body> (cuerpo) del archivo my_app.html, justo después del título que agregó en el paso 5. Debe mostrarse algo similar a esto (el uso de etiquetas de saltos de línea es opcional):

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

8. Recepción de mensajes de Hootsuite

Comprobemos si la aplicación está habilitada para recibir eventos desde el panel de control de Hootsuite utilizando la función hsp.bind() en dos tipos de eventos distintos:

  • refresh: se inicia cuando se actualiza la columna de aplicaciones.
  • dropUser: se inicia cuando un usuario arrastra una cuenta de Twitter desde el panel de control de Hootsuite y la suelta en la columna de aplicaciones.

Colocaremos estas funciones en el archivo my_app.html, entre las etiquetas de script empleadas para hsp.init(), justo después de crear dichas funciones en el paso 4.

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

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

window.location.reload() vuelve a cargar la ventana de las columnas de aplicaciones y, al soltar una cuenta de Twitter en la columna de aplicaciones, se utilizará la función hsp.showUser(twitterHandle) descrita en el paso 7.

Cuando haya terminado de configurar la columna, tendrá que agregar un complemento de aplicaciones que le permitirá ampliar el conjunto de acciones que pueden realizarse en los mensajes recibidos en el panel de control de Hootsuite.