Adicionar um plug-in de aplicativo

SDK do Diretório de Aplicativos

Adicionar um plug-in de aplicativo

1. Pré-requisitos

Para completar essa seção, você precisará adicionar uma conta do Twitter ou do Facebook a seu perfil na Hootsuite.

2. Configuração de arquivo

O plug-in de seu aplicativo de exemplo precisará dos seguintes arquivos novos hospedados no diretório raiz do domínio:

  • my_plugin.html - Este arquivo será chamado quando os usuários da Hootsuite interagirem com o plug-in
  • my_handler.html - Este arquivo representa a página externa com a qual o plug-in interage

3. Criar um plug-in de aplicativo

Para criar um plug-in para seu aplicativo em Meus Aplicativos:

  • Clique no nome do aplicativo
  • Clique em Novo Plug-in
  • Insira o título 'Meu Plug-in da Hootsuite' no campo 'Título'
  • Insira 'Abrir pop-up' como item de menu do plug-in no campo 'Texto do item de menu'
  • Opcionalmente, insira um ícone que sirva de imagem do plug-in:
    • Armazene essa imagem no diretório raiz do domínio.
    • Aponte para o URL absoluto da imagem no campo 'Ícone' em 'Imagem do Plug-in de Aplicativo'
  • Para especificar o URL usado para carregar o plug-in de aplicativo, digite-o no campo <iframe> URL (por exemplo, https://localhost/app.html)
  • Clique em Salvar

Você criou um plug-in para seu aplicativo.

4. Instalação do plug-in 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) 
  • Na guia 'Plug-ins de Aplicativos', procure o plug-in criado na Etapa 3 e clique em Instalar

O plug-in agora está corretamente instalado.

5. Configurações da biblioteca JS

Você já poderá editar seu arquivo my_plugin.html para permitir a comunicação entre o plug-in e o painel da Hootsuite. Assim como na seção Adicionar um fluxo de aplicativo, você precisará adicionar uma referência ao trecho hospedado da Hootsuite no SDK do Diretório de Aplicativos. O arquivo está aqui:

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

Adicione <html> tags de abertura e fechamento à parte superior de my_plugin.html, tags de quebra de linha de abertura <head> e <body> tags de abertura e fechamento. Dentro das tags <body>, adicione uma referência ao script hsp.js. Isso aparece no seguinte snippet HTML:

<html>
  <head>
  </head>
  <body>
    <script src="<span id="docs-internal-guid-f48918a6-56a1-3cef-4945-6e24793fa005"><span>https://d2l6uygi1pgnys.cloudfront.net/jsapi/2-0/hsp.js</span></span>"></script>
  </body>
</html>

6. Configuração de jQuery

Para usar a camada de comunicação que criamos, usaremos o jQuery. Logo após a referência a hsp.js na seção <body> de my_plugin.html adicionada na Etapa 3, inclua esta linha:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

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

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

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

<script>
  $(document).ready(function() {
    var hsp_params = {
        };

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

8. Implementação da função do item de menu do plug-in

Como mencionado na Etapa 3, inserimos 'Abrir pop-up' como o Texto do Item de Menu do plug-in. Neste guia de início rápido, queremos que o plug-in abra uma janela pop-up com informações sobre a mensagem específica selecionada no painel.

Primeiramente, temos que criar uma função que obterá informações para a janela pop-up e as enviará codificadas no URL para my_handler.html. Insira o seguinte código my_plugin.html antes do evento .ready inserido na Etapa 8 e considerando que <YOUR DOMAIN> é o domínio local:

function sendToAppHandler(message) {
  var messageId = "messageId=" + encodeURIComponent(message.post.id);
  var datetime  = "&datetime=" + encodeURIComponent(message.post.datetime);
  var message   = "&message=" + encodeURIComponent(message.post.content.body);
  var handler = 'https://<YOUR DOMAIN>/my_handler.html?' + messageId + datetime + message;

  hsp.showCustomPopup(handler, 'App Plugin popup');
}

9. Configuração de manipulador de aplicativo

Em my_handler.html, queremos exibir as informações da mensagem recebida. Para isso, desenvolvemos uma função para ler os parâmetros que estão sendo passados no URL e depois imprimimos cada um. my_handler.html deve ter a seguinte aparência:

<html>
  <head>
  </head>
  <body>
    <script>
      function getQuerystring (key) {
        key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regex = new RegExp("[\\?&]"+key+"=([^]*)");
        var qs = regex.exec(location.search);
        return qs[1];
      }

      document.write('Message ID: ' + decodeURIComponent(getQuerystring('messageId')) + '<br />');
      document.write('Date & Time: ' + decodeURIComponent(getQuerystring('datetime')) + '<br /><br />');
      document.write('Message: ' + decodeURIComponent(getQuerystring('message')));
    </script>
  </body>
</html>

10. Conexão de manipulador de plug-in

Para chamar a função sendToAppHandler criada na Etapa 8, insira o seguinte código em my_plugin.html no evento .ready de jQuery e logo após a chamada hsp.init inserida na Etapa 7:

hsp.bind('sendtoapp', function(message){
  sendToAppHandler(message);
});

11. ‹‹Usando o plug-in de aplicativo

Como mencionado na Etapa 1, será necessária uma conta do Twitter ou do Facebook para usar o plug-in de aplicativo. Se você adicionou uma conta do Twitter, deverá ver o item de menu do plug-in em um menu do tweet do fluxo do feed pessoal, por exemplo. Se você adicionou uma conta do Facebook, ela estará visível em um fluxo do feed de notícias. Na Etapa 3, inserimos 'Abrir pop-up' como o texto do item de menu do plug-in, que é o que aparece na seguinte imagem:

myFirstPlugin.4229c522

Clique em Abrir pop-up e um pop-up como este será exibido:

pluginPopup.1696c35a

12. Toques finais

Para criar um aplicativo mais eficiente e com aparência mais interessante, consulte a seção Melhores práticas. Se ocorrerem problemas, leia as Perguntas frequentes ou envie-nos um e-mail para app.review@hootsuite.com.