Activez AEM Screens pour votre site de démonstration

Découvrez les étapes pour activer l’expérience complète AEM Screens as a Cloud Service sur votre site de démonstration.

Un peu d’histoire…

Dans le document précédent du parcours du module complémentaire des démonstrations de référence d’AEM, Créer un site de démonstration, vous avez créé un site de démonstration basé sur les modèles du module complémentaire de démonstration de référence. Vous devez maintenant :

  • Découvrir comment accéder à l’environnement de création AEM.
  • Savoir comment créer un site à partir d’un modèle.
  • Découvrir les principes de base de la navigation dans la structure du site et de la modification d’une page.

Maintenant que vous disposez de votre propre site de démonstration pour explorer et comprendre les outils disponibles pour vous aider à gérer vos sites de démonstration, vous pouvez activer l’expérience AEM Screens as a Cloud Service complète pour vos sites de démonstration.

Objectif

Le module complémentaire de démonstration de référence d’AEM contient du contenu AEM Screens pour We.Cafe, une entreprise de café à intégration verticale. Ce document vous aide à comprendre comment exécuter la configuration de démonstration We.Cafe dans le contexte d’AEM Screens. Après avoir lu ce document, vous devriez :

  • Connaître les principes de base d’AEM Screens.
  • Comprendre le contenu de la démonstration de We.Cafe.
  • Découvrir comment configurer AEM Screens pour We.Cafe.
    • Découvrir comment créer un projet Screens pour We.Cafe.
    • Pouvoir configurer un service météorologique simulé à l’aide des feuilles de calcul Google Sheets et des API.
    • Simuler le contenu Screens qui change de manière dynamique en fonction de votre « service météorologique ».
    • Installer et utiliser le lecteur Screens.

Comprendre Screens

AEM Screens as a Cloud Service est une solution de signalétique numérique qui permet aux marketeurs de créer et de gérer des expériences numériques dynamiques à grande échelle. Avec AEM Screens as a Cloud Service, vous pouvez créer des expériences de signalétique numérique attrayantes et dynamiques destinées aux espaces publics.

CONSEIL

Pour des détails complets sur AEM Screens as a Cloud Service, consultez la section Ressources supplémentaires à la fin de ce document.

En installant le module complémentaire de démonstration de référence d’AEM, vous disposez automatiquement du contenu We.Cafe pour AEM Screens dans votre environnement de création de démonstration. Les étapes décrites dans Déploiement d’un projet Screens de démonstration vous permettent d’activer l’expérience AEM Screens complète en publiant ce contenu et en le déployant sur les lecteurs multimédia, etc.

Comprendre le contenu de démonstration

Le café We.Cafe se compose de trois boutiques situées à trois endroits aux États-Unis. Les trois magasins ont trois expériences similaires :

  • Un panneau de menus au-dessus du comptoir avec deux ou trois panneaux verticaux
  • Un affichage à l’entrée face à la rue avec un panneau horizontal ou vertical invitant les clients à entrer dans la boutique
  • Un kiosque de commande rapide en libre-service avec une tablette verticale pour contourner la file d’attente
REMARQUE

Seul l’affichage à l’entrée peut être testé dans la version actuelle de la démonstration. D’autres affichages suivront dans une version ultérieure.

Le kiosque n’est pas inclus dans la version actuelle de la démonstration. Il sera inclus dans une version ultérieure.

L’emplacement à New York est supposé se trouver dans un magasin plus petit avec peu d’espace, et donc :

  • Le panneau de menus n’a que deux panneaux verticaux au lieu de trois pour les boutiques de San Francisco et San Jose.
  • L’affichage à l’entrée est positionné à la verticale et non à l’horizontale
REMARQUE

Si vous décidez de vous connecter au Cloud Service Screens dans la section Connexion à Screens as a Cloud Service, veuillez créer les emplacements sous forme de dossiers sous les affichages. Consultez la section Ressources supplémentaires à la fin de ce document pour plus d’informations sur les affichages.

Disposition de Cafe

Les emplacements We.Cafe ont les dispositions suivantes.

Dispositions We.Cafe

REMARQUE

Les mesures pour les écrans sont en pouces.

Entrée

L’affichage à l’entrée est fractionné par jour et seule la première image change entre le matin et l’après-midi. À chaque passage de la séquence, l’affichage fait également la publicité d’une préparation au café différente, en utilisant une séquence incorporée limitée pour lire un article différent à chaque fois.

La dernière image des canaux d’entrée est également ciblée (c’est-à-dire modifiée de manière dynamique) en fonction de la température extérieure, qui peut être simulée comme décrit dans la section Création d’une source de données simulée.

Déploiement d’un projet Screens de démonstration

Pour utiliser le contenu de démonstration dans le Sandbox que vous avez créé à l’étape Créer un programme, un site doit être créé à partir d’un modèle.

Si vous n’avez pas encore créé de site de démonstration We.Cafe, procédez simplement comme indiqué dans la section Créer un site de démonstration. Au moment de sélectionner le modèle, il vous suffit de choisir le Modèle de site web We.Cafe.

Modèle We.Cafe

Une fois l’assistant terminé, vous trouverez le contenu déployé sous Sites et vous pourrez parcourir et explorer comme vous le feriez pour tout autre contenu.

Contenu We.Cafe

Maintenant que vous disposez du contenu de démonstration We.Cafe, vous avez le choix de la manière dont vous souhaitez tester AEM Screens :

Modifier de manière dynamique du contenu Screens

Tout comme AEM Sites, AEM Screens peut modifier le contenu de manière dynamique en fonction du contexte. La démonstration We.Cafe comporte des canaux configurés pour afficher un contenu différent en fonction de la température actuelle. Pour simuler cela, nous devrons créer notre propre service météorologique simple.

Création d’une source de données simulée

Comme il est très difficile de modifier la météo pendant une démonstration ou pendant les tests, les changements de température doivent être simulés. Nous simulerons un service météorologique en stockant une valeur de température dans une feuille de calcul Google Sheet, que AEM ContextHub appellera pour récupérer la température.

Création de la clé API Google

Tout d’abord, nous devrons créer une clé API Google pour faciliter l’échange de données.

  1. Connectez-vous à un compte Google.

  2. Ouvrez la console Cloud à l’aide de ce lien https://console.cloud.google.com.

  3. Créez un nouveau projet en cliquant sur le nom actuel du projet dans le coin supérieur gauche de la barre d’outils, après le libellé Google Cloud Platform.

    Console Google Cloud

  4. Dans la boîte de dialogue du sélecteur de projet, cliquez sur NOUVEAU PROJET.

    Nouveau projet

  5. Attribuez un nom au projet et cliquez sur CRÉER.

    Créer un projet

  6. Assurez-vous que votre nouveau projet est sélectionné, puis, à l’aide du menu hamburger du tableau de bord de la console cloud, sélectionnez API et services.

    API et services

  7. Dans le volet de gauche de la fenêtre API et services, cliquez sur Informations d’identification dans la partie supérieure de la fenêtre, puis cliquez sur CRÉER DES INFORMATIONS D’IDENTIFICATION et Clé API.

    Informations d’identification

  8. Dans la boîte de dialogue, copiez votre nouvelle clé API et enregistrez-la pour une utilisation ultérieure. Cliquez sur FERMER pour fermer la boîte de dialogue.

Activation de l’API Google Sheets

Pour permettre l’échange de données de Google Sheets à l’aide de votre clé API, vous devez activer l’API Google Sheets

  1. Revenez sur la console Google Cloud à l’adresse https://console.cloud.google.com pour votre projet, puis utilisez le menu hamburger pour sélectionner API et services -> Bibliothèque.

    Bibliothèque d’API

  2. Dans l’écran Bibliothèque d’API, faites défiler l’écran pour rechercher API Google Sheets. Cliquez dessus.

    Recherche de bibliothèque d’API

  3. Dans la fenêtre API Google Sheets cliquez sur ACTIVER.

    API Google Sheets

Création d’une feuille de calcul Google Sheets

Vous pouvez maintenant créer une feuille de calcul Google Sheets pour stocker vos données météorologiques.

  1. Accédez à https://docs.google.com et créez une nouvelle feuille de calcul Google Sheets.

  2. Définissez la température en saisissant 32 dans la cellule A2.

  3. Partagez le document en cliquant sur Partager en haut à droite de la fenêtre et sous Obtenir le lien cliquez sur Modifier.

    Partager la feuille

  4. Copiez le lien pour l’étape suivante.

    Partager le lien

  5. Recherchez l’ID de la feuille.

    • L’ID de la feuille est la chaîne de caractères aléatoire dans le lien de la feuille que vous avez copié après d/ et avant /edit.
    • Par exemple :
      • Si votre URL est https://docs.google.com/spreadsheets/d/1cNM7j1B52HgMdsjf8frCQrXpnypIb8NkJ98YcxqaEP30/edit#gid=0
      • L’ID de la feuille est 1cNM7j1B52HgMdsjf8frCQrXpnypIb8NkJ98YcxqaEP30.
  6. Copiez l’ID de la feuille pour une utilisation ultérieure.

Test de votre service météorologique

Maintenant que vous avez créé votre source de données en tant que feuille de calcul Google Sheets et que vous avez activé l’accès via l’API, testez-la pour vous assurer que votre « service météorologique » est accessible.

  1. Ouvrez un navigateur web.

  2. Saisissez la requête suivante, en remplaçant les valeurs d’ID de feuille et de clé API que vous avez enregistrées précédemment.

    https://sheets.googleapis.com/v4/spreadsheets/<yourSheetID>/values/Sheet1?key=<yourAPIKey>
    
  3. Si vous recevez des données JSON similaires à ce qui suit, vous pouvez les configurer correctement.

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

AEM Screens peut utiliser ce même service pour accéder aux données météorologiques simulées. Cette configuration sera effectuée à l’étape suivante.

Configuration de ContextHub

AEM Screens peut modifier le contenu de manière dynamique en fonction du contexte. La démonstration We.Cafe comporte des canaux configurés pour afficher un contenu différent en fonction de la température actuelle en exploitant AEM ContextHub.

CONSEIL

Pour des détails complets sur ContextHub, consultez la section Ressources supplémentaires à la fin de ce document.

Lorsque le contenu de l’écran s’affiche, ContextHub appelle votre service météo pour trouver la température actuelle afin de déterminer le contenu à afficher.

À des fins de démonstration, les valeurs de la feuille peuvent être modifiées. ContextHub le reconnaîtra et le contenu s’ajustera dans le canal en fonction de la température mise à jour.

  1. Sur l’instance d’auteur AEMaaCS, accédez à Navigation globale -> Outils -> ContextHub.
  2. Sélectionnez le conteneur de configuration qui porte le même nom que celui que vous avez donné au projet lorsque vous avez créé le projet Screens à partir de Modèle de site web We.Cafe.
  3. Sélectionnez Configuration -> Configuration de ContextHub -> Google Sheets puis cliquez sur Suivant en haut à droite.
  4. La configuration doit déjà comporter des données JSON préconfigurées. Deux valeurs doivent être modifiées :
    1. Remplacez [your Google Sheets id] avec l’ID de feuille vous avez enregistré précédemment.
    2. Remplacez [your Google API Key] avec la clé API vous avez enregistrée précédemment.
  5. Cliquez sur Enregistrer.

Vous pouvez désormais modifier la valeur de la température dans votre feuille de calcul Google Sheet et ContextHub mettra à jour Screens de manière dynamique lorsqu’il « verra le changement de température ».

Test des données dynamiques

Maintenant qu’AEM Screens et ContextHub sont connectés à votre service météorologique, vous pouvez tester ce dernier pour voir la façon dont les écrans peuvent mettre à jour le contenu de manière dynamique.

  1. Accédez à votre instance d’auteur sandbox.

  2. Accédez à la console Sites via Navigation globale -> Sites et sélectionnez la page suivante : Screens -> <project-name> -> Canaux -> Entrée du matin (Portrait).

    Sélectionnez le contenu du projet de démonstration

  3. Cliquez sur Modifier dans la barre d’outils ou saisissez la touche de raccourci e pour modifier la page.

  4. Dans l’éditeur, vous pouvez voir le contenu. Notez qu’une image est fortement éclairée en bleu avec une icône de ciblage dans le coin.

    Contenu Screens dans l’éditeur

  5. Modifiez la température que vous avez saisie dans votre feuille de calcul de 32 °F (0 °C) à 70 °F (21 °C) et observez le changement de contenu.

    Contenu Screens dans l’éditeur

Lorsque la température passe d’un glacial 32 °F (0 °C) à un confortable 70 °F (21 °C), l’image en vedette passe d’une tasse de thé chaude à un café glacé.

IMPORTANT

Utilisez uniquement la solution Google Sheets décrite à des fins de démonstration. Adobe ne prend pas en charge l’utilisation de Google Sheets dans des environnements de production.

Connexion à Screens as a Cloud Service

Si vous souhaitez également configurer une véritable expérience de signalétique numérique, y compris sur un lecteur qui s’exécute sur un périphérique de signalétique numérique ou sur votre ordinateur, procédez comme suit.

Vous pouvez également prévisualiser la démonstration simplement dans l’éditeur de canal sur AEMaaCS.

CONSEIL

Pour des détails complets sur l’éditeur de canal, consultez la section Ressources supplémentaires à la fin de ce document.

Configuration d’AEM Screens as a Cloud Service

Tout d’abord, vous devrez publier votre contenu de démonstration Screens sur AEM Screens as a Cloud Service et configurer le service.

  1. Publiez le contenu de votre projet Screens de démonstration.

  2. Accédez à Screens as a Cloud Service à l’adresse https://experience.adobe.com/screens et connectez-vous.

  3. Dans le coin supérieur droit de l’écran, vérifiez que vous vous trouvez dans la bonne organisation.

    Vérification de votre organisation Screens

  4. En haut à gauche, cliquez sur l’icône en forme d’engrenage : Modifier les paramètres.

    Modifier les paramètres

  5. Indiquez les URL des instances d’auteur et de publication AEMaaCS dans lesquelles vous avez créé votre site de démonstration, puis cliquez sur Enregistrer.

    Paramètres Screens

  6. Une fois connecté à vos instances de démonstration, Screens extrait le contenu de votre canal. Cliquez sur Canaux dans le volet de gauche pour afficher les canaux publiés. Il faudra peut-être un moment pour que l’information soit renseignée. Vous pouvez cliquer sur le bouton bleu Synchronisation en haut à droite de l’écran pour mettre à jour les informations.

    Informations sur le canal de démonstration

  7. Cliquez sur Affichages dans le volet de gauche. Vous n’en avez pas encore créé pour votre démonstration. Nous simulerons l’emplacement de We.Cafe en créant des dossiers pour chacun d’eux. Cliquez sur Créer dans le coin supérieur droit de l’écran, puis sélectionnez Dossier.

    Création d’un affichage

  8. Dans la boîte de dialogue, indiquez un nom de dossier tel que San Jose et cliquez sur Créer.

  9. Ouvrez le dossier en cliquant dessus, puis cliquez sur Créer en haut à droite et sélectionnez Affichage.

  10. Indiquez un nom d’affichage et cliquez sur Créer.

    Création d’un affichage

  11. Une fois l’affichage créé, cliquez sur son nom pour ouvrir l’écran des détails de l’affichage. Un canal synchronisé à partir de votre site de démonstration doit être attribué à l’affichage. Cliquez sur Attribuer le canal en haut à droite de l’écran.

    Détails du canal

  12. Dans la boîte de dialogue, sélectionnez le canal et cliquez sur Attribuer.

    Attribuer le canal

Vous pouvez répéter ces étapes pour vos autres emplacements et affichages. Une fois terminé, vous avez associé votre site de démonstration à AEM Screens et vous avez terminé la configuration nécessaire.

Vous pouvez prévisualiser la démonstration simplement dans l’éditeur de canal sur AEMaaCS.

Utilisation du lecteur Screens

Pour afficher le contenu tel qu’il apparaît sur un écran réel, vous pouvez télécharger le lecteur et le configurer localement. AEM Screens as a Cloud Service diffusera alors le contenu sur votre lecteur

Génération d’un code d’enregistrement

Vous devrez d’abord créer un code d’enregistrement pour connecter un lecteur à AEM Screens as a Cloud Service en toute sécurité.

  1. Accédez à Screens as a Cloud Service à l’adresse https://experience.adobe.com/screens et connectez-vous.

  2. Dans le coin supérieur droit de l’écran, vérifiez que vous vous trouvez dans la bonne organisation.

    Vérification de votre organisation Screens

  3. Dans le volet de gauche, cliquez sur Gestion du lecteur -> Codes d’enregistrement puis cliquez sur Créer du code en haut à droite de l’écran.

Codes d’enregistrement

  1. Saisissez un nom pour le code puis cliquez sur Créer.

    Création d’un code

  2. Une fois le code créé, il apparaît dans la liste. Cliquez sur le code pour le copier.

    Code d’enregistrement

Installez et configurez le lecteur

  1. Téléchargez le lecteur correspondant à votre plateforme depuis https://download.macromedia.com/screens/ et installez-le.

  2. Exécutez le lecteur et passez à l’onglet Configuration, faites défiler la page vers le bas pour cliquer et confirmer à la fois Réinitialisation d’usine puis Passage en mode cloud.

    Paramètres du lecteur

  3. Le lecteur passe automatiquement à l’onglet Enregistrement du lecteur. Saisissez le code que vous avez généré précédemment et cliquez sur Enregistrer.

    Enregistrement du lecteur

  4. Passez à l’onglet Informations système pour confirmer que le lecteur a été enregistré.

    Lecteur enregistré

Attribuez un lecteur à un affichage

  1. Accédez à Screens as a Cloud Service à l’adresse https://experience.adobe.com/screens et connectez-vous.

  2. Dans le coin supérieur droit de l’écran, vérifiez que vous vous trouvez dans la bonne organisation.

    Vérification de votre organisation Screens

  3. Dans le volet de gauche, cliquez sur Gestion du lecteur -> Lecteurs et vous verrez le lecteur que vous avez installé et enregistré précédemment.

    Lecteurs

  4. Cliquez sur le nom du lecteur pour en afficher les détails, puis cliquez sur Attribuer à l’affichage dans le coin supérieur droit de l’écran.

    Attribution d’un lecteur à un affichage

  5. Dans la boîte de dialogue, sélectionnez l’affichage que vous avez créé précédemment, puis cliquez sur Sélectionner.

    Attribution d’un affichage

Lecture!

Une fois que vous avez attribué un affichage à un lecteur, AEM Screens as a Cloud Service diffuse le contenu sur votre lecteur là où il est visible.

Entrée (Portrait)

Entrée (Paysage)

Prochaines étapes

Maintenant que vous avez terminé cette partie du parcours de module complémentaire de démonstration de référence d’AEM, vous devez :

  • Connaître les principes de base d’AEM Screens.
  • Comprendre le contenu de la démonstration de We.Cafe.
  • Découvrir comment configurer AEM Screens pour We.Cafe.

Vous êtes maintenant prêt à explorer les fonctionnalités d’AEM Screens à l’aide de vos propres sites de démonstration. Passez à la section suivante du parcours, Gérer vos sites de démonstration, où vous découvrirez les outils disponibles pour vous aider à gérer vos sites de démonstration et comment les supprimer.

Vous pouvez également consulter certaines des ressources supplémentaires disponibles dans la Section Ressources supplémentaires pour en savoir plus sur les fonctionnalités rencontrées dans ce parcours.

Ressources supplémentaires

Sur cette page