폰갭 프로젝트를 만들때 cordova-2.9.0.jar 파일을 포함시켰었는데, 이 라이브러리에 DroidGap 클래스와 기본 플러그인들이 정의되어 있다.
이것을 사용하려면 assets/www 밑에 포함시킨 cordova.js 파일을 인클루드 시키고, 자바스크립트 호출 방식으로 사용을 하면 된다.
플러그인에는 여러가지가 있는데, http://docs.phonegap.com/en/2.9.0/index.html
위 링크에 들어가면 사용할 수 있는 플러그인 종류가 나열되어 있다.
애뮬레이터에서 테스트해볼만 적당한게.. "Contacts"를 사용하는 것으로 한번 정리를 해보겠다.
즉, 폰갭 어플에서 주소록을 추가하는 간단한 예문을 만들어보면 될 듯 하다.
1. "Contacts" 링크를 클릭해보면 사용 방법이 나온다.
2. 안드로이드용으로 만들 것이므로, Android 만을 보면..
3. 먼저 Permissions 부분을 보면 /res/xml/config.xml 파일에 사용할 플러그인을 지정해줘야 한다.
4. config.xml 파일을 열어서 제일 밑으로 이동하면 <plugins></plugins> 태그가 공백으로 있는데, 이 안에다가 아래와 같이 한줄을 추가한다.
<plugins>
<plugin name="Contacts" value="org.apache.cordova.ContactManager" />
</plugins>
5. 그다음 AndroidManifest.xml 에 필요한 권한을 부여해야 되는데, 주소록 정보를 얻을 권한, 읽을 권한, 만들 권한 세가지가 존재한다. 여기서는 만들기만 할 것이므로 <manifest> 태그 안에다가 아래 한줄을 추가해준다.
<manifest ~~~~>
...
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
</manifest>
그런데, 희한하게 저 권한만 주면 어플이 죽는다.
뭔가 권한이 더 필요할 듯 한데.. 일단은 아래와 같은 모든 권한을 전부 추가해준다.
<uses-permission android:name="android.permission.CAMERA" />
<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" />
6. 문서 밑으로 내려보면 "contacts.create" 메서드에 대해 나오는데 동기함수이며, Contact 객체를 반환한다고 나와있다. 그리고, Contact 객체를 만들 뿐이며 실제 폰의 contacts database에는 저장하지 않는다고 나와있다. ( 저장하려면 Contact.save 메서드를 이용해야 한다. )
즉, contacts.create 메서드로 Contact 객체를 생성한 후 값을 설정한 다음 save 메서드를 호출해서 저장하면 되는 것이다.
7. 좀 내려보면 Contact 객체의 프로퍼티 목록이 나와있고 타입이 나와있다. 각각의 프로퍼티를 해당하는 타입객체로 채워넣으면 된다.
8. 예제를 만들기 위해서 index.html 을 다음과 같이 코딩한다.
<!DOCTYPE html>
<html>
<head>
<title>Contacts</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="jquery.mobile-1.3.1.min.css"/>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btn_add").click(function() {
var contact = navigator.contacts.create();
contact.displayName = $("#displayName").val();
contact.nickname = $("#nickname").val();
var name = new ContactName();
name.givenName = $("#givenName").val();
name.familyName = $("#familyName").val();
contact.name = name;
var phoneNumbers = [];
phoneNumbers[0] = new ContactField("mobile", $("#phoneNumber").val(), true);
contact.phoneNumbers = phoneNumbers;
contact.save();
alert("Saved");
});
});
</script>
</head>
<body>
<section id="mainpage" data-role="page">
<header data-role="header">Contacts</header>
<div class="content" data-role="content">
<label for="displayName">displayName</label><input type="text" id="displayName"/>
<label for="nickname">nickname</label><input type="text" id="nickname"/>
<label for="familyName">familyName</label><input type="text" id="familyName"/>
<label for="givenName">givenName</label><input type="text" id="givenName"/>
<label for="phoneNumber">phoneNumber</label><input type="text" id="phoneNumber"/>
<input type="button" value="Add Contact" id="btn_add" />
</div>
<footer data-role="footer">Hanttasoft</footer>
</section>
</body>
</html>
9. 즉, 몇가지 입력필드에 값을 채워놓고, "Add Contact" 버튼을 클릭하면 contact.create 메서드로 Contact 객체를 생성하여 입력된 값으로 채워넣고 contact.save를 호출하여 실제 저장소에 저장을한다... 란 내용이다. ( jQuery의 ready 함수에서 버튼 이벤트를 건 것인데, 이 부분은 jQuery를 좀 공부하시길.. )
10. 어플을 종료하고 애뮬레이터에 있는 주소록을 보면 방금 입력한 내용이 추가된 것을 확인할 수가 있다.
