Пакет справочных сайтов Adobe Learning Manager (справочных сайтов ALM) для сайтов AEM

Adobe Learning Manager (ALM) интегрируется с сайтами Adobe Experience Manager (AEM). Это позволяет вам создавать собственные веб-сайты и адаптивные мобильные интерфейсы для Adobe Learning Manager с минимальными усилиями по написанию кодов. Благодаря этой интеграции вы можете организовать обучение в соответствии с потребностями пользователей.

С этой целью ALM предоставляет пакет справочных сайтов Adobe Learning Manager (справочных сайтов ALM) для сайтов AEM в форме ZIP-файла, который вы можете установить в своем экземпляре сайтов AEM.

В пакет входят шаблоны веб-страниц и компоненты веб-сайтов сайтов AEM, а также встраиваемые виджеты, например, каталог обучения, встраиваемые виджеты, календарь и т. д.

После установки пакета справочных сайтов ALM можно приступать к созданию веб-сайта для Adobe Learning Manager, который вы можете разместить в своем экземпляре сайтов AEM. После этого пользователи смогут перетаскивать компоненты веб-сайта.

Установка пакета справочных сайтов ALM

Предварительные условия

  • Лицензии на сайты AEM и Adobe Commerce.

  • Локальная версия AEM 6.5 или Adobe Experience Manager — облачная служба

  • Adobe Commerce 2.4.3

После организации среды сайтов AEM следует установить пакет справочных сайтов ALM. В этот пакет входят веб-страницы и компоненты веб-сайтов AEM, помогающие построить платформу обучения.

Пакет справочных сайтов размещается в GitHub repository.

Более подробная информация представлена в файле важных сведений.

Создание приложений в Adobe Learning Manager

После установки пакета сайтов AEM необходимо настроить приложение ALM для подключения вашего портала обучения к сайту AEM.

Этот сценарий применяется при использовании AEM с Adobe Learning Manager.

Выполните следующие действия.

  1. В роли администратора интеграции нажмите «Приложения».
  2. Чтобы создать новое приложение, нажмите «Регистрация» в правом верхнем углу страницы.
  3. На экране «Регистрация нового приложения» введите следующие сведения:
    1. «Имя приложения»: имя создаваемого вами приложения.
    2. «URL-адрес»: URL-адрес вашей организации.
    3. «Домены перенаправлений»: домен размещения веб-сайта AEM. Также можно задать подстановочные знаки.
    4. «Описание»: описание приложения.
    5. «Области»: выберите доступ для чтения в роли учащегося и доступ для записи в роли учащегося.
    6. «Только для этой учетной записи?»: если вы желаете использовать приложение для существующей учетной записи ALM, выберите «Да».
  4. После внесения изменений нажмите «Сохранить».

Зафиксируйте указанные на экране учетные данные приложения.

Учетные данные приложения
Учетные данные приложения

Чтобы разрешить использование приложения, нажмите «Разрешить».

Получение маркеров

  1. На вкладке «Ресурсы разработчика» выберите «Маркеры доступа для тестирования и разработки»

  2. Введите следующие данные:

    1. Получение кода OAuth: введите идентификатор клиента из предыдущего раздела и измените область. Чтобы получить код OAuth, нажмите «Отправить».
      .
    2. Получение маркера обновления: введите идентификатор и секрет клиента из предыдущего раздела. Также введите код OAuth, полученный на предыдущем этапе. Нажмите «Отправить».
    3. Получение маркера доступа: введите идентификатор и секрет клиента из предыдущего раздела. Также введите маркер обновления, полученный на предыдущем этапе. Нажмите «Отправить».
    4. Также введите маркер обновления, полученный на предыдущем этапе. Нажмите «Отправить».
  3. В ответ вы получите от JSON учетные данные. Ответ будет содержать маркер доступа, маркер обновления, роль пользователя, идентификатор учетной записи, идентификатор пользователя и срок действия. Зафиксируйте маркер обновления, поскольку он вам потребуется в будущем. 

Настойка учетной записи ALM в AEM

  1. Запустите свой экземпляр AEM

  2. Выберите «Настройки» > «Облачные службы». 
    .

  3. Нажмите «Конфигурация Adobe Learning Manager».

  4. Выберите «Создать» > «Папка конфигурации». Присвойте папке имя.

  5. В проекте обучения выберите созданную вами конфигурацию.

  6. Введите данные конфигурации. 

    1. «Режим Adobe Learning Manager mode»: выберите порядок организации обучения для вошедших и не вошедших в систему учащихся.
    2. «URL-адрес Adobe Learning Manager»: введите URL-адрес экземпляра ALM, где размещены службы обучения.
    3. «Идентификатор учетной записи»: идентификатор учетной записи ALM.
    4. «Идентификатор клиента, секрет клиента и маркер обновления автора»: введите учетные данные, полученные вами при создании приложения в ALM. 
    5. «Пользовательская настройка виджета»: дополнительные сведения см. в разделе «Интеграция с AEM».
  7. Сохраните и закройте конфигурацию.

AEM + Adobe Learning Manager (вошедшие/не вошедшие в систему пользователи)

Теперь в Adobe Learning Manager можно демонстрировать свои продукты и курсы обучения существующим и потенциальным клиентам и партнера без необходимости создавать учетную запись или регистрироваться. Эта функция помогает внедрять продукты и курсы обучения, создавая для пользователей возможность предварительного просмотра, в рамках которого выделяются особенности и преимущества продукта. Таким образом, вы можете эффективно демонстрировать свои продукты и предложения, в особенности потенциальным клиентам и партнерам, в результате чего ваши продукты приобретут известность. Простой доступ и улучшенная достижимость помогают привлечь заинтересованную аудиторию, увеличивая количество регистраций на курсы обучения и способствуя их внедрению. 

Благодаря этому рабочему процессу учащийся может ознакомиться с обучением в режиме предварительного просмотра, получить доступ к информации об обучении или найти подходящий курс обучения без необходимости регистрироваться в Adobe Learning Manager. Этот рабочий процесс не используется для собственного интерфейса Learning Manager (действует ТОЛЬКО при работе с сайтами AEM или иными консольными интерфейсами).

Настройка и включение соединителя платформы обучения

В этом разделе описываются этапы настройки и включения следующего соединителя:

Соединитель доступа к данным обучения

Этот соединитель позволяет созданным на базе сайтов AEM или иным консольным пользовательским интерфейсам извлекать и предоставлять информацию об обучении учащимся, а также беспрепятственно реализовывать поиск информации об обучении до или после выполнения пользователем входа в систему. 

Этот соединитель требуется только в том случае, если вы используете созданные на базе сайтов AEM или иные консольные интерфейсы. 

Соединитель экспортирует метаданные обучения в хранилище данных и решение по извлечению данных, а также в систему реализации поиска. Таким образом, вы можете настроить свой созданный на базе сайтов AEM или иной консольный пользовательский интерфейс для использования этих двух служб с целью извлечения данных обучения, воспроизведения веб-страниц и реализации оптимизированной функции поиска для учащихся. Например, созданный на базе сайтов AEM интерфейс может использовать экспортированные метаданные, чтобы помочь не вошедшему в систему учащемуся искать и просматривать страницы с информацией об обучении, а также осуществлять к ним доступ. 

Включите этот соединитель для построения и воспроизведения созданных на базе сайтов AEM веб-страниц и организации обучения в соответствии с нуждами учащихся — как до, так и после выполнения ими входа в систему. Включите этот соединитель для построения и воспроизведения созданных на базе сайтов AEM веб-страниц и организации обучения в соответствии с нуждами учащихся — как до, так и после выполнения ими входа в систему.

  • «Базовый URL-адрес CDN Adobe Learning Manager»: введите базовый URL-адрес пути службы извлечения данных CDN со страницы соединителя доступа к данным обучения.
  • «Маркер обновления администратора»: введите маркер обновления, определенный вами ранее. 
  • «Базовый URL-адрес метаданных обучения»: введите базовый URL-адрес пути службы реализации поиска и извлечения данных поиска со страницы соединителя доступа к данным обучения.
  • «URL-адрес регистрации в Adobe Learning Manager: введите URL-адрес для самостоятельной регистрации, сгенерированный администратором интеграции для учетной записи, которая используется учащимися для регистрации на курс обучения.

AEM + Adobe Learning Manager + Adobe Commerce (вошедшие/не вошедшие в систему пользователи)

Теперь Adobe Learning Manager предлагает решения, которые помогут вам беспрепятственно интегрировать платформу обучения с Adobe Commerce. Этот выпуск позволяет с легкостью подключить ваши собственные созданные на базе сайтов AEM или иные консольные интерфейсы Learning Manager к Adobe Commerce. Такая интеграция дает возможность реализовать возможности электронной торговли в рамках своей платформы обучения. Теперь вы можете предлагать клиентам и деловым партнерам платное обучение, а также с легкостью реализовать функцию приобретения обучения как в собственном, так и в стороннем интерфейсе Learning Manager. Учащийся также может ознакомиться с обучением в режиме предварительного просмотра, получить доступ к информации об обучении или найти подходящий курс обучения без необходимости регистрироваться в Adobe Learning Manager.

Пользователь может использовать уже существующее приложение AEM и одобрить его, вместо того чтобы создавать его.

  • «Базовый URL-адрес CDN Adobe Learning Manager»: введите базовый URL-адрес пути службы извлечения данных CDN со страницы соединителя Adobe Commerce.
  • URL-адрес Adobe Commerce: введите URL-адрес используемого вами экземпляра Adobe Commerce. 
  • «Путь прокси GraphQL»: компоненты Learning Manager на стороне клиента осуществляют доступ к конечной точке Adobe Commerce GraphQL напрямую, поэтому может возникнуть ошибка CORS. Чтобы избежать этой ошибки, все вызовы должны обслуживаться с той же конечной точки, что и AEM, или через прокси, добавляющий заголовки CORS.
  • «Имя хранилища Adobe Commerce»: ведите имя хранилища Adobe Commerce, определенное вами ранее. 
  • «Время существования маркера клиента Adobe Commerce (сек.)»: введите время существования маркера клиента, обозначающее заранее определенный период сеанса входа. 
  • «Маркер обновления администратора»: введите маркер обновления, определенный вами ранее.

Настройка веб-страниц

Настройте веб-страницы с помощью справочного сайта AEM и доступных виджетов. 

  1. Запустите свой экземпляр AEM.

  2. Выберите «Сайты» и откройте страницу настройки.

  3. Выберите «Сайт обучения» > «Образцы языков» > «Английский» В папке находятся все веб-страницы в проекте. 

  4. Выберите любой шаблон и нажмите «Редактировать».

  5. На странице нажмите на кнопку настройки компонента и измените параметры соответствующего компонента.

  6. Вы можете осуществить предварительный просмотр изменений или опубликовать страницу. 

Создание веб-страниц

Помимо шаблонов в пакете справочных сайтов, вы также можете создавать веб-страницы на основе шаблонов в AEM.

  1. На главной странице AEM выберите «Создать» > «Страница». 

  2. Выберите шаблон, который вы хотите настроить. Нажмите Далее. 

  3. Введите параметры страницы. 

  4. Чтобы создать страницу, нажмите «Создать».

  5. Выберите новую страницу и нажмите «Редактировать».

  6. Добавьте на страницу компонент, например, содержимое обучения.

  7. Выберите необходимые фильтры каталога, которые будут отображаться на странице.

Создание сайта из макета

В пакете справочных сайтов ALM присутствует функция «Макет сайта обучения», которая позволяет создать веб-сайт для платформы обучения. Макеты AEM помогают создавать веб-страницы непосредственно из компонентов сайтов AEM. Нет необходимости использовать шаблоны. 

  1. На начальной странице AEM выберите «Сайты».

  2. Нажмите «Создать» > «Сайт»

  3. Выберите «Макет сайта обучения». 

  4. Нажмите «Далее». 

  5. На странице параметров введите метаданные страницы. Нажмите Создать. 

  6. Нажмите на гиперссылку «Домашняя страница», чтобы перейти на домашнюю страницу созданного вами сайта. На этой странице вы можете настроить виджеты и компоненты каталога.

Написание кодов для веб-сайта

Помимо использования встроенных шаблонов и создания веб-сайта «с нуля» с помощью компонентов WYSIWYG, вы также можете написать коды для создания сайта.

Код, с которого можно начать, приведен в хранилище GitHub справочных сайтов.

Основные части шаблона:

  • core: комплект Java, содержащий все основные функции службы OSGi, такие как слушатели или планировщики, а также код Java, связанный с компонентами, такими как сервлеты или фильтры запросов.
  • ui.apps: содержит части проекта /apps (и /etc), т.е. клиентские библиотеки, компоненты и шаблоны JS&CSS.
  • ui.content: включает содержимое образца с использованием компонентов из ui.apps
  • ui.frontend: содержит компоненты React.

В хранилище вы найдете все коды, которые помогут вам наладить работу. 

Импорт и добавление компонентов Learning Manager в существующую веб-страницу или шаблон

Установка пакета справочных сайтов AEM дополняет ваш экземпляр сайтов AEM компонентами Learning Manager. По умолчанию вы можете добавить эти компоненты в веб-проект (веб-сайт) сайта обучения, который мне предлагаем в готовом виде. Эти компоненты также доступны на веб-сайте, который вы создаете из макета сайта обучения.

Вместе с тем, если вы хотите воспользовавшийся этими вновь добавленными компонентами Learning Manager в существующем веб-проекте или веб-сайте, их необходимо импортировать следующим образом.

  1. Установите пакета справочных сайтов ALM.

  2. Откройте веб-проект и перейдите к файлу HTML (веб-страницы или веб-шаблона, куда вы хотите добавить компоненты Learning Manager).

  3. Присоединение к собранию

    Откройте файл HTML и добавьте следующие фрагменты кода в компонент страницы таким образом, чтобы код исполнялся перед компонентами обучения, присутствующими в воспроизведении страницы.

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

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

    Предшествующий код добавляет сопоставленную конфигурацию в метатег страницы, что необходимо для воспроизведения компонентов обучения. Более подробная информация представлена по ссылке: https://github.com/adobe/adobe-learning-manager-reference-site/blob/master/ui.apps/src/main/content/jcr_root/apps/learning/components/page/customheaderlibs.html.

  4. Убедитесь в том, что конфигурация была сопоставлена с веб-проектом.

  5. Откройте шаблон из сайтов AEM, куда вы хотите импортировать компоненты Learning Manager.

  6. На странице редактирования шаблона перейдите в блок «Разрешенные компоненты» и выберите «Политика».

  7. На странице «Политика» перейдите в «Параметры» > «Разрешенные компоненты» и выберите следующие компоненты: «Обучение – содержимое», «Обучение – форма» и «Обучение – структура»

Следующая процедура позволяет шаблону исполнить взаимозависимости клиентской библиотеки импортированных компонентов Learning Manager.

Веб-страницы, включающие эти компоненты, должны загрузить такие библиотеки для их успешного воспроизведения и использования.

  1. На странице редактирования шаблона выберите «Информация о странице», а затем нажмите «Политика страницы».
  2. На странице «Политика» перейдите в «Параметры» > «Клиентские библиотеки» и добавьте их на страницу шаблона:
    1. learning.site
    2. learning.ui
    3. learning.commerce

После сохранения шаблона вы сможете добавлять компоненты Learning Manager на все веб-страницы, созданные на базе этого шаблона.

Логотип Adobe

Вход в учетную запись