爆肝24小時,我們做了個Dooring零代碼校園版(零代碼平臺)
熟悉 Dooring 的朋友都知道,Dooring 零代碼平臺上手門檻低,很容易制作各種想要的頁面和輕應用,很多不懂技術的朋友都可以用來制作網頁應用。
需求背景
近期有學校的老師找到我們,看能否幫助他們實現一個在校園環(huán)境下使用的用于教學的網頁搭建設計平臺,剛好這就是我們擅長的領域,我們有可視化拖拽式網頁設計工具,也有在線編程的學習小工具,對于中學學生來說,這兩個工具,都能很好的實現網頁設計及簡單的網頁及簡單編程學習。
Dooring 的服務都是網頁端的,我們早期實現過一個桌面端的 Demo 產品,但是體驗不太好,要順利實現桌面版且保證一定的體驗,同時支持較多學生同時使用,可能有一定的技術開發(fā)成本。但是老師也說了,預算可能會有限,對于教育領域的需求,在我們能力范圍內,即使不以盈利為主要目的,如能看到產品的社會價值,我們也是很樂意去做的。我們打算象征性的收取少量成本費用,然后就這么愉快的答應下來了。
在接下來我們著手具體需求設計,在學校里存在多賬號使用,且學生很多無法按照正常實名手機號注冊的問題,同時還需要和我們線上環(huán)境做一定的隔離。
由于目前我們的開發(fā)資源也有些緊張,需要短時間內快速解決這個問題,就挺消耗工程師的腦細胞的了。
Dooring 桌面版實現方案
還好工程師們給力,基于原有的Dooring版本,重新設計部署,在采用了用 Electron Nodejs 的技術方案后,解決了網頁端應用轉桌面應用的問題。
dooring-electron架構介紹
熟悉Electron的朋友也許知道, Electron繼承了來自 Chromium 的多進程架構,這使得Electron在架構上非常類似于一個現代的網頁瀏覽器。我們可以控制兩種類型的進程:主進程和渲染器。
每個 Electron 應用都有一個單一的主進程,作為應用程序入口。主進程在 Node 環(huán)境中運行,我們可以使用所有 Node 的能力。
那么主進程中我們可以做些什么呢? 主進程的主要目的是使用 Browserwindow 模塊創(chuàng)建和管理應用程序窗口。
BrowserWindow 類的每個實例創(chuàng)建一個應用程序窗口,且在單獨的渲染器進程中加載一個網頁。 我們可從主進程用 window 的 webContent 對象與網頁內容進行交互。
有了以上基礎, 我畫了一張dooring-electron 的簡單架構圖方便大家理解:
學生搭建時,搭建的環(huán)境由桌面端軟件支持,數據層面的,頁面搭建及頁面訪問的聯網服務,依然使用我們服務器支持,網頁應用直接轉桌面應用的 Electron 方案,會出現一些無法前進后退等交互問題,不過我們使用新窗口的方法很快解決了。
從方技術方案構思完,到編碼,到完成 Windows 和 MacOS 兩個桌面客戶端的軟件打包,到測試,技術伙伴爆肝到晚上 10 點半,終于比預期提前兩天實現,搞定了全部模塊。在跟著體驗測試一波,流程及體驗都很絲滑,至此 Dooring 零代碼校園桌面版,可以正式開放給老師使用了。
安裝桌面版 Dooring
我們以 Windows桌面版Dooring 版為例,使用我們打包好的Dooring 安裝包,點擊安裝包,再繼續(xù)點擊下一步即可完成安裝
Dooring 軟件包結構如下:
啟動時,我們只需要雙擊 Dooring 軟件圖標,即可啟動 Dooring 桌面版零代碼頁面搭建系統,輸入賬號密碼即可登錄。
桌面版功能清單
我們將常用的 Dooring 可視化系列工具集都集成在軟件里,登錄后,可以可視化制作 H5 頁面、可視化大屏、簡單圖片編輯排版,也能進行簡單的在線編程及實時預覽。
接下來,給大家展示工具集個模塊效果展示。
H5 頁面編輯器
H5-Dooring 提供了豐富的頁面搭建體驗,內置了 40 多種常見的頁面樣式組件,每一個組件只需要拖拽到畫布里,再進行簡單修改,就可以快速生成你想要的頁面效果,還可以設計交互效果。
頁面搭建好了,可以隨時修改,隨時發(fā)布。對于尚未掌握編程技術的人群來說,這樣的搭建方法,可以快速生成想要的頁面。
輕量在線編程/代碼編輯器
除了可視化頁面搭建效果,Dooring 實現了一個簡單的在線網頁編程小工具,頁面左側為代碼編程區(qū)域,右側為頁面展示效果,可以實時編程實時查看效果,針對中學教學環(huán)境,可以非常便利的做編程教學和演示。
Dooring 在線大屏編輯器
當我們想要制作大屏畫面時,Dooring 可以很方便且快速的制作各種大屏監(jiān)控或者數據可視化圖表時,可以很容易用拖拽的方式搭建出來。
Dooring 在線圖片編輯器
Dooring 設計了輕量的圖片編輯器,可以用組件輕松的拼圖,制作圖片。
桌面版軟件交付
最后,我們將完整的軟件及管理賬號交付給老師體驗,并陸續(xù)完成相關教程支持工作,流暢的體驗,很好的適應了老師的教學預期,獲得老師的大加贊賞,老師也為主動為 Dooring 做起宣傳,這也許是我們做產品帶來的最大的滿足感吧。
后續(xù),我們將Dooring校園版桌面軟件安排上線,并持續(xù)優(yōu)化,歡迎有需求的老師免費體驗。