React Native macOS Kurulumu

Güncelleme: 11/2021

React Native’in çileli Windows kurulumuna burada değinmiştik. Ona göre nispeten daha kolay olan macOS kurulumuna değinip basitçe işlemlerimizi gerçekleştirelim.

macOS ortamında bildiğiniz üzere hem Android hem iOS geliştirmeleri yapabiliyoruz. Bu sebeple önce her ortam için gerekli iki paketi kurup ardından iki farklı kurulum gerçekleştireceğiz.

Yazı aslında bir nevi ana yükleme dökümanını anlatacak, her daim yükleme adımları için orayı temel alabilirsiniz.

Başlayalım 💪

Genel Kurulum (nodeJS & watchman)

nodeJS projelerimizin çalışabilmesi için bir nevi derleyici görevi görüyor. Projeminizin Android ve iOS platformlarında derlenebilmesi için ilgili iletişim ağını ve kaynak JS kodlarının derlenebilmesi için nodeJS’e ihtiyacımız bulunmakta.

Watchman ise dosya sisteminde değişiklik imkanı sunan bir paket. Geliştirme sürecinde bize hız kazandıracaktır.

Bunları Homebrew aracılığı ile yükleyeceğiz. Homebrew macOS sisteminde paket yükleme imkanı sunan çok kullanışlı bir araç. Eğer yüklü değil ise terminale şu kodu giriyoruz;

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Ana sayfasından da mevcut yükleme linki, oradan teyit edebilirsiniz.

Yükleme uzun sürebiliyor, herhangi bir çıktı verene kadar bekleyelim ve tamamlandıktan sonra ise sırasıyla;

brew install node
brew install watchman

komutlarını girelim ve yüklemelerini yapalım.

İşlemlerinden sonra Android ve iOS ortamı için ortak kullanılacak paketlerimizin yüklemelerini tamamlamış oluyoruz. Artık ortamlara geçebiliriz.

iOS (Xcode, CocoaPods)

iOS geliştirmeleri için bize gerekli olan uygulama Xcode. Kendisini direkt olarak AppStore’dan indirip kurabiliriz. Eğer sizde zaten mevcutsa güncel olduğundan emin olun. Kurulumdan sonra kendi hesabınız ile giriş yapabilirsiniz.

Command Line Tools

Giriş yaptıktan sonra terminalden Xcode yönetimini sağlıklı bir şekilde yapabilmek için CLT’nin güncel olduğundan emin olmamız gerekiyor. Bunun için Xcode’u açtıktan sonra sol üst taraftan Xcode > Preferences seçimini yaparak Locations sekmesine gelelim ve Command Line Tools seçiminin en son olduğundan emin olalım.

iOS Simülatör

Aynı sekmeden çıkış yapmadan bir sola kayalım ve Components sekmesinden güncel simülatörlerden birini indirelim. Hepsini indirmeye kalkmayın yoksa çok başınız ağrır.

Bende mevcut olarak bu simülatörler mevcut.

CocoaPods

CocoaPods iOS platformunda yüklenen paketlerin kütüphane bağımlılıklarını bizim için halleden Ruby ile yazılmış bir eklenti. Ruby macOS sistemimizde varsayılan olarak bulunmakta.

React Native projelerimizde native bir modül kullanan bir paket eklediğimizde (kamera, grafik ya da cihaz bilgisine erişim gibi) iOS tarafında bu paketlerin derlenebilmesi, native tarafta tanınıp çağırılabilmesi için projeye bağlanabilmesi gerekir. Bu normalde uzun bir süreçtir fakat CocoaPods bizim yerimize bu işlemleri gerçekleştiriyor. Bunun için kuruluma kendisini de ekliyoruz.

Terminalden;

sudo gem install cocoapods

diyelim ve kurulumu yapalım.

iOS kurulumumuz bu noktada tamamlanıyor.

Android (Android Studio, JDK, Genymotion)

JDK

İlk olarak Java Development Kit’imizi kuralım. “brew” kullanarak kolayca kurabiliyoruz kendisini.

brew cask install adoptopenjdk/openjdk/adoptopenjdk8

Eğer sizde zaten yüklüyse sürümünün 8 ya da daha yeni olduğundan emin olun. Yükleme işlemi vakit alıcı olabiliyor, bekleyelim.

Android Studio

Android tarafında geliştirme yapmak için gereken programımız ise Android Studio. Kendilerini resmi sitesinden indirip kurabiliriz.

Kurulum adımları önemli.

1. Android Studio IDE

Açılan pencerede yükleme tipini Custom seçiyoruz ve aşağıdaki maddelerin seçili olduğundan emin olalım.

• Android SDK
• Android SDK Platform
• Android Virtual Device

Eğer yukarıdaki maddeler seçilemiyorsa sizde direkt olarak yüklenecek demektir, sorun yok. Yükleme tamamlanınca da bizi hoşgeldin ekranı karşılayacak, geçip ilerleyelim.

2. Android SDK

Android platformuna geliştirme yapabilmemiz için SDK’ımızı ve ilgili paketleri yüklememiz gerek.

Android Studio’yu başlattığınızda sizi karşılayan pencerede orta kısımdan SDK Manager seçeneğini seçelim.

Eğer bu pencere sizi karşılamazsa Android Studio > Preferences > Appearance & Behavior > System Settings > Android SDK yolundan iligili ekrana erişebilirsiniz.

React Native Android geliştirmesi için Android 10 (Q) sürümünü istemekte. SDK 29'u seçerek ilgili yüklemeleri gerçekleştireceğiz. Öncelikle açılan pencereden Show Package Details kutucuğunu işaretleyelim ve ardından şu paketleri yükleyelim;

• Android SDK Platform 29
• Intel x86 Atom_64 System Image ya da Google APIs Intel x86 Atom System Image

Seçimi yaptıktan sonra bir yan sekmedeki SDK Tools’a gelelim ve orada da Show Package Details kutucuğunu işaretleyelim. Android SDK Build-Tools sekmesini genişletelim ve oradan 29.0.2 versiyonunu ve Android SDK Command-line Tools (latest) seçimini yapalım.

Apply seçimini yapıp yüklemeleri yapalım. Bu işlem uzun sürecektir.

3. Ortam Değişkenleri

Android geliştirmelerini ve cihaz yönetimini terminal üzerinden yapabilmemiz için ilgili komut yollarını sistemimize tanıtmamız gerekmekte. Bu noktada hangi terminali kullandığınız önemli. macOS sisteminde default olarak zsh ya da bash terminalini seçebiliyorsunuz. Tabi isterseniz kendiniz fish (ki tavsiye ettiğim bir shelldir) gibi custom sheller eklemiş olabilirsiniz. Artık hangisini kullanıyorsanız o shell’in profile dosyasına environment variable değerlerini girmeniz gerekte.

Mevcut shell ismini terminali açtığınızda en üstte bulabilirisniz. Mesela bende şu anda mevcut olan terminal zsh;

Android ile alakalı terminalin ihtiyaç duyduğu yol uzantılarını terminalin config dosyasına eklememiz gerekiyor. Bu config dosyalarını terminalin ihtiyaç duyduğu global değişkenler olarak düşünebilirsiniz.

Şimdi Finder > Go > Computer > Users > kullanıcı adınız konumunda bulunan

• bash kullanıyorsanuz .bashprofile ya da .bashrc
• zsh kullanıyorsanuz .zprofile ya da .zshrc

dosyasına ilgili pathleri ekleyelim.

Eğer ilgili dizinde .profile dosyanız yoksa kendiniz oluşturmalısınız. Terminalden touch komutu ile istediğiniz dosyayı yaratabilirsiniz.

Örneğin zsh kullanıyorsanız profile dosyasısı için ilgili dizine gelip;

$ touch .zprofile

Komutunu çalıştırmak yeterli olacaktır.

export ANDROID_HOME=$HOME/Library/Android/sdk 
export PATH=$PATH:$ANDROID_HOME/emulator 
export PATH=$PATH:$ANDROID_HOME/tools 
export PATH=$PATH:$ANDROID_HOME/tools/bin 
export PATH=$PATH:$ANDROID_HOME/platform-tools

İlk satırda bulunan adresin Android SDK yolu olduğundan emin olmalıyız.

Bunun için yine SDK Manager penceresinde en üst kısımda yer alan Android SDK Location kısmında ilgili yolu bulabiliriz.

“/Users/ kullanıcı adı” yolu $HOME değişkenine karşılık gelmekte. Eğer geri kalan uzantı farklı ise .profile dosyasında güncelleyebilirsiniz. Büyük ihtimalle bir farklılık yoktur.

Terminalin config dosyasında değişiklikleri yaptıktan sonra terminali kapatıp (Dock sağ tık Quit ile) açmanız gerekte. Açılınca echo $ANDROID_HOME ve echo $PATH komutlarıyla değişikliklerin tamamlandığını ve pathlerin eklendiğini teyit edebilirsiniz.

Çıktı aşağı yukarı şu şekilde olacaktır;

4. Genymotion (opsiyonel)

Bu adıma geçmeden önce söyleyeyim, her daim gerçek Android cihazı ile çalışmayı tercih edin. Similatörler ve emülatörler ikinci tercihiniz olsun çünkü gerçek cihaz hem deneyim hem de test açısından çok daha iyi bir sonuç verecektir. Eğer gerçek bir Android cihazınız var ise bilgisayarınıza bağlayıp yarn android diyebilirsiniz.

Genymotion bir Android emülatörü ve biz geliştirme aşamasında Android Studio’nun emülatörü yerine Genymotion kullanacağız. Çünkü hem Android Studio çok hantal ve yavaş çalışan bir similatör sistemine sahip. Ek olarak hem ADB similatörü hem de NodeJS Server’ın çalışması sistemimizi çok zorlayacaktır. Bunu istemeyiz.

Genymotion’un kendi sitesinde bir hesap açalım ve indirme sayfasından masaüstü uygulamasını indirerek giriş yapalım.

Genymotion VirtualBox’a ihtiyaç duyar. Eğer yüklü değilse buraya gidip OS X hosts linkinden indirebilirsiniz. Bulamazsanız buraya tıklayıp indirebilirsiniz.

Giriş yaptıktan sonra sağ üstte bulunan artı seçeneğini tıklayalım ve soldaki menüden Android API filtresini 29 seçelim.

Buradaki cihazlardan herhangi birini seçelim ve yükleyelim.

Genymotion’un hem React Native üzerinde derlenebilmesi hem de daha efektif çalışabilmesi için Android Studio’nun SDK’ları ile eşlememiz gerecektir. Bunun için Genymotion > Preferences > ADB seçeneğini daha önceki adımlarda kullandığımız SDK yolunu girelim. Onay verdiğinden emin olalım.

Bu adımı da tamamlandıktan sonra yüklediğimiz cihazımızı çalıştırıp herhangi bir sorun olmadığını kontrol edelim.

Cihazımız şu noktada sistemimize bağlandı ve bunun kontrolünü adb komutları ile görebiliriz. Terminalden “adb devices” komutunu girelim ve emülatörümüzün bağlandığından emin olalım.

Eğer gerçek bir Android cihaz bağlarsak da aynı şekilde fakat IP yerine cihazın kendisi ID olacak şekilde listemizi görüntüleyebiliriz.

React Native’de Android derlemesi alırken önce emülatörümüzü çalıştıracağız, unutmayın.

Android kurulumumuz bu noktada tamamlanıyor.

Yeni Proje

Her iki platformu da tamamladıktan sonra artık ilk projemizi oluşturabiliriz. Bunun için proje oluşturacağımız konuma gidip;

npx react-native init myFirstProject

komutunu girelim ve ilk projemizi oluşturalım. İlk yükleme vakit alıcı olabilir, bekleyelim.

Ve projemiz hazır!

Terminal çıktımızda yazdığı üzere hangi platformda derleme almak istiyorsak o komutu girerek projemizi çalıştırabiliriz. İkisini birden başlatmak zorunda değilsiniz illa ki, birini seçip çalıştırabilirsiniz projenizi.

npm run ios
npm run android

npm’e alternatif olarak yarn (tavsiye ederim) kullanıyorsanız da;

yarn ios
yarn android

komutlarından birini girerek ve projenizi çalıştırabilirsiniz.

Ve yeni projemiz hem Android hem iOS platformunda hazır bir şekilde bizi bekliyor.

Similatörlerin arasındaki terminal ayağa kalkan NodeJS server’ıdır. Facebook tarafından React Native için özel olarak geliştirilmiştir ve ismi Metro Bundler’dır. Yazının başında bahsettiğimiz gibi kodlarınızı ilgili platformlara taşıyan NodeJS server’idir ve geliştirme yapacağınız sürece kapatmamanız gerekir. Kapatırsanız similatörlerde “Cannot connect Metro server” hatası alırsınız çünkü development sistemiyle bağı koparmış olursunuz. Dolayısıyla kaydettiğinizde kodlarınız canlı olarak cihazlara gönderilmez ya da cihazları yenilediğinizde değişiklikleri göremezsiniz. JS çıktıları Chrome Debugger ya da Flipper açılmadığı sürece bu açılan terminale düşecektir.

Alternatif olarak text editörünüzde bütünleşik terminaliniz varsa projenizi açtığınız zaman terminalinizde npm run start ya da yarn start diyerek ilgili server’ı ayağa kaldırıp geliştirme yapabilirsiniz. Yazdığınız loglar direkt olarak editör terminalinden daha rahat takip edilebilir.

Artık kod zamanı! 💻

NOT: Android uygulamamızı çalıştırmak için önce Genymotion emülatörümüzü başlatıp daha sonra run-android komutumuzu girelim. Yoksa default olarak Android Studio’nun emülatörünü başlatacaktır.