將Adobe Learning Manager與AEM整合
Adobe Learning Manager (ALM)與Adobe Experience Manager (AEM)網站整合。 這可讓您以最少的編碼工作量,為Adobe Learning Manager建立自己的網站和回應式行動介面。 透過這項整合,您可以為使用者建立自訂的學習體驗。
為了建立這樣的體驗,ALM以ZIP檔案的形式,提供適用於AEM Sites的Adobe Learning Manager參考站台套件(ALM參考站台套件),您可以安裝在您的AEM Sites執行個體上。
此套件包含AEM Sites網頁範本和網站元件以及內嵌的Widget,例如學習目錄、內嵌的Widget、日曆等。
安裝ALM參考站台套件後,您就可以開始建立Adobe Learning Manager的網站,以便在AEM Sites執行個體上託管。 之後,您的使用者可以將元件拖放至網站上。
安裝ALM參照站台套件
先決條件
- AEM Sites和Adobe Commerce的授權。
- AEM on-premise 6.5或Adobe Experience Manager - Cloud Service
- Adobe Commerce 2.4.3
保護AEM Sites環境後,您必須安裝ALM參考站台套件。 此套件包含協助建構學習平台的AEM網頁和網站元件。
參考站台封裝裝載於 GitHub存放庫。
如需詳細資訊,請參閱README。
下載內容封裝 downloadthecontentpackage
安裝程式是以AEM內容套件的形式提供。 下載封裝。
內容套件以zip檔案形式提供,並與AEM 6.4和AEM 6.5相容。
安裝Learning Manager元件 installcaptivateprimecomponent
使用Learning Manager Package Manager安裝AEM內容套件:
-
以AEM Author的身分,開啟AEM Package Manager。
-
按一下按鈕 Upload Package。
-
按一下 Browse 並上傳內容封裝。
-
按一下 Upload。
-
上傳套件後,選取內容套件並按一下 Install 以安裝內容套件。
安裝內容封裝
在Adobe Learning Manager中建立應用程式
安裝AEM網站套件後,您必須設定ALM應用程式,將學習入口網站與AEM網站連線。
此案例適用於AEM搭配Adobe Learning Manager使用的情況。
請遵循下列步驟:
-
以整合管理員的身分,按一下 Applications。
-
若要建立新的應用程式,請按一下頁面右上角的 Register。
-
在註冊新應用程式畫面中,輸入下列詳細資訊:
- 應用程式名稱:您正在建立的應用程式名稱。
- URL:您組織的URL。
- 重新導向網域: AEM網站的代管網域。 您也可以指定萬用字元。
- 說明:應用程式的說明。
- 範圍:選取學習者角色讀取存取權和學習者角色寫入存取權。
- 僅針對此帳戶?:如果您要將應用程式用於現有的ALM帳戶,請選取「是」。
-
進行變更後,按一下「儲存」 。
從畫面中記下應用程式認證。
應用程式認證
若要核准應用程式,請按一下 Approve。
取得權杖
-
在[開發人員資源]索引標籤中,按一下 Access Tokens for Testing and Development。
選取用於測試和開發的存取權杖
-
輸入下列明細:
輸入權杖詳細資料- 取得OAuth代碼:輸入上一節的使用者端ID並變更範圍。 按一下「提交」以取得Oauth代碼。
- 取得重新整理Token:輸入上一節中的使用者端ID和密碼。 同時輸入您在上一步得到的OAuth程式碼。 按一下「提交」。
- 取得存取Token:輸入上一節中的使用者端ID和密碼。 同時輸入您在上一步驟中取得的重新整理Token。 按一下「提交」。
- 取得存取Token詳細資料:輸入您在上一步驟中取得的存取Token。 按一下「提交」。
-
您可以透過以下的JSON回應取得詳細資料。 回應包含存取權杖、重新整理權杖、使用者角色、帳戶ID、使用者ID和到期時間。 記下重新整理權杖,因為您將重複使用它。
在AEM中設定ALM帳戶
-
啟動您的AEM執行個體。
-
按一下「設定>雲端服務」 。
-
按一下「Adobe Learning Manager設定」 。
選取Adobe Learning Manager設定 -
按一下「建立>組態資料夾」。 為資料夾命名。
建立設定 -
在學習專案中,選取您建立的設定。
-
輸入設定的詳細資料。
建立設定資料夾- Adobe Learning Manager模式:選擇您希望登入和未登入學習者的學習體驗。
- Adobe Learning Manager URL:輸入託管學習服務之ALM執行個體的URL。
- 帳戶ID: ALM帳戶ID。
- 使用者端ID、使用者端密碼和作者重新整理權杖:輸入您在ALM中建立應用程式時獲得的認證。
- 自訂Widget:如需詳細資訊,請參閱與AEM整合
.
-
儲存並關閉設定。
AEM + Adobe Learning Manager (已登入/未登入的使用者)
Adobe Learning Manager現在可讓您向現有和潛在客戶及合作夥伴展示您的產品和訓練,而不需要建立或登入帳戶。 此功能可為學習者提供訓練的快速輕鬆預覽,有助於強調和推廣產品功能,進而協助您促進產品和訓練的採用。 因此,您可以有效地展示您的產品和方案,尤其是向潛在客戶和合作夥伴展示,進而提升產品知名度。 輕鬆存取和更好的可及性帶來更高的興趣,有助於推動培訓註冊和學習採用。
學習者使用此工作流程即可預覽訓練、存取訓練資訊,或搜尋訓練,而無需登入Adobe Learning Manager。 此工作流程不適用於原生Learning Manager介面(僅適用於AEM Sites和其他Headless介面)。
設定並啟用學習平台聯結器
本節將說明設定和啟用以下聯結器所需的步驟:
訓練資料存取
此聯結器可讓您的AEM Sites式或其他自訂的Headless使用者介面擷取訓練資訊並將資訊呈現給學習者,並在學習者登入之前或之後實現無縫的訓練資訊搜尋。
只有在您使用AEM Sites或其他Headless介面時,才需要使用此聯結器。
聯結器會將訓練中繼資料匯出至資料儲存和擷取解決方案,以及搜尋啟用系統。 因此,您可以設定AEM Sites式或其他自訂的Headless使用者介面,使用這兩項服務來擷取訓練資料、轉譯網頁,並為學習者提供最佳化的訓練搜尋功能。 例如,未登入AEM Sites型介面可使用匯出的中繼資料,協助學習者搜尋、瀏覽及存取顯示訓練資訊的訓練頁面。
啟用此聯結器可建置及轉譯您的AEM Sites網頁,並在登入前後為學習者提供自訂體驗。 啟用此聯結器可建置及轉譯您的AEM Sites網頁,並在登入前後為學習者提供自訂體驗。
- Adobe Learning Manager CDN基底URL — 從訓練資料存取連線頁面輸入資料擷取CDN服務路徑的基底URL。
- 管理員重新整理Token — 輸入您在前一節中決定的重新整理Token。
- 訓練中繼資料基底URL — 從「訓練資料存取」連線頁面,輸入搜尋啟用與搜尋資料擷取服務路徑的基底URL。
- Adobe Learning Manager註冊URL — 輸入整合管理員為帳戶產生的自助註冊URL,學習者可使用此帳戶註冊培訓。
AEM + Adobe Learning Manager + Adobe Commerce (已登入/未登入的使用者)
Adobe Learning Manager現在提供解決方案,協助您將學習平台與Adobe Commerce緊密整合。 此版本可讓您輕鬆地將原生、AEM網站型或其他Headless Learning Manager介面連線到Adobe Commerce。 此整合可讓您在學習平台中實現電子商務功能。 您現在可以為客戶和商務合作夥伴提供付費培訓,並讓您在原生和非原生Learning Manager介面上輕鬆購買培訓。 學習者也可預覽訓練、存取訓練資訊,或搜尋訓練,而不需要登入Adobe Learning Manager。
使用者可以使用已經的AEM應用程式並加以核准,而不是建立應用程式。
- Adobe Learning Manager CDN基底URL — 輸入來自Adobe Commerce連線頁面之資料擷取CDN服務路徑的基底URL。
- Adobe Commerce URL — 輸入您使用的Adobe Commerce執行個體的URL。
- GraphQL Proxy路徑 — 使用者端Learning Manager元件會直接存取Adobe Commerce GraphQL端點,因此可能會發生CORS錯誤。 若要避免此錯誤,所有呼叫都必須從與AEM相同的端點提供服務,或是透過新增CORS標題的Proxy提供。
- Adobe Commerce商店名稱 — 輸入您在前一節中判斷的Adobe Commerce商店名稱。
- Adobe Commerce客戶權杖存留期(以秒為單位) — 輸入客戶權杖存留期,表示登入工作階段的預先確定期間。
- 管理員重新整理Token — 輸入您在前一節中決定的重新整理Token。
自訂網頁
使用AEM參考網站和可用的Widget來自訂您的網頁。
-
啟動您的AEM執行個體。
-
按一下Sites並開啟設定頁面。
-
按一下 Learning Site > Language Masters > English。 專案中的所有網頁都包含在資料夾中。
檢視所有網頁 -
選取任何範本並按一下 Edit。
-
在頁面上,按一下元件設定按鈕並變更元件的屬性。
選取設定按鈕 -
預覽您的變更,或者您可以發佈頁面。
建立網頁
除了參考網站套件所提供的可用範本以外,您也可以根據範本ibn AEM建立網頁。
-
在AEM首頁面上,按一下「建立>頁面」 。
-
選擇要自訂的範本。 按一下「下一步」。
-
輸入頁面屬性。
頁面屬性 -
若要建立頁面,請按一下 Create。
-
選取新頁面並按一下 Edit。
-
在頁面上插入元件,例如 學習 — 內容。
依網站篩選 -
選擇要在頁面上顯示的必要目錄篩選器。
從藍圖建立網站
ALM參考網站套件提供「學習網站藍圖」,可讓您為學習平台建立網站。 AEM藍圖可讓您直接從AEM Sites元件建置網頁。 您不需要使用任何範本。
-
在AEM起始頁面上,按一下 Sites。
-
按一下 Create > Site。
-
按一下學習網站Blueprint。
從Blueprint建立網站
-
按一下「下一步」。
-
在屬性頁面上,輸入頁面中繼資料。 按一下「建立」。
選取學習網站Blueprint -
按一下「首頁」超連結,以導覽至您已建立之網站的首頁。 您可以在此頁面上自訂Widget和目錄元件。
為您的網站編碼
除了使用內建範本並使用WYSIWYG元件從頭開始建立您的網站外,您還可以撰寫程式碼並建置網站。
程式碼位於參考網站GitHub存放庫中,可供您開始使用。
範本的主要部分為:
- core:Java套件組合包含所有核心功能(例如OSGi服務、接聽程式或排程器)以及與元件相關的Java程式碼(例如servlet或請求篩選器)。
- ui.apps:包含專案的/apps (和/etc)部分,即JS&CSS clientlibs、元件、範本。
- ui.content:此變數包含使用ui.apps中的元件的範例內容
- ui.frontend:包含React元件。
所有程式碼都位於存放庫中,可供您啟動和執行。
將學習管理員元件匯入並新增至現有網頁或範本
安裝AEM參考站台套件會將Learning Manager元件新增至您的AEM Sites執行個體。 預設情況下,您可以將這些元件新增到我們提供的現成可用的Web專案(網站)學習網站。 這些元件也可在您從學習網站Blueprint建立的網站中使用。
不過,如果您想要將這些新新增的Learning Manager元件用於您現有的Web專案或網站,則應使用下列程式匯入這些元件。
-
安裝ALM參照站台套件。
-
開啟Web專案,並導覽至HTML檔案(針對您要新增Learning Manager元件的網頁或網頁範本)。
-
加入會議
開啟HTML檔案並將下列程式碼片段新增至頁面元件,讓程式碼在頁面轉譯器中呈現的學習元件之前執行。
<sly data-sly-use.configModel="com.adobe.learning.core.models.GlobalConfigurationModel"/><meta name="cp-config" content="${configModel.config}" />上述程式碼會將對應的設定新增至頁面的meta標籤中,這是學習元件轉譯的必要條件。 如需詳細資訊,請參閱Adobe Learning Manager參考網站。
-
確認您已對應組態與Web專案。
-
開啟您要匯入AEM Sites元件的Learning Manager範本。
-
在範本頁面編輯器上,瀏覽至「允許的元件」容器,並選取 原則。
-
在「原則」頁面中,導覽至「屬性>允許的元件」,並選取下列元件「學習 — 內容」、「學習 — 表單」和「學習 — 結構」
下列程式可讓範本完成匯入的Learning Manager元件的使用者端程式庫相依性。
包含這些元件的網頁應載入這些程式庫,才能成功轉譯和使用元件。
-
在範本頁面編輯器上,按一下頁面資訊,然後按一下頁面原則。
-
在「原則」頁面中,導覽至「屬性>使用者端程式庫」,並將它們新增至您的範本頁面:
- learning.site
- learning.ui
- learning.commerce
儲存此範本後,您可以在衍生自此範本的所有網頁中新增Learning Manager元件。
在AEM中設定Widget configurethewidgetinaem
針對Widget設定,AEM作者只需要Learning Manager整合管理員提供的重新整理權杖。
您也可以在多個頁面中設定多個帳戶設定。
- 按一下 Tools > Cloud Services > Learning Manager Widget Configuration。
- 按一下 Create。
- 在這裡輸入重新整理權杖。 設定其他設定。
- EU地區的主機名稱應該變更為「learningmanagereu」。
- 儲存並關閉設定。
- 選取設定併發佈設定。
AEM Author aemauthor
AEM作者必須先在AEM範本中新增元件
接著AEM作者將能夠拖放Adobe Learning Manager元件,並據此進行設定。
Learning Manager元件需要將上述步驟中建立的設定對應至頁面。 作者可以在 Advanced > Configuration > Cloud Configuration 下編輯頁面屬性來對應設定,並提供設定路徑。 如此一來,作者就能建立多個Learning Manager帳戶的設定,並將每個帳戶對應至不同的Sites頁面。 如果組態未對應至頁面,元件會從父頁面遞回讀取組態,直到找到為止。
學習者 learner
學習者可以從頁面內參加課程。
若要存取Learning Manager Widget,學習者應為已登入AEM的使用者。 此外,學習者的rep 節點的"/profile"節點中應存在屬性 電子郵件:User。 此電子郵件應與Learning Manager帳戶中顯示的電子郵件完全相同。
學習者可以從頁面內參加課程。
也會儲存課程進度。
提供下列Widget:
- gamification
- 學習行事曆
- 社交Widget
- 目錄Widget
- 我的學習
- 根據同儕學習的建議
- 管理員的建議
- 根據學習者興趣的建議
如果沒有建議,Widget會顯示為空白。
支援Skyline
Skyline是AEM的雲端版本。 您必須先從封裝管理員安裝Skyline。 若要在AEM中使用Skyline元件,使用者必須在Learning Manager帳戶中。 換言之,使用者的電子郵件地址必須存在於帳戶中。
部署Skyline
設定Skyline的步驟已在GitHub存放庫中提及。
我的學習Widget
My Learning Widget可讓您向使用者顯示特定或一組目錄的培訓。
在頁面屬性的 Properties 區段中,從列出的選項中選取 Catalog。
「目錄」選項包含下列選項:
-
Catalog ids: 需要顯示培訓的逗號分隔目錄ID。
-
Sort: 訓練的排序順序。 排序選項如下:
- 名稱:依字母順序從A到Z排列學習物件。
- -name:依字母順序從Z到A排序學習物件。
- 日期:依日期遞增排序。
- -date:依日期遞減排序(最晚優先)。
- dateCreated:依學習物件的建立日期排序(最舊者優先)。
- -dateCreated:依建立日期排序(最新者優先)。
- dateRegistered:依學習者的註冊日期(最早優先)排序。
- -dateRegistered:依註冊日期排序(最近的前一個)。
- 評等:依學習者評等(最低至最高)排序。
- -rating:依評等排序(最高至最低)。
- dueDate:依課程的到期日排序(最早的到期日優先)。
- 成效:根據學習者回饋意見依成效分數排序。
- 進度:依學習者進度排序(進度最小到最多)。
-
Learner State: 傳回所有使用下列作為篩選器的訓練 — 已註冊、已開始、已完成和未註冊。 如果排序選項是dateRegistered、dueDate或dateRegistered,將不會顯示搜尋結果。
-
Skill name: 用來篩選確切訓練的技能。
-
Tag name: 用來篩選確切結果的標籤。
以下是一些您可以自訂的其他元件:
Learning Object Types: 根據學習物件的型別篩選。 支援的型別為course、certification、jobAid和learningProgram。
在AEM中,橫條中的卡片標題最初會是空的。 在屬性中,輸入widgets.html中標題的名稱。
自訂
您可以使用widgets.html來自訂版面外觀與風格。 您可以變更顯示的卡片外觀並自訂主題。
在 General Settings 區段中,您可以選擇卡片的主要和次要顏色,並指定自訂佈景主題的屬性。
{
"globalCssText":"@import url('https://fonts.googleapis.com/css2?family=Grandstander:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');",
"fontNames":"Grandstander",
"cardLayout":{
"cardLayoutName":"compact",
"cardPrimaryColor":"#376BA4",
"cardSecondaryColor":"#F98EB0",
"startedStateTextColor":"#ffffff",
"continueStateTextColor":"#ffffff",
"revisitStateTextColor":"#ffffff",
"startedStateColor":"#a0a0a0",
"continueStateColor":"#f9a122",
"revisitedStateColor":"#7fbc64",
"textPrimaryColor":"#ffffff",
"textSecondaryColor":"#d93f3f",
"navIconColor":"#a0a0a0"
}
}
設定AEM網站中已儲存的課程Widget
「我的已儲存課程」Widget可讓學習者直接在學習頁面上檢視其已建立書籤或已儲存的課程,並可讓您輕鬆存取要稍後重新造訪或完成的課程。
若要在AEM網站中設定「我的已儲存課程」Widget:
- 啟動AEM網站。
- 以 Edit 模式開啟頁面。
- 前往 Components Browser 並將 My Learning widget 新增至頁面。
- 選取元件,然後選取 Configure。
- 從 My Saved Courses 的下拉式功能表中選取 Properties。
- 選取 Done,然後在 Preview 或 Publish 模式下重新整理頁面。
學習者可以在學習者首頁的 Saved by Me 區段中檢視其儲存的課程。選取 Saved by Me 區段會將學習者導向目錄頁面,並顯示已建立書籤的課程的確切數量。
當您在目錄中套用另一個篩選器時,只會顯示符合該篩選的結果。 書籤化專案不會自動包含在內。
忽略高階LO註冊
如果已啟用 忽略高階LO註冊 核取方塊,且使用者已直接註冊學習計畫或認證,則該認證或學習計畫的課程將會顯示在Widget中供使用者使用。
如果核取方塊已停用,使用者未直接註冊的學習計畫或認證中的課程將不會顯示。
*選取「忽略較高訂單的學習對象註冊」核取方塊。
然後,此設定會套用至Widget。
安全性
使用者端ID和使用者端密碼欄位已新增。 此外,重新整理權杖會被遮罩。 使用者建立整個設定後,如果使用者再次開啟設定進行編輯,或其他使用者開啟此設定,則重新整理權杖將被遮罩。