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…