这位辩手，你想试试线上语音 battle 么？

最近好像有个奇葩说相关的话题上了热搜。不过，那些话题并非咱们此次的主题，咱们更想聊聊辩论赛的“将来”。

说是“将来”，或许如今也一样适用。在疫情还未解除的状况下，不少线下活动都没法进行，辩论就是其中之一。不过已经有人将这个场景从线下搬到了线上。

咱们 2019 年 RTC 创新编程挑战赛的三强之一，“辩之竹”团队实现了一套功能完整的辩论系统，能计时、在线辩论、裁判视频点评，还能统计票数等。并且，它已经应用于不少辩论比赛中。因而咱们让“辩之竹”撰写分享了一下做品的初衷，还有核心功能的实现：

1 项目介绍

为解决传统辩论赛UI丑、各系统相互割裂、线下举办各种成本等问题，特开发此系统。该套系统彻底体包括：

• 可定制的赛事计时器
• 赛程、评委和辩手 管理后台
• 赛程查看和无纸化提交分数的小程序
• 赛后即时点对点反馈我的表现的辩力提高系统
• 远程裁决的视频会议部分

2 项目初心

做为一个大学生，咱们常常在大学举办各种辩论赛，可是在当前的辩论赛事中，长期存在着五大问题，即如图：

• 日程查看不直观
• 计时器简陋不美观
• 统计票数麻烦且不环保
• 复盘数据获取困难
• 优质裁判资源稀少

除了以上问题，其实咱们也发现如今的辩论赛很是受限于场地的局限，就算同一学校的两支辩论队也要解决申请教室、邀请评委、宣传吸引观众等问题，更别说若是是两所学校，两个城市，甚至两个国家的辩论队之间要举办比赛了。因此也想着可否把辩论赛总体搬迁到线上进行，正好接触到声网Agora 的黑客松大赛，了解到 SDK 每月有 10000 分钟的免费额度，也看下了他支撑的语言框架和 SDK 集成文档很丰富，因而就想着参赛作个做品，能帮助解决相关问题的同时，提高锻炼本身的技术水平。

3 解决日程观看不直观

日程展现一直是个问题。传统赛事中，日程展现一般都是以发送 PDF 的形式呈现，当参赛人员和观赛人员想要查看日程时，每每须要[打开QQ->进入赛事群->点开群文件->打开PDF->人工寻找对应日期的日程]。

就算完成了上述步骤，日程文件每每也是一个字号小、信息繁复、不直观的 PDF 文件。寻找一个日程很麻烦且不适。为了让参赛人员和观赛人员更直观的看到日程，特在小程序内设置此页面。

图：日程展现

数据储存使用了微信的云开发，并设计了 Web 端的后台页面，利用微信提供的API进行小程序端和 Web 端的数据统一来在 Web 端添加日程。

4 解决计时器简陋不美观

其次，计时器的不美观问题，传统计时器如图：

图：传统计时器

显然，这种计时器与任何现代的设计思惟都背道而驰，彻底无美感可言。我找朋友为我设计了计时器的页面，并利用 HTML + JavaScript 实现其功能。计时器展现如图：

图：计时器展现

图：计时器图片展现

JS 的主要实现部分在./web/admin-battle-add.php

该计时器主要实现了以下功能：

• 辩手姓名、图片展现
• 键盘操控
• 自定义环节

因为使用 HTML 开发，它有相比 exe 的更高跨平台能力。

5 解决统计票数问题

同时，响应无纸化潮流，我还设计了无纸化提交分数的裁判系统。它的另外一个好处是避免了人工计算分数，防止人为偏差的出现 + 计算分数的等待。

文件在：./Wechat Mini Program/Bam1/client/src/pages/user/judge.js

图：小程序裁判入口

裁判界面的环节是与计时器同步的。

图：裁判界面

这里为了防止数据丢失，还使用Taro.setStorageSync()，在每一次写完数据后，将数据存入临时数据。一样，当所有写入完毕，再使用微信云开发提交到服务器。

图：分数实时回传

$obj = $wx->databaseQuery("db.collection(\"battle-judge-point-conclude\").where({env:\"{$GLOBALS["env"]}\",battleId:\"{$bid}\",judgeId:\"{$r["judgeId"]}\"}).get()");

6 复盘数据获取更容易

我的辩力提高系统也是本系统的另外一个亮点。在传统赛事中，辩手对本身的表现只能以输赢来衡量，很难量化出一个标准，每每会拖慢对我的的提高。

可是在最广泛的三轮投票制中，有一轮即分数票，评委会根据选手的表现给出对应的分数。在传统赛事里，由于统计麻烦，因此每每不会将这个分数反馈给辩手。这浪费了一个很重要的资源。因此此系统利用评委在云上的分数，将每一个辩手的分数落实到每一个辩手身上，这样能够直观量化出辩手的水平，为辩手的进一步提高提供帮助。

图：我的辩力提高系统

7 裁判远程视频

最后，目前在辩论赛上广泛存在一个问题：缺乏优质裁判资源。倒不是说优质裁判特别特别少，而是请优质裁判所须要的高昂的食宿、交通费用每每给辩论组委会带来很大的经济困难。

故利用Agora声网公司提供的视频会议SDK开发了远程视频裁决系统。

在前期开发中，其实并无很是多的实际视频通话使用需求，声网提供的开发者免费时长（每个月10000分钟免费），为我做为一个大学生的开发提供了很大便利。同时，声网便利的SDK及其文档介绍使我很快就将服务接入了已有系统，总体开发体验很是好。得益于声网的优质服务，在几回测试中，视频会议的稳定性很是之高，彻底知足了使用需求。

图：远程视频裁决系统

文字直播：

$("#send").click(function () {

接入RTC视频Channel：

rtc.client.init(option.appID, function () {

此外，在上述展现出来的部分外，该系统还有完备的数据录入（指赛事信息录入），辩手信息和裁判信息录入系统。在这里很少展现。目前该系统已应用到实际环境屡次，支撑屡次辩论赛事的开展，欢迎你们使用，也欢迎你们能够一块儿参与到该项目的开发维护。

8 涉及技术

• 小程序: Taro, 微信云开发
• 网页端: Material Pro(样式), PHP,Agora SDK

9 开源与更多

做者于卓浩：重庆大学在读大一学生，喜欢学习新技术，兴致来了就写些本身喜欢的小项目。但愿能在有限的时间多学习一些有用的知识~

我的 Github：https://github.com/pkmq24

开源地址：https://github.com/AgoraIO-Co...

RTC 2020 编程挑战赛春季赛已经开启报名了！本次大赛从 3月10日 ~ 4月21日 进行报名、组队与开发，4 月 22 日至 4 月 24 日提交做品，4 月 25 日评奖，全程在线上进行。本次大赛准备了丰厚的大奖，获奖者更有机会进入声网 Agora 应聘快速通道，快拉上小伙伴报名吧！