[开发实录]小爱同学课程表 - 强智系统与HEU教务系统的开发

不得不说，小爱课程表这个功能是十分好用的。特别是每天在室友面前喊“小爱同学，明天有什么课”，结合MIUI的AI助理技术，能让室友体会柠檬的酸味(doge)。

然而某些学校可能暂时没有适配该系统导致导入课程表失败，这不要紧，只需要一点点JS知识以及一点点jQuery知识，加上三四天，你也可以搞出自己学校的课程表适配（当然某些奇形怪状的课程表除外）

 

声明：本项目适配 湖南强智科技教务系统

一、项目地址/参考

　　项目位于仓库：https://github.com/Holit/HEU_edusys_miui

　　项目里已经包含了网页文件，是我的课程表，可以在web_ref内找到

　　官方文档：https://ldtu0m3md0.feishu.cn/docs/doccnhZPl8KnswEthRXUz8ivnhb

二、详细教程

　　0x00 开始工作

　　　　配置Chrome开发环境

　　　　1. 按照要求下载Chrome插件：https://cnbj1.fds.api.xiaomi.com/aife/AISchedule/AISchedule.zip

　　　　2. 下载Chrome，打开链接 chrome://extensions/ ，打开开发者模式，导入AISchedule DevTools文件夹。

　　　　如果成功可以看到

　　　　准备开始开发

　　　　1. 定向到教务网站系统，笔者这里以哈尔滨工程大学(下称HEU)本科生教务系统为例

　　　　

 

 

 　　　　2.在此页右键，打开Chrome检查页。亦可以按下Ctrl+Shift+I启动检查页。之后定位到AISchedule标签

 

 

 

 

 

 　　　　2. 点击右上角进行登录，此处登陆的是自己的小米账号，便于以后的E2E测试和项目保存、同步

 

 

 　　　　3.成功登录之后关闭检查页再打开，就可以看到左侧的开发版面已经更新。如果是第一次创建本校的课程表端口，左侧可能是空的。

　　　　　　点击左侧“添加”，弹出“适配项目”窗口

 

 

 　　　　按照要求填写相关内容，注意这里的教务系统url最好填成外网URL(即非ip地址形式)

　　　　4.新建后可以看到

 

 

 　　　　点击这个选项卡内部，浏览器自动切换到Sources选项卡。此时开发环境配置结束

　　0x01 准备Provider

　　　　Provider的作用在于从指定的教务系统url获取页面文档并传递给Praser。

　　　　为了适配HEU的教务系统，我们使用GET方法。GET是一个HTTP方法，目的是从指定的资源请求数据。

此处我的Provider代码如下

function scheduleHtmlProvider(iframeContent = "", frameContent = "", dom = document) {
  let http = new XMLHttpRequest()
  http.open('GET', '/jsxsd/xskb/xskb_list.do?Ves632DSdyV=NEW_XSD_PYGL', false)
  http.send()
  return http.responseText
}

　　　　代码说明：

　　　　　　函数体

function scheduleHtmlProvider(iframeContent = "", frameContent = "", dom = document) {
}

　　　　　　是默认函数体，在官方文档中给出的示例为

function scheduleHtmlProvider(iframeContent = "", frameContent = "", dom = document) {
    //除函数名外都可编辑
    //以下为示例，您可以完全重写或在此基础上更改

    const ifrs = dom.getElementsByTagName("iframe");
    const frs = dom.getElementsByTagName("frame");

    if (ifrs.length) {
        for (let i = 0; i < ifrs.length; i++) {
            const dom = ifrs[i].contentWindow.document;
            iframeContent += scheduleHtmlProvider(iframeContent, frameContent, dom);
        }
    }
    if (frs.length) {
        for (let i = 0; i < frs.length; i++) {
            const dom = frs[i].contentDocument.body.parentElement;
            frameContent += scheduleHtmlProvider(iframeContent, frameContent, dom);
        }
    }
    if (!ifrs.length && !frs.length) {
        return dom.querySelector('body').outerHTML
    }
    return dom.getElementsByTagName('html')[0].innerHTML + iframeContent + frameContent
}

　　　　要查看获取的结果是不是正确，需要在Praser里查看是不是传递了正确的参数。

　　0x2 编写Praser

　　　　Praser主要工作在于解析Provider传入的参数并将该解析结果传出。该函数接受html作为参数，传出一个list

　　　　官方docs给出的示例为

function scheduleHtmlParser(html) {
    //除函数名外都可编辑
    //传入的参数为上一步函数获取到的html
    //可使用正则匹配
    //可使用解析dom匹配，工具内置了$，跟jquery使用方法一样，直接用就可以了，参考：https://juejin.im/post/5ea131f76fb9a03c8122d6b9
    //以下为示例，您可以完全重写或在此基础上更改
    let result = []
    let bbb = $('#table1 .timetable_con')
        for (let u = 0; u < bbb.length; u++) {
            let re = {
                sections: [],
                weeks: []
            }
            let aaa = $(bbb[u]).find('span')
                let week = $(bbb[u]).parent('td')[0].attribs.id
                if (week) {
                    re.day = week.split('-')[0]
                }
                for (let i = 0; i < aaa.length; i++) {

                    if (aaa[i].attribs.title == '上课地点') {

                        for (let j = 0; j < $(aaa[i]).next()[0].children.length; j++) {
                            re.position = $(aaa[i]).next()[0].children[j].data
                        }
                    }
                    if (aaa[i].attribs.title == '节/周') {

                        for (let j = 0; j < $(aaa[i]).next()[0].children.length; j++) {

                            let lesson = $(aaa[i]).next()[0].children[j].data
                                for (let a = Number(lesson.split(')')[0].split('(')[1].split('-')[0]); a < Number(lesson.split(')')[0].split('(')[1].split('-')[1].split('节')[0]) + 1; a++) {

                                    re.sections.push({
                                        section: a
                                    })
                                }
                                for (let a = Number(lesson.split(')')[1].split('-')[0]); a < Number(lesson.split(')')[1].split('-')[1].split('周')[0]) + 1; a++) {

                                    re.weeks.push(a)
                                }
                        }
                    }

                    if (aaa[i].attribs.title == '教师') {

                        for (let j = 0; j < $(aaa[i]).next()[0].children.length; j++) {
                            re.teacher = $(aaa[i]).next()[0].children[j].data
                        }
                    }

                    if (aaa[i].attribs.class == 'title') {

                        for (let j = 0; j < $(aaa[i]).children()[0].children.length; j++) {
                            re.name = $(aaa[i]).children()[0].children[j].data

                        }
                    }

                }
                result.push(re)
        }
        console.log(result)

        return {
        courseInfos: result
    }
}

　　　　我们发现这个示例并不能很好的适配我们的教务系统，因此我们开始从零编写这个Praser。

　　1x00 分析文档结构

　　　　TODO：一步步筛选Html的内容，并让内容最终精简到我们所需要的文本。

　　　　这里我们使用jQuery，当然你也可以使用正则表达式进行匹配

　　　　这里我们分析Elements选项卡，在课程内容上右键

 

 

 　　　　展开对应元素的html设计

 

 

 　　　　Chrome已经帮我们定位了这个元素的div，我们展开慢慢查询

 

 

 　　　　观察元素，可以发现这个html中我们想获取的内容都有如下代码环绕：（删去了</div>等结构）

<table id="kbtable" border="1" width="100%" cellspacing="0" cellpadding="0" class="Nsb_r_list Nsb_table">
<div id="5180478CC0C746CC94534AF06163E808-3-2" style="" class="kbcontent">线性代数与解析几何A<br><font title="老师">廉春波</font><br><font title="周次">4-18(周)</font><br><font title="节次">[0102节]</font><br><font title="教室">21B 502中</font><br></div>

　　　　因此，我们所希望定位的内容位于一个table里，这个table的id是kbtable。这个table的内部存在一个class为kbcontent的div。

　　　　此时我们要应用jQuery大法获取这段内容。

　　1x01 jQuery介绍

　　　　1.jQuery 选择器

　　　　　　jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

　　　　　　jQuery 中所有选择器都以美元符号开头：$()。

　　　　2.#id 选择器

　　　　　　jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

　　　　　　页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

　　　　　　通过 id 选取元素语法如下：

$("#test")

　　　　3..class 选择器

　　　　　　jQuery 类选择器可以通过指定的 class 查找元素。

　　　　　　语法如下：

$(".test")

　　　　4.更多语法

$("*")    //选取所有元素    
$(this)    //选取当前 HTML 元素    
$("p.intro")    //选取 class 为 intro 的 <p> 元素    
$("p:first")    //选取第一个 <p> 元素    
$("ul li:first")    //选取第一个 <ul> 元素的第一个 <li> 元素    
$("ul li:first-child")    //选取每个 <ul> 元素的第一个 <li> 元素    
$("[href]")    //选取带有 href 属性的元素    
$("a[target='_blank']")    //选取所有 target 属性值等于 "_blank" 的 <a> 元素    
$("a[target!='_blank']")    //选取所有 target 属性值不等于 "_blank" 的 <a> 元素    
$(":button")    //选取所有 type="button" 的 <input> 元素 和 <button> 元素    
$("tr:even")    //选取偶数位置的 <tr> 元素    
$("tr:odd")    //选取奇数位置的 <tr> 元素    

　　　　1x02 正则表达式语法简介

　　　　　　由于本项目不使用正则表达式，因此我不会详细讲解这部分。这段内容留给您参考

　　　　　　正则表达式测试：https://tool.oschina.net/regex/

　　　　　　语法：http://c.biancheng.net/view/5632.html

　　　　1x03 使用jQuery获取元素

　　　　　　我们分析了我们想要的东西的父节点id为kbtable，class为kbcontent。因此我们写出下述jQuery代码

    let $raw = $('#kbtable .kbcontent').toArray();

　　　　　　为了便于之后我查看和引用变量，我在所有jQuery获取的变量前面都加上了$以标示它的来源是jQuery。

　　　　　　此处加不加.toArray()都可以，因为返回的就是一个Object数组，它长这样

 

 

 

 　　　　ps:如果要进行运行时调试，你可以使用console.info()。鉴于console.log()在移动端不可用，我建议一楼都使用info，发布时再去掉。当然去不去掉没关系。

　　　　我们看到，这个数组刚好返回了35个值。这个值满足5*7=35，也就是说7天，每天5节课都被包含在这个list内部。我们展开一个object查看

 

 

 　　　　　很不幸这个元素内没有符合要求的信息。但这并不代表我们错了，而是这节本来就没课。

　　　　如果我们展开第2个元素：

 

 

 　　　　熟悉的线代老师名字出现了！（逃

　　　　这里我们分析这个Object就会发现这玩意真是符合哈尔滨风格，一层套一层（没有贬低哈尔滨的意思

　　1x04 分析元素并启动筛选

　　　　接下来就是整个适配系统中的核心部分，即适配这些children。这个时候你就会遇到一堆又一堆的坑。让我们开始吧。

　　　　第一，我们首先要检查我们访问的Object是不是存在，因为如果不存在我们是无法对其进行操作、读取以及获取children的。因此我们加上

    for (index in $raw) {
        data = $raw[index]
        if (data.children != undefined) {
            if (data.children.length == 1) {
                continue;
            }
        }
    }
}

　　　　代码说明：

　　　　我们对$raw的每个元素都检查一边，如果$raw其中的某个Object有children的话，就检查这个children是不是为空。

　　　　如果为空，就说明这节没课。

　　　　第二个坑此时出现了，HEU的课程表有一个奇怪的不知道为什么这样写的东西，也就是

 

 

 

 

 　　　　这一节课相同老师相同时间不同教室？？？？

　　　　实际上这是一节主播课程，也就是一间主播教室，几间不同的录播教室。又由于每节课地点不同，因此每节课上课前班长才会通知具体上课地点。因此我们无法处理这个课程。

　　　　我们添加下述逻辑

            if (data.children.length == 12) {
                name = name + '[待定]';
            }

　　　　这段逻辑是说，如果数据的长度是12的话，说明是这样的录播课，我们便在这节课的课名后面加上一个“待定”来区别。

　　　　...

　　　　经历了各项痛苦的逻辑查询和运行时调试，我们得到下述代码访问所需要的内容

            //please notice these data are from object, therefore please check whether they are existed.
            //for rigorous, please check undefined
            teacher = data.children[2].children[0].data;
            weeks = data.children[4].children[0].data;
            sections = data.children[6].children[0].data;
            position = data.children[8].children[0].data;

　　1x05 文本分析和输出正确的数据格式

　　　　1.数据格式要求

　　　　　　根据官方文档，要求输出下述两个数据：courses和sections，这里先讲courses，sections将在2x00开始讲。

　　　　　　

 

 　　　　　　示例为

示例
{
    "courseInfos": [
      {
        "name": "数学",
        "position": "教学楼1",
        "teacher": "张三",
        "weeks": [
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          10,
          11,
          12,
          13,
          14,
          15,
          16,
          17,
          18,
          19,
          20
        ],
        "day": 3,
        "sections": [
          {
            "section": 2,
            "startTime": "08:00",//可不填
            "endTime": "08:50"//可不填
          }
        ],
      },
      {
        "name": "语文",
        "position": "基础楼",
        "teacher": "荆州",
        "weeks": [
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          10,
          11,
          12,
          13,
          14,
          15,
          16,
          17,
          18,
          19,
          20
        ],
        "day": 2,
        "sections": [
          {
            "section": 2,
            "startTime": "08:00",//可不填
            "endTime": "08:50"//可不填
          },
          {
            "section": 3,
            "startTime": "09:00",//可不填
            "endTime": "09:50"//可不填
          }
        ],
      }
    ],
    "sectionTimes": [
      {
        "section": 1,
        "startTime": "07:00",
        "endTime": "07:50"
      },
      {
        "section": 2,
        "startTime": "08:00",
        "endTime": "08:50"
      },
      {
        "section": 3,
        "startTime": "09:00",
        "endTime": "09:50"
      },
      {
        "section": 4,
        "startTime": "10:10",
        "endTime": "11:00"
      },
      {
        "section": 5,
        "startTime": "11:10",
        "endTime": "12:00"
      },
      {
        "section": 6,
        "startTime": "13:00",
        "endTime": "13:50"
      },
      {
        "section": 7,
        "startTime": "14:00",
        "endTime": "14:50"
      },
      {
        "section": 8,
        "startTime": "15:10",
        "endTime": "16:00"
      },
      {
        "section": 9,
        "startTime": "16:10",
        "endTime": "17:00"
      },
      {
        "section": 10,
        "startTime": "17:10",
        "endTime": "18:00"
      },
      {
        "section": 11,
        "startTime": "18:40",
        "endTime": "19:30"
      },
      {
        "section": 12,
        "startTime": "19:40",
        "endTime": "20:30"
      },
      {
        "section": 13,
        "startTime": "20:40",
        "endTime": "21:30"
      }
    ]
  }

　　　　　　注意这里有个坑：

　　　　　　sections的结构为

"sections": [
          {
            "section": 2,
            "startTime": "08:00",//可不填
            "endTime": "08:50"//可不填
          },
          {
            "section": 3,
            "startTime": "09:00",//可不填
            "endTime": "09:50"//可不填
          }
        ],

　　　　　　也就是说元素sections是一个list，包含了节数信息和课程开始、节数时间信息。不要填成

"sections":{1,2,3}

　　　　　　这是不通过的。

　　　　2.输出正确的数据格式

　　　　　　首先我们要解析文本数据，即“周”和“节次”数据，他们原本是这样的：5-18(周)、[030405节]，我们要搞成上面要求的样子

　　　　　　因此我借鉴了我们学校研究生系统中的一个function：

function _create_array(rangeNum) {
    //rangeNum should be inputed as '7-18' and will output {7,8,9,10,11,12,13,14,15,16,17,18}
    let resultArray = [];
    let begin = rangeNum.split('-')[0];
    let end = rangeNum.split('-')[1];
    for (let i = Number(begin); i <= Number(end); i++) {
        resultArray.push(i);
    }
    return resultArray;
}

　　　　　　这段function将接受一个str作为参数，参数标记为"?-?"。之后输出一个数组，这个数组是参数对应的数组。

　　　　　　例如输入"7-18"，输出{7,8,9,10,11,12,13,14,15,16,17,18}

　　　　　　这样我们就能处理5-18这样的数字了，然而我们发现有些周数是分开的，即，4,5-18。这很简单，我们只需要分割字符串就好。注意，这里要求的传入必须去掉"(周)"，这只需要replace就可以了

　　　　　　最终我们得到函数

function _get_week(data) {
    //weeks data will be inputed as '4,7-18', to handle ,we will split them by ',' and operate seperately.
    let result = [];
    let raw = data.split(',');
    for (i in raw) {

        if (raw[i].indexOf('-') == -1) {
            //create array
            result.push(parseInt(raw[i]));
        } else {
            let begin = raw[i].split('-')[0];
            let end = raw[i].split('-')[1];
            for (let i = parseInt(begin); i <= parseInt(end); i++) {
                result.push(i);
            }
        }
    }
    //sort the array,
    return result.sort(function (a, b) {
        return a - b
    });

}

　　　　　　为了美观，最后我排了个序。

　　　　　　观察节数信息，我们发现"01020304"是主要信息，因此我们把它筛选出来，即replace其他的固定字符得到这样的文本。

　　　　　　我们使用str的索引获取这些节数信息并输出array：

function _get_section(data) {
    //section info will be inputed as '01020304',we will devide them into {01,02,03,04} and then create array.
    let section = []
    let num = 0;
    let i = 0;
    do {
        num = parseInt(data.substr(i, 2));
        //this will push an array such as {section:1},{section:2}...
        section.push({"section":num});
        //jump to next number, such as
        //010203
        //|
        //  |
        i = i + 2;
    } while (i < data.length);
    return section;
}

　　　　3.

　　　　　　综上，我们得到下述数据格式处理代码：

//replace for creating the arry
            weeks=weeks.replace('(周)', '');
            sections = sections.replace('[', '');
            sections = sections.replace('节]', '');
            //correct structure.
            let courseInfo = {
                "name": name,
                "position": position,
                "day": _get_day(index),
                "teacher": teacher,
                "sections":_get_section(sections),
                "weeks": _get_week(weeks)
            };
            courses.push(courseInfo);

　　2x00 sections

　　　　这个就太简单了，复制下述代码改一改就好，这里是按照HEU的军工作息时间搞的

function createSectionTimes() {
    //this is the HEU standard section time.
    //get it on the official website.
    let sectionTimes = [{
            "section": 1,
            "startTime": "08:00",
            "endTime": "08:45"
        }, {
            "section": 2,
            "startTime": "08:50",
            "endTime": "09:35"
        }, {
            "section": 3,
            "startTime": "09:55",
            "endTime": "10:40"
        }, {
            "section": 4,
            "startTime": "10:45",
            "endTime": "11:30"
        }, {
            "section": 5,
            "startTime": "11:35",
            "endTime": "12:20"
        }, {
            "section": 6,
            "startTime": "13:30",
            "endTime": "14:15"
        }, {
            "section": 7,
            "startTime": "14:20",
            "endTime": "15:05"
        }, {
            "section": 8,
            "startTime": "15:25",
            "endTime": "16:10"
        }, {
            "section": 9,
            "startTime": "16:15",
            "endTime": "17:00"
        }, {
            "section": 10,
            "startTime": "17:05",
            "endTime": "17:50"
        }, {
            "section": 11,
            "startTime": "18:30",
            "endTime": "19:15"
        }, {
            "section": 12,
            "startTime": "19:20",
            "endTime": "20:05"
        }, {
            "section": 13,
            "startTime": "20:10",
            "endTime": "20:55"
        }
    ]
    return sectionTimes
}

　　　　3x00 最终成型

　　　　　　经过上面的编写和调试，我们得到下述代码

function scheduleHtmlParser(html) {
    //analyse the element and you will see this.
    /*
    <div id="5180478CC0C746CC94534AF06163E808-3-2" style="" class="kbcontent">
    线性代数与解析几何A<br>
        <font title="老师">廉春波</font><br>
        <font title="周次">4-18(周)</font><br>
        <font title="节次">[0102节]</font><br>
        <font title="教室">21B 502中</font><br>
    </div>

    this is the main entrance.
    */    
    let $raw = $('#kbtable .kbcontent').toArray();
    console.info($raw);
    let courses = [];

    let name = "";
    let teacher = "";
    let weeks = "";
    let sections = "";
    let position = "";

    for (index in $raw) {
        data = $raw[index]
        if (data.children != undefined) {
            if (data.children.length == 1) {
                continue;
            }
            name = data.children[0].data;
            //for courses includes '---------------------' which I dont understand, thier array will be longer than others, therefore we use length to flag them.
            //reminder:courses includes '---------------------' will be only different in the position, and the position is not determined until its going to begin.
            //therefore we use '[待定]' to mark them out.
            if (data.children.length == 12) {
                name = name + '[待定]';
            }

            //please notice these data are from object, therefore please check whether they are existed.
            //for rigorous, please check undefined
            teacher = data.children[2].children[0].data;
            weeks = data.children[4].children[0].data;
            sections = data.children[6].children[0].data;
            position = data.children[8].children[0].data;
            
            //replace for creating the arry
            weeks=weeks.replace('(周)', '');
            sections = sections.replace('[', '');
            sections = sections.replace('节]', '');
            //correct structure.
            let courseInfo = {
                "name": name,
                "position": position,
                "day": _get_day(index),
                "teacher": teacher,
                "sections":_get_section(sections),
                "weeks": _get_week(weeks)
            };
            courses.push(courseInfo);
        }
    }
    //optional: for debug only
    //console.info(courses);
    
    finalResult = {
        "courseInfos": courses,
        "sectionTimes": createSectionTimes()
    };
    return finalResult;
}

　　　　4x00 调试阶段

　　　　　　由于这段代码已经正常工作了，我在调试的时候也就没有遇到什么困难。

　　　　　　你只需要在教务系统页面右键选择"运行函数"然后查看console，如果是

 

　　　　　　那么Chrome就测试通过了。

　　　　4x01 E2E调试

　　　　　　项目写完之后点击“上传”，左侧便会产生一个带版本号的工作空间，这代表在自己的手机上可以进行E2E测试了

 

 　　　　在手机上打开vConsole即可看到相关Console的输出，便于判断错误

　　　　常见错误说明：如果是Unexpected token o... 那么请检查你的数据结构是不是正确传出了。

 

以上

第一次做JS，别打我（逃

---