Mean 스택을 사용한 IoT 개발

+
MEAN 스택을 사용한 IoT 개발
박재호(jrogue@gmail.com)

+
bonescript
n  Beagle Bone에서 아두이노 스타일의 프로그램이 가능하게 만들어
주는 자바스크립트 라이브러리

+
heimcontrol.js(1)
Raspberry PI and Arduino using Node.js

+
heimcontrol.js(2)
Socket.io(for Websockets)
Requirejs
HTML5/CSS3
Jade(for
templating)

+
Node.js인 이유는?(2)
n  개발 시간과 성능의 조화
n  아무리 성능이 좋더라도 개발 시간이 오래 걸릴 경우 생산성이 떨어진다
n  주의: 1행을 작성하는 시간은 어셈블리나 SQL이나 비슷하다
n  스크립트 언어의 경우 빨리 개발은 가능하지만 성능이 떨어진다
n  자바스크립트를 사용한 Node.js는 개발과 성능 양쪽 모두 뛰어나다
n  스타트업 vs 기업
n  스타트업은 빨리 변화하는 생태계에서 살아남기 위해 필연적으로 오픈
소스에 매진한다
n  대기업은 유지보수와 안정성, 그리고 성능에 관심이 많다
n  Node.js는 양쪽 모두를 만족시킨다(오픈 소스 기반, 자바와 같은 강력한
생태계)

+
Node.js인 이유는?(3)
n  뛰어난 성능
n  월마트는 블랙 프라이데이에 Node.js로 전제 모바일 사이트 오픈
n  초당 두 배 요청을 받아들이고 응답시간을 35%(200ms) 줄임
n  서버 CPU 사용량이 2%, 200만 명 온라인 접속 방어
n  이벤트 아키텍처
n  스레드가 아닌 단일 프로세스
n  대신 동기식 차단이 아닌 비동기식 I/O
n  웹 브라우저 특성상 이미 자바스크립트는 콜백을 사용하는 이벤트 구
동 방식을 지원(비동기식 코드에 대한 표현력이 강함)

+
동기식 입출력 vs 비동기식 입출력

+
멀티 스레드 vs 단일 스레드

+
선행조건
n  MEAN 기본 스택 준비
n  Node.js 설치: http://nodejs.org/
n  MongoDB 설치: http://www.mongodb.org/
n  자바스크립트 편집기는 brackets 추천: http://brackets.io/
n  예제 소스 코드 저장소 위치
n  Node.js용 node-collector: https://bitbucket.org/jrogue/node-
collector
n  AngularJS용 angular-lamp-app: https://bitbucket.org/jrogue/
angular-lamp-app

+
무엇을 만들어볼까?
lamp 관리 시스템

+
첫 Node.js 프로그램: /
server_plain_vanilla.js
/*jslint node: true */
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello Worldn');
}).listen(3000, '127.0.0.1');
console.log('Server running at http://127.0.0.1:3000/');

+
Node.js 프로그램을 위한 패키지 설
정: /package.json
{
"name": "node-collector",
"private": true,
"version": "0.1.0",
"description": "A starter project for Node.js",
"license": "MIT",
"devDependencies": {
"express": "4.x",
"body-parser": "1.4.x“,
"mongoose": "^3.8.20"
}
}

+
Node.js를 사용한 첫 RESTful 프로그
램: /server.js
var express = require('express');
var app = express();
app.get('/lamps', function(req, res) {
res.send([{name: 'lamp1'}, {name: ‘lamp2'}]);
});
app.get('/lamps/:id', function(req, res) {
res.send({id:req.params.id, name: "lamp" + req.params.id, status: "lamp
ready"});
});
app.listen(3000);
console.log('Listening on port 3000...');

+
Node.js 모듈 사용: /routes/lamps.js
exports.findAll = function (req, res) {
res.send([{name: 'lamp1'}, {name: 'lamp2'}, {name: ‘lamp3'}]);
};
exports.findById = function (req, res) {
res.send({id: req.params.id, name: "lamp" + req.params.id, status: "lamp
ready"});
};
var express = require('express'),
bodyParser = require('body-parser'),
lamps = require('./routes/lamps.js');
app.get('/lamps', lamps.findAll);
app.get('/lamps/:id', lamps.findById);
app.listen(3000);

+
몽고DB 연동을 위한 준비: /db.js
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/lamps', function () {
console.log('mongodb connected')
});
module.exports = mongoose;

+
몽고DB 모델 생성: /models/lamp.js
var db = require('../db');
var Lamp = db.model('Lamp', {
lampname: { type: String, required: true },
status: { type: String, required: true },
date: { type: Date, required: true, default: Date.now }
});
module.exports = Lamp;

+
Node.js 모듈 내용 변경(1): /routes/
lamps.js
var Lamp = require('../models/lamp');
exports.addLamp = function (req, res, next) {
var lamp = new Lamp({
lampname: req.body.lampname,
status: req.body.status
});
lamp.save(function (err, lamp) {
if (err) { return next(err); }
res.status(201).json(lamp);
});
};

+
lamps.js
exports.updateLamp = function (req, res, next) {
Lamp.findOne({ _id: req.params.id }, function (err, lamp) {
lamp.status = req.body.status;
lamp.save(function (err, lamp) {
});
});
};
exports.deleteLamp = function (req, res, next) {
Lamp.remove({ _id: req.params.id }, function (err, lamp) {
});
};

+
lamps.js
exports.findAll = function (req, res, next) {
Lamp.find(function (err, lamps) {
res.status(201).json(lamps);
});
};
exports.findById = function (req, res, next) {
Lamp.findOne({ _id: req.params.id }, function (err, lamp)
{
});
};

+
CRUD 전체 정의를 위한 변경: /
server.js
var express = require('express'),
bodyParser = require('body-parser'),
lamps = require('./routes/lamps.js');
app.use(bodyParser.json());
app.post('/lamps', lamps.addLamp);
app.get('/lamps', lamps.findAll);
app.get('/lamps/:id', lamps.findById);
app.put('/lamps/:id', lamps.updateLamp);
app.delete('/lamps/:id', lamps.deleteLamp);
app.listen(3000);

+
서버 시작
n  서버 시작
n  $ node server
n  주의: 서버 시작에 앞서 지역 호스트(localhost)에 몽고DB를 설치
하고 시작했는지 반드시 확인하자!

+
단말 쪽 프로그래밍
n  REST 방식으로 API를 호출하면 된다
n  단말 조건: TCP/IP 스택이 설치되어 있으며, REST 클라이언트 라이브러
리를 사용할 수 있어야 한다.
n  만일 리눅스 기반으로 동작하는 단말인 경우 뒤에 테스트 예제에서
설명하는 curl을 system으로 호출하면 아주 쉽게 구현 가능하다.
n  C 언어로 개발할 경우 libcurl을 사용할 수도 있다.
n  스크립트 언어로 개발할 경우 스크립트 언어의 REST 클라이언트 패
키지를 사용하면 몇 줄로 서버 쪽에 자신의 상태를 전달할 수 있다.
n  이어지는 테스트 예제를 보며 CRUD 전달 방식을 확인하자.

+
CRUD 테스트: POSTMAN vs curl
크롬 확장: REST 클라이언트
http://curl.haxx.se/ (홈페이지)
http://www.confusedbycode.com/curl/ (윈도우 32비트/64비트)
참고: 여기서는 설명의 편의를 위해 cURL을 사용한다!

+
서버 구동 후 생성 테스트(curl 사용)

+
몽고DB 셸을 사용한 확인

+
(변경 내역 반영 검증을 위한) 읽기 테
스트

+
AngularJS 샘플 앱의 디렉터리 구조

+
/index.html
<!DOCTYPE html>
<html ng-app="LampApp">
<head>
<link href="styles/main.css" rel="stylesheet">
<link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<ul class="menu">
<li><a href="#/notice">notice</a></li>
<li><a href="#/list">list</a></li>
</ul>
<div class="container" ng-view=""></div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/services/services.js"></script>
<script src="scripts/controllers/controllers.js"></script>
</body>
</html>

+
views/list.html
<div class="span6">
<table class="table table-striped table-condensed">
<thead>
<tr>
<th style="min-width: 300px;">Lamp ID</th>
<th style="min-width: 120px;">Name</th>
<th style="min-width: 120px;">Status</th>
<th style="min-width: 120px;">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="lamp in lamps">
<td>{{ lamp._id }}</td>
<td>{{ lamp.lampname }}</td>
<td>{{ lamp.status }}</td>
<td><input type="radio" value="on"> on <input type="radio" value="off"> off</td>
</tr>
</tbody>
</table>
</div>

+
views/notice.html
<div>
<p>환영합니다.</p>
<p>{{ message }}</p>
</div>

+
scripts/services/services.js
'use strict';
var services = angular.module('lampApp.services', ['ngResource']);
var baseUrl = 'http://localhost:3000';
services.factory('NoticeFactory', function ($resource) {
return $resource(baseUrl + '/notice', {}, {
query: { method: 'GET', params: {} }
});
});
services.factory('LampsFactory', function ($resource) {
return $resource(baseUrl + '/lamps', {}, {
query: { method: 'GET', isArray: true }
});
});
services.factory('LampFactory', function ($resource) {
return $resource(baseUrl + '/lamps/:id', {}, {
show: { method: 'GET' }
});
});

+
scripts/controller/controller.js
'use strict';
var app = angular.module('lampApp.controllers', []);
// Clear browser cache (in development mode)
//
// http://stackoverflow.com/questions/14718826/angularjs-disable-partial-caching-on-
dev-machine
app.run(function ($rootScope, $templateCache) {
$rootScope.$on('$viewContentLoaded', function () {
$templateCache.removeAll();
});
});
app.controller('NoticeCtrl', ['$scope', 'NoticeFactory', function ($scope, NoticeFactory) {
$scope.message = '간단한 AngularJS 테스트 프로그램입니다. Lamp 상태를 보여줍니다. 아
직 Lamp 조작 기능은 구현되어 있지 않습니다.';
}]);
app.controller('ListCtrl', ['$scope', 'LampsFactory', function ($scope, LampsFactory) {
$scope.lamps = LampsFactory.query();
}]);

+
scripts/app.js
"use strict";
// Declare app level module which depends on views, and components
angular.module('LampApp', [
'ngResource',
'ngRoute',
'lampApp.services',
'lampApp.controllers'
]).
config(['$routeProvider', function ($routeProvider, $httpProvider) {
$routeProvider.when('/notice', { templateUrl: 'views/notice.html', controller: 'NoticeCtrl'});
$routeProvider.when('/list', { templateUrl: 'views/list.html', controller: 'ListCtrl'});
$routeProvider.otherwise({redirectTo: '/notice'});
}]);

+
HTTP 서버 사용하기
n  Node용 간이 http 서버 설치
n  npm install http-server –g
n  AngularJS를 서비스 하기 위한 HTTP 서버 시작
n  cd angular-app
n  http-server
실시간 미
리 보기
또는 Brackets에서

+
앱 결과 화면(index.html)

+
앱 결과 화면(index.html에서 list)

+
도전 과제
n  socket.io를 사용해 polling하지 않고서 추가/변경/삭제되는 Lamp
목록을 보여준다.
n  hard coded된 notice 문구 대신, 특정 Lamp에 문제가 생겼을 경
우 서버에서 경고를 받아 출력한다.
n  Action을 추가해, Lamp를 켜고/끄게 만든다.
n  bower를 사용해 AngularJS 개발 과정에서 복잡한 프론트엔드 의
존성을 자동으로 관리하게 만든다.

+
참고 자료
n  http://docs.aws.amazon.com/lambda/latest/dg/
walkthrough-custom-events.html
n  http://ni-c.github.io/heimcontrol.js/
n  http://coenraets.org/blog/2012/10/creating-a-rest-api-
using-node-js-express-and-mongodb/
n  https://blog.codecentric.de/en/2013/03/home-automation-
with-angularjs-and-node-js-on-a-raspberry-pi/
n  http://mean.io/
n  http://bcho.tistory.com/881

+
참고 서적(팩트 서적은 번역 진행 중)

Mean 스택을 사용한 IoT 개발

More Related Content

What's hot (20)

Similar to Mean 스택을 사용한 IoT 개발 (20)

More from Jay Park (20)

Mean 스택을 사용한 IoT 개발