【Frontend】Alpha Review 展示博客

团队成员介绍

• Jingyi Xie：负责技术选型、项目初始化、项目重难点的突破、前后端联调的主持和最终的修缮工作。
• Hanyue Tu：负责主页和问卷页面的API协商和编码。
• Ziwei Wu：负责编辑器功能的编写。
• Jiaqi Xu：负责显示提示、运行结果功能的编写。
• Jingwei Yi：负责编辑器页面的逻辑和编辑器页面的联调。

典型场景描述

我们的产品面向编程的初学者（如高校新生）或是有一定编程基础但是需要快速入门一门新语言（当前只考虑了 Python）的人员。他们都需要通过某种方式入门一门新语言，但由于背景的不同，后者只需做一些语法上的训练，而前者可能还需要编程思维或是常用算法的训练。我们会根据用户的水平和做题记录循序渐进地为其推荐合适的题目，同时在用户犯错时，将解释器/编译器的报错转化为人性化的提示，以降低其对编程学习的恐惧感。

团队管理与协作

成员分工见"团队成员介绍"一节。

在团队内部我们采用了常见的 git workflow，即首先我们团队有一个自己的主分支 frontend-master，每人再基于此创建自己的分支，一项功能完成后并入 frontend-master，再一并并入 master 分支。在任务分配时我们已经尽量降低了成员与成员之间工作的耦合度，使整个团队能高效地并行。对于功能上实在有耦合关系的成员，我们鼓励其在开发时多交流以提高效率。

至于团队间的协作，我们主要是需要和后端对接。我们使用 hackmd 这一工具进行文档的协作。首先由我们提出前端需要的接口，再由后端的同学评估合理度，并进行开发。当然，当遇到一些涉及需求的问题时，我们三组人会一起开会，以确保大家没有对需求的理解产生偏差。

项目质量控制

前端的开发其实非常依赖后端的数据。为了在后端尚未完工时我们也能进行开发，我们使用了如下策略：将请求的逻辑按功能封装成函数，每个函数实现mockup和real server两个版本——前者只是简单地按照接口格式返回假数据，后者则包含真正的发请求的逻辑。如此一来，我们可以和后端并行开发，让前端的逻辑尽早得到测试；同时将对接时的工作量降到最低，避免后期引入新的错误。

我觉得我们 alpha 阶段的成果还是比较契合我们场景的，首先我们确实实现了错误的人性化提示，并以合理的方式呈现出来，其次我们的推荐系统也在前端有一定程度的强调，即用户答题成功后的splash，同时我们也利用推荐系统为用户设计了流畅且合理的使用路径。

技术细节介绍

我们前端使用了 Vue.js 作为主框架——此处带有一些技术选型者自身的偏见（曾有相关开发经验），但也不失为一个好的选择。UI 框架我们选择了 Vuetify，这是一个Material Design风格的框架，和Vue.js 融合度很高，适合快速开发。

项目的一大难点是编辑器，尤其是其"挖空"的功能。我们的思路是：与其从头开始开发，不如基于一个完善的代码编辑器做减法。于是我们找到了 ACE Editor，这是一个功能强大同时可以灵活定制的前端代码编辑器。当前实现的所谓挖空，其实是改变了某些行的样式，同时根据用户光标的位置决定是否响应2输入事件，仅此而已。我们禁用了大量编辑器的辅助功能，如粘贴、撤销、重做等，以将用户的活动范围限制在空里。当然我们也改变了一些事件的行为，如将回车和行首退格的行为变成了上下移动光标，以提高用户体验。

事后诸葛亮

回首这次 alpha 阶段开发可以发现，我们在需求分析和进度安排上还有一些不是很合理的地方。前期时我们前端组并没有和其他两个组进行很好的沟通，导致我们不能及时知道他们对需求的变更（在第六第七天时有一个较大的变化），从而使最后的工期比较紧张。这一点我们会在 beta 阶段注意。