我们做了什么？

烨韬：

Go+ Builder 是一个允许儿童使用平台提供的编辑器和游戏引擎创作游戏的项目。在本次实训中，我们的目标是做一个可以让零编程基础儿童学会使用 Builder 的向导系统，同时我们还具有为 Go+ 编程语言布道的使命。

非池：

在项目初期，我们基于 Builder 的向导功能需求，确立了以“渐进式学习引导”为核心的产品方向。通过三个阶段系统性推进：

  • 产品设计阶段：完成竞品分析与产品功能设计

  • 架构设计阶段：设计系统架构，进行模块拆分

  • 开发阶段：完成功能实现并持续迭代验证

产品设计要从用户角度出发

烨韬：

向导系统的定位赋予了产品的用户接受度高，内容覆盖性广，门槛低的产品画像。对于高用户接受度，我们将产品主线设计为故事线背景、以独立多关卡闯关的形式，对于用户来讲，这种形式的教程会大大提高用户能做下去、做完成的意愿。对于广内容覆盖性，我们通过配置不同关卡所涉及的 API Reference、所需的精灵等信息来做到让故事线对本平台所有核心操作渐进式全覆盖。对于低门槛，我们提出了视频交互、完形填空编码、跟随高亮操作三种形式融合的方式，让用户以更低的学习成本去做成尽可能多的事。

秋吉：

为激励用户积极参与，我们设计了奖励机制：用户在完成特定关卡后可以解锁对应的成就，完成全部关卡后可创建包含全部课程代码的完整 Builder 项目，用户可自由发挥创意，并将作品分享到社区。未来，我们还可进一步扩展该奖励系统，比如引入专属素材库解锁、积分获取等更多的激励方式。此外，为降低用户的心智负担，每个关卡均配备了视频教程，帮助用户快速了解并掌握 Builder 的基本用法。同时，通过一系列直观的 UI 交互引导，用户能够进行实际操作体验。考虑到 Builder 最核心的任务是编写 Go+ 代码，这对初学者有一定的挑战性。因此，我们特别设计了代码完形填空模式，让用户仅需根据提示和教程补全关键代码，显著降低了使用难度。

非池：

思考过后，我们又不断地抽象出了诸如原子化操作（步骤、节点）、任务集合（关卡）、 学习路径（故事线）通过粒度控制实现“小步快走”的学习体验。当然也不会过于简单，我们在每一步都有答案的比对，也会给予学习者充分的提示，也尊重他们的独立思考。

万欣：

在产品设计阶段，我们对众多竞品进行了全面而深入的调研，涵盖了 Scratch、编程猫、扣叮等知名产品。其中，扣叮以其独特的关卡引导设计思路，为我提供了极具建设性的参考，让我深受启发。通过对不同竞品的横向对比分析，我不仅拓宽了视野，更深刻理解了如何设计向导系统，以便让目标用户群体能够更快速、更高效地掌握编码方法。随后，我们展开了头脑风暴，各种创意和想法相互碰撞、融合，完成了初步的“加法”过程，为产品注入了丰富的功能设想。

产品设计需要做加法也需要做减法

万欣：

然而，经过头脑风暴后的产品方案过于丰富和复杂，远远超出了我们的时间预算。于是，我们果断进行了“减法”操作，通过优缺点分析，筛选出那些非核心、可暂时搁置的功能模块，从而简化了产品设计。经过这一系列的优化调整，我们最终确定了清晰且可行的产品形态，为后续开发奠定了坚实基础。从这个阶段，我深刻认识到做好一个产品的关键所在：竞品调研是关键的启发之门，它让我汲取灵感，拓宽思路；头脑风暴时，创意碰撞令人兴奋，但“减法”同样重要，它帮助我们聚焦核心，去除冗余。设计过程是一个不断打磨的过程，只有精准把握用户需求，才能打造出简洁而高效的产品，让用户真正受益。

烨韬：

在整个研发过程中，我深刻认识到在产品设计需要根据价值考虑取舍，整个开发周期取决于产品设计，需要合理评估全局才能做出效益最大化的取舍，从而降低开发风险。

合理的架构设计可以发挥乘法效应

秋吉：

架构设计阶段是整个项目实施过程中尤为关键的一环。由于团队在初期软件开发经验相对不足，我们在模块拆分过程中遇到了较大的困难，工作一度陷入瓶颈。幸而在导师的指导下，我们迅速掌握了合理拆分模块的方法，并清晰地确定了模块之间的对外接口。通过此次经历，我深刻认识到软件开发最关键的难点并非编码本身，而在于系统架构的合理设计。良好的模块拆分能够显著提高团队分工协作的效率及项目后期的维护性，这一点在随后的研发阶段得到了充分的体现。

秋吉：

进入研发实施阶段后，我们仍然面临了许多挑战，其中不少问题源于前期准备不足。例如，我们在架构设计阶段对 StepPlayer 模块复杂性的预估不足，没有充分地细化拆解，导致其开发周期远超预期。但得益于产品设计阶段对 StepPlayer 模块的初步抽象拆分，使得研发阶段进一步的子模块划分及分工能够迅速完成。回顾整个过程，我们更加体会到架构设计阶段的重要性。合理的模块拆分和清晰的接口设计越完善，越能有效提升团队研发效率，保障项目开发进度平稳推进。

万欣：

在架构设计阶段，我深刻体会到架构设计的重要性。以往的学习中，我忽视了架构设计，从未接触过，导致初期遇到诸多困难。最初，我们仅以页面粒度划分模块，这种做法过于浅显且不合理。在导师的指导下，我意识到架构设计应从深层次拆分功能，明确模块职责与交互关系。好的架构设计能优化团队协作，提升开发效率，减少后期维护成本，为项目的顺利推进奠定坚实基础。通过这一阶段的学习与实践，我深刻认识到架构设计在软件开发中的关键作用，它不仅决定了项目的整体结构，还直接影响到后续的开发效率和产品质量。

军辉：

我深度参与了 Tagging 与 Mask 这两个模块的设计与开发。Tagging 的目标是为向导系统提供一个灵活、高效的组件管理工具，让使用方能够快速定位界面上的目标元素。为此，我设计了一个基于 TagTree 的方案，通过多个 TagNode 组织组件关系。起初，我面临不少挑战：组件散落在不同层级，如何收集？动态渲染的组件如何实时更新？这些问题让我一度无从下手。我尝试过直接遍历 DOM，却发现性能不佳；也考虑过手动注册，但维护成本太高。最终，在导师的帮助下，我借助 Vue 的上下文通信，构建了一个自动收集 TagNode 的机制，完成了 Tagging 的初步设计。 随着研发推进，我根据团队反馈进一步优化了 Tagging。例如，通过引入 DFS 和 BFS 算法，我实现了模糊查找功能，使用方只需传入部分关键词就能定位组件。这不仅提升了向导系统的实用性，也为后续扩展（如 TagDevTools）奠定了基础。

军辉：

Mask 的任务是在向导系统中通过蒙层和高亮引导用户聚焦于当前步骤。得益于 Tagging，我可以轻松定位目标元素，但如何在蒙层中实现美观且实用的高亮效果却颇费心思。最初，我用四个盒子拼接高亮区域，却无法实现圆角；尝试阴影法时，又发现无法支持高亮区域的交互。经过多次试验，我最终通过动态计算 SVG 的两条路径（path），实现了既支持圆角又允许交互的高亮效果。

军辉：

参与向导系统的设计与实现，对我来说是一场从零到一的历练。Tagging 的开发锻炼了我的架构思维，我开始明白一个基础模块如何通过与其他模块的协同，发挥乘法效应。

构建生产级应用还需要考虑很多

秋吉：

此外，本阶段中我们还曾出现过对产品需求理解不一致的情况，这更加凸显了开发文档撰写的重要性。尽管文档并不直接影响软件运行，但它是团队成员之间统一认识、协调工作的基础性工具，是确保后续开发工作顺利开展的重要保障。

万欣：

我还负责将服务部署到测试环境中。这需要我在短期内快速了解 Kubernetes 相关概念，以及上手 KubeSphere 的使用。在长军老师的指导下，我最终完成了相关任务，明白了在企业中，一个服务是如何部署测试环境的。这一过程不仅提升了我的技术能力，也让我对软件开发的全流程有了更全面的理解。

烨韬：

本次实训我们践行了完全从用户的角度去做产品的要义，从零到一深入体验了产品研发的全流程，对项目研发的视野不再局限于编码阶段，对产品思维、团队协作等方面有了新的理解。