⚡ 커패시터 NFC 플러그인 발표

오늘 저는 Capacitor NFC이 후원하는 Capawesome의 새로운 NFC21 플러그인을 소개하게 되어 기쁩니다.
이 플러그인은 NFC(Near Field Communication) 태그와의 상호 작용을 가능하게 하고 Android, iOS 및 웹에 대한 교차 플랫폼 지원을 제공합니다. 이 프로젝트는 GitHub에서 Sponsorware로 사용할 수 있습니다.

NFC plugin API과 패시브 NFC 태그 및 스티커를 읽고 쓰는 방법을 간단히 살펴보겠습니다. 이를 위해 여기에서 NTAG 215NFC Starter Kit를 사용합니다.

설치

프로젝트가 스폰서웨어로 제공되는 한 프로젝트는 GitHub 패키지를 통해 배포됩니다.

이를 위해서는 먼저 CLI를 통해 GitHub 패키지에 로그인해야 합니다.

npm login --scope=@capawesome-team --registry=https://npm.pkg.github.com

GitHub 사용자 이름, 범위read:packages를 암호(생성personal access token)로 사용하는 ahere 및 공개 이메일 주소를 입력합니다.

그런 다음 package.json 파일과 동일한 디렉토리에서 .npmrc 파일을 생성하거나 편집하고 다음 줄을 삽입합니다.

@capawesome-team:registry=https://npm.pkg.github.com

이제 패키지를 설치하고 Capacitor 프로젝트를 동기화합니다.

npm install @capawesome-team/capacitor-nfc
npx cap sync

Capacitor 4를 이미 사용 중인 경우 next 태그가 있는 npm 패키지를 설치합니다.

기계적 인조 인간

NFC API를 사용하려면 AndroidManifest.xml 태그 앞에 다음 권한을 application에 추가해야 합니다.

<uses-permission android:name="android.permission.NFC" />
<uses-sdk android:minSdkVersion="10"/>

아이폰 OS

Near Field Communication Tag Reading 기능이 Xcode의 애플리케이션에서 활성화되었는지 확인하십시오.
자세한 내용은 Add a capability to a target을 참조하십시오.

마지막으로 NFCReaderUsageDescription 키를 ios/App/App/Info.plist 파일에 추가하여 앱에서 NFC를 사용해야 하는 이유를 사용자에게 알려줍니다.

<key>NFCReaderUsageDescription</key>
<string>The app enables the reading and writing of various NFC tags.</string>

용법

이제 마지막으로 플러그인이 작동하는 것을 시작하고 살펴보겠습니다.

NFC 태그 스캔

NFC 태그 스캔은 매우 간단합니다.

import { Nfc } from '@capawesome-team/capacitor-nfc';

Nfc.addListener('nfcTagScanned', event => {
  console.log('NFC tag scanned: ', event.nfcTag);
});

await Nfc.startScanSession();

먼저 nfcTagScanned 수신기를 추가해야 합니다. NFC 태그가 스캔될 때마다 호출됩니다. 이 리스너는 NFC 태그가 앱을 열 때도 호출됩니다.
리스너가 활성화되는 즉시 Nfc.startScanSession()로 새 스캔 세션을 시작할 수 있습니다. 이 세션 동안 운영 체제는 NFC 태그를 찾습니다.

NFC 태그 작성

NFC 태그는 NDEF와 같은 다양한 형식의 다양한 유형의 데이터를 포함할 수 있습니다. NDEF는 NFC 데이터 교환 형식을 의미하며 어떤 형식의 데이터가 NFC 태그에 저장되고 어떤 방식으로 읽을 수 있는지 정의합니다.

여기서는 다양한 도우미 기능이 있는 유틸리티 클래스인 NfcUtils 를 사용하여 간단한 NDEF 텍스트 레코드를 만듭니다.

import { NfcUtils } from '@capawesome-team/capacitor-nfc';

const utils = new NfcUtils();
const { record } = utils.createNdefTextRecord({ text: 'Capacitor NFC Plugin' });

이제 이 레코드를 NFC 태그에 쓸 수 있습니다.
NFC 태그는 스캔되는 순간에 기록될 수 있습니다.
즉, nfcTagScanned 수신기를 다시 추가해야 합니다.

import { Nfc, NfcUtils } from '@capawesome-team/capacitor-nfc';

const utils = new NfcUtils();
const { record } = utils.createNdefTextRecord({ text: 'Capacitor NFC Plugin' });

Nfc.addListener('nfcTagScanned', event => {
  Nfc.write({ message: { records: [record] } });
});

await Nfc.startScanSession();

이제 태그를 스캔하는 동안 Nfc.write(...)를 호출하고 NFC 태그에 레코드를 쓸 수 있습니다.

NFC 태그를 읽기 전용으로 설정

makeReadOnly 방법을 사용하여 NFC 태그를 영구적으로 읽기 전용으로 만들 수 있습니다.

import { Nfc } from '@capawesome-team/capacitor-nfc';

Nfc.addListener('nfcTagScanned', event => {
  Nfc.makeReadOnly();
});

await Nfc.startScanSession();

주의하십시오: 이것은 단방향 작업이며 취소할 수 없습니다. NFC 태그가 읽기 전용으로 설정되면 더 이상 쓸 수 없습니다.

마무리 생각

이 플러그인으로 무엇을 할 수 있는지 확인하려면 당사API Reference를 확인하십시오. 또한 이 플러그인이 작동하는 모습을 보여주는 demo app을 자유롭게 살펴보십시오.