habilitar o AEM Screens para o seu site de demonstração enable-screens
Conheça 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 story-so-far
No documento anterior da jornada do complemento 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 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 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, é possível habilitar a experiência completa do AEM Screens as a Cloud Service para seus sites de demonstração.
Objetivo objective
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, 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 understand-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 Demonstrações de referência do AEM, você terá automaticamente o conteúdo da We.Cafe para o 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 ajudam você a habilitar a experiência completa do AEM Screens, publicando esse conteúdo e implantando em reprodutores de mídia, etc.
Noções sobre o conteúdo de demonstração demo-content
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 care-layouts
As filiais da We.Cafe têm os seguintes layouts.
Entrada entrance
A exibição de entrada é segmentada pelo dia e mudará a primeira imagem da manhã para a tarde. Em cada passagem da sequência, ele também anunciará uma preparação especial de café diferente, utilizando 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 do exterior, que pode ser simulada conforme descrito na seção Criação de fonte de dados simulada.
Implantação de um projeto de demonstração do Screens deploy-project
Para usar o conteúdo de demonstração na sandbox criada 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 dynamically-change
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 essa experiência, você deverá criar seu próprio serviço de clima simples.
Criação de fonte de dados simulada data-source
Como é muito difícil alterar o clima durante uma demonstração ou durante os testes, as alterações de temperatura devem ser simuladas. Um serviço meteorológico é simulado armazenando um valor de temperatura em uma planilha do Google Sheets que o ContextHub do AEM chamará para obter a temperatura.
Criação de uma chave da API do Google create-api-key
Primeiro, será necessário criar uma chave de API do Google para facilitar a troca de dados.
-
Faça logon em uma conta do Google.
-
Abra o Cloud Console usando este link
https://console.cloud.google.com. -
Crie um projeto clicando no nome atual do projeto na parte superior esquerda da barra de ferramentas próximo ao rótulo Google Cloud Platform.
-
Na caixa de diálogo do seletor de projeto, clique em NOVO PROJETO.
-
Dê um nome ao projeto e clique em CRIAR.
-
Certifique-se de que o novo projeto esteja selecionado e, usando o menu de opções no painel do Cloud Console, selecione APIs e Serviços.
-
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.
-
Na caixa de diálogo, copie a nova chave de API e salve para uso posterior. Clique em FECHAR para sair da caixa de diálogo.
Habilitar a API do Google Sheets enable-sheets
Para permitir a troca de dados do Google Sheets usando sua chave de API, é necessário habilitar a API do Google Sheets.
-
Retorne ao Google Cloud Console em
https://console.cloud.google.compara o seu projeto e use o menu de hambúrguer para selecionar APIs e serviços > Biblioteca.
-
Na tela Biblioteca de API, navegue até encontrar sua pesquisa por API do Google Sheets clique nela.
-
Na janela API do Google Sheets, clique em HABILITAR.
Criar planilha do Google Sheets create-spreadsheet
Agora você pode criar uma planilha do Google Sheets para armazenar seus dados meteorológicos.
-
Acesse
https://docs.google.come crie uma nova planilha do Google Sheets. -
Defina a temperatura inserindo
32na célula A2. -
Compartilhe o documento clicando em Compartilhar no canto superior direito da janela e em Obter link, clique em Alterar.
-
Copie o link para a próxima etapa.
-
Localize a ID da planilha.
-
A ID da planilha é a string aleatória de caracteres no link da planilha copiado, 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.
- Se o URL for
-
-
Copie a ID da planilha para uso futuro.
Testar seu serviço meteorológico test-weather-service
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.
-
Abra um navegador da Web.
-
Insira a seguinte solicitação, substituindo a ID da planilha e os valores da chave da API que você salvou anteriormente.
code language-none https://sheets.googleapis.com/v4/spreadsheets/<yourSheetID>/values/Sheet1?key=<yourAPIKey> -
Se receber dados JSON semelhantes aos seguintes, você configurou corretamente.
code language-json { "range": "Sheet1!A1:Z1000", "majorDimension": "ROWS", "values": [ [], [ "32" ] ] }
O AEM Screens pode usar esse mesmo serviço para acessar os dados meteorológicos simulados configurados na próxima etapa.
Configurar o ContextHub configure-contexthub
O AEM Screens pode alterar o conteúdo dinamicamente com base no contexto. A demonstração do We.Cafe possui canais configurados para exibir conteúdos diferentes dependendo da temperatura atual, usando o ContextHub do AEM.
Quando o conteúdo da tela for visualizado, o ContextHub chamará seu serviço meteorológico para encontrar a temperatura atual e determinar qual conteúdo exibir.
Para fins de demonstração, os valores na planilha podem ser alterados. O ContextHub reconhece esse fato e o conteúdo é ajustado no canal de acordo com a temperatura atualizada.
-
Na instância do autor do AEMaaCS, acesse Navegação global > Ferramentas > Sites > ContextHub.
-
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.
-
Selecione Configuração > Configuração do ContextHub > Google Sheets e clique em Avançar no canto superior direito.
-
A configuração já deve ter dados JSON pré-configurados. Há dois valores que precisam ser alterados:
- Substitua
[your Google Sheets id]pela ID de planilha que você salvou anteriormente. - Substitua
[your Google API Key]pela chave de API que você salvou anteriormente.
- Substitua
-
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 “a mudança climática ocorre”.
Testar dados dinâmicos test-dynamic
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 atualiza o conteúdo de forma dinâmica.
-
Acesse a instância do autor da sandbox.
-
Navegue até o console Sites por meio de Navegação Global > Sites e selecione a seguinte página Screens > <nome-do-projeto> > Canais > Entrance Morning (Portrait).
-
Clique em Editar na barra de ferramentas ou pressione a tecla de atalho
epara editar a página. -
No editor, é possível ver o conteúdo. Uma imagem é realçada em azul com um ícone de direcionamento no canto.
-
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 connect-screens
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 configure-screens
Primeiro, você precisa publicar seu conteúdo de demonstração do Screens no AEM Screens as a Cloud Service e configurar o serviço.
-
Publique o conteúdo do seu projeto de demonstração do Screens.
-
Navegue até Screens as a Cloud Service em
https://experience.adobe.com/screense faça logon. -
Na parte superior direita da tela, verifique se você está na organização correta.
-
Próximo do canto superior esquerdo, clique no ícone Editar configurações que tem o formato de uma engrenagem.
-
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.
-
Depois de se conectar à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.
-
Clique em Exibições no painel esquerdo. Você ainda não criou nenhuma para sua demonstração. Você pode simular os locais do We.Cafe criando pastas para cada um. Clique em Criar no canto superior direito da tela e selecione Pasta.
-
Na caixa de diálogo, forneça um nome de pasta, como San Jose, e clique em Criar.
-
Abra a pasta clicando nela, clique em Criar no canto superior direito e selecione Exibir.
-
Forneça um nome à exibição e clique em Criar.
-
Depois que a exibição for criada, clique no nome dela para abrir a tela de detalhes. 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.
-
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 screens-player
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 registration-code
Primeiro, será necessário criar um código de registro para conectar com segurança um reprodutor ao AEM Screens as a Cloud Service.
-
Navegue até Screens as a Cloud Service em
https://experience.adobe.com/screense faça logon. -
Na parte superior direita da tela, verifique se você está na organização correta.
-
No painel esquerdo, clique em Gerenciamento do reprodutor > Códigos de registro e em Criar código na parte superior direita da tela.
-
Insira um nome para o código e clique em Criar.
-
Depois que o código é criado, ele aparece na lista. Clique para copiar o código.
Instalar e configurar reprodutor install-player
-
Baixe o reprodutor da sua plataforma em
https://download.macromedia.com/screens/e instale-o. -
Execute o reprodutor e alterne para a guia Configuração.
-
Role para baixo e clique e confirme as opções Redefinir aos padrões de fábrica e Alterar para o modo de nuvem.
-
O reprodutor será alterado automaticamente para a guia Registro do reprodutor. Insira o código gerado anteriormente e clique em Registrar.
-
Alterne para a guia Informações do sistema para confirmar que o reprodutor foi registrado.
Atribuir reprodutor a uma exibição assign-player
-
Navegue até o Screens as a Cloud Service, em
https://experience.adobe.com/screens, e faça logon. -
Na parte superior direita da tela, verifique se você está na organização correta.
-
No painel esquerdo, clique em Gerenciamento de reprodutores > Reprodutores e você verá o reprodutor instalado e registrado anteriormente.
-
Clique no nome do reprodutor para abrir os detalhes. Clique em Atribuir à exibição na parte superior direita da tela.
-
Na caixa de diálogo, selecione a exibição criada anteriormente e clique em Selecionar.
Reprodução! playback
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 what-is-next
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 additional-resources
- 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.