22.3 Crie seu painel EXP News em tempo real

Objetivos

  • Entenda como o Project Firefly pode fornecer um painel personalizado em tempo real mostrando informações da AEP.
  • Saiba como criar e executar este painel de exemplo.

Pré-requisitos

Antes de start deste exercício, verifique se você instalou e instalou o NodeJS e o Adobe I/O CLI em seu computador. Consulte Exercise 21.1 - Setting up your ambiente para obter detalhes.

22.3.1 Download do código fonte

O código fonte deste projeto está disponível internamente em https://git.corp.adobe.com/IODevEnablement/poc-aep-realtime-dashboard e desenvolvido por Duy Nguyen da equipe da Adobe I/O.
Entretanto, para evitar que todos entendam como clonar ou baixar o código de um repositório github, disponibilizamos o código como um arquivo ZIP diretamente deste módulo de ativação. Se você se sentir confortável em usar o github, você também pode clonar o código dali.

Para obter a retenção do código fonte dentro deste módulo de ativação:

  • Baixe-o de here.
  • Extraia o arquivo ZIP para um local no computador.

22.3.2 Construa o painel em tempo real

Para criar o aplicativo Firefly do painel em tempo real:

Vá para o diretório onde você extraiu o arquivo ZIP no exercício 22.3.1, por exemplo, poc-aep-realtime-dashboard-master.

No diretório, execute npm install para instalar todos os pacotes necessários para o aplicativo.

npminstall

Copie o arquivo de ambiente .env (que contém toda a configuração do ambiente de tempo de execução do Adobe I/O) do projeto [ldap]HelloWorld que você criou e implantou no exercício 22.2.

Por exemplo: cp <rmaurHelloWorld directory>/.env . para Mac OS
ou copy <rmaurHellowWorld directory>\.env . para Windows.

Observe que o arquivo de ambiente é o chamado arquivo oculto e talvez você não veja o arquivo no Finder / Explorer, portanto, é melhor copiar o arquivo usando a linha de comando.

cp

Você pode inspecionar o arquivo de ambiente .env usando seu editor de texto ou comando favorito. Ele deve definir sua namespace Adobe I/O e o código de autenticação

more

Implante o aplicativo usando aio app deploy. Novamente, a saída que você vê pode diferir da captura de tela abaixo, mas aguarde até que você veja Bem feito, seu aplicativo agora está on-line ??.

implantação

Seu aplicativo de painel final agora está disponível no URL mencionado como o último na saída do comando aio app deploy; por exemplo, https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://133309-rmaurexpnews-development.adobeio-static.net/index.html

  • Copie o URL.
  • Abra uma janela do navegador new incognito e faça logon em https://experience.adobe.com.
  • Verifique se você está na organização correta (no canto superior direito): --envName--.
  • Cole o URL. O aplicativo painel ficará disponível.

aplicativo Aep painel

O aplicativo Project Firefly EXP News Realtime Painel ainda não fornecerá nenhuma informação, pois não informamos de onde receber as informações. É aqui que o módulo de ativação anterior, no Adobe Launch Server Side Forwarding, se torna relevante, e assim por diante, para o próximo exercício.

Terminou este exercício.

Próxima etapa: 22.4 Coleta de dados do Connect EXP News para seu painel em tempo real do EXP News

Voltar ao módulo 22

Voltar para todos os módulos

Nesta página