工业互联网技术基础 课件 第5章 应用层与工业APP开发

工业互联网技术基础1一、工业互联网概述二、工业互联网平台三、边缘层与工业大数据采集四、PaaS层与工业大数据治理五、应用层与工业APP开发六、工业互联网安全七、工业互联网应用2涵盖功能应用层概述应用层侧重于将采集分析后的数据结合应用进行耦合重组实现服务，提供工业创新应用、开发者社区、应用商店、应用二次开发集成等功能。工业创新应用：针对研发设计、工艺优化、能耗优化、运营管理等智能化需求，构建各类工业APP应用解决方案，帮助企业提质降本增效。开发者社区：打造开放的线上社区，提供各类资源工具、技术文档、学习交流等服务，吸引海量第三方开发者入驻平台开展应用创新。应用商店：提供成熟工业APP的上架认证、展示分发、交易计费等服务，支撑实现工业应用价值变现。应用二次开发集成：对已有工业APP进行定制化改造，以适配特定工业应用场景或是满足用户个性化需求。3工业技术知识的载体工业APP产生背景2013年，美国GE公司已将APP概念引入到工业领域，其围绕构建航空发动机、大型医疗设备等高端装备产品的全生命周期管理服务体系，面向全球用户提供应用开发环境以及各类应用和服务，构建以开发者平台和APP为核心的产业生态体系。随着我国两化融合的深入和工业互联网的高速发展，企业需要通过持续积累沉淀工业技术知识以获得创新能力，共享共用需求持续凸显，在工业技术知识与信息技术（尤其是软件技术）之间，需要有一个两方融合的载体，于是“工业技术软件化”理念被提出，在此理念的推动下，借鉴消费领域以及国外工业领域的实践，工业APP概念被正式提出。4工业软件发展的新形态工业APP的定义

工业APP是基于松耦合、组件化、可重构、可重用思想，面向特定工业场景，解决具体的工业问题，基于平台的技术引擎、资源、模型和业务组件，将工业机理、技术、知识、算法与最佳工程实践按照系统化组织、模型化表达、可视化交互、场景化应用、生态化演进原则而形成的应用程序，是工业软件发展的一种新形态。———《工业APP白皮书》（2020）

5六大特征工业APP的典型特征

工业APP借鉴了消费APP方便灵活的特性，又承载了工业技术软件化的理念，作为工业软件的新形态又具有软件的特性，同时依托平台具有生态化的特征。因此工业APP具有六个方面的典型特征：6工业APP的典型特征特定工业技术知识载体：工业APP是某一项或某些具体的工业技术知识的软件形态的载体，这是工业APP的本质特征。工业APP所承载的工业技术知识只解决具体的问题，而不是抽象后的问题。特定适应性：每一个工业APP承载解决某项具体问题的工业技术知识，表达一个或多个特定的功能，解决特定的具体问题，具有典型的特定适应性。小轻灵，易操作：每一个工业APP只解决某一些或几项具体的问题，功能单一，并且工业APP的开发运行都依托平台的资源，每一个工业APP不需要考虑完整的技术引擎、算法等基础技术要素，因此工业APP的体量相对较小。六大特征7工业APP的典型特征可解耦/可重构：每一个组件化的工业APP，边界明确，接口明确。使得工业APP可以不被紧耦合约束到某一个具体的应用软件中，与其他的应用程序或APP通过接口交互实现松耦合应用。依托平台：工业APP从概念提出到开发、应用，以及生态的构建与形成，都是基于平台开展的。每一个工业APP只解决特定的具体问题，这就要求工业APP必须具备一个庞大的生态来支撑。集群化应用：每个工业APP只解决特定问题，对于一些复杂的工业问题，可以通过问题分解将复杂问题变成一系列单一问题，每一个单一问题由对应的工业APP来解决，通过多个边界和接口明确的工业APP按照一定的逻辑与交互接口进行系统性组合，利用工业APP集群可以解决更为复杂的系统性问题。六大特征8联系与区别工业APP与消费APP消费APP工业APP小轻灵，易操作继承小轻灵，易操作特征基于信息交换基于工业机理toCtoB用户是消费者（非专业用户）用户是产品设计、生产、经营者（专业用户）服装、食品等消费品工业，工业APP与消费APP分别支撑产业链前后端，二者需要整合9平台+APP工业APP的发展趋势

从技术角度看，工业APP发展将呈现五方面的趋势：从线下到线上的工业APP开发模式变化、开发者社区助推工业APP开发、开发主体逐渐转变、工业APP与大数据结合、传统工业软件微服务化重构。随着工业互联网平台、软件开发平台以及智能制造云服务平台的不断推广，工业APP的开发模式也将由传统的线下定制向“平台+APP”的线上开发模式转变。

从发展背景角度看，工业APP作为工业Know—how沉淀的重要载体，是工业互联网价值实现的最终出口，对于提高我国制造业发展起点及国际竞争力，带动传统产业和地区经济数字化智能化转型，实现工业技术知识的更好积累、传递、共享等方面具有重要作用。10简洁高效低代码开发技术11宜科AppDesigner工业APP开发工具

宜科AppDesigner是一个单页面应用程序，是宜科工业互联网平台IoTHub的选配组件，它允许用户以拖放式交互等无代码或低代码开发的方法，在Web前端轻松创建工业APP。因此，用户无需编写源代码即可定义工业应用的UI和应用逻辑。当用户在AppDesigner中完成工业应用建模后，即可在云端完成工业APP的编译打包，并通过二维码的方式将创建好的工业应用导出。12宜科AppDesigner工业APP开发工具

工业APP承载的数据均来自于其依托的工业互联网平台，两者的关系如右图所示。工业互联网平台从多个源（Things）收集数据，并以不同格式（协议A、B、C）发送数据。然后，平台进一步处理这些数据，并使用标准化的Web对象模型提供这些数据。这些标准化的数据就是工业APP访问和进一步操作的对象，用户可以通过工业APP从工业互联网平台获取这些数据的分析结果，并在智能手机、网络用户界面、生产大厅的屏幕或类似设备上轻松访问和可视化这些数据。13界面布局AppDesigner操作界面组件树

组件编辑器

应用程序预览14AppDesigner操作界面

组件是使用AppDesigner创建的任何应用程序的核心构建块。我们区分四种不同的组件类别。布局组件主要用作其他组件的容器。静态组件表示静态内容，输出组件表示动态内容，具体内容取决于来自IoTHub的数据。相反，输入组件可用于操作IoTHub上的数据。所有组件共享一组公共属性，可以使用组件编辑器进行编辑。Title：Title属性在应用程序中不可见，仅用于标识组件树中的组件。

Margin：Margin值用于在组件周围预留空间。四个方向（顶部、右侧、底部、左侧）可以独立取值，也可以设置为同一个值。组件15组件AppDesigner操作界面布局组件与其他组件类别不同，布局组件不是直接可见的，只是作为容器来对其子组件进行分组。目前，AppDesigner中有三种类型的布局组件：根、行和列。布局组件对齐方式16组件AppDesigner操作界面

静态组件

静态组件不链接到来自IoTHub的数据。它们用于显示在创建应用程序时指定的内容，并且在应用程序运行过程中不会更改。目前，这些静态组件包括文本、方框和图像组件。文本组件方框组件17组件AppDesigner操作界面

输出组件

与静态组件不同，输出组件可以根据IoTHub上属性的当前值在应用程序运行时更改其内容或外观。目前有三个输出组件：属性值文本、进度条和动态图像。进度条组件18组件AppDesigner操作界面

输入组件

虽然上述输出组件主要用于从IoTHub读取（和显示）数据，但输入组件可用于写入数据。要写入的值可以在AppDesigner中预定义（按钮、属性值下拉列表），也可以由应用程序用户直接指定（属性值输入）。为了向用户提供反馈，可以选择为每个输入组件定义单个信息消息。它在组件的发送按钮被单击后显示。按钮组件属性值下拉选择组件属性值输入组件19组件树AppDesigner操作界面

组件树

组件树是应用程序编辑器的三个主要模块之一。它将应用程序UI的结构设计可视化为层次树结构。组件树中的布局组件条目（根、行、列）可以通过单击标题旁边的小箭头展开和折叠。这使得所包含的组件可以选择性地隐藏在组件树中，从而提供更好的概览。组件之间的父子关系也可以在缩进中看到。子组件总是相对于它们的父组件进一步缩进。除了可视化结构之外，组件树还是重新排序或删除现有组件以及创建组件新的中心位置。20组件树AppDesigner操作界面

添加组件

要添加新的组件，必须首先在组件树中选择布局组件。如前所述，可以通过标题旁边的展开/折叠箭头快速识别它们。然后，用户将看到用于删除组件（垃圾箱图标）和将其添加到所选组件旁边的图标（“+”图标）。点击加号图标后将在组件树的底部显示添加组件面板。21组件编辑器AppDesigner操作界面

除了组件树之外，组件编辑器是应用程序编辑器的三个主要模块之一。除了它们在组件树中的确切位置外，各个组件的所有调整都在组件编辑器中进行。要编辑组件，首先必须在组件树中选择它。组件编辑器的内容始终取决于组件树中当前选定的组件。有关不同组件类型属性的更多详细信息，请参阅组件相关内容。大多数属性都可以通过简单的输入或选择界面元素进行编辑。22组件编辑器AppDesigner操作界面颜色设置

为了调整颜色，例如文本组件的字体颜色或按钮的背景色，组件编辑器提供了一个颜色选择器组件，只需点击某个地方的颜色输入。使用颜色选择器，可以通过第一个滑块调整颜色区域，并通过第二个滑块调整颜色的透明度。要拾取最终颜色，请单击“颜色选择器”对话框顶部颜色图像上的位置。23组件编辑器AppDesigner操作界面提示工具注意组件编辑器中的小信息图标。这些图标通常隐藏显示有关相应属性或控件的附加信息的工具提示。将鼠标光标悬停在图标上以显示信息。禁用界面元素时，也可以使用此类工具提示。因此，如果用户想知道为什么某个选项对组件不可用，请将鼠标指针移到它上面。校验组件编辑器中的大多数输入字段都会在您键入时自动校验。如果输入的值无效，则在输入字段下方会出现相应的警告。请注意，一旦切换到另一个组件，无效值就会被丢弃。此外，当用户保存工业APP时，它们不会被保存。24组件编辑器AppDesigner操作界面拖放按钮效果和下拉组件的选项可实时可视化。它们可以通过拖放进行排序。为此，必须按住鼠标按钮将相应的选项或效果拖动到适当的位置。通过X图标可以触发删除选项或效果。要编辑它，只需点击芯片（X图标外）。然后用户将看到所需的输入和控制元素。25APP预览AppDesigner操作界面

除了组件树和组件编辑器之外，应用程序预览也是应用程序编辑器的三个主要模块之一。与组件树（主要表示用户界面的结构）不同，应用程序预览可视化了应用程序的最终外观，稍后将在AppHub中查看。每次通过组件编辑器编辑组件属性时，应用程序预览将自动更新。除了呈现用户界面外，应用程序预览还提供其他有用的功能，例如启用调试行或启用模拟模式。它们都可以通过预览工具栏中的图标触发。26APP预览AppDesigner操作界面模拟模式禁用模拟模式时，预览完全是静态的，用户无法与其交互。然而，为了实现输入和输出组件的真实感，可以启用模拟模式。只需单击播放图标，然后将其更改为暂停图标。输出组件将开始接收模拟数据，该数据是虚拟数字，独立于所选属性的实际类型。此时，用户可以与输入组件交互。必须强调，在模拟模式下，仅显示虚拟值，交互对各自的事物/属性没有影响。仿真模式仅用于动态组件视觉外观的逼真表示。调试线通常很难理解组件的大小，尤其是边距如何影响整个用户界面。为了解决这个问题，应用程序预览提供了所谓的调试线。这些可以通过预览工具栏左侧的图标启用。调试行有两种不同的颜色。红线表示组件的外部边界，包括指定的边距。另一方面，蓝线表示组件的实际边界。如果组件没有外部空间，则只显示红线。27多媒体管理器AppDesigner操作界面多媒体管理器管理所有在应用程序中使用的图像。示例图像是一个例外，可以在“应用程序设置”对话框中进行设置。可以通过侧边栏中的图像图标在应用程序编辑器中访问多媒体管理器。左边是所有上传媒体文件的列表。单击其中一个文件，将显示详细信息和预览。28多媒体管理器AppDesigner操作界面添加多媒体要添加新图像，只需单击媒体列表顶部的添加按钮。之后，用户必须从计算机中选择一个图像文件并设置标题。有关特定要求的更多信息，例如有关文件类型或文件大小的信息，可以通过将鼠标悬停在输入字段旁边的信息图标上来显示。选择一个有意义的标题很重要，因为这将是以后在组件编辑器中标识图像的唯一属性。上传图像后，可在组件编辑器的图像列表中使用，例如在编辑图像组件时。29多媒体管理器AppDesigner操作界面编辑多媒体可以先在左侧列表中选择上一个上传的媒体，然后单击“编辑”按钮对其进行编辑。除了标题之外，您还可以更改文件本身。如前所述，必须满足关于标题和图像文件的某些要求。有关更多详细信息，请查看输入字段旁边的信息工具提示。删除多媒体首先从多媒体管理器的列表中选择图像，然后单击删除按钮，即可删除图像。请记住，使用该图像的组件在图像删除后将不再显示任何内容。30应用程序常规设置AppDesigner操作界面

可以通过侧边栏访问应用程序设置对话框。点击齿轮图标将打开一个对话框，可以在其中输入基本的应用程序设置。通过将鼠标悬停在相应的信息图标上，可以显示有关特定字段的更多信息。对应用程序设置的更改仅在单击“保存”按钮时保存。单击“取消”按钮将放弃所有更改并关闭对话框，所以请记住保存当前更改！31宜科AppHub工业APP的发布与管理AppHub简介AppHub是一个跨平台的移动应用程序，它允许添加和执行由AppDesigner创建的工业APP。它有一个概览页面，页面显示所有已添加到AppHub的工业App，这些App是通过扫描AppDesigner生成的二维码添加的。此外，可以通过在概览中选择某个工业APP来执行它。32宜科AppHub工业APP的发布与管理AppHub的基本功能如下：导入工业应用AppHub提供了一个二维码扫描器，帮助用户导入使用AppDesigner构建的工业应用。如前所述，用户需要扫描AppDesigner生成的二维码，才能添加工业APP。然后，用户需要通过验证才能下载程序。AppHub将程序保存在本地数据库。运行工业APP当用户在概览中选择工业APP时，将从要执行的本地数据库检索相应的应用程序模型。为了不需要编译或运行时就可以执行，模型驱动软件开发研究领域的另一种方法用于执行模型：模型解释。AppHub解释了具体情况运行时工业应用程序的模型，以便按照模型中描述的工业应用程序执行。33工业APP的发布与管理AppHub操作界面主菜单AppHub的主菜单可以通过左上角的三行按钮或从屏幕左边框开始从左向右滑动来访问。通过主菜单，用户可以进入介绍屏幕、用户手册以及添加不带二维码的应用程序或重置登录等功能。语言与AppDesigner不同，用户不能手动更改AppHub的语言。它会自动选择以匹配设备的系统设置。AppHub目前支持德语、英语和中文版本。34工业APP的发布与管理手动添加APP添加应用程序

有两种不同的方式添加应用程序到AppHub。用户可以扫描相应的二维码，也可以通过应用程序标识符手动添加应用程序。

通过二维码添加应用程序是向AppHub添加应用程序的最简单方法。只需点击概览屏幕右下角的按钮打开二维码扫描窗口（用户首次使用需要授予AppHub使用设备相机的权限），扫描应用程序的二维码即可。如果用户无法使用二维码或无法使用相机，可以选择手动添加应用程序。为此，需要应用程序标识符及其基本url。35工业APP的发布与管理APP的运行与刷新运行App要运行已添加到AppHub的工业APP，只需单击相应的应用程序图标即可。如果在此期间重置了登录，则用户必须重新登录后才能访问应用程序列表。刷新App通过AppDesigner应用程序编辑器对工业APP进行更改后，必须在AppHub中更新应用程序，以便更改生效。要刷新应用程序，请单击应用程序平铺右上角的“三点”图标，打开应用程序选项，单击“刷新”，AppHub随后将获取此应用程序的最新数据。完成此操作后，用户可以再次启动更新后的的应用程序。36工业APP的发布与管理APP的分享分享App有时，用户已经向AppHub添加了某个工业APP，但用户的同事还没有添加。此时，用户可以通过AppHub显示应用程序的相应二维码。只需打开应用程序选项并单击共享即可打开二维码，同事们可以通过AppHub二维码扫描功能添加应用。37工业APP的发布与管理警报概览监控报警使用AppDesigner创建的每个应用程序都会自动包含一个警报概览页，可以通过打开应用程序并点击右上角的报警图标来访问该警报概述。报警概述显示所有与应用程序连接的所有设备的实时警报。当与工业互联网平台的连接可用时，报警视图每隔5秒更新一次。在图5-28中，用户可以看到三个不同状态的报警：Idle（绿色）是当前未激活的报警Active（红色）是一个激活且未确认的报警Active（橙色）是一个未激活和确认的报警Off（灰色）表示当前未启用报警38工业APP的发布与管理警报处置确认警报AppHub还允许用户确认警报。如前所述，只能确认Active（红色）报警。为此，向左滑动要确认的报警条目。右侧应打开一个确认按钮。点击此按钮确认警报。操作成功后，报警概览底部将显示一条消息。39工业APP开发示例登录并创建APP登录首先，通过单击IoTHub导航栏中的AppDesigner图标打开AppDesigner。您可以使用IoTHub工业互联网平台用户权限登录AppDesigner，并使用同样的用户名和密码登录AppHub。创建工业App登录后，用户将进入AppDesigner的欢迎页面。请单击“创建新应用”按钮。在下一个屏幕上，用户需要输入标题和唯一的应用程序标识符。应用程序标识符仅用于唯一标识您的应用程序，在创建应用程序后不能更改。如屏幕截图所示填写以下两个字段：Apptitle:MyFirstAppAppidentifier(unique):my_first_app然后单击创建应用程序。40工业APP开发示例APP编辑器添加文本组件我们单击添加组件面板③中的文本按钮⑥。将文本组件添加到组件树后，它将被自动选中，其属性显示在组件编辑器④中。添加图片组件接下来添加图像组件，在组件树中选择主布局②，然后单击“+”图标⑦打开添加组件面板。然后，单击图像按钮⑧将组件添加到树中。同样，新的组件被自动选中，可以在组件编辑器④中编辑它。调整组件位置

现在，这两个组件显示在工业APP的顶部。在这一步中，我们将进一步对两个组件进行排布。单击调试行图标⑩来启用调试行。为了定位新的组件，我们需要在组件编辑器④中配置主布局②。41工业APP开发示例安装AppHub要运行工业APP，首先需要在设备上安装AppHub。安装一次后，只需扫描二维码，几秒钟就可以将工业APP添加到手机中。可以使用以下选项之一安装AppHub：安卓：要在Android设备上安装AppHub，可以有以下两种方式。应用商店：登录GooglePlay应用商店搜索并安装AppHub：APK：如果无法访问GooglePlay应用商店，可以在本图书附带的资源库中下载AppHub.apk文件。

IOS：登录AppleAppStore搜索并安装AppHub：42工业APP开发示例添加APP到AppHub展示二维码首先，单击“保存应用程序”按钮或按CTRL+S将工业APP保存到AppHub中。然后，在AppDesigner中单击AddtoAppHub，显示应用的二维码。扫描二维码现在打开AppHub，单击AppHub概览屏幕右下角的扫描二维码按钮，添加应用程序后，用户将看到一个登录屏幕，请使用授权的IoTHub/AppDesigner用户名及密码登录进行授权。如果登录成功，用户的第一个应用程序将出现在AppHub的应用概览中。要启动该应用程序，只需单击相应图标。到这里，我们创建并部署了第一个工业APP。43工业APP开发示例工业数据的读写1.创建设备并添加属性到IoTHub中要读取或写入数据，首先需要在IoTHub中添加一个对象和一个属性，有关设备、属性及其管理的详细信息，请参阅IoTHub用户手册。（1）创建设备使用AppDesigner右上角菜单中的OpenIoTHub选项在IoTHub前端，导航到Things页①，然后，单击导航栏中的“+”图标②添加新内容；在打开的对话框中，选择virtualthing作为Thing类型，然后单击Next；在下一步中，输入标题，如“MyfirstThing”，然后单击“下一步”；检查对象的名称和类型，然后单击“安装”。44工业APP开发示例工业数据的读写（2）创建属性选择刚刚创建的设备③；单击右上角的“+”图标④添加新属性；在打开的对话框中，输入room\utemp作为名称，并选择float64作为类型；单击“确认”将属性添加到对象。到这里，我们完成了第一个属性的创建。45工业APP开发示例工业数据的读写2.使用应用程序读写属性目前已经创建了第一个属性，我们可以使用工业APP读写它了。通过单击导航栏⑤中的AppDesigner条目再次打开AppDesigner。在AppDesigner的欢迎屏幕中，加载在构建第一个应用程序时创建的应用程序。（1）可视化属性让我们首先使用一个输出组件（在本例中是属性值文本）来可视化当前温度。首先，在组件树中选择主布局A，然后单击添加组件按钮B。然后，选择属性值文本以添加组件。在属性值文本的组件编辑器中：将字体大小设置为非常大C将文本对齐方式设置为居中D使字体加粗E启用全宽开关F将占位符文本G设置为--°C（这是没有可用值时显示的文本）在“对象选择”H中选择之前创建的对象在属性选择I中选择之前创建的属性（room_temp）将属性J的单位设置为°C级46工业APP开发示例工业数据的读写（2）写入一个值到属性内