폰갭(PhoneGap) 플러그인 사용하기

by 조쉬 posted Jun 29, 2015
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

폰갭 프로젝트를 만들때 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. 어플을 종료하고 애뮬레이터에 있는 주소록을 보면 방금 입력한 내용이 추가된 것을 확인할 수가 있다.