협업 - 동기화 서비스

동기화 서비스는 ON/OFFLINE에 관계없이 사용자가 글 목록 조회, 등록, 수정, 삭제하며 관리자는 글내용을 관리하는 기능을 제공한다.

본 컴포넌트 입장에서 바라본 활용사례로는 Google 에서 제공하는 gmail 서비스와 유사한 서비스를 들 수 있다.
gmail의 경우 네트웍 단절 상황에서도 수신된 이메일의 목록을 확인 할 수 있으며, 이메일을 작성 할 수도 있다.
또한 네트웍 상황이 정상화 되었을 경우 오프라인 상에서 작성한 이메일이 발송되는 것을 확인 할 수 있다.

동기화 서비스는 HTML5의 offlineweb과 webstorage의 기능중 localstorage 기능을 이용하여 구현하였다.
구현 내용을 살펴보자면 offlineweb 을 이용하여 네특웍 단절시에도 활용 할 페이지를 offlineweb으로 지정하고,
지정된 페이지 내에서 데이터는 webstorage를 이용해 데이터를 표현하며 데이터의 종류는 기본데이터, 신규데이터, 수정된데이터, 삭제된 데이터로 구분 할 수 있다.
각각의 데이터는 아래와 같이 구분하여 webstorage에 저장하여 사용하였다.
- 기본 데이터는 온라인 상에서 조회하여 webstorage에 저장한 데이터
- 신규 데이터는 오프라인 상에서 등록을 통해 신규로 생성하여 webstorage에 저장한 데이터
- 수정된 데이터는 오프라인 상에서 기본 데이터 또는, 신규 데이터를 수정하여 webstorage에 저장한 데이터
- 삭제된 데이터는 오프라인 상에서 기본 데이터, 신규 데이터, 수정된 데이터를 삭제하여 webstorage에 저장한 데이터

HTML5의 offlineweb 활용 측면에서 '모바일 동기화 서비스' 컴포넌트와 '모바일 오프라인웹 서비스'는 offlineweb 활용이라는 동일한 서비스를
기반으로 출발하고 있다. 단 '동기화 서비스'의 경우에는 HTML5의 offlineweb에 webstorage 를 추가하여 활용 측면을 확대한 것이고
오프라인웹 서비스는 HTML5 offlineweb 단일 기술로만 이루어져있다.

* 기능흐름

본 컴포넌트의 모바일 화면은 모바일 디바이스에 탑재된 브라우저를 대상으로 개발 및 테스트 검증이 완료되었다.
또한 동일 제조사의 동일한 브랜드라도 PC용 브라우저와 mobile용 브라우저의 HTML5, CSS3 에 대한 지원이 상이함으로
개발시 유의가 필요함을 밝혀둔다.

검증 대상 디바이스와 브라우저로는 각각 갤럭시S2, 갤럭시S, iPad2, iPhone4, 갤럭시탭1 등의 디바이스와
android용 웹 브라우저, Firefox, Safari, opera mobile 등의 모바일 브라우저를 사용하였다.

검증결과는 아래와 같다.

Android
android용 웹 브라우저, Firefox(6.xx), opera mobile은 android OS 2.3(gingerbread) 에서 HTML5, CSS3 및 컴포넌트의
실행이 안정적으로 실행되는 것을 확인 하였다.
반면 android OS 2.3(gingerbread) 하위 브라우저인 android 2.1, 2.2에서는 컴포넌트 실행에 있어 매끄럽지 못한 HTML5, CSS3 지원으로 인하여
컴포넌트의 UI 구현이 원할하지 못한 모습을 보였다.

opera mobile의 경우 UI처리시 색상 및 이벤트 처리에 문제를 야기하였으며
그로인해 opera mobile은 3종 지원브라우저 대상에서 제외 되었다.
테스트 모바일 디바이스로는 갤럭시, 갤럭시S2, 갤럭시탭1을 채택하였다.

iOS
iOS는 3종 지원브라우저 대상중 하나로 Safari 4.2, 4.3 버전에서 검증을 하였으며 비교적 원활한 HTML5, CSS3를 지원을 하였다.
테스트 모바일 디바이스로는 iPhone4, iPad2를 채택하였다.

동기화 서비스는 관리기능인 동기화 목록조회, 상세조회, 등록, 수정, 삭제로 구성되어 있으며, 사용자기능에서는
동기화 서비스 목록조회, 상세조회, 등록, 수정, 삭제 기능으로 구성되어 있다.(관련기능 부분참조)

동기화 서비스는 동기화 글 목록조회, 상세조회, 등록, 수정, 삭제에서 사용자/관리자 인증이 필요하다.
인증을 위해 로그인/회원관리/권한관리 컴포넌트와 연계하여 사용할 수 있다. Spring Security를 통해 인증을 할 경우 다음과 같이 변경하면 된다.

    <!--인증된 유저의 LoginVO, 권한, 인증 여부를 확인 할 수있는 서비스 클래스-->
    <bean id="egovUserDetailsHelper" class="egovframework.com.cmm.util.EgovUserDetailsHelper">
        <property name="egovUserDetailsService">
            <ref bean="egovUserDetailsSecurityService" />
        </property> 
    </bean>
 
    <!-- 시큐리티를 이용한 인증을 사용할 빈 -->
    <bean id="egovUserDetailsSecurityService" class="egovframework.com.sec.ram.service.impl.EgovUserDetailsSecurityServiceImpl"/>

    <!-- 2. 스프링 시큐리티 설정-->
    <filter>
        <filter-name>springSecurityFilterChain</filter-name>
        <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>springSecurityFilterChain</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
 
    <listener>
        <listener-class>org.springframework.security.ui.session.HttpSessionEventPublisher</listener-class>
    </listener>
    <!-- security 끝 -->
 
    <!-- 4. Spring Security 로그아웃 설정을 위한 필터 설정 -->
    <filter>
    	<filter-name>EgovSpringSecurityLogoutFilter</filter-name>
    	<filter-class>egovframework.com.sec.security.filter.EgovSpringSecurityLogoutFilter</filter-class>
    </filter>
    <filter-mapping>
    	<filter-name>EgovSpringSecurityLogoutFilter</filter-name>
    	<url-pattern>/uat/uia/actionLogout.do</url-pattern>
    </filter-mapping>
 
    <!-- 4. Spring Security 로그인 설정을 위한 필터 설정 -->
    <filter>
    	<filter-name>EgovSpringSecurityLoginFilter</filter-name>
    	<filter-class>egovframework.com.sec.security.filter.EgovSpringSecurityLoginFilter</filter-class>
    </filter>
    <filter-mapping>
    	<filter-name>EgovSpringSecurityLoginFilter</filter-name>
    	<url-pattern>*.do</url-pattern>
    </filter-mapping>

web.xml에 위 내용과 같은 Spring Security 관련 필터를 추가 하여야 한다.

로그인/회원관리/권한관리에 대한 자세한 내용은 다음을 참조한다.

• 로그인 : 일반로그인
• 회원관리 : 사용자관리
• 권한관리 : 권한관리

사용자/관리자 권한이 필요한 페이지는 다음과 같다.

* 현재 배포된 모바일 공통컴포넌트는 HTML5, CSS3를 적용하고 있다.
* 그에 따라, 현재 모바일OK, W3C의 모바일 웹 사이트 유효성 검사의 표준에 맞지 않으며, 정확한 유효성 검사에 대한 문의는 해당 전문기관에 문의가 필요하다.
* 현재 배포된 모바일 공통컴포넌트 V 2.0은 소스코드에 대한 보안성 검증이 완료 되었다.

html5의 오프라인 웹을 사용하기 위해서는 몇가지 설정 정보가 필요하다.
- web.xml에 mime type을 설정한다.
- root이하에 xxxx.manifest파일을 작성하고 오프라인으로 적용할 대상 페이지 상단에 <html manifest=”/xxxx.manifest”>를 기술하도록 한다.
- /xxxx.manifest에 적용대상 페이지를 기술한다.

단 표준프레임워크의 경우 jsp 파일이 WEB-INF폴더 이하에 기술되어 있으므로 /WEB-INF/xx/xx.jsp 형태로 기술하면 오프라인 작업 대상이 될 수 없다.
또한 root 이하에서 사용된 jsp를 포함한 xx.css, xx.js, xx.jpg… 등은 오프라인 작업 대상이 될 수 있다.

오프라인 적용대상 파일을 xxxx.manifest 파일 적용시 css, js 파일과 jsp 파일내에 import 되어있는 파일을
xxxx.manifest 파일에 별도 기술할 필요는 없다.
단 import된 파일의 경로가 정확하지 못하다면 오프라인 적용 전체가 적용되지 않을 수 있으니 import되는 파일의
경로 확인은 반드시 주의를 하여야함 한다.

또한 xxxx.manifest 파일에 설정된 파일을 수정한 후 테스트를 하고자 할때는 반드시 브라우저 Cache를 삭제 해야만 한다.
만일 브라우저 Cache를 삭제하지 않는다면 에디터 상에서 코드 수정 후 브라우저만을 refresh 한다 하여도 적용된 코드가 반영이 안되는 경우가 발생할 수 있다.

<mime-mapping>
	<extension>manifest</extension>
	<mime-type>text/cache-manifest</mime-type>
</mime-mapping>

  CACHE MANIFEST
  # version 1.0.01
  # 2011.09.21

  # Explicitly cached
  CACHE:
  ./css/egovframework/mbl/cmm/jquery.mobile-1.0b3.min.css
  ./css/egovframework/mbl/cmm/EgovMobile.css
  ./css/egovframework/mbl/mcomd/egovMcomd.css

  ./js/egovframework/mbl/cmm/jquery-1.6.2.min.js
  ./js/egovframework/mbl/cmm/jquery.mobile-1.0b3.min.js
  ./js/egovframework/mbl/cmm/EgovMobile.js
  ./js/egovframework/mbl/com/syn/syn.js

  ./mbl/com/syn/goMobileSyncList.mdo
  ./mbl/com/syn/goMobileSync.mdo
  ./mbl/com/syn/goMobileSyncInsert.mdo
  ./mbl/com/syn/goMobileSyncUpdate.mdo

  # Display fallback.html for all uncached pages
  FALLBACK:

  # Following resources require network connection.
  NETWORK:
*

특정 모바일 단말기(갤럭시S, 갤럭시S2)에서는 온/오프라인 여부을 확인할 수 있는 코드(“window.navigator.onLine”)가 제대로 작동되지 않으므로, 다음과 같은 코드를 통해 온/오프라인 여부를 파악한다.

// 온라인 상태
var onLine = true;
// 단말기가 갤럭시 S, 갤럭시 S2 인경우 true
var deviceStatus = false;
 
// 단말기가 갤럭시 S, 갤럭시 S2 인경우
if (navigator.userAgent.indexOf("SHW-M110") > -1 || 
		navigator.userAgent.indexOf("SHW-M250") > -1) {
 
	deviceStatus = true;
}
 
if(deviceStatus==true){		
	// 최초 상태 확인
	testConnection();	
	// 주기적으로 연결 상태를 확인 
	setInterval(function () {
		// 연결 상태 확인
		testConnection();
	}, 10000); // 10 초 주기로 지속
}
 
// 이벤트를 전파한다.
function triggerEvent(type) {
	var event = document.createEvent('HTMLEvents');
	event.initEvent('onLine', type, false);
	event.eventName = type;
	window.dispatchEvent(event);
 
	if(type==true){
		try{
			synchronizer();
		}catch(e){
		}
	}
}
 
// 실제 HTTP 연결 후 결과를 반환한다.
function testConnection() {
	if(deviceStatus!=true){
		onLine = window.navigator.onLine;
		return;
	}
	onLine = true;
    var xhr = new XMLHttpRequest();
    xhr.open('HEAD', '/', false); // async=false (동기모드)
    try {    	xhr.send(null);
    	onLine = true;
    } catch (e) {
    	// 연결이 실패한 경우 NETWORK_ERR 가 발생함.
    	onLine = false;
    }
 
   	// 해당 이벤트 전파
   	triggerEvent(onLine);
}

HTML5의 오프라인웹서비스를 구현할때 데스크탑의 chrome 브라우저 상에서 우클릭 후 요소검사 탭을 선택하여 개발자도구를 이용하면
브라우저 Cache내지는 xxxx.manifest 파일로 인한 문제를 감소 시킬 수 있다.

실례로 chrome 브라우저의 개발자 도구의 Resource 탭을 선택하면 Local Storage, Application Cache를 확인 할 수 있다.
Application Cache 를 클릭하여 펼치면 xxxx.manifest 상에 기술된 오프라인웹 대상 페이지를 확인 할 수 있다.

만일 Application Cache에 xxxx.manifest에 기술된 내용이 없다면 오프라인웹이 적용이 안된 것이다.
개발시 chrome 브라우저의 개발자도구를 이용한 디버깅을 병행한다면 보다 안정적인 오프라인웹 코딩이 이루어 질 수 있다.

아래 그림은 각각 Local Stroage, Application Cache에 적용된 실례이다.

동기화 서비스의 기능 수행은 ajax통신을 통한 json 및 form 전송 방식으로 통해 데이터를 처리, 페이지 이동은 전적으로 form 전송 방식으로 이루어지고 있다.

동기화 서비스 대상 메시지 목록을 조회 할 수 있다.

단 더보기 버튼을 클릭하면 기존의 조회 목록에 신규로 메시지를 5건씩 추가하여 조회 할 수 있다.
글쓰기 버튼을 클릭하면 동기화 서비스 등록 화면으로 이동 할 수 있다.

또한 오프라인 전환시 온라인상에서의 목록조회, 상세조회, 등록, 수정, 삭제가 동일하게 이루어지고 있다.
오프라인 상에서 작업한(CRUD) 내용은 webstorage상에 데이터를 저장하여, 온라인으로 전환시 서버 측의 DBMS에 모두 반영되도록 이루어져 있다.
단 온라인상에서 목록 조회를 반드시 1회 이상을 해야한다.(1회 이상 목록 조회를 통해 webstorage상에 데이터를 할당한다.)

온라인 상에서 목록조회를 하는 순간 목록에 담긴 정보를 webstorage에 저장하고 이를 오프라인 상에서
사용을 하게 된다.

window.addEventListener("online", function(e) { 
	localStorage.removeItem("localSn");

	var localData = "";			
	var rowFlag = "∀";

	for(var i=1; i<=localStorage.length; i++) {
		var data = localStorage.getItem("localSn" + i).split("|");
		if (data[0] != "S") {
			if (!(data[0] == "D" && data[1] == "0")) {
				if (i == 1) {
					localData = localStorage.getItem("localSn" + i)
				} else {
					localData += rowFlag + localStorage.getItem("localSn" + i);
				}
			}
		}
	}
	if(localData.length > 0) {
		var uri = "<c:url value='/mbl/com/syn/executeMobileSync.mdo'/>";
		$.ajax({
			type       : "POST",
			cache      : false,                   
			url        : uri,
			data       : {localData:localData},          
			dataType   : "json",                 
			success :function(json) {
				fn_synList();
			}
		});
	} else {
		fn_synList();
	}
}, true); 

function fn_synList() {
	// var uri = "<c:url value='/mbl/com/syn/selectMobileSyncList.mdo'/>"; 
	var uri = contextPath + "/mbl/com/syn/selectMobileSyncList.mdo"; 

	$.ajax({
		type       : "POST",
		cache      : false,                   
		url        : uri,
		data       : {fetchRow:fetchRowIdx, deviceType:deviceType},          
		dataType   : "json",                 
		success :function(json) {
			var synList = eval(json.synList);
			var html = "";
			localStorage.clear();
			var seperator = "|";
			for(var k=0; k<synList.length; k++) {
				var data = "S" + seperator + synList[k].sn + seperator + synList[k].syncSj + seperator + synList[k].syncCn + seperator + synList[k].creatDt;
				localStorage.setItem("localSn" + (synList.length - k), data);
			}
			fn_showList();
		}
	});
};

동기화 서비스의 기능 수행은 ajax통신을 통한 json 및 form 전송 방식으로 통해 데이터를 처리하며,
페이지 이동은 전적으로 form 전송 방식으로 이루어지고 있다.

동기화 서비스 상세 글을 조회할 수 있다.
오프라인 상에서의 상세 글은 온라인 상에서 목록 조회시 획득된 webstorage 정보를 이용하여 처리하고 있으며,
삭제 기능을 수행할 수 있다.

  var data = "D" + seperator + rowData[1] + seperator + rowData[2] + seperator + rowData[3] + seperator + rowData[4];
  localStorage.setItem(localStorage.getItem("localSn"), data);

동기화 서비스의 기능 수행은 ajax통신을 통한 json 및 form 전송 방식으로 통해 데이터를 처리하며,
페이지 이동은 전적으로 form 전송 방식으로 이루어지고 있다.

동기화 서비스글을 모바일에서 입력, 유효성 체크 후 저장 처리한다.
오프라인상에서 등록되는 글은 별도로 webstorage에 저장을 한다.

  var dataLength = localStorage.length + 1;
  var data = "I" + seperator + "0" + seperator + syncSj + seperator + syncCn + seperator + getTimeStamp();
 

동기화 서비스의 기능 수행은 ajax통신을 통한 json 및 form 전송 방식으로 통해 데이터를 처리하며,
페이지 이동은 전적으로 form 전송 방식으로 이루어지고 있다.

동기화 서비스글을 모바일에서 수정하여, 유효성 체크 후 저장 처리한다.
오프라인상에서 수정되는 글은 별도로 webstorage에 저장을 한다.

오프라인상의 수정은 오프라인 상의 등록을 고려하여 관련코드가 구성되어있다.

var syncStatus = "U";
if (rowData[0] == "I") {
	syncStatus = "I";
}
var data = syncStatus + seperator + rowData[1] + seperator + syncSj + seperator + syncCn + seperator + rowData[4];
localStorage.setItem(localStorage.getItem("localSn"), data);	

동기화서비스 글 목록을 검색조건 및 검색어를 이용하여 조회 할 수 있다.
페이지에는 10개의 행을 노출하도록하며, 10개 이상이 되면 하단의 페이징을 통해 처리를 하고있다.

N/A

동기화 서비스 상세 글을 조회하고 있다.

N/A

동기화 서비스 글을 등록하며 입력시에는 제목, 내용을 입력 하도록 한다.
제목, 글내용은 필수 입력 항목이다.

N/A

동기화 서비스 글을 수정하며 수정시에는 제목, 내용을 입력 하도록 한다.
제목, 글내용은 필수 입력 항목이다.

N/A

• 배포 및 테스트 관련 : 모바일 공통컴포넌트란 및 배포 패키지 구성안
• 관련 데이터베이스 구조 및 스키마 : 관련 데이터베이스 구조 및 스키마