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

2. Carnegie Mellon Heinz College
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. Carnegie Mellon Heinz College
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. Carnegie Mellon Heinz College
Source: IoTWF Steering Committee
Carnegie Mellon Heinz College

5. Carnegie Mellon Heinz College
Course Web Site
We will also use Canvas for grades and project submission.
Please use the discussion board rather than for course related communications
Carnegie Mellon Heinz College

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

7. Carnegie Mellon Heinz College
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)
Carnegie Mellon Heinz College

8. 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

9. Carnegie Mellon Heinz College
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.
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

10. Carnegie Mellon Heinz College
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

11. 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

12. Internet Protocol Suite
HTTP, Websockets, DNS, XMPP, MQTT, CoAp
Application layer
TLS, SSL
Application Layer (Encryption)
TCP, UDP
Transport
IP(V4, V6), 6LowPAN
Internet Layer
Ethernet, WiFi,
Link Layer
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. 12
Carnegie Mellon Heinz College
Carnegie Mellon Heinz College

13. 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 response or user interaction
may cause code to execute within
the browser
The request may
cause code to
execute on the server
Carnegie Mellon Heinz College

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

15. 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

16. Four Styles of HTTP Interaction Style(4)
Client (browser)
Server
Response includes
Websocket code in
javascript
peer
Bidirectional
Communication over
TCP/IP
peer
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

17. Carnegie Mellon Heinz College
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

18. 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

19. Carnegie Mellon Heinz College
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

20. 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

21. Carnegie Mellon Heinz College
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... }
var client = new XMLHttpRequest();
client.onreadystatechange = handler;
client.open("GET", "test.xml");
client.send();
Carnegie Mellon Heinz College

22. 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

23. 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

24. Carnegie Mellon Heinz College
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

25. 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