使用本機AEM SDK的AEM Headless快速設定 setup

AEM Headless快速設定讓您使用WKND Site範例專案中的內容,以AEM Headless進行操作,並提供在AEM Headless GraphQL API使用內容的範例React應用程式(SPA)。 本指南使用 AEMAS A CLOUD SERVICESDK.

先決條件 prerequisites

下列工具應在本機安裝:

1.安裝AEM SDK aem-sdk

此設定使用 AEMAS A CLOUD SERVICESDK 探索AEM GraphQL API。 本節提供快速指南,說明如何安裝AEM SDK並以作者模式執行。 有關設定本機開發環境的更詳細指南 可在此處找到.

NOTE
您也可以在本教學課程之後,使用 AEMas a Cloud Service環境. 在本教學課程中,我們還將介紹使用雲端環境的其他注意事項。
  1. 導覽至 軟體發佈入口網站 > AEMas a Cloud Service 並下載最新版的 AEM SDK.

    軟體發佈入口網站

  2. 解壓縮下載內容並複製Quickstart jar (aem-sdk-quickstart-XXX.jar)至專用的資料夾,例如 ~/aem-sdk/author.

  3. 將jar檔案重新命名為 aem-author-p4502.jar.

    author 名稱會指定快速入門Jar以作者模式啟動。 此 p4502 指定連線埠4502上的Quickstart執行。

  4. 若要安裝和啟動AEM執行個體,請在包含jar檔案的資料夾中開啟命令提示字元,然後執行下列命令:

    code language-shell
    $ cd ~/aem-sdk/author
    $ java -jar aem-author-p4502.jar
    
  5. 提供管理員密碼作為 admin. 可接受任何管理員密碼,但建議使用 admin 本機開發,降低重新設定的需求。

  6. AEM服務安裝完畢後,新瀏覽器視窗應開啟於 http://localhost:4502.

  7. 以使用者名稱登入 admin 和AEM初始啟動期間選取的密碼(通常是 admin)。

2.安裝範例內容 install-sample-content

內容範例,來自 WKND參考網站 用於加速教學課程。 WKND是虛構的生活風格品牌,通常與AEM培訓一起使用。

WKND網站包含公開所需的設定 GraphQL端點. 在真實世界的實作中,請依照檔案說明的步驟 包含GraphQL端點 位於您的客戶專案中。 A CORS 也封裝為WKND網站的一部分。 授予外部應用程式的存取權需要CORS設定,瞭解有關 CORS 可以在下方找到。

  1. 下載適用於WKND網站的最新編譯的AEM套件: aem-guides-wknd.all-x.x.x.zip.

    note note
    NOTE
    請務必下載與AEMas a Cloud Service相容的標準版本,並 classic 版本。
  2. AEM開始 功能表,導覽至 工具 > 部署 > 封裝.

    導覽至封裝

  3. 按一下 上傳套裝 並選擇在先前步驟中下載的WKND套件。 按一下 安裝 以安裝套件。

  4. AEM開始 功能表,導覽至 資產 > 檔案 > WKND已共用 > 英文 > 冒險.

    冒險的資料夾檢視

    這是構成WKND品牌宣傳的各種冒險的所有資產的資料夾。 這包括影像和視訊等傳統媒體型別,以及AEM特有的媒體,例如 內容片段.

  5. 按一下 懷俄明州下山滑雪 資料夾,然後按一下 懷俄明州下山滑雪內容片段 卡片:

    內容片段卡片

  6. 內容片段編輯器隨即開啟,以進行「懷俄明州下山滑雪」冒險活動。

    內容片段編輯器

    觀察各種欄位,例如 標題說明、和 活動 定義片段。

    內容片段 是在AEM中管理內容的其中一種方式。 內容片段是可重複使用的、與呈現方式無關的內容,由結構化資料元素組成,例如文字、RTF文字、日期或其他內容片段的參考。 內容片段稍後會在快速設定中更詳細地探討。

  7. 按一下 取消 以關閉片段。 您可以隨意瀏覽至其他資料夾,並探索其他冒險內容。

NOTE
如果使用Cloud Service環境,請參閱檔案以瞭解如何 將程式碼基底(例如WKND參考網站)部署到Cloud Service環境.

3.下載並執行WKND React應用程式 sample-app

本教學課程的目標之一,是說明如何使用GraphQL API取用外部應用程式的AEM內容。 本教學課程使用範例React應用程式。 React應用程式經過刻意簡化,可專注與AEM GraphQL API整合。

  1. 開啟新的命令提示字元,並從GitHub複製範例React應用程式:

    code language-shell
    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    $ cd aem-guides-wknd-graphql/react-app
    
  2. 在中開啟React應用程式 aem-guides-wknd-graphql/react-app 在您選擇的IDE中。

  3. 在IDE中,開啟檔案 .env.development/.env.development. 驗證 REACT_APP_AUTHORIZATION 行已取消註解,且檔案會宣告以下變數:

    code language-plain
    REACT_APP_HOST_URI=http://localhost:4502
    REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
    # Use Authorization when connecting to an AEM Author environment
    REACT_APP_AUTHORIZATION=admin:admin
    

    確定 REACT_APP_HOST_URI 指向您的本機AEM SDK。 為方便起見,此快速入門會將React應用程式連線至 AEM作者. 作者 服務需要驗證,因此應用程式會使用 admin 建立連線的使用者。 將應用程式連線至AEM Author是開發期間的常見做法,因為這有助於在無需發佈變更的情況下快速迭代內容。

    note note
    NOTE
    在生產案例中,應用程式將連線至AEM 發佈 環境。 有關詳細資訊,請參閱 生產部署 區段。
  4. 安裝並啟動React應用程式:

    code language-shell
    $ cd aem-guides-wknd-graphql/react-app
    $ npm install
    $ npm start
    
  5. 新的瀏覽器視窗會自動開啟應用程式,開啟日期: http://localhost:3000.

    React入門應用程式

    隨即顯示AEM冒險內容清單。

  6. 按一下其中一個冒險影像以檢視冒險詳細資料。 系統會向AEM提出要求,要求您傳回冒險的詳細資訊。

    冒險詳細資料檢視

  7. 使用瀏覽器的開發人員工具來檢查 網路 要求。 檢視 XHR 要求並觀察多個GET要求 /graphql/execute.json/.... 此路徑首碼會叫用AEM持續查詢端點,並在首碼之後使用名稱和編碼引數選取要執行的持續查詢。

    GraphQL端點XHR要求

4.在AEM中編輯內容

在React應用程式執行中,更新AEM中的內容,並檢視應用程式中是否反映變更。

  1. 導覽至AEM http://localhost:4502.

  2. 瀏覽至 資產 > 檔案 > WKND已共用 > 英文 > 冒險 > 巴厘島衝浪營.

    Bali Surf Camp資料夾

  3. 按一下 巴厘島衝浪營 內容片段,以開啟內容片段編輯器。

  4. 修改 標題說明 探險的魔法。

    修改內容片段

  5. 按一下 儲存 以儲存變更。

  6. 重新整理React應用程式,位於 http://localhost:3000 若要檢視您的變更:

    更新巴厘島衝浪營地冒險

5.探索GraphiQL graphiql

  1. 開啟 GraphiQL 瀏覽至 工具 > 一般 > GraphQL查詢編輯器

  2. 選取左側的現有持續查詢,並執行它們以檢視結果。

    note note
    NOTE
    GraphiQL工具和GraphQL API是 在教學課程稍後章節中更詳細地探討.

恭喜! congratulations

恭喜,您現在有外部應用程式使用GraphQL的AEM內容。 歡迎在React應用程式中檢查程式碼,並繼續嘗試修改現有的內容片段。

後續步驟

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