一、前言

昨天（Day 24）我們成功利用 Dify 的「公開發布」功能，在完全不碰 HTML/CSS/JavaScript 的情況下，一鍵產生了專屬的獨立 Web App 連結。
然而在實際用手機操作時，我們發現了兩個可以更貼近日常備考的優化點：

1. 輸入方式過於單一：目前只有一個大文字框貼教材，如果我想針對同一個章節「只出 3 題快速刷題」或「選擇不同複習難度」，每次都要手動修改 Prompt 或全套重跑。
2. 每次都要翻找瀏覽器分頁：放在瀏覽器書籤裡容易被其他分頁淹沒，在通勤搭捷運或考場外走廊時，不夠直覺迅速。

今天 Day 25，我們要讓這套 Web App 的體驗更上一層樓：透過 Dify 內建的「自訂輸入欄位」加入彈性表單（下拉選單、單選按鈕），並教學如何將網頁「釘選至手機主畫面」，把它打造成隨點隨開的個人隨身刷題 App！

二、優化思維：從「被動貼文字」到「主動客製化需求」

要提升手機端的使用體驗，關鍵在於「表單控制項（Form Controls）」的設計：

• 彈性自訂題數：讓使用者能自由選擇 3 題、5 題或 10 題，搭車零碎時間選 3 題剛剛好。
• 難易度切換：透過下拉選單切換「基礎觀念（名詞與定義）」或「進階應用（臨床情境題）」，滿足不同備考階段的需求。
• PWA 概念捷徑化：利用手機系統的「加入主畫面」功能，免安裝 App 卻享有如同原生 App 的全螢幕沈浸操作體驗。

三、實作步驟：在 Dify 畫布加入自訂表單輸入

1. 進入工作流畫布並編輯【開始節點】
   登入 Dify Cloud，進入先前建好的工作流。
   點擊畫布最左側的【開始節點】。
   點選「＋添加欄位」，除了原有的 input_text（段落文字框）外，我們額外新增兩個控制欄位：

   欄位類型	變數名稱 (Variable)	顯示名稱 (Label)	選項設定 / 預設值
   下拉選單(Select)	difficulty	複習難易度	選項：基礎觀念辨析、期中考進階情境
   下拉選單(Select)	question_count	測驗題數	選項：3、5、10

   
   

2. 在 LLM 提示詞中綁定動態表單變數
   點開出題的【LLM 節點】，在 SYSTEM 中，將原本固定的題數與難度改由變數動態控制：

   測驗參數設定
   測驗難度：{{#start.difficulty#}}
   測驗題數：請嚴格生成{{#start.question_count#}}題（不得多於或少於此題數）

3. 發布更新並在 Web App 驗收新表單
   點擊畫布右上角的「發布」➔「更新」。
   點擊「開啟 Web 應用」。
   此時在獨立網頁的左側/上方，除了文字輸入框外，已經順利長出「複習難易度」下拉選單與「測驗題數」選擇器！
   

四、體驗升級：將 Web App 加入手機主畫面（免安裝原生體驗）

有了專屬網址後，在手機端只需兩步就能將它變成隨身圖示：
Android (Chrome 瀏覽器) 操作：

1. 用 Chrome 打開 Web App 專屬連結。
2. 點擊右上角的「更多（三個點圖示）」。
3. 點選「加到主畫面」或「安裝應用程式」。