基于 Scratch Blockly 的设计模式可视化学习平台

# 基于 Scratch Blockly 的设计模式可视化学习平台 在这个选题中，你需要实现一个基于 Scratch Blockly 的设计模式可视化学习平台。结合Scratch Blocks强大的功能和设计模式这一经典的编程思想，为初入编程大门的人提供一个易于学习的平台。 - 通过对Scratch Blocks以及其他Web领域前沿技术的体验与研究，了解行业在可视化、前端存储等领域的发展方向，提高自身技术水平； - 在线编程教育是未来必然的一个发展趋势。本文以可视化为核心，设计模式为主题构建学习平台，为在线编程教育提供一个发展思路； - 让编程初学者能以可视化这种低门槛的方式，了解各个设计模式的概念与适用于解决的问题，激发用户学习兴趣，并为之后良好的编程习惯打下基础。 ## 1. 系统基本功能与流程 ### 1.1 功能要求 #### 1.1.1 基本功能 - 学生前台页面 - 用户登录、注册；个人信息、操作记录、场景历史等 - 选择相应的场景去学习设计模式 - 设计模式的场景设计很重要，这个是关键，类似于游戏的场景设计 - 管理人员页面 - 后台登录 - 查看场景被学生操作的记录 #### 1.1.2 进阶功能 - 结合Web 3D展示，引入 Three.js 做生成代码的图，设计模式的代码生成与Three.js结合 #### 1.1.3 附加说明 - 其中有一个在线运行用户拖拽生成的代码，可以考虑用 Sphere Engine 在线运行用户生成的代码，类似于在线 OJ 系统，可以返回编译成功或者失败信息。 ### 1.2 使用流程 > 注:PJ 的具体界面设计和功能安排可自由发挥。除了这些页面外，你可以根据你的场景需要添加其他页面和交互。 #### 1.2.1 登录注册页面 - 用户能够通过用户名和密码登录和注册。注册时需要完善用户名、密码等信息 #### 1.2.2 设计模式学习场景页面 - 从23种经典设计模式中，分析并筛选出比较适合可视化学习的几种设计模式，归纳总结其特点，并为之设计一个具体的应用场景供用户学习。每个场景分为多个步骤，用户通过完成每一步的任务，逐渐加深对该设计模式的理解，最后达到学习设计模式的目的； - 以Scratch Blocks提供的可视化编程库为技术核心，构建通用的学习模块，这其中包含了模块的UI、相互间的关系以及对应生成的代码。用户通过拖曳模块，就能生成代码，不仅降低了使用成本与门槛，还能加深用户对生成的编程语言以及设计模式的理解； - 用Sphere Engine在线运行用户生成的代码，通过预先编写好的测试用例验证是否符合学习内容，使得用户能更直观地感受到学习效果，保证学习质量； - 通过Web Storage，将学习进度、场景历史等用户数据保存在客户端，免去从服务器重新获取数据的成本，加快页面加载速度，提升用户体验。 #### 1.2.3 用户后台页面 - 后台登录 - 根据场景，可选提供历史行为查看和分析功能。 ## 2. 技术实现 ## 3. 建议 - 采用前后端分离架构； - 前端框架建议采用 Angular； - 后端框架建议采用 SpringBoot； - Scratch Blockly 前端。 ### 3.1 参考资料 - Google Blockly 资料 : https://developers.google.cn/blockly/ - Scratch Blocks 官方文档 : https://scratch.mit.edu/developers - Sphere Engine 官方文档 : https://developer.sphere-engine.com/api/compilers?version=3 - Web Storage W3C 标准文档 : https://www.w3.org/TR/webstorage/ - Erich Gamma, Richard Helm, Ralph Johnson, John Vlissides, “Design Patters: Elements of Reusable Object-Oriented Software”, Addison-Wesley, 1995 - runoob.com 设计模式教程 : http://www.runoob.com/design-pattern/design-pattern-tutorial.html ## 4. 评分细则 ### 4.1 分数组成 - 基本功能分:即完成系统基本内容与流程，满分 100 分。 - 进阶任务分:包括但不限于更精致的设计、场景，更好的开发部署流程、设计模式等。最多 30 分。 - 个人工作分:根据小组分工及个人完成工作量得分。每组组员该项分数总和 30 分，根据贡献比例分摊。 个人最终得分 = 基本功能分 + 进阶任务分 + 个人工作分，值域为 [0, 160]。 ### 4.2 评分点 |功能项 | 得分项 | 最高分数| | ------ | ------ | ------ | | 基本流程 |注册和登录页面| 5| |（30分）| 设计模式场景页面 |10| ||用户后台页面 |15| |设计模式可视化场景 |正确显示一个可交互的 Blockly 场景 |10| |（50分） |支持代码提交的验证，返回成功或者失败信息| 10| ||正确更新代码提交通过后的变化、生成效果| 10| ||场景的创意、功能的完成度和交互的丰富程度 |10| ||合适的新手用户使用导航 |10| |工程能力| 文档 |5| |（30分）| 系统架构 |10| ||代码风格| 5| ||项目完整度和易用性 |10| |附加功能 |模型、动画、场景的美观程度| 10| |（40分）| 将服务器部署到公有云上 |10| ||使用 Docker 部署服务器 |10| ||其他合理的附加功能 |10| ### 4.3 评分点说明 1. 每一项的分数取决于该项功能的完成度。完成度和可用性越好，分数越高。 2. 项目完整度和易用性评价标准: - A. 最低要求为必须实现并完成规定的用户功能与操作。核心功能和技术都有实现，在应用逻辑和实际操 作便捷性上可以不做考虑。 - B. 基本要求为实现并完成规定的用户功能和操作，并设计合理便捷的操作流程，系统各部分衔接过度自 然，方便使用。 - C. 进阶要求为实现并完成规定的用户功能、操作和进阶加分项，形成一套完整的可发布的应用逻辑。 A、B、C 分别对应 0 - 3 分，4 - 6 分，7 - 10 分。 3. 附加功能必须在文档中明确写出，概述该功能并描述实现原理。 4. 项目设计文档需要至少包含: - 项目组织以及其中每个文件的说明。 - 关键功能实现的细节。 - 服务器部署配置的详细介绍。 5. 团队分工文档需要至少包含: - 团队成员、分工、具体完成工作，列出每个人的贡献比例。 - 其他你们想说明的问题。 ## 5. 提交 1. 提交物包含以下三项: - 源代码:推荐使用 Git 进行协作，提交到 GitHub 等 Git 托管平台上。 - 文档:推荐使用 Markdown 编写项目文档，与源代码一同提交到 Git 托管平台上。 - 可供访问的公网地址，以及系统的操作说明(玩法)。 2. 提交物需要压缩打包提交到 FTP 上，文件名中请包含小队所有成员的姓名与学号。 3. 友情提示:请尽早开工，本学期只有一个 Project，临时赶工很有可能完不成。