Turbo Native Modules — iOS Kurulumu

Turbo Native Module — iOS Kurulumu

Bir onceki yazida Turbo Native Modules yapisina giris yapmistik, ozelliklerini ve faydalarini incelemistik.

Bu yazida “Turbo Native Module” yapisini iOS tarafinda nasil hazirliyoruz inceleyecegiz. Oncelikle bu proje icin React Native 0.72 surumunu kullaniyoruz, ve adimlar sonraki surumlerde farklilik gosterebilir fakat farkliliklarin cok buyuk olmayacagini bekliyorum. Not: Ayrica “C++ Turbo Native Module” adinda bir native module yapisi da var fakat onun icin ayri bir iOS ve Android makale serisi olacak, bu makalede “Turbo Native Module” yapisi anlatiliyor, bu 2 yapi benzer ozelliklere sahip olsa da farkli amaclarla kullaniliyorlar.

Turbo Native Module yaratmak icin genel olarak izlenen adimlar sunlardir:

• JavaScript arayuz kodunun hazirlanmasi.
• Modulun codegen yardimi ile ara kodlari hazirlamasini saglayacak ayarlamalarin yapilmasi.
• Codegen ile uretilen ara kodlara uygun sekilde asil native kodlarin yazilmasi.

Not: Eger video sunumu ile anlatimi daha cok seviyorsaniz YouTube kanalinda Turbo Native Modules icin bir seri hazirladim

1. Klasorlerin yaratilmasi

• Bir tane ana klasor yaratiyoruz “RNTurboModuleDemo” adinda
• Bu klasor Turbo Native Module ve React Native projemizi barindiracak
• Not: Klasore ait dosya yolunda bosluk karakteri varsa enteresan sekilde scriptlerden bir tanesi hata veriyor! Bu yuzden bosluk karakteri icermemesine dikkat edin dosya yolunun.
• RNTurboModuleDemo klasoru icine gecip react-native init MyApp diyerek React Native projesini yaratiyoruz.
• RNTurboModuleDemo icinde iken bu ornek icin RTNCalculator klasorunu yaratiyoruz. RTN kisaltmasi React Native uzerinden turetilmis bir kisaltma yani bu modulun adi Calculator oluyor bu durumda.
• RTNCalculator kalsorune gecip android, ios ve js klasorleri yaratiyoruz

2. Javascript arayuz dosyasinin hazirlanmasi

Bu adimda Javascript uzerinden erisecegimiz native module ait metodlari ve bu metodlarin parametre ve geri donus tiplerini tanitiyoruz, bu sayede sonraki adimlarda gorecegimiz Codegen bizim icin native tarafta kullanilacak kodlari yaratabilecek

Javascript arayuz dosyasinin ozellikleri sunlardir

• Dosya adi Native<MODUL_ADI>.ts seklinde olmalidir, yani modul adi Calculator demistik bu durumda dosya adi NativeCalculator.ts olmali
• Bu dosya TurboModuleRegistrySpec tipinde bir nesne export etmeli

3. Modul Ayarlari

Bu noktada Codegen ve auto-link (yani kodlarin otomatik proje tarafindan gorulmesi) yapilarina yardimci olacak ayarlari yapiyoruz.

Bir tane package.json dosyasi olusturuyoruz RTNCalculator klasoru icinde (ios, android veya js klasorunde degil direkt RTNCalculator klasoru ici)

Bu dosyada kritik kisim codegenConfig kismi, digerleri genel aciklama tarzi ayarlar. Bu ayar dosyasi hem iOS hem de Android icin ortaktir.

codegenConfig

• name kisminda modulun adini veriyoruz ve Spec ile bitmesi oneriliyor bu durumda RTNCalculatorSpec seklinde oluyor name kismi
• type bu ayarladigimiz yapinin tipini veriyoruz, module ayarladigimiz icin modules degerini vermemiz gerekiyor
• jsSrcsDir Codegen araci tarafindan islenecek JS arayuz dosyasina ait goreceli (relative) dosya yolu. Yani RTNCalculator klasoru icinde hangi klasor icinde JS arayuz dosyasi.

android.javaPackageName Codegen tarafindan Android tarafinda kullanilacak paket adi (bu Javaya ozel package name olayidir). Bu yazidaki ayarlamalar icin onemli degildir fakat bu package.json hem iOS hem Android tarafinda ortak oldugu icin burada yer alacak.

podspec dosyasinin yaratilmasi

iOS tarafinda harici kutuphaneler pod yapisi ile kuruldugu icin bu modulumuz icin podspec olusturmamiz gerekiyor, rtn-calculator.podspec adindaki dosyayi RTNCalculator (yani ana klasor) klasoru icinde yaratiyoruz ve asagidaki gibi bir tanitim yapiyoruz.

Not: podspec dosyasi ile package.json dosyasi ayni klasorde olmalilar yani RTNCalculator ana klasoru icinde.

Podspec dosyasinda install_modules_dependencies cagrisina kadar yapilan islem package.json dosyasindan okunan bazi degerleri bu pod icin set edip module icin gerekli digger kutuphanelerin yuklenmesini saglayan install_modules_dependencies cagrisi yapilir. Turbo Native Module eski yapiyi da desteklemektedir ve ona uygun ekstra kutuphaneleri de sizin icin yukler.

4. Native kodlar

Bu noktada artik Javascript ile native kodlar arasindaki baglantiyi saglayan ara native kodlari yaratiyoruz.

Bu adim icin 2 kritik alt adim vardir,

• Codegen ile ara native kodlarin uretilmesi
• Uretilen native kodlara uygun sekilde calistirmak istedigimiz kendi native kodlarimizin yaratilmasi

Native ara kodlar uygulamamizi normalde build veya run ederken olusturuluyorlar ve neler uretilmis cok takilmiyoruz, burada gelistirme yaptigimiz icin olusturulan dosyalari incelememiz gerekecek kendi yazacagimiz native kodlari olusturmak icin.

4.1 Codegen calistirip ara kodlarin olusturulmasi

Asagidaki komutlar ile ara native kodlari yaratiyoruz.

cd MyApp
yarn add ../RTNCalculator
cd ..
node MyApp/node_modules/react-native/scripts/generate-codegen-artifacts.js \
  --path MyApp/ \
  --outputPath RTNCalculator/generated/

Bu komutlar sirasi ile sunlari yapmaktadir

• MyApp projesine geceriz
• Uzerinde calistiigimiz RTNCalculator modulunu projeye dahil eder
• Ana klasore donus yapariz
• MyApp projesine eklenmis olan generate-codegen-artifacts.js yazilimcigina –path ile React Native projesinin yolunu — outputPath ile iOS tarafina ait Codegen tarafindan uretilen ara natrive kodlarin koyulacagi yolu veriyoruz.

Kodu calistirdiktan sonra RTNCalculator icinde asagidaki gibi bir gorunum olusmasi gerekiyor

Bizim ilgilendigimiz kodlar generated/build/generated/ios/RTNCalculatorSpec klasoru icinde.

NOT: Eger bir revizyon takip sistemi kullaniyorsaniz generated klasorunu commit tarihcesini dahil etmeyin cunku surekli degisme potansiyeli var ve direkt oalrak ana kodlarimizin bir parcasi degil, her build ve run asamasinda node_modules/rtn-calculator altinda olusturuluyorlar zaten. Burada iceriklerini gorebilmek adina Codegenden olusturacagi araci native kodlari gecici olarak generated adindaki bir klasor icinde olusturmasini istedik.

4.2 Native kodlarimizin yaratilmasi

Bu noktada bizim yazmak istedigimiz native kodlar icin dosyalarimizi RTNCalculator/ios klasoru altinda yaratiyoruz.

1. RTNCalculator.h dosyasi C/C++ diline ait header dosyasidir ve degisken tanimlamalari ve import tanimlamalari icin kullanilir. Ana lojik burada yer almaz genel olarak
2. RTNCalculator.mm ana lojigimizin yer alacagi kaynak kod dosyasi

Header dosyasi icerigi sablonu genel olarak dokumanlardan buluyoruz, bu dosya icerigi kolay kolay degismese de sablonu akilda tutmak zordur o yuzden her zaman dokumanlara bakmakta fayda var gerekli oldugunda.

Ana lojik dosyasinda en kritik adim RCT_EXPORT_MODULE cagrisidir, bu cagri modulumuzun sisteme yuklenebilir hale gelmesine yardimci olmaktadir.

add metodunu dolduruyoruz, bu noktada parametre tipleri vs gibi sablonlari RTNCalculatorSpec.h dosyasindan alabiliriz ve zaten birebir ayni olmasi gerekiyor. getTurboModule metodu yazdigimiz Turbo Native Modul’e ait bir ornegi (instance) doner ve Javascript tarafi bu module ait metodlari cagirabilir hale gelir.

Son durumda asagidaki gibi bir klasor yapisi olusmus olmasi gerekiyor.

5. Turbo Native Modul’un projeye dahil edilmesi

Bu noktaya kadar iOS tarafina ait ayar dosyalarini yarattik, asil calistirmak istedigimiz kaynak kodlari yarattik ve modulumuzu proje dahil edip test etmeye hazir hale geldik.

Modulu projeye dahil etmek icin asagidaki komutlari calistiriyoruz

cd MyApp
yarn add ../RTNCalculator
cd ios
RCT_NEW_ARCH_ENABLED=1 bundle exec pod install

Bu komutlarin sonucunda projeye ait pod dosyalari yuklenecek ayrica RTNCalculator icinde bizim yarattigimiz kodlar node_modules/rtn-calculator paketi altina alinacaklar.

RCT_NEW_ARCH_ENABLED=1 environment degiskeni sayesinde yeni Fabric alt yapisi icin gerekli ekstra islemler gerceklesiyor.

Son adim Javascript kodunu duzenliyoruz ve yarattigimiz modulu cagiriyoruz!

MyApp projesinde App.tsx kodunu asagidaki gibi degistiriyoruz

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */
import React from 'react';
import {useState} from 'react';
import {
  SafeAreaView,
  StatusBar,
  Text,
  Button,
} from 'react-native';
import RTNCalculator from 'rtn-calculator/js/NativeCalculator';

const App: () => JSX.Element = () => {
  const [result, setResult] = useState<number | null>(null);
  return (
    <SafeAreaView>
      <StatusBar barStyle={'dark-content'} />
      <Text style={{marginLeft: 20, marginTop: 20}}>
        3+7={result ?? '??'}
      </Text>
      <Button
        title="Compute"
        onPress={async () => {
          const value = await RTNCalculator?.add(3, 7);
          setResult(value ?? null);
        }}
      />
    </SafeAreaView>
  );
};
export default App;

Bu noktadan sonra eger herhangi bir eksiklik yoksa

react-native run-ios dedigimiz zaman MyApp projesi ayaga kalkacak ve “Compute” butonuna bastigimizda Turbo Native Modul cagrilacak ve sonucu ekranda gosterecek!