2.4 Conecte a coleta de dados do EXP News ao seu painel de Notícias EXP em tempo real

Objetivos

• Entenda como conectar o aplicativo do painel Project Firefly EXP News em tempo real às informações de transmissão em tempo real, no site EXP News, usando o encaminhamento pelo lado do servidor de coleta de dados do Adobe Experience Platform.

Pré-requisitos

Antes de iniciar este exercício, certifique-se de ter instalado e configurado o NodeJS e o Adobe I/O CLI em sua máquina. Consulte Exercício 22.1 - Configuração do ambiente para obter detalhes.

2.4.1 Descubra o webhook do aplicativo Project Firefly

Precisamos descobrir o webhook em que podemos conectar eventos de transmissão do site EXP News ao nosso aplicativo de painel. Na verdade, você já deve ter visto isso como saída do seu aio app deploy do exercício 22.3.2. Você pode copiá-lo diretamente daqui; é a primeira linha na lista de Sua ação implantada; o que termina com webhook. Implantar, por exemplo https://133309-rmaurexpnews-development.adobeio-static.net/api/v1/web/poc-platform-realtime-0.0.1/webhook. Copie o URL para webhook e salve-o em algum lugar para usá-lo posteriormente.

2.4.2 Configurar o encaminhamento pelo lado do servidor de coleta de dados do Adobe Experience Platform

Agora vamos configurar o encaminhamento pelo lado do servidor para nosso aplicativo Project Firefly EXP News Firefly usando o webhook que descobrimos no exercício anterior.

Vá para https://experience.adobe.com/#/data-collection/. Verifique se você está na organização correta, no canto superior direito: --envName--.

No menu esquerdo, clique em Servidor. Você verá uma visão geral das propriedades do servidor.

Procure a propriedade do lado do servidor que você criou como parte do Módulo 21 (por exemplo, vangeluw - Demo System (24/04/2021) (Edge)) e clique para abri-la.

Clique em Elementos de dados no painel à esquerda e, em seguida, clique em Adicionar elemento de dados para adicionar um novo elemento de dados. Na tela de definição do elemento de dados, forneça as seguintes informações:

• Nome: brandName
• Extensão: selecione Core na lista .
• Tipo de elemento de dados: selecione Path na lista .
• Caminho (obrigatório): arc.event.xdm.--aepTenantId--.demoEnvironment.brandName

Clique em Save para salvar o elemento de dados.

Clique em Regras no painel à esquerda. Você verá uma visão geral das regras criadas para essa propriedade, com a regra Todas as páginas do Exercício 21 listada. Clique em Adicionar regra.

Na tela Criar regra:

Forneça um Nome, por exemplo All Pages EXP News. Clique em + Adicionar para adicionar uma nova Condição.

Na tela Condition Configuration e forneça as seguintes informações:

• Tipo lógico: select Regular
• Extensão: select Core
• ​​TipoCondição: select Value Comparison
• Nome: Core - Value Comparison
• Operando esquerdo (obrigatório): selecione na caixa brandName de diálogo exibida clicando no ícone de três cilindros. O campo é preenchido com {{brandName}}.
• Operador: select Equals
• Operando à direita: tipo EXP News.

Clique em Manter alterações para retornar à tela Criar regra. Você estará de volta aqui, clique em + Adicionar para adicionar uma nova ação.

Na tela Action Configuration, forneça as seguintes informações no painel esquerdo.

• Extensão: select Adobe Cloud Connector
• Tipo de ação: select Make Fetch Call
• Nome: Adobe Cloud Connector - Make Fetch Call
• Método (obrigatório): select POST
• URL (obrigatório): cole aqui o webhook que você copiou e salvou do exercício 22.4.1, por exemplo https://133309-rmaurexpnews-development.adobeio-static.net/api/v1/web/poc-platform-realtime-0.0.1/webhook

Clique em Corpo.

Certifique-se de que o Body tenha a seguinte aparência:

• Certifique-se de que Raw esteja selecionado como Formato do Corpo
• selecione Evento XDM na caixa de diálogo que aparece ao clicar no ícone de três cilindros atrás do campo abaixo Corpo (bruto). Isso inserirá {{XDM Event}}.

Clique em Manter alterações. Sua tela deve ficar assim. Clique em Salvar.

Clique em Fluxo de publicação à esquerda para implantar as alterações na configuração do Adobe Experience Platform Data Collection Server.
Clique em … à direita de v1 na coluna Desenvolvimento e clique em Editar.

Na tela Editar biblioteca, clique em Adicionar todos os recursos alterados. Você verá uma visão geral das alterações mais recentes. Clique em Salvar e criar para desenvolvimento.

Depois de algum tempo, você retornará à tela anterior. Aguarde até que o círculo antes de v1 pare de girar e fique verde estável. As regras atualizadas de encaminhamento pelo lado do servidor para as páginas de Notícias EXP foram implantadas.

2.4.3 Demonstrar o painel de notícias EXP em tempo real

Agora demonstraremos como as interações no site EXP News serão atualizadas em tempo real no aplicativo do painel EXP News .

Para fazer isso:

Vá para https://public.aepdemo.net.

Insira a ID de configuração e clique em Carregar configuração.

Na parte inferior da página, clique em Salvar Configuração

Clique em Selecione LDAP e escolha seu nome LDAP na lista. Clique em Salvar.

Clique em Selecionar Marca e selecione EXP News (Demo brand for mediaent) na lista.

Clique em Salvar.

Na tela Status do Ambiente

Clique no logotipo EXP News. Isso o levará ao site EXP News.

No site EXP News, clique em ao redor para ler artigos e assistir a vídeos.

Retorne ao aplicativo Firefly do Painel de notícias EXP em tempo real; ele deve atualizar suas interações com o site de notícias EXP em tempo real.

Divirta-se ainda mais explorando isso. Se você for mais desenvolvedor e aventureiro e tiver tempo livre, explore o código-fonte do aplicativo de painel e faça alterações conforme desejar.

Terminou este exercício e este módulo.

Próxima etapa: Resumo e benefícios

Voltar ao Módulo 22

Voltar para todos os módulos