Expo Go Yetmez: React Native Prebuild ile Agora Video Call Entegrasyonunun Gerçek Yolu- Bölüm 1
React Native projelerinde gerçek zamanlı ses ve video görüşmeleri eklemek istediğimizde, akla gelen ilk ve en güçlü çözümlerden biri Agora’dır. Ancak, geliştirme sürecine Expo ile başladıysanız ve özellikle “Expo Go” uygulamasını kullanıyorsanız, Agora gibi native modüllere ihtiyaç duyan kütüphaneleri entegre etmeye çalıştığınızda işler biraz karmaşıklaşabilir.
Bu yazıda, kendi projemde Agora entegrasyonu sırasında yaşadığım farklı denemelere, başarılı bir prebuild sürecine ve nihayetinde çalışan bir video görüşmesi uygulamasına uzanan yolculuğumu, karşılaştığım hatalar ve çözümleriyle birlikte adım adım anlatacağım.
Eğer siz de Expo projenizde Agora kullanmaya çalışırken native engellere takıldıysanız, doğru yerdesiniz.
İlk Deneme: Expo Go ve Hüsran
İlk adımda projeme Agora paketlerini ekledim ve Expo Go üzerinde çalıştırmayı denedim. Sonuç tahmin edilebilir bir hataydı: Podfile bulunamadı. (Ekran görüntülerini kaybettiğim için maalesef buraya ekleyemiyorum)
Agora SDK’sı, iOS ve Android tarafında native kod bağlantılarına ihtiyaç duyar. Expo Go uygulaması ise önceden derlenmiş bir kapsayıcıdır ve içine sonradan özel native kod (CocoaPods aracılığıyla) eklenmesine izin vermez. Bu noktada, projenin native klasörlerine (android ve ios) erişmemiz gerektiği netleşti.
Bu durum, beni alternatif çözüm arayışlarına itti.
Alternatif Bir Yaklaşım: Saf React Native CLI Deneyimi ve Zorlukları
Expo Go ile yaşanan tıkanıklığın ardından, farklı bir yol haritası daha denedim: Sıfırdan, Expo bağımlılığı olmayan saf (bare) bir React Native CLI projesi oluşturmak ve Agora’yı bu proje üzerine inşa etmek.
Ancak, Expo gibi bir framework’ün sağladığı soyutlama katmanı olmadan doğrudan React Native CLI ile çalışmak, özellikle başlangıç konfigürasyonları aşamasında oldukça yıpratıcı bir deneyime dönüştü. Bu yöntemi tercih etmememin temel nedenlerini şöyle sıralayabilirim:
1. Başlangıç Stabilite Sorunları: Standart npx @react-native-community/cli@latest init AwesomeProject komutu ile oluşturduğum, henüz üçüncü parti hiçbir kütüphane içermeyen “boş” (blank) proje dahi ilk derlemede hata vererek çöktü. Temel bir kurulumun bile ek hata ayıklama eforu gerektirmesi, projenin ilerleyen aşamaları için güven kırıcıydı.
2. Gerçek Cihaz Testlerinde Apple’ın Sebep Olduğu Bürokratik Engeller: Agora gibi kamera ve mikrofon donanımlarını yoğun kullanan SDK’ların sağlıklı testi için simülatörler yetersiz kalır ve gerçek cihaz kullanımı şarttır. Expo ekosisteminde bir QR kod okutarak veya hesap bağlantısıyla saniyeler içinde sağladığımız bu erişim, saf CLI tarafında sancılı bir sürece dönüşmektedir.
Özellikle macOS ortamında iOS cihaz testi için; öncelikle projenin Xcode üzerinde hatasız derlendiğinden emin olmanız, ardından geçerli bir Apple Geliştirici Hesabı (kişisel veya kurumsal) ile imzalama (signing) yapılandırmalarını yapmanız gerekir. Bu süreç başarıyla tamamlansa bile — ki bu aşamada pek çok provizyon hatasıyla karşılaşmak olasıdır — cihazı fiziksel olarak USB ile bilgisayara bağlama zorunluluğu modern geliştirme standartlarının gerisindedir.
3. Cihaz Güvenlik Yapılandırmaları: Fiziksel bağlantı sağlansa dahi süreç tamamlanmayabilir. Geliştirme yapabilmek için hedef iOS cihaz üzerinde “Geliştirici Modu”nun aktif edilmesi ve bağlanan bilgisayara güvenilmesi gibi güvenlik ayarlarının manuel olarak değiştirilmesi gerekebilir. Bu durum, geliştirme pratikliği açısından önemli bir bariyer oluşturmaktadır.
4. Metro Bundler ve Konfigürasyon Kırılganlığı: Native projeyi derlemek ve hedeflediğim simülatör üzerinde çalıştırabilmek için aşağıdaki gibi uzun ve spesifik komut setlerine ihtiyaç duydum:
react-native run-ios — simulator=”iPhone 16" — mode Debug
Bu tip temel hataları aşmak için bile Stack Overflow gibi topluluk kaynaklarındaki geçici çözümlere (workarounds) başvurmak zorunda kalmak, geliştirme hızını ciddi oranda düşürdü.
Önemli Simülatör Notu: Bu süreçte simülatör versiyonlarının da önemli olduğunu fark ettim. Benim ortamımda iPhone 15 Pro simülatörü sorun çıkarırken, daha güncel olan iPhone 16 (iOS 18.3 üstü) sorunsuz çalıştı. Eğer garip hatalar alırsanız, simülatörlerinizi ve Xcode’unuzu güncellemeyi deneyin.
Sonuç olarak, Expo’nun başarıyla soyutladığı bu karmaşık native konfigürasyon, cihaz yönetimi ve sertifika süreçleriyle manuel olarak uğraşmak, projenin ana odağından uzaklaşmama neden oldu ve beni tekrar, daha kontrollü bir geçiş sunan Expo Prebuild yöntemine yönlendirdi.
Başarılı Yöntem ✨: Expo Prebuild ve Modern Yaklaşım
Expo Go ve saf React Native CLI deneyimlerindeki zorlukların ardından, projemde native klasörleri oluşturmak için npx expo prebuild komutunu kullanmaya karar verdim. Ancak burada çok önemli bir tecrübe edindim: İşlem sırası hayati önem taşıyor.
Yanlış Yöntem:
İlk denememde, Agora paketleri projede yüklüyken doğrudan prebuild komutunu çalıştırdım. Bu durum çeşitli yapılandırma hatalarına yol açtı. Native dosyalar oluşturulurken mevcut paketlerle çakışmalar yaşandı.
Doğru Yöntem (Altın Kural):
Hataları görünce tüm değişiklikleri geri aldım ve aşağıdaki temiz kurulum adımlarını izledim. Bu sıralama, sorunsuz bir geçişin anahtarıdır:
Get Ruveydakayabasi’s stories in your inbox
Join Medium for free to get updates from this writer.
1-Önce Temizlik: Projedeki mevcut paket uyuşmazlıklarını giderdim ve henüz Agora’yı yüklemeden, projenin en stabil halinde olduğundan emin oldum.
2-Prebuild İşlemi: Temiz proje üzerinde npx expo prebuild komutunu çalıştırarak android ve ios klasörlerinin hatasız bir şekilde oluşmasını sağladım.
3-Projeyi Ayağa Kaldırmak: Native klasörler oluştuktan sonra, henüz Agora yokken projeyi bir kez derleyip (build alıp) çalıştığından emin oldum.
4-Agora Kurulumu: Projenin native olarak çalıştığını teyit ettikten sonra, Agora paketlerini (yarn veya npm ile) projeye dahil ettim. (Ben hem yarn ile hem npm ile kurulum sağladım)
Not: Agora kurulumundan sonra cd ios && pod install komutunu çalıştırmanız gerekebilir.
Projeyi Çalıştırmak: Modern Expo Komutları (Önerilen)
Artık elimizde “Managed Workflow”dan çıkmış, native kod içeren bir proje var. Prebuild almış olsanız bile Expo CLI’ın gücünden faydalanmaya devam edebilirsiniz. Agora’yı kurduktan sonra klasik npx expo start komutu kullanırsanız yine hata alabilirsiniz. Burada artık ios ve android için ayrı komutlar kullanarak projeyi çalıştırmanız gerekiyor .Ben projeyi hangi cihazda test etmek istediysem ona özel komutlarla başlattım:
npx expo run:ios
npx expo run:android
Bu komut harika bir şekilde çalışıyor çünkü tıpkı CLI gibi davranarak native projeyi derliyor, gerekli pod yüklemelerini otomatik yapıyor ve uygulamayı simülatöre gönderiyor. Eğer sadece expo start komutu ile çalıştırmaya çalışırsanız, pod install hatası alabilirsiniz. Android için APK çıktısı aldığımda da sorunsuz çalıştığını gördüm.
Karşılaşılan Sorunlar ve Çözümleri
Hata: “No bundle URL present” ve Uzun Build Süreleri
Sebep: Bu sorun genellikle Node Version Manager (NVM) kullanıldığında ortaya çıkıyor. Eğer birden fazla Node versiyonunuz varsa ve varsayılan (default) Node versiyonunuz, projeyi çalıştırdığınız terminaldeki versiyonla uyuşmuyorsa, React Native CLI yeni açtığı Metro Bundler terminalinde doğru yolu bulamıyor.
Çözüm: Kullandığınız Node versiyonunu NVM üzerinde varsayılan olarak ayarlamaktır. Örneğin Node v18 kullanıyorsanız:
# Kullandığınız versiyonu varsayılan yapın
nvm alias default 18
# Ardından yeni bir terminal açıp projeyi tekrar çalıştırın
Bu işlemden sonra Metro Bundler doğru şekilde tetiklendi ve uygulama sorunsuz bir şekilde ayağa kalktı.
Sonuç
React Native ve Expo ile Agora entegrasyonu, başlangıçta korkutucu görünse de doğru adımlar izlendiğinde oldukça yönetilebilir bir süreçtir.
Buradaki en önemli çıkarım; native modül gerektiren işlerde Expo Go’dan vazgeçip prebuild sürecini doğru zamanda ve temiz bir projede uygulamaktır. Native dünyaya geçtikten sonra npx expo run:ios/android komutları, geliştirme deneyimini Expo konforunda tutmaya devam ediyor.
Umarım bu tecrübe aktarımı, benzer sorunlar yaşayan geliştiriciler için yol gösterici olur. Sonraki bölümde Agora entegrasyonuyla ilgili daha detaylı bir anlatım olacak. Sorusu olanlar bana her zaman ulaşabilir. İyi kodlamalar!
