文件AEMAEM 教學課程AEM Headless 教學課程

SPA編輯器專案 create-project

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

  • 初學者
  • 開發人員

瞭解如何使用Adobe Experience Manager (AEM) Maven專案，作為與AEM SPA編輯器整合的Angular應用程式的起點。

目標

  1. 瞭解從Maven原型建置的新AEM SPA Editor專案的結構。
  2. 將入門專案部署到AEM的本機執行個體。

您將建置的內容

在本章中，已根據AEM專案原型部署新的AEM專案。 AEM專案是以AngularSPA的非常簡單的起點進行啟動。 本章中使用的專案將作為WKND SPA實施的基礎，並在未來的章節中建置。

WKND SPAAngular入門專案

傳統Hello World訊息。

先決條件

檢閱設定本機開發環境所需的工具和指示。 請確定以​ 作者 ​模式啟動的Adobe Experience Manager全新執行個體正在本機執行。

取得專案

有幾個選項可為AEM建立Maven多模組專案。 此教學課程使用最新的AEM專案原型作為教學課程程式碼的基礎。 已修改專案程式碼，以支援多個AEM版本。 請檢閱關於回溯相容性的備註。

CAUTION
最佳實務是使用原型的​ 最新 ​版本來產生實作的新專案。 AEM專案應該使用原型的aemVersion屬性，以單一版本的AEM為目標。

  1. 透過Git下載本教學課程的起點：

    code language-shell 
    $ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/create-project-start

  2. 以下資料夾和檔案結構代表本機檔案系統上Maven原型產生的AEM專案：

    code language-plain 
    |--- aem-guides-wknd-spa
    |--- all/
    |--- core/
    |--- dispatcher/
    |--- ui.apps/
    |--- ui.apps.structure/
    |--- ui.content/
    |--- ui.frontend /
    |--- it.tests/
    |--- pom.xml
    |--- README.md
    |--- .gitignore
    |--- archetype.properties

  3. 從AEM專案原型產生AEM專案時，使用了下列屬性：

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2
    屬性 值
    aemVersion 雲端
    appTitle WKND SPAANGULAR
    appId wknd-spa-angular
    groupId com.adobe.aem.guides
    frontendModule angular
    封裝 com.adobe.aem.guides.wknd.spa.angular
    includeExamples n
    note note
    NOTE
    注意frontendModule=angular屬性。 這會告知AEM專案原型以要與AEM SPA編輯器搭配使用的起始Angular程式碼基底來啟動專案。

建置專案

接下來，使用Maven編譯、建置專案計畫碼並將其部署到AEM的本機執行個體。

  1. 請確定AEM的執行個體正在連線埠​ 4502 ​上本機執行。

  2. 從命令列終端機，驗證Maven是否已安裝：

    code language-shell 
    $ mvn --version
Apache Maven 3.6.2
Maven home: /Library/apache-maven-3.6.2
Java version: 11.0.4, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-11.0.4.jdk/Contents/Home

  3. 從aem-guides-wknd-spa目錄執行以下Maven命令以建置專案並將其部署到AEM：

    code language-shell 
    $ mvn -PautoInstallSinglePackage clean install

    如果使用AEM 6.x：

    code language-shell 
    $ mvn clean install -PautoInstallSinglePackage -Pclassic

    專案的多個模組應該編譯並部署到AEM。

    code language-plain 
    [INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for wknd-spa-angular 1.0.0-SNAPSHOT:
[INFO]
[INFO] wknd-spa-angular ................................... SUCCESS [  0.473 s]
[INFO] WKND SPA Angular - Core ............................ SUCCESS [ 54.866 s]
[INFO] wknd-spa-angular.ui.frontend - UI Frontend ......... SUCCESS [02:10 min]
[INFO] WKND SPA Angular - Repository Structure Package .... SUCCESS [  0.694 s]
[INFO] WKND SPA Angular - UI apps ......................... SUCCESS [  6.351 s]
[INFO] WKND SPA Angular - UI content ...................... SUCCESS [  2.885 s]
[INFO] WKND SPA Angular - All ............................. SUCCESS [  1.736 s]
[INFO] WKND SPA Angular - Integration Tests Bundles ....... SUCCESS [  2.563 s]
[INFO] WKND SPA Angular - Integration Tests Launcher ...... SUCCESS [  1.846 s]
[INFO] WKND SPA Angular - Dispatcher ...................... SUCCESS [  0.270 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------

    Maven設定檔​ autoInstallSinglePackage ​會編譯專案的個別模組，並將單一套件部署至AEM執行個體。 依預設，此封裝會部署至在本機執行於連線埠​ 4502 ​上的AEM執行個體，並具有​ admin：admin ​的認證。

  4. 瀏覽至本機AEM執行個體上的​ 封裝管理員： http://localhost:4502/crx/packmgr/index.jsp。

  5. 您應該會看到wknd-spa-angular.all、wknd-spa-angular.ui.apps和wknd-spa-angular.ui.content的三個套件。

    WKND SPA封裝

    專案所需的所有自訂程式碼都會整合到這些套件中，並安裝在AEM執行階段上。

  6. 您應該也會看到spa.project.core和core.wcm.components的多個套件。 這些是原型自動包含的相依性。 如需AEM核心元件的詳細資訊，請參閱此處。

作者內容

接下來，開啟原型產生的入門SPA並更新部分內容。

  1. 導覽至​ 網站 ​主控台： http://localhost:4502/sites.html/content。

    WKND SPA包含基本網站結構，其中包含國家/地區、語言和首頁。 此階層是根據language_country和isSingleCountryWebsite的原型預設值。 產生專案時，可以更新可用的屬性來覆寫這些值。

  2. 選取頁面，然後按一下功能表列中的​ 編輯 ​按鈕，開啟​ us > en > WKND SPA Angular Home Page ​頁面：

    網站主控台

  3. Text ​元件已新增至頁面。 您可以像在AEM中編輯任何其他元件一樣編輯此元件。

    更新文字元件

  4. 新增額外的​ Text ​元件至頁面。

    請注意，製作體驗類似於傳統AEM Sites頁面的製作體驗。 目前可用的元件數量有限。 在本教學課程中新增更多內容。

Inspect單頁應用程式

接下來，確認這是使用瀏覽器開發人員工具的單頁應用程式。

  1. 在​ 頁面編輯器 ​中，按一下​ 頁面資訊 ​功能表> 以發佈的形式檢視：

    以發佈的形式檢視按鈕

    這將開啟一個具有查詢引數?wcmmode=disabled的新索引標籤，這會有效地關閉AEM編輯器： http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled

  2. 檢視頁面的來源，並注意找不到文字內容​ Hello World ​或任何其他內容。 您應該會看到類似以下的HTML：

    code language-html 
    ...
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="spa-root"></div>
    <script type="text/javascript" src="/etc.clientlibs/wknd-spa-angular/clientlibs/clientlib-angular.min.js"></script>
    ...
</body>
...

    clientlib-angular.min.js是載入到頁面上的AngularSPA，負責轉譯內容。

    內容來自何處？

  3. 返回標籤： http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled

  4. 開啟瀏覽器的開發人員工具，並在重新整理期間檢查頁面的網路流量。 檢視​ XHR ​要求：

    XHR要求

    應該有對http://localhost:4502/content/wknd-spa-angular/us/en.model.json的請求。 這包含所有將驅動SPA的內容（格式化為JSON）。

  5. 在新索引標籤中，開啟http://localhost:4502/content/wknd-spa-angular/us/en.model.json

    請求en.model.json代表將驅動應用程式的內容模型。 Inspect JSON輸出，您應該能夠找到代表​ Text ​元件的程式碼片段。

    code language-json 
    ...
":items": {
    "text": {
        "text": "<p>Hello World! Updated content!</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-angular/components/text"
    },
    "text_98796435": {
        "text": "<p>A new text component.</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-angular/components/text"
},
...

    在下一章中，我們將檢查JSON內容如何從AEM元件對應至SPA元件，以形成AEM SPA編輯器體驗的基礎。

    note note
    NOTE
    安裝瀏覽器擴充功能以自動格式化JSON輸出可能會有幫助。

恭喜！ congratulations

恭喜，您剛才已建立您的第一個AEM SPA Editor專案！

現在相當簡單，但在接下來的幾個章節中會新增更多功能。

後續步驟 next-steps

整合SPA — 瞭解SPA原始程式碼如何與AEM專案整合，並瞭解可用於快速開發SPA的工具。

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4