Ativar o AEM Screens para o seu site de demonstração

Saiba mais sobre as etapas para habilitar a experiência completa do AEM Screens as a Cloud Service em seu site de demonstração.

A história até agora

No documento anterior da jornada do complemento de Demonstrações de referência do AEM, Criar site de demonstração, você criou um novo site de demonstração com base nos modelos do complemento de demonstração de referência. Agora você deve:

• Entender como acessar o ambiente de criação do AEM.
• Saber como criar um site com base em um modelo.
• Entender as noções básicas de navegação na estrutura do site e edição de uma página.

Agora que você tem seu próprio site de demonstração para explorar e entender as ferramentas disponíveis para ajudá-lo a gerenciar seus sites de demonstração, você pode habilitar a experiência do AEM Screens as a Cloud Service completa para seus sites de demonstração.

Objetivo

O complemento Demonstrações de referência do AEM contém conteúdo do AEM Screens para a We.Cafe, uma empresa do setor de cafeterias. Este documento ajuda você a entender como executar a configuração de demonstração da We.Cafe no contexto do AEM Screens. Depois de ler esse documento, você deverá:

• Ter noções básicas do AEM Screens.
• Entender o conteúdo de demonstração da We.Cafe.
• Saber como configurar o AEM Screens para a We.Cafe.
  • Saber como criar um projeto do Screens para a We.Cafe.
  • Ser capaz de configurar um serviço de clima simulado usando o Google Sheets e APIs.
  • Simular a alteração dinâmica do conteúdo do Screens com base no seu “serviço meteorológico”.
  • Instalar e usar o reprodutor do Screens.

Informações sobre o Screens

O AEM Screens as a Cloud Service é uma solução de sinalização digital que permite aos profissionais de marketing criar e gerenciar experiências digitais dinâmicas em escala. Com o AEM Screens as a Cloud Service, você pode criar experiências envolventes e dinâmicas de sinalização digital, destinadas ao consumo em espaços públicos.

Ao instalar o complemento de demonstrações de referência do AEM, você tem automaticamente o conteúdo da We.Cafe para AEM Screens disponível em seu ambiente de criação de demonstração. As etapas descritas em Implantar um projeto de demonstração do Screens permitem que você ative a experiência completa do AEM Screens, publicando esse conteúdo e implantando em reprodutores de mídia, etc.

Informações sobre o conteúdo de demonstração

A cafeteria We.Cafe é composta de três lojas em três locais nos EUA. Todas as três lojas têm três experiências semelhantes:

• Um menu board acima do balcão, com dois ou três painéis verticais
• Uma tela de entrada voltada para a rua com um painel horizontal ou vertical convidando os clientes para a loja
• Um quiosque de autoatendimento rápido, para evitar a fila, com um tablet vertical

Pressupõe-se que a filial de Nova Iorque esteja em uma loja menor que não tem muito espaço e, como tal:

• O menu board tem apenas dois painéis verticais em vez de três como em São Francisco e San Jose
• A exibição de entrada está posicionada verticalmente em vez de horizontalmente

Layouts da cafeteria

As filiais da We.Cafe têm os seguintes layouts.

Entrada

A exibição de entrada é segmentada pelo dia e mudará a primeira imagem de manhã para a tarde. Em cada passagem da sequência, ele também anunciará uma preparação especial de café diferente, usando uma sequência incorporada medida para reproduzir um item diferente a cada vez.

A última imagem nos canais de entrada também é direcionada (ou seja, alterada dinamicamente) com base na temperatura exterior, que pode ser simulada conforme descrito na seção Criar fonte de dados simulada.

Implantar um projeto de demonstração do Screens

Para usar o conteúdo de demonstração na sandbox que você criou na etapa Criar programa, um site deve ser criado com base em um modelo.

Se você ainda não criou um site de demonstração da We.Cafe, siga as mesmas etapas descritas na seção Criar Site de Demonstração. Ao selecionar o modelo, basta escolher o Modelo do site da We.Cafe.

Quando o assistente for concluído, você encontrará o conteúdo implantado no Sites e poderá navegar e explorar como faria com qualquer outro conteúdo.

Agora que você tem o conteúdo de demonstração da We.Cafe, você tem uma escolha sobre como deseja testar o AEM Screens:

• Se você quiser explorar apenas o conteúdo no console do AEM Sites, basta começar a explorar e descobrir mais na seção Recursos adicionais. nenhuma outra ação é necessária.
• Se quiser experimentar todos os recursos dinâmicos do AEM Screens, continue para a próxima seção, Alterar dinamicamente o conteúdo do Screens.

Alterar dinamicamente o conteúdo do Screens

Assim como o AEM Sites, o AEM Screens pode alterar o conteúdo dinamicamente com base no contexto. A demonstração da We.Cafe tem canais configurados para mostrar conteúdos diferentes dependendo da temperatura atual. Para simular isso, precisaremos criar nosso próprio serviço de clima simples.

Criar fonte de dados simulada

Como é muito difícil alterar o tempo durante uma demonstração ou durante os testes, as alterações de temperatura devem ser simuladas. Vamos simular um serviço meteorológico armazenando um valor de temperatura em uma planilha do Google que o ContextHub do AEM chamará para recuperar a temperatura.

Criar chave da API do Google

Primeiro, precisamos criar uma chave de API do Google para facilitar a troca de dados.

1. Faça logon em uma conta do Google.

2. Abra o Cloud Console usando este link https://console.cloud.google.com.

3. Crie um novo projeto clicando no nome atual do projeto na parte superior esquerda da barra de ferramentas depois do rótulo Google Cloud Platform.

   

4. Na caixa de diálogo do seletor de projeto, clique em NOVO PROJETO.

   

5. Dê um nome ao projeto e clique em CRIAR.

   

6. Certifique-se de que o novo projeto está selecionado e, usando o menu de hambúrguer no painel do Cloud Console, selecione APIs e serviços.

   

7. No painel esquerdo da janela APIs e serviços, clique em Credenciais na parte superior da janela e, em seguida, clique em CRIAR CREDENCIAIS e Chave da API.

   

8. Na caixa de diálogo, copie a nova chave de API e salve para uso posterior. Clique em FECHAR para fechar a janela.

Habilitar a API do Google Sheets

Para permitir a troca de dados do Google Sheets usando sua chave de API, é necessário ativar a API do Google Sheets.

1. Retorne ao Google Cloud Console em https://console.cloud.google.com para o seu projeto e use o menu de hambúrguer para selecionar APIs e serviços -> Biblioteca.

   

2. Na tela Biblioteca de API, navegue até encontrar nossa pesquisa por API do Google Sheets. Clique nela.

   

3. Na janela API do Google Sheets, clique em ATIVAR.

   

Criar planilha do Google Sheets

Agora você pode criar uma planilha do Google Sheets para armazenar seus dados meteorológicos.

1. Acesse https://docs.google.com e crie uma nova planilha do Google Sheets.

2. Defina a temperatura inserindo 32 na célula A2.

3. Compartilhe o documento clicando em Compartilhar no canto superior direito da janela e abaixo de Obter link, clique em Alterar.

   

4. Copie o link para a próxima etapa.

   

5. Localize a ID da planilha.

   • A ID da planilha é a sequência aleatória de caracteres no link da planilha copiada, depois de d/ e antes de /edit.
   • Por exemplo:
     • Se o URL for https://docs.google.com/spreadsheets/d/1cNM7j1B52HgMdsjf8frCQrXpnypIb8NkJ98YcxqaEP30/edit#gid=0
     • A ID da planilha é 1cNM7j1B52HgMdsjf8frCQrXpnypIb8NkJ98YcxqaEP30.

6. Copie a ID da planilha para uso futuro.

Testar seu serviço meteorológico

Agora que você criou sua fonte de dados como uma planilha do Google Sheets e habilitou o acesso via API, teste-a para garantir que seu “serviço meteorológico” esteja acessível.

1. Abra um navegador da Web.

2. Insira a seguinte solicitação, substituindo a ID da planilha e os valores da chave da API que você salvou anteriormente.

   https://sheets.googleapis.com/v4/spreadsheets/<yourSheetID>/values/Sheet1?key=<yourAPIKey>
   

3. Se receber dados JSON semelhantes aos seguintes, você configurou corretamente.

   {
     "range": "Sheet1!A1:Z1000",
     "majorDimension": "ROWS",
     "values": [
       [],
       [
         "32"
       ]
     ]
   }
   

O AEM Screens pode usar esse mesmo serviço para acessar os dados meteorológicos simulados. Isso será configurado na próxima etapa.

Configurar o ContextHub

O AEM Screens pode alterar o conteúdo dinamicamente com base no contexto. A demonstração da We.Cafe tem canais configurados para mostrar conteúdo diferente dependendo da temperatura atual, aproveitando o ContextHub do AEM.

Quando o conteúdo da tela for exibido, o ContextHub chamará seu serviço meteorológico para encontrar a temperatura atual e determinar qual conteúdo será exibido.

Para fins de demonstração, os valores na planilha podem ser alterados. O ContextHub reconhecerá isso e o conteúdo será ajustado no canal de acordo com a temperatura atualizada.

1. Na instância do autor do AEMaaCS, acesse Navegação global -> Ferramentas -> Sites -> ContextHub.
2. Selecione o contêiner de configuração que tem o mesmo nome que você deu ao projeto quando você criou o projeto do Screens a partir do Modelo do site We.Cafe.
3. Selecione Configuração -> Configuração do ContextHub -> Google Sheets e, em seguida, clique em Próximo no canto superior direito.
4. A configuração já deve ter dados JSON pré-configurados. Há dois valores que precisam ser alterados:
   1. Substitua [your Google Sheets id] com a ID da planilha que você salvou anteriormente.
   2. Substitua [your Google API Key] com a chave de API que você salvou anteriormente.
5. Clique em Salvar.

Agora você pode alterar o valor da temperatura em sua planilha do Google e o ContextHub atualizará o Screens dinamicamente à medida que “vê a mudança climática”.

Testar dados dinâmicos

Agora que o AEM Screens e o ContextHub estão conectados ao serviço meteorológico, você pode testá-los para ver como o Screens pode atualizar o conteúdo dinamicamente.

1. Acesse a instância do autor da sandbox.

2. Navegue até o console Sites por meio de Navegação global -> Sites e selecione a seguinte página Telas -> <nome-do-projeto> -> Canais -> Entrance Morning (Portrait).

   

3. Clique em Editar na barra de ferramentas ou digite a tecla de atalho e para editar a página.

4. No editor, é possível ver o conteúdo. Observe que uma imagem está realçada em azul com um ícone de direcionamento no canto.

   

5. Altere a temperatura que você inseriu em sua planilha de 32 para 70 e veja o conteúdo mudar.

   

Baseado na mudança de temperatura congelante de 32°F (0°C) para confortáveis 70°F (21°C), a imagem em destaque mudou de uma xícara de chá quente para um café gelado.

Conectar o Screens as a Cloud Service

Se você também quiser configurar uma experiência real de sinalização digital, incluindo um reprodutor que é executado em um dispositivo de sinalização digital ou em seu computador, siga as próximas etapas.

Como alternativa, você pode visualizar a demonstração simplesmente no Editor de canais no AEMaaCS.

Configurar o AEM Screens as a Cloud Service

Primeiro, você precisará publicar seu conteúdo de demonstração do Screens no AEM Screens as a Cloud Service e configurar o serviço.

1. Publique o conteúdo do seu projeto de demonstração do Screens.

2. Navegue até Screens as a Cloud Service em https://experience.adobe.com/screens e faça logon.

3. Na parte superior direita da tela, verifique se você está na organização correta.

   

4. Na parte superior esquerda, clique no ícone Editar configurações, em forma de engrenagem.

   

5. Forneça os URLs das instâncias de criação e publicação do AEMaaCS onde você criou o site de demonstração e clique em Salvar.

   

6. Depois de conectado às instâncias de demonstração, o Screens obtém o conteúdo do canal. Clique em Canais, no painel esquerdo, para ver os canais publicados. Pode levar algum tempo para que as informações sejam preenchidas. Você pode clicar no botão azul Sincronizar, na parte superior direita da tela, para atualizar as informações.

   

7. Clique em Exibições no painel esquerdo. Você ainda não criou nenhuma para sua demonstração. Vamos simular os locais da We.Cafe criando pastas para cada um. Clique em Criar no canto superior direito da tela e selecione Pasta.

   

8. Na caixa de diálogo, forneça um nome de pasta, como San Jose, e clique em Criar.

9. Abra a pasta clicando nela e, em seguida, clique em Criar no canto superior direito e selecione Exibição.

10. Forneça um nome à exibição e clique em Criar.

    

11. Depois que a exibição for criada, clique no nome da exibição para abrir a tela de detalhes da exibição. A exibição deve ser atribuída a um canal que foi sincronizado do site de demonstração. Clique em Atribuir canal na parte superior direita da tela.

    

12. Na caixa de diálogo, selecione o canal e clique em Atribuir.

    

Você pode repetir essas etapas para seus locais e exibições adicionais. Com isso, você vinculou seu site de demonstração ao AEM Screens e concluiu a configuração necessária.

Você pode visualizar a demonstração no Editor de canais no AEMaaCS.

Usar reprodutor do Screens

Para exibir o conteúdo como em uma tela real, você pode baixar o reprodutor e configurá-lo localmente. O AEM Screens as a Cloud Service fornecerá o conteúdo ao seu reprodutor

Gerar um código de registro

Primeiro, será necessário criar um código de registro para conectar com segurança um reprodutor ao AEM Screens as a Cloud Service.

1. Navegue até Screens as a Cloud Service, em https://experience.adobe.com/screens, e faça logon.

2. Na parte superior direita da tela, verifique se você está na organização correta.

   

3. No painel esquerdo, clique em Gerenciamento do reprodutor -> Códigos de registro e, em seguida, clique em Criar código na parte superior direita da tela.

1. Insira um nome para o código e clique em Criar.

   

2. Depois que o código é criado, ele aparece na lista. Clique para copiar o código.

   

Instalar e configurar reprodutor

1. Baixe o reprodutor da sua plataforma em https://download.macromedia.com/screens/ e instale-o.

2. Execute o reprodutor e alterne para a guia Configuração, rolando até a parte inferior para clicar e confirmar Redefinir para fábrica e Alterar para o modo Nuvem.

   

3. O reprodutor será alterado automaticamente para a guia Registro do reprodutor. Insira o código gerado anteriormente e clique em Registrar.

   

4. Alterne para a guia Informações do sistema para confirmar que o reprodutor foi registrado.

   

Atribuir reprodutor a uma exibição

1. Navegue até o Screens as a Cloud Service, em https://experience.adobe.com/screens, e faça logon.

2. Na parte superior direita da tela, verifique se você está na organização correta.

   

3. No painel esquerdo, clique em Gerenciamento de reprodutores -> Reprodutores e você verá o reprodutor instalado e registrado anteriormente.

   

4. Clique no nome do reprodutor para abrir os detalhes e clique em Atribuir para exibição no canto superior direito da tela.

   

5. Na caixa de diálogo, selecione a exibição criada anteriormente e clique em Selecionar.

   

Reprodução!

Depois de atribuir uma exibição a um reprodutor, o AEM Screens as a Cloud Service entrega o conteúdo ao seu reprodutor, onde ele fica visível.

O que vem a seguir

Agora que concluiu esta parte da jornada do complemento de demonstração de referência do AEM, você deve:

• Ter noções básicas do AEM Screens.
• Entender o conteúdo de demonstração da We.Cafe.
• Saber como configurar o AEM Screens para a We.Cafe.

Agora você está pronto para explorar os recursos do AEM Screens usando seus próprios sites de demonstração. Prossiga para a próxima seção da jornada, Gerenciar sites de demonstração, onde você aprenderá sobre as ferramentas disponíveis para ajudá-lo a gerenciar seus sites de demonstração e como removê-los.

Você também pode conferir alguns dos recursos adicionais disponíveis na Seção recursos adicionais para saber mais sobre os recursos que viu nesta jornada.

Recursos adicionais

• Documentação do ContextHub — saiba como o ContextHub pode ser usado para personalizar o conteúdo com base no contexto do usuário, além das condições meteorológicas.
• Uso de chaves de API — Documentação do Google — uma referência útil para obter detalhes sobre o uso de chaves de API do Google.
• Exibições — saiba mais sobre o que é uma exibição no AEM Screens e o que ela pode fazer.
• Baixar reprodutor — saiba como acessar o reprodutor do Screens e como instalá-lo.
• Registrar reprodutor — saiba como configurar e registrar um reprodutor no projeto do AEM Screens.
• Atribuir o reprodutor a uma exibição — configure um reprodutor para exibir seu conteúdo.

Recursos do Business.Adobe.com