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

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

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

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

효율적인 나침반 정보 변화의 조회를 위해 상단의 알림 창 이외에 나침반 형태의 도형의 움직임을 통해 정보를 조회할 수 있으며, 디바이스의 나침반 정보의 변화에 따라 해당 방향으로 회전한다.

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

• 디바이스의 현재 방향각 정보를 가져온다.
  

navigator.compass.getCurrentHeading(compassSuccess, compassError, compassOptions);

function onSuccess(heading) {
    alert('Heading: ' + heading.magneticHeading);
};

function onError(error) {
    alert('CompassError: ' + error.code);
};

navigator.compass.getCurrentHeading(onSuccess, onError);

• COMPASS

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

    <feature name="Geolocation">
      <param name="ios-package" value="CDVLocation"/>
    </feature>
    <feature name="InterfaceAPI">
        <param name="ios-package" value="EgovInterface"/>
    </feature>

#define kSERVER_URL     @"Server_URL"

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

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

디바이스 API를 통해 현재 나침반 정보를 호출하여, 나침반 정보를 모니터링 창에 표시 및 나침반 형태의 도형을 통해 디바이스의 방향에 따라 도형을 회전한다.

디바이스 API 내의 Compass 함수를 사용하는 JavaScript 코드를 통해 실시간 나침반 정보를 조회 한다.

function fn_egov_update_heading(h) 
{
	drc = h.magneticHeading;
	accrcy = h.headingAccuracy;
	timestamp=  h.timestamp;
	
	// 새로운 각도 값을 받아옴
	newHeading = Math.round(drc);	

	$("#compassMain").trigger("newHeading", newHeading);
		
    var html = "방위각 : " + drc + "<BR />";

    $("#infoDetail").html(html);
    if(CompassInsertCheck) 
    {
        CompassInsertCheck = false;
    }
    console.log("DeviceAPIGuide fn_egov_update_heading Success"); 
}

function fn_egov_get_compass() 
{
    if (CompasswatchID === null) 
    {
                
        //alert("Compass start");
        //toast("Compass start");
        CompassInsertCheck = true;
        var options = { frequency: 1 };
        CompasswatchID = navigator.compass.watchHeading(fn_egov_update_heading, 
                                                        function(e) 
                                                        {
                                                        console.log("DeviceAPIGuide fn_egov_get_compass fail");
                                                        }, 
                                                        options);
    } 
    else 
    {    
    	
    	compassEvent();
    	
        navigator.compass.clearWatch(CompasswatchID);
        CompasswatchID = null;
        fn_egov_update_heading({ drc : "Off"});
        //navigator.notification.alert("Compass stop");
        //toast("Compass stop");
    }
}

나침반 정보 조회 화면

방향 정보 저장 시작 : 나침반 정보를 서버로 송신하기 위해서는 하단의 나침반 정보 저장 버튼을 클릭한다.
방향 정보 목록 : 나침반 정보 목록 화면으로 이동한다.

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

function fn_registCompassInfo() {
	
	useYn = "Y";
			
	var url = "/cps/xml/addCompassInfo.do"; 
	var accept_type = "json";
	var params = {uuid :  device.uuid,
			drc: drc + '', 
			accrcy: accrcy + '', 
			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_goCompassInfoListXml();
		}else{
			$("#alert_dialog").click( function() {
				jAlert('데이터 전송 중 오류가 발생 했습니다.', '전송 오류', 'c');
				});
		}			
		
	});

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

나침반 정보저장 화면

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

방향 정보 저장 시작 : 나침반 정보를 서버로 송신하기 위해서는 하단의 나침반 정보 저장 버튼을 클릭한다.
방향 정보 목록 : 나침반 정보 목록 화면으로 이동한다.

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

function fn_goCompassInfoListXml()
{
	if(!fn_egov_network_check(false)){
		return;
	}
	var url = "/cps/xml/compassInfoList.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("compassInfoList").each(function(){
            var uuid = $(this).find("uuid").text();
            var x = $(this).find("drc").text();
            var y = $(this).find("accrcy").text();
            var t = $(this).find("timestamp").text();

			list_html += "<li><h3>UUID : " + uuid + "</h3>";
			list_html += "<p><strong>drc : " + x + "</strong></p>";
			list_html += "<p><strong>accrcy : " + y + "</strong></p>";
			list_html += "<p>timestamp : " + t + "</p></li>";
        });
		var theList = $('#theList');
		theList.html(list_html);
		$.mobile.changePage($("#compassInfoList"), {reverse: true});
		theList.listview("refresh");
		
	});
}

나침반 정보목록 화면

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

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

서버에 저장 되어있는 나침반 정보 목록을 초기화 한다.

function fn_deleteCompassInfoList() {
	var url = "/cps/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($("#compassMain"), {reverse: true});
		}else{
			$("#alert_dialog").click( function() {
				jAlert('데이터 삭제 중 오류가 발생 했습니다.', '삭제 오류', 'c');
				});
		}
		
	});

	console.log("DeviceAPIGuide fn_deleteCompassInfoList 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 콘솔 창

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

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

• Cordova : Click
  
• UX/UI 라이브러리 : jQuery MobileClick