AT&T Smart Cities With M2X & Flow Designer

Size: px

Start display at page:

Download "AT&T Smart Cities With M2X & Flow Designer"

Henry Greene
5 years ago
Views:

AT&T Smart Cities With M2X & Flow Designer Introduction... 2 FASTEST Way to Get Started... 5 Getting Started use Socket.io... 6 Getting Started Get Data / Polling.

1 AT&T Smart Cities With M2X & Flow Designer Introduction... 2 FASTEST Way to Get Started... 5 Getting Started use Socket.io... 6 Getting Started Get Data / Polling... 9 Add a New M2X Device and Create your own Flow Add your own M2X Device into our Smart City Ecosystem Testing a Device Trigger to an AT&T Smart City team device Example Test Application For Available Devices please see Devices Page AT&T Developer Forum Thread For Assistance Contact... 15

2 Introduction We have seeded our Smart City with various connected devices (people counters, fire hydrants, etc.). You can either use the sensor data from these devices or add your own devices. Traditionally in M2X, you add devices, connect the data streams, set up triggers, and deal mostly with devices using their individual unique device keys. For Smart City, we ve expanded that model by allowing you to subscribe to data streams based on tags that might encompass multiple devices, even if you don t know the specific device ids. You can get device data from multiple devices in our Smart City based on tags. Tags can be location based or subject based. If you choose to add your own devices then you decide. Publish / Subscribe To make life easier, we built a basic pub/sub architecture using Socket.io and Flow Designer. There is a Smart City node that contains a Socket.io server. You simply connect to this server, emit tags that you wish to subscribe to, and listen for events that come down the pipe. All of the devices we have set up in the model smart city funnel data through a Smart City node which you can connect to using Socket.io: If you would like more info about Socket.io, check out If you don t want to use Socket.io, that s ok too. We ve created a Smart City client node that you can drop into Flow Designer and hook up to any other type of node (such as a websocket node, etc.). Alternatively, you can connect directly to M2X using via a Flow Designer M2X node, or by connecting directly to the M2X APIs. We re flexible. More about Tags Tags are emitted back to the smart city node in an array. For example, if you wanted to subscribe to events for devices with tags of either temperature or midtown, you would emit [ temperature, midtown ]. This comma-delimited array (,) would subscribe you to any device that has a tag that matches either temperature or midtown. This is or matching. If you want to subscribe to devices that have tags that match both temperature and midtown, you would emit [ temperature+midtown ]. Adding a plus sign (+) would subscribe you to events from devices that have both tags. This is and matching. Notice the plus sign is part of a string inside an array of n- length. Wildcards: Currently we support an asterisk (*) as a wildcard character. You can use an asterisk at the beginning ( *town ), end ( temp* ), or both beginning and end ( *emp* ). In addition, emitting just an asterisk [ * ] will subscribe to all events regardless of device tag. In the future we might support regex matching but don t currently. For available tags in our Smart City instance, go to:

3 How our smart city node works: 1. Emit tags from your app 2. Listen for events

4 How our smart city client works: The smart city client manages the Socket.io connection for you. Configure it to point to the URL of a smart city node, and enter tags you wish to subscribe to.

5 FASTEST Way to Get Started 1. Create a Flow Designer account at 2. Add a smart city client node Drag a smart city client node from the palette to your flow. 3. Specify url & tags (use ) (use * in Tags if you want to subscribe to all events) 4. Receive Smart City device events You ll receive events from the smart city node located at the url you specified above

6 Getting Started use Socket.io <script src=" > 1. Using Socket.io, connect to var socket = io(" {path: /f3d5e7227fb53/6ec7d / d798e81/in/flow/events"; 2. Emit array of tags back to server socket.emit('tags', ["midtown","atlanta","puppies"]); 3. Listen for 4 types of messages message - human readable string - usually corresponds to tags being emitted or events being received event - json object that represents onchange event from M2X tags - tags you are currently subscribed to availabletags - all available tags for this Smart City Instance // listen for messages socket.on("message", function(message) { console.log("received socket.io message:", message); // listen for events socket.on("event", function(message) { console.log("event:", message); // listen for subscription tags socket.on("tags", function(message) { console.log("tags", message); // listen for available tags socket.on("availabletags", function(message) { console.log("availabletags", message); 4. You can get a list of all available tags by emitting availabletags socket.emit('availabletags');

7 JavaScript Example: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initialscale=1.0, user-scalable=no"> <script src=" <script src=" t> <title>example App</title> </head> <body> <h2 id="title">example App</h2> <div id="event-list" style="color: #000000"></div><br/> <div id="controls"> <input type="text" id="set-tags-text" style="display: inline-block"> <button id="set-tags-btn" onclick="settags()" style="display: inline-block">set tags</button><br> <input type="text" id="add-tags-text"style="display: inline-block"> <button id="add-tags-btn" onclick="addtags()" style="display: inline-block">add tags</button><br> <input type="text" id="remove-tags-text"style="display: inline-block"> <button id="remove-tags-btn" onclick="removetags()" style="display: inline-block">remove tags</button><br><br> <button id="remove-all-tags-btn" onclick="removealltags()">remove all tags</button> <button id="get-tags-btn" onclick="gettags()">get tags</button> <button id="available-tags-btn" onclick="availabletags()">available tags</button> <br/> </div> </body> <script> // path to socket.io server var path = "/f3d5e7227fb53/6ec7d / d798e81/in/flow/events"; // socket.io connection var socket = io(" {path: path // on connect socket.on("connect", function() { console.log("socket connected"); // subscribe to tags (use ['*'] for all) socket.emit('tags', ["midtown","atlanta","puppies"]); //socket.emit("tags", ["*"]); // listen for messages socket.on("message", function(message) { console.log("received socket.io message:", message); $("#event-list").append(message + "<br/>"); // listen for events socket.on("event", function(message) { console.log("event:", message); // listen for subscription tags socket.on("tags", function(message) { console.log("tags", message); // listen for available tags socket.on("availabletags", function(message) { console.log("availabletags", message); // socket error

8 socket.on("error", function(message) { console.log("error", message); // socket connect error socket.on("connect_error", function(message) { console.log("connect_error", message); // socket reconnect error socket.on('reconnect_failed', function(message) { console.log("reconnect_error", message); // emit set tags message function settags() { var tags = $("#set-tags-text").val().split(","); socket.emit('tags', tags); $("#set-tags-text").val(""); } // emit add tags message function addtags() { var tags = $("#add-tags-text").val().split(","); socket.emit('addtags', tags); $("#add-tags-text").val(""); } // emit remove tags message function removetags() { var tags = $("#remove-tags-text").val().split(","); socket.emit('removetags', tags); $("#remove-tags-text").val(""); } // emit empty tags function removealltags() { socket.emit('tags', []); } // get current subscriptions function gettags() { socket.emit('tags'); } // emit request for available tags function availabletags() { socket.emit('availabletags'); } </script> </html>

9 Getting Started Get Data / Polling 1. Create Flow Designer account at 2. Add M2X Node 3. Add a new feed 4. Give it a name and leave api key blank since we re using public devices 5. Go to the M2X public catalog 6. Type SC- in the research box. Search for devices that begin with SC-. Click on a device starting with SC- to see access details.

10 Add a New M2X Device and Create your own Flow 1. Create Flow Designer account at 2. Create New Project 3. Add http input node 4. Add http response node 5. Connect Nodes 6. Deploy to sandbox

7. Enter Online Mode 8. Select endpoints Tab (note the URL) 9. Create acct in m2x at https://m2x.

11 7. Enter Online Mode 8. Select endpoints Tab (note the URL) 9. Create acct in m2x at Create device 11. Add Device name & Tags 12. Add stream 13. Add trigger for EVERY stream

12 o Name o Select stream o Condition On Change o Callback url (use Callback URL from Step 7) o continuous frequency 14. Test trigger - Clicking the Test Trigger button, under actions, - This will trigger the call in Flow Designer

13 15. Add a smart city node, wire it to the HTTP POST node from step Connect your app to the smart city node. Emit tags, listen for events 17. For fun, try to wire a smart city client into your smart city node, effectively chaining 2 smart city Flow instances together. To wire in events from our smart city flow, use the following URL Note: msg.payload is for debug purposes

14 Add your own M2X Device into our Smart City Ecosystem 1. In M2X, edit your device 2. Add a tag to your device that begins with sc- (or SC- ). This is how we flag smart city devices. Your device must have at least one tag that begins with sc-. It can have as many tags as needed, and they don t all have to start with sc- as long as at least one does. 3. Set Visibility to Public Device 4. Add a trigger for EVERY data Stream into M2X. 5. Set condition to On Change 6. Set callback URL to 7. Set Notification Frequency to Continuous That s it, these devices will now send on change events to our Smart City Flow Designer instance, and events can be subscribed to using Socket.io at

Testing a Device Trigger to an AT&T Smart City team device http://run-west.att.io/daa244d6cabbb/f812823805c2/36016024ad8ff4e/in/flow/wwwroot/postvalue.

(Running on your local web instance is fine). Enter * in the add tags field Click add tags You are now subscribed to a feed of all the smart city devices that has a tag that begins with sc-.

html running in Chrome, inspect element, and select console tab. For Available Devices please see Devices Page http://developer.att.

15 Testing a Device Trigger to an AT&T Smart City team device Example Test Application Here s an example test application. Clone Start up index.html from the Public folder. (Running on your local web instance is fine). Enter * in the add tags field Click add tags You are now subscribed to a feed of all the smart city devices that has a tag that begins with sc-. Through this, you are essentially subscribing to all the devices that are public, has the tag beginning with sc-, and any other parameters you add. Hint: With index.html running in Chrome, inspect element, and select console tab. For Available Devices please see Devices Page AT&T Developer Forum Thread We will be monitoring the Smart City thread under M2X. For Assistance Contact Jonathan Davis jad@att.com Virginia Ng Virginia.Ng@att.com Joanie Twersky joanie.twersky@att.com

Lab 4: create a Facebook Messenger bot and connect it to the Watson Conversation service

Lab 4: create a Facebook Messenger bot and connect it to the Watson Conversation service Overview In this lab, you'll create advanced Node-RED flows that: Connect the Watson Conversation service to Facebook