為您的示範網站啟用 AEM Screens

最後更新： 2025年2月14日
  • 主題：

建立對象：

  • 管理員
  • 使用者
  • 開發人員

了解在您的示範網站上啟用完整 AEM Screens as a Cloud Service 體驗的步驟。

NOTE
AEM Screens 示範要求將 Screens Add-on 新增至 Cloud Manager 方案。透過「將 Screens 作為附加元件新增至 Cloud Manager 的新程式」了解如何新增它。

目前進度

在 AEM 參考示範附加元件歷程的上一份文件「建立示範網站」中，您已根據參考示範附加元件的範本建立了一個新的示範網站。您現在應該：

  • 了解如何存取 AEM 製作環境。
  • 了解如何根據範本建立網站。
  • 了解導覽網站結構和編輯頁面的基礎知識。

現在您已經有了自己的示範網站可供探索，並了解了可協助您管理示範網站的工具，接下來可以為您的簡報網站啟用完整的 AEM Screens as a Cloud Service 體驗。

目標

AEM 參考示範附加元件包含適用於咖啡店垂直業務 We.Cafe 的 AEM Screens 內容。本文件協助您了解如何在 AEM Screens 內容中執行 We.Cafe 示範設定。閱讀文件後，您應該：

  • 了解 AEM Screens 的基礎知識。

  • 了解 We.Cafe 示範內容。

  • 了解如何針對 We.Cafe 設定 AEM Screens。

    • 了解如何建立 We.Cafe 的 Screens 專案。
    • 能夠使用 Google Sheets 和 API 設定模擬天氣服務。
    • 根據您的「天氣服務」模擬動態變化的 Screens 內容。
    • 安裝並使用 Screens Player。

了解 Screens

AEM Screens as a Cloud Service 是數位招牌解決方案，可讓行銷人員大規模建立和管理動態數位體驗。利用 AEM Screens as a Cloud Service，您可以建立要在公共空間使用的吸引人的動態數位招牌體驗。

TIP
有關 AEM Screens as a Cloud Service 的完整詳細資訊，請參閱本文件結尾處的「其他資源」區段。

透過安裝 AEM 參考示範附加元件，您會自動在示範製作環境中獲得 AEM Screens 適用的 We.Cafe 內容。在「部署示範 Screens 專案」中說明的步驟，會發佈該內容並部署到媒體播放器等，讓您啟用完整的 AEM Screens 體驗。

了解示範內容

We.Cafe 咖啡店包含位於美國三個地點的三家咖啡店。這三家咖啡店都有三種相似的體驗：

  • 櫃檯上方有菜單展示板，上有兩個或三個垂直面板
  • 面向街道的入口顯示區，附有一個水平或垂直面板，吸引顧客進入咖啡店
  • 快速自助點餐機，只需一台直立式平板電腦即可不必排隊
NOTE
在目前的示範版本中，只能測試入口顯示區。在未來版本中將會包含其他顯示區。
目前版本的示範中不包括點餐機。在未來的版本中會包含點餐機。

假設紐約的位置是一家沒有太多空間的小型咖啡店，因此：

  • 這裡的菜單展示板只有兩個垂直面板，而不像舊金山和聖荷西的菜單展示板有三個垂直面板
  • 入口顯示區垂直放置而不是水平放置
NOTE
如果您決定連接到 Connect Screens as a Cloud Service 區段中的 Screens Cloud Service，在顯示區下將位置建立為資料夾。如需有關顯示區的更多資訊，請參閱本文件結尾處的「其他資源」區段。

咖啡館佈局

We.Cafe 位置的格局如下。

We.Cafe 格局

NOTE
螢幕尺寸以英吋為單位。

入口

入口顯示區是日間分段顯示，從早上到下午只會更換第一張影像。在每一回接連展示的內容中，它還宣傳不同的特別咖啡準備方式，使用計量嵌入式連播內容，每次播放不同的項目。

入口頻道的最後一個影像也會根據室外溫度來決定目標 (即動態變化)，可以按照「建立模擬資料來源」區段進行模擬。

部署示範 Screens 專案

若要使用您在「建立方案」步驟建立的沙箱中的示範內容，您必須根據範本來建立網站。

如果您尚未建立 We.Cafe 示範網站，只需按照「建立示範網站」區段所述相同步驟即可。選擇範本時，直接選擇「We.Cafe 網站範本」。

We.Cafe 範本

在精靈完成後，您會找到部署在 Sites 之下的內容，而且可以像導覽任何其他內容一樣進行導覽和探索。

We.Cafe 內容

現在您已經有 We.Cafe 示範內容，您可以選擇 AEM Screens 的測試方式：

  • 如果您只想探索 AEM Sites 主控台中的內容，就在「其他資源」區段中開始探索並搜尋更多資訊即可；無需採取任何其他動作。
  • 如果您想體驗 AEM Screens 的完整動態功能，則請繼續閱讀下一區段「動態變更 Screens 內容」。

動態變更 Screens 內容

就像 AEM Sites 一樣，AEM Screens 可以根據環境動態變更內容。We.Cafe 示範具備已設定的頻道，可根據目前溫度顯示不同的內容。要模擬這種體驗，您必須建立自己的簡易天氣服務。

建立模擬的資料來源

由於在示範或測試期間很難改變天氣，因此必須模擬溫度變化。模擬天氣服務的方法是將溫度值儲存在 Google Sheet 試算表，並由 AEM 的 ContextHub 呼叫來擷取溫度。

建立 Google API 金鑰

首先，您必須建立一個 Google API 金鑰以方便資料交換。

  1. 登入 Google 帳戶。

  2. 使用此連結 https://console.cloud.google.com 開啟 Cloud Console。

  3. 按一下 Google Cloud Platform 標籤之後工具列左上角目前的專案名稱來建立專案。

    Google Cloud Console

  4. 在專案選擇器對話框中，按一下「新增專案」。

    新增專案

  5. 提供專案名稱並按一下「建立」。

    建立專案

  6. 確保選取您的新專案，然後使用 Cloud Console 儀表板中的漢堡菜單，選取「API 和服務」。

    API 和服務

  7. 在「API 和服務」視窗的左邊面板中，按一下視窗上方的「認證」，再挾一下「建立認證」和「API 金鑰」。

    認證

  8. 在對話框中，複製新的 API 金鑰並儲存以供日後使用。按一下「關閉」以便退出該對話框。

啟用 Google Sheets API

若要允許使用 API 金鑰進行 Google Sheets 資料交換，您必須啟用 Google Sheets API。

  1. 返回您的專案的 Google Cloud 主控台 (https://console.cloud.google.com)，然後使用漢堡菜單選取​ 「API 和服務」>「程式庫」。

    API 程式庫

  2. 在「API 程式庫」畫面中，捲動尋找您要搜尋的「Google Sheets API」，然後按一下它。

    API 程式庫搜尋

  3. 在「Google Sheets API」視窗中，按一下「啟用」。

    Google sheets API

建立 Google Sheets 試算表

現在，您可以建立 Google Sheets 試算表來儲存天氣資料。

  1. 前往 https://docs.google.com 並建立一個 Google Sheets 試算表。

  2. 在儲存格 A2 中輸入 32 來定義溫度。

  3. 共用文件，按一下視窗右上角的「共用」，然後在「取得連結」之下，按一下「變更」。

    共用工作表

  4. 複製下一步的連結。

    共用連結

  5. 找到工作表 ID。

    • 工作表 ID 是您在 d/ 之後和 /edit 之前複製的在工作表連結中的任意字元字串。

    • 例如：

      • 如果您的 URL 是 https://docs.google.com/spreadsheets/d/1cNM7j1B52HgMdsjf8frCQrXpnypIb8NkJ98YcxqaEP30/edit#gid=0
      • 工作表 ID 是 1cNM7j1B52HgMdsjf8frCQrXpnypIb8NkJ98YcxqaEP30。

  6. 複製工作表 ID 以供將來使用。