cordova plugin

개요

카메라 기능을 구현해 보기 전에 간단하게 디바이스에 대한 정보를 출력해보는 일을 통해 api 사용법을 익힐 수 있다.

• http://cordova.apache.org/docs/en/5.0.0/index.html 위 페이지에서 plugin api들을 만나볼 수 있다.

• 디바이스 정보를 출력해주는 api는 device api에 있다.

순서

• 새로운 cordova 프로젝트를 만든다.

ionic start myApp blank

• 터미널에 아래 명령을 입력하여 device api를 받는다.

cordova plugin add cordova-plugin-device

• 설치가 다 되었으면 myApp/www/index.html 파일의 head 태그에 다음 JS 코드를 추가한다.

<script type="text/javascript" charset="utf-8">
    // Wait for device API libraries to load
    document.addEventListener("deviceready", onDeviceReady, false);
    // device APIs are available
    function onDeviceReady() {
        var element = document.getElementById('deviceProperties');
        element.innerHTML = 'Device Name: '     + device.name     + '<br />' +
                            'Device Cordova: '  + device.cordova  + '<br />' +
                            'Device Platform: ' + device.platform + '<br />' +
                            'Device UUID: '     + device.uuid     + '<br />' +
                            'Device Model: '    + device.model    + '<br />' +
                            'Device Version: '  + device.version  + '<br />';
    } 
</script>

• 저장한 후 아래를 터미널에 입력하여 빌드한 후 핸드폰에서 실행시켜본다.

ionic build android

결과

주의사항

document.addEventListener("deviceready", onDeviceReady, false);

위 코드에서 보면 알 수 있듯이 device가 준비된 상태에서 실행해야한다. 웹에서 실행하면 결과가 나오지 않는다. device가 전역변수로 선언되어있음에도 불구하고 웹에서 실행하면 에러가 나는데 vm이나 휴대폰에 앱을 설치해서 실행시켜보면 정상작동 됨을 확인 할 수 있다.

추후 할 일

이제 카메라 기능을 구현해보면 된다.