Teydex React Native Dokümantasyonu

Genel Bakış

Bu doküman, Teydex React Native kütüphanesinin iOS ve Android platformlarında güvenli ve sorunsuz bir şekilde entegre edilmesi için gerekli tüm adımları, kullanım örneklerini ve platforma özgü teknik detayları kapsamlı bir şekilde sunar.

Gereksinimler

Teydex React Native kütüphanesini sorunsuz bir şekilde kullanabilmek için projenizin aşağıdaki minimum sürüm gereksinimlerini karşılaması gerekir:

Platform	Minimum Sürüm / Gereklilik
React Native	0.71.0
Android	minSdkVersion: 24
	compileSdkVersion: 34
	targetSdkVersion: 34
	kotlinVersion: 1.8.0
iOS	iOS 13.0
	Xcode 16.4 (derleme için zorunlu)

Not: Belirtilen minimum sürümlerin altındaki platformlarda kütüphanenin kurulumu veya çalışması garanti edilmemektedir. Özellikle iOS tarafında, projenin sağlıklı şekilde derlenebilmesi için Xcode 16.4 ve üzeri bir sürüm kullanılması gerekmektedir.

Android Ek Gereksinimler

1. Android Gradle Plugin ve Kotlin Sürümü

Projenizin android/build.gradle dosyasında aşağıdaki bağımlılıkların minimum belirtilen sürümlerde tanımlı olması gerekmektedir. Daha düşük sürümlerde, kütüphane ile ilgili derleme veya çalışma hatalarıyla karşılaşabilirsiniz.

buildscript {
    dependencies {
        classpath("com.android.tools.build:gradle:7.4.2") // Minimum desteklenen sürüm: 7.4.2
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.0" // Minimum desteklenen sürüm: 1.8.0
    }
}

Ayrıca, proje kök dizininde yer alan gradle/wrapper/gradle-wrapper.properties dosyasında aşağıdaki satırın bulunduğundan ve gradle sürümünüzün minimum 7.6 olduğundan emin olun:

distributionUrl=https\://services.gradle.org/distributions/gradle-7.6-all.zip

Kurulum

npm install kyc-react-native@0.1.0
# veya
yarn add kyc-react-native@0.1.0

Android

1. Gerekli Bağımlılıkların Eklenmesi

Kütüphanenin doğru şekilde çalışabilmesi için projenizin AndroidManifest.xml dosyasında aşağıdaki düzenlemeleri yapmanız gerekmektedir:

<manifest ...
 xmlns:tools="http://schemas.android.com/tools">
 <application ... 
 tools:replace="android:icon,android:roundIcon,android:label,android:allowBackup,android:name,android:theme">

android/app/build.gradle dosyasındaki dependencies bloğuna aşağıdaki satırları ekleyin:

dependencies {
    implementation "com.innovance:kyc:1.0.0"
}

Kütüphanenin uzaktan (remote) erişimle indirilebilmesi için projenizin android/build.gradle dosyasında aşağıdaki repository tanımlarının eksiksiz olarak yer aldığından emin olun.
Özellikle repository erişimi için gerekli kimlik bilgilerini doğru şekilde girmeniz gerekmektedir.

allprojects {
    repositories {
        maven {
            allowInsecureProtocol = true
            name = "GitLab"
            url = uri("<REPO_URL>")
            credentials(HttpHeaderCredentials) {
                name = "Private-Token"
                value = "<PRIVATE_TOKEN>"
            }
            authentication {
                header(HttpHeaderAuthentication)
            }
        }
    }
}

REPO_URL Size verilen url ile değiştirilmesi gerekmektedir.
PRIVATE_TOKEN alanını, kurumunuzun size sağladığı kişisel erişim anahtarıyla değiştirin.
allowInsecureProtocol = true ayarı, yalnızca güvenli ağlarda veya kurum içi özel sunucularda kullanılmalıdır.

IOS

KULLANIM

processKYC

Parametreler

Parametre	Tip	Required	Açıklama
clientToken	`string \| null`	true	KYC süreci için gerekli client token.
applicationId	`string \| null`	true	Uygulama için benzersiz kimlik (ID).
stepList	`StepItem[]`	true	KYC sürecinde takip edilecek adımların listesi.
baseUrl	`string`	true	API istekleri için kullanılacak temel URL (base URL).

Kullanıcının KYC (Kimlik Doğrulama) sürecini başlatmak ve adım adım yönetmek için kullanılır.
Belirtilen adım listesi ve parametrelerle işlemi başlatır ve süreci yönetir.

StepItem Tipi

StepItem her bir KYC adımını ve o adıma özel metin/opsiyonları tanımlar. Aşağıdaki adım türlerini içerir:

KYCStep.ID_CARD_FRONT
KYCStep.ID_CARD_BACK
KYCStep.HOLOGRAM
KYCStep.NFC
KYCStep.LIVENESS

Her adım şu parametreleri alabilir (opsiyonel olanlar belirtilmiştir):

Özellik	Tip	Required	Açıklama
stepType	`KYCStep` enum	true	KYC adımının tipi
infoTitle	`string`	false	Bilgilendirme başlığı
screenTitle	`string`	false	Ekran başlığı
descriptionText	`string`	false	Açıklama metni
buttonText	`string`	false	Buton metni
bullets	`string[]`	false	Madde madde açıklamalar
identifyTimeout	`number`	false	Kimlik adımı zaman aşımı süresi (ms)
imageName	`string`	false	İlgili görselin dosya adı
lottieFileName	`string`	false	İlgili lottie animasyon dosya adı

Kullanım Örneği

import { processKYC, KYCStep } from 'teydex-kyc';

const stepList = [
  { stepType: KYCStep.ID_CARD_FRONT, screenTitle: "Kimliğin Ön Yüzünü Tara" },
  { stepType: KYCStep.LIVENESS, screenTitle: "Canlılık Kontrolü", descriptionText: "Lütfen kameraya bakın." },
];

processKYC({
  clientToken: "abc123token",
  applicationId: "myAppId",
  stepList,
  baseUrl: "https://api.example.com",
})

Event Emitter Kullanımı

Teydex React Native kütüphanesi, KYC işlemleri sırasında meydana gelen olayları dinleyebilmeniz için bir EventEmitter arayüzü sağlar.
Bu yapı sayesinde, işlem sırasında oluşan başarı, hata veya ara durumlara kolayca müdahale edebilirsiniz. Olaylar dinlendiğinde, ilgili event adı ve event'e özgü payload ile birlikte tetiklenir.

Event Parametreleri ve Payload Tipleri

Aşağıda, desteklenen event isimleri ve bu eventlerde dönen payload tipleri detaylandırılmıştır:

Event İsmi	Açıklama	Payload Tipi	Payload Alanları
`KYC_Event`	KYC sürecinin herhangi bir anında tetiklenir	`KycEventPayload`	`type`, `eventName`, `eventDetail?`
`KYC_Error`	KYC sürecinde bir hata oluştuğunda tetiklenir	`KycErrorPayload`	`type`, `eventName`, `errorMessage?`
`KYC_Completion`	KYC işlemi başarıyla tamamlandığında tetiklenir	`KycCompletionPayload`	`type`, `eventName`, `result?`

Payload Alanları:

Alan	Tip	Required	Açıklama
type	`'event'`, `'error'`, `'completion'`	true	Olayın genel kategorisi
eventName	`'KYC_Event'`, `'KYC_Error'`, `'KYC_Completion'`	true	Olayın ismi
eventDetail	`string`	false	(Yalnızca `KYC_Event`) Ek açıklama/detay
errorMessage	`string`	false	(Yalnızca `KYC_Error`) Hata mesajı
result	`boolean`	false	(Yalnızca `KYC_Completion`) Sonuç

Kullanım Örneği

import { TeydexEventEmitter } from 'kyc-react-native';

// KYC sürecindeki herhangi bir olayı dinleyin
const kycEventListener = TeydexEventEmitter.addListener(
  'KYC_Event',
  (payload) => {
    console.log('KYC Event:', payload);
    // payload.eventDetail ile detay alınabilir
  }
);

// Hata olayını dinleyin
const kycErrorListener = TeydexEventEmitter.addListener(
  'KYC_Error',
  (payload) => {
    console.error('KYC Hatası:', payload.errorMessage);
  }
);

// KYC tamamlanınca dinleyin
const kycCompletionListener = TeydexEventEmitter.addListener(
  'KYC_Completion',
  (payload) => {
    if (payload.result) {
      console.log('KYC başarıyla tamamlandı.');
    } else {
      console.warn('KYC tamamlanamadı.');
    }
  }
);

// Component unmount veya cleanup sırasında dinleyicileri kaldırın
kycEventListener.remove();
kycErrorListener.remove();
kycCompletionListener.remove();

Adımlara Resim ve Lottie Eklenmesi

Uygulama adımlarına, kütüphane aracılığıyla özel bir görsel (imageName) veya Lottie animasyonu (lottieFileName) ekleyebilirsiniz.
Bunu yapmak için ilgili adımı tanımlarken gerekli parametreyi eklemeniz yeterlidir.

Bir adımda yalnızca imageName veya lottieFileName kullanılabilir. Her ikisini aynı anda tanımlamak uygulamanın hata vermesine neden olur. Sadece birini seçip kullanmalısınız.

Genel Kullanım

const stepList = [
  {
    stepType: KYCStep.ID_CARD_FRONT,
    imageName: "id_front.png"
  },
  // ... diğer adımlar
];

Android'de Görsel ve Lottie Dosyası Eklemek

Görsel Eklemek:
- Görsel dosyanızı android/app/src/main/res/drawable dizinine ekleyin.
- Örnek:
```
android/app/src/main/res/drawable/id_front.png
```
Lottie Dosyası Eklemek:
- .json uzantılı Lottie dosyanızı android/app/src/main/res/raw dizinine ekleyin.
- Örnek:
```
android/app/src/main/res/raw/hologram.json
```

Örnek Android klasör yapısı:

iOS'ta Görsel ve Lottie Dosyası Eklemek

Görsel Eklemek:
- Xcode’da projenizin Images.xcassets dizinine görsel dosyanızı ekleyin.
- Dosya adı örneği:
```
id_front.png
```
Lottie Dosyası Eklemek:
- .json uzantılı Lottie dosyanızı, Xcode üzerinden projenize (ana dizine) ekleyin.
- Ekledikten sonra, dosyanın hedef üyeliğine (Target Membership) dahil edildiğinden emin olun.

Örnek iOS klasör yapısı:

Expo ile Kurulum

Bu bölümde, Teydex KYC React Native kütüphanesinin bir Expo projesine nasıl entegre edileceği adım adım anlatılmaktadır.

Not:
Teydex KYC SDK, native modül gereksinimi nedeniyle Expo Managed Workflow’da doğrudan kullanılamaz. Kurulum için minimum Expo SDK 48 ve üstü gereklidir. Projenizde henüz android/ ve ios/ klasörleri yoksa, bunları oluşturmak için aşağıdaki adımları izleyin.

1. Expo Projenizde Native Klasörlerin Oluşturulması

npx expo prebuild

Ekstra Expo Ayarları ve New Architecture Desteği

Not:
Eğer Expo projenizde React Native New Architecture (TurboModules/Fabric) desteği kullanmak istiyorsanız,
NativeKycReactNativeSpec dosyasının codegen ile otomatik olarak üretilmesi gerekir.
Ancak Expo projelerinde bu dosyanın codegen işlemi şu anda otomatik olarak desteklenmemektedir.

Bu nedenle, new architecture (TurboModules/Fabric) ile devam etmek isteyen geliştiricilerin,
NativeKycReactNativeSpec dosyasını manuel olarak projelerine eklemeleri ve yapılandırmaları gerekmektedir.

Özetle:

New Architecture aktif ise, gerekli codegen dosyalarını manuel eklemeniz şarttır.

Standart (legacy) architecture kullanıyorsanız, ekstra bir işleme gerek yoktur.

Daha fazla bilgi ve adım adım kurulum için React Native Codegen Dokümantasyonu ve resmi Expo belgelerine göz atabilirsiniz.

Gerekli Konfigürasyonlar

KYC paketini projeye kurduktan sonra, Expo uygulamanızın kök dizinindeki app.json veya app.config.ts dosyasına aşağıdaki eklentiyi (plugin) tanımlamanız gerekmektedir:

app.json için

{
  "expo": {
    // ...
    "plugins": [
      ["kyc-react-native"]
    ]
  }
}

app.config.ts için

module.exports = ({ config }: { config: ExpoConfig }) => {
  ... rest of your app config 
  plugins: [
      ["kyc-react-native"],
    ],
};

Native Dosyaların Güncellenmesi

Yukarıdaki ayarları tamamladıktan sonra, yapılan değişikliklerin native (Android/iOS) projelerine eksiksiz uygulanabilmesi için aşağıdaki komutu çalıştırmanız gerekmektedir:

npx expo prebuild --clean

Teydex React Native Dokümantasyonu

Genel Bakış​

Gereksinimler​

Android Ek Gereksinimler​

1. Android Gradle Plugin ve Kotlin Sürümü​

Kurulum​

Android​

1. Gerekli Bağımlılıkların Eklenmesi​

IOS​

KULLANIM​

processKYC​

Parametreler​

StepItem Tipi​

Kullanım Örneği​

Event Emitter Kullanımı​

Event Parametreleri ve Payload Tipleri​

Kullanım Örneği​

Adımlara Resim ve Lottie Eklenmesi​

Genel Kullanım​

Android'de Görsel ve Lottie Dosyası Eklemek​

iOS'ta Görsel ve Lottie Dosyası Eklemek​

Expo ile Kurulum​

1. Expo Projenizde Native Klasörlerin Oluşturulması​

Ekstra Expo Ayarları ve New Architecture Desteği​

Gerekli Konfigürasyonlar​

app.json için​

app.config.ts için​

Native Dosyaların Güncellenmesi​

Genel Bakış

Gereksinimler

Android Ek Gereksinimler

1. Android Gradle Plugin ve Kotlin Sürümü

Kurulum

Android

1. Gerekli Bağımlılıkların Eklenmesi

IOS

KULLANIM

processKYC

Parametreler

StepItem Tipi

Kullanım Örneği

Event Emitter Kullanımı

Event Parametreleri ve Payload Tipleri

Kullanım Örneği

Adımlara Resim ve Lottie Eklenmesi

Genel Kullanım

Android'de Görsel ve Lottie Dosyası Eklemek

iOS'ta Görsel ve Lottie Dosyası Eklemek

Expo ile Kurulum

1. Expo Projenizde Native Klasörlerin Oluşturulması

Ekstra Expo Ayarları ve New Architecture Desteği

Gerekli Konfigürasyonlar

app.json için

app.config.ts için

Native Dosyaların Güncellenmesi