Portfolio

개 인 프 로 젝 트
P O R T F O L I O
신 입 개 발 자 장병학

INDEX
• 개발 환경
• 사용 언어 및 라이브러리
• 구현 내용
–1. HomePage
–2. Android Application
• 프로젝트 소스코드

개발 환경
• HomePage
– STS(Spring Tool Suite) 3.9.1.RELEASE
– apache-tomcat-8.0.47
– MySQL 5.7.18
• Android Application & 서버 프로그램
– Android Studio 3.0.1 (Android 클라이언트 프로그램)
– Eclipse Neon.3 Release 4.6.3 (Window PC 서버 프로그램)
– Java Swing (Window PC 서버 프로그램 GUI)
• 공통
– Git

사용 언어 및 라이브러리
프로젝트 언어 라이브러리
홈페이지
Java
JSP
HTML, CSS
JavaScript
Bootstrap (HTML, CSS)
jQuery, Handlebars (JavaScript)
ImgScalr (Spring – 이미지파일 가공)
Jackson, GSON (Spring – JSON)
HttpClient (Spring – 외부 서비스 이용)
myBatis (Spring – DB)
안드로이드
어플리케이션
Java Bluecove (Bluetooth)

구현 내용 - HOMEPAGE
• 1. HomePage 요약
– 개인 사진 홈페이지로, 관리자로 로그인 할 경우 사진 업로드, 수정, 삭제 기능.
– 로그인, 메시지 전송 등 일부 데이터 전송 시 RSA암호화.
– Ajax와 Handlebars 템플릿 등을 이용하여 화면전환 없이 데이터 갱신.
– Drag & Drop으로 손쉽게 파일을 업로드.
– 게시판 형태로 Message를 관리하고 E-mail 답장.
– 라이브러리를 사용하여 업로드 된 사진파일을 가공하여 저장.
– Open API를 사용하여 외부 서비스 이용.

Controller
Service
DAO
DB (MySQL)
외부 서비스
방문자 관리자
• 웹 서비스 처리 과정 - 1
1. HOMEPAGE
Interceptor

• 웹 서비스 처리 과정 - 2
1. HOMEPAGE
Client
/
/gm/{cate}
/ad/main
/ir/del/{no}
/ir/reg
Controller
MainController
UrlMapping = “/”
…
AdminController
UrlMapping = “/ad”
…
FileGetControllerRest
UrlMapping = “/file”
…
Service
MemberService
loginService()
PhotoService
insertService()
…
MainService
insertVisiterInfo
…
DAO
PhotoDAO
inpuirePhotolist()
…
MessageDAO
totalMessage()
…
DB(MySQL)
View
인
터
셉
터

• 프로젝트 기본 설정
1. HOMEPAGE
MAVEN설정을 통해
필요할 모듈 설치
myBatis 설정파일 및
SQL문을 분리하여
관리하기 위한 XML파일
DB와 연결된
SqlSession 빈을
주입 받기 위한 설정.
리소스 값들을 별도로 관리
Class 내부

1. HOMEPAGE
• 관리자 Login Service 및 Interceptor
ID가 DB에 없거나
Password가 틀리면 예외 발생
Service Controller
Interceptor
“admin”객체 유무를 확인.
없을 경우 Login Page로
강제 이동 시킨다.
“/ad”로 시작되는
모든 경로를 맵핑.
예외에 따라
에러내용을
담은 Map객체를
Model에 담아
Login page로
전달한다.
servlet-context.xml

1. HOMEPAGE
• 라이브러리를 이용한 데이터 암호화(RSA)처리.
키 생성.
공개키는 전송하고
개인키는 세션에 저장.
공개키와 암호화 할 데이터로
암호화 작업 수행
Server Client
서버로 전송
세션에서 개인키를 가져와
복호화 수행 후 데이터 처리.

RestController
Client
DB
1. HOMEPAGE
• 방문자 Message 등록.
쿠키를 확인하여
연속 메시지기록을
제한하기.
첫 메시지 전송이면
새로운 쿠키 발급
등록 뒤 페이지 전환 없이 성공, 실패 메시지 출력
RSA암호화된
메시지를 복호화
유효성 체크 후 RSA공개키를 받아와
암호화 과정을 거친 뒤 전송

1. HOMEPAGE
• EL, JSTL, Bootstrap을 이용한 게시판 형태의 Message List구현.
Controller
JSP Page
BootStrap을 사용하여 깔끔하게
Message List 표현.

1. HOMEPAGE
• Message에 대한 E-mail 답장.
생성된 자바 빈을
@Inject 에노테이션으로
JavaMailSender 객체에
자동 주입.
메일 발송
방문자 정보
및
메시지 전달
Click
Click
SimpleMailMessage
객체에 방문자 정보 및
메시지 담기.
root-context.xml

Drag
&
Drop
1. HOMEPAGE
• Drag & Drop으로 사진파일 추가
박스 안에 ‘drop’
이벤트가 발생.
Event객체에서
File객체의 배열을 받아
[].forEach.call 함수를
사용하여 readfile
함수에 인자로 전달.
FileReader객체에
이벤트 리스너를 등록.
File객체가 ‘load’되면
데이터를 FormData객체에
담아 Ajax로 서버에 전송.
MultipartHttpServletRequest객체로
데이터를 받아 MultipartFile 리스트를
얻어 각각의 데이터를 처리.

썸네일
생성
Spring에서 제공하는
FileCopyUtils클래스로
파일을 다른 폴더로 복사
ImgScalr라이브러리에서 제공하는
Scalr클래스로 원래 사진파일을 수정하여
썸네일 파일을 생성.
파일의 이름과 UUID로 생성된
문자열을 합쳐서 고유한 파일이름을
가질 수 있도록 새로운 이름 생성.
1. HOMEPAGE
• 전송된 사진의 썸네일 만들기 – ImageUtil Class.

Drag
&
Drop
getJSON 메서드를 사용하여
요청결과 값을 JSON으로 받아 온 뒤
화면 전환 없이 데이터를 추가한다.
Ajax를 이용하여 서버로
사진을 전송하고 만들어진
썸네일을 받아 화면에
표시한다.
1. HOMEPAGE
• Ajax와 Handlebars 템플릿을 이용하여 화면전환 없이 Data추가.
선택 전
선택 시
선택 후

1. HOMEPAGE
• Open API를 사용한 외부 서비스 이용
Instagram-API, Google Maps-API등
Token값이 외부로 노출되는 것을 방지하기 위해
HttpClient라이브러리를 사용하여 서버에서 바로
API서비스를 요청하고 응답 받은 데이터를 가공.
IP-API Instagram-API
Google Maps API를 사용하여 방문자 위치를 시각화
Google Chart로 방문자 통계 시각화

구현 내용 - ANDROID
• 2. Android Application 요약
– Bluetooth 통신으로 PC–Android간 데이터전송.
– Android에서 제공하는 BluetoothAdapter클래스를 사용하여 Bluetooth Socket
통신 구현.
– BlueCove라이브러리를 사용하여 PC Server프로그램에서 Bluetooth통신 구현.
– 사용자의 동작을 최소화 할 수 있도록 설계 및 구현.
• Client 상태에 따라 Server프로그램 화면이 자동으로 전환.
– 전송 받을 파일의 저장 위치 변경 가능.
– ArrayAdapter로 전송할 이미지파일 및 음악파일을 리스트형태로 Activity에 출력.
– 디바이스 언어설정에 따라 영어/한글을 지원.

2. ANDROID APPLICATION
• Bluetooth 서비스 처리 과정.
Activity
Client Service
Server Service
GUI
Android
PC Server
연결
요청
연
결
데이터
전송
완료
응답
데이터
전송
완료
응답
동작 요청 결과 반영
동작 요청 결과 반영

• Android Activity 구조.
데이터 받기
클릭 시
데이터 전송

• PC Server-Program GUI 구조.
데이터 받기
데이터 전송

• Device 내부 Data에 접근.
원하는 메타데이터의
종류들을 String 배열로
만든다.
얻고자 하는 데이터의
Type을 정한 뒤
커서를 얻어온다.
그리고 커서를 가장
처음으로 위치시킨다.
커서를 옮기며
파일 정보를 읽어 올
반복문
파일마다 가져올 메타데이터의
위치(Index)를 얻어온다.
얻게 된 메타데이터의 위치(Index)로
파일을 가리키는 커서로 부터
메타 데이터를 가져온다.
이 함수를 통해 얻게 된 파일의 다양한
정보를 토대로 Device 내부의 각종
파일에 접근 가능하다.
파일 전송을 위해 필요한
메타 데이터를 얻을 수 있다.

• Bluetooth 연결 – 1 (Client)
BluetoothAdapter
객채로부터 페어링된
Device List를 얻어온다.
Dialog
띄우기
Click
페어링 되어 있는
Device 목록을 출력.
선택된 Device를
Service클래스의
connect() 메서드로 전달.

• Bluetooth 연결 – 2 (Client)
Thread 생성자를 통해
Bluetooth Socket 얻기
실제 데이터를 전송하는 역할을
하는 ConnectedThread 실행
Bluetooth Socket을 얻는
ConnectThread
Thread 생성 시
얻게 된 Socket으로
Connect 수행. 성공 시,
ConnectedThread 실행.
실제 데이터를 주고받을
Input, Output Stream을
가져온다.

• Bluetooth 연결 – 3 (Server)
클라이언트와 동일한 UUID로
Connection 열기.
동일한 UUID로 생성된 Socket이
연결될 때 까지 대기.
Client가 연결에 성공한다면
대기중이던 아래 작업 수행.
연결에 성공하면
Client와 동일하게
데이터 전송을
담당하는 Thread가
실행된다.

• 데이터 전송 Process – 1 (Client)
번호 설명
1번 연결상태의 정상을 알리는 데이터.
2번 사용자의 의도를 전달. (정상 : 1, Activity 종료 : -1)
3번 2번이 1이 아닐 경우 데이터 전송 중지.
4번 파일 이름을 전달.
5번 파일의 MIME Type을 전달.
6번 파일의 크기를 전달.
7번 실제 데이터를 byte[]로 바꾸어 전달.
1
2
3
4
5
6
7
Client – Data 전송
파일 전송을 위한
Object
Write 메서드

• 데이터 전송 Process – 2 (Server)
1
2
3
4
5
6
7
Server – Data 받기1
번호 설명
1번
Socket연결이 끊어졌을 경우 -1을 받고 종료 시킨다.
(의도치 않은 종료 처리.)
2번
Client가 종료를 원할 경우 -1이, 데이터를 전송할
경우 1이 전달된다. (의도된 종료 처리.)
3번
Client에서 파일 저장을 위해 필요한 데이터를
읽어 들인다.
4번
순차적으로 입력되는 Data를 차례대로 받아 두기
위한 일종의 임시 저장 변수.
5번
실제 Data가 전달되는 구간.
반복해서 버퍼만큼 받은 데이터를 임시 변수에 쓴다.
파일의 크기와 복사된 파일의 크기가 같으면 빠져나간다.
6번 5번에서 받은 데이터를 컴퓨터의 저장소(외장 디스크)에 저장.
7번
Client에 데이터 전송이 완료되었다는 Message를 전달.
사용이 완료된 OutputStream을 닫는다.
2
3
4
5
6
7

• Device -> PC 데이터 전송 - 1
Server 프로그램 실행 과 동시에
Socket연결 대기상태가 된다.
전송 할 데이터 클릭
Click
Server 에 연결됨 과 동시에
화면전환 및 데이터 전송.
다시 메인 화면으로 전환됨.
전송
완료
전송
완료 시
다시 선택가능

• Device -> PC 데이터 전송 - 2
<페어링 Dialog>를
종료 시키고
<전송중 Dialog> 활성화.
복사된 데이터의 크기가
갱신 될 때 마다
ProgressBar에 입력.
화면의 상태바를 진행시킴.
정상적으로
연결되고 파일 전송
코드를 받으면
페널을 전환.
파일 전송 완료
코드를 Client로
전송.
<전송중 Dialog> 종료.
페널을
메인 화면으로 변경
Client Server

• PC -> Device 데이터 전송 - 1
Server 프로그램 실행 과 동시에
Socket연결 대기상태가 된다.
Click
Click
Click
다시 파일 대기파일 대기 파일 받기
전송
완료시

• PC -> Device 데이터 전송 - 2
Bluetooth연결 뒤
FILE_SEND_MODE
메시지 전송.
정상적으로 메시지가
전달되면 페널 전환
메서드 호출.
파일 선택 버튼.
선택된 File객체로 전송 할
WriteObject객체 생성.
전송 버튼.
생성 된 WriteObject
객체의 데이터로
쓰기 수행.
Client Server
복사된 데이터의 크기가
갱신 될 때 마다
ProgressBar에 입력.
화면의 상태바를 진행시킴.

• 국제화
한글 English
Device 언어 설정에 따른
리소스 값 적용.
이미지 리소스 관리
문자열 리소스 관리

프로젝트 소스코드
소스코드 링크(Git)
○ Homepage :
https://github.com/byunghakjang1230/byunghakphoto.git
○ Bluetooth Client(Android) :
https://github.com/byunghakjang1230/BluetoothSender.git
○ Bluetooth Server(PC) :
https://github.com/byunghakjang1230/BluetoothServer.git

Portfolio

More Related Content

What's hot (16)

Similar to Portfolio (20)

Portfolio