Mac Os Kullanıcıları İçin Kurulum, Yapılandırma, Simülasyon, Markete Uygulama Gönderme
Merhaba sevgili yazılım aşıkları,
Bir önceki yazımda React Native kurulumunu Windows kullanıcıları için incelemiştik. Windows makinalara Xcode uygulamsını yükleyemiyoruz. Bu yüzden IOS uygulamalarını Windows makinalarda geliştiremiyoruz. IOS uygulama geliştirmemiz için iki yol var. Birincisi: Sanal makina kullanma. İkincisi: Mac bilgisayar satın alma. İkinci yol daha sorunsuz duruyor. Ama biraz maliyetli :( Beni gıcık eden bir durum. Apple bu konuda biraz esnek olmsı gerektiğini düşünüyorum.
Mac bilgisayar almak istemeyen arkadaşlar Windows makinalarında React Native uygulamalarını geliştirebilirler. Uygulama geliştirme işlemi tamamlandığında sanal makina üzerinden IOS projesinin build işlemlerini, cihaz üzerinde test etme işlemlerini ve markete yükleme işlemlerini gerçekleştirebilirler.
Markette uygulama yükleme ücretleride can sıkıcı. Yazdığımız uygulamayı kendi cihazımızda denemek içinde Apple developper hesabımızın olması gerekiyor :( Bu nedir kardeşim. Satış yapmıyorum. Para kazanmıyorum. Sadece yazdığım uygulamayı kendi cihazımda çalıştırmak istiyorum. Bilgisayarın, telefonun parasını ödedik yetmedi mi? Anlaşılan yetmemiş. Kararlılar alacaklar o parayı :)
Neyse Windows üzerinde IOS uygulaması geliştiremediğimiz için bir önceki yazımda sadece Android cihazları dikkate alarak anlatmıştırm. Bu bölümde ise böyle bir durum söz konusu değil. Yani Mac bilgisayarla hem Android hemde IOS çıktısı üretebiliyoruz. Yazıyı çok fazla uzatmamak için IOS uygulamsı geliştiriyormuş gibi konuyu anlatacam. Siz isterseniz bir Önceki React Native 01 yazısından da yardım alarak Android Studio’yu da Mac bilgisayarınıza yükleyebilirsiniz.
Bence yükleyin. Nasıl olsa Mac bilgisayarın parasını ödedik çalışsın biraz. Parasının hakkını versin:) Vuracam kırbacı vuracam kırbacı :)
GEREKLİ KURULUMLAR
React Native İle Uygulama geliştirmeye başlayabilmek için Mac makinamızıda Xcode, HomeBrew,Node/npm, watchman 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.
Homebrew IOS için bir paket yöneticisi Node ve Watchman ı Home brew üzerinden yüklemek için kurduk. Ama ben sayfalarınıda yukarıya ekledim.
KURULUM ADIMLARI
Xcode:
Yukarıda verdiğim linkden kurulum işlemini tamamlayabilirsiniz. Yada Aşağıdaki Resimdeki gibi App Store Uygulaması içerisinde aratıp yükleme yapabilirsiniz. Bende yüklü olduğu için Aç butonu gözüküyor sizde Yükle butonu gözükecektir.
Homebrew:
Homebrew yüklemesi için home brew sayfasındali ilginç yükleme linkini terminal uygulamamıza yapıştırıyoruz.
Link:/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Komut çalıştırıldıkdan sonra bir tuşa basmamızı isteyecek.Daha sonra şifremizi isteyecek.
Homebrew yüklemesini başarıyla tamamladığımızda terminal üzerinden brew install paketIsmi komutunu artık çalıştırabiliriz(paketIsmi yazan bölüme yüklemek istediğiniz paketin ismini yazınız.)
Node.js:
Terminal üzerinden brew install node komutunu çalıştırıyoruz.
Kurulumdan sonra node sürümünü kontrol etmek için node -v komutunu terminal üzerinden çalıştırabiliriz.
Watchman:
Terminal üzerinden brew install watchman komutunu çalıştırıyoruz.
Kurulumdan sonra node sürümünü kontrol etmek için watchman -v komutunu terminal üzerinden çalıştırabiliriz.
React-Native-Cli:
Son olarak react-native-cli ı yükleyelim. Terminal uygulamasını başlatı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.
REACT NATİVE PROJESİ OLUŞTURMA
React Native projesi oluşturmak artık çok kolay. Adım adım inceleyelim.
- Terminal uygulamasını başlatıyoruz.
- Terminal üzerinden 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.
Yazıyı yazdığım tarihte react-native init ornekproje komutu ile proje dosyarını oluşturduğumda babel-preset-react-native kütüphanesinin sürümünden kaynaklı hata aldım. Sizin denediğiniz tarihte bu sorun çözülmüş olabilir. Çözüm olarak ilgili paketin “3.0.0” ile gelen sürümünü “2.1.0” ile değiştirdim. ve npm install komutu ile paketleri tekrar yükledim.
İşlemi Adım Adım Yapalım:
1.package.json dosyasını aşağıdaki gibi güncelliyoruz.
2. Uygulama dosyaları içerisindeki node_modules klasörünü siliyoruz.
3. Terminal üzerinden proje dizinine gidiyoruz. npm install komutu ile tüm paketleri tekrar yüklüyoruz. Siz isterseniz sadece “babel-preset-react-native” kütüphanesini kaldırıp “2.1.0” sürümünü tekrar projeye ekleyebilirsiniz.
İlk React Native projemizi başarıyla oluşturduğumuzu kabul edip devam ediyorum.
SİMÜLATÖR ÜZERİNDE UYGULAMAYI ÇALIŞTIRMAK İÇİN REACT NATİVE SERVER UYGULAMASINI BAŞLATMA
Projemizin dizinini Terminal üzerinden açıp npm start komutunu çalıştırıyoruz.
Komut çalıştıktan sonra aşağıdaki gibi bir ekran açılacak.
REACT NATİVE PROJESİNİ GENYMOTİON 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.
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. Güncelleme işlemlerinden sonra 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ıklayarak ilgili similatörü başlatabiliriz.
Sizde Create New Virtual Device butonuna tıklayarak yeni cihazlar oluşturabilirsiniz.
Ben Availeble Virtual Devices bölümünden cihaz seçmiyorum. Connection Devices bölümünde ki cihazı seçiyorum. Adından Ok butonuna tıklıyorum.
Bu bölümde Genymotion cihazını görebilmeniz için Genymotion simülatörünün bilgisayarınıza kurup başlatmanız gerekmektedir. Genymotion simülatörünün çalışması için VirtualBox uygulamasının yüklü olması gerektiğini unutmayınız.
Genymotion simülatörünü ve Virtual Box uygulamasını aşağıdaki linklerden indirebilirsiniz.
Herhangi bir sorun yoksa uygulama aşağıdaki gibi genymotion simülatörü üzerinde görüntülenecektir.
Uygulama başladığında server uygulamamız. Simülatörün isteğini otomatik olarak alğılayacaktır. Aşağıdaki resimdeki gibi Bundiling ‘index.android.js’ ile başlayan satır server uygulamamızın ekrarna basılacaktır.
REACT NATİVE PROJESİNİ IOS SİMÜLATÖRÜ ÜZERİNDE ÇALIŞTIRMA
Uygulamanın IOS dosyarı IOS klasörü içerisindedir. Bu klasör altındaki xcodeproj uzantılı dosyayı çift tıklayarak Projenin Xcode uygulaması ile açılmasını sağlıyoruz.
Açılan ekrandanki üst bölümden İphone 6s simülatörünü seçip Run butonuna basıyoruz.
Herhangi bir sorun yoksa uygulama İPhone 6s simülatörü üzerinde aşağıdaki gibi görüntülenecektir.
Uygulama başladığında server uygulamamız. Simülatörün isteğini otomatik olarak alğılayacaktır. Aşağıdaki resimdeki gibi Bundiling ‘index.ios.js’ ile başlayan satır server uygulamamızın ekrarna basılacaktır.
UYGULAMALARI TEKRAR ÇALIŞTIRMA
Bundan sonra uygulamayı tekrar başlatmak istediğimizde Android Studio üzerinden veya Xcode üzerinden simülatör seçip tekrar Run butonuna tıklamamıza gerek yok. Genymotion simülatörü ve IPhone 6S simülatörü üzerine uygulama yüklendi.
Uygulamayı tekrar çalıştırmak için yapmamız gereken iki şey var. Birincisi: Terminal üzerinden uygulama dizinine gidip npm start komutu ile server uygulamamızı başlatmamız gerekiyor. İkincisi: Genymotion uygulamasını başlatıp yüklü uygulama iconuna tıklamamız gerekiyor. Yada IPhone 6s simülatörü üzerinden uygulama iconuna tıklamamız gerekiyor. Uygulama iconuna tıklayıp simülatör üzerinde uygulamayı başlatıtığımızda server uygulamamız otomatik olarak bundling işlemini başlatacaktır. Hepsi bu kadar :)
Şimdilik bu yazıyı burada bırakıyorum. İlerleyen tarihlerde Uygulama iconu, splash screen, 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.
