Habilitación de AEM Screens para el sitio de demostración

Conozca los pasos para habilitar la experiencia completa de AEM Screens as a Cloud Service en su sitio de demostración.

La historia hasta ahora

En el documento anterior del recorrido del complemento de demostraciones de referencia de AEM, Creación de un sitio de demostración, ha creado un nuevo sitio de demostración basado en las plantillas del complemento de demostraciones de referencia. Ahora debería hacer lo siguiente:

• Comprender cómo acceder al entorno de creación de AEM.
• Saber cómo crear un sitio basado en una plantilla.
• Entender los conceptos básicos para navegar por la estructura del sitio y editar una página.

Ahora que tiene su propio sitio de demostración para explorar y comprender las herramientas disponibles para ayudarle a administrar este tipo de sitios, puede habilitar la experiencia completa de AEM Screens as a Cloud Service para ellos.

Objetivo

El complemento de demostraciones de referencia de AEM tiene contenido de AEM Screens para We.Cafe, un sector comercial de cafeterías. Este documento le ayuda a comprender cómo ejecutar la configuración de demostración de We.Cafe en el contexto de AEM Screens. Después de leer, debería haber logrado lo siguiente:

• Conocer los conceptos básicos de AEM Screens.
• Comprender el contenido de la demostración de We.Cafe.
• Saber cómo configurar AEM Screens para We.Cafe.
  • Poder crear un proyecto de Screens para We.Cafe.
  • Saber configurar un servicio meteorológico simulado mediante hojas de Google y API.
  • Simular el contenido de Screens que cambia de forma dinámica en función de su “servicio meteorológico”.
  • Instalar y utilizar el reproductor de Screens.

Comprender Screens

AEM Screens as a Cloud Service es una solución de señalización digital que permite a los especialistas en marketing crear y administrar experiencias digitales dinámicas a escala. Con AEM Screens as a Cloud Service, puede crear experiencias de señalización digital atractivas y dinámicas pensadas para consumirse en espacios públicos.

Al instalar el complemento de demostraciones de referencia de AEM, tendrá automáticamente el contenido de We.Cafe para AEM Screens disponible en su entorno de creación de demostración. Los pasos descritos en la sección Implementación de un proyecto de Screens de demostración le permite activar la experiencia completa de AEM Screens publicando ese contenido e implementándolo en reproductores de medios, etc.

Comprensión del contenido de demostración

We.Cafe abarca tres cafeterías en tres lugares de los Estados Unidos. Las tres tienen tres experiencias similares:

• Un tablero de menú encima del mostrador con dos o tres paneles verticales.
• Una visualización de entrada que da a la calle con un panel horizontal o vertical que invita a los clientes a pasar.
• Un quiosco de autopedido rápido para evitar hacer cola con una tableta vertical.

Se supone que la ubicación de Nueva York es en una tienda más pequeña que no tiene mucho espacio. Por lo tanto:

• El tablero de menú solo tiene dos paneles verticales en lugar de tres, como en San Francisco y San José.
• La visualización de entrada se coloca de forma vertical en lugar de horizontal.

Diseños de la cafetería

Las ubicaciones de We.Cafe tienen los siguientes diseños.

Entrada

La visualización de la entrada está dividida por el día y solo cambiará la primera imagen de la mañana a la tarde. En cada paso de la secuencia también anunciará una preparación especial de café diferente, con una secuencia incrustada medida para reproducir un elemento distinto cada vez.

La última imagen de los canales de entrada también está dirigida (es decir, modificada dinámicamente) en función de la temperatura exterior, que se puede simular como se describe en la sección Creación de una fuente de datos simulada.

Implementación de un proyecto de Screens de demostración

Para utilizar el contenido de demostración en la zona protegida creada en el paso Creación de un programa, debe crearse un sitio basado en una plantilla.

Si aún no ha creado un sitio de demostración de We.Cafe, solo tiene que seguir los mismos pasos que en la sección Creación de un sitio de muestra. Al seleccionar la plantilla, simplemente elija Plantilla del sitio web de We.Cafe.

Una vez se complete el asistente, encontrará el contenido implementado en Sites y puede navegar y explorar como lo haría con cualquier otro contenido.

Ahora que tiene contenido de demostración de We.Cafe, puede elegir cómo desea probar AEM Screens:

• Si solo desea explorar el contenido de la consola de AEM Sites, basta con comenzar a investigar y descubrir más en la sección Recursos adicionales. No se requieren más acciones.
• Si desea experimentar todas las funciones dinámicas de AEM Screens, continúe a la siguiente sección: Cambio dinámico del contenido de Screens.

Cambio dinámico del contenido de Screens

Al igual que AEM Sites, AEM Screens puede cambiar el contenido de forma dinámica en función del contexto. La demostración de We.Cafe tiene canales configurados para mostrar contenido diferente según la temperatura del momento. Para simular esto, tendremos que crear un sencillo servicio meteorológico propio.

Creación de una fuente de datos simulada

Dado que es muy difícil modificar el clima durante una demostración o durante las pruebas, los cambios de temperatura deben simularse. Simularemos un servicio meteorológico almacenando un valor de temperatura en una hoja de cálculo de Hojas de cálculo de Google que ContextHub de AEM llamará para recuperar la temperatura.

Creación de una clave de API de Google

En primer lugar, tendremos que crear una clave de API de Google para facilitar el intercambio de datos.

1. Inicie sesión en una cuenta de Google.

2. Abra la consola de Cloud mediante este vínculo https://console.cloud.google.com.

3. Para crear un nuevo proyecto, haga clic en el nombre del proyecto actual en la parte superior izquierda de la barra de herramientas, después de la etiqueta Google Cloud Platform.

   

4. En el cuadro de diálogo selector de proyecto, haga clic en PROYECTO NUEVO.

   

5. Asigne un nombre al proyecto y haga clic en CREAR.

   

6. Asegúrese de que el proyecto nuevo esté seleccionado y, a continuación, utilizando el menú de hamburguesa del panel de la consola de Cloud, seleccione API y servicios.

   

7. En el panel izquierdo de la ventana API y servicios, haga clic en Credenciales en la parte superior de la ventana, en CREAR CREDENCIALES y Clave de API.

   

8. En el cuadro de diálogo, copie la nueva clave de API y guárdela para usarla más adelante. Haga clic en CERRAR para cerrar el cuadro de diálogo.

Habilitación de la API de Hojas de cálculo de Google

Para permitir el intercambio de datos de Hojas de cálculo de Google mediante la clave de API, debe habilitar la API de Hojas de cálculo de Google.

1. Vuelva a la consola de Google Cloud en https://console.cloud.google.com para el proyecto y, a continuación, utilice el menú de hamburguesa para seleccionar API y servicios -> Biblioteca.

   

2. En la pantalla Biblioteca de API, desplácese hasta encontrar nuestra búsqueda de API de Hojas de cálculo de Google. Haga clic en ella.

   

3. En la ventana API de Hojas de cálculo de Google, haga clic en HABILITAR.

   

Creación de una hoja de cálculo de Hojas de cálculo de Google

Ahora puede crear una hoja de cálculo de Hojas de cálculo de Google para almacenar los datos del tiempo.

1. Vaya a https://docs.google.com y cree una nueva hoja de cálculo de Hojas de cálculo de Google.

2. Defina la temperatura introduciendo 32 en la celda A2.

3. Para compartir el documento, haga clic en Compartir en la parte superior derecha de la ventana y, debajo de Obtener vínculo, haga clic en Cambiar.

   

4. Copie el vínculo para el paso siguiente.

   

5. Busque el ID de hoja.

   • El ID de hoja es la cadena aleatoria de caracteres del vínculo de hoja que ha copiado después de d/ y antes de /edit.
   • Por ejemplo:
     • Si la dirección URL es https://docs.google.com/spreadsheets/d/1cNM7j1B52HgMdsjf8frCQrXpnypIb8NkJ98YcxqaEP30/edit#gid=0
     • El ID de hoja es 1cNM7j1B52HgMdsjf8frCQrXpnypIb8NkJ98YcxqaEP30.

6. Copie el ID de hoja para uso futuro.

Probar el servicio meteorológico

Ahora que ha creado su fuente de datos como hoja de cálculo de Hojas de cálculo de Google y ha habilitado el acceso mediante API, pruébelo para asegurarse de que el "servicio meteorológico" sea accesible.

1. Abra un navegador web.

2. Introduzca la siguiente solicitud, sustituyendo el ID de hoja y los valores de clave de API que guardó anteriormente.

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

3. Si recibe datos JSON similares a los siguientes, lo ha configurado correctamente.

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

AEM Screens puede utilizar este mismo servicio para acceder a los datos meteorológicos simulados. Esto se configurará en el siguiente paso.

Configurar ContextHub

AEM Screens puede cambiar el contenido dinámicamente según el contexto. La demostración de We.Cafe tiene canales configurados para mostrar contenido diferente según la temperatura actual aprovechando ContextHub de AEM.

Cuando se muestre el contenido de la pantalla, ContextHub llamará al servicio meteorológico para obtener la temperatura actual y determinar qué contenido mostrar.

Para fines de demostración, se pueden cambiar los valores de la hoja. ContextHub lo reconocerá y el contenido se ajustará en el canal según la temperatura actualizada.

1. En la instancia de autor de AEMaaCS, vaya a Navegación global -> Herramientas -> Sites -> ContextHub.
2. Seleccione el contenedor de configuración que tenga el mismo nombre que le dio al proyecto cuando creó el proyecto Screens desde la Plantilla del sitio web de We.Cafe.
3. Seleccione Configuración -> Configuración de ContextHub -> Hojas de cálculo de Google y, a continuación, haga clic en Siguiente en la parte superior derecha.
4. La configuración ya debería tener los datos JSON preconfigurados. Hay dos valores que deben cambiarse:
   1. Reemplace [your Google Sheets id] con el ID de hoja que guardó anteriormente.
   2. Reemplace [your Google API Key] con la clave de API que guardó anteriormente.
5. Haga clic en Guardar.

Ahora puede cambiar el valor de temperatura en la hoja de cálculo de Hojas de cálculo de Google y ContextHub actualizará Screens dinámicamente a medida que "observa cambios metereológicos".

Prueba de datos dinámicos

Ahora que AEM Screens y ContextHub están conectados al servicio meteorológico, puede probarlos para ver cómo las pantallas pueden actualizar el contenido de forma dinámica.

1. Acceda a la instancia de autor de la zona protegida.

2. Vaya a la consola Sitios a través de Navegación global -> Sitios y seleccione la siguiente página Screens -> <nombre-proyecto> -> Canales -> Entrada mañana (vertical).

   

3. Haga clic en Editar en la barra de herramientas o escriba la tecla de método abreviado e para editar la página.

4. En el editor, puede ver el contenido. Tenga en cuenta que una imagen está iluminada en azul con un icono de direcccionamiento en la esquina.

   

5. Cambie la temperatura introducida en la hoja de cálculo de 32 a 70 y observe cómo cambia el contenido.

   

Debido a que la temperatura cambió de 0 °C invernales a 21 °C primaverales, la imagen destacada cambió de una taza de té caliente a un café helado.

Conectar Screens as a Cloud Service

Si también desea configurar una experiencia de señalización digital real, incluido un reproductor que se ejecute en un dispositivo de señalización digital o en el equipo, siga los siguientes pasos.

Como alternativa, puede previsualizar la demostración simplemente en el editor de canales en AEMaaCS.

Configurar AEM Screens as a Cloud Service

Primero, tendrá que publicar el contenido de la demostración de Screens en AEM Screens as a Cloud Service y configurar el servicio.

1. Publique el contenido del proyecto Screens de demostración.

2. Vaya a Screens as a Cloud Service en https://experience.adobe.com/screens e inicie sesión.

3. En la parte superior derecha de la pantalla, compruebe que se encuentra en la organización correcta.

   

4. En la parte superior izquierda, haga clic en el icono Editar configuración, con forma de engranaje.

   

5. Proporcione las URL de las instancias de autor y publicación de AEMaaCS donde creó el sitio de demostración y haga clic en Guardar.

   

6. Una vez que se haya conectado a las instancias de demostración, Screens extraerá el contenido del canal. Haga clic en Canales en el panel izquierdo para ver los canales publicados. La información puede tardar un momento en rellenarse. Puede hacer clic en el botón azul Sincronizar en la parte superior derecha de la pantalla para actualizar la información.

   

7. Haga clic en Pantallas en el panel izquierdo. Todavía no ha creado ninguna para la demostración. Simularemos las ubicaciones de We.Cafe creando carpetas para cada una. Haga clic en Crear en la parte superior derecha de la pantalla y seleccione Carpeta.

   

8. En el cuadro de diálogo, proporcione un nombre de carpeta como San José y haga clic en Crear.

9. Abra la carpeta haciendo clic en ella y, a continuación, haga clic en Crear en la parte superior derecha y seleccione Pantalla.

10. Proporcione un nombre y haga clic en Crear.

    

11. Una vez creada la pantalla, haga clic en el nombre de la pantalla para abrir la pantalla de detalles de visualización. Se debe asignar a la pantalla un canal que se haya sincronizado desde el sitio de demostración. Haga clic en Asignar canal en la parte superior derecha de la pantalla.

    

12. En el cuadro de diálogo, seleccione el canal y haga clic en Asignar.

    

Puede repetir estos pasos para las ubicaciones y pantallas adicionales. Una vez finalizado, habrá vinculado su sitio de demostración con AEM Screens y habrá completado la configuración necesaria.

Puede previsualizar la demostración simplemente en el editor de canales en AEMaaCS.

Uso del reproductor Screens

Para ver el contenido como en una pantalla real, puede descargar el reproductor y configurarlo localmente. AEM Screens as a Cloud Service enviará el contenido a su reproductor

Generar un código de registro

En primer lugar, deberá crear un código de registro para conectar de forma segura un reproductor a AEM Screens as a Cloud Service.

1. Vaya a Screens as a Cloud Service en https://experience.adobe.com/screens e inicie sesión.

2. En la parte superior derecha de la pantalla, compruebe que se encuentra en la organización correcta.

   

3. En el panel izquierdo, haga clic en Administración del reproductor -> Códigos de registro y luego haga clic en Crear código en la parte superior derecha de la pantalla.

1. Introduzca un nombre para el código y haga clic en Crear.

   

2. Una vez creado el código, aparece en la lista. Haga clic para copiar el código.

   

Instalación y configuración del reproductor

1. Descargue el reproductor para su plataforma desde https://download.macromedia.com/screens/ e instálelo.

2. Ejecute el reproductor y cambie a la pestaña Configuración, desplácese hasta la parte inferior para hacer clic y confirmar tanto Restablecer las propiedades de fábrica como Cambiar al modo de nube.

   

3. El reproductor cambiará automáticamente a la pestaña Registro del reproductor. Introduzca el código que ha generado anteriormente y haga clic en Registrar.

   

4. Cambie a la pestaña Información del sistema para confirmar que el reproductor se ha registrado.

   

Asignar reproductor a una pantalla

1. Vaya a Screens as a Cloud Service en https://experience.adobe.com/screens e inicie sesión.

2. En la parte superior derecha de la pantalla, compruebe que se encuentra en la organización correcta.

   

3. En el panel izquierdo, haga clic en Administración del reproductor -> Reproductores y verá el reproductor que instaló y registró anteriormente.

   

4. Haga clic en el nombre del reproductor para abrir sus detalles y, a continuación, haga clic en Asignar a la pantalla en la parte superior derecha de la pantalla.

   

5. En el cuadro de diálogo, seleccione la pantalla que creó anteriormente y, a continuación, haga clic en Seleccionar.

   

Reproducción

Una vez que haya asignado una pantalla a un reproductor, AEM Screens as a Cloud Service envía el contenido al reproductor donde está visible.

Siguientes pasos

Ahora que ha completado esta parte del recorrido del complemento de demostración de referencia de AEM, podrá hacer lo siguiente:

• Conocer los conceptos básicos de AEM Screens.
• Comprender el contenido de la demostración de We.Cafe.
• Saber cómo configurar AEM Screens para We.Cafe.

Está listo para explorar las capacidades de AEM Screens con sus propios sitios de muestra. Continuar con la siguiente sección del recorrido, Administrar los sitios de muestra, donde aprenderá sobre las herramientas disponibles para ayudarle a administrar sus sitios de muestra y cómo eliminarlos.

También puede consultar algunos de los recursos adicionales disponibles en la sección de Recursos adicionales para obtener más información sobre las funciones que ha visto en este recorrido.

Recursos adicionales

• Documentación de ContextHub: aprenda cómo se puede utilizar ContextHub para personalizar el contenido en función del contexto de usuario más allá de las condiciones meteorológicas.
• Uso de claves de API - Documentación de Google: una referencia práctica para obtener detalles acerca del uso de claves de API de Google.
• Pantallas: obtenga más información acerca de qué es una pantalla en AEM Screens y qué puede hacer.
• Descargar reproductor: aprenda cómo acceder al reproductor Screens y cómo instalarlo.
• Registrar reproductor: aprenda a configurar y registrar un reproductor en su proyecto de AEM Screens.
• Asignación del reproductor a una pantalla: configure un reproductor para mostrar el contenido.

Recursos de Business.Adobe.com