离线模式实践
自从天工物可视公测以来，已经有不少用户向我们反映，因为自身的数据安全需求或者法律法规的要求，他们无法使用运营在公开网络环境中的可视化产品。然而此前物可视并不具备脱离公网运行的能力，使得使用百度天工物联网整体解决方案的用户在可视化的环节缺了一段，甚为可惜。
好在现在物可视已经推出了“离线模式”，允许用户将仪表盘打包成离线模式运行在内网环境。离线模式主要有以下几个特点：
- 使用离线模式任务会得到一个 zip 包，通过使用本地静态服务器（如 nodejs 的 http-server, nginx 等）在本地启动服务即可
- 不向公网发送任何请求，可以部署在私有化网络中。
- 可以通过 PlayerAPI 由用户自行获取并更新数据，灵活性强
更多离线模式概念性的说明可以参考文档。本文的主要目的是为了指导用户如何使用物可视离线模式构建运行于内网的可视化应用。
除了离线模式本身的操作流程之外，本文还会包含获取/更新数据等操作，是一个完整的操作流程。毕竟用户使用离线模式不是为了使用静态数据做 Demo，而是需要真实的内网数据做展示的。
要使用物可视从零开始搭建一个内网可用的可视化产品，主要有如下几个大的步骤：
- 申请物可视离线模式使用权限
- 创建并编辑仪表盘（也可以使用已有的仪表盘）
- 创建离线任务获取离线包（本文重点）
- 编写自定义脚本获取数据，并更新到离线包中（详细可参考使用 PlayerAPI 更新数据，本文只作简单说明）
- 运行离线包（本文重点）
下面我们逐步讲解。
申请离线模式使用权限
公测期间，离线模式采用用户白名单的方式运行。想要体验离线模式的用户，可以通过提交工单的方式联系我们开通，我们会将您的账号添加到白名单中。
待开通完成后，您可以在仪表盘编辑界面的右上角找到“离线模式”的按钮，这样就证明您已经拥有离线模式的使用权限了。
我们欢迎您申请试用，并给我们反馈您在使用中遇到的任何问题或者改进意见，这些对于我们提升产品功能和体验至关重要！
创建并编辑仪表盘
拥有了离线模式的使用权限后，下一步就和开发普通流程类似，创建并编辑一个仪表盘。如果您已有一个编辑好的仪表盘，也可以直接使用。
不论通过新建/复制/直接使用的方式，假设我们已经拥有一个仪表盘了。为了后续方便说明，我们以如下仪表盘为例，接下来我们就要为它创建离线模式运行包了。
注意：
- 仪表盘中的图表和标题都绑定了数据源，会跟随数据变化而变化
- 我们使用了一张背景图。因为离线模式无法访问公网，因此在打包后这张背景图也会一并被加入到离线包中
再看看数据源的配置。我们创建了一个仿真数据源，随机生成“城市”和“温度”两列数据。之后创建了一个流水线步骤，新建了一列“体感”，根据温度取值返回“炎热”，“舒适”或者“寒冷”。（上图仪表盘中的标题就是绑定了上海的体感字段）
这里也有两个注意点：
- 如果想在之后从其他 API 获取数据的话，这里必须选择静态数据源，否则仿真数据源本身的自动更新会和 PlayerAPI 互相冲突，引发混乱。
- 记录下这个数据源的名字，之后会用到。例如我们这里叫做“本地气温记录”。
创建离线任务获取离线包
-
点击仪表盘编辑界面，画布标签页右上角的“离线模式”按钮
-
在弹出的离线任务弹框中，在第一个标签页（创建离线模式运行包，默认选中）中查看相关的说明后，点击“创建离线包”按钮
-
点击后，系统会先进行相关的检查，例如用户的操作权限，用户的每日创建限额（当前限定为每日 5 个）等等。待这些通过后，则开始正式创建，我们能看到一个加载动画。整个过程的持续时间应该在 1 分钟左右。
同一个用户同一时间只能创建一个打包任务，必须待其完成后才能创建一个新的。因此如果您的上一个任务还在运行中，打开弹框后会看到上一个任务，暂时不能创建。
为了以防万一（如网络问题或者服务器故障等），如果一个运行中的任务运行超过 10 分钟，用户可以通过点击加载动画下方的“中止任务”来中止。当然如果重试依然无效，您可以提交工单来向我们汇报这个问题。
-
任务完成后，会显示一个“下载离线包”的按钮。点击后会下载一个 zip 文件。
如果不小心关闭了这个弹窗，或者想下载之前执行过的离线包，也可以切换到离线模式弹窗的第二个标签页，下载离线模式运行包。
选择某个离线包后，点击右下角的下载即可。
-
解压 zip 包，可以看到如下几个文件
在运行前请优先阅读 README.md。尤其需要注意的是，启动时端口号是 9100。
另外值得我们注意的是，由于刚才我们的仪表盘使用了一张图片作为画布背景，这里能看到 images 目录中就存放了这张图，方便离线模式本地引用。如果有使用其他图片也会被一起放到这里，并重新命名，防止命名冲突。
至此我们已经准备好了离线包，但这个离线仪表盘的数据源是一个静态数据源。如果您的需求是要使用静态数据源或者仿真数据源进行 Demo 的，那么直接运行即可（如何运行在本文最后一节有涉及）；如果您想获取内网的其他接口来获取数据并更新图表的话，请继续看下一节。
获取内网数据并更新图表
接下来我们要访问内网 API 获取数据，并使用使用 PlayerAPI 来更新图表。严格来说这并不是离线模式的功能，但通常它会配合离线模式一起使用，因此我们在这里一并了解一下。有关它的更详细的解释在这篇文档中。
另外还需要说明的是，使用 PlayerAPI 更新图表时，因为发送请求获取数据是由用户控制和负责的，因此物可视并不关心数据的来源，只关心数据的格式（必须和要更新的图表绑定的数据源格式一致）。换句话说，使用 PlayerAPI 更新图表时，物可视可以搭配任何数据源使用。可以是天工的时序数据库或者物影子，也可以是其他用户自行编写的数据接口，更可以是其他云产品的服务，只要能够正常返回数据即可。
最后一点，在上面创建仪表盘一节已经提过，如果想使用 PlayerAPI 更新图表的话，请在仪表盘中使用静态数据源，否则会和仿真自身的更新冲突，引发混乱。
我们假设数据接口的地址是 /data/getTemperature, 我们需要对离线包的 index.html 进行编辑：（ index.html 是由 webpack 压缩生成，因此格式上不太可读，请自行添加换行）
- 首先我们需要添加发送请求获取接口数据的类库，例如 axios。我们从它的下载地址(https://unpkg.com/axios/dist/axios.min.js)下载下来后放到 static 目录，通过
static/axios.min.js来访问到它。 - 在
<head>标签中添加<script src="static/axios.min.js"></script>以引用刚才我们添加的 axios 类库。 -
在文件接近末尾的地方我们可以发现这样一段代码