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

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

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

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

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

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

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

navigator.notification.beep(times);

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

navigator.notification.vibrate(milliseconds);

• VIBRATOR

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

<plugin name="Notification" value="org.apache.cordova.Notification"/>

    <!--전자정부 Interface 디바이스 API에서 사용하기 위한 서버경로 설정-->
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
	<string name="SERVER_URL">http://192.168.100.222:8080/DeviceAPIGuideTotal_Web_V1.7.1</string>
    </resources>

<uses-permission android:name="android.permission.VIBRATE" />

<sqlMap resource="egovframework/sqlmap/hyb/add/vbr/EgovDeviceAndroidAPIGuide_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/VibratorAndroidInfoList.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);
	});
}

알람목록 보기 화면

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

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

• 프로젝트 선택 > 오른쪽 클릭 > Run As > Android Application

• 상단의 메뉴 > Run As > Android Application

• 실행할 타겟 선택 > 에뮬레이터, 디바이스(디버깅모드)

• 디바이스를 이용한 실행 화면

• 서버사이드 가이드 프로그램의 실행은 프로젝트를 마우스 오른쪽 버튼을 클릭 한후 Run As>Run On Server 버튼을 통해 실행 할 수 있다.

• 빌드가 성공적으로 수행 되면 이클립스의 콘솔 창에서 'Server Startup in xxx ms' 메시지를 확인 할 수 있다.

디바이스 어플리케이션에서 발생한 오류 내용 확인 및 디버깅을 위해서는 Phonegap 프레임워크에서 제공하는 console.log를 이용할 수 있다. console.log 함수는 자바스크립트 구문에서 사용할 수 있는 디버그 코드로 이클립스 및 Xcode에서 확인 할 수 있다.

console.log의 작성 방법은 다음과 같다.

function fn_egov_network_check(doCheck)
{
    console.log('DeviceAPIGuide fn_egov_network_check');
    var networkState = navigator.network.connection.type;
    ...
}

디버깅 코드가 실행 되면 아래와 같은 메시지를 개발도구의 콘솔 메시지 창에서 볼 수 있다.

Vibrator 디바이스 API 가이드 프로그램 에서는 디버깅을 위하여 다음과 같이 콘솔 정보를 출력한다.

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

• Cordova : Click
  
• UX/UI 라이브러리 : jQuery MobileClick