IoT Data Web App

In this tutorial, we'll collect and visualize data from "Internet of Things" (IoT) devices.  It will collect simple measurements using the Put Web Service, and can be customized to collect other information.

Video contains Royalty Free Music from Bensound

Watch the video above, or follow the step-by-step instructions below.

The Plan

1. Add a Base
2. Add a "Measurement" Content Type
3. Collect measurements using the Put Web Service
4. Review collected measurement in a List, Grid and on a Map

Add a Base

Like many webCOMAND projects, we will first create a Base to group our content and code.

1. Launch the Bases App.
2. Click Add Base (),  enter Title "Weather" and click Add.

Add a "Measurement" Content Type

Create a Content Type to collect weather measurements, such as air temperature and humidity.

1. Click the new "Weather" Base to open it.
2. Click Add Type (), enter Title "Measurement" and click Add.
3. Click Add Field (), then Date/Time.
4. In the Edit Field sidebar, enter the Title "Timestamp" and select Timestamp just above.
5. Click the Appearance tab above and check Show.
6. Click Add Field (), then Number.
7. In the Edit Field sidebar, enter the Title "Latitude" and select Decimal just above.
8. Repeat step 5 and 6 above, except with a Title "Longitude" and then "Value".
9. Click the Appearance tab above and check Show.
10. Click Approve above.

Collect Measurements using the Put Web Service

To receive measurements from an app, system or API that can be customized with a custom HTTP header and JSON body, we can use the built-in Put Web Service.

1. Launch the Users app.
2. Click Add User () in the top-left.
3. Enter the Username "weather_api".
4. Enter your email address for the Email.
5. Click the "Manage" tab above.
6. Check Active.
7. Expand Login Policy, uncheck webCOMAND Login Policy and check Web Services Token Authentication Policy.
8. Click Approve at the top.
9. Click Roles tab (second tab) in the bottom-left.
10. Click Add Role () in the top-left.
11. Enter the Title "Put Weather Measurements".
12. Check "weather_api" User under Users.
13. Click the Content tab above.
14. Click By Base icon on the left.
15. Make sure the Weather base is selected and click Write (), Add () and Approve () authorizations to the right of Measurement.  This will allow users with this Role to add Measurements to the Weather base.
16. Click the Privileges tab above.
17. Click the vertical dot menu to the right of Call Web Services on the right.
18. Check Put Service and close the popup.
19. Click Approve at the top.

Add a User Token to enable secure access for the new User and Role added above.

1. Launch the API app.
2. Click Add Query Tab > Web API Call > Put Service
3. Enter the following test Put Web Service request in the Data field.

   {
     "type": "COMAND",
     "version": "1.0",
     "contents": [{
       "Type": "Measurement",
       "Timestamp": "2023-01-01 12:32:00",
       "Latitude": 43.6484,
       "Longitude": -79.3764,
       "Value": 12
     },{
       "Type": "Measurement",
       "Timestamp": "2023-01-02 01:12:00",
       "Latitude": 43.6479,
       "Longitude": -79.3761,
       "Value": 132
     },{
       "Type": "Measurement",
       "Timestamp": "2023-01-03 11:24:00",
       "Latitude": 43.6477,
       "Longitude": -79.3758,
       "Value": 87
     }]
   }

4. Click +Create below to add a new User Token.
5. Select weather_api for the User and click +Create.
6. Note the Token above the +Create button, which will be required for authorization.
7. Click Options and enter the Parent: /Bases/Weather
8. Click Process

Review collected measurement in a List, Grid and on a Map

1. Launch the Bases App.
2. Click the Measurements tile to display all Measurements in List View.
3. Click the View menu () and Grid to display all Measurements in Grid View.
4. Click the View menu () and Map to display all Measurements in Map View.
5. Click Data Points > Value in the Map View toolbar to visualize Measurement Values.

• < PHP API
• Field Choices >