【PTC Thingworx(二)】创建一个物联网应用程序

这个项目将通过创建一个工作的web应用程序向你介绍ThingWorx Foundation的原理。
按照本指南中的步骤，您将创建您的第一个物联网应用程序的构建块。您将使用ThingWorx Composer创建Thing Template，然后使用这些模板创建应用领域模型。导入模拟器以生成保存到Value Stream的时间序列数据。
在ThingWorx Composer中建模应用程序后，您将使用Mashup Builder创建web应用程序图形用户界面

Step1：数据模型
ThingWorx应用程序是由Things构建而成的，每个Things Template都定义了一组实体的公共属性(特征)和服务(行为)。一旦创建了一个Thing Template，您就可以很容易地实例化多个Things，而无需重复工作。

在本教程中，我们将为包括恒温器、电表和传感器数据模拟器的房子开发一个应用程序。我们将演示如何使用ThingWorx Foundation Server捕获、存储和可视化数据。

Step2：创建Thing Shapes
Thing Shapes是包含属性和服务的组件。在Java编程术语中，它们类似于接口。
在本教程中，将为电表和恒温器构建Thing Shapes。
新建电表
1.点击ThingWorx Composer的Browse文件夹图标选项卡开始。
2.在左侧导航面板的Modeling部分，将鼠标悬停在物体形状上，然后单击+按钮。

3.在Name字段中键入MeterShape
4.如果尚未设置Project，请选择PTCDefaultProject。
5.点击Save

添加属性
1.点击Properties and Alerts

2.点击**+Add**
从下面表格的第一行输入属性名到Thing Shape的name字段

4.在Base Type中选择基本类型

5.如果属性的表行中有X，请检查Persistent和Logged。
注：当选择Persistent时，该属性值将在Thing重启时保留。未持久化的属性将在重启期间重置为默认值。当选择Logged时，每个属性值的更改都会自动记录到指定的值流中。
6.点击✓+
7.重复步骤2-6，完成剩余属性的添加。
8.点击✓，点击Save

新建恒温器
利用同样的方法创建恒温器的Thing Shape，命名为ThermostatShape，添加如下表属性

创建的恒温器如下：

Step3：创建Thing Template
在这个步骤中，将创建一个定义建筑属性的Thing Template。这个建筑模板可以用来创建多个事物，每个事物都代表一个特定的家庭、企业或其他建筑结构。
1.点击Thingworx平台的Browse
2.在Modeling下鼠标悬停在Thing Template上，然后点击+按钮

3.在name栏键入BuildingTemplate
4.Project选择PTCDefaultProject
5.Base Thing Template栏，点击+，选择GenericThing

6. Implemented Shapes栏，点击+，选择MeterShape
   
   7.点击Save

添加属性
在此步骤中，您将指定表示建筑物特征的Properties。一些属性，如建筑位置可能永远不会改变(静态)，而其他属性，如电源和温度信息可能每隔几秒就会改变(动态)。
1.选择Thing Template: BuildingTemplate的Properties and Alerts
2.添加如下属性（添加方式参考Thing Shape的属性添加方法）

3.Save
在下一部分中，我们将基于这个模板创建一个Thing来代表一个房子。

Step4：创建Thing
在ThingWorx中，Thing用于表示应用程序的特定组件。在Java编程术语中，Thing类似于类的实例。

在这一步中，将使用我们在上一步中创建的Thing Template创建一个代表独立房子的Thing。使用Thing Template可以通过创建多个Things来提高开发速度，而不必每次都重新输入相同的信息。
1.点击Browse，鼠标悬停在Modeling下的Things上，点击+

2.name中键入MyHouse

3.Project选择PTCDefaultProject
4.Base Thing Template栏，点击+，选择BuildingTemplate

5. Implemented Shapes 栏，点击+，选择之前创建的ThermostatShape

6.Save

Step5：数据存储在价值流中
现在，已经创建了MyHouse Thing来在ThingWorx中建模您的应用程序，您需要创建一个存储实体来记录更改的属性值。本指南展示了在ThingWorx Foundation中存储数据的方法。本练习使用值流，这是一种保存时间序列数据的快速而简单的方法。

创建价值流
1.点击Browse，鼠标悬停在Data Storage下的Value Streams，点击+

2.选择ValueStream，点击OK

3.name栏键入Foundation_Quickstart_ValueStream
4.Project选择PTCDefaultProject
5.Save

更新Thing Template
1.导航到BuildingTemplate Thing Template
2.确保在General Information栏目下
3.如果是可见的，单击Edit按钮，然后，在ValueStream文本输入框中，单击+并选择Foundation_Quickstart_ValueStream

4.Save

Step6：创建自定义服务
ThingWorx Foundation服务器能够创建和执行用Javascript编写的定制服务。在Things、Thing Templates和Thing Shapes的Services编辑器中使用示例代码片段、代码完成和检测来加速开发。

在本节中，将在电表Thing Shape中创建一个自定义服务，该服务将基于模拟的实时数据和模型中保存的电费计算当前每小时的成本。您将创建一个JavaScript，它将当前的仪表读数乘以每小时的成本，并将其存储在一个跟踪当前成本的属性中。
1.点击左侧导航窗格上的Modeling选项卡下的Thing Shapes;然后单击列表中的MeterShape

2.单击Services选项卡，然后单击+ Add并选择Local (Javascript)

3.命名为calculateCost

4.单击Me/Entities打开选项卡。
5.单击Properties

6.单击currentCost属性旁边的箭头。这将向脚本框中添加用于访问currentCost属性的Javascript代码
7.通过在脚本框中输入或单击Me选项卡下的其他必需属性，复制以下代码:

me.currentCost = me.costPerKWh * me.currentPower;

8.点击Done
9.点击Save

Step7：创建警报和订阅
事件是由Thing发布的自定义消息，通常在Property的值发生变化时发布。Subscription侦听特定的Event，然后执行Javascript代码。
在此步骤中，您将创建一个Alert，它是定义事件和事件发布时的逻辑的快速方法。

创建警报
1.单击Composer中的Modeling选项卡下的Thing Shapes，然后从列表中打开ThermostatShape Thing Shape

2.点击Properties and Alerts
3.点击temperature 属性
4.如果尚未进入编辑模式，请单击绿色的Edit按钮，然后单击Alerts列中的+

5.从Alert Type下拉列表中选择“Below”。
6.name框键入freezeWarning
7.Limit框中输入32

8.点击 ✓
9.点击Save

创建订阅
创建此事件的订阅，该订阅使用Javascript在错误日志中记录条目并更新状态消息。
1.打开MyHouse Thing，然后点击Subscriptions 选项卡
2.点击Edit，让后点击**+Add**

3.在name中键入freezeWarningSubscription
4.单击Inputs选项卡后，单击Event下拉列表，然后选择Alert
5.在Property 字段下拉，选择temperature

6.点击Subscription Info，选中Enabled

创建订阅代码
按照以下步骤创建代码，设置消息属性值并将警告消息写入ThingWorx日志。
1.在右侧的脚本文本框中输入以下JavaScript以设置消息属性。

me.message = "Warning: Below Freezing";

2.点击Snippets
3.在Script文本框内单击并按Enter键将光标置于新行上。
4.在代码段筛选器文本框中键入warn或向下滚动以定位警告代码段。
5.单击All，然后单击warn旁边的箭头，Javascript代码将被添加到脚本窗口。
6.在引号之间添加错误消息。

logger.warn("The freezeWarning subscription was triggered");

7.点击Done
8.点击Save

Step8：创建应用程序用户界面
ThingWorx你可以创建定制的web应用程序，显示和交互来自多个来源的数据。这些web应用程序被称为Mashup，是使用Mashup Builder创建的。

在Mashup Builder中，你可以通过将网格、图表、地图、按钮等小部件拖放到画布上来创建web应用程序。应用程序中的所有用户界面元素都是Widgets。

我们将构建一个带有三个Widgets的web应用程序:在交互式地图上显示房屋位置的地图，显示瓦特属性当前值的仪表，以及显示温度属性值随时间变化趋势的图表。
构建Mashup
1.在左侧导航中选择Mashup，然后单击+ New创建一个新的Mashup。

2.Mashup Type 选择Responsive，点击OK

3.name栏键入widgetMashup
4.Project栏选择PTCDefaultProject
5.点击Save
6.选择Design选项卡以显示Mashup Builder

组织用户界面
1.在设计工作区的左上方，在Widget面板中，确保选择了Layout选项卡，然后单击Add Bottom将UI分成两部分。

2.单击底部的一半，以确保它被选中，然后单击Add Left
3.单击左下角容器内的任何位置，然后在Layout面板中向下滚动，选择Fixed Size
4.在出现的Width中输入200，然后按计算机的Tab键记录输入

5.点击Save

Step9：添加组件
1.单击Widget面板左上方的Widgets选项卡，然后向下滚动，直到看到Gauge Widget
2.将Gauge小部件拖动到右边画布的左下方区域。这个小部件将显示正在使用的模拟功率

3.在画布上选择Gauge对象，屏幕左下角将显示Widget属性。
4.从category下拉菜单中选择Bindable，输入Watts作为Legend属性值，然后按tab键。

5.点击并拖动Google Map Widget到画布的顶部区域。
6.单击并将 Line Chart小部件拖到画布的右下方区域。
7.点击Save

Step10：显示数据
现在已经配置了应用程序的可视部分，接下来需要将Mashup中的Widgets绑定到数据源，并使应用程序能够显示来自已连接设备的数据。

向Mashup添加服务
1.单击Mashup Builder右上角的Data选项卡
2.单击Data选项卡中的绿色+符号

3.在Entity 文本框中键入MyHouse

4.点击MyHouse
5.在Services下面的Filter文本框中，键入GetPropertyValues
6.单击GetPropertyValues服务右边的箭头添加它

7.选择Execute on Load下的复选框
注意:如果您选中Execute on Load选项，服务将在Mashup启动时执行。
8.在Services下的Filter文本框中，键入QueryProperty。
9.通过单击服务名称右侧的箭头来添加QueryPropertyHistory服务。

10.选择Execute on Load下的复选框
11.点击Done

12.点击Save

将数据绑定到小部件
现在，我们将把添加到Mashup中的Widgets中的服务连接起来，以便显示它们的数据。
Gauge
配置仪表显示当前功率值。
1.展开GetPropertyValues服务以及Returned Data和All Data部分。
2.将watts属性拖放到Gauge小部件上

3.当Select Binding Target对话框出现时，选择# Data。

Map
配置谷歌Maps以显示home的位置
1.展开GetPropertyValues服务和Returned Data部分。
2.将All Data拖放到Map小部件上

3.当Select Binding Target对话框出现时，选择Data。
4.单击画布上的谷歌Map Widget以显示可以在左下角面板中配置的属性。
5.从下拉菜单中选择building_lat_lng，在左下角面板中设置LocationField属性

Chart
配置图表以显示随时间变化的属性值。
1.展开QueryPropertyHistory服务和Returned Data部分。
2.将All Data拖放到Line Chart 小部件上
3.当Select Binding Target对话框出现时，选择Data
4.在左下角的属性面板中，从Category下拉列表中选择All
5.在Filter Properties文本框中输入series ，然后在NumberOfSeries中输入1
6.在Filter Properties文本框中输入field ，然后点击XAxisField
7.从XAxisField下拉列表中选择timestamp 属性值
8.从DataField1下拉框中选择temperature

验证数据绑定
您可以在Connections 窗格中看到绑定到小部件的数据源配置。
1.单击数据源面板中的GetPropertyValues，然后检查屏幕底部的图表，以确认数据源已绑定到Gauge and Map小部件。

2.单击QueryPropertyHistory数据源，并确认图表显示图表已绑定到它。
3.点击Save

Step11：模拟数据源
此时，您已经创建了一个Value Stream来存储更改的属性值数据并将其应用到BuildingTemplate中。本指南不包括连接边缘设备，另一指南包括选择连接方法。我们将导入一个预先制作的东西，创建模拟数据，代表来自连接家庭的信息类型。导入的Thing使用保存在订阅中的Javascript代码，该订阅在每次MyHouse Thing被它的计时器Event触发时更新它的电源和温度属性。
导入数据模拟实体
1.下载MyHouse Simulator Thing 示例
提取码：p0f5
2.在Composer中，单击页面左下方的Import/Export图标。

3.点击Import
4.保留所有默认值，单击Browse选择刚刚下载的Things_House_data_simulator.xml文件
5.单击Open，然后单击Import，看到成功消息后，单击Close。

探索导入的实体
1.使用屏幕顶部的搜索栏导航到House_data_simulator
2.点击Subscriptions

3.单击Name下面的Event.Timer
4.选择Subscription Info

5.展开Subscription Info菜单。当启用复选框被Enabled时，模拟器将发送数据。
6.点击Done，点击Save

验证数据模拟
1.打开MyHouse，单击Properties an Alerts选项卡
2.单击上面显示当前属性值的Refresh按钮

3.注意，当被触发的服务运行时，temperature 属性值每30秒改变一次。当温度超过72以模拟空调开启时，watts 属性值为100。

Step12：测试应用
1.浏览到Mashup并单击View Mashup以启动应用程序

2.确认数据正在每个部分中显示

测试警报
1.打开MyHouse Thing
2.点击Properties and Subscriptions
3.找到temperature 属性并单击Value列中的铅笔图标
4.在右上角面板中输入29的temperature属性。
5.点击Check mark图标以保存值。这将触发freezeWarning警报

6.单击Refresh以查看自动设置的message属性的值。

7.单击左侧的Monitoring图标，然后单击ScriptLog以查看写入脚本日志的消息