用這套代碼，奇葩說也能從線下搬到線上

摘要：小程序部分，./Wechat Mini Program/Bam1/client/src/pages/schedule/schedule.js這部分代碼主要是調用微信雲開發的相關函數獲取比賽 ID 列表。我們 2019 年 RTC 創新編程挑戰賽的三強之一，“辯之竹”團隊實現了一套功能完整的辯論系統，能計時、在線辯論、裁判視頻點評，還能統計票數等。

最近好像有個奇葩說相關的話題上了熱搜。不過，那些話題並不是我們這次的主題，我們更想聊聊辯論賽的“未來”。

說是“未來”，或許現在也同樣適用。在疫情還未解除的情況下，很多線下活動都無法進行，辯論就是其中之一。不過已經有人將這個場景從線下搬到了線上。

我們 2019 年 RTC 創新編程挑戰賽的三強之一，“辯之竹”團隊實現了一套功能完整的辯論系統，能計時、在線辯論、裁判視頻點評，還能統計票數等。而且，它已經應用於很多辯論比賽中。於是我們讓“辯之竹”撰寫分享了一下作品的初衷，還有核心功能的實現：

項目介紹

爲解決傳統辯論賽UI醜、各系統相互割裂、線下舉辦各類成本等問題，特開發此係統。該套系統完全體包括：

可定製的賽事計時器
賽程、評委和辯手管理後臺
賽程查看和無紙化提交分數的小程序
賽後即時點對點反饋個人表現的辯力提升系統
遠程裁決的視頻會議部分

項目初心

作爲一個大學生，我們經常在大學舉辦各類辯論賽，但是在當前的辯論賽事中，長期存在着五大問題，即如圖：

日程查看不直觀
計時器簡陋不美觀
統計票數麻煩且不環保
覆盤數據獲取困難
優質裁判資源稀少

除了以上問題，其實我們也發現現在的辯論賽非常受限於場地的侷限，就算同一學校的兩支辯論隊也要解決申請教室、邀請評委、宣傳吸引觀衆等問題，更別說如果是兩所學校，兩個城市，甚至兩個國家的辯論隊之間要舉辦比賽了。所以也想着能否把辯論賽整體搬遷到線上進行，正好接觸到聲網Agora 的黑客松大賽，瞭解到 SDK 每個月有 10000 分鐘的免費額度，也看下了他支撐的語言框架和 SDK 集成文檔很豐富，於是就想着參賽做個作品，能幫助解決相關問題的同時，提升鍛鍊自己的技術水平。

解決日程觀看不直觀

日程展示一直是個問題。傳統賽事中，日程展示通常都是以發送 PDF 的形式呈現，當參賽人員和觀賽人員想要查看日程時，往往需要 [打開QQ->進入賽事羣->點開羣文件->打開PDF->人工尋找對應日期的日程] 。

就算完成了上述步驟，日程文件往往也是一個 字號小、信息繁複、不直觀 的 PDF 文件。尋找一個日程很麻煩且不適。爲了讓參賽人員和觀賽人員更直觀的看到日程，特在小程序內設置此頁面。

圖：日程展示

數據儲存使用了微信的雲開發，並設計了 Web 端的後臺頁面，利用微信提供的API進行小程序端和 Web 端的數據統一來在 Web 端添加日程。

Web 端數據發送部分代碼：

//./web/admin-battle-add.php
//這裏調用了我自己寫的微信雲開發簡易SDK，可以在源碼中./web部分/lib/WeChat.php找到。具體信息可以在本文後部分具體介紹中找到。
else if($motion=="addBattle"){
    $title   = $_POST["title"];
    $loc     = $_POST["loc"];
    $time    = $_POST["time"];
    $teamClaimId = $_POST["teamClaimId"];
    $teamCounterClaimId = $_POST["teamCounterClaimId"];
    $res = $wx->databaseAdd("db.collection(\"battle\").add({data:{env:\"{$GLOBALS["env"]}\",title:\"{$title}\",status:\"0\",loc:\"{$loc}\",time:\"{$time}\",data:{teamClaim:{Id:\"{$teamClaimId}\",point:\"\"},teamCounterClaim:{Id:\"{$teamCounterClaimId}\",point:\"\"}}}})");
    redirect("./admin-battle-query.php?id=".$res["id_list"][0]);
}

小程序部分代碼：

//./小程序部分/Bam1/client/src/pages/schedule/schedule.js
componentWillMount () {
    let {env} = this.$router.params;
    Taro.setNavigationBarTitle({title:this.$router.params.cName});
    Taro.setStorageSync("env",env);
    let p = this;
    let skpD = 0;
    Taro.cloud.database({env:"factory-1"}).collection("other").where({
        env: Taro.getStorageSync("env"),
        isSkpD : true
    }).get({
        success: res1 => {
        skpD = res1.data[0].skpD;
        Taro.cloud.database({env:"factory-1"}).collection("battle").where({env: Taro.getStorageSync("env")}).skip(skpD).limit(12).get({
            success:function (res) {
            let idL = p.state.idList;
            res.data.map((item,index)=>{
                idL.push(item._id);
            });
            p.setState({
                idList: idL
            })
...
}

備註：

小程序部分，./Wechat Mini Program/Bam1/client/src/pages/schedule/schedule.js這部分代碼主要是調用微信雲開發的相關函數獲取比賽 ID 列表。
在這個文件外，./Wechat Mini Program/Bam1/client/src/components/battle/battle.js 是每一個日程 card 的組件。通過 schedule 文件向內傳入 ID 參數，在 battle component 內獲取數據。
這裏存在一個並不合理的獲取數據方式。我後來思考，在主界面一次性獲取所有數據後，將數據交由 battle component 渲染應該可以得到更高的性能。但是當時時間有限，就沒有修改。

解決計時器簡陋不美觀

其次，計時器的不美觀問題，傳統計時器如圖：

圖：傳統計時器

顯然，這種計時器與任何現代的設計思維都背道而馳，完全無美感可言。我找朋友爲我設計了計時器的頁面，並利用 HTML + JavaScript 實現其功能。計時器展示如圖：

圖：計時器展示

圖：計時器圖片展示

JS 的主要實現部分在 ./web/admin-battle-add.php

該計時器主要實現瞭如下功能：

辯手姓名、圖片展示
鍵盤操控
自定義環節

由於使用 HTML 開發，它有相比 exe 的更高跨平臺能力。

解決統計票數問題

同時，響應無紙化潮流，我還設計了無紙化提交分數的裁判系統。它的另一個好處是避免了人工計算分數，防止人爲誤差的出現 + 計算分數的等待。

文件在： ./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()");

覆盤數據獲取更容易

個人辯力提升系統也是本系統的另一個亮點。在傳統賽事中，辯手對自己的表現只能以輸贏來衡量，很難量化出一個標準，往往會拖慢對個人的提升。

但是在最普遍的三輪投票制中，有一輪即分數票，評委會根據選手的表現給出對應的分數。在傳統賽事裏，因爲統計麻煩，所以往往不會將這個分數反饋給辯手。這浪費了一個很重要的資源。所以此係統利用評委在雲上的分數，將每個辯手的分數落實到每個辯手身上，這樣可以直觀量化出辯手的水平，爲辯手的進一步提升提供幫助。

圖：個人辯力提升系統

裁判遠程視頻

最後，目前在辯論賽上普遍存在一個問題：缺少優質裁判資源。倒不是說優質裁判特別特別少，而是請優質裁判所需要的高昂的食宿、交通費用往往給辯論組委會帶來很大的經濟困難。

故利用 Agora聲網公司 提供的視頻會議SDK開發了遠程視頻裁決系統。

在前期開發中，其實並沒有非常多的實際視頻通話使用需求，聲網提供的開發者免費時長（每月10000分鐘免費），爲我作爲一個大學生的開發提供了很大便利。同時，聲網便利的SDK及其文檔介紹使我很快就將服務接入了已有系統，整體開發體驗非常好。得益於聲網的優質服務，在幾次測試中，視頻會議的穩定性非常之高，完全滿足了使用需求。

圖：遠程視頻裁決系統

文字直播：

        $("#send").click(function () {
            if(channel === null) {
                showOnP("未加入頻道，請登錄。")
                return;
            }
            channel.sendMessage({ text: $("#text").val() }).then(() => {
                showOnP("直播發送："+$("#text").val());
            /* 頻道消息發送成功的處理邏輯 */
          }).catch(error => {
                showOnP("直播發送失敗："+$("#text").val());
                showOnP(error)
            /* 頻道消息發送失敗的處理邏輯 */
          });
        })
        client.on('ChannelMessage', ({ text }, senderId) => { // text 爲收到的頻道消息文本，senderId 爲發送方的 User ID
            console.log(text);
            /* 收到頻道消息的處理邏輯 */
            showOnP("直播服務器收到信息："+text+"，直播員："+senderId);
        });

接入RTC視頻Channel：

  rtc.client.init(option.appID, function () {
        console.log("init success");
        rtc.client.join(option.token ? option.token : null, option.channel, option.uid ? +option.uid : null, function (uid) {
          Toast.notice("join channel: " + option.channel + " success, uid: " + uid);
          console.log("join channel: " + option.channel + " success, uid: " + uid);
          rtc.joined = true;
          rtc.params.uid = uid;
          // create local stream
          rtc.localStream = AgoraRTC.createStream({
            streamID: rtc.params.uid,
            audio: true,
            video: true,
            screen: false,
            microphoneId: option.microphoneId,
            cameraId: option.cameraId
          })
          // init local stream
          rtc.localStream.init(function () {
          console.log("init local stream success");
          // play stream with html element id "local_stream"
          rtc.localStream.play("local_stream")
          // publish local stream
          publish(rtc);
          }, function (err)  {
            Toast.error("stream init failed, please open console see more detail")
            console.error("init local stream failed ", err);
          })
        }, function(err) {
          Toast.error("client join failed, please open console see more detail")
          console.error("client join failed", err)
        })
      }, (err) => {
        Toast.error("client init failed, please open console see more detail")
        console.error(err);
      });
    }