CodeSync-代码授课新选择(基于Visual Studio Code)

作者：于卓浩Puluter（重庆大学本科, 2019级）王嘉维Joel（伯明翰大学本科, 2019级）
指导：陈波《Python编程基础及应用》（高等教育出版社）

如何获取该插件

目前还在内测阶段，缺乏足够的安全措施，故没有公测。
如您有使用意向，烦请发送邮件至 pkmq24@qq.com
在邮件内注明您的身份与预期使用场景即可，我收到邮件后会尽快回复您，感谢！

背景阐释

计算机类课程授课中，常见教师使用如VSCode的IDE来进行代码实时书写与运行，为学生展示代码书写过程与代码运行结果。然而，授课最常用的投影仪，并不能很好的解决代码投影这个需求。
受光线、可视角度、代码字号等诸多因素影响，真实授课过程中，往往会有很大一部分学生很难看清教师所书写的代码与其运行结果。

作品简述

为解决上述问题，本作品应运而生。
CodeSync是一个VSCode插件，它可以将教师端VSCode内的代码实时同步至网页，如此，学生可以清晰地在网页端查看代码。具体示例见后。

使用方法 - 教师

插件安装

在Visual Studio Code Extension页，点击…, 弹出菜单中选Install from VSIX…或从VSIX安装…，在弹出窗口中选择下载好的codesync-1.3.0.vsix进行安装。

1.3.0为CodeSync的版本号，它会随时间变化。

打开一个代码文件，右击任意位置，选“开始代码同步”

获知房间号与链接

房间号及网址：插件将弹出一个新tab，tab内将自动显示房间号及网址。
左上角的开关：用于允许/禁止弹幕在VSCode内弹出提醒。
二维码：本来还有二维码，但老师说不希望学生在课堂上拿起手机，所以二维码不会默认出现。

可以通过单击写有“房间号”的白色的Card使之翻面，翻面后便有二维码。我们对手机端确实做了样式的适配，所以如果的确有要学生用手机查看的需求，也可以手动把二维码翻出来。

获知到房间号及网址后，将其告知学生。

使用方法 - 学生

访问网站

访问前述网址（目前为link.puluter.cn），输入正确的房间号及语言类型（可以是C, Java, Ruby等其它语言），点击进入即可。

此时，教师每敲一个字符，代码都会同步在学生端的浏览器上。

特性

代码高亮：选对语言便会有代码高亮
本地实践：鼠标移动到代码右上角，会出现Copy，点击即可以复制代码，便于本地实践
弹幕反馈：右侧会有弹幕功能，学生可以通过这个功能向教师进行反馈
精心设计：我们将其设计成了类似VSCode的页面，可以让学生更沉浸地上课学习

线下使用示例

写在后面

这个小插件的Idea是我19年11月便记录下来的，直到20年7月，因为声网RTE比赛的缘故，才叫上了好友王嘉维Joel(Joel的博客)，一起动手把它从零写起。最终，这个简单的作品获得了RTE的三等奖。
这一年间参与了三次RTE的比赛，我觉得真的收获许多。最大的一点便是我真的有了一个契机与动力去落地我脑子里的那些创意（比如目前我的记事本里还有27条没有做的创意），在这几次参加比赛的过程中，我能明显感受到自己的代码力在飞快地提升。

今天重庆出太阳了，是个好日子，我坐在湖边，读着林清玄的散文，突然觉得，计算机系从来都不是想要培养程序员，我们学习计算机的意义在于为我们的创意落地提供工具。当我能熟练使用Vuexy开发网页端，用Uniapp开发小程序，那我就有了非常非常高的能力去落地自己的那些创意。这才是学习计算机赋予我的更高层次的能力。

如果只是给他人的创意打工，那便是真的丢掉了太多太多的机会了。