Hızlı Başlangıç: React Native ile Mobil Uygulama Geliştirme

Merhabalar, bu yazıda mobil uygulama geliştirme alanında popüler bir framework olan React Native hakkında genel bilgilerden bahsedeceğim.

Teknolojinin hızla evrildiği bu çağda, mobil uygulamalar hayatımızın ayrılmaz bir parçası haline geldi. Kullanıcıların hız, kullanılabilirlik ve özelleştirme taleplerine, geliştiricilerin hızla cevap verebilmesi kritik bir öneme sahip. İşte tam da bu noktada, React Native, hem iOS hem de Android platformlarında çalışabilen, hızlı ve esnek bir mobil uygulama geliştirme çözümü sunuyor.

React Native, Meta Platforms, Inc. tarafından oluşturulan açık kaynaklı bir UI yazılım çerçevesidir. Geliştiricilerin React çerçevesini birlikte kullanmasını sağlayarak Android, Android TV, iOS, macOS, tvOS, Web, Windows ve UWP için uygulamalar geliştirmek için kullanılır.

Uygulamanın MacOS ve Windows İçin Kurulumu

React Native kullanmaya başlamak için öncelikle geliştirme ortamınızı kurmanız gerekmektedir. İşte adım adım kurulum rehberi:

1. Source Code Editor Kurulumu (Önerilen: Visual Studio Code)

• Tarayıcınızı açın ve Visual Studio Code İndirme Sayfasına gidin.

• İndirme Seçeneklerini Seçin: Eğer Windows kullanıcısıysanız, “Windows” seçeneğine tıklayarak Windows sürümünü indirin. Eğer macOS kullanıcısıysanız, “macOS” seçeneğine tıklayarak macOS sürümünü indirin.
• İndirilen Dosyayı Çalıştırın: İndirdiğiniz kurulum dosyasını açın. Windows’ta bu genellikle “VSCodeSetup.exe” veya benzer bir ad olacaktır. macOS’ta DMG dosyasını açın ve uygulamayı sürükleyip bırakarak “Uygulamalar” klasörüne taşıyın.

2. Node.js Kurulumu:

React Native projesi oluşturmak ve yönetmek için Node.js’in en son sürümünü kurmanız gerekmektedir. Node.js’in resmi web sitesinden indirip kurabilirsiniz.

Node.js kurulumundan sonra React Native resmi web sitesinden Environment Setup sekmesine giderek kurulum işlemlerimize oradan devam edebilirsiniz. Bu adımda karşımıza iki seçenek çıkıyor.
Expo CLI ve React Native CLI, burada bulunan CLI ifadesi (command line interface) komut satırı arayüzünü temsil ediyor.

Peki bu iki geliştirme aracının farklılıkları nelerdir?
Expo CLI ve React Native CLI, React Native tabanlı mobil uygulama geliştirmek için kullanılan iki popüler araçtır. Her ikisi de farklı yaklaşımlar ve özellikler sunarlar. Expo CLI ve React Native CLI arasındaki temel farklılıklar:

1. Geliştirme Ortamı ve Kolaylık:

• Expo: Expo, geliştirme sürecini hızlandırmak için kullanıcı dostu bir platform sunar. Hızlı bir şekilde projeler oluşturabilir ve bunları kolayca paylaşabilirsiniz. Expo, geliştirme sürecinde Android ve iOS simulatörleri yerine, Expo Client adlı bir uygulama kullanır. Bu uygulama üzerinden projenizi test edebilirsiniz.
• React Native CLI: React Native CLI, genellikle geliştirme ortamını daha fazla özelleştirmek isteyen deneyimli geliştiriciler için tercih edilir. CLI, Android ve iOS simulatörlerini doğrudan kullanmanıza olanak tanır. React Native CLI ile daha fazla kontrol sahibi olabilir ve gerektiğinde daha derin seviyede yapılandırmalar yapabilirsiniz.

2. Platform Erişimi ve Yetenekler:

• Expo: Expo, birçok yaygın kullanılan platform hizmetine (örneğin, kamera, yerel dosya sistemine erişim) kolayca erişmenizi sağlayan kullanışlı API’lar sunar. Ancak, Expo’nun sunduğu API’larla sınırlısınız ve platforma özgü bazı geliştirme gereksinimlerini karşılamak için Expo dışı çözümler gerekebilir.
• React Native CLI: React Native CLI, platform özgü modüllere ve hizmetlere daha fazla erişim sağlar. Bu, geliştiricilere projelerini daha fazla özelleştirme ve karmaşık platform ihtiyaçlarını daha iyi karşılama imkanı verir. Eksiksiz ve özelleştirilmiş platform entegrasyonlarına ihtiyaç duyan büyük ölçekli projeler genellikle React Native CLI’ı tercih eder.

3. Proje Dağıtımı:

• Expo: Expo, projeleri hızla paylaşmanıza olanak tanır. Expo projelerini Expo’nun sunucularına yükleyebilir ve bir QR kodu ile diğer cihazlarda test edebilirsiniz. Bu, projeyi paylaşmayı ve erken aşamalarda geri bildirim almayı kolaylaştırır.
• React Native CLI: React Native CLI ile geliştirilen projeler, genellikle kendi altyapınızda barındırılır ve dağıtım daha fazla yapılandırma gerektirebilir. App Store ve Google Play’e yüklemek için ek adımlar gerekebilir.

Hangi aracı kullanmanın en uygun olduğu, projenizin ihtiyaçlarına, platform özgü gereksinimlerine ve geliştirme ekibinizin deneyimine bağlıdır. Expo, hızlı prototipleme ve küçük-orta ölçekli projeler için mükemmeldir, React Native CLI ise daha fazla özelleştirme ve platform entegrasyonu sağlayan büyük ölçekli projelerde tercih edilir.

Yazımın devamında, Expo CLI kullanarak proje oluşturma aşamasını anlatacağım. İlk olarak Visual Studio Code ve Node.js kurulumunu tamamladıktan sonra komut satırını açarak;

npm install -g expo-cli           //Windows için
sudo npm install -g expo-cli      //MacOs için

Bu komut’u çalıştırdıktan sonra, projeyi oluşturmak istediğiniz dizinde projenizi aşağıdaki komut ile oluşturabilirsiniz.

C:\Users\userName\Documents\VSCode\test>expo init Test  

//userName: Kullanıcı adınız
//Test yerine belirlediğiniz proje ismini yazabilirsiniz 

Bu komut’u çalıştırdıktan sonra bir menü ile karşılaşıyoruz.

Basit bir uygulama kurulumu olacağı için “blank” seçeneği ile devam ediyoruz.

Oluşturduğumuz projeyi Visual Studio Code ile açıp inceleyebilirsiniz.

Projeyi Expo CLI ile oluşturduğumuz için Play Store veya AppStore üzerinden Expo uygulamasını telefonunuza kurarak, projenin önizlemesini telefonunuz üzerinden gerçekleştirebilirsiniz. Bunun dışında Windows işletim sistemi kullanıyorsanız projeyi emulator kullanarak android bir cihaz üzerinden görüntüleyebilirsiniz fakat IOS bir cihaz üzerinde görüntüleyemezsiniz. IOS cihaz üzerinde çalıştığınız projeyi görüntüleyebilmek için MacOS işletim sistemine sahip bir donanıma sahip olmanız gerekmektedir. (MacOS işletim sistemi ile her iki farklı platform için emulator kurulumu gerçekleştirerek projenizin önizlenminin yapabilirsiniz.)

Android Studio ve Emulator Kurulumu

Android Studio websitesini ziyaret ederek işletim sisteminize uygun olan seçeneği bilgisayarınıza kolayca indirebilirsiniz. İndirme işlemi tamamlandıktan sonra şu adımları takip etmelisiniz;

1.SDK Manager Açma:

• Android Studio’yu açın.
• Ana menüden “Configure” (Ayarla) > “SDK Manager” (SDK Yöneticisi) seçeneğine tıklayın.

2.SDK Platform ve Emulator Seçimi:

• Sol tarafta bulunan “SDK Platforms” (SDK Platformları) sekmesini seçin.
• En üstte, kullanmak istediğiniz Android sürümlerini seçin. Önerilen en son sürümü seçmek genellikle iyidir.
• Ardından, sol taraftaki “SDK Tools” (SDK Araçları) sekmesini seçin.
• “Android Emulator” kutusunu işaretleyin ve “Apply” (Uygula) düğmesine tıklayarak seçimi onaylayın.

3.Emulator Oluşturma:

• SDK Manager’dan çıktıktan sonra, Android Studio ana ekranında “Configure” (Ayarla) > “AVD Manager” (AVD Yöneticisi) seçeneğine tıklayın.
• “Create Virtual Device” (Sanal Cihaz Oluştur) düğmesine tıklayarak yeni bir emulator oluşturma sihirbazını başlatın.
• Emulatörünüz için bir cihaz profili seçin (örneğin, “Pixel 3” gibi).
• İlgili sistem görüntüsünü (örneğin, Android 12) seçin ve “Next” (Sonraki) düğmesine tıklayarak devam edin.
• Gerekli yapılandırmaları yapın (örneğin, cihazın belleği, cihaz yönlendirmesi) ve “Finish” (Tamamla) düğmesine tıklayarak emulatörü oluşturun.

Emulatörünüz şimdi hazır ve kullanıma açık olmalı. Artık Android Studio üzerinden uygulamanızı bu emulatörde test edebilirsiniz.

Bu aşamalardan sonra Visual Studio Code uygulamasında kaldığımız yerden devam ederek, Terminalde aşağıdaki satırı çalıştırın.

expo start

Bu komutu çalıştırdıktan sonra emulator’ü çalıştırın ve Visual Studio Code Terminalinde bu ekran gözüküyorsa “a” tuşuna basarak uygulamanızı masaüstü bilgisayarınızda bulunan emülatorden önizleyebilirsiniz.

Bu aşamadan sonra kurulumu komple gerçekleştirmiş ve ilk uygulamamızı emulator üzerinde çalıştırmış oluyoruz. Basit örnekler için React Native web sitesini ziyaret edebilir ve kendinizi mobil uygulama geliştirme konusunda ilerletebilirsiniz.

Bu yazıda, React Native kullanarak nasıl hızlı ve etkili bir şekilde mobil uygulama geliştirebileceğinizi öğrendik. Hem iOS hem de Android platformlarını destekleyen bu yaklaşım, geliştiricilere zamandan tasarruf sağlar ve aynı kod tabanını kullanarak iki farklı platformda uygulama geliştirme imkanı sunar. React Native’in hızlı prototip oluşturma yeteneği ve geniş topluluk desteği sayesinde, mobil uygulama geliştirmek daha erişilebilir hale gelir. Bu teknoloji, hızlı pazara giriş yapma imkanı sunarken, aynı zamanda kullanıcı geri bildirimlerini değerlendirmek ve uygulamayı geliştirmek için esnek bir çerçeve sunar.