Internship backend

백마 인턴십
in 아름 전자
전체 내용 합본

들어가기 전에
1. 외부 IP 확인
공유기 전원을 끄기 때문에 매일 라즈베리 파이 외부 IP 확인을 해야함
192.168.0.1 접속
사용자 이름 : mrnho
비밀 번호 : mrnho4958

들어가기 전에
1. 외부 IP 확인
라즈베리 파이와 연결해서 MQTT 관련 작업을 수행하는 코드의
ip를 알아낸 외부 IP로 수정해야함 , 아래는 예시
mqtt.connect 안에 들어가는 IP는
라즈베리 파이의 외부 IP와 동일해야 함

백마 인턴십
in 아름 전자
2주차(2017.06.26 ~ 30)
기본적인 환경 구축과 서버 세팅

목차
1. 서버 포맷
2. 개발 환경 세팅

들어가기 전에
2. 프로젝트 시작
$ cd iot/fa <- fa 디렉토리로 이동
$ DEBUG=fa:* npm start <- 어플리케이션 시작

서버 포맷
사무실에 있는 서버는 x64 기반 프로세서
하지만 PC에 32bit OS 설치되어있음
-> 포맷 후 Window10 64bit으로 재설치

개발 환경 세팅
Window에서의 개발은 무리가 있음
Virtual Box 설치 후 Ubuntu16.04설치
Linux 이점
- 추후에 클라우드 환경에서 서비스 할 경우 고려
- SSH를 통한 접속의 편의성
Nginx, Node js, MongoDB 설치

NginX
Node
JS
Mongo
DB
Host OS( Window10 )
Virtual Machine( Virtual Box )

Xshell, Putty 등의 SSH 터미널 에뮬레이터를 사용해
접속

Nginx
웹 서버 소프트웨어
러시아의 개발자 이고르 시쇼브가 개발
장점
Apache보다 작은 자원으로 빠르게 서비스 할 수 있음
“동시 접속자”가 많은 서비스 일수록 좋음
단점
Apache보다 확장 모듈이 부족
한글화된 문서가 적음

Node JS
서버 사이드에서 동작이 가능한 JavaScript
내장 HTTP 서버 라이브러리를 포함
-> Apache등의 별도의 소프트웨어 없이 동작 가능
Node js가 빛을 발하는 분야
- 입력, 출력이 잦은 App
- 데이터 스트리밍 App
- 실시간으로 데이터를 다루는 App
- JSON API 기반 App

Mongo DB
JS문법을 사용하는 데이터베이스
NoSQL 중 가장 널리 사용되는 데이터 베이스
+ NoSQL : SQL이 없는 데이터 베이스
관계형 데이터 베이스처럼 스키마가 없음
-> 형식에 구애 받지 않고 자유롭게 데이터 넣기 가능

설치
MongoDB는 조금 까다롭지만
Nginx와 Nodejs는 패키지 매니저를 통해 손쉽게 설치 가능
Nginx
$ sudo apt-get install nginx
(끝!) 설치후 nginx –v 명령어로 버전 확인 가능
다음과
같은 화면이
보이면 정상
설치

설치
Node JS ( https://nodejs.org/ko/ )
공식 홈페이지에서 tar 받아서 사용할 수 도 있지만
$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E
bash -
$ apt-get install nodejs
설치 시 NPM( Node Package Manager) 도 함께 설치됨
Node –v, npm –v 명령어로 각각 버전 확인
공식 홈페이지의 패키지 매니저로 Node.js 설치하기 참고
https://nodejs.org/ko/download/package-manager/

설치
MongoDB
https://www.digitalocean.com/community/tuto
rials/how-to-install-and-secure-mongodb-on-
ubuntu-16-04
에서 Part1 참고
Ubuntu16.04기준, Ubuntu버전에 따라 설치 방법이
조금씩 다르다고 함

백마 인턴십
in 아름 전자
3주차(2017.07.03 ~ 07)
Nginx, MQTT, Mosquitto

목차
1. Nginx vs Apache
2. Nginx Architecture
3. MQTT, Mosquitto
4. Nginx with Mosquitto

1. Nginx vs Apache
Apache
Nginx

1. Nginx vs Apache
Apache( Thread 방식 )
하나의 스레드에서 하나의 클라이언트를 처리
클라이언트의 개수만큼 스레드 생성
클라이언트가 요청한 일 수행한 후 결과를 클라이언트에
전달할 때 까지 I/O 문제로 스레드가 대기해야 할 일이 잦음
-> 자원의 낭비

1. Nginx vs Apache
Nginx( Event-driven 방식 )
1개의 프로세스가 모든 요청을 처리하는 구조
Worker 프로세스가 계속 요청을 받고,
요청이 완료되면 클라이언트가 자원을 받아가는 방식
요청이 들어올 때마다 스레드가 생기는 것이 아니므로
상대적으로 부하를 잘 견딤

2. Nginx Architecture
공부 중 입니다.. 용어가 어렵고 생소함
Nginx – The Architecture of Open Source Application
http://www.looah.com/article/view/1640 (번역본)

3. MQTT, Mosquitto
Message Queue Telemetry Transport
경량의 Pub/Sub 메시징 프로토콜
낮은 전력, 낮은 대역폭에서 사용가능
M2M, IoT에서 사용
MQTT 프로토콜의 원칙
메시지를 발행(Publishing)
메시지를 구독(Subscribe)
Pub, Sub : Broker의 클라이언트
Topic : 슬래시(/)를 이용해서 계층적으로 구성

3. MQTT, Mosquitto
MQTT 메시지 버스 시스템
Broker : 메시지 버스를 만들고 메시지를 흘려 보냄
버스에 흐르는 다양한 메시지 구분 위해 Topic을 이름으로 하는
메시지 채널을 만듦
어플리케이션들은 버스에 연결하고 관심있는 Topic을
등록해서 sub하거나 pub함

3. MQTT, Mosquitto
Mosquitto is an open source implementation of a
server for version 3.1 and 3.1.1 of the MQTT protocol.
It also includes a C and C++ client library, and the
mosquitto_pub and mosquitto_sub utilities for
publishing and subscribing.
https://github.com/eclipse/mosquitto

3. MQTT, Mosquitto
저장소 업데이트 없이
$ sudo apt-get install mosquitto
-> mosquitto version 1.4.8 버전 설치됨
라즈베리파이에 설치된 mosquitto와 동일한 버전 사용위해
저장소(repositories list) 업데이트
$ sudo apt-add-repository ppa:mosquitto-dev/mosquitto-ppa
$ sudo apt-get update
$ sudo apt-get install mosquitto

3. MQTT, Mosquitto
테스트 위해 mosquitto-client 설치
$ sudo apt-get install mosquitto-clients
결과 화면
로컬호스트에서 test라는 토픽으로 hello, world publishing
로컬호스트에서 test라는 토픽으로 subscribe

4. Nginx with Mosquitto
참고 자료
Load Balancing MQTT
https://www.nginx.com/blog/nginx-plus-iot-load-balancing-mqtt/
MQTT Bridge with Mosquitto and Nginx
http://akeil.de/posts/mqtt-bridge-with-mosquitto-and-nginx.html
Mosquitto Nginx
Ubuntu 16.04

백마 인턴십
in 아름 전자
4주차(2017.07.10 ~ 14)
Reverse Proxy, Rpi Broker Test

목차
1. Nginx와 Node.js를 함께 쓰는 이유
2. Rpi Broker <-> Server 테스트

1. Nginx와 Nodejs를 함께 쓰는 이유?
http://akal.co.kr/?p=1173
관련된 내용 참고

Nginx를 Proxy 서버로 이용하는 것
Proxy 서버란?
클라이언트가 자신을 통해서 다른 네트워크 서비스에
연결할 수 있도록 중계하는 역할

Node js

Node js
NginX

var/www/html/index.html

Node.js 로 구현한 간단한 웹 서버

비교

Nodejs서버의 포트에 직접적인 접속을 막고
Nginx를 거쳐가도록 하여서
Nodejs의 실제 포트를 숨기자.
장점 – 보안, 접속 분산
$ vi /etc/nginx/sites-available/default -> 아래 처럼 수정
Nginx 웹서버 IP/로 접속하면 내부적으로 Nodejs의 서버로 접속

결과
Node js서버가 실행중인 8081 포트 직접 접속
포트번호없이 Nginx의 default 위치(/) 에 접속 시
Nodejs의 8081포트로 연결된 것과 동일한 결과

2.Rpi Broker <-> Server Test
Broker(Rpi) Web AppBoard
시나리오
1. Web App 에서 보드의 온도 정보 구독 신청(sub)
2. Board에서 온도 정보 발행(pub)
3. Web App에서 확인

Broker(Rpi)
Web App(대기중)
Board

Broker(Rpi)
Web App(결과 수신)
Board (발행)

Nodejs MQTT 라이브러리를 이용한 간단한
테스트 코드 ( 웹앱에서 이용 )

백마 인턴십
in 아름 전자
5주차(2017.07.17 ~ 20)
Node.js Web Application Framework
Express

목차
1. Express란
2. 통신 과정

1. Express
Node.js로 간단하게
웹 서버를 구축할 수 있도록
도와주는 웹 프레임워크

1. Express
설치하고 사용해보기
아래처럼 디렉토리 구조를 만들고 싶다면
다음 명령어를 사용해서 express 설치
$ npm install express-generator –g
$ express –view=[engine] [app name]
$ cd [app name]
$ npm install
$ set DEBUG=[app]:* npm start

1. Express
Express 디렉토리 구조
http://webframeworks.kr/getstarted/expressjs/#tocAnchor-1-3
app.js : express 설정파일
/public : 정적파일(js파일, img, css)
포함
/routes : 라우팅 로직 구현
/view :
Express 앱을 생성 할 때 명시한 템플
릿 엔진을 사용해 HTML으로 변환

1. Express
Express view 템플릿 엔진 Jade, ejs, pug등..
해당 엔진 언어의 문법에 맞게 작성하면 HTML이나 자바스
크립트로 변환됨
https://wayhome25.github.io/nodejs/2017/02/18/nodejs-10-express-
template-engine-jade/

1. Express
우리는 문법을 새로 배울 필요가 없는 EJS 사용
HTML의 <% %> 태그 사용해서
서버의 데이터를 사용하거나 코드 실행 가능
<% 자바 스크립트 코드 %>
<% 출력 할 자바스크립트 객체 %>

2. 통신 과정
이러한 Express 웹에서 MQTT를 사용할 방법은?
Node.js MQTT 라이브러리 사용
https://github.com/mqttjs/MQTT.js

2. 통신 과정
테스트 해보기
view/index.ejs

2. 통신 과정
테스트 해보기
view/index.ejs
스위치의 상태를 구독(sub)
Topic - “sw1”
보드의 온도/습도 정보를 구독(sub)
Topic – “Hygrometer”

2. 통신 과정
테스트 해보기
“상태받아오기” 버튼을 누른다고 가정
view/indes.ejs
버튼 이벤트를 처리하는 부분
public/javascripts/button_click.js

2. 통신 과정
테스트 해보기
public/javascripts/button_click.js
UI에 <input type="button" id="connect" value="상태받아오기"/>
$(document).on( “click”, “#버튼 id”, click 이벤트가 발생하면 실행시킬 함수
이름 )

2. 통신 과정
routes/ajax.js

2. 통신 과정
Demo2 – 해결해야할 문제

백마 인턴십
in 아름 전자
6주차(2017.07.24 ~ 28)
MongoDB with Express

목차
1. MongoDB란
2. 현재 진행 상황

1. MongoDB란?
NoSQL 중 가장 널리 사용되는 데이터 베이스
+ NoSQL : SQL이 없는 데이터 베이스
관계형 데이터베이스(MySQL, Oracle .. ) 처럼
스키마가 없음
-> 형식에 구애 받지 않고 자유롭게 데이터 넣기 가능

1. MongoDB란?
설치
공식 홈페이지의 Install MongoDB on Ubuntu 참고
https://docs.mongodb.com/v3.2/tutorial/install-mongodb-on-ubuntu/

1. MongoDB란?
Nodejs와 연결하기 위해
MongoDB 공식 홈페이지에서 지원하는
Nodejs 드라이버 사용
$npm install mongodb
데이터 베이스 이름은 areum
사용할 테이블 이름은 facility

우분투 iot/fa 디렉토리에서 UI 개발 진행중
데이터 베이스 테스트는 로컬에서 진행중

첫번째 등록 버튼을 누르면
시설 등록 페이지가 팝업으로 뜸,
해당 페이지에서 정보를 입력하고
등록 버튼을 누르면 데이터 베이스에
입력이 되어야함

1. 페이지에서 연결된 자바스크립트 파일 확인
public/add_facility.html
2. 버튼을 눌렀을 때 동작할 함수 작성(onclick)
public/javascripts/add_facility.js
페이지에서 값들을 가져오고, ajax를 이용해 웹 서버에 값들을 전송
3. 서버에서 수행할 로직 작성
routes/add_facility.js
데이터 베이스와 연결하고, 웹에서 받은 정보들 insert
수행 후 수행 결과(success or fail)반환
4. app.js 수정
작성한 파일들이 잘 동작할 수 있도록 연결

2. 버튼을 눌렀을 때 동작할 함수 작성(onclick)
페이지에서 값들을
가져오고
json형식으로 저장
ajax를 이용해 웹서버로
신호를 보냄
POST 방식으로
success에서는
서버에서 반환한 결과를
가지고 동작 수행

3. 서버에서 수행할 로직 작성 ( routes/add_facility.js )
몽고 디비와 연결

4. app.js 수정
http://cinema4dr12.tistory.com/entry/Web-AppNodejs-Express-4-Express-
4%EC%97%90%EC%84%9C%EC%9D%98-
%EB%9D%BC%EC%9A%B0%ED%8C%85Routing-%EB%B0%A9%EB%B2%95
참고

백마 인턴십
in 아름 전자
7주차(2017.07.31 ~ 08.04)
MongoDB Insert, show List

우분투 iot/fa 디렉토리에서 UI 개발 진행중
데이터 베이스 테스트는 로컬에서 진행중

등록 버튼을 누르면 시설 등록 페이지가 팝업으로 뜸,
해당 페이지에서 정보를 입력하고
등록 버튼을 누르면 데이터 베이스에 입력이 되고,
부모 페이지의 테이블에 추가가 되어야함

시설 등록 페이지에 접속할 때 마다
DB에서 리스트를 가져와 뿌려주는 방식으로 구현

public/regi_facility.html
2. 페이지에 접속 했을 때 바로 수행될 함수 작성
public/javascripts/regi_facility.js
GET 방식으로 서버에 테이블에 뿌릴 데이터를 요청
3. 서버에서 수행할 로직 작성
routes/regi_facility.js
데이터 베이스와 연결하고, 테이블에 있는 모든 정보 가져옴
수행 후 결과 반환
4. app.js 수정

2. 페이지에 접속 했을 때 바로 수행될 함수 작성
public/javascripts/regi_facility.js
GET 방식으로 서버에 테이블에 뿌릴 데이터를 요청
서버에 GET방식으로 요청
요청에 대한 응답을 받아
서 처리 하는 부분

몽고 디비와 연결
GET방식으로
요청이 오면 수행할 로직
DB에서 정보들을 가져오고,
배열로 변환한 뒤 반환 함

4. app.js 수정
http://cinema4dr12.tistory.com/entry/Web-AppNodejs-Express-4-Express-
4%EC%97%90%EC%84%9C%EC%9D%98-
%EB%9D%BC%EC%9A%B0%ED%8C%85Routing-%EB%B0%A9%EB%B2%95
참고

백마 인턴십
in 아름 전자
8주차(2017.08.07 ~ 08.11)
MongoDB Complete, MQTT

우분투 iot/fa 디렉토리에서 작업
등록, 설정 탭 거의 완료

‘등록’탭에 있는
시설 등록, 관리 항목 목록, DCS등록, 센서 등록, Actuator 등록,
외부입력항목 등록 완료
원래는 하나의 탭마다 3개의 파일이 필요하지만
비 실용적이라고 판단되어 비슷한 기능을 하는 파일들을
하나의 파일로 합침
‘등록’탭의 서브 항목들 중 ‘등록‘ 버튼을 누르면 팝업 창이 뜨는 함수
+ 팝업 창에서 ‘확인’을 눌렀을 경우 DB에 정보를 넣는 함수
-> public/javascripts/registrageAll.js

public/javascripts/registrageAll.js 중 일부
팝업 창을 띄우는 함수
DB에 내용을 넣을 수 있
도록 요청하는 함수

‘설정’탭은 ‘등록’탭에 있는 코드를 그대로 사용할 수 없음
실제 DB에 들어있는
각각의 내용들을
가지고 온 뒤
옵션에 세팅해야 함

setting 탭을 위해 새롭게 작성한 파일들
public/javascripts/
setting.js
- setting.html에서 버튼을 눌렀을 때 팝업 창을 띄우는 함수들
setting_add_db.js
setting_sensor.html, setting_actuator.html에서 확인 버튼을 눌렀을 경우
DB에 넣을 값들을 JSON형식으로 만들고 ajax를 이용해 서버에 요청
setting_sensor.js
- DB에서 원소들을 가져와서 setting_sensor.html에 옵션 세팅
setting_actuator.js
- DB에서 원소들을 가져와서 setting_actuator.html에 옵션 세팅
getSettingList.js
- DB에서 세팅 목록들을 가져와서 뿌려 줌
routes/
setting.js
- setting과 관련된 라우팅 함수들 모아서 모듈화

public/javascripts/setting_sensor.js
- DB에서 원소들을 가져와서 setting_sensor.html에 옵션 세팅
코드는 setting_actuator.js 와도 유사
html 파일이 열릴 때 마다 수행
db에 값들을 요청하고 받아와서
option으로 세팅

public/javascripts/setting_add_db.js
setting_sensor.html, setting_actuator.html에서 확인 버튼을 눌렀을 경우
DB에 넣을 값들을 JSON형식으로 만들고 ajax를 이용해 서버에 요청

public/javascripts/getSettingList.js
- DB에서 세팅 목록들을 가져와서 뿌려 줌
설정 탭에서 sensor와 actuator를 설정해주는 항목이 다름
가져올 때 sensor의 정보인지, actuator의 정보인지 구분해야 함

센서의 정보일 때 테이블 셋팅
세팅 테이블의 정보 요청

actuator의 정보일 때 데이터 세팅
세팅 테이블의 정보 요청

routes/
setting.js
- setting과 관련된 라우팅 함수들 모아서 모듈화
app.js에 다음과 같이 사용하면
express에서는 /setting으로 시작하는 요청이 들어오면
routes/setting.js에서 함수를 찾아서 처리함

routes/setting.js 중 일부
setting/get_facility로 GET방식으로 요청이 들어오면
DB에서 facility테이블의 내용을 docs로 반환

routes/setting.js 중 일부
setting/add_settingInfo로 POST방식으로 요청이 들어오면
DB의 setting table에 insert

백마 인턴십
in 아름 전자
9주차(2017.08.14 ~ 08.16)
Monitor Using MQTT

우분투 iot/fa 디렉토리에서 작업
등록, 설정 탭 Insert와 list에 뿌려주는 작업 완료
모니터 탭 로직 일부 수정 필요

모니터 탭
- MQTT 브로커에 topic을 sub후 pub가 될 때 마다 DB에 저장됨
- 모니터 페이지에서는 DB에 저장된 내용들을 가져와서 테이블 형태
로 보여줌
고쳐야 할 것
- 후에 프로토콜에 맞게 테이블 재 구성 필요

시나리오
1. 앱이 시작되면 MQTT 브로커에 연결 후 SUB
2. 보드에서 온도 정보 PUB
3. 정보를 받아서 DB에 Insert
4. 웹 페이지에 table로 출력

서버가 시작되면 MQTT Broker와 연결할 수 있도록
$ vi bin/www
서버가 시작되면 onListening 함수를 수행함
bin/www의 상단에 모듈 명시
onListening 함수에
mqtt와 연결 할 수 있도록
connect_broker.js에
새로운 모듈을 작성 후 실행 시킴

$ vi public/javascripts/connect_broker.js
MQTT 라이브러리 사용 명시,
DB와 연결
모듈을 정의하고 start라는 이름의 함수 작성
monitor 토픽을 Broker에 Sub
monitor 토픽이 pub가 되면
해당 내용을 DB에 저장

$ vi public/javascripts/monitor.js
모니터 정보를 GET방식으로 요청 후 결과를 받아와서 테이블에 셋팅 함,
7주차의 코드와 유사
$ vi routes/monitor.js
GET 방식으로 요청이 들어오면 DB와 연결 후 monitor 테이블의 정보를 json
형식으로 반환함

테스트 상황에서의 Topic과 메시지 후에 수정 필요함
현재 토픽 : monitor
센서 정보 일 때와 Actuator 정보 일 때와 구성이 다름 , 임의로 셋팅 함,
value는 보드에서 온도 정보를 가져와서 셋팅 함
센서 정보 actuator 정보
공통 : facility, management, DCS, value
센서만 : sensor
actuator만 : actuator, control_type

정각마다 Broker에 시간 정보 Pub
마찬가지로 정각에 publish를 하는 모듈을 만든 후 사용
$vi bin/www
timer 모듈 가져옴
서버가 시작되면 수행하는 onListening()
함수에 timer().start()로 시작

매 정각에 수행할 함수
스케쥴링 위해 node-schedule 라이브러리 사용
현재 테스트를 위해 매 시 30분에 실행되도록
해 둠

Internship backend

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Internship backend

Ähnlich wie Internship backend (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (8)

Internship backend