iot web app - 수집된 정보의 가공, 처리, 융합
Post on 19-Jun-2015
1.274 Views
Preview:
DESCRIPTION
TRANSCRIPT
수집된 정보의 가공, 처리, 융합
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/
top related