小白宅家研究：使用云函数绘制最新疫情图。

疑似、确诊、死亡...不断更新的数字之下，是数千数万人鲜活的生活。小糖提醒大家一定要少出门，戴口罩，勤洗手！出门的话最好使用n95或3m口罩，重要的一点，口罩戴了一定要密封好！

 

 

 

 

想必大家对下面这张疫情图看了好多遍了，不过，自己做一个出来是什么体验？ 下面跟随我一起完成它。（项目出自GitHub，文末“阅读全文”打开项目地址。）

 

先看看效果：

https://service-gryd2q5h-1257646950.bj.apigw.tencentcs.com/release/test

 

 

 

 

若仅仅绘制出这张图，方式多种多样，但是做到数据实时更新，同时图中颜色也随之而变，不是那么容易的。今日所说的腾讯云|云函数项目完美显现各大网站的“疫情”，特此感谢分享源码的大佬！

 

由于此项目涉及计算机专业知识，对于没有使用过下面中间件的小白来说还是有点困难的，如果做过计算机的什么项目，此项目很容易上手。不过，小白也不用怕，只要想干，只要有耐心，就不怕搞不定！

 

准备工作：

1、下载安装nodejs

2、下载安装VS Code

3、注册使用腾讯云

4、了解使用云函数

5、下载程序数据文件

 

什么是云函数呢，是直接在云上运行的一系列操作。对于腾讯云，大家应该都不会陌生，前阵子天天在QQ空间蹦跶的就是它，什么10元服务器云云。。

 

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions.html

 

以下操作来自https://cloud.tencent.com/document/product/583/37511示例，示例是在VS Code中使用Python的教程，不过在VS Code中使用nodejs是类似的。小白一定要点开！！

 

OK，下面正式开始。不明白的地方后台给我留言或者查看上边链接中的腾讯云文档或者阅读原项目作者的HandBook。

 

正式开始

 

 

01

nodejs以及VS Code安装

 

 

如果跟我一样正在使用Windows系统，nodejs以及VS Code安装就再简单不过了。下载这两个安装包，一路next即可。百度搜索nodejs以及VS Code官网下载或者在此公众号后台回复今日关键字下载。

 

nodejs安装完毕无需其他操作。

VS Code安装完毕后，需要安装 Tencent Serverless 插件。

 

 

 

02

腾讯云

 

 

使用浏览器注册腾讯云，申请API**以及配置角色。

 

API**详细申请方法：（浏览器）进入注册好的腾讯云，打开控制台，在左上角云产品菜单里，选择【管理与审计】-> 【访问管理】，进入后在左边菜单栏中选择【访问**】->【API **管理】。

 

API秘钥

（https://console.cloud.tencent.com/）

 

配置角色详细配置方法：（浏览器）进入注册好的腾讯云，打开控制台，在左上角云产品菜单里，选择【管理与审计】-> 【访问管理】 -> 【角色】，进入后【新建角色】。

 

配置角色

（https://console.cloud.tencent.com/cam/role）

 

API的意思是应用程序编程接口，它是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力。此处作为VS Code腾讯云插件中的登录接口。

 

 

03

创建一个云函数。

 

 

启动VS Code，点击推荐的插件图标，创建本地函数。运行环境请一定要选择nodejs8.9。

 

请一定要选择nodejs8.9。

 

 

04

“绘图”程序

 

 

导入GitHub疫情图数据，详细操作见文件“HandBook.md”。

 

此处可直接使用公众号提供的数据包，解压后放到“云函数”对应的文件夹中。对于index.js 和 index.html文件编辑补充有问题的同学，公众号回复关键字可以获取完整版。

 

 

 

05

添加npm依赖。

 

 

复制“云函数”的文件夹全路径，如C:\Users\ruanxiaotang\Documents\Demo\ruanxiaotang。

快捷键Win+R打开CMD命令窗口，右键粘贴路径，快速进入到此目录，操作如下。

 

 

 

06

调试

 

 

本地调试成功后，上传所有代码到云端。

 

 

 

在线调试成功后，浏览器打开控制台中的“函数服务”。

 

在“函数服务”中创建触发器，请务必勾选“启用集成响应”，这样网关才能正确渲染HTML的内容。

 

https://console.cloud.tencent.com/scf/list-detail?tab=triggerTab&ns=default&rid=8&id=test

 

 

07

访问

 

 

在“函数服务”中创建触发器后，可看到最后一行的链接（上图），复制到浏览器即可。本文演示链接如下，复制下方链接看看效果~

 

https://service-gryd2q5h-1257646950.bj.apigw.tencentcs.com/release/test

 

OK，基本上完成，后面可以绑定一下自己域名。操作过程本文没有全部截图，作为小白宅家“绘图”的辅助文章。若依照腾讯云文档以及该项目的HandBook再结合本文进行实战，将会轻松不少。

 

反正出不了家门，慢慢搞呗~

 

 

微信公众号ID：ruanxiaotang520