22.3 Créer votre tableau de bord EXP News en temps réel

Objectifs

  • Comprenez comment Project Firefly peut fournir un tableau de bord personnalisé en temps réel présentant les informations d’AEP.
  • Découvrez comment créer et exécuter cet exemple de tableau de bord.

Conditions préalables

Avant de début cet exercice, assurez-vous d’avoir installé et configuré NodeJS et Adobe I/O CLI sur votre ordinateur. Voir Exercice 21.1 - Configuration de votre environnement pour plus de détails.

22.3.1 Téléchargement du code source

Le code source de ce projet est disponible en interne sur https://git.corp.adobe.com/IODevEnablement/poc-aep-realtime-dashboard et développé par Duy Nguyen de l'équipe Adobe I/O.
Cependant, pour éviter que tout le monde comprenne comment cloner ou télécharger du code à partir d'un référentiel github, nous avons rendu le code disponible en tant que fichier ZIP directement à partir de ce module d'activation. Si vous êtes à l'aise avec l'utilisation de github, vous pouvez également cloner le code à partir de là.

Pour récupérer le code source dans ce module d'activation :

  • Téléchargez-le ici.
  • Extrayez le fichier ZIP à un emplacement sur votre ordinateur.

22.3.2 Création du tableau de bord en temps réel

Pour créer une application Firefly tableau de bord en temps réel :

Accédez au répertoire dans lequel vous avez extrait le fichier ZIP dans l’exercice 22.3.1, par ex. poc-aep-realtime-dashboard-master.

Dans le répertoire, exécutez npm install pour installer tous les packages requis pour l’application.

npminstall

Copiez le fichier d'environnement .env (contenant toutes les configurations pour votre environnement d'exécution Adobe I/O) de votre projet [ldap]HelloWorld que vous avez créé et déployé dans l'exercice 22.2.

Par exemple : cp <rmaurHelloWorld directory>/.env . pour Mac OS
ou copy <rmaurHellowWorld directory>\.env . pour Windows.

Notez que le fichier d'environnement est un fichier soi-disant masqué et que vous ne verrez peut-être pas le fichier dans le Finder / Explorer, il est donc préférable de copier le fichier à l'aide de la ligne de commande.

cp

Vous pouvez inspecter le fichier d'environnement .env à l'aide de votre éditeur de texte ou commande favori. Il doit définir votre espace de nommage Adobe I/O et votre code d'authentification

more

Déployez l’application à l’aide de aio app deploy. Encore une fois, la sortie que vous voyez peut différer de la capture d’écran ci-dessous, mais attendez de voir Bravo, votre application est maintenant en ligne ??.

deploy

Votre application de tableau de bord finale est désormais disponible sur l’URL mentionnée comme la dernière dans la sortie de la commande aio app deploy ; par exemple https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://133309-rmaurexpnews-development.adobeio-static.net/index.html

  • Copie de l’URL.
  • Ouvrez une nouvelle fenêtre de navigateur incognito et connectez-vous à https://experience.adobe.com.
  • Vérifiez que vous êtes dans la bonne organisation (cochez la case en haut à droite) : --envName--.
  • Collez l’URL. L’application de tableau de bord deviendra disponible.

application de tableau de bord aep

L'application de Tableau de bord en temps réel Project Firefly EXP News ne fournira pas encore d'informations, car nous ne lui avons pas indiqué d'où recevoir ses informations. C'est là que le module d'activation précédent, sur le transfert côté serveur du lancement d'Adobe, devient pertinent, et ainsi de suite à l'exercice suivant.

Vous avez maintenant terminé cet exercice.

Étape suivante : 22.4 Connectez la collecte de données EXP News à votre tableau de bord EXP News en temps réel

Revenir au module 22

Revenir à tous les modules

Sur cette page