一、引言
一個月前，我寫了一篇《AI 開發的捷徑：工作流模式》，引起了很多讀者的興趣。
大家都認同，AI 應用是開發者的機會，而圖形化、低代碼/無代碼、不需要編程基礎的"工作流模式"，正是 AI 應用開發的入門捷徑。
但是，我的那篇文章只介紹概念，沒有操作步驟。很多讀者實際上手時，遇到了困難，有些地方不理解，做不下去。
今天就是後續，我詳細演示，一步步圖解，沒有編程基礎，如何搭建一個最簡單的 AI 應用。只要你跟著做，就能做出來。
二、開發工具
這篇教程使用的開發工具是釦子（Coze），所有操作都在它的瀏覽器 IDE（集成開發環境）中完成，
選擇釦子（Coze），主要原因有三個。
（1）它是國產的 AI 應用開發平臺，字節跳動的產品，界面、文檔、客服都是中文。
（2）它有無代碼編輯器 Project IDE，包含組件拖拽的 UIBuilder，可以生成全功能的前端界面，上手門檻相對低。
同時，它也提供後端數據庫，可以數據讀寫。
（3）它免費使用（只要不超過使用額度），發佈上線也不收費，適合新手練習。
三、示例項目
我們的示例項目，是一個最簡單的"AI 文言文生成器"。
大家先看成品，可以點進去試用。（建議 PC 訪問，UI 還沒有適配手機。）
輸入一段漢語白話文，點擊按鈕，AI 就會自動生成文言文。
架構上，它非常簡單：前端是一個網頁表單，將用戶的輸入發送給後端的 AI 模型，並展示後端的返回結果。
它的開發只需要兩步，第一步先讓後端的 AI 模型跑起來，第二步做一個網頁，連接後端即可。
釦子的方便之處在於，前後端的生成都是圖形化操作：後端是編排工作流的節點，前端是 UIBuilder 的界面拖拽組件。
下面就是開發步驟。為了保證大家跟得上，我寫得比較詳細，看起來有點長，但是實際操作是很快的，熟練的話，10分鐘就能完成。
四、創建項目
首先是開發的準備工作，先創建 AI 應用。
（1）訪問釦子官網，點擊右上角的"基礎版登錄"。（基礎版只比專業版少一些企業級功能，普通用戶完全夠用。）
（2）登錄後，自動跳轉到個人主頁，點擊左側菜單的"工作空間"。
工作空間裡面，有"項目開發"和"資源庫"兩個頁面。進入"項目開發"，可以看到你所有的項目。
（3）點擊右上角的"創建"按鈕，跳出一個彈框。
上面有兩個選項，"創建智能體"是創建一個傳統的 AI 聊天，"創建應用"則是創建一個自定義界面的 AI 應用。
（4）選擇"創建應用"，這時會讓你選擇應用模版，點擊"創建空白應用"。
接著，輸入項目的名稱，這裡是"AI 文言生成器"。
至此，項目創建完畢，系統會自動進入"AI 文言生成器"的應用主頁（下圖），正式的開發工作就要開始了。
五、業務邏輯
應用主頁的最上方，有"業務邏輯"和"用戶界面"兩個分頁，默認是"業務邏輯"頁面。
這一節就講解如何創建業務邏輯，也就是後端的 AI 模型。
我們採用工作流模式，即將業務邏輯編排成一個個節點。
（1）點擊左側菜單的"工作流"後面的"+"號，選擇"新建工作流"。
輸入工作流的名稱和描述。（注意，名稱只能是英文字母、數字和下劃線，本例是 classicalchinesecreator。）
（2）工作流創建成功後，名稱會出現在左側菜單的"工作流"標籤下方。點擊它，就進入該工作流的"節點編排"畫布。
畫布上，默認有"開始"和"結束"兩個節點。
（3）點擊下方的"添加節點"，添加一個新節點，類型設為"大模型"。
然後，將這三個節點連起來（通過拖動邊框上的控制點）。
（4）配置"開始"節點。雙擊該節點，在配置框增加一個 content 變量，表示用戶的輸入內容。
（5）配置"大模型"節點。
配置窗口的各個選項，填寫如下。
模型：可以按自己的需要選擇，這裡保持默認值"豆包 Function call 模型"。
輸入：將原來的 input 參數改名為 content，並跟"開始節點"的 content 變量連接起來。
系統提示詞：輸入以下內容，用來設定大模型的行為。
角色
你是一個專業的漢語文言文作者，能夠準確地將用戶輸入的漢語白話文內容改寫為文言文，不進行隨意擴寫。
技能
技能 1：文言文寫作
- 當用戶提供一段漢語白話文時，迅速將其改寫成文言文。
- 確保改寫後的文言文的準確性和完整性。
限制：
- 只進行文言文改寫，不回答與文言文改寫無關的問題。
- 嚴格按照用戶提供的漢語白話文進行改寫，不得擅自增加內容。
用戶提示詞：輸入以下內容，作為給系統的直接命令。
將用戶輸入的漢語白話文{{content}}改寫成文言文。
上面文本中的{{content}}，表示此處系統將插入 content 變量的內容。
輸出：將輸出格式改為"文本"。
（6）配置"結束"節點。首先點擊配置框上部的"返回文本"。
輸出變量：將 output 參數關聯"大模型"節點的 output 變量。
回答內容：輸入{{output}}（表示插入 output 變量的內容），並打開"流式輸出"（即打字機效果）。
至此，整個工作流的搭建全部完成，可以單擊畫布右上角綠色的"試運行"按鈕，測試工作流是否正常運行。
在 content 輸入框，輸入測試內容，比如"今天天氣很好"。
然後，點擊下方的運行按鈕，就可以得到運行結果（今日，天善）。
如果一切正常，就可以開始搭建用戶界面。
六、用戶界面的搭建：頁面佈局
（1）點擊進入畫布上方的"用戶界面"分頁。
（2）在左側菜單的組件面板，找到佈局組件 > 容器組件，將其拖入中間的畫布，作為頁面的標題區域。
系統自動將這個容器命名為 Div1，雙擊進行配置。
尺寸：寬度為100%，高度為 60px。
佈局：排列方向為"橫向"。
樣式：去除背景色，將邊框設為灰色（#E2E8F0）。
（3）在 Div1 下方，再拖入一個容器組件，系統自動命名為 Div2，用作功能區域。
配置基本一樣：尺寸部分，寬度和高度都設為填充容器；佈局部分，排列方向為橫向；樣式部分，去除背景色。
（4）在 Div2 內部的左側部分，拖入一個容器組件 Div3，用作用戶輸入區域。
寬度設為50%，高度設為 550px，樣式刪除背景色。
（5）在 Div2 內部的右側部分，拖入一個容器組件 Div4，用作展示結果區域。
寬度設為50%，高度設為 550px，樣式刪除背景色。
至此，頁面佈局如下圖。
七、用戶界面的搭建：頁面細化
做好佈局後，下一步完善頁面細節。
（1）在 Div1 內部，拖入推薦組件 > 文本組件，作為標題文本。
標題內容設為"AI 文言文生成器"，字號改成24，字重為粗體。
（2）在 Div3 中拖入一個表單組件，刪除不需要的元素，只剩下文本輸入框和按鈕。
表單組件：寬度和高度都設為填充容器，並刪除邊框。
文本輸入框：拉伸高度，寬度設為填充容器，標籤和佔位文案設為"輸入漢語白話文"。
按鈕：文本改為"生成文言文"。
完成後的表單效果如下圖。
（3）在 Div4 中拖入一個展示組件 > Markdown 組件，作為展示文言文區域。
刪除 Markdown 組件的已有內容，改成"###### 生成結果"。高度和寬度改為填充容器，圓角設為10，內邊距設為20，邊框設為灰色（#CBD5E1）。
至此，頁面細化完成，單擊屬性面板上方的預覽，查看效果。
八、用戶界面的搭建：配置事件
頁面外觀做完後，要配置事件，將後端的業務邏輯與用戶界面連接起來。
（1）點擊"生成文言文"按鈕，在配置面板切換到"事件"，點擊"新建"。
事件類型設為"點擊時"，執行動作設為"調用 Workflow"，workflow 設為已經創建好的"classicalchinesecreator"，並將工作流的入參content設為文本輸入框的值 {{ Textarea1.value }}。
（2）配置生成結果區域，展示工作流的返回結果。
選中 Markdown 組件，點擊"內容"欄的擴展按鈕。
擴展面板中，在###### 生成結果後面添加一行，插入工作流的返回結果{{ classical_chinese_creator.data }}。
完成所有配置後，單擊右上角"預覽"按鈕，測試整體效果。
如果一切正常，這個 AI 應用就算開發完成了。
九、應用發佈
開發完成後，就可以發佈該應用，讓其他人也可以使用。
點擊右上角"發佈"按鈕，版本號設為 v0.0.1，發佈平臺設為發佈到釦子商店。
至此大功告成，"AI 文言生成器"就登錄釦子商店，向世界公開了。
十、總結
大家可以根據這個示例，改變輸入 AI 模型的提示，讓它做不同的任務，就能變化出很多不同功能的應用。
比如，官方的"AI 翻譯"示例，就是讓 AI 把用戶輸入的中文譯成其他語言，跟"AI 文言文生成器"異曲同工。
除了文本生成，釦子還提供許多其他能力，比如抓取外部數據、數據庫讀寫等，從而可以做出更強大的 AI 應用。
總之，"工作流模式"使用圖形化界面搭建一個 AI 應用，簡單而便捷，隨時查看效果，一鍵發佈，值得大家嘗試。
（此處有分割線。）
最後是一個活動預告。
釦子邀請我，參加12月19日在上海舉行的"釦子開發者日"，也歡迎大家參加。
屆時，字節的 AI 工程師會跟大家面對面交流，如何開發和推廣 AI 應用。這是很好的學習交流、獲取資源的機會，點擊這裡瞭解詳情。
掃描下方海報二維碼，或者點擊鏈接，現在就可以線下報名參加，或者線上預約直播。
（完）