2조 프로젝트 보고서 김동현

IOT(Raspberry Pi3) 기반
"통합관제S/W"
조원
유호선
김동현
신재성
윤지수

목차
1. 프로젝트 개요
2. 프로젝트 개발 일정
3. 프로젝트 개발 인원
4. 프로젝트 개발 시스템 환경
5. 데이터베이스 설계
6. 서버 설계
7. 클라이언트 UI 설계
8. 프로젝트 발표 소감
2

프로젝트 선정 배경
3
개요
자료 : KT 경제경영연구소
국내 IoT 시장의 규모는 2013년 서 부터 빠르게 증가하고 향후 지속적으로 증가하면서 2022년에는
10배 수준으로 확장될 것으로 전망되기에 가장 기본이 되는 홈 시큐리티를 주제로 선정함

4
목표 및 기대효과
개요
영상
데이터
센서
측정값
 웹캠으로 촬영한 영상을 스트리밍으
로 전송하여 웹상에 보여줌,
 한 눈에 영상과 측정값을 확인 가능
 측정 값과 사고, 발생
빈도를 그래프로 시각화
 시각화로 가독성 증가
 센서로 온도, 습도, 화재발
생, 가스누출, 무단침입 여
부 측정
 네트워크 통신으로
웹 서버에 데이터 전송
현장의 영상과 센서 측정값들을 웹에서 실시간으로 확인할 수 있고 현장에서 일어난 사고 이력들을
시간대 별로 그래프로 나타내어 시각적으로 표현하고자 함
수치
시각화
 학교, 물류창고와 같은 안전, 상태변
화 감지가 필요한 분야에 응용
 공장의 Smart Factory 화
 사용자 신뢰성 상승
 홈서비스 보안 강화
기대 효과

5
라즈베리 파이 3
영국 라즈베리 파이(Raspberry Pi) 재단에서 만든
초소형/초저가 PC로 리눅스 운영체제 기반의
RASPBIAN 운영체제를 설치하여 센서 정보를 웹
서버로 전송시키는 역할을 한다
아날로그 DHT11 온습도 센서 모듈
Arduino 전용 온습도 센서로
DHT11센서를 기반으로 온도와
습도를 검출 할 수 있는 센서
초음파 센서
초음파 센서는 가까운 거리에 있
는 물체 혹은 사람의 유,무, 거리
측정, 속도 측정등에 사용 된다
아날로그 가스센서(MQ2)
가스센서로 스모그/메탄/일산화
탄소 여부를 측정
Flame Sensor
760nm ~ 1100nm 불꽃 파장을 감
지항 수 있는 불꽃 센서 모듈
AD/DA Converter PCF8591 Module
아날로그 신호를 디지털로 바꿔
주는 컨버터 모듈
사용 장비
개요

6
프로젝트 개발 범위
Use case diagram

7
프로젝트 개발 일정
개발 일정
일자
11/7 ~
9
11/10 ~
13
11/14 ~
16
11/17 ~
18
11/19 ~
20
11/21 ~
22
11/23 ~
25
11/26 ~
28
11/29 ~
12/4
12/5
주제선정 및 기획회의
(장비 구입 포함)
스토리보드 구성 및 수정
DB 모델링 및 구성
센서 작업 및 데이터 처리
Spring 기본 구조 생성
멤버 작업(로그인 등)
공지사항 게시판
FAQ 게시판
AS 게시판
계약 및 서비스 확인 페이지
웹뷰어 페이지
수정 및 최종테스트

8
프로젝트 개발 인원
개발 인원
김동현
신재성
유호선
윤지수

9
구분 Tool
H/W
RaspberryPI, SensorKit
(온도,습도,가스,화재,초음파,화상카메라)
WAS Apache – Tomcat 8.0
Language Java, Spring, JDBC
DevlopmentTool Eclipse, NetBeans
Database Oracle Database 11g
Etc. HTML5, CSS3, Bootstrap, Json, ajax
프로젝트 개발 환경
개발 환경

10
데이터 베이스 설계
DB 모델링

11
테이블 용도
• Member
- 회원의 정보와 계약, 방, 게시판을 묶어주는 요소이다.
컬럼 설명
mid 회원이나 관리자의 고유 id를 담당 (비고: PK)
mpassword 회원이나 관리자의 고유 password를 담당
mname 회원이나 관리자의 이름을 담당
memail 회원이나 관리자의 email를 담당
maddress 회원이나 관리자의 주소를 담당
mtel 회원이나 관리자의 전화번호를 담당
mlevel 회원이나 관리자의 권한을 담당
• Room
- Contract 테이블과 각종 센서들을 묶어주는 요소이다.
컬럼 설명
rid 방의 고유 id를 담당 (비고: Pk)
rname 방의 이름을 담당
rmid Member의 mid와 Room을 연결해주는 담당 (비고: FK - Member의 mid와 연결)
rempty 방이 있는지 없는지를 알려주는 담당

12
• Contract
- 계약의 유무를 회원의 정보와 묶어주는 요소이다.
컬럼 설명
cid 계약의 고유 id를 담당 (비고: PF - Room의 rmid 와 membe의 mid 를 연결)
cfire 화재센서의 신청유무를 담당
cgas 가스센서의 신청유무를 담당
ctemperature 온도,습도의 신청유무를 담당
cvisitor 초음파 거리측정 감지센서의 신청유무를 당당
cview 화상카메라의 신청유무를 담당
• gas, flame, visitor, temperature_humidity
- 룸별로 각종 센서들의 값을 연결해주는 요소이다.
컬럼(중복은 삭제) 설명
id 각종센서의 고유 id를 담당 (비고: PK)
rid 각종센서와 Room 을 연결해주는 담당(비고: FK - Room의 rid와 연결)
date 발생 시간을 알려주는 담당
gas,flame,temperature 각종센서의 수치를 알려주는 담당
state 이벤트 발생의 유무를 담당
테이블 용도

13
• BoardNotice, BoardAs, BoardFaq
- 게시판과 회원의 정보를 묶어주는 요소이다.
컬럼(중복은 삭제) 설명
no 게시글의 고유 번호를 담당 (비고: PK)
title 게시글의 제목을 담당
content 게시글의 내용을 담당
writer 게시글의 작성자를 담당(비고: FK - Member의 mid와 연결)
date 게시글의 발생 시간을 알려주는 담당
테이블 용도
• IotDevice
- 기계의 작동여부 확인 요소 이다.
컬럼 설명
irid IotDevice의 고유 번호를 담당 (비고: PF - Room의 rid 를 연결)
endofstream Iot 기계의 발생 마지막 시간을 알려주는 담당
• Camera
- 카메라와 라즈베리 파이의 서버를 연결해주는 요소이다.
컬럼 설명
crid Camera의 고유 번호를 담당 (비고: PF - Room의 rid 를 연결)
cconnecturl 카메라와 서버를 연결해주는 URL 주소를 담당

14
서버 설계
Spring 폴더 구조
src/main/resources
src/main/java
com.mycompany.myweb
controller
dao
dto
piserver
piview
service
test
Java 소스 저장
라즈베리파이로부터 받은 데이터 처리를 위한 코드
xml, property 파일 저장
클라이언트 요청 처리
데이터 접근 메소드 정의
계층 간 데이터 교환을 위한 자바 빈즈
비즈니스 로직 중심의 메소드 정의
라즈베리파이로부터 받은 데이터를 DB에 저장

15
서버 설계
Spring 폴더 구조
src/test/java
src/test/resources
JRE System Library
Maven Dependencies
src
target
pom.xml
webapp
resouces
spring
WEB-INF
views
web.xml
main
test
테스트용 java 소스 저장
테스트용 xml, property 파일 저장
웹 어플리케이션 전체 소스 저장
URL로 접근 가능한 image, css, js, 동영상 등 파일 저장
URL로 접근 불가능한 리소스 저장
스프링 설정 파일 저장
JSP 파일 저장
프로젝트 빌드 결과물
Maven 설정 파일

16
서버 설계
UML-Class
controller Service Dao

17
서버 설계
UML-Class
MemberController
 관리자의 회원 관리(회원 추가, 삭제, 수정, 조회)를 위한 기능과 회원들의 로그인, 로그
아웃 기능 담당

18
서버 설계
UML-Class
BoardAsController
 사용자로부터 AS 문의 작성, 조회, 수정, 삭제 요청을 처리
BoardFaqController
 사용자가 많이 궁금해하는 질문들을 조회할 수 있는 기능 담당
BoardNoticeController
 관리자로부터 사용자들에게 보여질 공지사항을 추가, 조회, 수정, 삭제 요청 처리

ContractController
 라즈베리파이가 서버에 보낸 데이터를 룸, 날짜 별로 DB로부터 받아 계약 사항, 누적된
센서 측정값들을 detail.jsp에서 보여질 그래프에 전달하기 위한 기능 담당
19
서버 설계
UML-Class

ServerController
 라즈베리파이에서 네트워크 통신으로 웹 서버에 요청을 보내면 전송받은 측정 데이터값
들을 데이터베이스로 전송하는 기능을 담당
ViewController
 데이터베이스에 저장된 센서 측정값들을 웹뷰어 보기에서 보여주기 위한 기능을 담당
20
서버 설계
UML-Class

21
UI 클라이언트 설계
UI 페이지 흐름
메인화면 웹뷰어 보기 서비스 내역
서비스 내역 공지 사항 A/S 문의

22
FAQ 데모보기, 이용약관 등 관리자 메인
회원관리
UI 페이지 흐름

23
메인화면
• HTML5
- 페이지 구조 결정
• CSS3 / Bootstrap
- 모양 및 색상, 배치 구현
• AJAX
- 로그인 기능 구현
• Spring/JSP/SQL
- MVC 패턴으로 구현
• 메인화면에서 로그인을 하지 않으면 공
지사항, 이용약관 등을 제외한 서비스
내역을 확인할 수 없음
• 로그인을 하지않고 이용하고자 하는 서
비스에 해당하는 버튼을 누르면 Modal
창으로 로그인이 필요하다고 알려줌
• 로그인 후에 각종 서비스 버튼을 누르
면 Modal 창 안에서 해당 서비스 페이지
를 불러와 서비스 이용이 가능함
• 로그인이 정상적으로 완료되면 로그인
버튼이 사라지고 로그아웃버튼이 나타
나는 방식
• 로그인을 하면 해당하는 유저이름을 가
져와 안녕하세요 ~~님이라고 나타난다
UI 페이지 흐름

24
웹 뷰어 보기
• HTML5
- 모양 및 색상 배치 구현
• JavaScript / jQuery
- Event 처리
• AJAX
- 1초 단위로 통신
• Spring/JSP/SQL
• 메인화면에서 웹뷰어 보기 클릭시
로그인한 유저의 가입된 방들의 서비스
화면이 전체적으로 출력이 된다
(화면을 넘어가면 스크롤 처리)
• 서비스 화면에 우측 상단에서 각종 센
서의 현재 수치를 확인할 수 있다
• 초음파 센서를 이용하여 특정위치의 출
입여부를 알 수 있고 문이 열리면 빨갛
게 문열림 표시가 나온다
• 여러 방 중에 하나를 클릭하면 해당하
는 방의 화면을 크게 볼 수 있고 전체 룸
상태 확인과 마찬가지로 각종 센서의
정보를 우측 상단에서 확인할 수 있다
• Ajax를 이용해 1초 단위로 정보를 계속
가지고 와서 수치를 갱신해준다
UI 페이지 흐름

25
서비스 내역
• HTML5
- 모양 및 색상 구현
- Event 처리
• AJAX
- HTTP 비동기 통신
• Spring/JSP/SQL
• 메인화면에서 서비스내역 버튼을 클릭
하면 계약정보와 특정날짜 기준으로 누
적된 데이터를 차트로 보여주는 Modal
창이 뜬다
• 현재 계약자인 로그인된 사용자의 정보
와 전체 계약된 룸정보가 SelectBox에
전부 표시되고 첫번째 방의 계약정보가
표현된다
• SelectBox에 나온 전체 룸리스트에서 특
정 룸네임을 클릭하면 해당 룸의 계약
정보로 갱신되어 표현된다
(페이지 갱신방식으로 처리됨)
• 계약정보에서 사용자가 계약한 내용은
녹색배경 상자의 체크아이콘으로 표시
되고 계약하지 않은 내용은 회색배경의
박스로 표현이 된다
UI 페이지 흐름

26
서비스 내역
• HTML5
- Event 처리
• Spring/JSP/SQL
• 메인화면에서 서비스내역 버튼을
클릭하면 계약정보와 특정날짜 기
준으로 누적된 데이터를 차트로
보여주는 Modal 창이 뜬다
• 데이터는 시간별 평균 온도, 습도,
화제, 가스, 외부인 출입 감지 횟수
가 데이터로 표현된다.
• 현재날짜 기준으로 데이터를 가져
와 차트가 표현되고 만약에 값이
없으면 차트가 표현되지 않는다
• 날짜를 변경하면 해당하는 날짜의
데이터를 가져와 차트가 표현되고
마찬가지로 값이 없으면 표현되지
않는다
UI 페이지 흐름

27
공지 사항
• HTML5
• Spring/JSP/SQL
• 메인화면에서 공지사항 버튼 클릭
시 Modal 창에서 공지사항 게시판
이 표현된다
• 검색창에서 검색을 원하는 Text를
입력하면 제목+내용 기반으로 데
이터를 찾아와서 해당 내용만 게
시판에 출력된다
• 게시글이 많을때 미리 설정한 게
시글 row수와 페이지 group 을 기
반으로 페이지숫자가 표현되고 특
정페이지에서 게시글 확인하고 목
록으로 나와도 해당 페이지가 유
지된다
UI 페이지 흐름

28
A/S 문의
• HTML5
• Spring/JSP/SQL
• 메인화면에서 A/S문의 버튼 클릭
시 Modal 창에 A/S 게시판이 표현
된다
• 글쓰기 버튼을 클릭해서 A/S 게시
판에 새로운 글을 작성할 수 있다
• 게시글이 많을때 미리 설정한 게
시글 row수와 페이지 group 을 기
반으로 페이지숫자가 표현되고 특
정페이지에서 게시글 확인하고 목
록으로 나와도 해당 페이지가 유
지된다
UI 페이지 흐름

29
FAQ
• HTML5
- Event 처리
• Spring/JSP/SQL
• 메인화면에서 FAQ버튼 클릭시
Modal창에서 FAQ 테이블에 있는
게시물 전체를 불러와서 보여준다
• FAQ 테이블에 Category 컬럼에 있
는 값을 기준으로 상단 버튼 클릭
시 해당 카테고리 게시물만 따로
보여준다
• 질문인 Q 에 해당하는 제목을 누르
면 해당하는 게시글의 답변을 보
여주고 다시 클릭하면 질문만 보
여준다
UI 페이지 흐름

30
데모 보기 및 이용약관, 개인정보 취급 방침
• HTML5
• Spring/JSP/SQL
• 메인화면에서 각각의 버튼을 클릭
시 해당하는 내용을 보여준다
• 데모보기 클릭시 유투브에 연결되
어 있는 동영상을 볼 수 있게 해준
다
• 이용약관이나 개인정보취급방침
을 클릭하면 각각의 내용들이 나
오고 스크롤을 내려서 확인할 수
있다
UI 페이지 흐름

31
관리자 메인
• HTML5
• Spring/JSP/SQL
• 메인페이지에서 관리자 계정으로
로그인 할 경우 user 계정만 해당
하는 버튼은 사라지고 관리자에게
해당되는 버튼만 보여지게 된다
• 공지사항 및 A/S문의 FAQ 게시판
등 각각 게시글 쓰기를 통해 게시
글을 추가해줄 수 있다
UI 페이지 흐름

32
회원 관리
• HTML5
• Spring/JSP/SQL
• 메인화면에서 관리자 계정으로 로
그인한뒤 회원관리 버튼을 클릭하
면 회원관리 목록이 보여진다
• 전체 가입한 유저 목록이 보여지
고 계약된 값이 없는 유저는 삭제
버튼으로 삭제할 수 있다
• 회원추가 버튼을 클릭해서 회원을
추가할 수 있고 계약은 별도로 추
가해주어야 한다
UI 페이지 흐름

33
프로젝트 소감
프로젝트 소감
김동현
무엇을 해야할지 한없이 막막한 적도 있었
고 기획부터 마무리까지 우여곡절도 있었
지만 그 하나하나의 과정들 속에서 배우는
것도 많았고 프로젝트를 통해 수업 내용을
자기화 하는 시간들이 좋았습니다.
유호선
프로젝트를 진행하면서 시행착오를 통해
여러가지를 학습할 수 있어서 유익했고, 무
엇보다 크게 얻은 것은 팀 원들과 동고동락
하면서 협업하고 프로젝트를 완성하며 얻
든 값진 경험이라 생각합니다.
신재성
비전공으로 시작한지 벌써 4개월이 지난
지금 프로젝트를 진행해오며
프로젝트 시작 전보다 더 발전 한 모습을
보며 노력하면 안되는 것은 없다는 것을
다시금 느끼게 되었습니다.
윤지수
수업시간에 배우면서 알고 있다고 생각했
던 내용들이 프로젝트를 하면서 새롭게 다
가오는 걸 느꼈습니다. 같은 기술이라도 상
황이나 응용하기에 따라 더 쉽거나 더 어렵
게 사용할 수도 있고 그 몫은 본인이 얼마나
알고있는가에 달려있다는 것을 통감했습
니다.

2조 프로젝트 보고서 김동현

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 2조 프로젝트 보고서 김동현

Similar to 2조 프로젝트 보고서 김동현 (20)

2조 프로젝트 보고서 김동현