React Native Öğrenmeye Başlayalım

Son zamanlarda giderek popüler hale gelen mobil uygulama geliştirme alt yapılarından biri olan react native, facebook tarafından geliştirilmekte olan bir javascript framework’tür. Proje hakkında tüm detaylı bilgiler https://facebook.github.io/react-native/ adresinden elde edilebilir. Ben de öğrenmeye buradaki eğitim dökümanlarını takip ederek başladım ve öğrendikçe de buraya notlarımı aktaracağım. İlk önce kurulum işlemleri ile başlayalım.

Bu arada aşağıdaki anlatımlar ve bundan sonraki makalelerin tümünde Windows ortamında geliştirme yapılacağının varsayılacağını belirtmek istiyorum.

Bağımlılıklar ve Gereksinimlerin Kurulması

React native ile uygulama geliştirmek için bilgisayarımızda ilk önce Node.js kurulumu yapılmış olması gerekmektedir. Ek olarak react native komut satırı arayüzü, phyton2, JDK (Java Development Kit) ve nihayetinde yazılan kodların Android veya iOS ortamına derlenebilmesi için Android Studio ve/veya XCode.

React’ın sitesinde kurulum işlemlerinin Chocolatey ile yapılmasını öneriyor. Biz de o şekilde devam edelim. Windows’ta başlat butonuna tıklayın ve metin kutusuna PowerShell yazın. Gelen programlar içerisinden ‘Windows PowerShell’ yazan program üzerine sağ tıklayarak ‘Yönetici Olarak Çalıştır’ seçeneğini işaretleyin (yoksa normal şekilde tıklayıp çalıştırabilirsiniz). Açılan mavi ekranlı kod satırına aşağıdaki kodu kopyalayıp aynen yazın ve çalıştırmak için Enter tuşuna basın.

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Chocolatey kurulumundan sonra chocolatey komut setlerini Windows komut satırını kullanarak çalıştırabiliriz. Windows komut satırını açmak için başlat butonuna tıklayın ve metin kutusuna CMD yazın. Gelen siyah ekran üzerine sağ tıklayarak ‘Yönetici Olarak Çalıştır’ seçeneğini işaretleyin. Komut satırı ekranı açıldıktan sonra Node.js, JDK ve Phyton 2 kurulumuna geçebiliriz. Aşağıdaki kodu kopyalarak komut satırı ekranına yapıştırın ve ardından Enter tuşuna basın ve kurulumların tamamlanmasını bekleyin.

choco install -y nodejs.install python2 jdk8

Kurulumların tamamlanmasının ardından React-Native CLI kurulumu için aşağıdaki kodu da Windows komut satırına yapıştırın ve çalıştırın. Aşağıdaki kodun çalışması için komut satırını kapatıp yeni bir komut satırını açmanız gerekebilir.

npm install -g react-native-cli

Android Geliştirme Ortamının Kurulması

Ben android yazılımı gerçekleştireceğim için Android Studio kurulumu ile devam edeceğim. Belki ilerleyen zamanlarda iOS için de gerekli geliştirme ortamının kurulumuna değinebiliriz. Android studio kurulum adımlarımlarını ‘Android Studio Kurulumu‘ isimli makalede bulabilirsiniz. Konuyu uzatmamak adına bu makalede android kurulumuna değinmeyeceğim.

Son adım olarak da react-native komutlarının tüm klasörlerde çalışabilmesi yani Microsoft Komut Satırı programı (meşhur DOS ekranımız) tarafından tanınabilmesi için bir tanımlama yapılması gerekiyor. Aşağıdaki görselde Windows 7 işletim sisteminde bu ayarın nereden yapılacağına ait bir ekran görüntüsü bulunmaktadır. Denetim masası > Sistem > Gelişmiş Sistem Seçenekleri > Gelişmiş > Ortam Değişkenleri yolunu izleyerek, açılan pencerede ANDROID_HOME isimli bir değişken tanımlanır ve değer olarak “C:\Users\WindowsKullanıcıAdınız\AppData\Local\Android\Sdk” değeri girilir (burada sembolik olarak yazdığım
WindowsKullanıcıAdınız ibaresi yerine oturum açmış olduğunuz Windows kullanıcı adınızı yazmalısınız).

Klasik Hello World Uygulamamızı Yapmaya Hazırız!

React-native komutlarını kullanarak uygulama oluşturmak için ilk önce Windows komut satırı uygulaması açılmalıdır. Burada istediğiniz bir klasörün içerisine gelerek (ben D:\Projeler içerisine oluşturacağım) aşağıdaki kod yazılmalı ve enter tuşuna basılmalıdır. Enter tuşuna basıldıktan sonra yeni proje oluşturma işlemi bilgisayarınızın ve Internet bağlantınızın gücüne göre birkaç dakika içerisinde tamamlanacaktır.

react-native init HelloWorld

Uygulamamızı Test Edelim…

Uygulamayı kendi telefonumda, USB üzerinden ADB (Android Debug Bridge) ile test edeceğim. Bunun için bazı ayarlar yapılması gerekiyor. İlk önce Windows komut satırında ADB komutlarını çalıştırabilmek için bu bağlantı üzerinden adb ve fastboot kurulumları indirilmelidir. İndirilen zip dosyasını herhangi bir klasöre açtıktan sonra bu klasörün içerisindeki “platform-tools” klasörüne ait yolun PATH ortam değişkenine eklenmesi gerekmektedir. Aşağıdaki görselde benim bilgisayarımdaki ekleniş şekli yer almaktadır (bir üstteki görselde bu ortam değişkenleri ekranına nasıl gelineceğinden bahsettim).

Yukarıdaki ayarlama işleminin tamamlanmasının ardından Android işletim sistemi yüklü olan telefonunuzu react-native yüklemiş olduğunuz bilgisayara USB arayüzü ile bağlayın ve komut satırından aşağıdaki ADB komutunu çalıştırın.

adb devices

Bu komut çalıştırıldığında bilgisayarınıza bağlı olan cihazların bir listesini verir. Eğer cihazınız bu listede görünmüyorsa cihazınızda geliştirici seçeneklerini açmalı ve buradan USB Debugging seçeneğini aktif hale getirmelisiniz. Geliştirici seçeneklerinin açılması için telefonun ayarlar bölümünde telefon hakkında, yazılım bilgisi, cihaz hakkında, sistem bilgisi, vb isimler altında (her cihazda farklı olabilir) bir bölüm bulunmaktadır. Bu bölüme girdiğinizde android build numarası görülecektir. Bu build numarasına 7 kez tıkladığınızda telefonun geliştirici seçenekleri aktif duruma gelmiş olacaktır. Tekrar ayarlar bölümüne gittiğinizde önceki menülere ilaveten geliştirici seçenekleri isminde yeni bir bölümün eklendiğini göreceksiniz. Bu bölüme giriş yaparak USB Debugging seçeneğini aktif hale getirebilirsiniz. Aktif hale getirme işleminin ardından tekrar “adb devices” komutunu çalıştırdığınızda cihazınıza ait Id numarasının listede görünmüş olması gerekiyor.

Artık uygulamamızı cihaz üzerinde test etmeye hazırız. Windows komut satırından HelloWorld uygulamasının bulunduğu klasöre giderek aşağıdaki komut çalıştırıldığında uygulama derlenecek ve kısa süre içerisinde cihaza yüklenecektir.

react-native run-android

Buraya kadar react-native ortamının kurulumunu, android studio ortamının kurulumunu, çalıştırmak için gerekli ayarları ve ilk uygulamamızı gerçekleştirmiş olduk.

Faydalı olması dileğiyle…

Android Studio Kurulumu

Bu makalede Andoid Studio kurulumunu adım adım gerçekleştirmeye çalışacağım. Aşağıdaki kurulum adımları 32 bit Windows 7 işletim sistemi üzerine yapılan ve Android Studio 32 bit versiyonuna ait kurulumu göstermektedir.

İlk önce Andoid Studio sitesinden program kurulumunu indirerek başlayalım. İşletim sistemi 64 bit olan ve Android Studio 64 bit sürümünü kurmak isteyenler için 2 seçenek mevcut. Sitedeki EXE versiyonu indirip klasik bir kurulum yapmak veya ZIP versiyonu indirip kuruluma gerek kalmadan istediğiniz bir klasöre dosyaları çıkartıp, bin klasörü altındaki studio64.exe ile direk kullanmak.

32 bit Windows üzerine kurulum yapmak isteyenler için ise sadece ZIP seçeneği bulunmakta. Benim de bilgisayarım 32 bitlik Windows 7 işletim sistemine sahip olduğu için ben de Android Studio 32 bit versiyonuna ait ZIP versiyonunu indirdim ve bin klasörü altındaki studio.exe’yi (32 bit için bu isim) kullandım.

Kurulum Adımları

Program ilk açılışında geliştirme ortamı ile ilgili bazı ayarların yapıldığı bir kurulum ekranı karşımıza gelmektedir. Bu ekranda bir karşılama mesajı ve kısa bir tanıtım yazısı yer almaktadır. Bu ekranda Next butonuna basılarak kurulum işlemini başlatılır.

Kurulum tipinin seçildiği ikinci ekranda Standart ve Custom seçenekleri yer almaktadır. Standart seçilerek devam edildiğinde varsayılan paket ve parametrelerle bir kurulum gerçekleştirmektedir. Biz burada Custom seçeneğini işaretleyerek devam edeceğiz.

Sonrasında karşımıza SDK bileşenlerinin seçildiği ekran gelmektedir. Burada, yaptığımız uygulamayı test etmemizi sağlayan Android Virtual Device ve Performans için Intel HAXM isimli bir yazılım için kurulum seçenekleri bulunmaktadır. HAXM, Android Virtual Device (AVD)’ın yavaşlığını gidermek ve olabildiğince hızlandırmak için kullanılan bir yazılımdır. Bununla ilgili detaylı bilgi edinmek isteyenler Internet üzerinden arama yapabilirler. Bu ekrandaki tüm seçenekleri işaretliyoruz ve Next butonuna basarak bir sonraki ekrana geçiyoruz.

Emulator ayarları sayfasında ise emulator ve HAXM uygulaması için bilgisayarınızdan ayırmak istediğiniz maksimum RAM bellek boyutunu girmeniz isteniyor. Ben önerilen ayarda (512 MB) bırakıp devam ediyorum. Eğer çok fazla kaynağınız varsa buradaki bellek miktarını artırıp emulator performansını artırabilirsiniz.

Aşağıdaki ekranda ise buraya kadar yapmış olduğumuz tüm ayarların bir özeti yer almaktadır. Burada bizden kurulum için son bir onay istemektedir. Burada Finish butonuna basarak gerekli dosyaların indirilmesi ve kurulması aşamasına geçilmektedir.

Finish butonuna basıp kuruluma geçildiğinde, yukarıdaki aşamalarda seçilen tüm bileşenlerin Internet üzerinden indirildiği ve kurulduğu bir kurulum aşamaları bilgilendirme ekranı gelmektedir. Tüm indirme ve kurulum işlemlerinin tamamlanması Internet hızı ve bilgisayar özelliklerine göre değişiklik gösterebilir.

Kurulum işleminin tamamlanmasından sonra Android Studio açılış ekranı karşımıza gelmektedir. Yeni proje oluşturma, var olan projeyi açma gibi yazılımla ilgili birçok işlem bu ana ekrandan başlatılabilmektedir.

Neden Oreo 8.0?

Kurulum adımları yukarıdaki aşamaya kadar takip edildiğinde aslında android uygulama geliştirme için gerekli geliştirme ortamının en son versiyonu kurulmuş hale ve hemen yeni proje açılıp kodlamaya başlanabilir hale gelinmektedir. Bazı durumlarda sıfırdan yeni bir projeye başlamak yerine elinizde var olan eski bir sürüme destek vermek ve orada geliştirme yapmak durumunda kalabilirsiniz. Ya da yazacağınız yeni uygulamanın hedef kitlesine göre daha alt versiyon kullanan kullanıcılara ulaşmak ve toplam kullanıcı havuzunu büyütmek adına uygulamanızı eski bir versiyonda oluşturmak isteyebilirsiniz. Benim elimdeki oreo 8.0 platformuna özel yazılmış kodlar için bu SDK’yı da indirmem gerekmektedir. Bunun için yukarıdaki ekranda bulunan Configure butonuna tıklayıp açılan menüden de SDK Manager butonuna tıklamak ve aşağıdaki ekranı açmak gerekmektedir.

Yukarıdaki ekranın sağ alt köşesinde bulunan Show Package Details seçeneği işaretlendiğinde SDK’lara ait alt detaylar da listeye gelmektedir. SDK Platforms isimli ilk tab içerisinde yüklenmek istenilen paketin altındaki minimum 3 seçeneğin (Android SDK Platform 26, Sources for Android 26, Google APIs Intel x86 Atom System Image) seçilmesi gerekmektedir. Tabi 64 bitlik versiyona sahipseniz bu kurulum seçeneklerinde de 64 bit olan seçeneklerin seçilmesi gerekmektedir.

Sonrasında SDK Tools tabına geçilir ve buradan da SDK platform 26’ya ait olan tool versiyonlarından uygun olanı (benim örneğimde 26.0.3) seçilir ve Apply tuşuna basılarak Internet üzerinden indirme ve kurulum işlemleri başlatılır.

Sonrasında ihtiyaç oldukça açılış sayfasındaki Configure > SDK Manager adımından gerekli platform yükleme işlemleri yapılabilir.

Faydalı olması dileğiyle…