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

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

注意

/content/wknd-mobile/en/api的頁面內容架構已預先建立。 enapi的基本頁面有建築和組織用途,但不嚴格要求。 如果API內容可本地化,則最好遵循通常的「語言複製」和「多網站管理員」頁面組織最佳實務,因為API頁面可像AEM Sites頁面一樣本地化。

「建立事件API」頁

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

「編寫事件API」頁

注意

本專案提供CSS,以提供一些基本的樣式來提供作者體驗。

  1. 導覽至​AEM >網站> WKND Mobile >英文> API,選擇​事件API​頁面,然後點選頂端動作列中的​編輯,編輯​頁面。

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

    • 使用/content/dam/wknd-mobile/images/wknd-logo.png中提供的標誌。
  3. 新增​標籤行​以顯示在事件上方。

    1. 編輯​Text​元件
    2. 輸入文字:
      • The WKND is here.
  4. 選擇要顯示的​events:

    1. 在​Properties​頁籤上設定以下配置:
      • 型號:Event
      • 父路徑:/content/dam/wknd-mobile/tw/events
      • 標籤:<留空>
    2. 在​Elements​標籤上設定下列組態:
      • 移除任何列出的元素,以確保「事件內容片段」的「所有元素」已公開。

檢視API頁面的JSON輸出

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

此API的使用者必須充分瞭解此JSON結構(或結構)。 關鍵的API消費者瞭解結構的哪些方面是固定的(即 事件API的標誌(影像)和即時標籤(文字),而且流暢(即 內容片段清單元件下列出的事件)。

在已發佈的API上違反此合約,可能會導致使用應用程式的行為不正確。

  1. 在新的瀏覽器標籤中,使用.model.json選擇器來請求「事件API」頁面(此選擇器會叫用AEMContent Services的JSON匯出器),並將「頁面」和「元件」序列化為已標準化、已清楚定義的JSON結構。

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

  2. 請求​事件API​頁面為​JSON

    結果應類似:

內AEM容服務JSON輸出

注意

此JSON可使用.tidy選擇器,以​tidy(格式化)方式輸出,以利人為閱讀:

下一步

(可選)透過AEM Package Manager,在AEM Author上安裝com.adobe.aem.guides.wknd-mobile.content.chapter-5.zip內容套件。 本套件包含教學課程本章及前幾章中概述的設定和內容。

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now