爆肝24小时,我们做了个Dooring零代码校园版(零代码平台)

熟悉 Dooring 的朋友都知道,Dooring 零代码平台上手门槛低,很容易制作各种想要的页面和轻应用,很多不懂技术的朋友都可以用来制作网页应用。

需求背景

近期有学校的老师找到我们,看能否帮助他们实现一个在校园环境下使用的用于教学的网页搭建设计平台,刚好这就是我们擅长的领域,我们有可视化拖拽式网页设计工具,也有在线编程的学习小工具,对于中学学生来说,这两个工具,都能很好的实现网页设计及简单的网页及简单编程学习。

爆肝24小时,我们做了个Dooring零代码校园版(零代码平台)

Dooring 的服务都是网页端的,我们早期实现过一个桌面端的 Demo 产品,但是体验不太好,要顺利实现桌面版且保证一定的体验,同时支持较多学生同时使用,可能有一定的技术开发成本。但是老师也说了,预算可能会有限,对于教育领域的需求,在我们能力范围内,即使不以盈利为主要目的,如能看到产品的社会价值,我们也是很乐意去做的。我们打算象征性的收取少量成本费用,然后就这么愉快的答应下来了。

爆肝24小时,我们做了个Dooring零代码校园版(零代码平台)

在接下来我们着手具体需求设计,在学校里存在多账号使用,且学生很多无法按照正常实名手机号注册的问题,同时还需要和我们线上环境做一定的隔离。

爆肝24小时,我们做了个Dooring零代码校园版(零代码平台)

由于目前我们的开发资源也有些紧张,需要短时间内快速解决这个问题,就挺消耗工程师的脑细胞的了。

爆肝24小时,我们做了个Dooring零代码校园版(零代码平台)

Dooring 桌面版实现方案

还好工程师们给力,基于原有的Dooring版本,重新设计部署,在采用了用 Electron Nodejs 的技术方案后,解决了网页端应用转桌面应用的问题。

dooring-electron架构介绍

熟悉Electron的朋友也许知道, Electron继承了来自 Chromium 的多进程架构,这使得Electron在架构上非常类似于一个现代的网页浏览器。我们可以控制两种类型的进程:主进程和渲染器

每个 Electron 应用都有一个单一的主进程,作为应用程序入口。主进程在 Node 环境中运行,我们可以使用所有 Node 的能力。

那么主进程中我们可以做些什么呢? 主进程的主要目的是使用 Browserwindow 模块创建和管理应用程序窗口

BrowserWindow 类的每个实例创建一个应用程序窗口,且在单独的渲染器进程中加载一个网页。 我们可从主进程用 window 的 webContent 对象与网页内容进行交互。

有了以上基础, 我画了一张dooring-electron 的简单架构图方便大家理解:

爆肝24小时,我们做了个Dooring零代码校园版(零代码平台)

学生搭建时,搭建的环境由桌面端软件支持,数据层面的,页面搭建及页面访问的联网服务,依然使用我们服务器支持,网页应用直接转桌面应用的 Electron 方案,会出现一些无法前进后退等交互问题,不过我们使用新窗口的方法很快解决了。

从方技术方案构思完,到编码,到完成 WindowsMacOS 两个桌面客户端的软件打包,到测试,技术伙伴爆肝到晚上 10 点半,终于比预期提前两天实现,搞定了全部模块。在跟着体验测试一波,流程及体验都很丝滑,至此 Dooring 零代码校园桌面版,可以正式开放给老师使用了。

爆肝24小时,我们做了个Dooring零代码校园版(零代码平台)

安装桌面版 Dooring

我们以 Windows桌面版Dooring 版为例,使用我们打包好的Dooring 安装包,点击安装包,再继续点击下一步即可完成安装

爆肝24小时,我们做了个Dooring零代码校园版(零代码平台)

Dooring 软件包结构如下:

爆肝24小时,我们做了个Dooring零代码校园版(零代码平台)

启动时,我们只需要双击 Dooring 软件图标,即可启动 Dooring 桌面版零代码页面搭建系统,输入账号密码即可登录。

爆肝24小时,我们做了个Dooring零代码校园版(零代码平台)

桌面版功能清单

我们将常用的 Dooring 可视化系列工具集都集成在软件里,登录后,可以可视化制作 H5 页面、可视化大屏、简单图片编辑排版,也能进行简单的在线编程及实时预览。

爆肝24小时,我们做了个Dooring零代码校园版(零代码平台)

接下来,给大家展示工具集个模块效果展示。

H5 页面编辑器

H5-Dooring 提供了丰富的页面搭建体验,内置了 40 多种常见的页面样式组件,每一个组件只需要拖拽到画布里,再进行简单修改,就可以快速生成你想要的页面效果,还可以设计交互效果。

爆肝24小时,我们做了个Dooring零代码校园版(零代码平台)

页面搭建好了,可以随时修改,随时发布。对于尚未掌握编程技术的人群来说,这样的搭建方法,可以快速生成想要的页面。

轻量在线编程/代码编辑器

除了可视化页面搭建效果,Dooring 实现了一个简单的在线网页编程小工具,页面左侧为代码编程区域,右侧为页面展示效果,可以实时编程实时查看效果,针对中学教学环境,可以非常便利的做编程教学和演示。

爆肝24小时,我们做了个Dooring零代码校园版(零代码平台)

Dooring 在线大屏编辑器

当我们想要制作大屏画面时,Dooring 可以很方便且快速的制作各种大屏监控或者数据可视化图表时,可以很容易用拖拽的方式搭建出来。

爆肝24小时,我们做了个Dooring零代码校园版(零代码平台)

Dooring 在线图片编辑器

Dooring 设计了轻量的图片编辑器,可以用组件轻松的拼图,制作图片。

爆肝24小时,我们做了个Dooring零代码校园版(零代码平台)

桌面版软件交付

最后,我们将完整的软件及管理账号交付给老师体验,并陆续完成相关教程支持工作,流畅的体验,很好的适应了老师的教学预期,获得老师的大加赞赏,老师也为主动为 Dooring 做起宣传,这也许是我们做产品带来的最大的满足感吧。

爆肝24小时,我们做了个Dooring零代码校园版(零代码平台)

后续,我们将Dooring校园版桌面软件安排上线,并持续优化,欢迎有需求的老师免费体验。

相关新闻

联系我们
联系我们
公众号
公众号
在线咨询
分享本页
返回顶部