Tableau e 4D: Implante o seu WDC nas páginas de Github

Na secção Como ligar o Tableau ao post do blog 4D, aprendeu como criar um conector de dados web (WDC) para solicitar dados do 4D e visualizá-los no Tableau Public.

Agora é altura de alojar o nosso WDC! Uma vez que utiliza apenas ficheiros HTML e JavaScript, as páginas Github é a melhor opção para as armazenar. Isto permite que outros testem o seu conector directamente no seu software Tableau. Neste post do blog, vou mostrar-lhe como proceder.

Bónus: Também lhe mostrarei como depurar o seu WDC no Tableau Public usando o Chrome. Vamos começar!

Antes de começarmos, certifique-se de que já leu o post anterior do blogue. Vamos buscá-lo a partir do fim.

Criar a página do GitHub

• Criar um novo repositório no GitHub usando a convenção <username>.github.io naming convention (onde username é o seu nome de utilizador GitHub ou o nome da sua organização no GitHub). Este passo é crucial para o WDC funcionar.
• Clonar o repositório na sua máquina local.
• Na pasta do projecto, adicione os ficheiros theinvoices.html e invoices.js, submeta, e empurre as alterações para o repositório GitHub.
• Ao navegar para https://username.github.io/invoices.html, a página web hospedada deve ser exibida:

Nota: Presumo que está familiarizado com GitHub e pode clonar, comprometer-se, puxar e empurrar com facilidade! Caso contrário, não se preocupe, temos uma série de posts no blogue para o ajudar a começar.

Lançar a página do Github a partir do Tableau Public

Agora que o seu WDC está online, abra uma ligação ao mesmo em Tableau Public.

Na caixa de diálogo da WDC, introduza o URL da WDC (https://username.github.io/invoices.html), como se mostra na imagem abaixo:

Mas primeiro … Usar 4D sobre HTTPs

A nossa página GitHub é carregada sobre HTTPS, mas a nossa API é servida sobre HTTP … o que levará a um erro de conteúdo misto:

A solução é a utilização de 4D via HTTPS. Para o fazer, precisa de utilizar a porta 443 enquanto verifica a caixa Habilitar HTTPS (como mostrado na imagem abaixo), ter um certificado válido instalado, e expor o seu API para que possa ser acedido através da Internet.

Para o bem deste post no blog, utilizei um certificado autoassinado. Pode ver este vídeo da Cimeira 4D 2020 para uma melhor compreensão da gestão de certificados.

Além disso, como disse anteriormente, terá de expor a sua aplicação REST em execução local à Internet, o que significa que precisará de um endereço IP público que possa ser acedido a partir de qualquer lugar na Internet (e não o mencionado no ficheiro invoice.js, que é um privado que só pode ser acedido dentro de uma Rede Local (LAN)).

Para obter o IP público (e para fins de demonstração), utilizei uma ferramenta de tunneling chamada ngrok que faz com que o meu servidor web local pareça estar alojado num subdomínio do ngrok.com:

Assim que o certificado estiver pronto e colocado na raiz do seu projecto, HTTPS está activado, e está armado com um endereço IP público, introduza o URL das suas Páginas GitHub no Tableau Public.

Isto faz surgir a tabela que pode agora ser utilizada para visualizações:

Parabéns! O seu WDC está implantado com sucesso, acedido, e está pronto para visualizar os seus dados 4D!

Bónus: Depurar o seu Wdc em Tableau

Por vezes quando se cria um WDC, este pode funcionar sem problemas no simulador(http://127.0.0.1:8888/Simulator/index.html) mas não é capaz de carregar dados no Tableau Public. Quando se carrega no botão Update Now, o ecrã de carregamento é exibido, mas os dados nunca aparecem:

O que fazer? Como saber exactamente o que correu mal?

O Tableau dá-lhe a possibilidade de utilizar o navegador Chrome e o Chrome DevTools para depurar o seu WDC enquanto este está a funcionar no Tableau Public. Aqui estão os passos a seguir:

• Descarregar Chrome para Windows chrome-win.zip ou chrome-mac.zip para macOS.
• Abra o Prompt de Comando e inicie o Tableau com a opção de depuração remota.
  Para macOS open /Applications/Tableau\ Public.app –args –remote-debugging-port=9000
  Para Windows, navegue para o directório Tableau cd C:\Program Files\Tableau\Tableau \bin\ e introduza tableau.exe –remote-debugging-port=9000
• Em Tableau, introduza o URL do WDC que pretende depurar e prima Enter. Depois de carregar a sua página de aterragem WDC, vai querer esperar antes de interagir com a página para que possa iniciar o depurador Chrome e definir pontos de interrupção.
• Inicie o Chrome e defina o URL para http://localhost:9000
• No Chrome Browser, seleccione o WDC que pretende depurar a partir desta página:

• Quando o depurador Chrome estiver ligado, sinta-se à vontade para procurar quaisquer erros ou configurar os seus pontos de interrupção no código JavaScript do seu WDC.

Se estiver interessado em saber mais sobre como depurar o WDC dentro do Tableau, consulte esta página a partir da documentação oficial. Feliz depuração!

E se tiver alguma questão, por favor, sinta-se à vontade para se juntar à discussão no fórum 4D.