React-Native ile QRCode Oluşturma ve Tarama

QR CODE NEDİR?

(Quick Response Code) Mobil cihazların kullanımının zamanla artmasıyla barkod sistemi dijital pazarlama yöntemi olarak kullanılmaya başlanmıştır. Japonya’da faaliyet gösteren ve aynı zamanda Toyota’nın yan kuruluşu olan Denso Wawe tarafından 2 Boyutlu barkod sistemi geliştirilmiştir. Bu QR sisteminin kod içeriğine metin, web sitesi, video, resim gibi veriler eklenebilir. Ayrıca bu QR kodlar telefonunuzda bulunan barkod okuyucusu ile okunabilir.

Bu yazımda React-Native kullanarak hem QR Kod oluşturmayı hem de QR Kod Okuyucu oluşturulması gerektiğini açıklamaya çalışacağım.

QR CODE NASIL OLUŞTURULUR?

Öncelikle projenizde QRCode kullanmak isterseniz React-Native son sürümüne sahip olmanız gerekmektedir.

ADIM 1 — > QRCode paketini projeye dahil etme

Yapmanız gereken ilk şey QRCode ihtiyacı olan paketleri projenize dahil etmelisiniz. Bu paketler SVG diğeri de QRCode paketleridir.

#Install the React-Native-Svg
npm install react-native-svg — save
or
yarn add react-native-svg
#Install the React-Native-QRCode
npm install react-native-qrcode-svg — save
or
yarn add react-native-qrcode-svg

Paket kurulumu bittikten sonra Ios klasörü içine bu paketleri terminal üzerinden pod olarak eklememiz gerekir.

cd ios
pod install

ADIM 2 → QRCode Paketini Proje İçinde Kullanma

Proje dizinine kontrol etmelisiniz. Eğer hala terminalde ios klasörü içinde kaldıysanız (cd .. ) komutu ile ana proje dizinine ulaşabilirsiniz. Projenizde QRCode hangi ( .js ) uzantılı dosyada kullanacak iseniz o dosyaya bu paketi import etmelisiniz.

import QRCode from ‘react-native-qrcode-svg’

QRCode içine istediğiniz medya verisini atabilirsiniz. Bu konuda React-Native bu paketi kolaylık sağlamaktadır. Diyelim ki https://www.google.com adresinin QRCode oluşturalım

<QRCode
   value={ ‘https://www.google.com’ } />

Bu şekilde uygulama cihazda test edildiğinde ekranda QRCode oluşmuş olacaktır. Denemek için kendi mobil cihazınızdaki QRCode okuyucu ile test edebilirsiniz.

ADIM 3 → QRCode Özel Stillendirme İşlemleri

QRCode oluştururken bazı özel stillendirmeler yapabiliriz. Bazı özellikler şunlardır :

<QRCode
 value={ ‘https://www.google.com’ } 
 size={150}. //boyutunu artırabiliriz. Default değeri 100’dür
 color={‘pink’}. //rengini değiştirebiliriz
 enableGradient={true}. //gradient renk tasarlamak için öncelikle bu     değeri true yapmalıyız
 linearGradient={[‘red’,’pink’,’white’] }. //istenilen renklerle kombin yapabiliriz.
/>

Daha fazla özelliklere için https://www.npmjs.com/package/react-native-qrcode-svg adresine bakabilirsiniz.

QR CODE SCANNER NASIL OLUŞTURULUR?

Oluşturulan QRCode kamera kullanarak taratmak ve QR içindeki veriye ulaşmak için React-Native’ de react-native-qrcode-scanner paketini kullanıyoruz. React-native-qrcode-scanner paketi Lockhan Wansbrough tarafından react-native-camera paketinin üzerine oluşturulmuştur. Bu paket ile cihazınızda bir barkod tarayıcısı oluşturmuş olursunuz.

ADIM 1 → QRCode Scanner paketini projeye dahil etme

Yapmanız gereken ilk şey QRCode Scanner ihtiyacı olan paketleri projenize dahil etmelisiniz. Bu paketler

#Install the React-Native-Camera
npm install react-native-camera — save
or
yarn add react-native-camera
#Install the React-Native-QRCode-Scanner
npm install react-native-qrcode-scanner — save
or
yarn add react-native-qrcode-scanner
#Install the React-Native-Permission
npm install react-native-permission — save
or
yarn add react-native-permission

ADIM 2 → Kamera izinlerini oluşturmak

Cihazlarda kamerayı kullanmak için hem ios hem de android de bazı izinleri vermemiz gerekmektedir.

IOS İZİNLERİ

İzinleri oluşturmak için projenizin ios klasörü altında bulunan _info.plist_** klasörünü öncelikle açmalısınız. Bu klasör iç kısmına aşağıdaki kodu yapıştırmalısınız

<key>NSCameraUsageDescription</key>
<string>YOUR TEXT</string>

Daha sonra yine projenizin ios klasörü altında bulunan _pod.file_** klasörünü açmalısınız.

Bu kısımda aşağıdaki kodu yazmalısınız

permissions_path = '../node_modules/react-native-permissions/ios'
pod ‘Permission-Camera’, :path => “#{permissions_path}/Camera”

Bu işlemler bittikten sonra terminalden aşağıdaki kodu yazarak izin işlemlerini tamamlayınız

cd ios
pod install

ANDROID İZİNLERİ

Android için android/app/src/main/AndroidManifest.xml dizinini takip edin ve aşağıdaki kodu Manifest’e eklemelisiniz

package="com.cameraexample">
<uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.CAMERA" />
+    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Ayrıca android/app/build.gradle dizininde ki aşağıdaki eklentiyi de yapmalısınız

defaultConfig {
applicationId "com.cameraexample"
minSdkVersion rootProject.ext.minSdkVersion
+        missingDimensionStrategy 'react-native-camera', 'general'
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"

ADIM 3 → QRCode Scanner Projede Kullanma

Projenizde QRCode Scanner hangi .js uzantılı dosyada kullanacak iseniz o dosyaya bu paketi import etmelisiniz.

import QRCodeScanner from 'react-native-qrcode-scanner';
onScanner = (e) => {
Linking.openURL(e.data)
}
render() {
return (
<View>
<QRCodeScanner
onRead={ () =>this.onScanner }
</View>
)}

Yukarıda görüldüğü gibi QRCode Scanner **onRead** kamera QR kodu algıladıktan sonra hangi işlemleri yapıcağınıza karar verdiğiniz bir parametredir. Örnek kodda görüldüğü gibi **onScanner** adında bir metodoluşturarak QR koddan dönen değeri yakalıyoruz.

Daha fazla QRCode Scanner ile alakalı özellikler için https://github.com/moaazsidat/react-native-qrcode-scanner bakmalısınız