사용한 것 (환경)

cordova

visualStudioCode

windows10

Android

튜토리얼을 번역하면서 시도

튜토리얼의 페이지는 아래와 같다.

Module 13: Using the Contacts API

마지막 튜토리얼.

Cordova 튜토리얼을 시도해보십시오.

환경 구축에 대해서는 별도 정리하고 있으므로 아래 참조.

cordova&VSCode로 환경을 구축할 때까지의 우왕좌왕 메모.

Module 13: Using the Contacts API

In this section, you use the Cordova Contacts API to provide the user with the ability to add an employee to the device's contact list.
이 섹션에서는 기기의 연락처 목록에 직원을 추가할 수 있는 기능을 제공하는 Cordova Contacts API를 사용합니다.

The code below only works when running the application on your device as a Cordova app.
이 코드는 Cordova 응용 프로그램으로 장치에서 작동하는 경우에만 작동합니다.

In other words, you can't test it in a browser on your computer.
즉, PC의 브라우저에서 테스트할 수 없습니다.

1. contacts 플러그인을 추가합니다.

cordova plugin add cordova-plugin-contacts

2. index.html에서 employee template에 다음 항목을 추가합니다.

<li class="table-view-cell media">
    <a hre="#" class="push-right add-contact-btn">
        <span class="media-object pull-left"></span>
        <div class="media-body">
            Add to contacts
        </div>
    </a>
</li>

3. EmployeeView의 initialize 메소드에 다음 코드를 추가합니다.

this.$el.on('click', '.add-contact-btn', this.addToContacts);

4. EmployeeView에서 addToContacts라는 이벤트 핸들러를 정의합니다.

this.addToContacts = function(event) {
    event.preventDefault();
    console.log('addToContacts');
    if (!navigator.contacts) {
        alert("Contacts API not supported", "Error");
        return;
    }
    var contact = navigator.contacts.create();
    contact.name = {givenName: employee.firstName, familyName: employee.lastName};
    var phoneNumbers = [];
    phoneNumbers[0] = new ContactField('work', employee.officePhone, false);
    phoneNumbers[1] = new ContactField('mobile', employee.cellPhone, true);
    contact.phoneNumbers = phoneNumbers;
    contact.save();
    return false;
};

테스트 전에 조금 해설.
여기의 employee는 생성자 함수 EmployeeView 인수의 employee.
app.js에서 EmployeeView를 새로 만드는 것은
window.location.hash.substr(1)이 employees/:id(:id는 직원 ID로 숫자)가 될 때.
EmployeeView가 new 될 때 인수에 전달하는 employee는 service.findById의 결과이므로,
결과적으로는 직원의 일인분의 데이터가 된다. (변수의 이름에서 알지만…)
즉시 함수를 사용하면 평소 Java라든지 취급하고 있는 사람은 변수 선언이 잃어버리기 쉽기 때문에 주의. (나라든지)

5. 테스트해 봅시다. (브라우저 이외에서 테스트합시다.)
Add to Contact를 누르고 있는 곳이 보기 어렵습니다만, 최상부의 통지 바에 연락처의 통지가 와 있기 때문에 눌렀던 것을 알 수 있습니다.



처음이 아니므로 확인이 나오지 않지만 Add to Contact를 누르면 연락처에 대한 액세스 권한을 묻는 대화 상자가 나타납니다. (Android 측에서)
찰칵 누르면 그냥 연락처에 추가됩니다. (경고도 아무것도 나오지 않기 때문에 누른 느낌이 얇습니다만…)
사물 스마트 폰의 연락처를 노출하는 것도 조금 그렇기 때문에, 연락처에 추가되었는지의 근거는 붙이지 않는 느낌으로…

참고 URL

Module 13: Using the Contacts API

Cordova 튜토리얼을 시도해보십시오.

cordova&VSCode로 환경을 구축할 때까지의 우왕좌왕 메모.