====== Interface 디바이스 API 가이드 프로그램 ====== ===== 개요 ===== 모바일 Interface 디바이스 API 가이드 프로그램은 모바일 디바이스 API 실행환경을 활용하여 하이브리드 앱을 개발하시는 분들이 구현 시 전자정부 표준프레임워크 기반으로 구축된 웹서버와의 데이터 송수신을 쉽고 편하게 RESTful방식으로 구현할 수 있도록 참고 및 활용될 수 있는 가이드 앱 이다. ==== 특징 ==== 본 가이드 프로그램에서는 Interface 기능을 가이드 할 수 있도록 **정보데이터 서버로 송신하기**, **정보데이터 기기로 수신하기**, **서버의 데이터 삭제 요청하기** 를 제공하고 있다. \\ ==== 기능 흐름도 ==== {{:egovframework:hyb:guide:add:Interface기능흐름도.png?540|}} ==== 기능시퀀스 ==== {{:egovframework:hyb:guide:add:Interface시퀀스다이어그램.png|}} ==== 전제 조건 ==== ^ 구분 ^ 내용 ^ |Local 디바이스 개발 환경|Xcode 4.4.1, PhoneGap 1.9.0| |서버 사이드 개발 환경|전자정부표준프레임워크 개발환경 2.5| |Mash up Open API 연계|N/A| |테스트 디바이스 |iPhone4 | |테스트 플랫폼 |iOS 5.1| |추가 라이브러리 적용|EGovComModuleAPI.js, EgovComModule.h, libEgovComModule.a, EgovInterface.h, EgovInterface.m, EgovStorageInfo.h, EgovStorageInfo.m| ==== 제약 사항 ==== === 지원 디바이스 및 플랫폼 === == iPhone 의 경우 장치의 연산속도에 따른 문제가 발생할 수 있다. == * 문제 : 폰갭 오류시. * 해결방안 : setTimeout() 함수로 phonegap 로딩 순서를 지연시킨다.\\ document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false); * 문제 : iScroll4 컨텐츠 내용 높이 계산 오류. * 해결방안 : setTimeout() 함수로 컨텐츠에 css 적용이 완료되고 iscroll 생성이 되도록 한다. setTimeout(function() { myScroll = new iScroll(thisPage, { checkDOMChanges: true, onBeforeScrollStart:function(e) { } }); }, 500); == CallBack 함수에서 alert() 를 포함하면 문제가 발생할수 있다 (phoneGap) == * 문제 : 폰갭에 지정한 콜백 함수에서 alert() 메시지 호출시 동작 오류. * 해결 방안 : 비동기 함수를 사용하거나 alert()처럼 스레드를 잡는 함수는 사용하지 않는다. == Xcode 4.5에서 실행 시 주의 사항 == Xcode 4.5부터 iOS 6, iPhone 5를 지원하는데, 해당 디바이스와 OS를 지원을 할 경우 PhoneGap 1.9.0의 라이브러리는 Xcode 4.X에서 컴파일되어 배포되는 라이브러리라 프로젝트 옵션을 조정할 필요가 있다.\\ 1. 옵션 설정\\ {{:egovframework:hyb:guide:ios:xcode4.5_제약사항1.png|}} 2. armv7s 삭제\\ {{:egovframework:hyb:guide:ios:xcode4.5_제약사항2.png|}} ===== 설명 ===== ==== 관련 클래스다이어그램 ==== {{:egovframework:hyb:guide:ios:interface_class.png?1024}} ==== Device Application ==== === 관련 소스 === ^유형^대상소스^비고^ |CSS|www/css/egovframwork/mbl/hyb/InterfaceAPI.css |InterfaceAPI 가이드 프로그램 주요 Cascading Style Sheets| |IMAGE |www/images/egovframwork/mbl/hyb/ |InterfaceAPI 가이드 프로그램 주요 Image 폴더| |JS |www/js/egovframwork/mbl/hyb/InterfaceAPI.js |InterfaceAPI 가이드 프로그램 주요 JavaScript| |JS |www/js/egovframwork/mbl/hyb/messages_ko.js |Validate 메세지 처리 JavaScript| |HTML|www/InterfaceAPI.html|InterfaceAPI 메인 페이지| |HTML|www/license.html|InterfaceAPI 라이센스 페이지| |HTML|www/overview.html|InterfaceAPI 기능설명 페이지| === 활용 API === == window.plugins.EgovInterface.get == * 전자정부 웹 서버 어플리케이션에 HTTP GET Method를 요청한다. window.plugins.EgovInterface.get(URI, acceptType, params, successCallback); var param = {pid:'egovmobile'}; window.plugins.EgovInterface.get("/mylist.do", "xml", params, function(xmldata){ alert(xmldata); }); ^Option^설명^비고^ |URI|요청 할 URI|서버 URL 설정은 **환경설정** 참조| |acceptType|HTTP Header 의 Accept-Type 설정|json,xml| |params|입력 파라미터|Json Object 타입으로 입력| |successCallback|GET Method에 대한 성공시 리턴되는 함수|acceptType에 따라 Json 또는 xml 데이터 처리| == window.plugins.EgovInterface.post == * 전자정부 웹 서버 어플리케이션에 HTTP POST Method를 요청한다. window.plugins.EgovInterface.post(URI, acceptType, params, successCallback); var param = {pid:'egovmobile'}; window.plugins.EgovInterface.post("/mylist.do", "xml", params, function(xmldata){ alert(xmldata); }); ^Option^설명^비고^ |URI|요청 할 URI|서버 URL 설정은 **환경설정** 참조| |acceptType|HTTP Header 의 Accept-Type 설정|json,xml| |params|입력 파라미터|Json Object 타입으로 입력| |successCallback|GET Method에 대한 성공시 리턴되는 함수|acceptType에 따라 Json 또는 xml 데이터 처리| == window.plugins.EgovInterface.geturl == * 환경설정에서 설정한 SERVER_URL을 얻어온다. window.plugins.EgovInterface.geturl(successCallback); window.plugins.EgovInterface.geturl(function(url){ alert(url); }); ^Option^설명^비고^ |successCallback|성공시 리턴되는 함수|String 타입| ==== Server Application ==== === 관련 소스 === ^유형^대상소스^비고^ |Controller|egovframework.hyb.ios.itf.web.EgovInterfaceiOSAPIController.java|회원 정보 관리를 위한 클래스| |Service|egovframework.hyb.ios.itf.service.EgovInterfaceiOSAPIService.java|회원 정보 관리를 위한 서비스 인터페이스| |VO|egovframework.hyb.ios.itf.service.InterfaceiOSAPIDefaultVO.java|회원 관리를 위한 VO 클래스| |VO|egovframework.hyb.ios.itf.service.InterfaceiOSAPIVO.java|회원 관리를 위한 VO 클래스| |DAO|egovframework.hyb.ios.itf.service.impl.InterfaceiOSAPIDAO.java|회원 관리를 위한 데이터처리 클래스| |DAO|egovframework.hyb.ios.itf.service.impl.EgovInterfaceiOSAPIServiceImpl.java|요청 서비스 처리를 위한 클래스| |Query XML|resources/egovframework/sqlmap/hyb/ios/itf/EgovInterfaceiOSAPIGuide_SQL_mysql.xml|회원 정보 관리를 위한 Query 파일| === 관련 테이블 === ^테이블명^테이블명(영문)^비고^ |Interface(eGov)|INTERFACE_EGOV|Interface(eGov) 정보 관리| === 테이블 정의서 === * Interface_egov ^No^컬럼ID^컬럼명^타입^길이^Null^ |1|SN|일련번호|NUMERIC|6|NotNull| |2|UUID|UUID|VARCHAR|50|NotNull| |3|EMAILS|이메일|VARCHAR|50|Null| |4|USER_ID|아이디|VARCHAR|20|Null| |5|USER_PW|패스워드|VARCHAR|200|Null| === ERD === {{:egovframework:hyb:guide:ios:erd.jpg|}} ===== 환경설정 ===== Interface 디바이스 API 가이드 프로그램에서 제공하는 모바일 디바이스의 Interface 관련 기능을 활용하기 위하여 필요한 항목 및 그 환경 설정은 다음과 같다. === Cordova.plist === Plugins InterfaceAPI EgovInterface === eGovModule/EGovComModule.h === #define kSERVER_URL @"http://192.168.100.222:8080/DeviceAPIGuideTotal_Web_V1.7" ==== Server Application ==== === resource/egovframework/sqlmap/sql-map-config_[DB명].xml === ===== 관련 기능 ===== Interface 디바이스API 가이드 프로그램은 크게 **정보데이터 서버로 송신하기**, **정보데이터 기기로 수신하기**, **서버의 데이터 삭제 요청하기** 기능으로 구성되어 있다. ==== 정보데이터 서버로 송신하기 ==== === 비즈니스 규칙 === 회원 가입 정보를 서버에 전송하여 응답 결과를 확인 할 수 있다. \\ === 관련코드 === function fn_signUp() { var params = { uuid : device.uuid, userId : $("#signUpId").val(), userPw : $("#signUpPasswd").val(), emails : $("#signUpEmail").val()}; $.mobile.showPageLoadingMsg('a'); EgovInterface.submitAsynchronous( [params, "/itf/addInterfaceiOSInfo.do"], function(result) { console.log("InterfaceAPIGuide fn_signUp Completed"); var s = JSON.stringify(result); var str = '{resultState:'+result.resultState+',resultMessage:'+result.resultMessage+'}'; alert('응답방식:RESTful\n응답Type:json, post\nParam:\n' + str); $.mobile.hidePageLoadingMsg('a'); window.history.back(); }, function(error) { console.log("InterfaceAPIGuide fn_signUp Failed"); var str = ""; for (myKey in result){ str += myKey + ' : ' + result[myKey] + '\n'; } alert('응답방식:RESTful\n응답Type:json, post\nParam:\n' + str); $.mobile.hidePageLoadingMsg('a'); } ); } === 관련화면 및 수행매뉴얼 === ^기능^URL^Controller^method^화면(HTML)^ |정보데이터 서버로 송신하기|/itf/addInterfaceInfo.do|EgovInterfaceiOSAPIController|addInterfaceInfo|InterfaceAPI.html#signUp| 입력 데이터는 ID, PASSWD, E-Mail을 사용한다. {{:egovframework:hyb:guide:ios:interface_join.png?320|}} 정보데이터를 서버로 송신하기 위해서는 회원가입 버튼을 클릭하면 된다. \\ 단, 모든 입력데이터에 대해서 기본적인 validation을 확인하고, 조건이 불충분 할 경우 오류 메시지가 출력된다. 회원가입 : 정보데이터를 서버로 송신하기 위해서는 ID, PASSWD, E-Mail을 입력 후 회원가입 버튼을 클릭한다. \\ Back 버튼 : **Interface 디바이스 API 가이드 프로그램 메뉴** 화면으로 이동한다. \\ ==== 정보데이터 기기로 수신하기 ==== === 비즈니스 규칙 === 로그인 정보를 서버에 전송하여 로그인 성공 여부를 조회 할 수 있다. === 관련코드 === function fn_login() { $.mobile.showPageLoadingMsg('a'); alert('전송방식:RESTful\n전송Type:json, get\nURL:\n' + "/itf/logIniOS.do?userId=" + $("#loginId").val() + "&userPw=" + $("#loginPasswd").val()); EgovInterface.submitAsynchronous( ["/itf/logIniOS.do?userId=" + $("#loginId").val() + "&userPw=" + $("#loginPasswd").val()], function(result) { console.log("InterfaceAPIGuide fn_login Completed"); var str = '{resultState:'+result.resultState+',resultMessage:'+result.resultMessage+'}'; alert('응답방식:RESTful\n응답Type:json, post\nParam:\n' + str); $.mobile.hidePageLoadingMsg('a'); window.history.back(); }, function(error) { console.log("InterfaceAPIGuide fn_login Failed"); var str = ""; for (myKey in result){ str += myKey + ' : ' + result[myKey] + '\n'; } alert('응답방식:RESTful\n전송Type:json, post\nParam:\n' + str); $.mobile.hidePageLoadingMsg('a'); } ); } === 관련화면 및 수행매뉴얼 === ^기능^URL^Controller^method^화면(HTML)^ |정보데이터 기기로 수신하기|/itf/logIn.do|EgovInterfaceiOSAPIController|logIn|InterfaceAPI.html#login| {{:egovframework:hyb:guide:ios:interface_login.png?320|}} 정보데이터를 기기로 수신하기 위해서는 로그인 버튼을 클릭하면 된다. \\ 단, 모든 입력데이터에 대해서 기본적인 validation을 확인하고, 조건이 불충분 할 경우 오류 메시지가 출력된다. 로그인 : 정보데이터를 기기로 수신하기 위해서는 ID, PASSWD를 입력 후 로그인 버튼을 클릭한다. \\ Back 버튼 : **Interface 디바이스 API 가이드 프로그램 메뉴** 화면으로 이동한다. \\ ==== 서버의 데이터 삭제 요청하기 ==== === 비즈니스 규칙 === ID, PASSWD 정보를 서버에 전송하여 회원탈퇴 성공 여부를 조회 할 수 있다. === 관련코드 === function fn_withdrawal() { var params = { userId : $("#signDownId").val(), userPw : $("#signDownPasswd").val() }; $.mobile.showPageLoadingMsg('a'); EgovInterface.submitAsynchronous( [params, "/itf/withdrawaliOS.do"], function(result) { console.log("InterfaceAPIGuide fn_withdrawal Completed"); var str = '{resultState:'+result.resultState+',resultMessage:'+result.resultMessage+'}'; alert('응답방식:RESTful\n응답Type:json, post\nParam:\n' + str); $.mobile.hidePageLoadingMsg('a'); window.history.back(); }, function(error) { console.log("InterfaceAPIGuide fn_withdrawal Failed"); var str = ""; for (myKey in result){ str += myKey + ' : ' + result[myKey] + '\n'; } alert('응답방식:RESTful\n응답Type:json, post\nParam:\n' + str); $.mobile.hidePageLoadingMsg('a'); } ); } === 관련화면 및 수행매뉴얼 === ^기능^URL^Controller^method^화면(HTML)^ |서버의 데이터 삭제 요청하기|/itf/logIn.do|EgovInterfaceiOSAPIController|withdrawal|InterfaceAPI.html#secessionMember| {{:egovframework:hyb:guide:ios:interface_withdrawl.png?320|}} 서버의 데이터를 삭제 요청하기 위해서는 회원탈퇴 버튼을 클릭하면 된다. \\ 단, 모든 입력데이터에 대해서 기본적인 validation을 확인하고, 조건이 불충분 할 경우 오류 메시지가 출력된다. 회원탈퇴 : 서버의 데이터를 삭제 요청하기 위해서는 ID, PASSWD를 입력 후 회원탈퇴 버튼을 클릭한다. \\ Back 버튼 : **Interface 디바이스 API 가이드 프로그램 메뉴** 화면으로 이동한다. \\ ===== 컴파일 디버깅 배포 ===== ==== 컴파일 ==== === Interface Device Applicaton 컴파일 방법 === 1. 디바이스 또는 시뮬레이터에서 실행하고자 할 경우 빨간 테두리 영역을 클릭한다.\\ {{:egovframework:hyb:guide:ios:xcode실행영역선택1.png|}}\\ 2. 디바이스 또는 시뮬레이터를 선택한다.\\ {{:egovframework:hyb:guide:ios:xcode실행영역선택2.png|}}\\ 3. 실행 버튼을 클릭한다.\\ {{:egovframework:hyb:guide:ios:xcode실행버튼.png|}}\\ 4. 인트로 화면과 메인 화면을 확인한다.\\ {{:egovframework:hyb:guide:ios:interface_intro2.png?320|}}{{:egovframework:hyb:guide:ios:interface_main2.png?320|}} === InterfaceAPI Server Applicaton 컴파일 방법 === * InterfaceAPI 서버사이드 가이드 프로그램의 실행은 프로젝트를 마우스 오른쪽 버튼을 클릭 한후 Run As>Run On Server 버튼을 통해 실행 할 수 있다. {{:egovframework:hyb:guide:ios:서버실행.png?640|}} * 빌드가 성공적으로 수행 되면 이클립스의 콘솔 창에서 'Server Startup in xxx ms' 메시지를 확인 할 수 있다. {{:egovframework:hyb:guide:ios:웹서버실행성공.png?700|}} ==== 디버깅 ==== 디바이스 어플리케이션에서 발생한 오류 내용 확인 및 디버깅을 위해서는 폰갭 프레임워크에서 제공하는 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 콘솔 창 {{:egovframework:hyb:guide:ios:cameradebugxcode.png?700|}}\\ * Organizer 로그 창 {{:egovframework:hyb:guide:ios:cameradebugorganizer.png?700|}}\\ InterfaceAPI 가이드 프로그램 에서는 디버깅을 위하여 다음과 같이 콘솔 정보를 출력한다. ^디버그 코드^디버깅 내용^ |InterfaceAPIGuide fn_login request Completed|정보데이터 기기로 수신하기가 성공적으로 처리 된 경우.| |InterfaceAPIGuide fn_login request Failed|정보데이터 기기로 수신하기가 실패한 경우.| |InterfaceAPIGuide fn_signUp request Completed|정보데이터 서버로 송신하기가 성공적으로 처리 된 경우.| |InterfaceAPIGuide fn_signUp request Failed|정보데이터 서버로 송신하기가 실패한 경우.| |InterfaceAPIGuide fn_withdrawal request Completed|서버의 데이터 삭제 요청하기가 성공적으로 처리 된 경우.| |InterfaceAPIGuide fn_withdrawal request Failed|서버의 데이터 삭제 요청하기가 실패한 경우.| ==== 배포 ==== Interface 디바이스 API 가이드 다운로드 : [[http://www.egovframe.go.kr/cop/bbs/selectBoardArticle.do?bbsId=BBSMSTR_000000000161&nttId=529&menu=3&submenu=9|Click]] \\ ===== 참고 자료 ===== * ASIHTTPRequest : [[http://allseeing-i.com/ASIHTTPRequest]]\\ * Apple Developer Library : [[https://developer.apple.com/library/ios/navigation/]]\\ * PhoneGap Developing a Plugin on iOS : [[http://docs.phonegap.com/en/2.0.0/guide_plugin-development_ios_index.md.html#Developing%20a%20Plugin%20on%20iOS|PhoneGap Developing a Plugin on iOS]]\\ * Phonegap 1.9.0 : [[http://docs.phonegap.com/en/1.9.0/index.html]]\\