0 前言

随着经济全球化的浪潮，越来越多的国家参与到国际分工当中。伴随而来的是多元文化及绚烂民族的交织与融合。从我国的青少年教育部署及安排来看，英语作为全世界适用性最广泛的语言得到了极大的重视，在我国的教育系统中占据了较大的比重。而随着十三五、十四五及改革开放的大力支持下，越来越多国家的企业和学生来到中国发展，中文学习对于企业职员和广大学生群体来说非常的迫切与重要。

1 应用场景

1.1 项目介绍

本次参赛作品小程序是一种面向多语种多语言的学习环境，用户不仅可以通过小程序来锻炼和学习自己的口语水平，同时还能直观的看到自己的分数，通过对分数的分析，能够直观的感受到学习给自身带来的变化。同时，在目前网络教学的时代，它是在线的口语教学平台。用户能够有效的利用碎片时间，锻炼自身的口语。

“倾听者”综合型语音评价系统是一个智能的口语评测系统，该小程序针对多种场景应用了语音评测功能，支持单词，句子等多种模式，支持发音“准确度”（GOP），“流利度”，“完整度”，重音准确度等全方位打分机制，专家打分相似度95%以上。能够有效判别用户的语言水平，及时保存用户的“完整度”，“流利度”，“精确度”等语音识别的重要指标，有助于后续对于学生的发音问题进行分析和纠正。

1.2 产品特色

• 参赛作品运用多种技术，不但利用了微信小程序灵活的特点，将核心功能部署在小程序端，还利用了Web服务器，搭建了一套完整的教学管理系统。
• 参赛作品运用口语评测系统，将过去由于只能依赖专业教师进行的主观评估，改进为利用小程序评估用户的发音准确度（GOP），流利度，完整度，重音准确度等发音要素。支持从儿童到成人全年龄覆盖的语音评测，支持单词，句子等多种模式，支持全方位打分机制。和专家评测相比，评分相似度在95%以上。
• 参赛作品采用远程数据库管理技术，将用户的分数信息进行评估及保存，使教师能够随时管理学生的全方面信息，使得该系统在应用于教学场景也能够拥有较好的可用性。
• 参赛作品采用云开发环境技术，充分发挥了云函数、云存储和云数据库的各种优势，加速了小程序的开发进度，同时具备良好的传输性能。
• 参赛作品采用全机型页面适配技术，面对不同用户的多种设备，能够自适应的改变页面各主体的尺寸，从而使得全平台用户能够拥有良好的使用体验。
• 参赛作品采用多语言界面，不但使得母语为汉语的用户能够进行英语口语的评测，也让母语不是汉语的用户在体验汉语博大精深的同时，学习到汉语。



2 目标用户

• 初高中及高校内的学生用户是该产品的主要用户，它让一个只要拥有一款手机的用户能够体验到学习英语口语的便利。
• 高校内的留学生也是保持良好软件生态的一员，它解决了留学生学习汉语口语的尴尬现状，让留学生能够有一个平台体验到学习汉语的乐趣。
• 教师用户也是该产品的主要用户，教师通过网页端发布新的学习内容，使得小程序端的内容有所更新，同时得到学生们的各种反馈，将语料有针对性的布置发放。
• 参赛小程序还提供了游客的体验登录入口，通过选择体验的难度，用户能够很轻松地体验该程序的各项功能。

3 实现思路

3.1 腾讯云服务器部署的小程序

本次比赛的重点，学生端采用数据传输，远程的语音播放，远程数据库访问、读取，文件传输，json数据串解析，语音识别，语音测评，音素判别等技术，实现了语音评测模型的应用。过去由于只能依赖专业教师听后进行主观评估，成本高，学习时间也难以保证。本次小程序针对此场景应用了语音评测功能，支持单词，句子等多种模式，支持发音“准确度”（GOP），“流利度”，“完整度”，重音准确度等全方位打分机制，专家打分相似度95%以上。能够有效判别用户的语言水平，及时保存用户的“完整度”，“流利度”，“精确度”等语音识别的重要指标，有助于后续对于学生的发音问题进行分析和纠正。

//页面的初始化  
onLoad: function (options) {
    this.setData({
      id: app.globalData.id,
      practiceNumber: app.globalData.practiceNumber,
    })

    //打印账号和密码
    console.log('账号为: ', this.data.id);
    
    //发起服务器响应，向服务器端的get_login.php发送userToserver，passwordToserver，服务器收到后进行匹配，若正确返回一段文字记录
    var that = this;
    wx.request({

      //服务器路径，此处模糊化处理
      url: 'https://www.xxxxxxxxx/get_test.php',

      //get方法
      method: 'GET',

      //传输的变量
      data: {
        userToserver: this.data.id,
      },
      
      header: {
        'content-Type': 'application/json'
      },

      //若响应成功，打印一段从服务器传来的字符串
      success(res) {
        app.globalData.content = res.data['0']['content'];
        app.globalData.voiceId = res.data['0']['voiceId'];
        app.globalData.practiceNumber = res.data['0']['practiceNumber'];
        app.globalData.voiceName = res.data['0']['voiceName'];
        
        that.setData({
          postList: res.data,
        });
      }
    });

    app.globalData.manager.onSuccess((res) => {
      this.setData({
        //将分数转化为100分制，保留两位小数
        PronAccuracy: (res.PronAccuracy).toFixed(2),
        PronFluency: (res.PronFluency * 100).toFixed(2),
        PronCompletion: (res.PronCompletion * 100).toFixed(2),
        practiceNumber: this.data.practiceNumber - 1,

      })

      var that = this;
      wx.request({
        //服务器路径，此处模糊化处理
        url: 'https://www.xxxxxxxx/get_score.php',

        //get方法
        method: 'GET',

        //传输的变量，分数传入服务器进行录入
        data: {
          userToserver: this.data.id,
          accToserver: this.data.PronAccuracy,
          fluToserver: this.data.PronFluency,
          comToserver: this.data.PronCompletion,
        },
       
        header: {
          'content-Type': 'application/json'
        },
        success(res) {
          console.log(res.data);
        }
      })
    });

    app.globalData.manager.onStop(() => {
      this.setData({
        btnText: '开始录制'
      })
    })

    app.globalData.manager.onStart(() => {
      this.setData({
        resps: [],
        btnText: '录制中'
      })
    })

    app.globalData.manager.onResponse((res) => {
      let array = this.data.resps
      array.push(JSON.stringify(res))
      this.setData({ resps: array })
    })

    app.globalData.manager.onError((res) => {
      console.log(res)
    })
  },
//后续操作交由后端处理

3.2 云开发服务部署的小程序

本次参赛作品的特色，运用服务器和云开发两种部署方式完成相同的功能，利用到了云开发所涉及的各种技术，包含云存储、云函数、云数据库等完成了一系列功能，采用数据传输，远程的语音播放，远程数据库访问、读取，文件传输，json数据串解析，语音识别，语音测评，音素判别等技术，实现了语音评测模型的应用。

//页面的初始化
onLoad: function (options) {
    var that = this;
    this.setData({
      id: app.globalData.id,
    })

    console.log('传入云函数的账号为: ', this.data.id);
    that.getServerContent(this.data.id);

    app.globalData.manager.onSuccess((res) => {
      this.setData({
        PronAccuracy: (res.PronAccuracy).toFixed(2),
        PronFluency: (res.PronFluency * 100).toFixed(2),
        PronCompletion: (res.PronCompletion * 100).toFixed(2),
        practiceNumber: this.data.practiceNumber - 1,

      })
      //记录三次成绩，将成绩传输至云数据库
      if(app.globalData.practiceNumber > 0){
        that.toServerFulfillment(this.data.id); 
        that.toServerCount(this.data.id); 
      }
            
    });

    app.globalData.manager.onStop(() => {
      this.setData({
        btnText: 'Start Recording'
      })
    })

    app.globalData.manager.onStart(() => {
      this.setData({
        resps: [],
        btnText: 'Recording'
      })
    })

    app.globalData.manager.onResponse((res) => {
      let array = this.data.resps
      array.push(JSON.stringify(res))
      this.setData({ resps: array })
    })

    app.globalData.manager.onError((res) => {
      console.log(res)
    })  

  },//后续操作在本地由云函数执行

 //向小程序云发送字段，返回content
  getServerContent: function (e) {
    var that = this;
    wx.cloud.callFunction({
      //调用云函数名
      name: 'getContent',
      // 传给云函数的参数
      data: {
        id:app.globalData.id
      },
      success: function(res) {
        //对返回的参数进行全域赋值，若要限制在页面中的数据，需要分配给本页内的data
        app.globalData.planId = res.result.data.list[0].planId;
        app.globalData.corpusId = res.result.data.list[0].makeplan[0].corpusId;
        app.globalData.voiceId = res.result.data.list[0].corpus[0].voiceId;
        app.globalData.content = res.result.data.list[0].corpus[0].content;
        app.globalData.practiceNumber = res.result.data.list[0].practiceNo;
        that.setData({
          content: res.result.data.list[0].corpus[0].content,
          practiceNumber:res.result.data.list[0].practiceNo,
        })
      },
      fail: console.error
    })
  },

3.3 教师端应用

本次参赛作品教师端采用部署在腾讯云服务器的PHP网页架构，辅以数据库进行数据管理和操作，使用域名解析技术及https协议申请的CA证书部署，确保链接的安全性和适用性。网页部署在PHP为基础的服务器上，确保执行的效率性以及代码维护的简易性。教师主要提供了教学所需的文本信息及音频文件进行上传以及发布，学生能够在小程序接受相应的练习，有效的进行交互。

教师端登陆网址：https://www.sdjuei.cn/

下方百度云链接中包含教师的体验账号，请评委下载后登录使用！

图1 教师端的网页登录界面

3.4 腾讯云服务器

本次服务器的搭建采用了腾讯云的云服务器。通过远程登陆操作，域名解析服务，https服务，部署了一台24*7小时全天候的高效率服务器，有效的解决了服务器部署困难，高效率，全天候，易管理性，性能保障等各种问题。通过此种架构，教师能够有效的进行学生数据的管理，修改和查看。学生也能简单地使用小程序访问每周的测试内容，并将成绩存储在数据库内。通过使用服务器也能加强数据的安全性、执行效能及存储性能。

图2 参赛作品需求设计阶段所采用的E-R模型

图3 参赛作品后端数据库所采用的E-R模型 (截图至MySql可视化软件Nevicate，已成功运行实例)

图4 示例user表和fulfillment表的实体、主键和外键约束

图5 fulfillment表实际采集的数据

3.5 云开发环境

本次参赛作品同样融入了云开发环境的各种优秀功能以体现其在实际项目开发中的作用。云开发环境在效率，成本，生态，运维和速度方面和传统开发相比都有所优势。最主要的是前端一站式解决的方法，能够使得小程序能够快速发布，而不用像传统开发那样采用前后端联调，从而上线流程长。云开发所具备的功能能够满足一个完整的服务器架构的所有核心要素，分别是云储存、云函数、云数据库，大大方便了开发者进行开发。

图6 云数据库，云存储以及云函数的部署及运用

4 架构图

服务器采用域名解析技术及https协议申请的CA证书，已部署完成

图7 参赛作品架构示意图 (服务器采用域名解析技术及https协议申请的CA证书，已部署完成)

图8 微信小程序所采用的技术栈

图9 服务器所采用的技术栈

图10 云开发所采用的技术栈

5 效果截图

学生在小程序端登陆后完成测试，信息自动传送至服务器DB

下方百度云链接中包含学生的体验账号，请评委下载后登录使用！

教师根据需要能够在网页端完成【创建班级】、【管理班级】、【添加学生】、【管理学生信息】、【上传语料】、【制定教学计划】、【查看学生成绩】等功能，有效管理学生的信息，实时的掌控学生测试的完成情况。

图11 效果截图

图12 服务器获取录音文件及数据库录入的情况

6 代码链接

https://github.com/CodeShockWave/Wechat-Mini-Program

7 作品体验二维码

图13 二维码图片

测试账号，请评委登陆后使用

8 团队/作者简介

团队：驭键师

作者：潘晨杰——高校在读计算机系学生一名，欢迎交流！

9 用户手册下载使用

制作了PDF版本的用户手册，包含更详尽的操作流程和项目信息，请评委下载后使用！

下方百度云链接中包含教师及学生的体验账号，请评委下载后登录使用！

链接:https://pan.baidu.com/s/15f2OCNoIXVA95uvM-MMDFg 提取码:1j3g

以下为使用手册部分截图：

图14 使用手册部分截图

10 演示视频链接

链接：https://v.qq.com/x/page/g3153gt1nxu.html