95-733 Internet of Things

1. 95-733 Internet of Things Lecture 1: Introduction Carnegie Mellon Heinz College

2. Two Killer Apps • 1) The World Wide Web - TCP/IP from Bob Kahn and Vince Cerf 1973 • Tim Berners-Lee invents URI’s, HTTP, HTML and Browsers August 6, 1991 Open & royalty free • TBL receives the 2016 ACM A.M.Turing Award • 2) The Internet of Things • Gartner predicts the Internet of Things will grow to 26 billion units by 2020 • In this course, we will apply principles from the web to the IoT. The focus will be on the Web of Things. Carnegie Mellon Heinz College

3. IoT Definitions • The Internet of Things is a system of physical objects that can be discovered, or interacted with by electronic devices that communicate over various networking interfaces and eventually can be connected to the wider internet. • A Thing may be a sensor or actuator. It may be able to execute computations and or communicate over wired or wireless interfaces. • A Thing may be tagged (passive) or connected. • Definitions from “Building the Web of Things” Guinard and Trifa Carnegie Mellon Heinz College

4. Source: IoTWF Steering Committee Carnegie Mellon Heinz College

5. IoT and The Blockchain “The magic of blockchain in general is it allows us to exchange assets without having a trusted intermediary in between us. The IoT space has opportunity to deploy blockchain, and in doing so, it’s seeking some of the same capabilities the financial services industry has attempted to realize, including introducing trust amongst a collection of parties.” Mike Reed, director of Intel’s Blockchain Office Carnegie Mellon Heinz College

6. Course Web Site • http://www.andrew.cmu.edu/~mm6 • We will also use Canvas for grades and project submission. • Please use the discussion board rather than email for course related communications Carnegie Mellon Heinz College

7. Prerequisites • The ability to program in Java • Enthusiasm for programming • Interested in the Web and IoT technologies Carnegie Mellon Heinz College

8. Quick list of topics • Netbeans, Glassfish • Interaction patterns • Java servlets • JavaScript and Wiring • Message Formats: JSON, JSON-LD, HAL, and XML • AJAX, JSONP, Websockets, Webhooks • RESTful design • HTTP, MQTT, XMPP, CoAp, Bluetooth Low Energy, Edge Analytics using Apache Edgent • Microcontrollers (Particle Photon) • Beacon technology (Ibeacon and Eddystone) • OpenChirp https://github.com/OpenChirp/docs/wiki Carnegie Mellon Heinz College

9. Structure of the Course • Lectures/class participation • Review session – hands on with technologies • Readings from text and primary sources, i.e., journal articles assigned • Projects (programming) • Quizzes at start of every class. For next week, Quiz 1 covers ”Enabling the Internet of Things”. • Final examination Carnegie Mellon Heinz College

10. Readings • Readings from primary sources will be assigned • If you are new to web technologies, read the text or work with Lynda video training. • For this week read “Programming the World Wide Web”, 8th ed. Chapters 1, 2 and 3. • For next week read “Programming the World Wide Web”, 8th ed. chapters 4, 5 and 10. • Chapters 4 and 5 are on JavaScript • Chapter 10 covers AJAX. • Read Chapter 1 of “Building the WoT. • Whether you are new or not, read the article by Philip McCarthy of IBM on AJAX • Watch the video from Oracle on Websockets (see the course schedule). • Get the websocket code running on Netbeans. Carnegie Mellon Heinz College

11. Grading • Homework/Programming (4) 50% • One of three projects designed by student teams • Quizzes 10% (one low quiz score will be dropped) • Final Exam 40% Carnegie Mellon Heinz College

12. Plan for this week and next • Study four important styles of client server interaction that we find using HTTP. • Explore some details on the last three styles. • You should begin working on Project 1 right away. And get ready for next week’s quiz. Carnegie Mellon Heinz College

13. Internet Protocol Suite Principles: Layering, modularity, separation of concerns Each layer focuses on a particular set of concerns and abstracts these concerns from the layer above. In this course, we will mainly study the application layer. 13 Carnegie Mellon Heinz College Carnegie Mellon Heinz College

14. Four Styles of HTTP Interaction Style(1) Client (browser) get request Server http/tcp/ip response may include html, css, javascript html may includes hyperlinks The request may cause code to execute on the server The response or user interaction may cause code to execute within the browser Carnegie Mellon Heinz College

15. Four Styles of HTTP Interaction Style(2) Client (browser) Server API Data provided as needed Asynchronous (non-blocking) javascript and xml (AJAX) No need for a full page refresh Same origin policy enforced by browser Carnegie Mellon Heinz College

16. Four Styles of HTTP Interaction Style(3) Client (browser) Server Response includes code to cause additional requests to others. For example, an <img> tag is returned. This causes an HTTP Get to occur elsewhere. Javascript object notation with padding (jsonp). No longer restricted to the the same origin. Upon return, a callback is executed. Carnegie Mellon Heinz College

17. Four Styles of HTTP Interaction Style(4) Client (browser) Server Response includes Websocket code in javascript peer peer Bidirectional Communication over TCP/IP Once the socket is established, the server may initiate the interaction. Uses: Web - collaboration apps without polling, & IoT - very fast binary. Carnegie Mellon Heinz College

18. AJAX (Style 2) • The traditional web employed thin clients. • With AJAX, downloaded code interacts with the server asynchronously. The client does not block. • This makes for a more responsive user experience. • Single page applications are possible. This is widely used. Carnegie Mellon Heinz College

19. Since we are developing in Java we need to know… • A servlet is Java code that runs on the server when an HTTP request arrives. • A Java Server Page (JSP) is XHTML+ Java and is compiled to a servlet. • JavaScript is not Java and runs in the browser. Carnegie Mellon Heinz College

20. Typical AJAX interaction pattern This is a UML sequence diagram. This shows a typical AJAX round trip. A solid arrowhead represents a synchronous call. A stick arrowhead represents an asynchronous signal. Carnegie Mellon Heinz College

21. Javascript Example 1 (W3C) Some simple JavaScript code to do something with data from an XML document or JSON string fetched over the network: function test(data) { // taking care of data } Carnegie Mellon Heinz College

22. function handler() { if(this.readyState == 4 && this.status == 200) { // so far so good if(this.responseXML != null && this.responseXML.getElementById('test').firstChild.data) // success! test(this.responseXML.getElementById('test').firstChild.data); else test(null); } else if (this.readyState == 4 && this.status != 200) { // fetched the wrong page or network error... test(null); } } var client = new XMLHttpRequest(); client.onreadystatechange = handler; client.open("GET", "test.xml"); client.send(); Carnegie Mellon Heinz College

23. Javascript Example 2 (W3C) If you just want to ping the server with a message you could do something like: function ping(message) { var client = new XMLHttpRequest(); client.open("POST", "/ping"); client.send(message); } We are not establishing a callback handler. We are not interested in a response. Carnegie Mellon Heinz College

24. Javascript Example 3 (W3C) Or, if you want to check the status of a document on the server, you can make a head request. function fetchStatus(address) { var client = new XMLHttpRequest(); client.onreadystatechange = function() { if(this.readyState == 4) returnStatus(this.status); } client.open("HEAD", address); client.send(); } Carnegie Mellon Heinz College

25. State and State Change The state of the object. The readyState attribute must be one of the following values: 0 Uninitialized The initial value. 1 Open The open() method has been successfully called. 2 Sent The user agent successfully acknowledged the request. 3 Receiving Immediately before receiving the message body (if any). All HTTP headers have been received. 4 Loaded The data transfer has been completed. When readyState changes value a readystatechange event is to be dispatched on the XMLHttpRequest object. Carnegie Mellon Heinz College

26. AJAX Typical Interaction post JavaScript function XML XMLHTTPRequest handler - Executed on state change. - this.responseXML points to the root of the XML • write HTML to HTML DOM HTML Button Carnegie Mellon Heinz College