Build a Basic ThingWorx Mashup

Transcription

1 Build a Basic ThingWorx Mashup

2 Project Introduction Overview In this project you will create a simple mashup in ThingWorx, PTC s industry leading IoT platform. The project introduces basic skills in modeling an IoT solution and visualizing data in an application using the ThingWorx mashup tool. 2hrs Beginner Computer Science, Development, IT Created by PTC Academic Program English Language Audience This project is intended for anyone who is interested in an introductory experience with ThingWorx. Coding skills or product development expertise are not required. Project Milestones 1. Setup the project (0.5 HR) 2. Model ThingWorx architecture (0.5HR) 3. Build a simple mashup (1HR) Pre-requisites and Requirements No prior training is required A computer with internet connection Access to ThingWorx Composer (Need access? Learn about your options here) Build a Basic ThingWorx Mashup 1

3 How can I get access to the ThingWorx Composer? This project is built to be used in any ThingWorx Composer version. According to your role you may have different options to access ThingWorx. Please read below: For the individual developer If you are using this project to get you started with IoT and ThingWorx on your own you have the following options: 1. Hosted 30-day instance: Get a free temporary ThingWorx hosted instance through the Developer Portal. 2. Downloadable 120-day instance: Get free temporary access to a local instance of ThingWorx. For information on both options please visit the ThingWorx Developer Dashboard. For the classroom If you would like to use this project in the classroom, you can obtain access to our platform using the ThingWorx Academic Edition. For more information the ThingWorx Academic edition, contacts us at university@ptc.com. For commercial customers If you are using this project to learn how to use the ThingWorx composer in a commercial environment you can build this project using your commercial instance. Interested on ThingWorx for your company? Visit for more information. Build a Basic ThingWorx Mashup 2

4 Model Summary ThingWorx is a rapid, model-based application development platform. By employing modeling instead of coding, the content developer is able to focus on agility and application composition, rather than debugging, maintaining, and updating code. The model artifacts become a set of reusable building blocks to assemble new applications. After you have your model in place, you can assemble the data, services, and capabilities of the model into a web application via the drag and drop Mashup Builder. Objectives Model a Model Tag that will categorize and label all entities within this project. Model a Thing that will represent physical assets by adding specific properties. Outcome A Model Tag that will help categorize and group entities in this project. A Thing that will contain data and will perform Services. Create a Model Tag ThingWorx Model Tags are a mechanism to label ThingWorx objects and data to assist in grouping, filtering, and locating ThingWorx objects and searching/finding data efficiently. They are a combination of a vocabulary and a specific term. A tag is shown as [Vocabulary: Term] and they can be used to create a relationship between many different ThingWorx entities. A vocabulary is a list of words or identifiers used to describe a particular concept or thing. They can contains multiple vocabulary terms. An example of a vocabulary would be Colors or Locations. A term is a word used to describe a thing or to express a concept. Some examples of vocabulary terms of the Colors vocabulary are red, blue, and green. For Locations, it might be city names. 1. On the Home tab, Modeling section, select Model Tag and click New. Build a Basic ThingWorx Mashup 3

5 2. Enter the Name (AcademicProjects) and Description for the new model tag in the General Information section and save it. 3. Click the Edit button to get back to editing mode. Select the Manage Terms option. 4. Add a new term by typing in the box (SimpleProject) and click the Add Term button. Then click Done. 5. Click Save again to save the model tag with the new term. Build a Basic ThingWorx Mashup 4

6 Create a Thing The ThingWorx application development environment operates on an object or thingdriven model, which means that you represent your process or physical assets in terms of Things that have properties and business logic. All things are based on Thing Templates. When you create a Thing, you can base it off of a custom template, one of the built-in thing templates, or the generic template. Creating a Thing using the generic template creates a thing with no inherited properties. 6. On the Home tab, Modeling section, select Things and click New. 7. Enter the name (SimpleMashupThing) in the Name section. 8. Tag the entity by typing the name in the Model Tag section (AcademicProjects: SimpleMashup) and selecting the tag from the Search Results dialog box. 9. Allocate a Generic Thing Template by typing Generic and selecting the template from the dialog box list. Build a Basic ThingWorx Mashup 5

7 Add Properties to a Thing 10. Select Properties from the Entity Information section. 11. Click Add My Property. 12. Complete the fields as follows: Name: Temperature Base Type: Number 13. Click Done and Add. 14. Complete the fields as follows: Name: Humidity Base Type: Number 15. Click Done. 16. Click Save on the top of the screen. *This concludes the Model section of this Project* Build a Basic ThingWorx Mashup 6

8 Build Summary The Mashup Builder is the tool used to create your visualization web pages in ThingWorx, and is where individual Mashups are defined. The Mashup Builder is designed to be used by a content developer who has knowledge of the implemented ThingWorx model. It allows you to combine the data services available within ThingWorx with a set of visualization components, called Widgets, to create unique web pages that can combine data from multiple sources. Objectives Add different widgets to a Mashup and understand their uses. Load Services from a Thing into a Mashup and understand their purpose. Bind Widgets with Services and properties to create a functional Mashup. Outcome A functional Mashup that will set and display value properties given by the user. Create a Mashup Mashup is the term used for a web page that allows you to visualize and interact with the model you have defined. Mashups typically integrate information from multiple sources bringing information together, potentially exposing relationships or giving new meaning to your model data. 1. On the Home tab, Visualization section, select Mashups and click New. Build a Basic ThingWorx Mashup 7

9 2. Leave predetermined settings (Mashup Type: Page, Layout Options: Responsive) and click Done. 3. Click the Info button on the top of the screen. 4. Enter the name (SimpleMashup) in the Name section. 5. Tag the entity by typing the name in the Model Tag section (AcademicProjects:SimpleMashup) and selecting the tag from the dialog box. 6. Click Save on the top of the screen. 7. Click Edit on top of the screen, then click Design. Build a Basic ThingWorx Mashup 8

10 Add Widgets to a Mashup A Widget is a visual element you can place in a Mashup that understands how to display information formatted in a useful way. Table Widgets know how to format the rows of data in your model as an HTML table. Map Widgets know how to display your position on a map from your latitude and longitude. Mashups are composed of multiple widgets that work together to display information. The Layout widget is a responsive container that allows you to separate a responsive container into sections. Layouts can be placed inside the responsive containers of other layouts to create more even sections. The Header and Footer have constant heights with responsive widths; while the sidebars have a constant width and responsive heights. Columns and rows have both responsive widths and heights, but you can change the percent of available space they will occupy relative to the space not being occupied by headers, footers, and sidebars. 8. On the Widgets tab (left side of the screen), filter and/or find the Layout widget. 9. Drag the Layout widget from the Widgets tab and drop it on the white working area in the center of the screen. Leave predetermined settings (Layout: Horizontal, Options: 2 columns no sidebars) and click Done. Build a Basic ThingWorx Mashup 9

11 10. Drag another Layout widget from the Widgets tab and drop it on the left rectangle in the working area. Select a vertical layout and leave the Layout Options as default (Two rows, no header or footer). 11. Drag another Layout widget from the Widgets tab and drop it on the right rectangle in the working area. Select a vertical layout and leave the Layout Options as default (Two rows, no header or footer). The Panel widget is a container. Place other widgets into a Panel and move them around as a group. You can also use a Style to change the background color of a Panel to add contrast to your Mashup. All widgets placed in the Panel are relative to the Panel location. 12. On the Widgets tab, filter and/or find the Panel widget. 13. Drag the Panel widget from the Widgets tab and drop it on the top left rectangle on the working area. 14. Drag another Panel widget from the Widgets tab and drop it on the top right rectangle on working area. The Gauge Widget is a single needle gauge. You can define how many sections, or intervals, the Gauge has and different color schemes for each interval. 15. On the Widgets tab, filter and/or find the Gauge widget. 16. Drag the Gauge widget from the Widgets tab and drop it on the bottom left rectangle on the working area. Build a Basic ThingWorx Mashup 10

12 17. Drag another Gauge widget from the Widgets tab and drop it on the bottom right rectangle on the working area. 18. On the Widgets tab, filter and/or find the Numeric Entry widget. 19. Drag the Numeric Entry widget from the Widgets tab and drop it on the top left Panel on the working area. 20. Drag another Numeric Entry widget from the Widgets tab and drop it on the top right Panel on the working area. NOTE: You will notice you can place the Numeric Entry widgets anywhere inside their respective rectangles, as well as resize them. The Numeric Entry widget limits the user input to numeric values only. The values will be range limited to numbers between the minimum and maximum values if the ConstrainValue property is true. The decimal places will be limited as well to the number of FixedDigits, if the value of FixedDigits is greater than zero. There is an option to allow or disallow negatives using the AllowNegatives property. 21. Select the Numeric Entry widget on the left side. Once selected go to the bottom left part of the screen to the list of properties for the selected widget (Numeric Entry in this case). 22. Filter and/or search for the Label property. Type Temperature in the text box and hit Tab or Enter, notice the change on the working area. 23. Select the Numeric Entry widget on the right side, once selected go to the bottom left part of the screen to the list of properties for the selected widget (Numeric Entry in this case). 24. Filter and/or search for the Label property. Type Humidity in the text box and hit Tab or Enter. Notice the change on the working area. Build a Basic ThingWorx Mashup 11

13 The Button widget raises an event when clicked. 25. On the Widgets tab, filter and/or find the Button widget. 26. Drag the Button widget from the Widgets tab and drop it on the top left Panel on the working area. Resize and place button as you want. 27. Select the Button widget, once selected go to the bottom left part of the screen to the list of properties of the selected widget (Button). 28. Filter and/or search for the Label property. Type Set/Get Properties in the text box and hit Tab or Enter. Notice the change on the working area. Build a Basic ThingWorx Mashup 12

14 Bind Widgets and Services ThingWorx Data Services are called to get data into a mashup and then render the data using a visualization widget. To render any data in a mashup, you need to add one or more Data Services to the mashup. One Data Service can feed multiple visualization widgets. This minimizes the amount of data calls to the server. Most widgets are configurable so that only the columns of data from the Data Service that you want to see in that widget are shown. 29. On the Data tab (right side of the screen), click the green plus sign to the right of the tab. 30. On the pop-up window, Select Entity section, start typing the name of the thing you created (Simple Weather Thing) and select it from the Search Results box. Build a Basic ThingWorx Mashup 13

15 A Service is needed to access data since at runtime, data from a Thing must be transported to the web browser, and then the web browser makes a service call to request the current service values of the Thing to display in the widgets. Any service you define on a Thing can be bound to and called from a widget. 31. On the Select Services section, type GetProperties to filter the Get Properties service. 32. Click the blue arrow pointing right to select the Get Properties service. 33. Select the Mashup Loaded? checkbox. Mashup Loaded? allows making a Service call as soon as all widgets on the web page have finished loading. The main purpose of this service call is to fetch the data to initially populate widgets. 34. On the Select Services section, type SetProperties to filter the Set Properties service. 35. Click the blue arrow pointing right to select the Set Properties service. 36. Click Done. Build a Basic ThingWorx Mashup 14

16 37. Expand both red service bars on the right side of the screen by clicking on the + icon next to the name of each service. 38. Bind the Numeric Entry widgets: a. Click the Temperature Numeric Entry, hover over the left arrow of the widget and select Value from the dropdown list. b. Drag the Value option and drop it over the Temperature property under the SetProperties service red bar. c. Next, click the Humidity Numeric Entry, hover over the left arrow of the widget and select Value. d. Drag the Value option and drop it over the Humidity property under the SetProperties service red bar. NOTE: If the bindings are correct, the arrows next to the Temperature and Humidity properties under the Set Properties red bar will be black. Also, the Connections tab in the bottom part of the screen will show the connections or bindings between the Numeric Entry widgets and the properties from the Set Properties service. Build a Basic ThingWorx Mashup 15

17 39. Bind the Gauge widgets: a. Drag the Temperature property under the GetProperties service red bar and drop it on the Gauge on the left side of the working area. b. Select Data as the Binding Target in the pop-up window. c. Next, drag the Humidity property under the GetProperties service red bar and drop it on the Gauge on the left side of the working area. d. Select Data as the Binding Target in the pop-up window. Build a Basic ThingWorx Mashup 16

18 NOTE: If the bindings are correct, the arrows next to the Temperature and Humidity properties under the Get Properties red bar will be black. Also, the Connections tab in the bottom part of the screen will show the connections or bindings between the Gauge widgets and the properties from the Get Properties service. 40. Bind the Button widget: a. Click the Set/Get Properties button, hover over the left arrow of the widget and select Clicked from the dropdown list. b. Drag the Clicked option and drop it over the SetProperties service red bar. c. Drag the Clicked option and drop it over the GetProperties service red bar. Build a Basic ThingWorx Mashup 17

19 NOTE: If the bindings are correct, the arrows next to both red service bars will be white. Also, the Connections tab in the bottom part of the screen shows the connections or bindings between the Button widget and both the GetProperties and SetProperties services. 41. Click Save on the top of the screen. 42. Click View Mashup. Additional Resources Other Projects: Connect Raspberry Pi to ThingWorx Do you want to learn more about ThingWorx? Visit our webpage for more information about the Academic Program at PTC. Other Resources: Learn the Fundamentals of IoT Development with ThingWorx on Udemy Questions? Join us in the ThingWorx Community Site Build a Basic ThingWorx Mashup 18