Accelerator 디바이스API 가이드 프로그램

Accelerator 가이드 프로그램은 모바일 디바이스 API 실행환경을 활용하여 하이브리드 앱을 개발 시 참고 및 활용될 수 있도록 구현 된 전자정부 디바이스 API에 대한 가이드 앱으로써, 모바일 스마트 디바이스의 Accelerator 관련 기능을 JavaScript 기반으로 구성 된 Accelerator DeviceAPI 를 통하여 조회 할 수 있도록 지원한다.

또한, 전자정부 표준프레임워크 기반의 웹 서버 어플리케이션과 연계하여 디바이스 내 Accelerator 정보를 서버로 전송 및 조회 할 수 있는 기능으로 구성되어 있다.

본 가이드 프로그램 에서는 Accelerator 기능을 가이드 할 수 있도록 가속도 정보 조회 , 가속도 정보 저장 , 가속도 정보 목록 , 리스트 삭제 기능을 제공하고 있으며.

효율적인 가속도 정보 변화의 조회를 위해 상단의 알림 창 이외에 3D 형태의 도형의 움직임을 통해 정보를 조회할 수 있으며, 3D 형태의 도형은 오픈 소스인 Three.js 를 활용하여 구현 된 것으로서, 디바이스의 가속도 정보의 변화에 따라 해당 방향으로 회전한다.

Accelerator 디바이스API 가이드 프로그램은 크게 디바이스의 Accelerator 정보를 조회하고 조회 한 정보를 웹 서버 어플리케이션으로 전송 및 조회하는 기능으로 구성되어 있다.(관련기능 부분참조)

• 카메라로 사진을 찍고 찍은 사진을 가져오거나, 단말기의 앨범에서 사진을 선택해서 가져온다.
  
• base64로 인코딩된 이미지를 가져오거나 사진 파일의 경로을 통해 사진을 가져온다.
  

navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);

function onSuccess(acceleration) {
    alert('Acceleration X: ' + acceleration.x + '\n' +
          'Acceleration Y: ' + acceleration.y + '\n' +
          'Acceleration Z: ' + acceleration.z + '\n' +
          'Timestamp: '      + acceleration.timestamp + '\n');
};

• ACCELERATOR

Accelerator 디바이스API 가이드 프로그램에서 제공하는 모바일 디바이스의 Accelerator 관련 기능을 활용하기 위하여 필요한 항목 및 그 환경 설정은 다음과 같다.

    <feature name="Accelerometer">
        <param name="ios-package" value="CDVAccelerometer"/>
    </feature>
    <feature name="InterfaceAPI">
        <param name="ios-package" value="EgovInterface"/>
    </feature>

    #define kSERVER_URL     @"Suerver_URL"

<sqlMap resource="egovframework/sqlmap/hyb/ios/dvc/EgovAcceleratoriOSAPIGuide_SQL_[DB명].xml"/>

Accelerator 디바이스 API 가이드 프로그램은 크게 디바이스의 가속도 정보를 조회 하는 가속도 정보 조회 기능 및 서버 연계를 통한 가속도 정보 저장, 가속도 정보 목록 조회, 가속도 정보 삭제 기능으로 구성되어있다.

디바이스 API를 통해 현재 가속도 정보를 호출하여, 가속도 정보를 모니터링 창에 표시 및 3D 도형을 통해 가속도 방향으로 도형을 회전한다.

디바이스 API 내의 Accelerator 함수를 사용하는 JavaScript 코드를 통해 실시간 가속도 정보를 조회 한다.

function fn_egov_update_Acceleration(accelInfo) 
{
	xaxis = accelInfo.x;
	yaxis = accelInfo.y;
	zaxis = accelInfo.z;
	timeStamp = accelInfo.timestamp;
// accelInfo 객체내의 가속도 정보(x, y, z, timestamp)를 저장한다.	

    var html = "X : " + xaxis + "<BR />" + "Y : " +  yaxis + "<BR />" + "Z : "  + zaxis;
    
    $("#infoDetail").css("text-align", "center");
    $("#infoDetail").css("margin-left", "1px");    
    
    html += ""
    $("#infoDetail").html(html);
    
	if (firstRefresh)
	{
		accInitX = xaxis;
		accInitY = yaxis;
		accInitZ = zaxis;
		firstRefresh = false;
	}

    console.log("DeviceAPIGuide fn_egov_update_Acceleration Success"); 
	
}

가속도 정보 조회 화면

가속도 정보 저장 : 가속도 정보를 서버로 송신하기 위해서는 하단의 가속도 정보 저장 버튼을 클릭한다.
가속도 정보 목록 : 가속도 정보 목록 화면으로 이동한다.

조회 된 가속도 정보를 서버에 전송하여 리스트 형태로 저장한다.

function fn_registAcceleratorInfo() {
	
	useYn = "Y";
			
	var url = "/acl/xml/addAcceleratorInfo.do"; 
	var accept_type = "json";
	var params = {uuid :  device.uuid,
			xaxis: xaxis + '', 
			yaxis: yaxis + '', 
			zaxis: zaxis + '', 
			timestamp: timeStamp + '', 
			useYn:  useYn};	

	// send the data
	egovHyb.post(url, accept_type, params, function(jsondata) {
		var data = JSON.parse(jsondata);
		
		if(data.useYn == "OK"){
			fn_InquireAccelerationInfoListXml();
		}else{
			$("#alert_dialog").click( function() {
				jAlert('데이터 전송 중 오류가 발생 했습니다.', '전송 오류', 'c');
				});
		}			
		
	});

	console.log("DeviceAPIGuide fn_registAcceleratorInfo request Completed");
    
} 

가속도 정보저장 화면

정보데이터를 서버로 송신하기 위해서는 가속도 정보 저장 버튼을 클릭하면 된다.

가속도 정보 저장 : 가속도 정보를 서버로 송신하기 위해서는 하단의 가속도 정보 저장 버튼을 클릭한다.
가속도 정보 목록 : 가속도 정보 목록 화면으로 이동한다.

서버에 저장 되어있는 가속도 정보 목록을 리스트 형태로 출력한다.

function fn_InquireAccelerationInfoListXml()
{
	if(!fn_egov_network_check(false)){
		return;
	}
	
	var url = "/acl/xml/acceleratorInfoList.do";
	var accept_type = "xml";
	// get the data from server
	window.plugins.EgovInterface.get(url,accept_type, null, function(xmldata) {
		var list_html = "";
		
		$(xmldata).find("acceleratorInfoList").each(function(){
            		var uuid = $(this).find("uuid").text();
 		           var x = $(this).find("xaxis").text();
     		  	var y = $(this).find("yaxis").text();
     			var z = $(this).find("zaxis").text();
            		var t = $(this).find("timestamp").text();

			list_html += "<li><h3>UUID : " + uuid + "</h3>";
			list_html += "<p><strong>xaxis : " + x + "</strong></p>";
			list_html += "<p><strong>yaxis : " + y + "</strong></p>";
			list_html += "<p><strong>zaxis : " + z + "</strong></p>";
			list_html += "<p>timestamp : " + t + "</p></li>";
        });
		var theList = $('#theList');
		theList.html(list_html);
		$.mobile.changePage("#btnMoveAccelratorInfoList", "slide", false, false);
		theList.listview("refresh");
		if(myScroll != null) {
			myScroll.refresh();
		}
		
	});

	console.log("DeviceAPIGuide fn_InquireAccelerationInfoListXml request Completed");
} 

가속도 정보목록 화면

서버에 저장 되어있는 가속도 정보 목록을 조회하기 위해서는 가속도 정보 목록 버튼을 클릭하면 된다.

가속도 정보 조회 : 가속도 정보 조회 화면으로 이동한다.
리슽 삭제 : 서버에 저장 되어있는 가속도 목록을 초기화 하기 위해서는 가속도 정보 삭제 버튼을 클릭한다.

서버에 저장 되어있는 가속도 정보 목록을 초기화 한다.

function fn_DelAccelerationInfoList() {
	
	var url = "/acl/xml/withdrawal.do";
	var accept_type = "json";
	// send the data
	egovHyb.post(url, accept_type, null, function(jsondata) {
		var data = JSON.parse(jsondata);
		
		if(data.useYn == "OK"){
			$.mobile.changePage("#acceleratorInfo", { transition: "slide", reverse: true });
		}else{
			$("#alert_dialog").click( function() {
				jAlert('데이터 삭제 중 오류가 발생 했습니다.', '삭제 오류', 'c');
				});
		}
		
	});

	console.log("DeviceAPIGuide fn_DelAccelerationInfoList request Completed");
	    
}

가속도 정보삭제 화면

서버에 저장 되어있는 가속도 정보 목록을 초기화하기 위해서는 가속도 정보 목록 화면 하단의 가속도 정보 삭제 버튼을 클릭하면 된다.

가속도 정보 조회 : 가속도 정보 조회 화면으로 이동한다.
리스트 삭제 : 서버에 저장 되어있는 가속도 목록을 초기화 하기 위해서는 가속도 정보 삭제 버튼을 클릭한다.

• 왼쪽 상단의 삼각형 버튼을 클릭하면 가이드 프로그램이 빌드되어 아이폰 디바이스에 설치 된다.

• 빌드가 성공하면 아래와 같은 어플리케이션 실행화면을 확인 할 수 있다.

• 서버사이드 가이드 프로그램의 실행은 프로젝트를 마우스 오른쪽 버튼을 클릭 한후 Run As>Run On Server 버튼을 통해 실행 할 수 있다.

• 빌드가 성공적으로 수행 되면 이클립스의 콘솔 창에서 'Server Startup in xxx ms' 메시지를 확인 할 수 있다.

디바이스 어플리케이션에서 발생한 오류 내용 확인 및 디버깅을 위해서는 폰갭 프레임워크에서 제공하는 console.log를 이용할 수 있다. console.log 함수는 자바스크립트 구문에서 사용할 수 있는 디버그 코드로 이클립스 및 Xcode에서 확인 할 수 있다.

• 실제 콘솔 로그 예

function fn_egov_network_check(doCheck)
{
    console.log('DeviceAPIGuide fn_egov_network_check');
    var networkState = navigator.network.connection.type;
    ...
}

• xCode 콘솔 창

^디버그 코드^디버깅 내용^

Accelerator 디바이스 API 가이드 다운로드 : Click

• Cordova : Click
  
• UX/UI 라이브러리 : jQuery MobileClick
  
• 3D 렌더링 : Three.js