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

모바일 GPS 디바이스 API 가이드 프로그램은 모바일 디바이스 API 실행환경을 활용하여 하이브리드 앱을 개발자들이 구현 시 GPS API를 통해 위치 정보를 알아내고, 위치를 맵에 표시할 수 있도록 참고 및 활용될 수 있는 가이드 앱 이다.

본 가이드 프로그램에서는 GPS 기능을 가이드 할 수 있도록 GPS API 정보 호출, GPS API 정보 DB 목록 을 제공하고 있다.

• PhoneGap의 위치정보 수신 API

navigator.geolocation.getCurrentPosition

navigator.geolocation.getCurrentPosition(successCallback, failCallback);

• GPS

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

<plugins>
    <plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>
    <!--전자정부 Interface 디바이스 API를 사용하기 위한 Phonegap Plugin 클래스-->
    <plugin name="EgovInterfacePlugin" value="kr.go.egovframework.hyb.plugin.EgovInterfacePlugin" />
</plugins>

    <!--전자정부 Interface 디바이스 API에서 사용하기 위한 서버경로 설정-->
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
	<string name="SERVER_URL">http://192.168.100.222:8080/DeviceAPIGuideTotal_Web_V1.7.1</string>
    </resources>

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

GPS 디바이스API 가이드 프로그램은 크게 GPS API 정보 호출, GPS API 정보 DB 목록 기능으로 구성되어 있다.

• 네트워크를 체크하여 Wi-Fi가 아닐 경우에는 사용자 승인여부에 따라 동작한다.
• GPS API를 호출 하여 얻어온 현재 위치를 맵에 표시하고 현재 위치를 서버에 전송하여 저장한다.
  

// GPS API 정보 호출
navigator.geolocation.getCurrentPosition(onSuccess, onError);

// GPS 정보를 맵에 표시
function onSuccess(position) {
    console.log('DeviceAPIGuide onSuccess Success');
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    var html = "";
    html = '위도 : ' + position.coords.latitude + '<br/>';
    html += '경도 : ' + position.coords.longitude + '';
	
    $('#latlngInfo').html(html);

    // 현재 위치 좌표*
    var latlng =  new daum.maps.LatLng(position.coords.latitude, position.coords.longitude);
	
    // 지도 설정*
    var myOptions = {
        level: 4,
        center: latlng,
        mapTypeId: daum.maps.MapTypeId.ROADMAP
    };
	
    // 지도 생성*
    var map = new daum.maps.Map(document.getElementById("map"), myOptions);
    map.addControl(new daum.maps.ZoomControl());
    
    // 현재 위치 마커 표시*
    var curMarker = new daum.maps.Marker({
                                         position: latlng
                                         });
    curMarker.setMap(map);
	
    var infowindow = new daum.maps.InfoWindow({
                                              content: '<font size=2>위도:'+position.coords.latitude + '<br/>' + '경도:'+position.coords.longitude+'</font>'
                                              });
    infowindow.open(map, curMarker);
    
    $.mobile.hidePageLoadingMsg('a');
}

// 현재 위치 정보를 서버에 전송
function fn_egov_go_addGpsInfo()
{
    //3G 사용시 과금이 발생 할 수 있다는 경고 메시지 표시
    if(!fn_egov_network_check(false)) {
        return;
    }
    
    var url = "/gps/xml/addGPSInfo.do";
    var acceptType = "xml";
    var params = {uuid : device.uuid,
                    lat: lat,
                    lon: lon,
                    useYn: 'Y'};
    
    $.mobile.showPageLoadingMsg('a');	
	
    window.plugins.EgovInterface.post(url, acceptType, params, function(xmldata) {
                    console.log('DeviceAPIGuide fn_egov_go_addGpsInfo request Complete');
                                         
                    alert($(xmldata).find("resultMessage").text());
                                         
                    $.mobile.hidePageLoadingMsg('a');
                    location.href = "GPSAPI.html";
    });    
}

입력 데이터는 GPS API 정보를 사용한다.

GPS 맵 화면

GPS 데이터를 서버로 전송하기 위해서는 DB저장 버튼을 클릭하면 된다.

DB저장 : GPS 데이터를 서버로 전송한다.
Back 버튼 : GPS 디바이스 API 가이드 프로그램 메뉴 화면으로 이동한다.

• 네트워크를 체크하여 Wi-Fi가 아닐 경우에는 사용자 승인여부에 따라 동작한다.
• 서버에 저장되어 있는 위치 정보 목록을 수신하고, 확인 후 삭제한다.

// 목록 읽기
function fn_egov_go_gpsInfoList()
{
    //3G 사용시 과금이 발생 할 수 있다는 경고 메시지 표시    
    if(!fn_egov_network_check(false)) {
        return;
    }
    
    $.mobile.changePage("#gpsInfoList", "slide", false, false);
    $.mobile.showPageLoadingMsg('a');
    
    var url = "/gps/xml/gpsInfoList.do";
    var acceptType = "xml";
    var params = {uuid : device.uuid};
    // get the data from server
    window.plugins.EgovInterface.post(url, acceptType, params, function(xmldata) {
                console.log('DeviceAPIGuide fn_egov_go_gpsInfoList request Complete');                                   
                $.mobile.hidePageLoadingMsg('a');
                                         
                var list_html = "";                                         
                if($(xmldata).find("gpsInfoList").length == 0) {
                    alert('조회된 데이터가 없습니다');
                } else {                                         		
                    $(xmldata).find("gpsInfoList").each(function(){
                        var uuid = $(this).find("uuid").text();
                        var lat = $(this).find("lat").text();
                        var lon = $(this).find("lon").text();      
	
                        list_html += "<li><h3>UUID : " + uuid + "</h3>";
                        list_html += "<p>위도 : " + lat + "</p>";
                        list_html += "<p>경도 : " + lon + "</p></li>";
                    });                
                }
                                         
                var theList = $('#theLogList');
                theList.html(list_html);
                theList.listview("refresh");	                                         
                setTimeout(loadiScrollList, 1000);
            });
    
}

// 위치 정보 목록을 삭제한다.
function fn_egov_go_deleteGpsInfo()
{
    //3G 사용시 과금이 발생 할 수 있다는 경고 메시지 표시
    if(!fn_egov_network_check(false)) {
        return;
    }
    
    var url = "/gps/xml/deleteGPSInfo.do";
    var acceptType = "xml";
    var params = {uuid : device.uuid};
    // get the data from server
    jConfirm('서버에 저장된 GPS 정보 목록을 삭제 하시겠습니까?', '알림', 'c', function(r){
                if(r == true){
                    $.mobile.showPageLoadingMsg('a');
                    window.plugins.EgovInterface.post(url, acceptType, params, function(result) {
                                    console.log('DeviceAPIGuide fn_egov_go_deleteGpsInfo request Complete');
                                                     
                                    alert($(result).find("resultMessage").text());
                                                  
                                    $.mobile.hidePageLoadingMsg('a');
                                    location.href = "GPSAPI.html";
                                });
                }else{
                    return;
                }
            });
}

GPS 정보 목록조회 화면

위치 정보 목록을 삭제하기 위해서는 DB삭제 버튼을 클릭하면 된다.

DB삭제 : GPS 정보 목록을 삭제한다.
Back 버튼 : GPS 디바이스 API 가이드 프로그램 메뉴 화면으로 이동한다.

• 프로젝트 선택 > 오른쪽 클릭 > Run As > Android Application

• 상단의 메뉴 > Run As > Android Application

• 실행할 타겟 선택 > 에뮬레이터, 디바이스(디버깅모드)

• 디바이스를 이용한 실행 화면

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

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

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

console.log의 작성 방법은 다음과 같다.

function onSuccess(position) {    
    console.log('DeviceAPIGuide onSuccess Success');
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    ...
}

디버깅 코드가 실행 되면 아래와 같은 메시지를 개발도구의 콘솔 메시지 창에서 볼 수 있다.

GPS 디바이스 API 가이드 프로그램 에서는 디버깅을 위하여 다음과 같이 콘솔 정보를 출력한다.

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

• Cordova : Click
  
• UX/UI 라이브러리 : jQuery MobileClick
  
• Daum Map : http://dna.daum.net/apis/maps