전자정부 표준프레임워크 디바이스 API 실행환경 예제는 사용자가 개발도구를 이용하여 프로젝트를 생성 시 선택적으로 설치 할 수 있는 샘플 어플리케이션으로 폰갭의 디바이스API 기능을 실행 시켜 볼 수 있는 예제로 구성되어 있다.

• N/A

전자정부 표준프레임워크 디바이스 API 실행환경 예제는 디바이스 API 실행환경을 활용하여 하이브리드 앱을 개발 하시는 분들이 구현시에 참고 및 활용 될 수 있도록 핵심 디바이스 API 10개에 대한 샘플 예제들로 구성되어 있다.

• 폰갭의 가속도 정보 조회API

navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);

function onSuccess(acceleration) {
    alert('Acceleration X: ' + acceleration.x + '\n' +
          'Acceleration Y: ' + acceleration.y + '\n' +
          'Acceleration Z: ' + acceleration.z + '\n' +
          'Timestamp: '      + acceleration.timestamp + '\n');
};

• PhoneGap의 위치정보 수신 API

navigator.geolocation.getCurrentPosition

navigator.geolocation.getCurrentPosition(successCallback, failCallback);

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

navigator.notification.beep(times);

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

navigator.notification.vibrate(milliseconds);

• 카메라로 사진을 찍고 찍은 사진을 가져오거나, 단말기의 앨범에서 사진을 선택해서 가져온다.
  
• base64로 인코딩된 이미지를 가져오거나 사진 파일의 경로을 통해 사진을 가져온다.
  

navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

var cameraOption = {};
  cameraOption  = {
      quality: 50,
      destinationType : Camera.DestinationType.FILE_URI,
      sourceType : Camera.PictureSourceType.CAMERA,
      targetWidth: 200,
      targetHeight: 200
  };

• 디바이스 내의 오디오 파일 재생 또는 녹음 기능을 제공하는 역할을 하는 객체이다.
  

var media = new Media(src, mediaSuccess, [mediaError], [mediaStatus]);

• 미디어 파일의 현재 재생 위치 값을 구한다.
  

media.getCurrentPosition(mediaSuccess, [mediaError]);

• 미디어 파일의 재생 지연 시간을 구한다.
  

media.getDuration();

• 오디오 파일의 재생을 멈춘다.
  

media.pause();

• 미디어 파일을 재생을 한다.
  

media.play();

• 운영체제(OS) 혹은 메모리 내의 Media 객체에 등록된 오디오 파일을 해제한다.
  

media.release();

• Media API 에 대한 에러 코드

• 연락처 객체를 생성한다.

var myContact = navigator.contacts.create({"displayName": "Test User"});

• 연락처를 검색 한다.
  

navigator.contacts.find(contactFields, contactSuccess, contactError, contactFindOptions);

var options = new ContactFindOptions();
options.filter="Bob"; 
var fields = ["displayName", "name"];
navigator.contacts.find(fields, onSuccess, onError, options);

• 연락처를 저장 한다.

// create a new contact object
var contact = navigator.contacts.create();
contact.displayName = "Plumber";    // not support iOS
contact.nickname = "Plumber";       //specify both to support all devices

// populate some fields
var name = new ContactName();
name.givenName = "Jane";
name.familyName = "Doe";
contact.name = name;

// save to device
contact.save(onSuccess,onError);

• 연락처를 복사 한다.

var clone = contact.clone();
clone.name.givenName = "John";
console.log("Original contact name = " + contact.name.givenName);
console.log("Cloned contact name = " + clone.name.givenName);

• 연락처를 제거 한다.

function onSuccess() {
    alert("Removal Success");
};

function onError(contactError) {
    alert("Error = " + contactError.code);
};

// remove the contact from the device
contact.remove(onSuccess,onError);

- contactFields

- ContactName

- ContactField

- ContactAddress

- ContactOrganization

- ContactFindOption

- ContactError

• 디바이스의 현재 방향각 정보를 가져온다.
  

navigator.compass.getCurrentHeading(compassSuccess, compassError, compassOptions);

function onSuccess(heading) {
    alert('Heading: ' + heading.magneticHeading);
};

function onError(error) {
    alert('CompassError: ' + error.code);
};

navigator.compass.getCurrentHeading(onSuccess, onError);

• 모바일 디바이스의 파일 시스템 정보를 최초 로드한다.

	window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, onError);

• 현재 디바이스의 네트워크 상태 정보

var states = {};
states[Connection.UNKNOWN]  = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI]     = 'WiFi connection';
states[Connection.CELL_2G]  = 'Cell 3G connection';
states[Connection.CELL_3G]  = 'Cell 3G connection';
states[Connection.CELL_4G]  = 'Cell 4G connection';
states[Connection.NONE]     = 'No network connection';

var NowNetwork = states[navigator.connection.type];

• 모바일 디바이스의 하드웨어 및 소프트웨어 관련 메타 정보를 조회한다.

	var name = device.name;
	var cordova= device.cordova;
	var platform = device.platform;
	var uuid = device.uuid;
	var version = device.version;

실행환경 예제 프로그램에서 제공하는 디바이스 API 기능을 활용하기 위하여 필요한 항목 및 그 환경 설정은 다음과 같다.

• app/res/xml/plugins.xml

<plugins>
    <plugin name="App" value="org.apache.cordova.App"/>
    <plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>
    <plugin name="Device" value="org.apache.cordova.Device"/>
    <plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/>
    <plugin name="Compass" value="org.apache.cordova.CompassListener"/>
    <plugin name="Media" value="org.apache.cordova.AudioHandler"/>
    <plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
    <plugin name="Contacts" value="org.apache.cordova.ContactManager"/>
    <plugin name="File" value="org.apache.cordova.FileUtils"/>
    <plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/>
    <plugin name="Notification" value="org.apache.cordova.Notification"/>
    <plugin name="Storage" value="org.apache.cordova.Storage"/>
    <plugin name="Temperature" value="org.apache.cordova.TempListener"/>
    <plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/>
    <plugin name="Capture" value="org.apache.cordova.Capture"/>
    <plugin name="Battery" value="org.apache.cordova.BatteryListener"/>
    <plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>
</plugins>

• app/AndroidManifest

<supports-screens 
    android:largeScreens="true" 
    android:normalScreens="true" 
    android:smallScreens="true" 
    android:resizeable="true" 
    android:anyDensity="true" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />

• App/Supporting Files/Cordova.plist

 
<dict>
	<key>Logger</key>
	<string>CDVLogger</string>
	<key>Compass</key>
	<string>CDVLocation</string>
	<key>Accelerometer</key>
	<string>CDVAccelerometer</string>
	<key>Camera</key>
	<string>CDVCamera</string>
	<key>NetworkStatus</key>
	<string>CDVConnection</string>
	<key>Contacts</key>
	<string>CDVContacts</string>
	<key>Debug Console</key>
	<string>CDVDebugConsole</string>
	<key>File</key>
	<string>CDVFile</string>
	<key>FileTransfer</key>
	<string>CDVFileTransfer</string>
	<key>Geolocation</key>
	<string>CDVLocation</string>
	<key>Notification</key>
	<string>CDVNotification</string>
	<key>Media</key>
	<string>CDVSound</string>
	<key>Capture</key>
	<string>CDVCapture</string>
	<key>SplashScreen</key>
	<string>CDVSplashScreen</string>
	<key>Battery</key>
	<string>CDVBattery</string>
	<key>InterfaceAPI</key>
	<string>EgovInterface</string>
	<key>StorageInfoAPI</key>
	<string>EgovStorageInfo</string>
</dict>

실행환경 예제 프로그램은 디바이스 API 기능을 직관적으로 알 수 있도록 간단한 예제의 집합으로 구성되어 있다.

• iOS 플랫폼 예제의 경우 가속도 정보는 주기적으로 조회 되며 중지 시키기 위해서는 Accelerator 탭을 터치 한다.

function fn_egov_update_Acceleration(accelInfo) 
{
    var html = "<span>X : " + accelInfo.x + "<BR />" + "Y : " +  accelInfo.y + "<BR />" + "Z : "  + accelInfo.z+"</span>";
	$("#infoDetail").html(html);
    
    if(accelInsertCheck)
    {
        if(accelInfo.x === 0 && accelInfo.y === 0 && accelInfo.z === 0)
        {
            
        }
        else
        {
            fn_egov_insert_table("ACCELERATOR",accelInfo);
            fn_egov_display_deviceAPIInfoMain("ACCELERATOR",html);
            
            accelInsertCheck = false;
        }
    }
}

function fn_egov_get_acceleration() 
{
    if (accelerationWatch === null) 
    {
        //navigator.notification.alert("acceleration start");
        toast("acceleration start");

        var options = {};
        options.frequency = 1000;
        accelInsertCheck = true;
        accelerationWatch = navigator.accelerometer.watchAcceleration(fn_egov_update_Acceleration, 
                                                                      function(ex) 
                                                                      {
                                                                          console.log("DeviceAPIGuide fn_egov_get_acceleration fail (" + ex.name + ": " + ex.message + ")");
                                                                      },
                                                                      options);
    }
    else 
    {
        //navigator.notification.alert("acceleration stop");
        toast("acceleration stop");
        navigator.accelerometer.clearWatch(accelerationWatch);
        accelerationWatch = null;
    }
};

1. 가속도 정보 조회

function fn_egov_get_location() 
{
    var suc = function(p) 
    {
        var html = "<span>위도 : " + p.coords.latitude + "<BR />" + "경도 : " + p.coords.longitude + "<BR />" + fn_egov_get_nowTime()+"</span>";
        fn_egov_display_deviceAPIInfoMain("GPS",html);
        fn_egov_insert_table("GPS",p);
    };
    var locFail = function()
    {
        jAlert("위치 정보를 얻을 수 없습니다.", "알림", "b");
    };
    
    navigator.geolocation.getCurrentPosition(suc, locFail);
};

1. 디바이스의 위도, 경도 정보 조회

function fn_egov_get_vibrate() 
{
    var html = "<span><img src='images/egovframework/mbl/hyb/ico_vibration.png' ></span><BR />" + fn_egov_get_nowTime();
    fn_egov_display_deviceAPIInfoMain("VIBRATE",html);
    fn_egov_insert_table("VIBRATOR","");
    //document.getElementById('showResult').value = str;
    navigator.notification.vibrate(2000);
};

1. 디바이스 진동 기능 호출

function fn_egov_capture_photo()
{
    navigator.camera.getPicture(fn_egov_upload_photo,null,{sourceType:1,quality:60});
};

function fn_egov_upload_photo(data)
{
    console.log("DeviceAPIGuide fn_egov_upload_photo success");
    var html = '<span class="camera"><img src="' + data + '" style="max-width:100%;height:60px;"> </img></span>';
    fn_egov_display_deviceAPIInfoMain("CAMERA",html);
    fn_egov_insert_table("CAMERA",data);
    
    toast("uploadPhoto success!");
};

1. 디바이스의 카메라 호출 사진 촬영

• 미디어 버튼 클릭을 통해 미미어를 재생/정지 시킨다.

function fn_egov_play_audio() 
{
    if(audioCheck)
    {
        fn_egov_stop_audio();
        audioCheck = false;
        return;
    }
    
    // Create Media object from src
    mediaHandle = new Media("SleepAway.mp3", fn_egov_on_audioSuccess, fn_egov_on_audioError);
    // Play audio
    mediaHandle.play();
    // Update mediaHandle position every second
    if (mediaTimer === null) 
    {
        audioCheck = true;
        fn_egov_insert_table("MEDIA","");
        var html = "<span><img src=\'images/egovframework/mbl/hyb/ico_movie.png\'></span><BR />" + fn_egov_get_nowTime();
        fn_egov_display_deviceAPIInfoMain("MEDIA",html);
        
        mediaTimer = setInterval(function() 
                                 {
                                     // get mediaHandle position
                                     mediaHandle.getCurrentPosition(
                                                                 // success callback
                                                                 function(position) 
                                                                 {
                                                                     if (position > -1) {
                                                                         fn_egov_set_audioPosition((position) + " %");
                                                                     }
                                                                 },
                                                                 // error callback
                                                                 function(e) 
                                                                 {
                                                                     console.log("DeviceAPIGuide fn_egov_play_audio Error "+e.code);
                                                                     fn_egov_set_audioPosition("Error: " + e);
                                                                 });
                                 }, 
                                 1000);
    }
}

function fn_egov_pause_audio() 
{
    if (mediaHandle) 
    {
        mediaHandle.pause();
    }
}

function fn_egov_stop_audio() 
{
    if (mediaHandle) 
    {
        mediaHandle.stop();
    }
    clearInterval(mediaTimer);
    mediaTimer = null;
}

function fn_egov_set_audioPosition(position) 
{
    var html = "<span><img src=\'images/egovframework/mbl/hyb/ico_movie.png\'></span><BR />Play position : "+position+"<BR />" + fn_egov_get_nowTime();
    $("#infoDetail").html(html);
}

1. 미디어 재생하기
2. 미디어 재생 중지 하기

function fn_egov_get_contacts() 
{
    var obj = new ContactFindOptions();
    obj.filter = "";
    obj.multiple = true;
    navigator.contacts.find(
                            [ "displayName", "name" ], 
                            fn_egov_get_contactsRead,
                            fn_egov_get_contactsFail, 
                            obj);
}

function fn_egov_get_contactsRead(contacts) 
{
    console.log("DeviceAPIGuide fn_egov_get_contactsRead Success");
    var html = "<span>검색 된 연락처 총 " + contacts.length + " 개" + "<BR />" + fn_egov_get_nowTime() + "</span>";
    fn_egov_display_deviceAPIInfoMain("CONTACTS",html);

    fn_egov_insert_table("CONTACTS","total contacts : "+contacts.length);
}

1. 디바이스에 저장된 총 연락처 개수 조회

• iOS 플랫폼 예제의 경우 나침반 정보는 주기적으로 조회 되며 중지 시키기 위해서는 Compass 탭을 터치 한다.

function fn_egov_get_compass() 
{
    if (CompasswatchID === null) 
    {
        fn_egov_display_deviceAPIInfoMain("COMPASS","");
        
        toast("Compass start");
        CompassInsertCheck = true;
        var options = { frequency: 1000 };
        CompasswatchID = navigator.compass.watchHeading(fn_egov_update_heading, 
                                                        function(e) 
                                                        {
                                                            console.log("DeviceAPIGuide fn_egov_get_compass Error "+e.code);
                                                        }, 
                                                        options);
    }
    else 
    {        
        navigator.compass.clearWatch(CompasswatchID);
        CompasswatchID = null;
        fn_egov_update_heading({ magneticHeading : "Off"});
        toast("Compass stop");
    }
}

function fn_egov_update_heading(h) 
{
    var html = "방위각 : " + h.magneticHeading + "<BR />" + fn_egov_get_nowTime();
    $("#infoDetail").html(html);
    if(CompassInsertCheck) 
    {
        fn_egov_insert_table("COMPASS",h);
        CompassInsertCheck = false;
    }
}

1. 디바이스의 방위각 정보 조회

function fn_egov_get_localStorageInfo() 
{
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
                             // success get file system
                             function(fs)
                             { 
                                 console.log("DeviceAPIGuide fn_egov_get_localStorageInfo Success");
                                 fileSystem = fs;
                                 dirEntry = fs.root;
                             
                             }, 
                             // error get file system
                             function(evt)
                             {   
                                 console.log("DeviceAPIGuide fn_egov_get_localStorageInfo Error "+evt.target.error.code);
                             });
}

function fn_egov_go_directory(directoryEntry) 
{
    console.log("DeviceAPIGuide fn_egov_go_directory Success");
	dirEntry = directoryEntry;
	fn_egov_read_directory();
}

function fn_egov_next_chdir(dir) 
{
	if (dir == "../") 
    {
		dirEntry.getParent(fn_egov_go_directory, fn_egov_get_fileError);
	} 
    else if (dir == "root") 
    {
		dirEntry = fileSystem.root;
		fn_egov_read_directory();
	} 
    else 
    {
		dirEntry.getDirectory(dir, {}, fn_egov_go_directory, fn_egov_get_fileError);
	}
}

1. 디바이스의 파일 시스템 조회

function fn_egov_check_network() 
{
    var networkState = navigator.network.connection.type;
    var states = {};
    states[Connection.UNKNOWN]  = 'Unknown connection';
    states[Connection.ETHERNET] = 'Ethernet connection';
    states[Connection.WIFI]     = 'WiFi connection';
    states[Connection.CELL_2G]  = 'Cell 3G connection';
    states[Connection.CELL_3G]  = 'Cell 3G connection';
    states[Connection.CELL_4G]  = 'Cell 4G connection';
    states[Connection.NONE]     = 'No network connection';
    
    var html = "<span>Network Info : " + states[networkState] + "<BR />" + fn_egov_get_nowTime()+"</span>";
    fn_egov_display_deviceAPIInfoMain("NETWORK",html);
    fn_egov_insert_table("NETWORK", states[networkState]);
}

1. 디바이스의 네트워크 정보 조회

function fn_egov_get_deviceInfo() 
{
    var html = "NAME : " + device.name + "<BR/>cordovaVersion : " + device.cordova 
               + "<BR/>platform : " + device.platform + "<BR/>uuid : " + device.uuid
               + "<BR/>version : " + device.version + "<BR />" + fn_egov_get_nowTime();

    fn_egov_display_deviceAPIInfoMain("DEVICE",html);
    fn_egov_insert_table("DEVICE",device);
}

1. 디바이스의 메타 정보 조회

전자정부 표준프레임워크 디바이스 API 실행환경 예제는 개발환경 도구를 통해서 설치가 가능하며 자세한 설치 방법은 다음을 참조 한다.

• 실행환경 예제 설치하러 가기

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

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

 console.log("[DeviceAPI Guide] fn_egov_delete_fileInfo : Completed");

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