Jetpack Compose ve Clean Architecture Yaklaşımı ile Kütüphane Sistemi — 1
Herkese merhabalar,
Daha önceden xml kullanarak UI tarafını geliştirdiğim Kütüphane Sistemi uygulamasının ekranlarını Jetpack Compose ‘ a taşıma kararı aldım. Bunu yaparken uygulamayı clean architecture ile daha temiz bir şekilde kodlayarak (elimden geldiğince :-) ) devam etmem gerektiğinin farkına vardım. Çünkü uygulamanın eski kodlarında UI ‘ da business akışları kontrol ettiğim yerler vardı ve bu da pek tavsiye edilmeyen bir durumdu.
Uygulamanın legacy formatına buradan erişebilirsiniz.
Hazır elim değmişken UI dada bazı tasarımsal değişikliklere gittim. Bu değişiklikleri ilerki yazılarımda sizde farkedeceksiniz.
Web servis daha önce tarafımca yazılmış olup kodlarına buradan erişebilirsiniz.Uygulama artık tamamen Google ‘ ın bize sunduğu Jetpack kütüphaneleri ile ilerlemektedir. Burada kullandığım kütüphaneler ise aşağıdaki gibidir.
- Compose (UI)
- Lifecycle (MVVM)
- Hilt (Dependency Injection)
- Material Design Components (UI)
- Paging
- Navigation
- Room
- Workmanager
- Accompanist
Uygulamanın yeni halinin kodlarına buradan ulaşabilirsiniz.
Lafı fazla uzatmadan artık kodlama kısmına geçelim. Dilerseniz ilk önce çıktıya ve package yapısına bi göz atalım. Login ekranının çıktısı aşağıdaki gibidir.
Login ekranının package yapısı ise clean architecture yaklaşımında genelde kullanılan aşağıdaki yapı gibidir.
Clean architecture ile ilgili aşağıdaki eğitim videosunu başından sonuna kadar dikkatlice seyretmenizi tavsiye ederim.
Evet package yapısına göz atmaya devam edelim. Yapı aşağıda görüldüğü gibidir.
Şimdi kodlamaya geçmeden önce bu package içinde ki classların ne işe yaradığını kısa anlatayım.
data
Bu katmanda API ‘ dan gelen responseların ya da room entitylerimizin data classları , retrofit interfacei ve bu interface i inject eden repository classımız bulunur. Direkt olarak interface i de viewmodel ‘ e inject ederek kullanabilirdik. Fakat repo classları unit test için çokça işe yarar konumdadır.
domain
Bu katmanda repository interface i ve viewmodel de ki akışlarımızın use caseleri bulunmaktadır. Bu use caseler ; api çağrısı, room çağrısı, business kontrolleri ya da validation gibi akış içeren classlardır. Viewmodel de inject edilirler ve burada çağrılırlar.
presentation
UI katmanıdır. Viewmodel ve state data classı bu packagedadır.
Login senaryomuz kullanıcının username ve passwordunu girerek ilerleyen bir akıştır. Burada ilk önce bu 2 alanın validationu sağlanır. Validation tamam ise servis çağrısı yapılır. Orada ki response a göre eğer kullanıcı adı — şifre hatalı ise Snackbar ile mesaj gösterilir. Doğru ise anasayfa ya navigation yapılır.
Compose bir declarative UI framework olduğu için ekranı mümkün olduğunca parçalayarak ilerledim. Parçaladığım componentler presentation package ının altındaki components packageında bulunmaktadır.
İlk olarak form ekranımıza bakalım.
Burada kullandığım KutuphanemBaseInput componentine buradan ulaşabilirsiniz. Aslında yaptığım compose’un TextField componentini özelleştirmekten başka birşey değil.
Bu ekran viewmodel ile state üzerinden iletişim kurmaktadır.
Gelelim LoginViewModel ‘ e.
Burada constructor da inject ettiğimiz use caseler bizim login akışında olması gerekenlerdir.
Channel ise hot bir şekilde Snackbar mesajı göstermek için kullandığımız bir flow dur.
Giriş butonuna bastığımız zaman ilk olarak servise çağrı yapılacaktır. Buradaki retrofit interfacei aşağıdaki gibidir.
AccountCredentialsDto data classı ise aşağıdaki gibidir.
Bu data classın fieldları form validationu geçildiği takdirde dolar ve aşağıdaki use case viewmodel de çağrılır.
Validation başarılı olmadığı zaman ekran aşağıdaki gibi recompose olur.
Validation ‘ un clean architecture yaklaşımında nasıl yapıldığına dair aşağıdaki videoya göz atmanızı tavsiye ederim.
Validation başarılı ise artık servis çağrımız yapılacaktır. Servis ve room çağrılarını yaptığım BaseUseCase de flow a ; loading, success ve error emitlemekteyim. Bu base class’a buradan ulaşabilirsiniz. Servis çağrısı esnasında ekran aşağıdaki gibi recompose olmaktadır.
Bu custom loader a buradan ulaşabilirsiniz.Servisten error dönmesi durumunda aşağıdaki gibi Snackbar göstermekteyim.
Channel ı listen ettiğimiz kısım ise aşağıdaki gibidir.
Servisten success geldiği zaman ise anasayfaya aşağıdaki gibi navige oluruz.
if (loginState.isSuccess) {
navController.navigate(KutuphanemNavigationItem.MainScreen.screenRoute)
}Bir sonraki yazımda uygulamada kullandığım BottomNavigation, TopBar yapılarından bahsedeceğim. Sürçülisan ettiysem affola. Soru ve görüşleriniz için mesutemrecelenk@gmail.com ‘ a mail atabilirsiniz. Sağlıcakla kalın…