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

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

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

• 문제 : 폰갭 오류시.
• 해결방안 : setTimeout() 함수로 phonegap 로딩 순서를 지연시킨다.
  

    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

• 문제 : iScroll5 컨텐츠 내용 높이 계산 오류.
• 해결방안 : setTimeout() 함수로 컨텐츠에 css 적용이 완료되고 iscroll 생성이 되도록 한다.

setTimeout(function()
           {
               myScroll = new iScroll(thisPage, 
                                      { 
                                          checkDOMChanges: true,
                                          onBeforeScrollStart:function(e)
                                          {
                                          }
                                      });
           },
           500);

• 문제 : 폰갭에 지정한 콜백 함수에서 alert() 메시지 호출시 동작 오류.
• 해결 방안 : 비동기 함수를 사용하거나 alert()처럼 스레드를 잡는 함수는 사용하지 않는다.

폰갭에서 특정 외부 도메인이나 외부 도메인의 하위 도메인을 사용해야할 경우,
[Project_Name]/Supporting Files/config.xml에서 <access origin=“ExternalHosts”/>항목에 외부 도메인 주소를 추가 설정해야 외부 도메인에 접속할 수 있다.

• PhoneGap의 위치정보 수신 API

navigator.geolocation.getCurrentPosition

navigator.geolocation.getCurrentPosition(successCallback, failCallback);

• GPS

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

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

<!--전자정부 Interface 디바이스 API에서 사용하기 위한 서버경로 설정-->
#define kSERVER_URL     @"Server_URL"

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

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

GPS API 정보 호출을 하여, 맵에서 현재 위치를 조회하고, 현재 위치를 서버에 전송하여 저장한다.

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

// GPS 정보를 맵에 표시
function onSuccess(position) {
    console.log("GPSAPIGuide navigator.geolocation.getCurrentPosition Success");
    console.log('Latitude: ' + position.coords.latitude + '\nLongitude: ' + position.coords.longitude);
    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()
{
    var params = {uuid : device.uuid,
                    lat: lat,
                    lon: lon,
                    useYn: 'Y'};
    
    $.mobile.showPageLoadingMsg('a');
    alert('Http Method:POST\nAcceptType:JSON\n전송데이터:' + JSON.stringify(params));
	
    EgovInterface.submitAsynchronous(
                                     [params, "/gps/addGPSInfo.do"],
                                     function(result) {
                                         console.log("GPSAPIGuide fn_egov_go_addGpsInfo request Completed");
                                         var str = '{';
                                         for (myKey in result){
                                             str += myKey + ':' + result[myKey] + '\n';
                                         }
                                         str += '}';
                                         alert('응답방식:RESTful\n응답Type:json, post\nParam:\n' + str);
                                         //window.history.back();
                                         $.mobile.hidePageLoadingMsg('a');
                                         location.href = "index.html";
                                     },
                                     function(error) {
                                         console.log("GPSAPIGuide fn_egov_go_addGpsInfo request Failed");
                                         var str = '{';
                                         for (myKey in error){
                                             str += myKey + ' : ' + error[myKey] + '\n';
                                         }
                                         str += '}';
                                         alert('응답방식:RESTful\n전송Type:json, post\nParam:\n' + str);
                                         $.mobile.hidePageLoadingMsg('a');
                                     }
                                     );
    
}

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

GPS 지도 정보 화면

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

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

서버에 저장되어 있는 위치 정보 목록을 수신하고, 확인 후 삭제한다.

// 목록 읽기
function fn_egov_go_gpsInfoList()
{
    console.log('fn_egov_go_gpsInfoList()');
    
    $.mobile.changePage("#gpsInfoList", "slide", false, false);
    $.mobile.showPageLoadingMsg('a');
    
    EgovInterface.submitAsynchronous(
                                     ["/gps/gpsInfoList.do"],
                                     function(result) {
                                         console.log("GPSAPIGuide fn_egov_go_gpsInfoList request Completed");
                                         var list_html = "";
                                         var totcnt = result.gpsInfoList.length;
                                         
                                         for (var i = 0; i < totcnt; i++) {
                                             var data = result.gpsInfoList[i];
                                             list_html += "<li><h3>UUID : " + data.uuid + "</h3>";
                                             list_html += "<p>위도 : " + data.la + "</p>";
                                             list_html += "<p>경도 : " + data.lo + "</p></li>";
                                         }
                                         var theList = $('#theLogList');
                                         theList.html(list_html);
                                         theList.listview("refresh");
                                         $.mobile.hidePageLoadingMsg('a');
                                         setTimeout(loadiScrollList, 1000);
                                     },
                                     function(error) {
                                         console.log("GPSAPIGuide fn_egov_go_gpsInfoList request Failed");
                                         var str = '{';
                                         for (var myKey in error){
                                             str += myKey + ' : ' + error[myKey] + '\n';
                                         }
                                         str += '}';
                                         alert('응답방식:RESTful\n전송Type:json, post\nParam:\n' + str);
                                         $.mobile.hidePageLoadingMsg('a');
                                     }
                                     );
    
}

// 위치 정보 목록을 삭제한다.
function fn_egov_go_deleteGpsInfo()
{
    console.log('fn_egov_go_deleteGpsInfo()');
    
    jConfirm('전송방식:RESTful\n전송Type:json, post\nParam:\n' + 'url:/gps/deleteGPSInfo.do', '알림', 'c', function(r){
             if(r == true){
                 $.mobile.showPageLoadingMsg('a');
                EgovInterface.submitAsynchronous(
                                                 ["/gps/deleteGPSInfo.do"],
                                                 function(result) {
                                                     console.log("GPSAPIGuide fn_egov_go_deleteGpsInfo request Completed");
                                                     console.log("GPS Log List Request Completed");
                                                     var str = '{';
                                                     for (myKey in result){
                                                         str += myKey + ':' + result[myKey] + '\n';
                                                     }
                                                     str += '}';
                                                     alert('응답방식:RESTful\n응답Type:json, post\nParam:\n' + str);
                                                     //window.history.back();
                                                     $.mobile.hidePageLoadingMsg('a');
                                                     location.href = "index.html";
                                                 },
                                                 function(error) {
                                                     console.log("GPSAPIGuide fn_egov_go_deleteGpsInfo request Failed");
                                                     var str = '{';
                                                     for (var myKey in error){
                                                         str += myKey + ' : ' + error[myKey] + '\n';
                                                     }
                                                     str += '}';
                                                     alert('응답방식:RESTful\n전송Type:json, post\nParam:\n' + str);
                                                     $.mobile.hidePageLoadingMsg('a');
                                                 }
                                                 );
             }else{
                 return;
             }
             });
}

GPS 정보 목록 화면

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

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

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

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

• 서버사이드 가이드 프로그램의 실행은 프로젝트를 마우스 오른쪽 버튼을 클릭 한후 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 콘솔 창

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

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

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