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

需求背景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

安裝桌面版 Dooring

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

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

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

桌面版功能清單

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

接下來(lái)，給大家展示工具集個(gè)模塊效果展示。

H5 頁(yè)面編輯器

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

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

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

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

Dooring 在線大屏編輯器

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

Dooring 在線圖片編輯器

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

桌面版軟件交付

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

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