熟悉 Dooring 的朋友都知道，Dooring 零代碼平臺上手門檻低，很容易制作各種想要的頁面和輕應(yīng)用，很多不懂技術(shù)的朋友都可以用來制作網(wǎng)頁應(yīng)用。

需求背景

近期有學(xué)校的老師找到我們，看能否幫助他們實現(xiàn)一個在校園環(huán)境下使用的用于教學(xué)的網(wǎng)頁搭建設(shè)計平臺，剛好這就是我們擅長的領(lǐng)域，我們有可視化拖拽式網(wǎng)頁設(shè)計工具，也有在線編程的學(xué)習(xí)小工具，對于中學(xué)學(xué)生來說，這兩個工具，都能很好的實現(xiàn)網(wǎng)頁設(shè)計及簡單的網(wǎng)頁及簡單編程學(xué)習(xí)。

Dooring 的服務(wù)都是網(wǎng)頁端的，我們早期實現(xiàn)過一個桌面端的 Demo 產(chǎn)品，但是體驗不太好，要順利實現(xiàn)桌面版且保證一定的體驗，同時支持較多學(xué)生同時使用，可能有一定的技術(shù)開發(fā)成本。但是老師也說了，預(yù)算可能會有限，對于教育領(lǐng)域的需求，在我們能力范圍內(nèi)，即使不以盈利為主要目的，如能看到產(chǎn)品的社會價值，我們也是很樂意去做的。我們打算象征性的收取少量成本費用，然后就這么愉快的答應(yīng)下來了。

在接下來我們著手具體需求設(shè)計，在學(xué)校里存在多賬號使用，且學(xué)生很多無法按照正常實名手機(jī)號注冊的問題，同時還需要和我們線上環(huán)境做一定的隔離。

由于目前我們的開發(fā)資源也有些緊張，需要短時間內(nèi)快速解決這個問題，就挺消耗工程師的腦細(xì)胞的了。

Dooring 桌面版實現(xiàn)方案

還好工程師們給力，基于原有的Dooring版本，重新設(shè)計部署，在采用了用 Electron Nodejs 的技術(shù)方案后，解決了網(wǎng)頁端應(yīng)用轉(zhuǎn)桌面應(yīng)用的問題。

dooring-electron架構(gòu)介紹

熟悉Electron的朋友也許知道, Electron繼承了來自 Chromium 的多進(jìn)程架構(gòu)，這使得Electron在架構(gòu)上非常類似于一個現(xiàn)代的網(wǎng)頁瀏覽器。我們可以控制兩種類型的進(jìn)程：主進(jìn)程和渲染器。

每個 Electron 應(yīng)用都有一個單一的主進(jìn)程，作為應(yīng)用程序入口。主進(jìn)程在 Node 環(huán)境中運行，我們可以使用所有 Node 的能力。

那么主進(jìn)程中我們可以做些什么呢? 主進(jìn)程的主要目的是使用 Browserwindow 模塊創(chuàng)建和管理應(yīng)用程序窗口。

BrowserWindow 類的每個實例創(chuàng)建一個應(yīng)用程序窗口，且在單獨的渲染器進(jìn)程中加載一個網(wǎng)頁。 我們可從主進(jìn)程用 window 的 webContent 對象與網(wǎng)頁內(nèi)容進(jìn)行交互。

有了以上基礎(chǔ), 我畫了一張dooring-electron 的簡單架構(gòu)圖方便大家理解:

學(xué)生搭建時，搭建的環(huán)境由桌面端軟件支持，數(shù)據(jù)層面的，頁面搭建及頁面訪問的聯(lián)網(wǎng)服務(wù)，依然使用我們服務(wù)器支持，網(wǎng)頁應(yīng)用直接轉(zhuǎn)桌面應(yīng)用的 Electron 方案，會出現(xiàn)一些無法前進(jìn)后退等交互問題，不過我們使用新窗口的方法很快解決了。

從方技術(shù)方案構(gòu)思完，到編碼，到完成 Windows 和 MacOS 兩個桌面客戶端的軟件打包，到測試，技術(shù)伙伴爆肝到晚上 10 點半，終于比預(yù)期提前兩天實現(xiàn)，搞定了全部模塊。在跟著體驗測試一波，流程及體驗都很絲滑，至此 Dooring 零代碼校園桌面版，可以正式開放給老師使用了。

安裝桌面版 Dooring

我們以 Windows桌面版Dooring 版為例，使用我們打包好的Dooring 安裝包，點擊安裝包，再繼續(xù)點擊下一步即可完成安裝

Dooring 軟件包結(jié)構(gòu)如下：

啟動時，我們只需要雙擊 Dooring 軟件圖標(biāo)，即可啟動 Dooring 桌面版零代碼頁面搭建系統(tǒng)，輸入賬號密碼即可登錄。

桌面版功能清單

我們將常用的 Dooring 可視化系列工具集都集成在軟件里，登錄后，可以可視化制作 H5 頁面、可視化大屏、簡單圖片編輯排版，也能進(jìn)行簡單的在線編程及實時預(yù)覽。

接下來，給大家展示工具集個模塊效果展示。

H5 頁面編輯器

H5-Dooring 提供了豐富的頁面搭建體驗，內(nèi)置了 40 多種常見的頁面樣式組件，每一個組件只需要拖拽到畫布里，再進(jìn)行簡單修改，就可以快速生成你想要的頁面效果，還可以設(shè)計交互效果。

頁面搭建好了，可以隨時修改，隨時發(fā)布。對于尚未掌握編程技術(shù)的人群來說，這樣的搭建方法，可以快速生成想要的頁面。

輕量在線編程/代碼編輯器

除了可視化頁面搭建效果，Dooring 實現(xiàn)了一個簡單的在線網(wǎng)頁編程小工具，頁面左側(cè)為代碼編程區(qū)域，右側(cè)為頁面展示效果，可以實時編程實時查看效果，針對中學(xué)教學(xué)環(huán)境，可以非常便利的做編程教學(xué)和演示。

Dooring 在線大屏編輯器

當(dāng)我們想要制作大屏畫面時，Dooring 可以很方便且快速的制作各種大屏監(jiān)控或者數(shù)據(jù)可視化圖表時，可以很容易用拖拽的方式搭建出來。

Dooring 在線圖片編輯器

Dooring 設(shè)計了輕量的圖片編輯器，可以用組件輕松的拼圖，制作圖片。

桌面版軟件交付

最后，我們將完整的軟件及管理賬號交付給老師體驗，并陸續(xù)完成相關(guān)教程支持工作，流暢的體驗，很好的適應(yīng)了老師的教學(xué)預(yù)期，獲得老師的大加贊賞，老師也為主動為 Dooring 做起宣傳，這也許是我們做產(chǎn)品帶來的最大的滿足感吧。

后續(xù)，我們將Dooring校園版桌面軟件安排上線，并持續(xù)優(yōu)化，歡迎有需求的老師免費體驗。