APL視覺多模態回應設計與實踐

– 5 分鐘閱讀

在語音應用開發中，整合視覺元素能顯著提升使用者經驗。本文將著重於 APL 的實務應用，包含如何透過 Response Builder 或 Authoring Tool 快速建構視覺介面，並詳細介紹容器、文字、影像等核心元件的特性與使用方法，同時提供程式碼範例說明如何將 APL 檔案整合至 Alexa 技能中，實作更豐富的互動效果。最後，文章也將探討 APL 與 APLA 的整合應用，以及如何在不同 Alexa 裝置上呈現一致的視覺體驗。

最新版本

要使用APL和APLA，需要安裝最新版本的ask-sdk-core。目前的最新版本是1.16.1。

測試

要測試APL和APLA，需要使用Alexa裝置或模擬器。開發者控制檯不支援APL和APLA測試。

注意

如果程式碼使用了APL和APLA，可能需要使用不同的匯入陳述式，例如：

from ask_sdk_model.interfaces.alexa.presentation.apl import RenderDocumentDirective as APLRenderDocumentDirective
from ask_sdk_model.interfaces.alexa.presentation.apla import RenderDocumentDirective as APLARenderDocumentDirective

然後，可以使用APLRenderDocumentDirective或APLARenderDocumentDirective建立指令。

9. APL 視覺多模態回應

9.1 簡介

在前一章中，我們介紹了 APL（Alexa Presentation Language）並學習瞭如何建立 APL JSON 檔案以及如何在程式碼中使用 RenderDocumentDirective 匯入 APL。現在，我們將探討視覺多模態回應。

9.2 建立 APL 視覺回應

建立一個新的技能，新增 APL 介面並重新構建技能。開發者控制檯中的「多模態回應」選項允許您使用「視覺」選項存取作者工具，預設情況下會顯示「建立使用 Response Builder」或「建立使用作者工具」的選項。

使用 Response Builder

「建立使用 Response Builder」會要求您輸入名稱並顯示常見範本的列表，例如：簡單文字和影像、多選擇、文字列表、音訊播放器、影片播放器等。您可以根據需要修改專案，然後選擇「預覽和測試」。

使用作者工具

點選「建立使用作者工具」也會顯示適合您需求的回應選項。選擇「空白檔案」以開始設計您的視覺回應。您將被呈現作者工具（編輯器）和一個空白螢幕。在螢幕的左上角，您可以在「程式碼檢視」和「GUI 檢視」之間切換。預設情況下是 GUI 檢視，顯示一個空白螢幕，稍後我們將看到這個螢幕被佈局和屬性填充。

如果您選擇程式碼檢視，它將顯示空白螢幕的骨架程式碼，您可以直接編輯這個程式碼。螢幕左側允許您從 APL 程式碼、資料、源等選擇。在這個列表的底部，您可以找到命令和 OnMount - 載入 APL 時要做什麼。螢幕頂部允許您選擇要使用的顯示。

右側有一系列元件，您可以將它們拖到您的螢幕上。如您所見，視覺設計師有很多內容，我們將涵蓋足夠的內容讓您入門。

9.3 視覺元件

與 APLA 一樣，視覺回應中也有與之相關的屬性的視覺元件。 主要元件包括：

  • 容器：簡單地包含多個子專案。
  • 編輯文字：顯示一個可編輯的文字框，包含一行文字。
  • 框架：包含一個子項，並具有邊框和背景顏色。
  • 網格序列：以固定網格佈局顯示一組元件。
  • 影像：在螢幕上繪製一個影像。
  • 分頁器：以水平或垂直方向顯示一系列頁面。
  • 滾動檢視：具有單個子項，並垂直滾動。
  • 序列：顯示一個長的滾動列表的元件。
  • 文字：顯示一行或多行文字。
  • 觸控包裝器：包裝一個單個的子元件，該元件回應觸控事件。
  • 向量圖形：顯示可縮放的向量圖形影像（AVG 或 SVG）。
  • 影片：顯示一個影片播放器，自身沒有控制項。 具有可接收來自觸控、遊標或鍵盤事件輸入的元件具有可操作的屬性，而那些來自觸控或指標事件的元件具有可觸控的屬性。

9.4 APL 元件範例

以下範例 APL 顯示了一個包含文字元件的框架元件：

{
  "type": "Frame",
  "items": [
    {
      "type": "Text",
      "text": "Hello, World!"
    }
  ]
}

這個範例展示瞭如何使用 APL 建立一個簡單的視覺回應，其中包含一個框架和一段文字。

APL視覺多模態回應

APL（Alexa Presentation Language）是一種用於建立視覺化多模態回應的語言，允許開發者設計和定義 Alexa 智慧音箱和其他裝置上的視覺化內容。以下是使用 APL 建立視覺化多模態回應的步驟：

1. 建立 APL 專案

首先，需要建立一個 APL 專案。這可以透過 Alexa Developer Console 中的 Authoring Tool 來完成。Authoring Tool 提供了一個 GUI 介面，允許開發者透過拖拽和下拉選單來建立 APL 專案。

2. 設計視覺化內容

APL 允許開發者設計和定義視覺化內容，包括文字、影像、容器和其他元件。開發者可以使用 GUI 介面來新增和組態這些元件。

3. 新增元件

APL 提供了一系列元件，包括文字、影像、容器和其他元件。開發者可以透過 GUI 介面來新增和組態這些元件。

4. 組態元件屬性

每個元件都有一系列屬性，例如寬度、高度、對齊方式等。開發者可以透過 GUI 介面來組態這些屬性。

從使用者經驗角度來看，整合 APL 與 APLA 讓我們能打造更豐富的 Alexa 技能，將語音互動提升至視覺化的多模態體驗。本文深入探討瞭如何運用 APL 和 APLA 建構視覺回應，涵蓋了版本要求、測試方法、匯入陳述式的調整，以及視覺元件的運用和設計。雖然 Response Builder 和 Authoring Tool 提供了便捷的開發途徑，但要充分發揮 APL 的潛力，仍需深入理解各個元件的屬性和佈局方式。目前開發者控制檯尚不支援 APL 和 APLA 的直接測試，這對開發流程造成一定限制。展望未來，隨著更多視覺元件的推出和開發工具的完善，APL 和 APLA 將賦予開發者更大的創作空間，打造更具吸引力和互動性的 Alexa 技能，進一步模糊語音互動與視覺體驗的界限。對於追求卓越使用者經驗的開發者而言，掌握 APL 和 APLA 將是提升技能競爭力的關鍵。

玄貓

玄貓

技術愛好者，專注於分享程式開發、雲端技術與 AI 應用的心得體會。