一、前言

昨天（Day 23）我們完成了極具震撼力的「考前複習大禮包超級工作流」，只要丟入一段講義，十幾秒內就能同時輸出核心摘要、名詞卡、測驗題、迷思剖析與心智圖。
然而在實際備考情境中，往往會遇到以下不便之處：

• 「在圖書館、公車上或考場外走廊，不可能隨時扛著筆電打開 Dify 畫布後台點 Run。」
• 「如果想把做好的複習工具分享給同系同學一起衝刺，總不能把後台帳號密碼都交出去。」

過去如果要將一套 AI 程式包裝成外部能使用的產品，我們必須自己寫前端（HTML/React）、串接後端 API、處理伺服器部署與網址映射。但在 Dify 中，這一切都被極度簡化！今天 Day 24，我們只要按下「發布」，就能在 3 秒內取得一組獨立的 Web App 專屬網址，用手機瀏覽器打開就能直接使用！

二、為什麼要發布為獨立 Web App？

將內部的工作流或 Chatbot 發布為獨立網頁，具備三大優勢：

1. 跨裝置隨開隨用：完全脫離後台編輯畫面，不管是手機、平板還是筆電，點開瀏覽器連結就是乾淨的操作介面。
2. 防呆與專注操作：使用者只需要專心「貼上講義、點擊運行、獲取大禮包」，不會誤觸或改動到底層辛苦串接好的複雜節點與 Prompt。
3. 零成本免維運：由 Dify 雲端主機直接代管網頁前端，不需要租用雲端主機或設定網域。

三、實作步驟：在 Dify 一鍵發布 Web App 並自訂外觀

1. 進入工作流或 Chatflow 畫布
   登入 Dify Cloud，點選左側導覽列的「工作室（Studio）」。
   點進先前建立完成的「考前複習大禮包工作流」。
   確保所有節點皆已除錯完畢，並點擊右上角藍色的「發布」➔「更新」儲存最新版本。
   

2. 開啟公開訪問連結（Web App）
   再次點擊右上角的「發布」下拉選單。
   找到「存取點」區塊。
   點進去後，畫面裡就會完整列出該 Web 應用的專屬公開 URL，旁邊就有「複製連結」的按鈕！
   複製該分頁網址列的 URL，就能將網址發送到手機瀏覽器，隨時隨地開啟使用！
   

3. 自訂應用外觀與歡迎訊息
   為了讓發布出去的網頁看起來更具專業度，我們可以為它進行門面裝修：

   • 開啟設定：點擊「Web 應用程式」左下角的「設定」。
   • 圖示與名稱：挑選一個書本、機器人或醫療圖示，並取一個響亮的名稱（如：醫資考前衝刺大補帖）。
   • 描述說明：填入使用指南（例如：貼入任何醫學資訊投影片文字，30 秒內自動交付全套考前摘要、名詞卡與測驗題！）。
   • 儲存發布設定完成後再次點擊「發布更新」。
     

四、成果實測：電腦網頁端與手機瀏覽器跨端驗收

1. 電腦網頁端操作驗收
   在新分頁打開網址，原本複雜的節點畫布瞬間變成極致簡潔的輸入表單：
   畫面中央只有乾淨的「教材文字輸入框」與一個醒目的「運行」按鈕。
   貼入我們先前的 FHIR 講義段落並點擊運行，下方即刻以 Markdown 渲染出包含標題、表格與 Mermaid 語法的完整複習包！
   

2. 手機端隨身實測（核心亮點！）
   將剛才複製的網址發送到手機通訊軟體（或透過掃描 QR Code），用手機內建的 Safari 或 Chrome 打開：

   • 響應式排版：介面自動適應手機螢幕寬度，排版絲毫不跑版。
   • 搭車通勤複習：在公車上隨手反白講義文字貼入，幾秒內手機螢幕就能直接滑動瀏覽名詞卡與考前測驗題！