22.2 Présentation de Project Firefly

Objectifs

  • Comprendre Project Firefly.
  • Découvrez comment configurer un exemple de projet avec Project Firefly.

Conditions préalables

Avant de commencer cet exercice, assurez-vous d’avoir installé et configuré NodeJS et l’interface de ligne de commande d’Adobe I/O sur votre ordinateur. Voir Exercice 22.1 - Configuration de votre environnement pour plus d’informations.

2.2.1 Configuration de votre projet personnel

Pour commencer à utiliser Project Firefly, nous utiliserons la console d’Adobe I/O pour configurer notre projet personnel.

Connectez-vous à Adobe Developer Console à l’aide de votre Adobe ID.

Si vous êtes invité à utiliser un nouvel assistant Bienvenue dans le nouvel assistant Adobe Developer Console, cliquez sur Ignorer ou cliquez sur Suivant pour le parcourir.

Assistant de bienvenue

Assurez-vous de sélectionner la bonne organisation en haut à droite : --envName--.

Organisation

Cliquez sur Créer un projet à partir du modèle.

Dans l’écran de l’assistant Parcourir les modèles, sélectionnez Project Firefly.

Template Firefly

Dans l’écran de l’assistant Configuration d’un projet modèle, fournissez les détails suivants :

Template1

  • Titre du projet : [ldapname] Realtime Dashboard for EXP News où vous remplacez [ldapname] par votre propre nom LDAP d’Adobe, par exemple rmaur Realtime Dashboard for EXP News.
  • Nom de l’application : [ldapname]EXPNews où vous remplacez [ldapname] par votre propre nom LDAP d’Adobe, par exemple rmaurEXPNews.
  • Assurez-vous que l’option Inclure l’exécution avec chaque espace de travail est sélectionnée.

Cliquez sur + Ajouter Workspace pour ajouter un espace de travail supplémentaire.

Fournissez les détails suivants pour l’espace de travail :

  • Nom de l’espace de travail : Development.

  • Description de l’espace de travail : Development workspace for EXP News RT Dashboard.

Template2

Cliquez sur Enregistrer pour enregistrer le nouvel espace de travail.

Cliquez sur Enregistrer pour enregistrer votre projet.

Votre projet sera créé et, après un certain temps, il s’affichera dans l’écran de présentation.

Présentation

Cliquez sur Développement dans la mosaïque Développement pour afficher plus de détails sur l’environnement d’exécution spécifique créé pour votre application Project Firefly.

OverviewDevelopment

Vous pouvez voir l’environnement d’espace de noms d’exécution créé dans le cadre de l’application. dans l’exemple, il s’agit de 133309-rmaurexpnews-development

Nous avons maintenant fini de créer notre environnement d’exécution d’Adobe I/O, dont nous avons besoin pour notre application Project Firefly.

2.2.2.2 Connexion à partir de l’interface de ligne de commande d’Adobe I/O

Pour créer un exemple d’application Project Firefly, nous devons utiliser la ligne de commande sous Windows ou Mac OS. Les captures d’écran utilisées ci-dessous sont basées sur Mac OS X, mais les commandes exécutées sont les mêmes.

Ouvrez Terminal sous Mac OS ou une invite de commande sous Windows.

Accédez à l’emplacement spécifique sur votre lecteur où vous souhaitez créer votre premier projet. Par exemple, Développement

% cd Development

Connexion, utilisation

% aio login

TerminalLogin

Une fenêtre de navigateur doit s’ouvrir, vous demandant de vous connecter avec votre Adobe ID. Si la fenêtre ne s’est pas ouverte automatiquement, vous pouvez également copier-coller l’URL imprimée dans votre navigateur pour vous connecter.

% aio login
Visit this url to log in:
https://aio-login.adobeioruntime.net/api/v1/web/default/applogin?xxxxxxxx

BrowserLoggedIn

Une fois connecté, vous pouvez fermer la fenêtre du navigateur et revenir à votre terminal. Vous verriez une chaîne imprimée dans le terminal. Il s’agit de votre jeton d’utilisateur. Elle est automatiquement stockée dans votre configuration, ce qui permet à Project Firefly d’utiliser le jeton pour contacter Adobe Developer Console.

TerminalLoggedIn

2.2.3 Bootstrap d’une nouvelle application à partir de l’interface de ligne de commande d’Adobe I/O

Dans Terminal sous Mac OS ou une invite de commande sous Windows, commencez à créer une application que vous nommerez [ldap]HelloWorld.

Par exemple :

% aio app init rmaurHelloWorld

Vous serez invité à poser quelques questions sur la manière dont vous souhaitez que votre application soit amorcée et configurée :

  • Sélectionnez Organisation. Pour rechercher rapidement l’organisation --envName--, saisissez les premiers caractères derrière Sélectionner l’organisation. Sélectionnez ensuite --envName-- dans la liste obtenue.

Étape 1

  • Sélectionnez Projet. Pour rechercher rapidement votre projet, saisissez votre nom LDAP, puis sélectionnez le projet que vous avez créé dans l’exercice 22.2.1. Par exemple, recherchez rmaur, puis sélectionnez rmaur Realtime Dashboard for EXP News dans la liste qui s’affiche.

Étape 1

Sélectionnez Espace de travail. Sélectionnez l’espace de travail Development que vous avez créé dans le cadre de l’exercice 22.2.1.

Étape 1

Quelles fonctionnalités d’application Adobe I/O voulez-vous activer pour ce projet ?

Sélectionnez les composants à inclure. Sélectionner Actions: Deploy Runtime actions.

Étape 1

Quel type d’actions d’exemple souhaitez-vous créer ?

Sélectionnez le type d’actions à générer. Sélectionner Generic.

Étape 1

Quel type d’interface utilisateur souhaitez-vous ajouter à votre projet ?

Sélectionnez le modèle à générer. Sélectionner React Spectrum 3. Cela indique que nous utiliserons Adobe Spectrum, notre système de conception, pour créer l’application.

Étape 1

Nous sommes sur le point de créer un nouvel exemple d’action qui explique comment accéder à une API externe.

Comment souhaitez-vous nommer cette action ?. Appuyez sur Entrée pour accepter la valeur par défaut (generic).

Étape 1

Nous sommes sur le point de créer un nouvel exemple d’action qui crée des messages au format d’événements cloud et les publie dans les événements Adobe I/O.

Comment souhaitez-vous nommer cette action ?. Appuyez sur Entrée pour accepter la valeur par défaut (publish-events).

Étape 1

L’assistant génère désormais le code nécessaire à votre application et doit indiquer que l’exécution a réussi avec ✔ App initialization finished!.

Étape 1

Accédez au répertoire d’application que vous venez de créer [ladp]HelloWorld et répertoriez les fichiers générés.
% cd rmaurHelloWorld
% ls (Mac OS) ou
> dir (Windows)

Étape 1

21.2.4 Création et déploiement de l’application

Il existe de nombreuses façons de créer/tester/déployer l’application, mais pour cette activation, nous la restons simple et déployons l’application immédiatement à l’aide du Shell Experience Cloud.

Pour créer et déployer l’application :

Dans Terminal sous Mac OS ou une invite de commande sous Windows, vérifiez que vous vous trouvez dans le répertoire créé dans le cadre de votre application ([ldap]rmaurHelloWorld), puis saisissez :
% aio app deploy

Étape 1

La sortie peut être différente dans votre cas et avec les modifications apportées dans Project Firefly, mais il est important que vous voyiez d’abord le message succès de la génération, votre application est prête à être déployée ?? qui est suivi après un certain temps du message final Bien joué, votre application est maintenant en ligne ??.

Une fois votre application déployée, vous disposez de deux URL pour afficher l’application finale.

Copiez l’URL qui utilise le Shell Experience Cloud, indiqué par Pour afficher l’application déployée dans le shell Experience Cloud :…. L’URL utilisera votre nom d’espace de travail de développement d’Adobe I/O comme identifiant unique.

Ouvrez un nouveau navigateur incognito et accédez à https://experience.adobe.com. Une fois connecté, assurez-vous de sélectionner la bonne organisation en haut à droite : --envName--.

Collez l’URL de l’étape 2 dans le navigateur. Si tout va bien, l’écran suivant s’affiche.

Étape 2

Sélectionnez Vos actions d’application dans le rail de gauche. Dans Exécutez les actions du serveur principal de votre application

  • Sélectionnez Générique dans la liste déroulante Actions (obligatoire).
  • Cliquez sur Appeler
  • Les résultats de cet appel s’affichent dans la zone results . Vous pouvez l’agrandir pour afficher plus de contenu.

Étape 3

Vous avez maintenant déployé votre première application Project Firefly avec succès et avez terminé cet exercice.

Étape suivante : 22.3 Créer votre tableau de bord en temps réel EXP News

Revenir au module 22

Revenir à tous les modules

Sur cette page