Ionic Contact 가져오기 및 디바이스 전화번호 가져오기

디바이스 사용자의 연락처 목록을 보여주는 아이오닉 앱을 만들어보자. (ic-1)

연락처 목록 가져오기

먼저 새 아이오닉 프로젝트를 생성하고 필요한 플러그인을 설치하자.

ionic start caller blank
ionic cordova plugin add call-number
npm install --save @ionic-native/call-number
ionic cordova plugin add cordova-plugin-contacts
npm install --save @ionic-native/contacts

위에서 두가지 플러그인을 설치했는데, 하나는 연락처 목록을 가져오기 위한 Contacts 플러그인이고 나마지 하나는 앱 상에서 해당 연락처로 전화를 걸 수 있게 하는 Callnumber 플러그인이다.

프로젝트 루트 폴더에서

src/app/app.modules.ts 파일을 열고 설치한 플러그인을 등록해준다.

import { CallNumber } from '@ionic-native/call-number';
import { Contacts } from '@ionic-native/contacts';

@NgModule({
  ......
  providers: [
    ......
    CallNumber,
    Contacts,
    ......
  ]
})

다른 많은 ionic native 플러그인들 처럼 위 플러그인도 Provider 이기 때문에 Injection 방식으로 사용한다.

home.ts 파일에 다음과 같이 추가해본다.

import { CallNumber } from '@ionic-native/call-number';
import { Contacts } from '@ionic-native/contacts';

export class HomePage {
  ......
  everybody;

  constructor(
    public callNumber: CallNumber, 
    public contacts: Contacts,
    ......
  ) {
    this.everybody = this.contacts.find(["*"]);
    ......
  }
  ......
}

여기에 Injection 된 contacts 는 contacts 리스트가 아니라 서비스다. Angular 에서 Service 등록해서 해당 서비스 안에 있는 변수와 함수를 가져와서 사용하는 원리와 같다. 즉, this.contacts.find() 함수를 가져와서 연락처를 뽑은 다음 everybody 변수에 저장한 것이다.

find() 함수로 정의한  everybody 변수는 array 값이 아니라 Promise 값이다. 따라서, view(home.html) 에서 everybody 를 보여줄 때에는 async 파이프를 사용해야한다.

home.html

<ion-list>

   <ion-item *ngFor="let contact of everybody | async">
   </ion-item>

</ion-list>

여기에 ion-icon 를 사용해 연락처 목록을 보여주고 click 액션을 추가해준다.

......    
<ion-item *ngFor="let contact of everybody | async">
      <ion-icon item-start *ngIf="contact.phoneNumbers"
        (click)="callContact(contact.phoneNumbers[0].value)"
        ios="ios-call"
        md="md-call"
        tappable></ion-icon>

      <ion-label>
        {{contact.name.givenName}}
      </ion-label>
</ion-item>
......

item-start 디렉티브는 아이콘을 처음에 표시한다는 의미다. callContact() 함수는 home.ts 에서 정의해주면된다.

home.ts

......
  callContact(number: string) {
    this.callNumber.callNumber(number, true)
      .then(() => console.log('Dialer Launched!'))
      .catch(() => console.log('Error launching dialer'));
  }
......

callNumber 프로바이더의 callNumber() 함수의 두번째 arg는 네이티브 디바이스의 다이얼러를 사용하겠다는 의미다.

디바이스를 연결하고 다음과 같이 명령프롬프트에서 실행해보자.

ionic cordova platform add android

ionic cordova run android --livereload

–livereload 는 변경사항을 실시간으로 볼 수 있게 해준다.

기기에서 에뮬레이션하는 법

만약 기기에 디벨롭먼트 모드 설정이되어있지 않다면, 에뮬레이션이 되지 않는다. 다음을 참고해서 디벨롭먼트 모드를 설정해주자.

링크

기기 정보 및 전화번호 가져오기

기기 전화번호를 포함한 정보를 가져오기 위해서는 다음과 같은 플러그인이 필요하다. 링크 1링크 2

하지만, 이 플러그인으로는 IOS 에서는 기기 전화번호를 가져올 수 없다. Android 에서만 작동 가능하다.

IOS 의 경우에도 기기번호를 가져오는 방법이 있기는 한데, 앱 등록시에 등록 거절될 수 있다고 한다. 다만, 앤터프라이즈 디스트리뷰션 플랜으로 배포하는 경우에는 문제없이 등록된다고 적어놓은 페이지를 웹 검색에서 읽었다. 링크

IOS에서 기기번호를 꼭 가져와야한다면, 위 플러그인으로 얻은 기기 uuid를 통해 기기를 식별하고, 사용자가 직접 서버측으로 전화번호를 전송하게 한 다음 인증번호를 서버측으로 돌려주는 형식으로 얻는 것이 내가 생각해볼 수 있는 최선인 것 같다. (혹시, ionic으로 IOS 기기 전화번호에 접근할 수 있는 더 좋은 방법이 있다면 댓글 부탁드립니다.)

 

댓글 남기기