수집된 정보의 가공, 처리, 융합

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■시스템 구성 개요 및 관련 도구 설치하기

– Node.JS, MySQL 소개 및 설치

■ Open API 소개 및 설계

– RESTful Web API 의 설계 방법론 실습

■ Open API 구현

– 온도 센서 on/off, 온도 값 획득 API 구현

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

Security

Sensing

• 주변 상황 정보

획득과 실시간

전달

Network

• 사물과 인터넷

간의 연결

Service

• 수집된 정보의

가공, 처리,

융합

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■Get the source code: http://goo.gl/V5HJzo

– Please download the latest

※ Covers at day 2

Serial comm.

Open API

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

Security

Sensing

• 주변 상황 정보

획득과 실시간

전달

Network

• 사물과 인터넷

간의 연결

Service

• 수집된 정보의

가공, 처리,

융합

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■Web App Development of IoT on Node.JS and

MySQL

Serial comm.

Open API

※ Covers at day 2 ※ Covers at day 3

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■ IoT requests, responses and human consumes

IoT

요청

IoT

응답

요청

응답

응답

요청

IoT

IoT

IoT

IoT

IoT

IoT

IoT

IoT

IoT

C

C

client

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■ Sets of technologies that enable websites to

interact with each other by using REST, SOAP,

JavaScript and other web technologies.

– wikipedia (http://en.wikipedia.org/wiki/Open_API)

■Open API 예

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■For Better Client-side Development

– http://webofthink.tistory.com/21

– also acceptable

for the

server-side

development

on Node.js

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■Asynchronous JavaScript And XML (or JSON)

function ajaxGet(url:string, scb: Function, ecb: Function) { try { this.url = url; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { scb(xhr); } else { ecb(err); } } }; xhr.open('GET', url); xhr.send(); } catch (error) { ecb(error); } }

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■Asynchronous JavaScript And XML (or JSON)

function ajaxPut(url:string, scb: Function, ecb: Function) { try { this.url = url; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { scb(xhr); } else { ecb(err); } } }; xhr.setRequestHeader('Content-Type', 'application/json'); xhr.open('PUT', url); xhr.send(); } catch (error) { ecb(error); } }

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

Automatically created by widlproc.

widlproc parses the API design

document according to W3C Web IDL.

This document can be accessible on

your site also.

See the /openapi.html

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■Uses TypeScript

– Compilable to JS

• For better & secure

programming

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■TODO myapi = new OpenAPIManager(); myapi.sensors.retrieve(function (sensors) { for (var i = 0; i < sensors.length; i++) { var sensor = sensors[i]; sensor.turnOn(function() { logger.i(JSON.stringify(sensor)); if (sensor.type == 'thermometer') { sensor.getTempList(function (list) { console.log(list.length + ' temperatures are retrieved properly.'); }); } }); } }, function (err) { console.log('Unable to retrieve sensors due to ' + err); })

<!-- in HTML header or body --> <script src="javascripts/api.ts.js"></script>

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■Using my own thermometer

myapi = require('./api.ts.js').myapi; myapi.sensors.retrieve(function (sensors) { for (var i = 0; i < sensors.length; i++) { var sensor = sensors[i]; sensor.turnOn(function() { if (sensor.type == 'thermometer') { sensor.getLatestTemp(function (temp) { console.log(temp.value + ' ' + temp.unitOfMeasure); }); } }); } }, function (err) { console.log('Unable to retrieve sensors due to ' + err); })

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■Using nearby thermometers finder = require('./api.ts.js').finder; finder.findSensors('192.168.11.*', function (list) { console.log('The number of sensors is ' + list.length); for (var i = 0; i < list.length; i++) { var sensor = list[i]; sensor.turnOn(function() { if (sensor.type == 'thermometer') { sensor.getLatestTemp(function (temp) { console.log(temp.value + ' ' + temp.unitOfMeasure); }); } }); } console.log("total sensors: " + finder.nearbySensors.length); }, function (err) { console.log(err); });

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■Node.js view engine

– Refer to http://blog.doortts.com/223

– Rewriting previous slide:

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■See the code snippet of any site

– Go to your awesome site

– Press F12 (개발자 모드) > Sources

■Get open source code

– Go to github and find HTML5 code

• https://github.com/search?utf8=%E2%9C%93&q=html5

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■Get code from here:

– https://github.com/rheh/HTML5-canvas-projects/

– Select files in the thermometer folder

– Copy files to /public

■Add mode code to show latest temperature

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■Google Charts

– Line chart API document

• https://google-

developers.appspot.com/chart/interactive/docs/gallery/linechart

■My temperature trends

– code @ public/javascripts/gchart.js

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■Check your IP address of PC

– windows: ipconfig

– OS X and linux: ifconfig

■Open browser and enjoy your service

– enter http://{your IP address}:3000/

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

Security

Sensing

• 주변 상황 정보

획득과 실시간

전달

Network

• 사물과 인터넷

간의 연결

Service

• 수집된 정보의

가공, 처리,

융합

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■온라인 회고 설문

– http://goo.gl/forms/mt2CdQuqxI

PLU

S

+ M

INU

S

-

INTER

STIN

G

I

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■ DIoTY Enhancements

– duino module: http://webofthink.tistory.com/32

– MongoDB: http://www.mongodb.org/

– Service discovery: http://www.w3.org/TR/discovery-api/

– Security

• Authentication: https://github.com/ciaranj/node-oauth

• HTTPS: http://nodejs.org/api/https.html

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■ Multi-platform application development

– Apache Cordova: http://cordova.apache.org/

■ Cloud

– IBM bluemix: http://www-01.ibm.com/software/bluemix/

– MS Azure: http://azure.microsoft.com/ko-kr/

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■ W3C Web IDL

– http://www.w3.org/TR/WebIDL/

■ widlproc

– https://github.com/dontcallmedom/widlproc

■ REST to JavaScript for Better Client-side

Development

– http://ws-

rest.org/2014/sites/default/files/wsrest2014_submission_

5.pdf

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합

■ TypeScript

– http://www.typescriptlang.org/

■ Jade

– http://jade-lang.com/

■ Google Charts

– https://developers.google.com/chart/