====== GPS 디바이스 API 가이드 프로그램 ====== ===== 개요 ===== 모바일 GPS 디바이스 API 가이드 프로그램은 모바일 디바이스 API 실행환경을 활용하여 하이브리드 앱을 개발자들이 구현 시 GPS API를 통해 위치 정보를 알아내고, 위치를 맵에 표시할 수 있도록 참고 및 활용될 수 있는 가이드 앱 이다. ==== 특징 ==== 본 가이드 프로그램에서는 GPS 기능을 가이드 할 수 있도록 **GPS API 정보 호출**, **GPS API 정보 DB 목록** 을 제공하고 있다. \\ ==== 기능 흐름도 ==== {{:egovframework:hyb:guide:ios:gps기능흐름도.png?740|}} ==== 기능시퀀스 ==== {{:egovframework:hyb:guide:add:GPS시퀀스다이어그램.png|}} ==== 전제 조건 ==== ^구분^내용^ |Local 디바이스 개발 환경| 전자정부표준프레임워크 개발환경3.6, Android SDK API 23(version 6.0 Marshmallow)| |서버 사이드 개발 환경| 전자정부표준프레임워크 개발환경3.6| |Mash up Open API 연계|GPS API 가이드 프로그램의 예제로 제공하는 2가지 지도를 사용하기 위해서는 별도로 해당 지도 API 인증키를 신청하여야 한다. \\- Daum 지도 : [[https://apis.daum.net/register/myapi.daum|https://apis.daum.net/register/myapi.daum]]) \\ \\ 예제로 사용하는 국가공간정보통합체계 지도 및 Daum 지도 사용에 관한 모든 권한은 해당 기관에 있으며, \\ Daum 지도 사용시 **'Daum 지도 Open API 서비스 이용약관'**을 확인 후 사용한다. \\ (Daum 지도 Open API 서비스 이용약관 : [[http://dna.daum.net/apis/mapagreement|http://dna.daum.net/apis/mapagreement]]) \\ \\ 예제로 사용하는 지도 외에도 기타 지도 API 약관 및 규격에 맞추에 서비스를 연계하여 구축 가능하다.| |테스트 디바이스 | Galaxy S3, G5| |테스트 플랫폼 | Android 2.3, Android 6.0 | |추가 라이브러리 적용|N/A| ==== 제약 사항 ==== ^ 구분 ^ 내용 ^ |크로스 도메인 사용|폰갭에서 특정 외부 도메인이나 외부 도메인의 하위 도메인을 사용해야할 경우,\\ Res/xml/config.xml에서 에 외부 도메인 주소를 추가 설정해야 외부 도메인에 접속할 수 있다.| ===== 설명 ===== ==== 관련 클래스다이어그램 ==== {{:egovframework:hyb:guide:add:GPS클래스다이어그램.png?1024|}} ==== Device Application ==== === 관련 소스 === ^유형^대상소스^비고^ |Activity|kr.go.egovframework.hyb.gpsapi.GPSAPIGuide_AndroidActivity|GPSAPI 가이드 프로그램 Activity Class| |CSS|assets/www/css/egovframwork/mbl/hyb/GPSAPI.css |GPSAPI 가이드 프로그램 주요 Cascading Style Sheets| |IMAGE |assets/www/images/egovframwork/mbl/hyb/ |GPSAPI 가이드 프로그램 주요 Image 폴더| |JS |assets/www/js/egovframwork/mbl/hyb/GPSAPI.js |GPSAPI 가이드 프로그램 주요 JavaScript| |RES |assets/www/res/ |GPSAPI 가이드 프로그램 주요 Resource 폴더| |XML |AndroidManiFest.xml |안드로이드 어플리케이션 설정 XML| |HTML|assets/www/GPSAPI.html|GPSAPI 메인 페이지| |HTML|assets/www/Intro.html|GPSAPI Intro 페이지| |HTML|assets/www/license.html|GPSAPI 라이센스 페이지| |HTML|assets/www/overview.html|GPSAPI 기능설명 페이지| === 활용 API === == navigator.geolocation.getCurrentPosition == * PhoneGap의 위치정보 수신 API navigator.geolocation.getCurrentPosition navigator.geolocation.getCurrentPosition(successCallback, failCallback); ^Option^설명^비고^ |successCallback|성공시 리턴되는 함수| | |failCallback|실패시 리턴되는 함수| | ==== Server Application ==== === 관련 소스 === ^유형^대상소스^비고^ |Controller|egovframework.hyb.add.gps.web.EgovGPSAndroidAPIController.java|GPS 정보 관리를 위한 클래스| |Service|egovframework.hyb.add.gps.service.EgovGPSAndroidAPIService.java|GPS 정보 관리를 위한 서비스 인터페이스| |VO|egovframework.hyb.add.gps.service.GPSAndroidAPIDefaultVO.java|GPS 관리를 위한 VO 클래스| |VO|egovframework.hyb.add.gps.service.GPSAndroidAPIVO.java|GPS 관리를 위한 VO 클래스| |DAO|egovframework.hyb.add.gps.service.impl.GPSAndroidAPIDAO.java|GPS 관리를 위한 데이터처리 클래스| |DAO|egovframework.hyb.add.gps.service.impl.EgovGPSAndroidAPIServiceImpl.java|요청 서비스 처리를 위한 클래스| |Query XML|resources/egovframework/sqlmap/hyb/add/gps/EgovGPSAndroidAPIGuide_SQL_xxx.xml|GPS 정보 관리를 위한 Query 파일| === 관련 테이블 === ^테이블명^테이블명(영문)^비고^ |GPS|GPS|GPS 정보 관리| === 테이블 명세서 === * GPS ^No.^컬럼^컬럼명^타입^길이^Null^KEY^ |1|SN|일련번호|NUMERIC|6|NotNull|pk| |2|UUID|UUID|VARCHAR|50|NotNull|pk| |3|LA|위도|VARCHAR|48|Null| | |4|LO|경도|VARCHAR|48|Null| | |5|ACCRCY|정확도|VARCHAR|10|Null| | |6|USEYN|활성화여부|CHAR|1|Null| | === ERD === {{:egovframework:hyb:guide:ios:erd.jpg|}} ===== 환경설정 ===== GPS 디바이스 API 가이드 프로그램에서 제공하는 모바일 디바이스의 GPS 관련 기능을 활용하기 위하여 필요한 항목 및 그 환경 설정은 다음과 같다. ==== Device Application ==== === res/xml/plugins.xml === === res/values/serverinfo.xml === http://192.168.100.222:8080/DeviceAPIGuideTotal_Web_V1.7.1 ==== Server Aplication ==== === resource/egovframework/sqlmap/sql-map-config_[DB명].xml === ===== 관련 기능 ===== GPS 디바이스API 가이드 프로그램은 크게 **GPS API 정보 호출**, **GPS API 정보 DB 목록** 기능으로 구성되어 있다. ==== GPS API 정보 호출 ==== === 비즈니스 규칙 === * 네트워크를 체크하여 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 + '
'; 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: '위도:'+position.coords.latitude + '
' + '경도:'+position.coords.longitude+'
' }); 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"; }); }
=== 관련화면 및 수행매뉴얼 === ^기능^URL^Controller^method^화면(HTML)^ |GPS 데이터 서버로 전송하기|/gps/xml/addGPSInfo.do|EgovGPSAndroidAPIController|insertGPSInfo|GPSAPI.html#myLocation| 입력 데이터는 GPS API 정보를 사용한다. ^ GPS 맵 화면 ^ |{{:egovframework:hyb3.6:guide:add:gps:gps_gps.png?320|}}| GPS 데이터를 서버로 전송하기 위해서는 DB저장 버튼을 클릭하면 된다. \\ DB저장 : GPS 데이터를 서버로 전송한다. \\ Back 버튼 : **GPS 디바이스 API 가이드 프로그램 메뉴** 화면으로 이동한다. \\ ==== GPS API 정보 DB 목록 ==== === 비즈니스 규칙 === * 네트워크를 체크하여 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 += "
  • UUID : " + uuid + "

    "; list_html += "

    위도 : " + lat + "

    "; list_html += "

    경도 : " + lon + "

  • "; }); } 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; } }); }
    === 관련화면 및 수행매뉴얼 === ^기능^URL^Controller^method^화면(HTML)^ |GPS 정보 목록 조회|/gps/xml/gpsInfoList.do|EgovGPSAndroidAPIController|selectGPSInfoListXml|GPSAPI.html#gpsInfoList| |GPS 정보 목록 삭제|/gps/xml/deleteGPSInfo.do|EgovGPSAndroidAPIController|deleteGPSInfo|GPSAPI.html#gpsInfoList| ^GPS 정보 목록조회 화면 ^ |{{:egovframework:hyb3.6:guide:add:gps:gps_dblist.png?320|}}| 위치 정보 목록을 삭제하기 위해서는 DB삭제 버튼을 클릭하면 된다. \\ DB삭제 : GPS 정보 목록을 삭제한다. \\ Back 버튼 : **GPS 디바이스 API 가이드 프로그램 메뉴** 화면으로 이동한다. \\ ===== 컴파일 디버깅 배포 ===== ==== 컴파일 ==== === Device Applicaton 컴파일 방법 === * 프로젝트 선택 > 오른쪽 클릭 > Run As > Android Application {{:egovframework:hyb:guide:add:카메라_컴파일1.png?740|}} * 상단의 메뉴 > Run As > Android Application {{:egovframework:hyb:guide:add:카메라_컴파일2.png?740|}} * 실행할 타겟 선택 > 에뮬레이터, 디바이스(디버깅모드) {{:egovframework:hyb:guide:add:디바이스컴파일.png?740|}} * 디바이스를 이용한 실행 화면 {{:egovframework:hyb3.6:guide:add:gps:gps_run.png?320|}} === Server Applicaton 컴파일 방법 === * 서버사이드 가이드 프로그램의 실행은 프로젝트를 마우스 오른쪽 버튼을 클릭 한후 Run As>Run On Server 버튼을 통해 실행 할 수 있다. {{:egovframework:hyb:guide:ios:서버실행.png?640|}} * 빌드가 성공적으로 수행 되면 이클립스의 콘솔 창에서 'Server Startup in xxx ms' 메시지를 확인 할 수 있다. {{:egovframework:hyb:guide:add:서버실행결과_콘솔.png?840|}} ==== 디버깅 ==== 디바이스 어플리케이션에서 발생한 오류 내용 확인 및 디버깅을 위해서는 폰갭 프레임워크에서 제공하는 console.log를 이용할 수 있다. console.log 함수는 자바스크립트 구문에서 사용할 수 있는 디버그 코드로 이클립스에서 확인 할 수 있다. console.log의 작성 방법은 다음과 같다. function onSuccess(position) { console.log('DeviceAPIGuide onSuccess Success'); lat = position.coords.latitude; lon = position.coords.longitude; ... } 디버깅 코드가 실행 되면 아래와 같은 메시지를 개발도구의 콘솔 메시지 창에서 볼 수 있다. {{:egovframework:hyb:guide:add:FileReadWriteconsolelog.png?700|}} GPS 디바이스 API 가이드 프로그램 에서는 디버깅을 위하여 다음과 같이 콘솔 정보를 출력한다.\\ ^디버그 코드^디버깅 내용^ |DeviceAPIGuide onSuccess Success | GPS 정보 읽기 성공 시| |DeviceAPIGuide onError Fail | GPS 정보 읽기 실패 시| |DeviceAPIGuide fn_egov_go_gpsInfoList request Complete | 서버에서 GPS 정보 목록 읽기 성공 시| |DeviceAPIGuide fn_egov_go_addGpsInfo request Complete | 서버에 GPS 정보 저장 성공 시| |DeviceAPIGuide fn_egov_go_deleteGpsInfo request Complete | 서버의 GPS 목록 삭제 성공 시| |DeviceAPIGuide EgovInterface.get request Fail | HTTP GET Method 요청 실패 시| |DeviceAPIGuide EgovInterface.post request Fail | HTTP POST Method 요청 실패 시| |DeviceAPIGuide EgovInterface.geturl Fail | geturl 함수 요청 실패 시| ==== 배포 ==== GPS 디바이스 API 가이드 다운로드 : [[http://www.egovframe.go.kr/cop/bbs/selectBoardArticle.do?bbsId=BBSMSTR_000000000161&nttId=1261&menu=3&submenu=9|Click]] \\ ===== 참고 자료 ===== * Cordova : [[https://cordova.apache.org|Click]] \\ * UX/UI 라이브러리 : jQuery Mobile[[http://jquerymobile.com/demos/1.4.5/|Click]] \\ * Daum Map : [[http://dna.daum.net/apis/maps]] \\