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

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

IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합
■시스템 구성 개요 및 관련 도구 설치하기
– Node.JS, MySQL 소개 및 설치
■ Open API 소개 및 설계
–RESTful Web API 의 설계 방법론 실습
■ Open API 구현
–온도 센서 on/off, 온도 값 획득 API 구현

Security
Sensing
•주변 상황 정보획득과 실시간 전달
Network
•사물과 인터넷 간의 연결
Service
•수집된 정보의 가공, 처리, 융합

■Get the source code: http://goo.gl/V5HJzo
–Please download the latest
※ Covers at day 2
Serial comm.
Open API

■Web App Development of IoT on Node.JS and MySQL
Serial comm.
Open API
※ Covers at day 2
※ Covers at day 3

■IoT requests, responses and human consumes
IoT
요청
IoT
응답
요청
응답
응답
요청
IoT
IoT
IoT
IoT
IoT
IoT
IoT
IoT
IoT
C
C
client

■ 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 예

■For Better Client-side Development
–http://webofthink.tistory.com/21
–also acceptable for the server-side development on Node.js

■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); } }

■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); }
}

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

■Uses TypeScript
–Compilable to JS
•For better & secure programming

■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);
})
 <script src="javascripts/api.ts.js"></script>

■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); })

■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);
});

■Node.js view engine
–Refer to http://blog.doortts.com/223
–Rewriting previous slide:

■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

■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

■Google Charts
–Line chart API document
•https://google- developers.appspot.com/chart/interactive/docs/gallery/linechart
■My temperature trends
–code @ public/javascripts/gchart.js

■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/

■온라인 회고 설문
–http://goo.gl/forms/mt2CdQuqxI
PLUS
+
MINUS
-
INTERSTING
I

■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

■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/

■W3C Web IDL
–http://www.w3.org/TR/WebIDL/
■widlproc
–https://github.com/dontcallmedom/widlproc
■REST to JavaScript for Better Client-side Development
–http://wsrest.org/2014/sites/default/files/wsrest2014_submission_ 5.pdf

■TypeScript
–http://www.typescriptlang.org/
■Jade
–http://jade-lang.com/
■ Google Charts
–https://developers.google.com/chart/

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (10)

Similaire à IoT Web App - 수집된 정보의 가공, 처리, 융합

Similaire à IoT Web App - 수집된 정보의 가공, 처리, 융합 (20)

Plus de Hyunghun Cho

Plus de Hyunghun Cho (7)

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