Huawei Auth Service ile Kolay Email Kimlik Doğrulaması | Jetpack Compose
Herkese selamlar 👋 Bu makalede öncelikle Android’in önerilen modern UI toolkit’i olan Jetpack Compose ile sign in ve sign up sayfalarını tasarlayacağız. Sonrasında projemize Auth Service’i entegre edip, kolay bir şekilde Email doğrulamasını gerçekleştireceğiz. Haydi başlayalım!
💜 Jetpack Compose ile 3 Adımda Sign In ve Sign Up Sayfa Tasarımları
Jetpack Compose’un avantajlarından kısaca bahsedelim:
- 🤏Daha az kod: Tüm hata sınıflarından kaçınıp, kodu basit ve bakımı kolay hale getirir.
- 🔮Sezgisel: Sadece UI’ınızı tanımlayın, Compose gerisini sizin için halleder. Tanımladığınız UI uygulamanın durumuna göre otomatik güncellenir.
- 🐱🏍Hızlandırılmış geliştirme: Mevcut kodlarınızla uyumludur. Böylece ne zaman nerede isterseniz kolayca adapte edebilirsiniz. Canlı önizlemeler ve tam Android Studio desteği ile geliştirmelerinizi hızlandırır.
- 💪Güçlü: Android platform API’lerine doğrudan erişim sağlar. Material Design, Dark tema, animation ve daha birçok özellikle uygulamanızı modern bir hale getirin.
Şimdi Jetpack Compose’u kullanarak aşağıda gördüğünüz Sign In ve Sign Up sayfa tasarımlarımızı yapmaya başlayalım!
📌Hap Bilgiler
- Arrangement: Ana eksende çocukların aralığını kontrol etmek için kullanılır. Sütunda(Column) bir verticalArrangement parametresi ve Satırda(Row) bir horizontalArrangement parametresi bulacaksınız.
- Alignment: Çapraz eksende çocukların aralığını kontrol etmek için kullanılır. Sütunda bir horizontalAlignment parametresi ve Satırda bir verticalAlignment parametresi bulacaksınız.
- KeyboardOptions: Yazılım klavyesindeki seçenekleri yapılandırır. Büyük harf kullanımı(capitalization), Otomatik Düzeltme(autoCorrect), klavye Türü(keyboard Type) ve klavyede belirli simgelerin gösterilmesi (imeAction)(search ikonu gibi) gibi temel olarak dört seçeneğe sahiptir.
- VisualTransformation: Giriş alanındaki(input field) metnin görsel çıktısını değiştirmek için kullanılır.
- FocusRequester: Belirli bileşenler için odağı programlı olarak değiştirmek için istek gönderir.
- FocusManager: Tek seferlik aramalarda odağı zorlamanıza olanak tanır. Örneğin, kullanıcı klavyesindeki “ileri” düğmesine bastığında gezinmek istediğiniz bir formda basit bir metin alanı sütununuz olabilir. FocusManager, odak hiyerarşinizi sizin için geçecek ve istediğiniz yönde odaklanacak bir sonraki şeyi bulacaktır.
- Modifier: Elementin boyutlandırılmasını ve pozisyonunu manuel olarak kontrol etmeyi sağlar.
- Column vs Row: Column layout’u adından anlaşılacağı üzere, eklenen her elemanı sütun şeklindeki bir kalıba dikey olarak ekler. Row tam tersi olarak yatayda bu eklemeyi yapar.
1️⃣ Custom Component: TextInput & Model Class: InputType
Öncelikle, OutlinedTextField view componentini farklı sayfalarda sadece birkaç özelliğini değiştirerek aynı biçimde kullanacağımız için, daha generic hale getirerek customize edilebilir bir eleman haline getiriyoruz.
InputType model sınıfı ile OutlinedTextField elemanımızın customize edilecek özelliklerini tutuyoruz.
2️⃣ Sign In
Giriş yapma sayfamızın tsarımında Kotli’nden aşina olduğumuz LinearLayout özelliğine eş olan Column özelliğini kullanıyoruz. Tasarımda her bir view component’imizi bizim vertical olarak sıralıyor olucak. Verilen başlık değerlerinden sonra yukarıda oluşturduğumuz TextInput’lar ile kullanıcıdan email ve password değerlerini alıyoruz. Ve tasarımımızı gerekli butonlar ile bitiriyoruz.
3️⃣ Sign Up
Kayıt olma sayfamızın tsarımı da giriş yapma sayfamızın tasarımına benzer şekildedir.
🎯 Auth Service Entegrasyonu
Öncelikle App Gallery Connect’te Huawei Kimlik Doğrulama Hizmetinin Email doğrulama modunu etkinleştirmeniz gerekir.
Projemiz için ön hazırlıkları, Huawei Auth Service’in entegrasyonundan ve kullanımdan kaldırılan startActivityForResult() işlevi yerine kullanacağımız Activity Result Contracts’tan bahsettiğim önceki makalemden ayrıntılı olarak takip edebilirsiniz.
- Module: Ön hazırlıklardan sonra, projemizde Auth Service’i kullanırken bazı gerekli instance’ları module sınıfımız içerisinde tanımlıyoruz. Böylece sistem içerisindeki bağımlılığı minimize ediyoruz.
- Repository: Sign in ve sign up için gerekli tüm fonksiyonlarımızı repository sınıfı içinde tanımlıyoruz. Burada Repository Pattern kullanmamızın asıl amacı veri işlem ve sorgulamaların tekrarlardan kaçınılarak merkezi bir yapıya çekilmesidir.
🕵️♀️🎈View Katmanında Fonksiyon Kullanımı:
İlgili fonksiyonların kullanımını login() fonksiyonu üzerinden anlatacağım. Bakalım bu izole ettiğimiz tüm işlemleri view katmanında nasıl çağırıp kullanacağız?
- UI State
UI State, uygulamanın kullanıcılara ihtiyaç duydukları bilgileri sağlamak için işleyebileceği bir özelliktir. Login sayfamız için üç durum belirtiyoruz; bunlar login olma durumu, loading ve error durumları olacak.
- ViewModel
View sadece isteklerini ViewModel’a bildirir ve burda dönen sonucu oluşturduğumuz UI State nesnesi üzerinden gözlemler.
- Login UI
@Composable ek açıklaması, Compose derleyicisine bu işlevin verileri kullanıcı arayüzüne dönüştürmeyi amaçladığını bildirir.
Burada @Composable ek açıklaması ile Login sayfamızın UI’ını oluşturmaya başladık. UI içerisinde Sign In butonuna tıklandığında ViewModel aracılığıyla login() fonksiyonumuzu çağırıyoruz. Son olarak kurduğumuz UI State yapısı ile ilgili durumları takip edip gerekli işlemleri gerçekleştiriyoruz.
Aşağıda Login sayfasının son halini bulabilirsiniz:
Output
Sonuç
Bu yazımda öncelikle Jetpack Compose ile sign in ve sign up sayfa tasarımarımızı gerçekleştirdik. Daha sonra, Auth Service’in MVVM mimarisinde Email doğrulaması adımlarını anlatmaya çalıştım.
Temel seviyede Jetpack Compose kullanımını gördüğümüz bu proje içindeki onboarding sayfası, navigasyon işlemleri ve daha fazlası için Github reposuna referanslardan ulaşabilirsiniz.
Umarım faydalı bir yazı olmuştur. Herkese keyifli çalışmalar😊
