qt.jpg

宅家无聊,不如学点技术!
1.前言



最近新冠病毒导致的肺炎疫情,很多人都只能宅在家里。为了不让自己那么无聊,给自己找点事情,做一个“疫情数据信息实时监控项目”,去年开始学习的Qt/C++,拿这个小项目练练手吧。当然如果你也和我一样,建议你使用熟悉的编程语言自己实现一下,即学习了知识,又打发了时间。在做之前我先去Github上搜索了一下,看看有没有相关资料,看来已经有很多人在做了:
不过大多都是基于JavaScript或Python的项目,使用Qt/C++平台开发的还没有。博客文章同步:
http://www.wangchaochao.top/2020/02/14/qt-ncov/
2.主要功能


界面也很简单,主要包括实时数据和历史数据的显示,实时疫情动态信息的显示,辟谣信息的展示。数据来自腾讯新闻,UI设计参考了腾讯新闻的界面。
一共使用了两个数据接口,来自腾讯新闻,一个是包括实时数据、历史数据和疫情动态的接口,一个是包含辟谣信息的接口。
功能也很简单:

  • 全国疫情数据实时显示

  • 历史疫情数据趋势折线图显示

  • 各省市和海外疫情数据树形显示

  • 最新疫情新闻动态显示

  • 最新辟谣信息展示

  • 手动和自动更新(每5分钟)


3.获取数据接口


现在,各大网站都发布了自己的实时疫情显示平台,如丁香园、腾讯、新浪、百度、知乎、网易等等,包括个人开发者也开发了一些接口,数据都是来自国家或各地卫健委发布的信息。

  • 丁香园:
    https://ncov.dxy.cn/ncovh5/view/pneumonia

  • 腾讯:
    https://news.qq.com/zt2020/page/feiyan.htm

  • 新浪:
    https://news.sina.cn/zt_d/yiqing0121

  • 百度:
    https://voice.baidu.com/act/newpneumonia/newpneumonia

  • 知乎:
    https://www.zhihu.com/special/19681091

  • 网易:
    https://news.163.com/special/epidemic/



我使用的是腾讯数据源,数据为JSON格式, 也很容易解析。下面我以Chrome浏览器为例,演示如何获取腾讯数据接口的地址。
打开链接之后,按F12,切换到开发者模式。再次刷新网页,切换到Network,按Ctrl+F搜索当前全国确诊的人数:44765,然后回车,可以看到这个数据包含在一个JSON字符串中,而这个字符串是某一个请求地址返回的数据,而这个地址,就是数据的接口地址。
为了证实这个接口是正确的,我们复制这个地址,然后在地址栏输入回车,可以看到返回了一大堆字符串:
说明我们的地址找对了。完整的地址:
https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5&callback=jQuery34109263209025042043_1581518730600&_=1581518730601
其中:

  • callback=jQuery34....00参数是指定的回调函数名,可省略。

  • _=1581518730601是时间戳,可用于查询历史数据,可省略。


时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数。
所以,如果想获取最新数据,以上两个参数可省略:
https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5
如果想获取历史数据,只需要修改时间戳即可,其他网站的接口地址获取方式也大同小异。
这里我们只使用腾讯新闻的接口就够了,保存JSON文件,并格式化处理,可以看到包括的信息:
对于腾讯的这个数据,不得不多说一句,最近几天腾讯的JSON数据更新了好几次:

  • 感染人数键值从string类型改为了int

  • 添加了病死率

  • 添加了湖北内外疫情数据历史

  • 添加了实时动态新闻


JSON数据文件的大小也从最开始的80KB到现在的160KB左右了。
对于谣言信息,腾讯是放在了另外两个接口,一个是查询最新的辟谣信息,一个是获取一条辟谣信息的详细内容。同理,和上面的数据接口地址获取的方法一样,我们可以获取到这两个地址。
查询最新的辟谣信息的地址:
https://vp.fact.qq.com/loadmore?page=0&callback=jQuery34109263209025042043_1581518730600&_=1581518730603
参数和数据接口一样,函数名和时间戳可省略:
https://vp.fact.qq.com/loadmore?page=0

  • page=0表示获取辟谣信息的页数,=0表示最新的辟谣信息,发布时间为今天或者昨天,=1表示发布时间为昨天或前天的,以此类推。


JSON文件格式:
在这个接口里,包含最新的10条辟谣信息,每条辟谣信息中包括标题,发布者,发布时间,图片地址,谣言类型,谣言id等。通过另一个接口,我们可以查询某一条辟谣新闻的详细信息。
如这条辟谣新闻:

  • 标题:阴雨天和大雾天会增加新冠病毒感染风险

  • ID:8be33c500e00257c97419ac24ab59d8f


我们访问这样一个地址:
https://vp.fact.qq.com/miniArtDa ... 5f3772c761e25bb57d7
,就会得到这条谣言新闻的JSON格式详细信息,如下:
这个接口在我们实际开发中并没有使用,而是直接调用浏览器去打开这个地址的网页地址:
https://vp.fact.qq.com/article?id=8be33c500e00257c97419ac24ab59d8f ,不过这个界面是针对手机端的,电脑端的浏览效果并不好:
手机端:
4.Qt实现


主要涉及到的Qt知识如下:

  • QCustomPlot绘图库的使用

  • HTTP协议发送GET请求

  • JSON数据解析

  • 文件的本地保存和读取

  • 文本浏览器使用 HTML模板显示富文本

  • 数据的树形结构展示

  • 基本的信号与槽特性


QCustomplot绘图:
辟谣信息显示:
5.主要难点


整个开发的过程,就是解决一个一个问题的过程,很多控件都是第一次使用,好在资料很多,主要难点如下:

  • QCustomPlot绘图,刻度为文本格式

  • 各省市和海外疫情数据的树形结构显示

  • 点击不同的按钮,切换显示不同的数据折线

  • 鼠标在折线上悬停,显示具体的日期和人数

  • QTextBrower显示富文本,通过自定义HTML模板,实现类似格式化生成HTML的效果。


历史数据折线图显示:
实时疫情新闻显示:
实时辟谣信息显示:
6.打包发布


为了让没有安装Qt环境的用户也能用上我们开发的Qt程序,我们需要对生成的程序文件进行打包和发布,首先使用Qt自带的windeploy filename.exe命令,添加运行这个程序所需要的所有组件,然后使用程序打包软件把这个文件打包成一个setup.exe安装文件,用于在别的电脑上安装,或者是打包成一个绿色版软件,直接双击运行,我使用以下两个软件进行打包。

  • Inno Setup:可以打包成安装软件,可自定义安装信息。

  • Enigma Virtual Box:可以打包成一个exe软件,无需安装,直接双击运行。


7.开源地址


本项目Qt工程所有的代码和安装包下载地址,我都已经开源,如下:

  • 国外GitHub:
    https://github.com/whik/qt_2019_ncov

  • 国内Gitee:
    https://gitee.com/whik/qt_2019_ncov



如果你已经关注了我的公众号(ID:mcu149),可以在后台回复:疫情监控,我会把Qt工程发送给你。
8.总结


总体来说,这个小项目使用到的Qt知识都是基础的,可以适合作为练手项目。还是有很多值得优化的地方:

  • 添加一个窗口,用于显示辟谣新闻的详细信息,增加一个接口

  • 网络不稳定会出现卡死现象

  • JSON字符串不输出到文件,直接保存在QString变量处理

  • 代码优化,部分功能合成一个函数


9.最后


虽然现在疫情有所缓解,但我们还是不要掉以轻心,好好宅家,趁着有时间,不如多陪陪家人,看几本书,看几部经典电影。专业的事交给专业的人去做,而我们只需要做好我们自己应该做的即可。
钟南山:我们已经采取强力的措施,特别是早发现、早隔离,这两条做到了,我们有足够的信心防止大爆发或者重新大爆发。
推荐阅读



  • Qt平台下使用QJson解析和构建JSON字符串

  • Qt实现软件自动更新的一种简单方法

  • Qt小项目之串口助手控制LED

  • 详解EMC测试国家标准GB/T 17626

  • 电路板上的这些标志你都知道是什么含义吗?