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

VibratorAPI 가이드 프로그램은 모바일 디바이스 API 실행환경을 활용하여 하이브리드 앱을 개발자들이 구현 시 참고 및 활용될 수 있도록 구현된 전자정부 디바이스 API에 대한 가이드 앱으로써, 모바일 스마트 디바이스의 Notification 관련 기능을 JavaScript 기반으로 구성된 Vibrator DeviceAPI 를 통하여 조회할 수 있도록 지원한다.

또한, 전자정부 표준 프레임워크 기반의 웹 서버 어플리케이션과 연계하여 디바이스 내, 알림 정보를 서버로 전송 및 조회할 수 있는 기능으로 구성되어 있다.

본 가이드 프로그램 에서는 알람 기능을 가이드 할 수 있도록 소리로 알림 , 진동으로 알림 , 알림 목록 보기 기능을 제공하고 있다.

Notification API를 이용하여, 사용자가 설정한 시간에 알람 정보를 표시한다.

• 문제 : 폰갭 오류시.
• 해결방안 : 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);

Xcode 4.5부터 iOS 6, iPhone 5를 지원하는데, 해당 디바이스와 OS를 지원할 경우 PhoneGap 1.9.0의 라이브러리는 Xcode 4.4.1에서 컴파일되어 배포되는 라이브러리라 프로젝트 옵션을 조정할 필요가 있다.

1. 옵션 설정

2. armv7s 삭제

폰갭에서 특정 외부 도메인이나 외부 도메인의 하위 도메인을 사용해야할 경우,
Resource/Cordova.plist에서 <key>ExternalHosts</key> 항목에 외부 도메인 주소를 추가 설정해야 외부 도메인에 접속할 수 있다.

N/A

Vibrator 디바이스API 가이드 프로그램은 크게 알림 정보를 설정 및 표시 하는 기능과 설정한 알림 정보를 웹 서버 어플리케이션으로 전송 및 조회하는 기능으로 구성되어 있다.(관련기능 부분참조)

• 단말기의 비프(beep)음을 재생한다.
  
• times: 반복되는 비프(beep)음 재생 횟수
  

navigator.notification.beep(times);

• 지정한 시간 동안 단말기의 진동을 울리게 한다.
  
• Milliseconds 단위의 진동이 울리는 시간.
  

navigator.notification.vibrate(milliseconds);

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

    <feature name="Notification">
         <param name="ios-package" value="CDVNotification"/>
    </feature>

<sqlMap resource="egovframework/sqlmap/hyb/ios/vbr/EgovVibratoriOSAPIGuide_SQL_[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");
}

소리로 알림 버튼을 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");
}

진동으로 알림 버튼을 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);
	});
}

서버에 저장된 알림 정보 목록을 디바이스의 화면에 표시한다.

기능설명 : 기능설명 화면으로 이동한다.
라이선스 : 라이선스 화면으로 이동한다.

1. VibratorAPI 설치하러 가기
   
2. VibratorAPI 프로젝트의 설치 상태를 확인하고 빌드를 클릭한다
   
   

• 빌드가 성공하고 나면 다음과 같은 화면이 실행된다.
  
  

1. Web Server 설치하러 가기
   
2. 프로젝트 우클릭>Run as>Maven install 을 클릭하여 빌드를 한다.
   
   
3. 빌드 성공 (콘솔 정보 확인)
   
   
4. 프로젝트 우클릭>Run as>Run on Server 를 클릭하여 실행시킨다.
   
   
5. 프로젝트가 성공적으로 실행되었는지 확인한다.
   
   

디바이스 어플리케이션에서 발생한 오류 내용 확인 및 디버깅을 위해서는 폰갭 프레임워크에서 제공하는 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 콘솔 창

• Organizer 로그 창

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

• UX/UI 라이브러리 : jQuery MobileClick
  
• Phonegap 2.9.0 Notification: Click