-
[cordova 3.0] 플러그인 사용하기카테고리 없음 2014. 9. 24. 16:50
간단한 플러그인을 한번 사용해 보자.
이전강의대로 제대로 설정이 되어 있다면. 어렵지 않게 테스트 해볼 수 있다.
일단 프로젝트 설치된 폴더로 이동해서.
cordova plugin add org.apache.cordova.device
cordova plugin add < plugin URL > 형태로 명령어를 입력하면 된다.
그럼 위와 같이 해당 파일들이 추가 된 화면을 확인 할 수 있다.
프로젝트 src 에 플러그인 명 java 파일이 생성 되며
asset 폴더의 www 폴더내 plugins 라는 폴더가 생성되며 플러그인명 js 파일이 생성된다.
cordova_plugins.js
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
{
"file": "plugins/org.apache.cordova.device/www/device.js",
"id": "org.apache.cordova.device.device",
"clobbers": [
"device"
]
}
];
module.exports.metadata =
// TOP OF METADATA
{
"org.apache.cordova.device": "0.2.12"
}
// BOTTOM OF METADATA
});
위와 같이 추가된 내용을 확인 하고
index.html 을 다음과 같이 변경해 보자~
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<meta name="msapplication-tap-highlight" content="no" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
<div>
<p id="deviceProperties">Loading device properties...</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var element = document.getElementById('deviceProperties');
console.log("> platform : " + device.platform );
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>
</body>
</html>
이렇게 하고 빌드 해보면.~
위 화면을 확인 할 수 있다.
다음엔 사용자 정의 플러그인 만들기 ㄱㄱㅆ
댓글
