在我国初中的计算机课程教学中，有一门《网页的编辑与发布》大单元课程，这门课程几乎是当前中国初中学生的必学课程，受众学生群体广泛，但是对还只是初中学生来说，理解软件的数据组织、逻辑和编码都有不小的困难。
图1-课程
教育教学工具在整个B端产品工具里面相对较少，一方面，过往软件行业在教育行业提供的服务大多集中在在线教学、线上课程、题库管理等方面；另一方面，学校场景还是以学习为主，场景相对比较封闭，需求沟通、设计和推广相对有一些难度；
本次产品是联合了多所初中学校的计算机老师，为初中学生设计的一款学习H5网页的公益产品，上线一个月已经在全国数十所初中投入使用，希望能为教育行业的软件开发过程提供一些参考。
二、项目发起
初中计算机老师在教学计算机课程的时候，遇到了这样2个问题：
对学生来说：《网页的编辑与发布》课程里面的互联网数据和制作网页，对学生来说数据组织、数据编码比较抽象难以理解，网页编码涉及知识点较多，简单的网页学习兴趣又很低，导致最终理解计算机知识、逻辑能力培养都比较困难；
对老师来说：教学、实践的流程需要打通，在讲解了html标签、网页编码的基本原理后，怎么让学生加深理解，有编码的兴趣是个较大的难题。
图2-用例
计算机老师在教学上感受到的痛点，开始在全网寻找B端软件工具来解决这个问题，这个是由核心用户感受到深刻痛点开始自发寻找软件解决工具的过程。
三、产品设计
对教学场景软件产品的设计，因为已经有众多领域业务专家——计算机老师，建模方法选择借鉴领域建模（DDD）的思想来推进：
通过DDD来帮助分析理解复杂业务领域问题，描述业务中涉及的实体及其相互之间的关系；
专家业务经验丰富，产研团队专注产品技术，是需求分析人员与用户交流的有力工具，是彼此交流的语言；
分析如何满足系统功能性需求，指导项目后续的系统设计。
在教学场景下，希望设计一款H5网页可视化编程工具，来帮助学生可视化实践网页编码过程，培养学生的编码兴趣、实现老师的教学任务和作业评分：
图3-功能结构
1.可视化编辑
相比于传统授课方式，我们认为"边学边做"会是一种更好的学习方式，所以第一个设计的功能模块就是让学生用户可以感知代码结构和对应的展现效果的H5可视化编辑器：
通过积木式搭建H5网页，唤起学生的编码兴趣。兴趣是学生用户最好的老师，H5可视化编辑器支持学生先不写代码，仅凭借拖拽组件（已集成的代码块）即可搭建出丰富多彩的网页；
通过自己搭建的网页，用具体案例在计算机老师的带领下，来分析网页的数据结构、编码等，将教学知识和实践应用中的场景对应起来；
在完成学习之后，提供在线实时编辑，实时渲染生成学生自有的H5网页，将自己所学投入生产应用，从模仿到创造新网页进行发布。
图4-可视化编辑器
在可视化编程上，学生可以编写基础的html、css、javascript，来把自己所学来进行实践，在线即可实时查阅效果，生成更加个性化的网页：
图5-在线编码
可视化编辑器的产品架构：
图6-编辑器架构
可视化编辑器主要由三部分组成：
组件库和配置：提供组件库专门维护课程教学中需要的组件，随时可用，也可以对其中部分数据支持修改配置，方便学生将编码框架和业务数据的低耦合逻辑进行理解，同时对业务数据的自定义也能让组件的适用范围更广；
画布：画布是一切组件搭建页面的画板，画布可以自由布局组件内容，提供拖拽器可以把组件拖拽到画布进行渲染，提供坐标位置方便位置定位等网页搭建辅助能力；
渲染引擎：对搭建的数据最终进行渲染生成H5网页。
2.后台管理
为了方便老师的教学和管理，教学工具还提供了对应的管理后台进行维护：
1.组织管理：学校作为组织，支持创建学校、班级作为组织，不同组织之间数据不互通，相互隔离；
3.角色管理：通过把权限分配给角色，来统一管理学校、老师、学生等角色需要的不同的功能和数据权限；
4.作品查阅、打分：支持在后台对学生作品进行查询、打分，分数结果与学校教务系统学生成绩通过API打通同步。
产品结果
这个项目在一定程度上反映了领域驱动设计（DDD）的巨大能力，这种由内而外，从业务领域找出反映业务本质的事物和规则，再抽象和建模出来，通过H5教学工具的流程和能力进行输出，把一件复杂的事物转换为标准化的软件产品和流程，让各方需求得到满足，甚至引领了用户的需求完成了超预期的满足。
图7-使用情况
本文由@大风吹原创发布于人人都是产品经理。未经许可，禁止转载。