Adicionar um fluxo de aplicativo

SDK do Diretório de Aplicativos

Adicionar um fluxo de aplicativo

1. Configuração de arquivo

Seu aplicativo de exemplo precisa do seguinte arquivo hospedado no diretório raiz do domínio:

  • my_app.html - A página de destino do primeiro fluxo de aplicativo no painel da Hootsuite.

2. Criar um fluxo de aplicativos

Para criar um fluxo para seu aplicativo em Meus Aplicativos:

  • Clique no nome do aplicativo
  • Clique em Novo Fluxo
  • Insira um título para o fluxo no campo 'Título'
  • Opcionalmente, insira um ícone que sirva de imagem para o fluxo:
    • Armazene essa imagem no diretório raiz do domínio
    • Aponte para o URL absoluto da imagem no campo 'Ícone' em 'Imagem do Fluxo de Aplicativo'
  • No campo <iframe> URL, especifique o URL usado para carregar o fluxo de aplicativo, (por exemplo, https://localhost/app.html)
  • Clique em Salvar

Você criou um fluxo para seu aplicativo!

3. Configurações da biblioteca JS

Para que seu aplicativo possa enviar e receber mensagens no painel da Hootsuite, você precisará adicionar uma referência ao trecho hospedado da Hootsuite no SDK do Diretório de Aplicativos. O arquivo fica em:

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

Para fazer referência a esse script, adicione o seguinte snippet HTML à parte superior da seção <body> de seu arquivo my_app.html:

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

4. Configuração de evento para aplicativo-painel

Em my_app.html, inicialize a API JS usando a função hsp.init e defina os parâmetros hsp:

  • Como a string apiKey usa a API Key obtida e armazenada anteriormente 

Insira esse código entre tags do script HTML, na seção <body> do arquivo:

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

5. Adicionar conteúdo

Adicione algum conteúdo a seu aplicativo. No arquivo my_app.html, na parte superior da seção <body> do documento, insira este HTML:

<h2>Meu primeiro aplicativo</h2>

6. Instalação do fluxo de aplicativo

No painel da Hootsuite:

  • Na barra de inicialização, vá até Ferramentas > Diretório de Aplicativos
  • Clique em Meus Aplicativos. Seu aplicativo aparecerá no menu
  • Clique em Instalar (ao lado do nome de seu aplicativo)
  • Adicione o fluxo criado para seu aplicativo seguindo as instruções na tela.

Nesse ponto, você deverá ver seu aplicativo em um fluxo da Hootsuite com o título adicionado na Etapa 5. Ele deve ter uma aparência semelhante a esta:

myFirstApp.c13669b3

7. Enviar mensagens para a Hootsuite

Vamos adicionar uma funcionalidade que permitirá que seu aplicativo se comunique com o painel da Hootsuite. Faça isso usando uma função básica disponível em hsp.js:

  • hsp.showUser(twitterHandle): Abre uma janela pop-up com informações referentes ao nome de usuário especificado no Twitter. Vamos usar a Hootsuite (@hootsuite) como exemplo.

O código deve ser inserido na seção <body> de my_app.html, logo após o título adicionado na Etapa 5.. Ele deve ter uma aparência semelhante a esta (as tags de quebra de linha são opcionais):

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

8. Receber mensagens da Hootsuite

Vamos verificar se seu aplicativo pode receber eventos no painel da Hootsuite usando a função hsp.bind() para dois tipos diferentes de eventos:

  • refresh: acionado quando o fluxo de aplicativos é atualizado.
  • dropUser: acionado quando o usuário arrasta e solta uma conta do Twitter do painel da Hootsuite e em seu fluxo de aplicativo.

Colocaremos essas funções em my_app.html, entre as tags do script usadas para hsp.init(), logo após a função criada na Etapa 4.

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

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

Onde window.location.reload() recarrega a janela do fluxo de aplicativo, e a função hsp.showUser(twitterHandle) descrita na Etapa 7 será usada para soltar uma conta do Twitter no fluxo de aplicativo.

Depois que fluxo estiver configurado, é hora de adicionar um plug-in de aplicativo que permita estender o conjunto de ações que podem ser executadas nas mensagens recebidas no painel da Hootsuite.