Ana Sayfa Yazılım MVVM Nedir ? Model-View-Viewmodel Mimarisi

MVVM Nedir ? Model-View-Viewmodel Mimarisi

960
0

Günümüz şartlarında geliştirilen uygulamalarda firmalar ve kişiler projenin geleceği ve daha kolay düzenlenebilmesi için tasarım prensiplerini kullanıyorlar. Bu yazımda sizlere MVVM mimarisinden bahasedeceğim.

MVVM Nedir ?

MVVM’in açılımı Model View ViewModel dir. MVVM kullanmaktaki asıl amaç ise kullanıcı etkileşimi ile kullanıcının hiç alakadar olmadığı kod yapılarını birbirinden ayırarak projemizi daha okunur, daha iyi ve kolay test edilir ayrıca daha kolay bir şekilde değişiklikler yapmamıza imkan sağlamasıdır.

Biraz soyut kaldı sanırım bir örnek ile anlatmaya çalışalım. Örneği android uygulama üzerinden anlatıyorum.

Ülkeler ile ilgili basit bir uygulama hayal edelim. Uygulamayı ilk açtığımızda kullanıcının önüne ülkelere ait bayraklar ve ülke isimleri gelecek daha sonra kullanıcı herhangi bir ülkeye tıkladığında ise o ülkeye ait özellikler gelecek ne kadar basit bir örnek değil mi ? Peki bu uygulamayı yazarken MVVM nasıl kullanılır bakalım.

İlk olarak ülkelerimizin özellikleri olacak bunlar için model sınıf yazabiliriz. Ülkenin adını, dilini, bölgesini, para birimini vs. her ülke için aynı olacağı için bunu bir model yazarak ve daha sonrasında recyclerview kullanarak ekranda gösterebiliriz. Modelimiz tamam model sınıfında sadece ülkeye ait özellikler bulunuyor. Kotlin ile bunu şu şekilde yazdım.

data class Country(
    val countryName: String?,
    val countryRegion: String?,
    val countryCapital: String?,
    val countryCurrency: String?,
    val countryLanguage: String?,
    val imageUrl: String?)

Gelelim ViewModel kısmına, yazacağımız ViewModel sınıfındaki amacımız ise View yani kullanıcı arayüzü ile Model sınıfı arasında bir köprü oluşturmak. Böylece burada kullanıcının göremediği veri aktarımlarını yapmak. Mesela bu sınıfımızda da ülkeleri tutacak bir arraylist oluşturabiliriz. Henüz hiçbir kullanıcı etkileşimi yok şu zamana kadar arkaplanda modelimiz ve modelimizi kullanarak kullanıcı arayüzünde ihtiyacımız olacak işlemleri yaptık.

class FeedViewModel : ViewModel() {
    val countries = MutableLiveData<List<Country>>()
    val countryError = MutableLiveData<Boolean>()
    val countryLoading = MutableLiveData<Boolean>()

    fun refreshData() {

        val country = Country("Turkey","Asia","Ankara","TRY","Turkish","www.ss.com")
        val country2 = Country("France","Europe","Paris","EUR","French","www.ss.com")
        val country3 = Country("Germany","Europe","Berlin","EUR","German","www.ss.com")

        val countryList = arrayListOf<Country>(country,country2,country3)

        countries.value = countryList
        countryError.value = false
        countryLoading.value = false
    }
}

Viewmodel kısmınıda hallettiğimize göre gelelim View kısmına. View da ise kullanıcıyla etkileşim sağlanacak her türlü kod parçası bulunacak. Örneğin ViewModel sınıfımızda countryLoading değeri false verilmiş bunun kontrolünü sağlayarak eğer loading true ise recyclerview’ımızı göstermeyeceğiz veya herhangi bir hata var mı yok mu eğer var ise countryError true değerini döndürürse ekrana hata mesajını görünür hale getireceğiz gibi işlemler olacak.

lass FeedFragment : Fragment() {

    private lateinit var viewModel : FeedViewModel
    private val countryAdapter = CountryAdapter(arrayListOf())


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)


    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_feed, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        viewModel = ViewModelProviders.of(this).get(FeedViewModel::class.java)
        viewModel.refreshData()

        countryList.layoutManager = LinearLayoutManager(context)
        countryList.adapter = countryAdapter


        observeLiveData()

    }

    private fun observeLiveData() {
        viewModel.countries.observe(viewLifecycleOwner, Observer {countries ->

            countries?.let {
                countryList.visibility = View.VISIBLE
                countryAdapter.updateCountryList(countries)
            }

        })

        viewModel.countryError.observe(viewLifecycleOwner, Observer { error->
            error?.let {
                if(it) {
                    countryError.visibility = View.VISIBLE
                } else {
                    countryError.visibility = View.GONE
                }
            }
        })

        viewModel.countryLoading.observe(viewLifecycleOwner, Observer { loading->
            loading?.let {
                if (it) {
                    countryLoading.visibility = View.VISIBLE
                    countryList.visibility = View.GONE
                    countryError.visibility = View.GONE
                } else {
                    countryLoading.visibility = View.GONE
                }
            }
        })
    }

Her yer kod parçası ve çok karışık diyenler için özet geçelim.

Özet Olarak

MVVM mimarisi, kullanıcı etkileşimi olan sınıflar ile verileri getirdiğimiz, oluşturduğumuz sınıfları birbirinden ayrı yazarak daha kolay anlaşılabilir, daha iyi ve rahat test edilebilir çok daha rahat ve sorunsuz bir şekilde geliştirme yapmamıza imkan sağlayan bir mimaridir.

mvvm

Model sınıfında amaç bir veriye ait özellikleri barındıran model bir sınıf oluşturmak.

ViewModel sınıfındaki amacımız ise View yani kullanıcı arayüzü ile Model sınıfı arasında bir köprü oluşturmak.

View sınıfında ise ViewModel sınıfındaki verilerle kullanıcı etkileşimini sağlamak olarak tanımlayabiliriz.

Önceki İçerikFlutter Kullanmalı mıyız ? Flutter vs React Native vs Native ?
Sonraki İçerikGoogle’dan yeni nesil işletim sistemi Fuchsia | Android’in yerine mi geliyor ?
Ovanas sizin haber, eğlence, teknoloji web sitenizdir. Size doğrudan eğlence sektöründen en son haberleri ve videoları sunuyoruz.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz