Windows Kullanıcıları İçin Kurulum, Yapılandırma, Simülasyon,Apk Oluşturma, Apk İmzalama, Markete Uygulama Gönderme
Merhaba sevgili yazılım aşıkları,
Şiir gibi bir başlık oldu :) Bu başlık bence düzenlenmeli ama ne yazmalıyım bilemedim:(
Bu yazı dizisinde işin felsefesinden çok uygulama ağırlıklı gitmeyi planlıyorum. React Nedir? Mobil uygulamalarımı React Native ile geliştirmem bana ne avantaj sağlar? Gibi sorulara cevap bulmuş ve React ve React Native ile uzun bir beraberlik kurmayı düşünen :) arkadaşlar için bu yazı dizisinin diğer arkadaşlara göre daha faydalı olacağına inanıyorum.
React konusunda kafasında soru işareti olan arkadaşlar bir önceki yazı dizim olan React yazılarımı okumalarını tavsiye ediyorum.
GEREKLİ KURULUMLAR
React Native İle Uygulama geliştirmeye başlayabilmek için Windows makinamızıda Java Development Kit, Node.js, Python ve Android Studionun Kululu olması gerekiyor. Bu kurulumlardan sonra npm ile react-native-cli kurulumunu gerçekleştirmeliyiz. react-native-cli sayesinde tüm yapılandırması tamamlanmış react proje dosyalarını bilgisayarımıza indirebileceğiz(Tabiki react-native-cli ın yaptığı tek iş bu değil. Bu kütüphaneyi ayrıntılı olarak incelemenizi tavsiye ederim)
Kurulum dosyalarını aşağıdaki linkleri tıklayarak indirebilirsiniz.
Son olarak react-native-cli ı yükleyelim. Node.js Command Prompt’u Yönetici olarak çalıştırıyoruz.
Aşağıdaki resimdeki gibi npm install -g react-native-cli komutunu çalıştırıyoruz.
React Native ile mobil uygulama geliştirmeye başlayabilmemiz için gereken tüm kurulumları tamamladık.
WINDOWS ORTAM DEĞİŞKENLERİNİ TANIMLAMA
Android Studio’nun similatörlerini kullanabilmemiz için Windows Ortam Değişkenlerine iki tanımlama yapmamız gerekiyor.
Birinci tanımlama: JAVA_HOME ekleme
Bilgisayarım sağ tık> Özellikler>Gelişmiş Sistem Ayarları> Ortam Değişkenleri ne tıklıyoruz ve aşağıdaki pencere açılıyor.
Aşağıdaki resimde seçili olan JAVA_HOME satırını ekliyoruz.
JDK kurulumu sırasında kurulum yolunu değiştirmiş iseniz url’in doğru olduğundan emin olunuz.
İkinci tanımlama: Path Güncelleme İşlemi
Yine aynı ekrandan Path değişkenine tıklıyoruz. Ardından düzenle butonuna tıklıyoruz.
Aşağıdaki resimde gördüğünüz en alttaki seçili olan satırı ekliyoruz.
Yine yolun doğru olduğundan emin oluyoruz. Url bilgisayarınızın ismine göre farklılık gösterecektir.
Tüm Kurulum ve Yapılandırma işlemlerini tamamladık artık ilk React Native uygulamamızı oluşturabiliriz.
REACT NATİVE PROJESİ OLUŞTURMA
React Native projesi oluşturmak artık çok kolay. Adım adım inceleyelim.
- Yönetici olarak Node.js Command Promt’u başlatıyoruz.
- Projeyi oluşturacağımız dizine gidiyoruz.
3. react-native init ornekproje komutunu çalıştırıyoruz. (ornekproje yazan bölüme istediğiniz ismi verebilirsiniz.)
Kurulum tamamlandığında kodu çalıştırdığınız dizinde yukarıdaki dosyarın oluşturulmuş olması gerekiyor.
İlk React Native Projemizi Oluşturduk. Vatana milllete hayırlı olsun :)
REACT NATİVE PROJESİNİ SİMÜLATÖR ÜZERİNDE ÇALIŞTIRMA
Uygulamanın android dosyarı android klasörü içerisindedir. Bu klasörü Android Studio ile açıyoruz.
Projeyi ilk açtığımızda Android Studio aşağıdaki gibi eksik platform(Install missing platform(s) and sync project) hatası verecek. Hata linkinin üzerine bir kez tıklayıp kurulumu başlatıyoruz.(İlgili kurulum tamamlandığında eksik diğer yapılandırmalar ve kurulumlar için android studio bizi aynı şekilde bilgilendirecek. Aynı yolu izliyoruz. Bu şekilde tüm kurulumları otomatik olarak Android Studio tamamlıyor.)
Hata linkini tıkladığımızda aşağıdaki gibi otomatik olarak eksik kurulum seçilecek. Anlaşmayı kabul edip kuruluma devam ediyoruz.
En son Gradle Plugin için güncelleme uyarısı geliyor. Şimdilik buna ihtiyacımız yok. Don’t remind me again for this project butonuna tıklayalım ve geçelim.
Yok ben bu tür durumlara takıntılıyım güncel olsun derseniz siz bilirsiniz. Güncelleyin gitsin :) Ama sorun çıkarsa karışmam :)
Yukarıdaki kurulumlar biraz zamanızı alacaktır. Bu adımdan sonra projemizin dizinini Node.js Command Prompt üzerinden açıp npm start komutunu çalıştırıyoruz.(Node.js Command Prompt u yönetici olarak çalıştırdığınız gerekiyor.)
Komut çalıştıktan sonra aşağıdaki gibi bir ekran açılacak.
Artık Andorid Studio üzerinden Run butonuna yada Shift+F10 tuşlarına basarak projeyi çalıştırabilirsiniz.
Uygulama Run butonuna bastığımızda bizi aşağıdaki ekran karşılayacak. Ben önceden Device oluşturduğum için Available Virtual Devices bölümünde cihazlar bulunuyor. Bu bölümden bir cihaz seçip Ok butonuna tıklıyoruz.
Sizde Create New Virtual Device butonuna tıklayarak yeni cihazlar oluşturabilirsiniz.
Herhangi bir sorun yoksa aşağıdaki simülatör başlayacak.
Şimdilik bu yazıyı burada bırakıyorum. İlerleyen tarihlerde Uygulama iconu, splash screen, apk oluşturma, apk imzalama ve android uygulamasını markete gönderme sırasını izleyerek bu yazıya devam edeceğim. İlgili konulara ihtiyaç duyan arkadaş yorum olarak bildirirse süreci hızlandırabilirim.
Yararlı olması dileklerimle. İyi çalışmalar diliyorum.
