====== Vibrator 디바이스API 가이드 프로그램 ====== ===== 개요 ===== VibratorAPI 가이드 프로그램은 모바일 디바이스 API 실행환경을 활용하여 하이브리드 앱을 개발자들이 구현 시 참고 및 활용될 수 있도록 구현된 전자정부 디바이스 API에 대한 가이드 앱으로써, 모바일 스마트 디바이스의 Notification 관련 기능을 JavaScript 기반으로 구성된 Vibrator DeviceAPI 를 통하여 조회할 수 있도록 지원한다. 또한, 전자정부 표준 프레임워크 기반의 웹 서버 어플리케이션과 연계하여 디바이스 내, 알림 정보를 서버로 전송 및 조회할 수 있는 기능으로 구성되어 있다. ==== 특징 ==== 본 가이드 프로그램 에서는 알람 기능을 가이드 할 수 있도록 **소리로 알림** , **진동으로 알림** , **알림 목록 보기** 기능을 제공하고 있다.\\ Notification API를 이용하여, 사용자가 설정한 시간에 알람 정보를 표시한다. ==== 기능흐름도 ==== {{:egovframework:hyb:guide:add:egovframework_hyb_guideadd_vibrator_알림기능흐름도.png?740|}} ==== 기능시퀀스 ==== {{:egovframework:hyb:guide:ios:vibrator기능시퀀스.jpg|}} ==== 전제조건 ==== ^ 구분 ^ 내용 ^ |Local 디바이스 개발 환경|Xcode 4.5.2, PhoneGap 2.9.0| |서버 사이드 개발 환경|전자정부표준프레임워크 개발환경2.7| |Mash up Open API 연계|N/A| |테스트 디바이스 |iPhone4 | |테스트 플랫폼 |iOS 5.1| |추가 라이브러리 적용|N/A| ==== 제약사항 ==== === 지원 디바이스 및 플랫폼 === == 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); == 알림 설정 시간은 최소 10초이상으로 설정한다. (validation 조건) == == Xcode 4.5에서 실행 시 주의 사항 == Xcode 4.5부터 iOS 6, iPhone 5를 지원하는데, 해당 디바이스와 OS를 지원할 경우 PhoneGap 1.9.0의 라이브러리는 Xcode 4.4.1에서 컴파일되어 배포되는 라이브러리라 프로젝트 옵션을 조정할 필요가 있다.\\ 1. 옵션 설정\\ {{:egovframework:hyb:guide:ios:xcode4.5_제약사항1.png|}} 2. armv7s 삭제\\ {{:egovframework:hyb:guide:ios:xcode4.5_제약사항2.png|}} === 크로스 도메인 사용 === 폰갭에서 특정 외부 도메인이나 외부 도메인의 하위 도메인을 사용해야할 경우,\\ Resource/Cordova.plist에서 ExternalHosts 항목에 외부 도메인 주소를 추가 설정해야 외부 도메인에 접속할 수 있다. === 라이선스 === N/A ===== 설명 ===== Vibrator 디바이스API 가이드 프로그램은 크게 알림 정보를 설정 및 표시 하는 기능과 설정한 알림 정보를 웹 서버 어플리케이션으로 전송 및 조회하는 기능으로 구성되어 있다.(관련기능 부분참조) === 클래스 다이어그램 === {{:egovframework:hyb:guide:add:egovframework_hyb_guide_add_vibrator_클래스다이어그램.png?1024}} ==== Device Application ==== === 관련 소스 === ^유형^대상소스명^비고^ |CSS|www/css/egovframwork/mbl/hyb/VibratorAPI.css |VibratorAPI 가이드 프로그램 주요 Cascading Style Sheets| |IMAGE |www/images/egovframwork/mbl/hyb/ |VibratorAPI 가이드 프로그램 주요 Image 폴더| |JS |www/js/egovframwork/mbl/hyb/VibratorAPI.js |VibratorAPI 가이드 프로그램 주요 JavaScript| |HTML|www/VibratorAPI.html|VibratorAPI 메인 페이지| |HTML|www/license.html|VibratorAPI 라이센스 페이지| |HTML|www/overview.html|VibratorAPI 기능설명 페이지| === 활용 API === == notification.beep == * 단말기의 비프(beep)음을 재생한다. \\ * times: 반복되는 비프(beep)음 재생 횟수 \\ navigator.notification.beep(times); == notification.vibrate == * 지정한 시간 동안 단말기의 진동을 울리게 한다. \\ * Milliseconds 단위의 진동이 울리는 시간. \\ navigator.notification.vibrate(milliseconds); ==== Server Application ==== === 관련 소스 === ^유형^대상소스명^비고^ |Controller|egovframework.hyb.ios.vbr.web.EgovVibratoriOSAPIController.java|VibratorAPI 가이드 프로그램 Controller Class| |Service|egovframework.hyb.ios.vbr.service.EgovVibratoriOSAPIService.java|VibratorAPI 가이드 프로그램 Service Class| |ServiceImpl|egovframework.hyb.ios.vbr.service.impl.EgovVibratoriOSAPIServiceImpl.java|VibratorAPI 가이드 프로그램 ServiceImpl Class| |VO|egovframework.hyb.ios.vbr.service.VibratoriOSAPIDefaultVO.java|VibratorAPI 가이드 프로그램 VO Class| |VO|egovframework.hyb.ios.vbr.service.VibratoriOSAPIVO.java|VibratorAPI 가이드 프로그램 VO Class| |VO|egovframework.hyb.ios.vbr.service.VibratoriOSAPIXmlVO.java|VibratorAPI 가이드 프로그램 XML 관련 VO Class| |DAO|egovframework.hyb.ios.vbr.service.impl.VibratoriOSAPIDAO.java|VibratorAPI 가이드 프로그램 Dao Class| |QUERY XML|resources/egovframework/sqlmap/hyb/ios/vbr/EgovVibratoriOSAPIGuide_iOS_mysql.xml|VibratorAPI 가이드 프로그램 QUERY XML| |Idgen XML|resources/egovframework/spring/com/context-idgen.xml|VibratorAPI 가이드 프로그램 Id생성 Idgen XML| ==== 관련 테이블 ==== === 테이블명 === ^테이블명^테이블명(영문)^비고^ |VIBRATOR|알림 정보 관리| | === 테이블 명세서 === == 바이브레이터 == ^No.^컬럼^컬럼명^타입^길이^Null^KEY^ |1|SN|일련번호|NUMERIC|6|NotNull|pk| |2|UUID|UUID|VARCHAR|50|NotNull|pk| |3|TIMESTAMP|시간값|VARCHAR|20|Null| | === ERD === {{:egovframework:hyb:guide:ios:erd.jpg|}} ===== 환경설정 ===== Vibrator 디바이스API 가이드 프로그램에서 제공하는 모바일 디바이스의 알림 관련 기능을 활용하기 위하여 필요한 항목 및 그 환경 설정은 다음과 같다. ==== Device Application ==== === config.xml === == Plugins == ==== Server Aplication ==== === resource/egovframework/sqlmap/sql-map-config_[DB명].xml === ===== 관련기능 ===== ==== 소리로 알림 ==== === 비즈니스 규칙 === 알림 설정 시간이 되면 Beep를 사용하여 사용자에게 알린다. === 관련코드 === function fn_egov_save_notificationConfig() { ... var setTime = $("#txtNotification").val(); if(fn_egov_network_check(true)) { setTimeout ( "fn_egov_set_alram()", setTime * 1000); jAlert("알람이 " + setTime + " 초 뒤에 설정 되었습니다.", "알림", "b"); } ... } function fn_egov_set_alram() { console.log("DeviceAPIGuide fn_egov_set_alram Success"); if($("#swchBeep").val() === "on") { navigator.notification.beep(3); } ... fn_egov_insert_data(); jAlert("알람", "알림", "b"); } === 관련화면 및 수행매뉴얼 === ^Action^URL^Controller method^QueryID^ |알림정보전송|/vbr/addVibratoriOSInfo.do|insertVibrator|"vibratoriOSAPIDAO.insertVibrator"| {{:egovframework:hyb:guide:iOS:알림설정.png?320|}} 소리로 알림 버튼을 On 으로 선택한 후, 설정시간과 함께 설정 완료 버튼을 클릭한다. \\ 단, 모든 입력데이터에 대해서 기본적인 validation을 확인하고, 조건이 불충분할 경우 오류 메시지가 출력된다. 기능설명 : **기능설명** 화면으로 이동한다. \\ 라이선스 : **라이선스** 화면으로 이동한다. \\ 소리로 알림 : 소리로 알림 기능을 위하여 On으로 선택한다. \\ 알림목록 : 알림 목록 조회 화면으로 이동한다. \\ 설정완료 : 해당 설정을 바탕으로 알림을 설정한다. \\ ==== 진동으로 알림 ==== === 비즈니스 규칙 === 알림 설정 시간이 되면 Vibrator를 사용하여 사용자에게 알립니다. === 관련코드 === function fn_egov_save_notificationConfig() { ... var setTime = $("#txtNotification").val(); if(fn_egov_network_check(true)) { setTimeout ( "fn_egov_set_alram()", setTime * 1000); jAlert("알람이 " + setTime + " 초 뒤에 설정 되었습니다.", "알림", "b"); } ... } function fn_egov_set_alram() { console.log("DeviceAPIGuide fn_egov_set_alram Success"); ... if($("#swchVibration").val() === "on") { navigator.notification.vibrate(3000); } ... fn_egov_insert_data(); jAlert("알람", "알림", "b"); } === 관련화면 및 수행매뉴얼 === ^Action^URL^Controller method^QueryID^ |알림정보전송|/vbr/addVibratoriOSInfo.do|insertVibrator|"vibratoriOSAPIDAO.insertVibrator"| {{:egovframework:hyb:guide:iOS:알림설정.png?320|}} 진동으로 알림 버튼을 On 으로 선택한 후, 설정시간과 함께 설정 완료 버튼을 클릭한다. \\ 단, 모든 입력데이터에 대해서 기본적인 validation을 확인하고, 조건이 불충분할 경우 오류 메시지가 출력된다. 기능설명 : **기능설명** 화면으로 이동한다. \\ 라이선스 : **라이선스** 화면으로 이동한다. \\ 진동으로 알림 : 소리로 알림 기능을 위하여 On으로 선택한다. \\ 알림목록 : 알림 목록 조회 화면으로 이동한다. \\ 설정완료 : 해당 설정을 바탕으로 알림을 설정한다. \\ ==== 알림 목록 보기 ==== === 비즈니스 규칙 === 서버에 저장된 알림 설정 정보를 화면에 표시한다. === 관련코드 === function fn_egov_select_data() { var url = "/vbr/VibratoriOSInfoList.do"; var acceptType = "xml"; $.mobile.showPageLoadingMsg(); egovHyb.post(url, acceptType, {}, function(xmldata) { console.log("DeviceAPIGuide fn_egov_select_data request Completed"); fn_egov_go_detailPage(xmldata); }); } === 관련화면 및 수행매뉴얼 === ^Action^URL^Controller method^QueryID^ |알림정보조회|/vbr/VibratoriOSInfoList.do|selectVibratorInfoList|"vibratoriOSAPIDAO.selectVibratorList"| {{:egovframework:hyb:guide:iOS:알림목록.png?320|}} 서버에 저장된 알림 정보 목록을 디바이스의 화면에 표시한다. 기능설명 : **기능설명** 화면으로 이동한다. \\ 라이선스 : **라이선스** 화면으로 이동한다. \\ ===== 컴파일 디버깅 배포 ===== ==== 컴파일 ==== === Device Application === - [[ |VibratorAPI 설치하러 가기]]\\ - VibratorAPI 프로젝트의 설치 상태를 확인하고 빌드를 클릭한다\\ {{:egovframework:hyb:guide:ios:vibrator빌드.png?700|}} \\ * 빌드가 성공하고 나면 다음과 같은 화면이 실행된다.\\ {{:egovframework:hyb:guide:ios:vibrator실행.png?320|}} \\ === Server Application === - [[ |Web Server 설치하러 가기]]\\ - 프로젝트 우클릭>Run as>Maven install 을 클릭하여 빌드를 한다.\\ {{:egovframework:hyb:guide:ios:웹서버빌드.png?700|}} \\ - 빌드 성공 (콘솔 정보 확인)\\ {{:egovframework:hyb:guide:ios:웹서버빌드성공.png?700|}} \\ - 프로젝트 우클릭>Run as>Run on Server 를 클릭하여 실행시킨다.\\ {{:egovframework:hyb:guide:ios:웹서버실행.png?700|}} \\ - 프로젝트가 성공적으로 실행되었는지 확인한다. \\ {{: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:vibratordebugxcode.png?700|}}\\ * Organizer 로그 창 {{:egovframework:hyb:guide:ios:vibratordebugorganizer.png?700|}}\\ ^로그 메시지^값^비고^ |DeviceAPIGuide fn_egov_network_check|네트워크 상태 체크| | |DeviceAPIGuide fn_egov_sendto_server Response Completed|서버에 요청한 내용이 성공적으로 처리 된 경우| | |DeviceAPIGuide fn_egov_sendto_server Response Failed|서버 내부 처리 오류| | |DeviceAPIGuide fn_egov_sendto_server Request Failed|통신 오류| | ==== 배포 ==== Vibrator 디바이스 API 가이드 다운로드 : [[http://www.egovframe.go.kr/cop/bbs/selectBoardArticle.do?bbsId=BBSMSTR_000000000161&nttId=541&menu=3&submenu=9|Click]] ===== 참고자료 ===== * UX/UI 라이브러리 : jQuery Mobile[[http://jquerymobile.com/demos/1.3.1/|Click]]\\ * Phonegap 2.9.0 Notification: [[http://docs.phonegap.com/en/2.9.0/cordova_notification_notification.md.html#Notification|Click]]