DocumentationLearning Manager

Package de site de référence Adobe Learning Manager (site de référence ALM) pour AEM Sites.

Last update: Tue Jan 30 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Adobe Learning Manager (ALM) s’intègre aux sites Adobe Experience Manager (AEM). Cela vous permet de créer votre propre site web et des interfaces mobiles réactives pour Adobe Learning Manager avec un minimum d’effort de codage. Grâce à cette intégration, vous pouvez créer des expériences d'apprentissage personnalisées pour vos utilisateurs.

Pour créer une telle expérience, ALM fournit un package de site de référence Adobe Learning Manager (package de site de référence ALM) pour AEM Sites sous la forme d’un fichier ZIP que vous pouvez installer sur votre instance AEM Sites.

Ce package inclut des modèles de page Web AEM Sites et des composants de site Web ainsi que des widgets incorporables, par exemple, Catalogue d’apprentissage, widgets incorporables, calendrier, etc.

Après avoir installé le package du site de référence ALM, vous pouvez commencer à créer un site Web pour Adobe Learning Manager que vous pouvez héberger sur votre instance AEM Sites. Vos utilisateurs peuvent ensuite faire glisser et déposer les composants sur le site Web.

Installation du package de site de référence ALM

Prérequis

  • Licences pour AEM Sites et Adobe Commerce.
  • AEM on-premise 6.5 ou Adobe Experience Manager - Cloud Service
  • Adobe Commerce 2.4.3

Après avoir sécurisé votre environnement AEM Sites, vous devez installer le package du site de référence ALM. Ce package comprend des pages Web et des composants de site Web AEM qui aident à construire la plateforme d'apprentissage.

Le package du site de référence est hébergé sur le référentiel GitHub.

Pour plus d’informations, consultez la section LISEZ-MOI.

Créer une application dans Adobe Learning Manager

Après avoir installé le package du site AEM, vous devez configurer une application ALM pour connecter votre portail d'apprentissage au site AEM.

Ce scénario s’applique lorsqu’AEM est utilisé avec Adobe Learning Manager.

Procédez comme suit :

  1. En tant qu’administrateur d’intégration, cliquez sur Applications.

  2. Pour créer une nouvelle application, cliquez sur Inscrire dans le coin supérieur droit de la page.

  3. Dans l’écran Enregistrer une nouvelle application, entrez les informations suivantes :

    1. Nom de l'application : nom de l'application que vous créez.
    2. URL : URL de votre organisation.
    3. Rediriger les domaines : domaines d'hébergement du site Web AEM. Vous pouvez également spécifier des caractères génériques.
    4. Description : description de l'application.
    5. Domaines : sélectionnez Accès en lecture au rôle Élève et Accès en écriture au rôle Élève.
    6. Pour ce compte uniquement ? : sélectionnez Oui si vous souhaitez utiliser l'application pour le compte ALM existant.

  4. Après avoir apporté les modifications, cliquez sur Enregistrer.

Notez les informations d’identification de l’application depuis l’écran.


Informations d’identification de l’application

Pour approuver l’application, cliquez sur Approuver.

Obtention des jetons

  1. Dans l’onglet Ressources pour les développeurs, cliquez sur Jetons d’accès pour le test et le développement.

    Sélectionner des jetons d’accès pour le test et le développement

  2. Saisissez les détails suivants :


    Saisie des détails du jeton

    1. Obtenir le code OAuth : entrez l’ID client de la section précédente et modifiez l’étendue. Cliquez sur Envoyer pour obtenir le code Oauth.
    2. Obtenir le jeton d’actualisation : entrez l'ID et le secret du client de la section précédente. Saisissez également le code OAuth obtenu à l’étape précédente. Cliquez sur Envoyer.
    3. Obtenir le jeton d’accès : entrez l'ID et le secret du client de la section précédente. Saisissez également le jeton d’actualisation obtenu à l’étape précédente. Cliquez sur Envoyer.
    4. Obtenir les détails du jeton d’accès : entrez le jeton d’accès que vous avez obtenu à l’étape précédente. Cliquez sur Envoyer.

  3. Vous pouvez obtenir les détails de la réponse JSON qui suit. La réponse comprend le jeton d’accès, le jeton d’actualisation, le rôle d’utilisateur, l’ID de compte, l’ID d’utilisateur et l’heure d’expiration. Notez le jeton d’actualisation, car vous le réutiliserez.

Configuration d’un compte ALM dans AEM

  1. Lancez votre instance AEM.

  2. Cliquez sur Paramètres > Cloud Service.

  3. Cliquez sur Configuration d’Adobe Learning Manager.


    Sélectionner la configuration d’Adobe Learning Manager

  4. Cliquez sur Créer > Dossier de configuration. Nommez votre dossier.


    Créer une configuration

  5. Dans le projet d’apprentissage, sélectionnez la configuration que vous avez créée.

  6. Entrez les détails de la configuration.


    Créer un dossier de configuration

    1. Mode Adobe de Learning Manager : choisissez la façon dont vous souhaitez que l’expérience d’apprentissage soit disponible pour les élèves connectés et non connectés.
    2. URL d’Adobe de Learning Manager : entrez l’URL de l’instance ALM où les services d’apprentissage sont hébergés.
    3. ID de compte : ID du compte ALM.
    4. ID client, secret client et jeton d’actualisation de l’auteur : saisissez les informations d’identification obtenues lors de la création de l’application dans ALM.
    5. Personnalisation du widget : pour plus d’informations, voir Intégration avec AEM .

  7. Enregistrez et fermez la configuration.

AEM + Adobe Learning Manager (utilisateurs connectés/non connectés)

Adobe Learning Manager vous permet désormais de présenter vos produits et formations à vos clients et partenaires existants et potentiels, sans création de compte ni connexion. Cette fonctionnalité vous aidera à favoriser l’adoption des produits et des formations en fournissant aux élèves un aperçu rapide et facile des formations, ce qui permet de mettre en évidence et de promouvoir les fonctionnalités des produits. Par conséquent, vous pouvez présenter efficacement vos produits et offres, en particulier aux clients et partenaires potentiels, ce qui a pour effet d’accroître la sensibilisation aux produits. La facilité d’accès et l’accessibilité accrue suscitent un intérêt conséquent, ce qui contribue à stimuler les inscriptions à la formation et l’adoption de l’apprentissage.

À l’aide de ce workflow, un élève peut prévisualiser une formation, accéder aux informations sur la formation ou rechercher une formation sans se connecter à Adobe Learning Manager. Ce workflow ne s’applique pas à l’interface Learning Manager native (applicable UNIQUEMENT à AEM Sites et à d’autres interfaces sans tête).

Configuration et activation du connecteur de plateforme d’apprentissage

Cette section souligne les étapes nécessaires pour configurer et activer le connecteur suivant :

Accès aux données de formation

Ce connecteur permet à votre interface utilisateur sans tête basée sur AEM Sites ou toute autre interface utilisateur personnalisée d’extraire et de restituer des informations de formation aux élèves et d’effectuer une recherche transparente des informations de formation avant ou après la connexion d’un élève.

Ce connecteur n’est requis que si vous utilisez des interfaces AEM Sites ou d’autres interfaces sans tête.

Le connecteur exporte des métadonnées de formation vers une solution de stockage et d'extraction de données ainsi qu'un système d'activation de recherche. Par conséquent, vous pouvez configurer votre interface utilisateur sans tête basée sur AEM Sites ou toute autre interface utilisateur personnalisée pour utiliser ces deux services afin de récupérer les données de formation, de rendre des pages Web et de fournir aux élèves une fonctionnalité de recherche de formation optimisée. Par exemple, une interface AEM Sites non connectée peut utiliser les métadonnées exportées pour aider un élève à rechercher, parcourir et accéder aux pages de formation qui affichent des informations de formation.

Activez ce connecteur pour créer et générer le rendu de vos pages Web AEM Sites et offrir des expériences personnalisées à vos élèves avant et après la connexion. Activez ce connecteur pour créer et générer le rendu de vos pages Web AEM Sites et offrir des expériences personnalisées à vos élèves avant et après la connexion.

  • URL de base du CDN d'Adobe Learning Manager : entrez l'URL de base du chemin d'accès au service CDN de récupération de données à partir de la page de connexion Accès aux données de formation.
  • Jeton d’actualisation d’administrateur : entrez le jeton d’actualisation que vous avez déterminé dans la section précédente.
  • URL de base des métadonnées de formation : entrez l'URL de base du chemin du service d'activation de la recherche et de récupération des données de recherche à partir de la page de connexion Accès aux données de formation.
  • URL d’inscription d’Adobe Learning Manager : entrez l’URL d’inscription automatique générée par l’administrateur d’intégration pour le compte, qui est utilisée par les élèves pour s’inscrire à la formation.

AEM + Adobe Learning Manager + Adobe Commerce (utilisateurs connectés/non connectés)

Adobe Learning Manager fournit désormais des solutions pour vous aider à intégrer de manière transparente la plateforme d’apprentissage à Adobe Commerce. Cette version vous permet de connecter facilement vos interfaces de gestion de formation natives, basées sur des sites AEM ou d'autres interfaces sans tête à Adobe Commerce. Cette intégration vous permet de tirer parti des fonctionnalités d'e-commerce de votre plateforme d'apprentissage. Vous pouvez désormais proposer des formations payantes à vos clients et partenaires commerciaux et faciliter l'achat de formations sur des interfaces Learning Manager natives et non natives. Un élève peut également prévisualiser une formation, accéder aux informations sur la formation ou rechercher une formation sans se connecter à Adobe Learning Manager.

Un utilisateur peut utiliser l’application AEM déjà existante et l’approuver au lieu d’en créer une.

  • URL de base du réseau CDN d'Adobe Learning Manager : entrez l'URL de base du chemin d'accès du service CDN de récupération de données à partir de la page de connexion Adobe Commerce.
  • URL Adobe Commerce : saisissez l’URL de l’instance Adobe Commerce que vous utilisez.
  • Chemin d’accès du proxy GraphQL : les composants Learning Manager côté client accèdent directement au point d’entrée Adobe Commerce GraphQL et une erreur CORS peut donc se produire. Pour éviter cette erreur, tous les appels doivent être servis à partir du même point de terminaison qu’AEM ou via un proxy qui ajoute des en-têtes CORS.
  • Nom de la boutique Adobe Commerce : saisissez le nom de la boutique Adobe Commerce que vous avez déterminé dans la section précédente.
  • Durée de vie du jeton client Adobe Commerce (en secondes) : entrez la durée de vie du jeton client indiquant la période prédéterminée pour une session de connexion.
  • Jeton d’actualisation d’administrateur : entrez le jeton d’actualisation que vous avez déterminé dans la section précédente.

Personnalisation des pages Web

Personnalisez vos pages Web à l’aide du site de références AEM et des widgets disponibles.

  1. Lancez votre instance AEM.

  2. Cliquez sur Sites et ouvrez la page de configuration.

  3. Cliquez sur Site d’apprentissage > Maîtres linguistiques > Anglais. Toutes les pages Web du projet sont incluses dans le dossier.


    Afficher toutes les pages Web

  4. Sélectionnez un modèle et cliquez sur Modifier.

  5. Sur la page, cliquez sur le bouton Paramètres du composant et modifiez les propriétés du composant.


    Bouton Sélectionner les paramètres

  6. Affichez un aperçu des modifications ou publiez la page.

Création de pages Web

Outre les modèles que vous pouvez utiliser et qui sont fournis par le package du site de référence, vous pouvez également créer des pages Web basées sur les modèles dans AEM.

  1. Sur la page AEM principale, cliquez sur Créer > Page.

  2. Choisissez le modèle que vous souhaitez personnaliser. Cliquez sur Suivant.

  3. Saisissez les propriétés de la page.


    Propriétés de la page

  4. Pour créer la page, cliquez sur Créer.

  5. Sélectionnez la nouvelle page et cliquez sur Modifier.

  6. Insérez un composant sur la page, par exemple : Formation - Contenu.


    Filtrer par site

  7. Choisissez les filtres de catalogue requis qui seront affichés sur la page.

Créer un site à partir de Blueprint

Le package du site de référence ALM fournit un « Plan du site d’apprentissage », qui vous permet de créer un site Web pour votre plate-forme d’apprentissage. Les plans AEM vous permettent de créer des pages Web directement à partir de composants AEM Sites. Vous n’avez pas besoin d’utiliser de modèles.

  1. Sur la page de démarrage AEM, cliquez sur Sites.

  2. Cliquez sur Créer > Site.

  3. Cliquez sur Plan du site d'apprentissage.

    Créer un site à partir d'un plan directeur

  4. Cliquez sur Suivant.

  5. Sur la page des propriétés, saisissez les métadonnées de la page. Cliquez sur Créer.


    Sélectionner le plan du site d'apprentissage

  6. Cliquez sur le lien hypertexte Accueil pour accéder à la page d’accueil du site que vous avez créé. Sur cette page, vous pouvez personnaliser les widgets et les composants de catalogue.

Programmation de votre site Web

En plus d’utiliser les modèles intégrés et de créer votre site Web à partir de zéro à l’aide des composants WYSIWYG, vous pouvez également écrire du code et créer le site.

Le code se trouve dans le Référentiel GitHub du site de référence pour que vous puissiez commencer.

Les principales parties du modèle sont les suivantes :

  • core : offre groupée Java contenant toutes les fonctionnalités de base telles que les services OSGi, les écouteurs ou les planificateurs, ainsi que le code Java associé aux composants tels que les servlets ou les filtres de requête.
  • ui.apps : contient les parties /apps (et /etc) du projet, c'est-à-dire les clients JS&CSS, les composants et les modèles.
  • ui.content : contient un exemple de contenu à l’aide des composants de l’interface utilisateur.apps
  • ui.frontend : contient des composants React.

Tout le code est dans le référentiel pour vous mettre en route.

Importer et ajouter des composants du gestionnaire d'apprentissage à une page Web ou un modèle existant

L’installation du package de site de référence AEM ajoute les composants Learning Manager à votre instance AEM Sites. Par défaut, vous pouvez ajouter ces composants au site d’apprentissage du projet Web (site Web) que nous fournissons prêts à l’emploi. Ces composants sont également disponibles dans le site Web que vous créez à partir de Learning Site Blueprint.

Toutefois, si vous souhaitez utiliser ces nouveaux composants Learning Manager dans votre projet Web ou site Web existant, vous devez les importer à l’aide de la procédure suivante.

  1. Installez le package du site de référence ALM.

  2. Ouvrez le projet Web et accédez au fichier HTML (pour la page Web ou le modèle Web auquel vous souhaitez ajouter les composants Learning Manager).

  3. Participation à une réunion

    Ouvrez le fichier HTML et ajoutez les fragments de code ci-après au composant de page afin que le code s’exécute avant les composants d’apprentissage présents dans le rendu de page.

    <sly data-sly-use.configModel="com.adobe.learning.core.models.GlobalConfigurationModel"/>
    <meta name="cp-config" content="${configModel.config}" />

    Le code précédent ajoute la configuration mappée dans la balise meta de la page, ce qui est requis pour le rendu des composants d’apprentissage. Pour plus d’informations, voir Site de référence d’Adobe Learning Manager.

  4. Assurez-vous d’avoir mappé la configuration avec le projet Web.

  5. Ouvrez le modèle AEM Sites dans lequel importer les composants Learning Manager.

  6. Dans l’éditeur de page de modèle, accédez au conteneur Composants autorisés et sélectionnez Stratégie.

  7. Dans la page Stratégie, accédez à Propriétés > Composants autorisés et sélectionnez les composants suivants « Apprentissage - Contenu », « Apprentissage - Formulaire » et « Apprentissage - Structure »

La procédure suivante permet au modèle de remplir les dépendances de bibliothèque client des composants Learning Manager importés.

Les pages Web qui incluent ces composants doivent charger ces bibliothèques pour effectuer le rendu et utiliser les composants.

  1. Dans l'éditeur de page de modèle, cliquez sur Informations sur la page, puis sur Stratégie de page.

  2. Dans la page Stratégie, accédez à Propriétés > Bibliothèques client et ajoutez-les à votre page de modèle :

    1. learning.site
    2. learning.ui
    3. learning.commerce

Après avoir enregistré ce modèle, vous pouvez ajouter les composants Learning Manager dans toutes les pages Web dérivées de ce modèle.

recommendation-more-help
d5e5961a-141b-4c77-820e-8453ddef913d