IoT 관련 App IN 세미나 4차의 preview 자료입니다. 이번 세미나에서는 REST to JavaScript API를 만들고 이를 이용해 손쉽게 HTML5 web app를 만들어 봅니다.

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

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

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

5. IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합
■Get the source code: http://goo.gl/V5HJzo
–Please download the latest
※ Covers at day 2
Serial comm.
Open API

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

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

8. IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합
■IoT requests, responses and human consumes
IoT
요청
IoT
응답
요청
응답
응답
요청
IoT
IoT
IoT
IoT
IoT
IoT
IoT
IoT
IoT
C
C
client

9. 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 예

10. IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합
■For Better Client-side Development
–http://webofthink.tistory.com/21
–also acceptable for the server-side development on Node.js

11. 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); } }

12. 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); }
}

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

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

15. IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합
■Uses TypeScript
–Compilable to JS
•For better & secure programming

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

17. 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); })

18. 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);
});

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

21. IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합
■Node.js view engine
–Refer to http://blog.doortts.com/223
–Rewriting previous slide:

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

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

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

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

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

27. IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합
■온라인 회고 설문
–http://goo.gl/forms/mt2CdQuqxI
PLUS
+
MINUS
-
INTERSTING
I

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

29. 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/

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

31. IoT Web App Dev. – 수집된 정보의 가공, 처리, 융합
■TypeScript
–http://www.typescriptlang.org/
■Jade
–http://jade-lang.com/
■ Google Charts
–https://developers.google.com/chart/