這位辯手，你想試試線上語音 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 應聘快速通道，快拉上小夥伴報名吧！