React Native & Flutter Login Uygulaması

Merhaba, bu yazımda React-Native ve Flutter frameworklerini kullanarak login ve register işlemlerini gerçekleştiren basit bir mobil uygulama nasıl yazılır ondan bahsedeceğim. Umarım yeni başlayacaklar için faydalı bir yazı olur, keyifli okumalar :)

Bizi Neler Bekliyor❔

1. React Native Nedir?
2. MySQL Database ile React-Native Login and Registration Uygulaması
3. Flutter nedir?
4. MySQL Database ile Flutter Login and Registration Uygulaması

React Native Nedir?

React-Native, Facebook tarafından üretilen cross-platform mobil uygulama geliştirme olanağı sağlayan bir framework’tür. İlk olarak Ocak 2015 yılında düzenlenen bir ReactJS konferansında duyuruldu. React Native, JavaScript ve XML dil yapılarının harmanlandığı kendine ait bir syntax olan JSX ile geliştirilmektedir.

React-Native kurulumunu buradan yapabilirsiniz.

React-Native Login And Registration Uygulaması

Projenizi oluşturduktan ve başarılı bir şekilde derledikten sonra kodlamaya geçebilirsiniz 👩‍💻 Proje kök dizininizde src isimli bir klasör ve içerisine de routes.js isimli bir dosya oluşturarak uygulamada yönlendirme yapacağınız bütün sayfaları burada tanımlayabilirsiniz. Proje derlendiğinde ilk olarak index.js oradan da app.js dosyaları okunur. App.js uygulamada sizi ilk karşılayan ekrandır, bu nedenle App.js dosyasında Routes component’ini render ediyoruz.

App.js

Tek bir form yazarak gelen key değerine göre form’un login veya register olarak şekillenmesini sağlayabilirsiniz. Bu sayede daha az kodla her iki ekran için de ortak değişiklikler yapabiliriz.

Form.js

Yukarıda da gördüğünüz gibi form tipine göre fonksiyonları çağırıyoruz ve web servis kısmında yazdığımız php dosyalarına göre uygulamaya kayıt veya giriş yapabiliyoruz. Ben bu projede biz.nf’yi kullandım, öğrenme amaçlı ya da okul projeleriniz için yeterli olacaktır.

✍️ android/app/src/main/AndroidManifest.xml dosyasında internet permission tanımlamayı unutmuyoruz…

Flutter Nedir?

Flutter, içinde framework, widget ve diğer araçları barındıran, geliştiricilere Android ve iOS platformu için uygulama geliştirmeler imkanı sunan bir mobil uygulama SDK’sıdır. Flutter hafif katmanlı C/C++ ile hazırlanmış kod yapısına sahip olup, nesne yönelimli Dart programlama dilini kullanılır. Google tarafından geliştirilen Flutter ilk olarak Mayıs 2017’de I/O konferansında duyuruldu.

Flutter kurulumu için burayı takip edebilirsiniz.

Flutter Login And Registration Uygulaması

React-Native’de proje run edildikten sonra index.js okunuyordu Flutter’da ise main.dart okunur. Aynı şekilde main.dart’ta da class’larımızı, widget’larımızı vs. tanımladığımız loginandregister.dart sayfasını çağırıyoruz.

main.dart

Sayfalar arası geçiş işlemlerinin Flutter’da çok daha rahat olduğunu söyleyebilirim. Ancak Flutter’da MySQL veri çekme işlemlerinde socket hatasıyla karşılaştım. Uygulamayı emülatörden silip, kapatıp açıp tekrar derliyosunuz, sonra da çalışması için dua ediyorsunuz🤲 Hâlâ neden hata verdiğini ve nasıl çözdüğümü bilmiyorum…

TextField Örneği

Sonuç olarak iki frameworkün de kendilerine göre artıları ve eksileri var. Web programlamayla ilgileniyorsanız javascript dolayısıyla React-Native’i, oop(nesne yönelimli programlama) seviyorsanız Flutter’ı tercih edebilirsiniz. Burdan çok bir şey çıkmadı başka vs’lerde görüşmek üzere😅🙋🏻

Kaynak kodlarına buradan erişebilirsiniz:

Mbbahar/React-Native-Login-And-Registration-With-MySQL

VBT-Intership/MBahar-Flutter-Login-With-MySQL