e
sv

React Native'de NFC etiketleri nasıl kullanılır?

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Yakın alan iletişimi veya NFC, verilerin birbirine yakın cihazlar arasında aktarılmasına olanak tanır. NFC etiketleri, bilgi depolayan ve NFC okuyucuları tarafından on santimetre içinde okunabilen küçük mikroçiplerle gömülü etiketler veya bilekliklerdir.

NFC etiketleriyle uygulama URL'leri, şifreli banka hesapları ve daha fazlası gibi küçük miktarlardaki bilgileri kolayca aktarabilirsiniz. NFC'nin en büyük avantajı, bağlantı kurmak için eşleştirme veya herhangi bir manuel giriş gerektirmemesidir. Daha sonra göstereceğimiz gibi, yalnızca bir dokunuşla veri aktarabilirsiniz. Bu yazıda, NFC etiketlerinin ne olduğunu ve bunları React Native ile nasıl kullanabileceğimizi ele alacağız. Başlayalım!

NFC etiketleri nasıl çalışır?

NFC etiketlerini hızlı bir şekilde sayısallaştırılmış veri alışverişi yapmamız gereken uygulamalarda kullanabiliriz. NFC etiketleri, depolama belleği ve bir radyo çipi içerir. Manyetik indüksiyon nedeniyle NFC etiketlerinin kendilerine ait bir güç kaynağı yoktur. Bunun yerine, onları okuyan cihazdan güç alırlar.

Esasen, bir NFC okuyucu, bir NFC etiketinin on santimetre yakınına getirildiğinde, NFC etiketi enerjilenir ve mikroçipi içinde depolanan tüm verileri iletir. Okuyucu bilgiyi doğruladığında bilgi alışverişi tamamlanır. NFC okuyucuları aynı anda yalnızca bir NFC etiketine bağlanarak yanlışlıkla yapılan işlemleri en aza indirir.

NFC etiket okuyucuları nasıl çalışır?

Daha önce, NFC etiket okuyucularının, pasif NFC etiketlerinden bilgi okuyarak güç kaynağı olarak hizmet ettiğinden bahsetmiştik. NFC etiket okuyucuları, bobinlerinden NFC etiketlerine bir elektrik akımı geçirmek için bir güç kaynağına ihtiyaç duyar ve sonuç olarak okuyucunun etrafında bir manyetik alan oluşturur.

Faraday'ın indüksiyon yasası nedeniyle, bu manyetik alanın aralığına bir etiket getirmek, iki bobin arasında bilgi alışverişinin gerçekleştiği endüktif eşleşme ile sonuçlanır.

React Native ile NFC etiketlerini okuma

Artık NFC etiketlerinin ve NFC etiket okuyucularının temellerini anladığımıza göre, bir NFC etiketi okuyan ve yazan React Native kodunun nasıl yazılacağını öğrenelim. İlk olarak, aşağıdaki komutu kullanarak yeni bir React Native projesini başlatalım:

 npx tepki-yerel init NFCTutorial

Yukarıdaki komut, seçtiğiniz konuma yeni bir React Native ortak plakası yükleyecektir, böylece kodunuzu hızlı bir şekilde yazmaya başlayabilirsiniz. Bölmeleri kullanarak iOS bağımlılıklarını yüklemek için aşağıdaki komutu çalıştırın. CocoaPods , Swift gibi iOS programlama dilleri için bir bağımlılık yöneticisidir:

 cd ios && pod kurulumu && cd ..

Ardından, projeyi bir iOS simülatöründe çalıştırmak için Metro paketleyiciyi ve npm ios npm start için npm start'ı çalıştırın.

Bu eğitimde, tepki-native-nfc-manager kullanacağız. Ancak, koda geçmeden önce, NFC'yi etkinleştirmek için hem Android hem de iOS platformlarını yapılandırmamız gerekiyor. Hem Android hem de iOS platformları için yapılandırmayı gözden geçirecek olsak da, NFC etiketlerini yalnızca bir iOS cihazında okuma ve yazma konusunda demo yapacağız.

Android için NFC yapılandırması

Bir Android cihazının NFC donanımına erişmek ve NFC amaçlarını düzgün bir şekilde işlemek için AndroidManifest.xml dosyasında şu öğeleri bildireceğiz:

Kullanım uses-feature öğesi, uygulamanın yalnızca NFC donanımına sahip cihazlar için Google Play'de görünmesini sağlar:

 <uses-feature android:name="android.hardware.nfc" android:required="true" />

NFC uses-permission öğesi, NFC donanımına erişim sağlar:

 <kullanım izni android:name="android.permission.NFC" />

iPhone'da NFC erişimi isteme

Başlamak için Apple Developer programına kaydolmanız gerekir; NFC projesini bir iOS cihazında test edebilmeniz için uygulama için bir uygulama kimliği de oluşturmanız gerekir.

  • Mac'te Xcode içinden, XcodeTercihlerHesaplar'a gidin
  • Apple Kimliğinizi eklemek için sol alt taraftaki + simgesine tıklayın
  • Hesabınızı seçin. Sağdaki ana hesap penceresinde Team (Personal Team) ve User Olarak Role altında gösterilecektir.

Xcode Hesap Kaydı Kullanıcı Arayüzü

  • Menü çubuğundan PencereCihazlar ve Simülatörler Cihazlar'a tıklayın
  • iPhone'unuzu bir yıldırım kablosuyla bağlayın ve sağdaki etkin şema açılır menüsünden yapı hedefi olarak seçin
  • Ardından, daha önce yüklediğimiz projeyi Xcode'a açın
  • Genel sekmesi altında, paket tanımlayıcısını benzersiz bir tanımlayıcıyla değiştirin

Signing and capabilities sekmesinde, proje için kullandığınız uygun takımı seçin. Ardından, Signing and capabilities sekmesinin altında, Yetenekler'i seçin veya + işaretine tıklayın ve projede NFC özelliğini etkinleştirmek için Near field communication tag arayın:

NFC Yeteneklerini Etkinleştir Xcode

Xcode'un, uygulama yeteneklerini içeren entitlements adlı bir klasörü nasıl oluşturduğuna dikkat edin:

Xcode Yetkilendirme Klasörü

Son olarak, projeyi tanımlayan aşağıdaki kod satırlarını eklemek için info.plist dosyasını düzenleyelim:

 <key>NFCReaderUsageDescription</key>
<string>NFC'yi yerel tepkiyle okuma</string>

Ve gereken tüm yapılandırma bu! Devam edin ve projeyi bağlı iPhone cihazında görüntüleyebilmemiz için Xcode'daki çalıştır düğmesine basın. Şimdi devam edelim ve kodumuzu yazalım!

React Native ile bir NFC etiketi nasıl okunur

İlk olarak, tepki-yerel-nfc-yöneticisi kitaplığını kuralım:

 npm i -- tepkiyi kaydet-yerel-nfc-yöneticisi

cd ios && pod install tekrar çalıştırmayı unutmayın.

Mevcut cihazın NFC desteği olup olmadığını kontrol edin

React-native-nfc-manager kitaplığını içe aktarmamız gerekiyor, ardından bir cihazın NFC desteğine sahip olup olmadığını belirlemek için isSupported() yöntemini kullanacağız. Aşağıdaki kodda cihazın NFC'yi destekleyip desteklemediğini öğrendiğimizde güncellenecek bir durum oluşturuyoruz:

 NfcManager'ı, { NfcEvents } 'react-native-nfc-manager'dan içe aktarın;

 const [hasNfc, setHasNFC ] = useState(null);

Bileşen takıldığında durumu bir useEffect güncelleyeceğiz. Cihazda NFC'nin desteklendiğini onayladıktan sonra devam edip NFC modülünü start() yöntemiyle başlatacağız:

 useEffect(() => {
    const checkIsSupported = zaman uyumsuz () => {
      const deviceIsSupported = NfcManager.isSupported() bekleniyor

      setHasNFC(deviceIsSupported)
      if (deviceIsSupported) {
        NfcManager.start()'ı bekleyin
      }
    }

    checkIsSupported()
  }, [])

Şimdi bir NFC etiketi okuyacak kodu yazalım:

 useEffect(() => {
    NfcManager.setEventListener(NfcEvents.DiscoverTag, (etiket) => {
      konsol.log('etiket bulundu')
    })

    dönüş () => {
      NfcManager.setEventListener(NfcEvents.DiscoverTag, null);
    }
  }, [])


  const readTag = zaman uyumsuz () => {
    bekle NfcManager.registerTagEvent();
  }

Yukarıdaki useEffect() Kancasında, olay dinleyicisi onDiscoverTag adlı bir olayı dinliyor. Kullanıcıların görmesi için bir UI mesajı biçimi ayarlamak için setAlertMessages() 'ı da kullanabilirsiniz. NFC etiketlerini algılama sürecini başlatmak için registerTagEvent() 'i ve iptal etmek için unregisterTagEvent() 'i kullanırız.

Cihazda NFC desteği varsa koşullu olarak bir düğme oluşturacağız, yoksa bir mesaj vereceğiz. Aşağıdaki kod, tıklandığında readTag() çağıracak düğme içindir:

 if (hasNfc === null) null döndürür;

  if (!hasNfc) {
    dönüş (
      <View style={styles.sectionContainer}>
        <Text>NFC desteklenmiyor</Text>
      </Görüntüle>
    )
  }

  dönüş (
    <SafeAreaView style={styles.sectionContainer}>
      <Text>Merhaba dünya</Text>
      <TouchableOpacity style={[styles.btn, style.btnScan]} onPress={readTag}>
        <Text style={{ color: "white" }}>Etiketi Tara</Text>
      </DokunabilirOpaklık>
      <TouchableOpacity style={[styles.btn, style.btnCancel]} onPress={cancelReadTag}>
        <Text style={{ color: "white" }}>Taramayı İptal Et</Text>
      </DokunabilirOpaklık>
    </SafeAreaView>
  );

Aşağıdaki resim, projeyi NFC taramasını desteklemeyen bir simülatörde göstermektedir:

Proje Simülatörü NFC Devre Dışı

Aşağıdaki ekran görüntüsü, projenin fiziksel bir cihazda nasıl görüneceğini gösterir:

Merhaba Dünya Proje Cihazı

Aşağıdaki resimdeki gibi etiketi tara düğmesine dokunduğunuzda, cihaz bir NFC etiketini okumaya hazır olacaktır:

Etiketi Tara Oku NFC Etiketini Tara

NFC etiketi nasıl yazılır

Şimdiye kadar, bir cihazın NFC etiketlerini destekleyip desteklemediğini nasıl kontrol edeceğimizi belirledik ve içinde depolanan bilgilere erişmek için bir NFC etiketinin nasıl okunacağını öğrendik. Şimdi, bir okuyucu bunu okuduğunda etikete yazdığımız bilgilere erişebilmeleri için bilgileri bir NFC etiketine nasıl kodlayacağımızı öğreneceğiz. Örnek olarak, LogRocket URL'sini kodlayacağız:

 const writeNFC = zaman uyumsuz() => {
    let sonuç = yanlış;

    denemek {
      NfcManager.requestTechnology(NfcTech.Ndef);

      const bayt = Ndef.encodeMessage([Ndef.uriRecord('https://blog.logrocket.com/')]);

      if (bayt) {
        NfcManager.ndefHandler'ı bekleyin
          .writeNdefMessage(bayt);
        sonuç = doğru;
      }
    } yakalama (eski) {
      konsol.warn(ex);
    } en sonunda {
      NfcManager.cancelTechnologyRequest();
    }

    dönüş sonucu;
  }

Yukarıdaki kodda, NfcManager.requestTechnology aracılığıyla belirli bir NFC teknolojisi talep ettik. Bizim durumumuzda bu, bir veri formatı olan Ndef teknolojisidir . Ardından yazmak istediğimiz URL'yi Ndef.encodeMessage kullanarak kodluyoruz ve writeNdefMessage(bytes) kullanarak yazıyoruz.

Şimdi, bir kullanıcı LogRocket blog URL'sini bir NFC etiketine yazmak istediğinde bu işlevi çağıracak bir düğme oluşturacağız:

 <TouchableOpacity style={[styles.btn, style.btnWrite]} onPress={writeNFC}>
        <Text style={{ color: "white" }}>Etiket Yaz</Text>
 </DokunabilirOpaklık>

Bu nedenle, düğmeye tıklandığında, NFC çekmecesi LogRocket URL'sini bir NFC etiketine kodlamaya hazırdır:

NFC Çekmecesi Kodlama URL'si

Çözüm

NFC teknolojisi, temassız ödeme, konserlerde bilet kullanımı ve mekan yeri check-in gibi günlük hayatımızın birçok alanında kullanılmaktadır.

Bu makalede, içindeki bilgilere erişmek veya kodlamak için bir NFC etiketinin nasıl okunacağını ve yazılacağını araştırdık. Bir URL'yi kolayca aktarmak için React Native ve iOS kullanarak örnek bir uygulama oluşturduk, ancak kendi projenizde NFC etiketlerini uygulamak için bu eğitimdeki bilgileri geliştirebilirsiniz. Umarım keyifle okumuşsunuzdur, sorularınız varsa yorum bırakmayı unutmayın. Mutlu kodlama!

React Native'de NFC etiketleri nasıl kullanılır yazısı ilk olarak LogRocket Blog'da çıktı.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

React Native'de NFC etiketleri nasıl kullanılır?