Kısa Özet
Bu video, Firebase kullanarak kullanıcı girişi ve kayıt işlemlerinin nasıl yapılacağını anlatıyor. Proje oluşturma, gerekli paketleri yükleme, sayfa yönlendirmelerini ayarlama, Firebase üzerinde proje oluşturma ve kimlik doğrulama ayarlarını yapma adımlarını içeriyor. Ayrıca, kayıt ol ve giriş yap fonksiyonlarının oluşturulması, tasarım öğelerinin eklenmesi ve stil ayarlarının yapılması da anlatılıyor. Son olarak, çıkış yap fonksiyonu eklenerek uygulamanın tam bir kullanıcı giriş/çıkış döngüsü tamamlanıyor.
- Firebase ile kullanıcı girişi ve kayıt sistemi oluşturma
- React Navigation ile sayfa yönlendirmelerini ayarlama
- Kullanıcı arayüzü tasarımı ve stil verme
- Giriş, kayıt ve çıkış fonksiyonlarını uygulama
Giriş ve Proje Oluşturma
Firebase veri tabanını kullanarak kullanıcı girişi ve kayıt işlemleri için yeni bir proje oluşturuluyor. "Firebase giriş" adında bir proje oluşturuluyor ve temel kurulum adımlarına geçiliyor.
Giriş ve Kullanıcı Sayfalarını Oluşturma
"screens" klasörü altında loginScreen.js ve userScreen.js adında iki yeni sayfa oluşturuluyor. Bu sayfalar, sırasıyla giriş ekranı ve giriş yapıldıktan sonra açılacak kullanıcı sayfasına karşılık geliyor. React Navigation kullanılarak sayfalar arası geçişler tanımlanıyor. Gerekli React Navigation paketleri yükleniyor ve App.js dosyası düzenlenerek sayfalar tanımlanıyor. Başlangıç sayfası olarak kullanıcı giriş ekranı ayarlanıyor.
Firebase Projesi Oluşturma ve Ayarları Yapma
Firebase üzerinde yeni bir proje oluşturuluyor ve web uygulaması olarak ayarlanıyor. Proje oluşturulduktan sonra gerekli Firebase konfigürasyon bilgileri alınıyor ve projeye dahil ediliyor. Firebase.js adında bir dosya oluşturularak Firebase konfigürasyon bilgileri bu dosyaya ekleniyor. Authentication (Kimlik Doğrulama) bölümü açılıyor ve e-posta/parola ile giriş yöntemi etkinleştiriliyor. Test amacıyla bir kullanıcı hesabı oluşturuluyor.
Firebase Entegrasyonu ve Şart Bloğu Ekleme
Firebase.js dosyasına Firebase ve Authentication modülleri import ediliyor. Firebase'in başlatılması için bir şart bloğu ekleniyor. Bu blok, Firebase hesabının boş olup olmadığını kontrol ediyor ve eğer boş değilse Firebase uygulamasını başlatıyor.
Login Screen Tasarımı ve Fonksiyonların Oluşturulması
loginScreen.js dosyası üzerinde tasarım ve fonksiyonel işlemler yapılıyor. E-posta ve parola için useState hook'ları kullanılarak değişkenler oluşturuluyor. Kayıt ol ve giriş yap fonksiyonları tanımlanıyor. Firebase'in dokümantasyonundan gerekli kodlar alınarak bu fonksiyonlara ekleniyor.
Kayıt Ol ve Giriş Yap Fonksiyonlarının Detaylandırılması
Kayıt ol fonksiyonu için Firebase'in createUserWithEmailAndPassword metodu kullanılıyor. Başarılı bir kayıt işleminden sonra kullanıcıya bir uyarı mesajı gösteriliyor. Hata durumunda ise hata mesajı konsola yazdırılıyor ve kullanıcıya bir uyarı veriliyor. Giriş yap fonksiyonu için ise signInWithEmailAndPassword metodu kullanılıyor. Başarılı bir giriş işleminden sonra kullanıcıya bir uyarı mesajı gösteriliyor, hata durumunda ise hata mesajı konsola yazdırılıyor ve kullanıcıya bir uyarı veriliyor.
Kullanıcı Arayüzü Tasarımı ve Stilleri
loginScreen.js dosyasında kullanıcı arayüzü tasarlanıyor. KeyboardAvoidingView kullanılarak klavye açıldığında ekranın kayması engelleniyor. İki adet TextInput (e-posta ve parola için) ve iki adet TouchableOpacity (giriş yap ve kayıt ol butonları için) oluşturuluyor. Stiller tanımlanarak arayüzün görünümü düzenleniyor.
Stil Ayarları ve Hata Düzeltmeleri
Oluşturulan tasarım öğelerine stil vermek için StyleSheet kullanılıyor. Container, input container, input, buton container, buton giriş, buton kayıt ve buton text gibi stiller tanımlanıyor. Bu stiller ile öğelerin boyutları, renkleri, konumları ve diğer görsel özellikleri ayarlanıyor. Bu bölümde ayrıca, useState import hatası ve stil tanımlama hataları gibi bazı hatalar düzeltiliyor.
Fonksiyonel Hataların Giderilmesi ve Test
setText fonksiyonlarındaki hatalar düzeltiliyor. Parolanın görünmemesi için secureTextEntry özelliği ekleniyor. Giriş yap ve kayıt ol fonksiyonlarındaki metot çağırma hataları (nokta eksikliği) gideriliyor. Uygulama test edilerek kayıt işleminin ve giriş işleminin doğru çalıştığı doğrulanıyor.
Sayfa Yönlendirme ve UseEffect Kullanımı
Giriş yapıldıktan sonra kullanıcıyı diğer sayfaya yönlendirme işlemi için navigation.navigate kullanılıyor. Ancak bu yöntemle ilgili bir sorun yaşanıyor ve alternatif olarak useEffect hook'u kullanılarak bir çözüm bulunuyor. useEffect, kullanıcının oturum durumunu dinleyerek, kullanıcı giriş yapmışsa otomatik olarak diğer sayfaya yönlendiriyor.
Çıkış Yap Fonksiyonu ve Tamamlama
userScreen.js dosyasına çıkış yap fonksiyonu ekleniyor. Bu fonksiyon, Firebase'in signOut metodu kullanılarak kullanıcının oturumunu kapatıyor ve kullanıcıyı giriş sayfasına geri yönlendiriyor. Bir buton oluşturularak bu fonksiyonun çağrılması sağlanıyor.
