With reference to this code, debate can also be moved Online

Are you familiar with debate? If I'm not familiar with it, I always read it? We want to talk about the future of the debate.

Say "the future", maybe the same applies now. Debate is one of the many offline activities that cannot be carried out before the epidemic has been lifted. But someone has moved the scene from offline to online.

We are one of the top three teams of RTC innovation programming challenge in 2019. The "bamboo of debate" team has realized a set of full-featured debate system, which can time, online debate, referee video comment, and count votes. Moreover, it has been used in many debate competitions. So let's share the original intention of the following works and the realization of the core functions:

Project introduction

This system is specially developed to solve the problems of ugly UI of traditional debate games, the separation of systems, and various offline costs. The whole system includes:

  • Customizable event timer
  • Schedule, judges and debaters management backstage
  • A small program for schedule view and paperless submission of scores
  • The system of improving the individual's performance of instant point-to-point feedback after competition
  • Video conferencing part of remote adjudication

Initial project

As a college student, we often hold various debate competitions in universities, but in the current debate competitions, there are five major problems for a long time, as shown in the figure: image.png

  • Schedule view is not intuitive
  • Simple timers
  • Counting votes is troublesome and not environmentally friendly
  • It is difficult to obtain the data of the second disk
  • Lack of high-quality referee resources

In addition to the above problems, we also find that the current debate competition is very limited by the limitations of the venue. Even two debate teams in the same school have to solve the problems of applying for classrooms, inviting judges, promoting and attracting audiences, not to mention the competition between two schools, two cities or even two national debate teams. So I also want to move the debate contest to the online as a whole, just in touch with the hacksong contest of Agora. I know that the SDK has a free quota of 10000 minutes per month, and I also see that the language framework and SDK integration documents it supports are very rich. So I want to participate in the contest and make a work, which can help solve related problems and improve my technical level.

Solve the problem that the schedule is not intuitive

Scheduling has always been a problem. In traditional events, schedule display is usually presented in the form of sending PDF. When participants and spectators want to view the schedule, they often need to [open QQ - > enter the event group - > Click to open the group file - > Open PDF - > manually find the schedule of the corresponding date].

Even if the above steps are completed, the schedule file is often a PDF file with small size, complex information and non intuitive. Finding a schedule is cumbersome and uncomfortable. In order to let participants and spectators see the schedule more intuitively, this page is set in the applet.

The data storage uses wechat cloud development, and designs the back page of the Web side, and uses the API provided by wechat to unify the data of the applet side and the Web side to add the schedule on the Web side.

Web side data sending part code:

//./web/admin-battle-add.php
//Here I call my own wechat cloud development simple SDK, which can be found in the source code. / web part / lib/WeChat.php. Specific information can be found in the later part of this article.
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]);
}
Copy code

Part code of applet:

//. / applet section / 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
            })
...
}
Copy code

Remarks:

  • In the small program part,. / Wechat Mini Program/Bam1/client/src/pages/schedule/schedule.js is mainly to call related functions developed by wechat cloud to obtain the list of game ID s.

  • In addition to this file,. / Wechat Mini Program/Bam1/client/src/components/battle/battle.js is the component of each schedule card. The ID parameter is passed in through the schedule file to get the data in the battle component.

  • There is an unreasonable way to get data. Later, I thought that after the main interface gets all the data at once, the data should be rendered by the battle component to get higher performance. But at that time, time was limited and there was no change.

Solve the problem of simple timers

Secondly, the aesthetic problems of timers. The traditional timers are as follows:

Obviously, this kind of timer runs counter to any modern design thinking and has no aesthetic feeling at all. I found a friend to design a timer page for me, and use HTML + JavaScript to achieve its functions. The timer is shown as follows:

The main implementation of JS is in. / web/admin-battle-add.php

The timer mainly realizes the following functions:

  • Name and picture display of debater
  • Keyboard manipulation
  • Because of using HTML to develop the custom link, it has a higher cross platform ability than exe.

Solve the problem of counting votes

At the same time, in response to the trend of paperless, I also designed a referee system of paperless submission of scores. Another advantage of it is that it avoids the manual calculation of score, and prevents the occurrence of human error + the waiting of calculation score. The file is in. / Wechat Mini Program/Bam1/client/src/pages/user/judge.js

The link of the referee interface is synchronized with the timer.

In order to prevent data loss, Taro.setStorageSync() is also used to store the data into temporary data after each write. Similarly, when all writes are completed, wechat cloud development is used to submit to the server.

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

Copy code

It's easier to get the data from the disk

Another highlight of this system is the personal argument promotion system. In traditional competitions, debaters' performance can only be measured by winning or losing. It is difficult to quantify a standard, which often slows down the improvement of individuals.

But in the most common three round voting system, there is a round of fractional votes, and the jury will give corresponding scores according to the performance of the contestants. In traditional competitions, because of the trouble of statistics, the score is often not fed back to the debater. This wastes a very important resource. Therefore, the system uses the scores of judges in the cloud to implement the scores of each debater to each debater, which can directly quantify the level of the debater and provide help for the further improvement of the debater.

Referee remote video

Finally, at present, there is a common problem in the debate: the lack of high-quality referee resources. It is not that there are very few high-quality referees, but the high cost of accommodation and transportation often brings great economic difficulties to the organizing committee. Therefore, a remote video decision system is developed by using the video conference SDK provided by Agora sound network company.

In the early stage of development, there is not a lot of actual demand for the use of video calls. The free duration (10000 minutes per month) provided by the voice network for developers provides great convenience for my development as a college student. At the same time, the sound network convenient SDK and its document introduction enable me to quickly connect the service to the existing system, and the overall development experience is very good. Thanks to the excellent service of the sound network, in several tests, the stability of the video conference is very high, which fully meets the use requirements.

Live text:

        $("#send").click(function () {
            if(channel === null) {
                showOnP("Channel not joined, please sign in.")
                return;
            }
            channel.sendMessage({ text: $("#text").val() }).then(() => {
                showOnP("Live delivery:"+$("#text").val());
            /* Processing logic of channel message sending success */
          }).catch(error => {
                showOnP("Failed to send live broadcast:"+$("#text").val());
                showOnP(error)
            /* Processing logic of channel message sending failure */
          });
        })
        client.on('ChannelMessage', ({ text }, senderId) => { // Text is the received channel message text and senderId is the sender's User ID
            console.log(text);
            /* Processing logic of receiving channel message */
            showOnP("Message received by live server:"+text+"´╝îLive broadcasters:"+senderId);
        });
Copy code

Access to RTC video 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);
      });
    }
Copy code

In addition, in addition to the parts shown above, the system also has a complete data entry (refer to the event information entry), debater information and referee information entry system. It's not much to show here. At present, the system has been applied to the actual environment for many times, supporting the development of many debate events, welcome to use, also welcome to participate in the development and maintenance of the project.

Technology involved

  • Applet: Taro, wechat cloud development

  • Web: material pro (style), PHP, Agora SDK

Open source and more

  • Yu Zhuohao: Chongqing University is a freshman. He likes to learn new technology. When he is interested, he writes some small projects he likes. Hope to learn more useful knowledge in limited time~
  • Personal Github: github.com/pkmq24
  • Open source address: github.com/AgoraIO-Com...

RTC 2020 programming challenge spring competition has started to register! From March 10 to April 21, the competition will be signed up, organized and developed. From April 22 to April 24, the work will be submitted and the prize will be awarded on April 25. The whole process will be online. This competition has prepared rich awards, and the winners have a better chance to enter the fast track of application of Agora, Let's sign up!

Tags: SDK PHP network github

Posted on Fri, 20 Mar 2020 14:40:25 -0400 by phpprog