React Native + Nox + NodeJS + Expo ile mobil uygulama geliştirme ortamı kurma

Tek kodlamayla ios/android uygulaması yazmak… Cross platform mobil uygulama geliştirme konusunda birçok alternatif bulunmakta.

Xamarin, React Native, NativeScript, Ionic… Bunlardan öne çıkanlardan bazıları… Bunlar içinde en öne çıkan React Native… Bu yazımda basit olarak reactnative ile mobil uygulama geliştirme ortamını kurma ve kodlama aşamasına geçmeyi ele alacağım.(Windows 10)

ReactNative Nedir?

React Native, iOS ve Android için gerçek ve doğal olarak oluşturulmuş mobil uygulamaları yazmak için bir JavaScript Framework’üdür… React Native ayrıca platform API’ları için JavaScript arayüzlerini de hazırlamanıza imkan tanır, böylece React Native uygulamalarınız telefon kamerası veya kullanıcının konumu gibi benzeri platform özelliklerine erişebilir.

Nox nedir?

Nox App Player, tüm işletim sistemleriyle uyumlu bir Android emülatörüdür. Kurulumu çok basittir. Herhangi bir ayara gerek kalmadan. Kurulabilir.

Kurulum: https://www.bignox.com/ adresinden işletim sisteminize uygun olan sürümü kurabilirsiniz.

Kurulum sonrası uygulamanızı açınız. Normal bir android telefon kullanır gibi google playden EXPO diye arayarak, uygulamayı indiriniz.

EXPO uygulamasını indirdik. Şimdi expo aşamasına geçmeden önce http://expo.com/ adresinden bir hesap açıyoruz. Bu aşamaları tamamladıktan sonraki sonraki adımlara geçelim…

NodeJS nedir?

Javascript ile server side uygulamalar yazabileceğiniz, bir Javascript Runtime platformudur.

Kurulum: https://nodejs.org/en/download/ (İşletim sisteminize uygun kurulum için install uygulamasını indiriniz ve kurunuz)

Kurulum sonrası terminali açıyoruz… “npm -v” diyoruz. Eğer versiyonu bize çıktı olarak veriyorsa kurulum başarıyla tamamlanmış demektir…

Sonraki aşamalara geçiyoruz.

Mac için

https://github.com/expo/xde/releases/download/v2.25.0/xde-2.25.0.dmg

Windows İçin

https://github.com/expo/xde/releases/download/v2.24.4/xde-Setup-2.24.4.exe

İşlemlerimiz bitti… Kurulumu tamamladıktan sonra

EXPO ve NOX’u açıyoruz…

Kodlama düzenini aldık… 2 uygulamadan da daha önce oluşturduğumuz expo kullanıcı adımız ve şifremizle giriş yapıyoruz.

Soldaki uygulamadan PROJECT -> New Project yapıyoruz.

Projemizi oluşturduk. Burada birkaç ayrıntıya değinelim… EXPO XDE’de proje yönetimi sırasında mobile uygulaması ile haberleşmeyi sağlayan bir adres var. Örneğin bu çalışma şekliyle 169.254.12:19000 adresi lokal bir adrestir. Nox’da bilgisayarımızla aynı lokali paylaştığı için bu adresi çalıştırır. Ancak kendi telefonunuza EXPO kurarak da yazdığınız uygulamayı kullanabilirsiniz. Bunun için adres ayar çubuğundan HOST->Tunnel seçeneği seçerseniz projeniz EXPO üzerinde host edilecek dolayısıyla telefonunuzdan da projenizi açabileceksiniz.

Expo uygulamasında üst sekmelerdeki Publish’e tıklıyoruz

Nox uygulamasında Projects sekmesinde projeniz gözüktü. .Buradan ben tunnel yani expoya yüklü projeyi seçiyorum.(Üstteki)

Proje Nox üzerinde açıldı. Bu boş şablon olduğu için sadece bir metin açıldı.

Projeyi nereden düzenleyeceğiz?

EXPO’da Project->Show in File Explorer

Projemizin kaynak dosyaları… Burada React-Native start dosyası App.js, ekranlara yöneldirme vs işlemeri buradan yapıyoruz. Aynı şekilde js olarak farklı ekranlarda ekleyebiliriz.

Uygulama geliştirme ortamını kurmayı anlatmaya çalıştığım bu yazıdan sonra daha ayrıntılı yazılarda gelecek. Bu konuda birçok kaynak mevcut.

ReactNative Componentleri: https://facebook.github.io/react-native/docs/getting-started.html Buradan component bölümüne geliyoruz.

Daha somut örnekler yapacağımız başka bir projede görüşmek üzere! :)