第5章 — 編寫內容服務頁面

AEM Headless教學課程的第5章涵蓋從第4章中定義的範本建立頁面。 本章中建立的頁面會成為行動應用程式的JSON HTTP端點。

注意

/content/wknd-mobile/en/api的頁面內容架構已預先建置。 en和api的基頁具有架構和組織目的，但並不嚴格要求。 如果API內容可能已本地化，最佳作法是遵循一般的「語言復本」和「多網站管理員」頁面組織最佳實務，因為API頁面可像任何AEM Sites頁面一樣本地化。

建立事件API頁面

  1. 導覽至​AEM > Sites > WKND Mobile > English >API。
  2. 點選「API」頁面的標籤，然後點選頂端 ​​動作列中的「建立」按鈕，並在「API」頁面下方建立新的「事件API」頁面。
    1. 點選頂端動作列中的​建立
    2. 選擇​事件API​模板
    3. 在​Name​欄位中，輸入​events
    4. 在​Title​欄位中，輸入​Events API
    5. 點選頂端動作列中的​建立​以建立頁面
    6. 點選​完成​以返回AEM Sites管理員

編寫「事件API」頁面

注意

專案提供CSS，以提供一些製作體驗的基本樣式。

  1. 導覽至「事件API」頁面，方法是導覽至「AEM >網站> WKND行動>英文> API」，選取「事件API」頁面，然後點選頂端動作列中的「編輯」。

  2. 將​標誌影像​從「資產尋找器」拖放至「影像」元件預留位置，以在應用程式中顯示。

    • 使用/content/dam/wknd-mobile/images/wknd-logo.png處提供的徽標。

  3. 新增​標籤行​以顯示在事件上方。

    1. 編輯​Text​元件
    2. 輸入文本：
      • The WKND is here.

  4. 選取要顯示的​events:

    1. 在​Properties​標籤上設定以下配置：
      • 模型：事件
      • 父路徑：/content/dam/wknd-mobile/en/events
      • 標籤：<留空>
    2. 在​Elements​標籤上設定以下配置：
      • 移除所有列出的元素，以確保事件內容片段的所有元素都公開。

檢閱API頁面的JSON輸出

使用.model.json選取器要求頁面，即可檢閱JSON輸出及其格式。

此API的使用者必須充分了解此JSON結構（或結構）。 重要的API使用者必須了解結構的哪些方面已修正(即 事件API的標誌（影像）和標籤即時（文字），且流暢(即 「內容片段清單」元件下列出的事件)。

在已發佈的API上違反此合約，可能會在使用的應用程式中導致錯誤行為。

  1. 在新的瀏覽器標籤中，使用.model.json選取器來要求事件API頁面(會叫用AEM Content Services的JSON匯出工具)，並將頁面和元件序列化為已標準化且定義良好的JSON結構。

    這些頁面產生的JSON結構是使用應用程式必須符合的結構。

  2. 將「事件API」頁面要求為​JSON。

    結果應該會顯示類似：

AEM內容服務JSON輸出

注意

此JSON可使用.tidy選取器以​tidy（格式化）方式輸出，以利人類閱讀：

下一步

選擇性地，透過AEM Package Manager在AEM作者上安裝com.adobe.aem.guides.wknd-mobile.content.chapter-5.zip內容套件。 此套件包含本教學課程及前幾章中概述的設定和內容。

本頁內容