網(wǎng)上聊零門(mén)檻編程的人越來(lái)越多可真讓你下載一個(gè)工具裝完環(huán)境、跑通示例往往一個(gè)下午就沒(méi)了。與其說(shuō)是零門(mén)檻不如說(shuō)是低門(mén)檻。去年我做了個(gè)東西叫悟空原創(chuàng)目標(biāo)是真正讓一個(gè)完全不懂代碼的人拖幾條流程、畫(huà)一個(gè)窗口最后把成果打包成雙擊就能跑的獨(dú)立可執(zhí)行程序。拖拉流程、窗口界面設(shè)計(jì)、獨(dú)立可執(zhí)行程序這三個(gè)詞我研究了大半年踩過(guò)的坑不比寫(xiě)代碼少。我見(jiàn)過(guò)太多了業(yè)務(wù)同事說(shuō)我想做個(gè)批量改文件名的小工具你跟他講循環(huán)、講字符串處理他聽(tīng)到一半就開(kāi)始看手機(jī)也有初學(xué)者照著教程寫(xiě)Python卡在裝依賴和配環(huán)境上寫(xiě)完一關(guān)窗口什么都不會(huì)了。零門(mén)檻編程如果不能讓這些人自己把工具做出來(lái)那就是偽命題。悟空原創(chuàng)面向的就是這個(gè)群體——非程序員、被命令行勸退的新手、需要快速解決實(shí)際問(wèn)題的人。這篇文章我不整虛的直接拆解三個(gè)核心模塊的實(shí)現(xiàn)邏輯拖拉流程為什么能替代代碼、窗口設(shè)計(jì)器怎么做到所見(jiàn)即所得、打包成獨(dú)立可執(zhí)行程序背后是什么原理。同時(shí)把實(shí)測(cè)中翻過(guò)車(chē)的幾個(gè)坑也一并放出來(lái)供參考和避雷。1. 零門(mén)檻最容易被噴的三個(gè)字我先說(shuō)清楚自己解決了什么零門(mén)檻編程這個(gè)說(shuō)法幾乎每個(gè)可視化編程工具的宣傳頁(yè)上都有但落到實(shí)操里差異非常大。有的工具教你積木拼接確實(shí)簡(jiǎn)單但生成的東西始終局限在它自己的平臺(tái)里拿不出來(lái)有的工具支持拖拽生成代碼但代碼生成后你還得面對(duì)IDE、依賴、編譯等于把門(mén)檻挪了個(gè)位置。悟空原創(chuàng)的選擇是拖拽流程生成邏輯畫(huà)布上直接搞窗口界面最后產(chǎn)物是一個(gè)真正的可執(zhí)行程序能發(fā)給別人別人雙擊就能用。1.1 這不是教人編程而是把編程翻譯成流程要理解這個(gè)工具的設(shè)計(jì)思路你得先接受一個(gè)前提編程的本質(zhì)是輸入數(shù)據(jù)、處理數(shù)據(jù)、輸出結(jié)果的過(guò)程而這個(gè)過(guò)程用流程圖表達(dá)比用語(yǔ)法表達(dá)更直觀。我舉個(gè)例子。傳統(tǒng)代碼要寫(xiě)條件判斷得這樣if score 60: print(及格) else: print(不及格)語(yǔ)法本身不難但前提是你得知道if/else怎么寫(xiě)、縮進(jìn)錯(cuò)了會(huì)報(bào)錯(cuò)、冒號(hào)缺失找不到問(wèn)題在哪。而用拖拉流程的方式你看到的是兩個(gè)節(jié)點(diǎn)一個(gè)叫如果...那么...的菱形節(jié)點(diǎn)拖兩條線出來(lái)一條指向輸出及格一條指向輸出不及格。哪個(gè)分支走哪條線肉眼就能看明白。悟空原創(chuàng)做的事情就是把函數(shù)、變量、循環(huán)、條件判斷這些概念全部翻譯成圖形化節(jié)點(diǎn)。我設(shè)計(jì)節(jié)點(diǎn)的時(shí)候有一個(gè)硬性要求節(jié)點(diǎn)名稱必須用日常語(yǔ)言不準(zhǔn)出現(xiàn)任何編程術(shù)語(yǔ)。比如循環(huán)節(jié)點(diǎn)線上版本叫重復(fù)執(zhí)行條件節(jié)點(diǎn)叫如果...否則...變量讀取叫取出數(shù)據(jù)賦值叫保存數(shù)據(jù)到。用戶根本不需要知道賦值和變量是什么意思只需要在界面里直觀地看到我把體重保存了下來(lái)接下來(lái)要用它做計(jì)算。這個(gè)思路聽(tīng)著簡(jiǎn)單做起來(lái)難。因?yàn)閳D形化意味著信息和交互都被壓縮了每增加一個(gè)功能界面就可能復(fù)雜一分。我的原則是寧可讓專業(yè)用戶覺(jué)得啰嗦也不讓新手覺(jué)得困惑。1.2 誰(shuí)適合用、誰(shuí)不適合用悟空原創(chuàng)的目標(biāo)用戶我用三句話概括完全沒(méi)學(xué)過(guò)編程但工作中經(jīng)常有重復(fù)性、規(guī)則明確的瑣碎任務(wù)學(xué)過(guò)幾天代碼被環(huán)境安裝和語(yǔ)法細(xì)節(jié)勸退的人群需要在團(tuán)隊(duì)內(nèi)快速交付一個(gè)能用就行的小工具的人比如部門(mén)內(nèi)部的Excel批處理腳本、資料歸檔輔助程序、配置檢查小助手。反過(guò)來(lái)不適合的人群我也不會(huì)硬推。比如你本身是專業(yè)程序員天天在IDE里寫(xiě)業(yè)務(wù)邏輯那圖形化流程對(duì)你來(lái)說(shuō)反而慢——你打字比拖節(jié)點(diǎn)快得多。你要做的系統(tǒng)有大量的并發(fā)、事務(wù)、復(fù)雜數(shù)據(jù)結(jié)構(gòu)拖拽編輯器很難表達(dá)這種復(fù)雜性。所以悟空原創(chuàng)的定位從來(lái)不是替代編程而是覆蓋那些用代碼做殺雞用牛刀的場(chǎng)景。理解了這一點(diǎn)后面的設(shè)計(jì)就會(huì)合理很多。2. 拖拉流程的核心設(shè)計(jì)節(jié)點(diǎn)、連線與數(shù)據(jù)流轉(zhuǎn)拖拽編輯器最容易被做成畫(huà)圖軟件——節(jié)點(diǎn)隨便放線隨便連最后生成的流程根本沒(méi)法執(zhí)行。我見(jiàn)過(guò)不少同類(lèi)產(chǎn)品界面很漂亮但一跑就崩因?yàn)閿?shù)據(jù)在哪、怎么流轉(zhuǎn)完全沒(méi)定義清楚。所以我在設(shè)計(jì)流程引擎的時(shí)候把重心放在了底層的數(shù)據(jù)流模型上先定義清楚節(jié)點(diǎn)是什么、連線代表什么、數(shù)據(jù)怎么從一個(gè)節(jié)點(diǎn)傳到下一個(gè)節(jié)點(diǎn)再談界面。2.1 節(jié)點(diǎn)類(lèi)型體系的層級(jí)劃分節(jié)點(diǎn)是流程的基本單元。悟空原創(chuàng)目前的節(jié)點(diǎn)類(lèi)型分為五類(lèi)每一類(lèi)對(duì)應(yīng)一種程序員熟悉的概念節(jié)點(diǎn)大類(lèi)用戶界面上的叫法底層對(duì)應(yīng)典型用途開(kāi)始/結(jié)束流程開(kāi)始、流程結(jié)束程序入口/出口定義流程的邊界輸入/輸出彈出輸入框、讀取文件、顯示結(jié)果、寫(xiě)入文件函數(shù)參數(shù)/返回值和用戶或文件交互數(shù)據(jù)操作保存數(shù)據(jù)、取出數(shù)據(jù)、計(jì)算四則運(yùn)算、拼接文本變量賦值/表達(dá)式處理數(shù)據(jù)邏輯控制如果...否則...、重復(fù)執(zhí)行、跳出循環(huán)、等待條件分支/循環(huán)控制流程走向系統(tǒng)動(dòng)作打開(kāi)程序、打開(kāi)網(wǎng)址、創(chuàng)建文件夾、發(fā)送按鍵系統(tǒng)調(diào)用操作系統(tǒng)能力這個(gè)過(guò)程是反復(fù)迭代過(guò)才梳理穩(wěn)定的。早期版本其實(shí)沒(méi)有重復(fù)執(zhí)行節(jié)點(diǎn)后來(lái)有個(gè)財(cái)務(wù)朋友要做幾十個(gè)Excel表格的和沒(méi)有循環(huán)節(jié)點(diǎn)就得手動(dòng)復(fù)制幾十遍計(jì)算節(jié)點(diǎn)非常痛苦。加了循環(huán)之后她上線后跟我反饋說(shuō)這個(gè)功能光速救我。這件事也讓我意識(shí)到節(jié)點(diǎn)庫(kù)的覆蓋面直接決定了工具能不能解決真實(shí)問(wèn)題。節(jié)點(diǎn)定義在底層是一個(gè)規(guī)范化結(jié)構(gòu)我寫(xiě)了一個(gè)簡(jiǎn)單示例方便看懂{ type: condition_compare, displayName: 如果...否則..., inputs: [ { id: in_value_a, name: 數(shù)值A(chǔ), type: number }, { id: in_value_b, name: 數(shù)值B, type: number } ], params: [ { id: compare_type, name: 比較方式, options: [大于, 小于, 等于, 不等于] } ], outputs: [ { id: out_true, name: 滿足條件, type: flow }, { id: out_false, name: 不滿足條件, type: flow } ] }你看一個(gè)條件判斷節(jié)點(diǎn)本質(zhì)就是兩個(gè)數(shù)值輸入加一個(gè)比較類(lèi)型參數(shù)輸出兩個(gè)分支。畫(huà)到畫(huà)布上用戶看到的是數(shù)值A(chǔ)和數(shù)值B兩個(gè)接口連上線就能跑。這個(gè)規(guī)范讓我在后面擴(kuò)展節(jié)點(diǎn)時(shí)效率非常高新增一種節(jié)點(diǎn)只需要按這個(gè)JSON模板寫(xiě)配置不用改流程引擎。2.2 連線校驗(yàn)與數(shù)據(jù)在當(dāng)前節(jié)點(diǎn)間流動(dòng)的執(zhí)行機(jī)制光有節(jié)點(diǎn)還不夠連線規(guī)則是另一個(gè)決定成敗的地方。很多可視化工具允許任意連線結(jié)果用戶把開(kāi)始節(jié)點(diǎn)直接連到結(jié)束節(jié)點(diǎn)流程也能運(yùn)行但沒(méi)有任何業(yè)務(wù)意義。悟空原創(chuàng)的做法是每個(gè)端口都聲明了自己的數(shù)據(jù)類(lèi)型連線的時(shí)候?qū)崟r(shí)校驗(yàn)。具體規(guī)則如下端口類(lèi)型分?jǐn)?shù)據(jù)和流程兩種。流程連線決定執(zhí)行順序數(shù)據(jù)連線決定值從哪來(lái)數(shù)據(jù)端口又細(xì)分為文本、數(shù)值、整數(shù)、布爾值、列表、字典兩個(gè)數(shù)據(jù)端口連接時(shí)類(lèi)型必須兼容。比如數(shù)值端口可以接整數(shù)端口反之要彈出確認(rèn)提示因?yàn)榭赡軄G精度連線顏色區(qū)分?jǐn)?shù)據(jù)線用淺色流程線用深色。這樣用戶一眼能看出流程走向和數(shù)據(jù)來(lái)源。實(shí)際運(yùn)行邏輯是這樣的流程引擎從流程開(kāi)始節(jié)點(diǎn)觸發(fā)沿著流程線依次訪問(wèn)每個(gè)節(jié)點(diǎn)。當(dāng)某個(gè)節(jié)點(diǎn)需要數(shù)據(jù)時(shí)它就檢查自己的數(shù)據(jù)輸入端口連的是哪個(gè)節(jié)點(diǎn)從那個(gè)節(jié)點(diǎn)的輸出緩存里取值。這種按需取值的模型比傳統(tǒng)的輸入輸出參數(shù)傳遞要直觀很多缺點(diǎn)是需要額外維護(hù)運(yùn)行時(shí)的數(shù)據(jù)緩存池但對(duì)用戶量不敏感的場(chǎng)景性能完全夠用。我舉個(gè)例子。用戶拖了一個(gè)計(jì)算BMI的節(jié)點(diǎn)它需要身高和體重兩個(gè)輸入。用戶把前面彈出輸入框節(jié)點(diǎn)的輸出分別連過(guò)來(lái)運(yùn)行時(shí)就自動(dòng)把輸入框的文本解析成數(shù)值傳給BMI計(jì)算節(jié)點(diǎn)。整個(gè)過(guò)程不需要用戶理解參數(shù)、返回值、作用域這些概念。2.3 專門(mén)給小白做的調(diào)試面板程序員調(diào)試靠斷點(diǎn)和日志小白用戶可不行。我剛做出來(lái)第一版的時(shí)候發(fā)現(xiàn)用戶拖了一套流程點(diǎn)擊運(yùn)行結(jié)果不對(duì)他根本不知道錯(cuò)在哪一步。于是我做了一個(gè)步驟演示模式點(diǎn)一下運(yùn)行按鈕畫(huà)布上的節(jié)點(diǎn)會(huì)高亮當(dāng)前正在執(zhí)行的節(jié)點(diǎn)外面亮一圈金色邊框同時(shí)左側(cè)的數(shù)據(jù)觀察面板會(huì)實(shí)時(shí)顯示每一步所有變量的當(dāng)前值。這種調(diào)試方式本質(zhì)上是把傳統(tǒng)IDE的單步執(zhí)行功能圖形化了但效果非常明顯。用戶看到某個(gè)輸入框轉(zhuǎn)出來(lái)的數(shù)值是0.00自己就會(huì)想到是不是我體重沒(méi)填成數(shù)字、填了文字。很多時(shí)候流程跑錯(cuò)不是邏輯問(wèn)題而是數(shù)據(jù)格式問(wèn)題可視化高亮讓用戶一眼就找到問(wèn)題所在。另外一個(gè)細(xì)節(jié)是回退一步。普通流程引擎沒(méi)有回退概念但我加了反向執(zhí)行能力流程里保存了每一步的狀態(tài)快照用戶可以點(diǎn)后退一格看看上一步數(shù)據(jù)是什么。這個(gè)功能在排查條件分支時(shí)尤其好用——你會(huì)發(fā)現(xiàn)哦原來(lái)它走的是否分支是因?yàn)榍懊娲笥谂袛鄷r(shí)數(shù)值B比數(shù)值A(chǔ)大。3. 窗口界面設(shè)計(jì)讓設(shè)計(jì)器的操作手感貼近專業(yè)工具拖拉流程解決了邏輯部分但只有控制臺(tái)輸出的作品對(duì)非程序員來(lái)說(shuō)依然沒(méi)有吸引力。想讓一個(gè)普通用戶愿意用工具解決實(shí)際問(wèn)題必須讓他能夠做出有界面的程序——窗口里有輸入框、有按鈕、有點(diǎn)擊反饋。這才是悟空原創(chuàng)區(qū)分于其他純流程編輯工具的關(guān)鍵。3.1 設(shè)計(jì)器的三區(qū)布局與核心交互界面設(shè)計(jì)器參考了VB和Delphi時(shí)代的窗體設(shè)計(jì)思路布局上分成三個(gè)區(qū)域左側(cè)控件工具箱按鈕、輸入框、多行文本框、標(biāo)簽、下拉框、復(fù)選框、單選組、圖片框、表格中間畫(huà)布模擬窗口外觀控件拖到畫(huà)布上之后可以自由調(diào)整位置和大小右側(cè)屬性面板修改控件的文字、顏色、字體、可見(jiàn)性、背景色等屬性。核心交互是拖進(jìn)去、拖出來(lái)、改屬性。選中畫(huà)布上的多個(gè)控件支持對(duì)齊線輔助水平居中、垂直居中、等間距這些常見(jiàn)操作都有減少用戶用鼠標(biāo)一點(diǎn)點(diǎn)微調(diào)的痛苦。畫(huà)布的背景模擬的是系統(tǒng)窗口的默認(rèn)外觀比如Windows下就是白色底加邊框的窗體。用戶在畫(huà)布上看到的效果和最后運(yùn)行時(shí)的效果保持高度一致。這里我做了一個(gè)很重要的選擇使用固定坐標(biāo)布局而不是WEB那種流式布局。原因很簡(jiǎn)單目標(biāo)用戶腦子里沒(méi)有相對(duì)定位、父容器這些概念你跟他講這個(gè)按鈕會(huì)在窗口變化時(shí)自動(dòng)居中他反而不安他理解的方式就是我把按鈕拖到這個(gè)地方運(yùn)行時(shí)就該在這個(gè)地方。實(shí)踐證明固定坐標(biāo)布局雖然犧牲了一些屏幕適配能力但對(duì)新手來(lái)說(shuō)是最容易掌握的交互范式。3.2 控件屬性與事件綁定的直觀設(shè)計(jì)控件擺在畫(huà)布上以后要連接流程。悟空原創(chuàng)的處理方式是選中控件在屬性面板下方有一個(gè)事件區(qū)域列出這個(gè)控件可以觸發(fā)的事件。按鈕有單擊時(shí)輸入框有內(nèi)容改變時(shí)窗口本身有加載時(shí)。點(diǎn)擊某個(gè)事件后面的編輯流程按鈕自動(dòng)新建一條流程并把這個(gè)事件作為流程的起點(diǎn)。這個(gè)設(shè)計(jì)好在哪好在小白的心理模型是我給按鈕安排任務(wù)而不是我注冊(cè)一個(gè)事件回調(diào)函數(shù)。界面上出現(xiàn)的提示文字是當(dāng)用戶點(diǎn)擊按鈕時(shí)用戶一看就懂。綁定之后畫(huà)布上會(huì)多出一個(gè)事件起點(diǎn)節(jié)點(diǎn)圖標(biāo)是那個(gè)按鈕的縮略圖方便用戶區(qū)分是哪條路徑觸發(fā)。屬性面板上有一個(gè)細(xì)節(jié)我花了很多心思屬性的分組和命名。不能讓用戶看到Font、ForeColor這種底層屬性名而是統(tǒng)一叫字體、文字顏色。屬性值不用代碼填而是彈出選擇器。比如顏色直接彈出一個(gè)色板用戶點(diǎn)一下就行不需要輸入十六進(jìn)制值。字體則是下拉框選字體名稱和字號(hào)所見(jiàn)即所得。做到這一步并不難但很多工具沒(méi)做因?yàn)殚_(kāi)發(fā)者默認(rèn)用戶看得懂Font.Size。3.3 窗口和流程怎么協(xié)作設(shè)計(jì)時(shí)與運(yùn)行時(shí)的分離還有一個(gè)容易讓人混淆的地方設(shè)計(jì)器里看到的窗口和運(yùn)行時(shí)彈出的窗口到底是不是同一個(gè)答案是同一個(gè)窗口的兩種狀態(tài)。我采用的數(shù)據(jù)模型是工程文件里存儲(chǔ)了一份控件樹(shù)描述包含每個(gè)控件的類(lèi)型、坐標(biāo)、尺寸、風(fēng)格屬性和事件綁定列表。設(shè)計(jì)器負(fù)責(zé)編輯這份描述運(yùn)行時(shí)引擎負(fù)責(zé)讀取這份描述渲染出實(shí)際窗口并監(jiān)聽(tīng)控件事件。這樣設(shè)計(jì)的好處是解耦。用戶在設(shè)計(jì)器里拖控件、改屬性、綁事件看似在一個(gè)環(huán)境里實(shí)際上設(shè)計(jì)器只是編輯器真正的執(zhí)行環(huán)境是內(nèi)嵌在播放器里的。每次點(diǎn)預(yù)覽運(yùn)行就是把控件樹(shù)描述交給運(yùn)行時(shí)引擎彈出真實(shí)窗口。這樣做還有一個(gè)附帶的好處打包成可執(zhí)行程序時(shí)我讓程序啟動(dòng)后直接加載內(nèi)嵌的控件樹(shù)描述運(yùn)行設(shè)計(jì)器代碼根本不會(huì)被打進(jìn)最終產(chǎn)物里減少了體積。實(shí)戰(zhàn)中我見(jiàn)過(guò)最影響體驗(yàn)的Bug是某個(gè)控件在設(shè)計(jì)器里明明對(duì)齊得很好運(yùn)行時(shí)卻偏移了。原因就是設(shè)計(jì)器畫(huà)布用了縮放顯示控件坐標(biāo)是邏輯坐標(biāo)運(yùn)行時(shí)換算屏幕坐標(biāo)時(shí)少乘了一個(gè)縮放因子。這類(lèi)問(wèn)題現(xiàn)在已經(jīng)被我全面修復(fù)測(cè)試用例里專門(mén)加了一條不同屏幕DPI下的坐標(biāo)一致性的檢查。4. 最能說(shuō)服人的功能一個(gè)腳本運(yùn)行器如何打包成獨(dú)立exe拖拉流程和窗口設(shè)計(jì)很多工具都能做到。但生成獨(dú)立可執(zhí)行程序這一條真正把悟空原創(chuàng)和玩具級(jí)工具區(qū)分開(kāi)來(lái)。非程序員用戶最大的特點(diǎn)是不會(huì)配置環(huán)境也無(wú)法接受先裝軟件再打開(kāi)文件的流程。只有當(dāng)他拿到一個(gè)exe雙擊就能用發(fā)給同事也能用他才會(huì)覺(jué)得我真的做了一個(gè)軟件。4.1 打包原理運(yùn)行時(shí)引擎加工程數(shù)據(jù)前面說(shuō)過(guò)用戶在白澤里設(shè)計(jì)的窗口和流程本質(zhì)上是一份描述數(shù)據(jù)不是編譯好的機(jī)器碼。要讓這份描述變成可執(zhí)行程序就必須給終端用戶提供一個(gè)播放器——一個(gè)能讀取描述、渲染窗口、執(zhí)行流程的運(yùn)行時(shí)引擎。打包過(guò)程把這些東西合并成一個(gè)exe運(yùn)行時(shí)引擎主體負(fù)責(zé)窗口渲染、事件監(jiān)聽(tīng)、流程執(zhí)行、控件驅(qū)動(dòng)用戶當(dāng)前工程的流程數(shù)據(jù)和控件樹(shù)數(shù)據(jù)工程內(nèi)引用的圖片、圖標(biāo)、字體等資源文件一個(gè)輕量級(jí)的解包引導(dǎo)器負(fù)責(zé)在程序啟動(dòng)時(shí)定位資源、初始化引擎?；谶@個(gè)方案悟空原創(chuàng)打出來(lái)的文件體積大約在15MB到30MB之間。對(duì)于一個(gè)連Excel宏都覺(jué)得難的用戶來(lái)說(shuō)這個(gè)體量完全可接受。我一度想過(guò)把運(yùn)行時(shí)引擎精簡(jiǎn)到5MB以下后來(lái)放棄了因?yàn)榇鷥r(jià)是要砍掉很多交互控件能力最終影響的還是用戶作品的表現(xiàn)力。功能完整優(yōu)先于體積優(yōu)化這是個(gè)人開(kāi)發(fā)工具里非常務(wù)實(shí)的取舍。4.2 解釋器捆綁策略與殺毒軟件誤報(bào)問(wèn)題這個(gè)環(huán)節(jié)是技術(shù)上踩坑最多的部分。最初我用的是最直接的自解壓釋放方案exe啟動(dòng)時(shí)把內(nèi)嵌的運(yùn)行時(shí)和工程文件釋放到臨時(shí)目錄再?gòu)呐R時(shí)目錄啟動(dòng)主程序。這個(gè)方法邏輯簡(jiǎn)單但很快被用戶投訴——Windows Defender直接報(bào)毒因?yàn)樗吹降男袨槭且粋€(gè)程序釋放文件到Temp然后運(yùn)行這和很多惡意軟件的套路一模一樣。我換過(guò)好幾輪方案最終的落地策略是內(nèi)存映射直載不把文件釋放到磁盤(pán)而是在exe內(nèi)部把運(yùn)行時(shí)引擎以資源形式內(nèi)嵌啟動(dòng)時(shí)直接通過(guò)動(dòng)態(tài)庫(kù)方式加載工程數(shù)據(jù)也通過(guò)內(nèi)存讀取。這個(gè)方案避免了臨時(shí)文件釋放的行為模式誤報(bào)率大幅度下降。但誤報(bào)沒(méi)法完全消除所以我還有一些配套手段建議開(kāi)發(fā)者用戶購(gòu)買(mǎi)代碼簽名證書(shū)簽名后的文件在大部分主流殺軟里信任級(jí)別更高在正式分發(fā)前把exe提交到多個(gè)殺毒廠商的在線檢測(cè)平臺(tái)申請(qǐng)人工復(fù)核解除誤報(bào)打包器內(nèi)內(nèi)置殺毒提示頁(yè)一旦檢測(cè)到用戶機(jī)器安全信任級(jí)別異常引導(dǎo)用戶手動(dòng)信任程序。這個(gè)問(wèn)題想完全繞開(kāi)是不可能的任何新軟件分發(fā)總會(huì)遇到一兩個(gè)攔截。關(guān)鍵是提前給用戶講清楚應(yīng)對(duì)方法不要等被罵了再補(bǔ)救。4.3 跨平臺(tái)的問(wèn)題先做深再做寬標(biāo)題里寫(xiě)的是獨(dú)立可執(zhí)行程序最剛需的平臺(tái)必然是Windows畢竟辦公室里絕大多數(shù)電腦都是Windows。所以第一版打包器只支持Windows生成后綴名exe的文件。我預(yù)留了擴(kuò)展工程數(shù)據(jù)格式本身跨平臺(tái)運(yùn)行時(shí)引擎也做了平臺(tái)抽象層后續(xù)如果要支持macOS只需要在目標(biāo)平臺(tái)重新編譯運(yùn)行時(shí)和打包器。如果你自己要做類(lèi)似的工具我的建議是不要一上來(lái)就談全面跨平臺(tái)。深耕一個(gè)平臺(tái)上雙擊可用、不會(huì)被殺軟攔截、控件顯示正常這個(gè)體驗(yàn)閉環(huán)比為了支持多個(gè)操作系統(tǒng)而閹割體驗(yàn)要重要得多。等Windows版的體驗(yàn)打磨到及格線以上再考慮mac和Linux用戶反而會(huì)更信任你。5. 從空白工程到雙擊運(yùn)行完整復(fù)現(xiàn)一個(gè)BMI計(jì)算器講完原理用實(shí)際例子演示整個(gè)流程最能說(shuō)明問(wèn)題。這個(gè)例子是我在發(fā)布測(cè)試版時(shí)經(jīng)常給用戶演示的場(chǎng)景做一個(gè)BMI計(jì)算器。一個(gè)完全沒(méi)有代碼基礎(chǔ)的會(huì)計(jì)朋友跟著這個(gè)流程走了一遍全程不到十分鐘做出了第一個(gè)自己設(shè)計(jì)的軟件。第一步新建工程。打開(kāi)悟空原創(chuàng)新建一個(gè)項(xiàng)目命名BMI計(jì)算器屏幕自動(dòng)進(jìn)入窗口設(shè)計(jì)器畫(huà)布。這時(shí)候畫(huà)布上是一個(gè)空的窗體可以直接調(diào)整它的大小比如設(shè)成360乘480。第二步從左側(cè)工具箱拖入控件拖入兩個(gè)單行輸入框一個(gè)放在上方作為身高輸入一個(gè)放中間作為體重輸入旁邊分別放兩個(gè)標(biāo)簽文字改成身高(cm)和體重(kg)拖入一個(gè)按鈕放在底部按鈕文字改成計(jì)算BMI拖入一個(gè)標(biāo)簽放在按鈕下方空一點(diǎn)的位置文字改成空等流程運(yùn)行時(shí)把結(jié)果顯示在這里。畫(huà)布上拖完之后選中按鈕在右側(cè)事件區(qū)點(diǎn)擊單擊時(shí)旁邊的編輯流程。此時(shí)畫(huà)布自動(dòng)切換到流程編輯模式并且已經(jīng)生成了一個(gè)事件起點(diǎn)節(jié)點(diǎn)圖標(biāo)正是這個(gè)按鈕的樣子。第三步拖入流程節(jié)點(diǎn)。這部分是整個(gè)演示的核心也是讓新手覺(jué)得編程好像也沒(méi)那么神秘的關(guān)鍵環(huán)節(jié)先拖入兩個(gè)彈出輸入框節(jié)點(diǎn)不合適——因?yàn)榻缑嬉呀?jīng)有輸入框了流程里應(yīng)該用從輸入框讀取文本節(jié)點(diǎn)。這個(gè)節(jié)點(diǎn)需要指定讀取哪個(gè)控件設(shè)計(jì)器里提供一個(gè)下拉框讓用戶選擇窗體1里的身高輸入框繼續(xù)拖入保存數(shù)據(jù)節(jié)點(diǎn)把讀取到的身高文本存成變量身高體重同理存成體重拖入兩個(gè)轉(zhuǎn)數(shù)值節(jié)點(diǎn)把身高文本和體重文本轉(zhuǎn)成數(shù)值。如果轉(zhuǎn)換失敗就運(yùn)行一個(gè)彈出提示節(jié)點(diǎn)告訴用戶格式不對(duì)否則繼續(xù)拖入計(jì)算節(jié)點(diǎn)輸入是身高數(shù)值和體重?cái)?shù)值表達(dá)式是 體重 / ((身高/100)*(身高/100))。界面上直接顯示為文本公式用戶可以改拖入四舍五入節(jié)點(diǎn)把BMI結(jié)果保留一位小數(shù)拖入如果...否則...節(jié)點(diǎn)判斷BMI區(qū)間比如小于18.5偏瘦、小于24正常、小于28超重、否則肥胖最后拖入顯示結(jié)果節(jié)點(diǎn)把這個(gè)結(jié)果顯示到窗體上之前預(yù)留的那個(gè)空標(biāo)簽上。第四步點(diǎn)擊預(yù)覽運(yùn)行。程序彈出一個(gè)真實(shí)窗口輸入身高體重點(diǎn)計(jì)算標(biāo)簽顯示出結(jié)果。我在這一步會(huì)故意讓用戶輸一次abc作為體重讓他們看看提示框是怎么彈出來(lái)的——用戶看到自己的程序會(huì)提醒別人別填錯(cuò)對(duì)工具的信心立刻提升。第五步打包。關(guān)上預(yù)覽窗回到主界面點(diǎn)擊生成獨(dú)立程序選擇輸出目錄大約十秒鐘后得到一個(gè)exe文件。把這個(gè)exe復(fù)制到另一臺(tái)沒(méi)有安裝任何開(kāi)發(fā)環(huán)境的電腦上雙擊能跑結(jié)果正確。整個(gè)流程走完用戶做完后的反饋幾乎一致原來(lái)做一個(gè)小軟件是這么回事。這句話聽(tīng)多了之后我反而更篤定零門(mén)檻編程真正的門(mén)檻不是技術(shù)而是讓用戶理解你做的流程圖真的可以變成窗口軟件這個(gè)過(guò)程。圖形化工具的任務(wù)就是把這個(gè)轉(zhuǎn)變過(guò)程壓縮得越短、越直觀越好。6. 實(shí)測(cè)感悟與邊界這些功能和場(chǎng)景不建議硬撐任何工具都有自己的邊界悟空原創(chuàng)也不例外。我在測(cè)試階段就讓一批真實(shí)用戶用了三個(gè)月收集了不少反饋也碰過(guò)一些做起來(lái)吃力不討好的需求這里一并講清楚算是給想借鑒思路或者想用同類(lèi)工具的人一個(gè)參考。6.1 可視化流程的天然短板邏輯一深就會(huì)臃腫拖拉流程最大的優(yōu)勢(shì)是直觀最大的劣勢(shì)也是有直觀帶來(lái)的節(jié)點(diǎn)一多畫(huà)布就像蜘蛛網(wǎng)。第一個(gè)用戶項(xiàng)目只有8個(gè)節(jié)點(diǎn)清晰可讀后來(lái)有個(gè)用戶想做一個(gè)批量處理幾十個(gè)文件并生成匯總報(bào)告的工具節(jié)點(diǎn)數(shù)量膨脹到五十多個(gè)畫(huà)面上連線密密麻麻他自己都找不到哪根線連哪根。這類(lèi)需求本質(zhì)上有復(fù)雜的循環(huán)嵌套和大量中間變量用代碼實(shí)現(xiàn)可能二三十行就結(jié)束了但用圖形化表達(dá)就會(huì)很混亂。我給這類(lèi)用戶的建議是拆分成多個(gè)子流程。把讀取文件目錄做成一個(gè)子流程解析每個(gè)文件內(nèi)容做成第二個(gè)子流程主流程里只保留三個(gè)節(jié)點(diǎn)調(diào)用它們。悟空原創(chuàng)已經(jīng)支持子流程節(jié)點(diǎn)可以把某段節(jié)點(diǎn)整體封裝簡(jiǎn)化主流程的視覺(jué)復(fù)雜度。但也要承認(rèn)這個(gè)能力救不了所有復(fù)雜場(chǎng)景。涉及多維數(shù)組、哈希表、遞歸等高級(jí)數(shù)據(jù)結(jié)構(gòu)的邏輯圖形化工具的表達(dá)效率確實(shí)遠(yuǎn)低于代碼。所以如果需求本身已經(jīng)是處理邏輯很復(fù)雜且需要長(zhǎng)期迭代維護(hù)我更建議直接去學(xué)Python或腳本語(yǔ)言不要在可視化工具里硬撐。6.2 運(yùn)行性能與功能的取舍底層是解釋執(zhí)行性能自然比原生編譯的程序差一截。實(shí)測(cè)下來(lái)對(duì)于一個(gè)流程里幾十個(gè)節(jié)點(diǎn)、循環(huán)幾千次的場(chǎng)景運(yùn)行耗時(shí)通常在一兩秒以內(nèi)普通辦公場(chǎng)景完全能接受。但如果你讓一個(gè)循環(huán)節(jié)點(diǎn)跑十萬(wàn)次節(jié)點(diǎn)里還連續(xù)做字符串拼接體感就會(huì)有明顯的卡頓——十萬(wàn)次字符串拼接的復(fù)雜度接近O(n的平方)這是解釋型實(shí)現(xiàn)的天然瓶頸。在這個(gè)問(wèn)題上我的選擇是不去追求極致的性能優(yōu)化而是做明顯的邊界提示。打包器中內(nèi)置一個(gè)復(fù)雜度檢查功能當(dāng)你把嵌套循環(huán)加得太深它會(huì)彈提示當(dāng)前流程預(yù)計(jì)循環(huán)次數(shù)超過(guò)5萬(wàn)次運(yùn)行時(shí)可能有卡頓建議拆分?jǐn)?shù)據(jù)處理邏輯。這個(gè)工具解決不了性能問(wèn)題但至少能讓用戶提前預(yù)判而不是到運(yùn)行時(shí)才發(fā)現(xiàn)。6.3 真正適合悟空原創(chuàng)的場(chǎng)景我目前觀察到的三類(lèi)從幾個(gè)月的用戶反饋來(lái)看用得最好的場(chǎng)景集中在以下三類(lèi)個(gè)人效率工具文件重命名、照片壓縮、資料歸檔、時(shí)間提醒。這些需求規(guī)則簡(jiǎn)單界面不復(fù)雜用拖拽十分鐘就能做完部門(mén)內(nèi)部小工具一個(gè)會(huì)計(jì)做的發(fā)票核對(duì)工具一個(gè)行政做的會(huì)議室預(yù)約登記工具不追求精致視覺(jué)但能解決實(shí)際問(wèn)題而且可以隨時(shí)改邏輯教學(xué)啟蒙很多家長(zhǎng)用來(lái)給小孩做邏輯思維訓(xùn)練把如果下雨就不去公園翻譯成流程節(jié)點(diǎn)孩子能直觀理解條件判斷的含義。針對(duì)這些場(chǎng)景我會(huì)持續(xù)補(bǔ)充節(jié)點(diǎn)庫(kù)。比如最近在做的定時(shí)觸發(fā)任務(wù)節(jié)點(diǎn)讓用戶拖一個(gè)每天上午9點(diǎn)自動(dòng)執(zhí)行的起點(diǎn)事件配合文件處理節(jié)點(diǎn)就能實(shí)現(xiàn)上班一坐下程序已經(jīng)幫他整理好昨天的數(shù)據(jù)。這個(gè)方向比堆一百個(gè)高級(jí)功能更符合工具定位。6.4 一個(gè)真實(shí)體會(huì)做悟空原創(chuàng)的過(guò)程最大的收獲不是技術(shù)本身而是突然明白了什么叫用戶視角。最早我按程序員的習(xí)慣設(shè)計(jì)編輯器默認(rèn)用戶懂變量名、懂?dāng)?shù)據(jù)類(lèi)型、懂事件回調(diào)。結(jié)果第一次給外行用戶演示時(shí)他問(wèn)我為什么我必須給輸入框起個(gè)變量名我不能直接讓它把數(shù)字存下來(lái)嗎這個(gè)反饋直接改變了我對(duì)變量的處理方式?，F(xiàn)在輸入框讀出來(lái)的數(shù)據(jù)界面上直接顯示成身高的數(shù)值體重的數(shù)值用戶不需要知道背后有個(gè)變量。如果你也想做類(lèi)似低門(mén)檻工具建議先忍住別寫(xiě)代碼去陪真實(shí)用戶完成一個(gè)再小不過(guò)的需求觀察他卡在哪。那個(gè)卡住的點(diǎn)往往就是你產(chǎn)品最需要突破的設(shè)計(jì)難題。對(duì)我而言看到用戶第一次用自己拖出來(lái)的工具解決問(wèn)題時(shí)那種驚喜比任何技術(shù)指標(biāo)都更有說(shuō)服力。這條路我會(huì)繼續(xù)走下去下一個(gè)階段的目標(biāo)是加入AI輔助讓用戶在拖好大致流程后由AI補(bǔ)全節(jié)點(diǎn)細(xì)節(jié)一步步逼近理想中的零門(mén)檻。