Adobe Learning Manager-Referenzsite-Paket (ALM-Referenzsite) für AEM-Sites

Suchen

Zuletzt aktualisiert am

Adobe Learning Manager (ALM) ist in Adobe Experience Manager-Sites (AEM) integriert. So können Sie mit minimalem Programmieraufwand Ihre eigene Website und gut reagierende Mobilgeräteoberflächen für Adobe Learning Manager erstellen. Mit dieser Integration können Sie angepasste Lernbenutzeroberflächen für Ihre Benutzenden erstellen.

Um eine solche Benutzeroberfläche zu erstellen, stellt ALM ein Adobe-Learning Manager-Referenzsite-Paket (ALM-Referenzsite-Paket) für AEM-Sites in Form einer ZIP-Datei bereit, die Sie auf Ihrer AEM-Sites-Instanz installieren können.

Das Paket enthält AEM-Sites-Webseitenvorlagen und -Websitekomponenten zusammen mit integrierbaren Widgets, z. B. Lernkatalog, integrierbare Widgets, Kalender usw.

Nachdem Sie das ALM-Referenzsite-Paket installiert haben, können Sie mit dem Erstellen einer Website für Adobe Learning Manager beginnen, die Sie auf Ihrer AEM-Sites-Instanz hosten können. Ihre Benutzenden können dann die Komponenten per Drag & Drop auf die Website ziehen.

ALM-Referenzsite-Paket installieren

Voraussetzungen

Lizenzen für AEM-Sites und Adobe Commerce.

AEM On-Premise 6.5 oder Adobe Experience Manager – Cloud Service
Adobe Commerce 2.4.3

Nachdem Sie Ihre AEM-Sites-Umgebung gesichert haben, müssen Sie das ALM-Referenzsite-Paket installieren. Dieses Paket enthält AEM-Webseiten und Websitekomponenten, die das Erstellen der Lernplattform unterstützen.

Das Referenzsite-Paket wird im GitHub-Repository gehostet.

Weitere Informationen finden Sie in der README-Datei.

Erstellen einer Anwendung in Adobe Learning Manager

Nach der Installation des AEM-Site-Pakets müssen Sie eine ALM-Anwendung konfigurieren, um Ihr Lernportal mit der AEM-Site zu verbinden.

Dieses Szenario gilt, wenn AEM mit Adobe Learning Manager verwendet wird.

Führen Sie die unten genannten Schritte aus:

Klicken Sie als Integrationsadministrator auf Anwendungen.
Klicken Sie in der rechten oberen Ecke der Seite auf Registrieren, um eine neue Anwendung zu erstellen.
Geben Sie auf der Seite "Neue Anwendung registrieren" die folgenden Details ein:
1. Anwendungsname: Der Name der Anwendung, die Sie erstellen.
2. URL: Die URL Ihrer Organisation.
3. Domänen umleiten: Die Hosting-Domänen der AEM Website. Sie können auch Platzhalter angeben.
4. Beschreibung: Die Beschreibung der Anwendung.
5. Bereiche: Wählen Sie die Teilnehmerrollen "Lesezugriff" und "Schreibzugriff" aus.
6. Nur für dieses Konto?: Wählen Sie "Ja", wenn Sie die Anwendung für das vorhandene ALM-Konto verwenden möchten.
Nachdem Sie die Änderungen vorgenommen haben, klicken Sie auf "Speichern".

Notieren Sie sich die angezeigten Anmeldeinformationen der Anwendung.

Klicken Sie zum Genehmigen der Anwendung auf Genehmigen.

Token abrufen

Klicken Sie auf der Registerkarte "Entwicklerressourcen" auf Zugriffstoken für Tests und Entwicklung.
Geben Sie die folgenden Details ein:
1. OAuth-Code abrufen: Geben Sie die Client-ID aus dem vorherigen Abschnitt ein und ändern Sie den Bereich. Klicken Sie auf "Senden", um den OAuth-Code zu erhalten.
2. Aktualisierungstoken abrufen: Geben Sie die Client-ID und den Schlüssel aus dem vorherigen Abschnitt ein. Geben Sie außerdem den OAuth-Code ein, den Sie aus dem vorherigen Schritt erhalten haben. Klicken Sie auf Senden.
3. Zugriffstoken abrufen: Geben Sie die Client-ID und den Schlüssel aus dem vorherigen Abschnitt ein. Geben Sie außerdem das Aktualisierungstoken ein, das Sie aus dem vorherigen Schritt bezogen haben. Klicken Sie auf Senden.
4. Details zum Zugriffstoken abrufen: Geben Sie das Zugriffstoken ein, das Sie aus dem vorherigen Schritt erhalten haben. Klicken Sie auf Senden.
Sie können die Details aus der folgenden JSON-Antwort abrufen. Die Antwort besteht aus dem Zugriffstoken, dem Aktualisierungstoken, der Benutzerrolle, der Konto-ID, der Benutzer-ID und der Zeit bis zum Ablauf. Notieren Sie sich das Aktualisierungstoken, da Sie es wiederverwenden müssen.

Konfigurieren des ALM-Kontos in AEM

Starten Sie Ihre AEM-Instanz.
Klicken Sie auf "Einstellungen > Cloud Services".
Klicken Sie auf "Adobe Learning Manager-Konfiguration".
Klicken Sie auf "Erstellen > Konfigurationsordner". Benennen Sie Ihren Ordner.

Konfiguration erstellen
Wählen Sie im Lernprojekt die von Ihnen erstellte Konfiguration aus.
Geben Sie die Details der Konfiguration ein.
1. Adobe Learning Manager-Modus: Wählen Sie aus, wie die Lernoberfläche für angemeldete und nicht angemeldete Teilnehmende gestaltet werden soll.
2. Adobe Learning Manager-URL: Geben Sie die URL der ALM-Instanz ein, in der die Lerndienste gehostet werden.
3. Konto-ID: Die ID des ALM-Kontos.
4. Client-ID, Client-Geheimnis und Autor-Aktualisierungstoken: Geben Sie die Anmeldeinformationen ein, die Sie beim Erstellen der Anwendung in ALM erhalten haben.
5. Anpassung des Widgets: Weitere Informationen finden Sie unter Integration in AEM.
Speichern und schließen Sie die Konfiguration.

Anmeldevorgang (Adobe Learning Manager, AEM und Adobe Commerce)

Adobe Commerce unterstützt nur Benutzername/Kennwort und kein vorkonfiguriertes Saml-basiertes SSO.
Die Referenzsite-Implementierung von Adobe Learning Manager für AEM funktioniert mit dem Benutzernamen/Kennwort für Adobe Commerce.
Sobald wir das Token von Adobe Commerce erhalten haben, wird es mit dem AEM-Backend vom AEM-Client-JS geteilt. Das AEM-Backend verwendet dieses Token, um die E-Mail-Adresse der Benutzerin/des Benutzers durch Kontaktieren von Adobe Commerce zu erhalten. Mit der E-Mail-Adresse und dem bereits konfigurierten ALM-Admin-Aktualisierungstoken wird das ALM-Zugriffstoken für Lernende generiert und zum Rendern der Lernkomponenten an den AEM-Client-JS gesendet.

Anmeldevorgang (Adobe Learning Manager und Adobe Commerce)

Standardmäßig müssen sich Benutzer(innen) zweimal anmelden, einmal bei ALM und einmal bei Commerce, da SSO nicht standardmäßig von Commerce unterstützt wird.
Wenn jedoch bei Commerce einige der von ALM unterstützten SSOs aktiviert sind (durch Erweiterungen oder benutzerdefinierte Codierung), SAML 2.0-basierte soziale Medien wie Facebook, Twitter, LinkedIn, Microsoft oder Adobe ID, kann derselbe IdP für ALM und Commerce verwendet und die doppelte Eingabe von Anmeldedaten vermieden werden.

AEM + Adobe Learning Manager (angemeldete/nicht angemeldete Benutzende)

Mit Adobe Learning Manager können Sie jetzt Ihre Produkte und Schulungen Ihren bestehenden und potenziellen Kunden und Partnern präsentieren, ohne dass eine Kontoerstellung oder Anmeldung erforderlich ist. Diese Funktion unterstützt Sie bei der Einführung von Produkten und Schulungen, indem sie Teilnehmenden eine schnelle und einfache Vorschau der Schulungen bietet, mit der Sie Produktfunktionen hervorheben und für sie werben können. So können Sie Ihre Produkte und Angebote potenziellen Kunden und Partnern effektiv präsentieren und die Produktwahrnehmung steigern. Der einfache Zugriff und die bessere Erreichbarkeit steigern das Interesse, und dies führt zu mehr Registrierungen für Schulungen und einer höheren Akzeptanz von Lernangeboten.

Mit diesem Arbeitsablauf können Teilnehmende eine Vorschau einer Schulung anzeigen, auf Schulungsinformationen zugreifen oder nach einer Schulung suchen, ohne sich bei Adobe Learning Manager anzumelden. Dieser Arbeitsablauf gilt nicht für die native Learning Manager-Benutzeroberfläche. (Er gilt NUR für AEM-Sites und andere Headless-Benutzeroberflächen.)

Konfigurieren und Aktivieren des Lernplattform-Connectors

Dieser Abschnitt unterstreicht die Schritte, die zum Konfigurieren und Aktivieren des folgenden Connectors erforderlich sind:

Zugriff auf Schulungsdaten

Mit diesem Connector kann Ihre auf AEM-Sites basierende oder sonstige benutzerdefinierte Headless-Benutzeroberfläche Schulungsinformationen abrufen und für die Teilnehmenden rendern und eine nahtlose Suche nach Schulungsinformationen durchführen, bevor oder nachdem sich ein Teilnehmer anmeldet.

Dieser Connector ist nur erforderlich, wenn Sie auf AEM-Sites basierende oder sonstige Headless-Benutzeroberflächen verwenden.

Der Connector exportiert Schulungsmetadaten in eine Datenspeicher- und Abruflösung sowie ein Suchaktivierungssystem. Daher können Sie Ihre auf AEM-Sites basierende oder sonstige benutzerdefinierte Headless-Benutzeroberfläche so konfigurieren, dass diese beiden Dienste verwendet werden können, um Schulungsdaten abzurufen, Webseiten zu rendern und den Teilnehmenden eine optimierte Schulungssuchfunktion zu bieten. Beispielsweise kann eine nicht angemeldete auf AEM-Sites basierende Benutzeroberfläche die exportierten Metadaten verwenden, um Teilnehmenden zu helfen, Seiten mit Schulungsinformationen zu suchen, zu durchsuchen und darauf zuzugreifen.

Aktivieren Sie diesen Connector, um Ihre auf AEM-Sites basierenden Webseiten zu erstellen und zu rendern und Ihren Teilnehmenden sowohl vor als auch nach der Anmeldung benutzerdefinierte Erlebnisse zu bieten. Aktivieren Sie diesen Connector, um Ihre auf AEM-Sites basierenden Webseiten zu erstellen und zu rendern und Ihren Teilnehmenden sowohl vor als auch nach der Anmeldung benutzerdefinierte Erlebnisse zu bieten.

Adobe Learning Manager-CDN-Basis-URL: Geben Sie die Basis-URL des Datenabruf-CDN-Dienstpfads von der Verbindungsseite für den Schulungsdatenzugriff ein.
Administrator-Aktualisierungstoken: Geben Sie das Aktualisierungstoken ein, das Sie im vorherigen Abschnitt festgelegt haben.
URL der Schulungsmetadatenbasis: Geben Sie die Basis-URL der Suchfunktion und den Suchdatenabruf-Dienstpfad von der Seite für den Schulungsdatenzugriff ein.
URL für Adobe Learning Manager-Registrierung: Geben Sie die vom Integrationsadministrator für das Konto generierte URL für die Selbstregistrierung ein, die von den Teilnehmenden zur Registrierung für die Schulung verwendet wird.

AEM + Adobe Learning Manager + Adobe Commerce (angemeldete/nicht angemeldete Benutzer)

Adobe Learning Manager bietet jetzt Lösungen, mit denen Sie die Lernplattform nahtlos in Adobe Commerce integrieren können. Mit dieser Version können Sie Ihre nativen, auf AEM-Sites basierenden oder sonstigen Headless-Learning Manager-Benutzeroberflächen ganz einfach mit Adobe Commerce verbinden. Mit dieser Integration können Sie E-Commerce-Funktionen innerhalb Ihrer Lernplattform realisieren. Sie können Ihren Kunden und Geschäftspartnern jetzt kostenpflichtige Schulungen anbieten und Schulungskäufe ganz einfach auf nativen und nicht nativen Learning Manager-Benutzeroberflächen ermöglichen. Teilnehmende können auch eine Vorschau einer Schulung anzeigen, auf Schulungsinformationen zugreifen oder nach einer Schulung suchen, ohne sich bei Adobe Learning Manager anzumelden.

Ein Benutzer kann die bereits vorhandene AEM-Anwendung verwenden und sie genehmigen, anstatt eine zu erstellen.

Adobe Learning Manager-CDN-Basis-URL: Geben Sie die Basis-URL des Datenabruf-CDN-Dienstpfads von der Adobe Commerce-Verbindungsseite ein.
Adobe Commerce-URL: Geben Sie die URL der Adobe Commerce-Instanz ein, die Sie verwenden.
GraphQL-Proxypfad: Die clientseitigen Learning Manager-Komponenten greifen direkt auf den Adobe Commerce-GraphQL-Endpunkt zu, sodass ein CORS-Fehler auftreten kann. Um diesen Fehler zu vermeiden, müssen alle Aufrufe entweder vom gleichen Endpunkt wie AEM oder über einen Proxy, der CORS-Header hinzufügt, bereitgestellt werden.
Name des Adobe Commerce-Speichers: Geben Sie den Namen des Adobe Commerce-Speichers ein, den Sie im vorherigen Abschnitt festgelegt haben.
Lebensdauer des Adobe Commerce-Kundentokens (in Sekunden): Geben Sie die Lebensdauer des Kundentokens ein, die den vordefinierten Zeitraum für eine Anmeldesitzung angibt.
Administrator-Aktualisierungstoken: Geben Sie das Aktualisierungstoken ein, das Sie im vorherigen Abschnitt festgelegt haben.

Webseiten anpassen

Passen Sie Ihre Webseiten mithilfe der AEM-Referenzsite und der verfügbaren Widgets an.

Starten Sie Ihre AEM-Instanz.
Klicken Sie auf "Sites" und öffnen Sie die Konfigurationsseite.
Klicken Sie auf Learning Site > Language Masters > Deutsch. Alle Webseiten des Projekts sind in diesem Ordner enthalten.
Wählen Sie eine beliebige Vorlage aus und klicken Sie auf Bearbeiten.
Klicken Sie auf der Seite auf die Schaltfläche für Komponenteneinstellungen und ändern Sie die Eigenschaften der Komponente.
Zeigen Sie eine Vorschau Ihrer Änderungen an oder veröffentlichen Sie die Seite.

Erstellen von Webseiten

Neben den vom Referenzsite-Paket bereitgestellten Vorlagen, die Sie verwenden können, können Sie auch Webseiten erstellen, die auf den Vorlagen in AEM basieren.

Klicken Sie auf der AEM-Seite auf "Erstellen > Seite".
Wählen Sie die Vorlage aus, die Sie anpassen möchten. Klicken Sie auf Weiter.
Geben Sie die Seiteneigenschaften ein.

Seiteneigenschaften
Klicken Sie zum Erstellen der Seite auf Erstellen.
Wählen Sie die neue Seite aus, und klicken Sie auf "Bearbeiten".
Fügen Sie eine Komponente auf der Seite ein, z. B. Lernen – Inhalt.

Komponente einfügen
Wählen Sie die erforderlichen Katalogfilter aus, die auf der Seite angezeigt werden.

Erstellen einer Website aus Blueprint

Das ALM-Referenzsite-Paket bietet eine "Learning Site Blueprint", mit der Sie eine Website für Ihre Lernplattform erstellen können. Mit AEM-Blueprints können Sie Webseiten direkt aus AEM-Sites-Komponenten erstellen. Sie müssen keine Vorlagen verwenden.

Klicken Sie auf der AEM-Startseite auf Sites.
Klicken Sie auf Erstellen > Site.
Klicken Sie auf "Learning Site Blueprint".
Klicken Sie auf Weiter.
Geben Sie auf der Eigenschaftenseite die Metadaten für die Seite ein. Klicken Sie auf Erstellen.
Klicken Sie auf den Hyperlink "Startseite", um zur Startseite der von Ihnen erstellten Website zu navigieren. Auf dieser Seite können Sie die Widgets und Katalogkomponenten anpassen.

Codieren Ihrer Website

Zusätzlich zur Verwendung der integrierten Vorlagen und dem von Grund auf neuen Erstellen einer Website mithilfe der WYSIWYG-Komponenten können Sie auch Code schreiben und die Website erstellen.

Der Code befindet sich im GitHub-Repository der Referenzsite.

Die Hauptteile der Vorlage sind:

core: Java-Paket, das alle Kernfunktionen wie OSGi-Dienste, Listener oder Scheduler sowie komponentenbezogenen Java-Code wie Servlets oder Anforderungsfilter enthält.
ui.apps: Enthält die /apps- (und /etc-)Teile des Projekts, d. h. JS&CSS-Client-Bibliotheken, Komponenten, Vorlagen.
ui.content: Enthält Beispielinhalte, die die Komponenten aus der Datei ui.apps verwenden.
ui.frontend: Enthält React-Komponenten.

Der gesamte Code ist im Repository enthalten, damit Sie sofort loslegen können.

Importieren von Learning Manager-Komponenten und Hinzufügen zu vorhandenen Webseiten oder Vorlagen

Durch Installieren des AEM-Referenzsite-Pakets werden die Learning Manager-Komponenten Ihrer AEM-Sites-Instanz hinzugefügt. Standardmäßig können Sie diese Komponenten der vordefinierten Learning Site für das Webprojekt (Website) hinzufügen. Diese Komponenten sind auch auf der Website verfügbar, die Sie mit der Learning Site Blueprint erstellen.

Wenn Sie diese neu hinzugefügten Learning Manager-Komponenten jedoch in Ihrem vorhandenen Webprojekt oder Ihrer Website verwenden möchten, sollten Sie sie wie folgt importieren.

Installieren Sie das ALM-Referenzsite-Paket.
Öffnen Sie das Webprojekt und navigieren Sie zur HTML-Datei (für die Webseite oder Webvorlage, der Sie die Learning Manager-Komponenten hinzufügen möchten).
Teilnehmen an einem Meeting

Öffnen Sie die HTML-Datei und fügen Sie der Seitenkomponente die folgenden Codeausschnitte hinzu, damit der Code ausgeführt wird, bevor die auf der Seite vorhandenen Lernkomponenten gerendert werden.

<sly data-sly-use.configModel="com.adobe.learning.core.models.GlobalConfigurationModel"/>

<meta name="cp-config" content="${configModel.config}" />

Mit dem vorhergehenden Code wird die zugeordnete Konfiguration dem für das Rendern der Lernkomponenten erforderlichen Meta-Tag der Seite hinzugefügt. Weitere Informationen finden Sie unter https://github.com/adobe/adobe-learning-manager-reference-site/blob/master/ui.apps/src/main/content/jcr_root/apps/learning/components/page/customheaderlibs.html.
Stellen Sie sicher, dass Sie die Konfiguration dem Webprojekt zugeordnet haben.
Öffnen Sie die AEM-Sites-Vorlage, in die Sie die Learning Manager-Komponenten importieren möchten.
Navigieren Sie im Vorlagenseiteneditor zum Container "Zulässige Komponenten" und wählen Sie Richtlinie.
Navigieren Sie auf der Seite "Richtlinie" zu "Eigenschaften > Zulässige Komponenten" und wählen Sie die folgenden Komponenten: "Lernen – Inhalt","Lernen – Form" und "Lernen – Struktur".

Mit dem folgenden Verfahren kann die Vorlage den Client-Bibliotheksabhängigkeiten der importierten Learning Manager-Komponenten gerecht werden.

Die Webseiten, die diese Komponenten enthalten, sollten diese Bibliotheken laden, damit die Komponenten erfolgreich gerendert und verwendet werden können.

Klicken Sie im Vorlagenseiteneditor auf "Seiteninformationen" und dann auf "Seitenrichtlinie".
Navigieren Sie auf der Seite "Richtlinie" zu "Eigenschaften > Client-Bibliotheken" und fügen Sie diese der Vorlagenseite hinzu:
1. learning.site
2. learning.ui
3. learning.commerce

Nachdem Sie diese Vorlage gespeichert haben, können Sie die Learning Manager-Komponenten allen Webseiten hinzufügen, die von dieser Vorlage abgeleitet wurden.

Bei Ihrem Konto anmelden