快速設定

快速設定是快速逐步說明如何安裝及執行WKND應用程式和作為遠端SPA，並使用AEM SPA編輯器編寫。

快速設定會直接進入本教學課程的結束狀態。

快速設定的影片逐步說明

必備條件

本教學課程需要下列項目：

本教學課程假設：

  • Microsoft® Visual Studio代 碼作為IDE
  • ~/Code/wknd-app的工作目錄
  • 在http://localhost:4502上以作者服務形式執行AEM SDK
  • 使用密碼為admin的本機admin帳戶執行AEM SDK
  • 在http://localhost:3000上執行SPA

啟動AEM SDK快速入門

在連接埠4502上下載並安裝具有預設admin/admin憑證的AEM SDK Quickstart。

  1. 下載最新AEM SDK

  2. 將AEM SDK解壓縮至~/aem-sdk

  3. 執行AEM SDK Quickstart Jar

    $ java -jar aem-sdk-quickstart-xxx.jar

# Provide `admin` as the admin user's password

AEM SDK將在http://localhost:4502上啟動並自動啟動。 使用下列憑證登入：

  • 使用者名稱: admin
  • 密碼: admin

下載並安裝WKND站點包

本教學課程相依於​WKND 0.3.0+的​專案（針對內容）。

  1. 下載最新版本 aem-guides-wknd.all.x.x.x.zip
  2. 使用admin憑證登入AEM SDK的套件管理器，網址為http://localhost:4502/crx/packmgr。
  3. ____ 上傳 aem-guides-wknd.all.x.x.x.zip 在步驟1下載的
  4. 點選​Install​按鈕以取得aem-guides-wknd.all-x.x.x.zip項目

下載並安裝WKND應用程式SPA套件

若要快速設定，會提供AEM套件，其中包含教學課程的最終AEM設定和內容。

  1. 下載
  2. 下載
  3. 使用admin憑證登入AEM SDK的套件管理器，網址為http://localhost:4502/crx/packmgr。
  4. ____ 上傳 wknd-app.all.x.x.x.zip 在步驟1下載的
  5. 點選​Install​按鈕以取得wknd-app.all.x.x.x.zip項目
  6. ____ 上傳 wknd-app.ui.content.sample.x.x.x.zip 在步驟2中下載的
  7. 點選​Install​按鈕以取得wknd-app.ui.content.sample.x.x.x.zip項目

下載WKND應用程式來源

從Github.com下載WKND應用程式的原始碼，並切換包含本教學課程中執行之SPA變更的分支。

$ mkdir -p ~/Code/wknd-app
$ cd ~/Code/wknd-app
$ git clone --branch feature/spa-editor https://github.com/adobe/aem-guides-wknd-graphql.git
$ cd aem-guides-wknd-graphql

啟動SPA應用程式

從專案的根目錄，安裝SPA專案npm相依性並執行應用程式。

$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ npm install
$ npm run start

如果運行npm install時出錯，請嘗試下列步驟：

$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ rm -f package-lock.json
$ npm install --legacy-peer-deps
$ npm run start

驗證SPA是否在http://localhost:3000執行。

在AEM SPA編輯器中製作內容

製作內容之前，請先排列瀏覽器視窗，讓AEM Author(http://localhost:4502)位於左側，而遠端SPA(http://localhost:3000)則位於右側。 此安排可讓您查看AEM來源內容的變更如何立即反映在SPA中。

  1. 以admin登入AEM SDK作者服務
  2. 導覽至「Sites > WKND應用程式> us > en」
  3. 編輯​WKND應用首頁
  4. 切換到​Edit​模式

製作首頁檢視的固定元件

  1. 點選文字​WKND Adventures​以啟動固定標題元件(硬式編碼至SPA首頁檢視)
  2. 點選「標題」元件動作列上的​扳手​圖示
  3. 變更標題元件的內容並儲存
  4. 重新整理http://localhost:3000上執行的SPA，並查看是否反映變更

製作首頁檢視的容器元件

  1. 仍在編輯​WKND應用首頁​時……
  2. 展開​SPA編輯器的側欄（位於左側）
  3. 點選​元件​圖示
  4. 從位於WKND標誌下方和固定標題元件上方的容器元件中添加、更改或刪除元件
  5. 重新整理http://localhost:3000上執行的SPA，並查看是否反映變更

在動態路線上製作容器元件

  1. 在SPA編輯器中切換至​預覽​模式
  2. 點選​Bali Surf Camp​卡片並導覽至其動態路線
  3. 從位於​Interial​標題上方的容器元件中新增、變更或移除元件
  4. 重新整理http://localhost:3000上執行的SPA，並查看是否反映變更

WKND應用程式首頁>冒險 下的新AEM頁面必須​具有與對應冒險內容片段名稱相符的AEM頁面名稱。 這是因為SPA路由到AEM頁面的映射基於路由的最後一段，即內容片段的名稱。

恭喜！

您只需快速了解AEM SPA Editor如何透過可控、可編輯的區域增強SPA! 如果您有興趣，請查看教學課程的其餘部分，但請務必從頭開始，因為在此快速設定中，您的本機開發環境現在處於教學課程的結束狀態！

本頁內容