====== Interface 디바이스 API 가이드 프로그램 ======
===== 개요 =====
모바일 Interface 디바이스 API 가이드 프로그램은 모바일 디바이스 API 실행환경을 활용하여 하이브리드 앱을 개발하시는 분들이 구현 시 전자정부 표준프레임워크 기반으로 구축된 웹서버와의 데이터 송수신을 쉽고 편하게 RESTful방식으로 구현할 수 있도록 참고 및 활용될 수 있는 가이드 앱 이다.
==== 특징 ====
본 가이드 프로그램에서는 Interface 기능을 가이드 할 수 있도록 **정보데이터 서버로 송신하기**, **정보데이터 기기로 수신하기**, **서버의 데이터 삭제 요청하기** 를 제공하고 있다. \\
==== 기능 흐름도 ====
{{:egovframework:hyb:guide:add:Interface기능흐름도.png?540|}}
==== 기능시퀀스 ====
{{:egovframework:hyb:guide:add:Interface시퀀스다이어그램.png|}}
==== 전제 조건 ====
^ 구분 ^ 내용 ^
|Local 디바이스 개발 환경| Xcode 8.0 (8A218a), Cordova 6.4.0 |
|서버 사이드 개발 환경| 전자정부표준프레임워크 개발환경3.6|
|Mash up Open API 연계| N/A|
|테스트 디바이스 | iPhone 6 , iPad Air |
|테스트 플랫폼 | iOS 9.3, iOS 10.0 |
|추가 라이브러리 적용|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);
* 문제 : iScroll5 컨텐츠 내용 높이 계산 오류.
* 해결방안 : setTimeout() 함수로 컨텐츠에 css 적용이 완료되고 iscroll 생성이 되도록 한다.
setTimeout(function()
{
myScroll = new iScroll(thisPage,
{
checkDOMChanges: true,
onBeforeScrollStart:function(e)
{
}
});
},
500);
== CallBack 함수에서 alert() 를 포함하면 문제가 발생할수 있다 (phoneGap) ==
* 문제 : 폰갭에 지정한 콜백 함수에서 alert() 메시지 호출시 동작 오류.
* 해결 방안 : 비동기 함수를 사용하거나 alert()처럼 스레드를 잡는 함수는 사용하지 않는다.
===== 설명 =====
==== 관련 클래스다이어그램 ====
{{:egovframework:hyb:guide:ios:interface_class.png?1024}}
==== Device Application ====
=== 관련 소스 ===
^유형^대상소스^비고^
|CSS| assets/www/css/egovframwork/mbl/hyb/InterfaceAPI.css |InterfaceAPI 가이드 프로그램 주요 Cascading Style Sheets|
|IMAGE |assets/www/images/egovframwork/mbl/hyb/ |InterfaceAPI 가이드 프로그램 주요 Image 폴더|
|JS |assets/www/js/egovframwork/mbl/hyb/InterfaceAPI.js |InterfaceAPI 가이드 프로그램 주요 JavaScript|
|JS |assets/www/js/egovframwork/mbl/hyb/messages_ko.js |Validate 메세지 처리 JavaScript|
|HTML|assets/www/InterfaceAPI.html|InterfaceAPI 메인 페이지|
|HTML|assets/www/intro.html|InterfaceAPI Intro 페이지|
|HTML|assets/www/license.html|InterfaceAPI 라이센스 페이지|
|HTML|assets/www/overview.html|InterfaceAPI 기능설명 페이지|
|RES | [Project_Name]/Resources/ |InterfaceAPI 가이드 프로그램 주요 Resource 폴더|
|PLIST | [Project_Name]/Resources/[Project_Name]-Info.plist | iOS 어플리케이션 설정 파일|
=== 활용 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 관련 기능을 활용하기 위하여 필요한 항목 및 그 환경 설정은 다음과 같다.
=== config.xml ===
=== [Project_Name]/eGovModule/EGovComModule.h ===
#define kSERVER_URL @"Server_URL"
==== 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:hyb3.6:guide:ios:interface:interface_join_ios.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:hyb3.6:guide:ios:interface:interface_login_ios.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:hyb3.6:guide:ios:interface:interface_withdrawal_ios.png?320|}}|
서버의 데이터를 삭제 요청하기 위해서는 회원탈퇴 버튼을 클릭하면 된다. \\
단, 모든 입력데이터에 대해서 기본적인 validation을 확인하고, 조건이 불충분 할 경우 오류 메시지가 출력된다.
회원탈퇴 : 서버의 데이터를 삭제 요청하기 위해서는 ID, PASSWD를 입력 후 회원탈퇴 버튼을 클릭한다. \\
Back 버튼 : **Interface 디바이스 API 가이드 프로그램 메뉴** 화면으로 이동한다. \\
===== 컴파일 디버깅 배포 =====
==== 컴파일 ====
=== Device Applicaton 컴파일 방법 ===
* 왼쪽 상단의 삼각형 버튼을 클릭하면 가이드 프로그램이 빌드되어 아이폰 디바이스에 설치 된다.
{{:egovframework:hyb3.6:guide:mbl:ios_app_compile.png?740|}}
* 빌드가 성공하면 아래와 같은 어플리케이션 실행화면을 확인 할 수 있다.
{{:egovframework:hyb3.6:guide:ios:interface:interface_run_ios.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 함수는 자바스크립트 구문에서 사용할 수 있는 디버그 코드로 이클립스 및 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|}}\\
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=1264&menu=3&submenu=9|Click]] \\
===== 참고 자료 =====
* Cordova : [[https://cordova.apache.org|Click]] \\
* UX/UI 라이브러리 : jQuery Mobile[[http://jquerymobile.com/demos/1.4.5/|Click]] \\
* ASIHTTPRequest : [[http://allseeing-i.com/ASIHTTPRequest]]\\
* Apple Developer Library : [[https://developer.apple.com/library/ios/navigation/]]\\