آموزش معماری MVVM در اندروید به زبان ساده + مثال عملی

آموزش معماری MVVM در اندروید به زبان ساده + مثال عملی
در این پست می‌خوانید:

در این مقاله می‌خوایم معماری MVVM رو به زبان خیلی ساده یاد بگیریم. قراره ببینیم اصلاً این معماری چیه، چرا ساخته شده و چرا ما باید ازش استفاده کنیم.

معماری MVVM در اندروید استودیو

معماری MVVM یعنی چی و چرا باید بشناسیمش؟

معماری یا به‌قول حرفه‌ای‌ها «الگوی معماری»، یه سری روش و ساختاره که برنامه‌نویس‌ها با تجربه‌ی زیاد بهش رسیدن. این روش‌ها کمک می‌کنن که وقتی پروژه‌مون بزرگ میشه و فایل‌ها و کدها زیاد می‌شن، بتونیم اون‌ها رو مرتب نگه داریم.

یعنی چی مرتب؟ یعنی بتونیم بفهمیم هر قسمت کد کجا باید باشه، چی کار می‌کنه و اگر یه روز خواستیم چیزی رو تغییر بدیم، مجبور نباشیم کل برنامه رو زیر و رو کنیم!

به‌زبون ساده:
معماری یعنی نظم دادن به پروژه، برای اینکه بعداً بتونیم راحت‌تر فکر کنیم، راحت‌تر تغییر بدیم، و راحت‌تر گسترشش بدیم.

بدون معماری، پروژه‌های بزرگ خیلی زود تبدیل می‌شن به یه مشت کد درهم و شلوغ که حتی خودمون هم بعد از یه مدت نمی‌فهمیم چی به چیه!

ساخت پروژه ساده برای معرفی معماری MVVM

ابتدا یه پروژه ساده می سازیم و در این پروژه من از کتابخانه Room استفاده کردم که بتونم یه نام رو ذخیره کنم

مطالعه بیشتر : آموزش Room

تنظیمات build.gradle.kts(app) به این صورت است :

plugins {
 . . .
    alias(libs.plugins.ksp)
}

android {
  // تغییری در این قسمت نداریم 
}

dependencies {

//. . .

    //Room
    implementation(libs.androidx.room.runtime)
    ksp(libs.androidx.room.compiler)
}

و قسمت build.gradle.kts(project) به این صورت است :

plugins {
    alias(libs.plugins.android.application) apply false
    alias(libs.plugins.kotlin.android) apply false
    alias(libs.plugins.kotlin.compose) apply false
    alias(libs.plugins.ksp)
}

و همچنین در فایل libs.version.toml

[versions]
. . .

kspVersion = "2.0.21-1.0.27"
navigationCompose = "2.8.4"
roomCompiler = "2.7.2"
roomRuntime = "2.7.2"

[libraries]
. . .

androidx-room-runtime = { module = "androidx.room:room-runtime", version.ref = "roomRuntime" }
androidx-room-compiler = { module = "androidx.room:room-compiler", version.ref = "roomCompiler" }

[plugins]
. . .
ksp = {id="com.google.devtools.ksp",version.ref = "kspVersion"}

و همچنین در قسمت settingGradel مایکت رو اضافه کردم که راحت سینک بشه و بتونم تحریم و دور بزنم ،

مطالعه بیشتر : تحریم های اندروید استودیو و 3 راهکار دور زدن

در ادامه به توضیح عکس زیر میپردازم :

 

مشکل پروژه‌های بدون معماری: چرا به MVVM نیاز داریم؟

در این پروژه ، من قصد دارم یه نام رو به صورت ورودی بگیریم و در دیتابیس خودم ذخیره کنم ،حالا فایل های که  من نیاز دارم :

  • MainActivity : اکتیویتی اصلی ماست که فایل HomeScreen رو در این جا استفاده میکنم.
  • HomeScreen : صفحه ای پایه ای من که اسم رو در اون دریافت میکنم
  • User : فایلی شکل جدول بندی من رو در دیتابیس نشون میده
  • UserDao : فایلی که بتونه ارتباط با دیتابیس رو برای من درست کنه .
  • UserDataBase : دیتابیس ماست .

البته من در این پروژه به اینترنت وصل نمیشم و از صفحه detailScreen و shopScreen استفاده نمیکنم اما ، فرض میکنم در اینده میخوایم این کار رو انجام بدیم و پروژه رو توسعه بدیم پس مثلا  :

  • DetailScreen : داریم جزئیات ای  رو در این جا نشون میدیم .
  • ShopScreen : فرضا کاربر قصد داره که خریدی رو از برنامه ما انجام بده
  • Network : به اینترنت نیاز داریم و این فایل نیاز است .

تا به این جای کار همان طور که در شکل میبینید ما چند تا فایل و کلاس بیشتر نداریم و همه این ها در یک جا جمع شده اند و یه مقدار به هم ریخته هستند ، فرض کنید پروژه ای داریم مانند آپ دیجی کلا حدودا 150 تا کلاس باشه ، که اگه بخوایم این ها رو یه مشکلی حل کنیم یا این که بخوایم یه ویژگی جدیدی رو اضافه کنیم ، خیلی سخت میشه ، پس ما نیاز به الگو یا ترتیب یا نظم خاصی داریم که این مشکل رو حل کنیم

حالا این جاست که معماری MVVM وارد میشه ، الان پروژه خودمون رو به این صورت در میاریم مانند شکل زیر :

تقسیم‌بندی پروژه بر اساس معماری MVVM

ما چند تا پوشه یا package در این جا درست کردیم :

  • data : بخشی که در اون هر فایلی که مربوط به داده ها Data هاست نگه داری میشه (بخش مدل در معماری MVVM)
  • ui : بخشی که فایل های مربوط به نما UI نگه داری میشه . ( که میشه همون view در معماری MVVM)
  • viewmodel :  این قسمت وظیفه نگه داری فایل های است که منطق برنامه رو نگه داری میکنند
  • utlis : این بخش مربوط به معماریMVVM نیست اما فایل های وجود دارند که در سه بخش بالایی دسته بندی نمیشن پس اون ها رو در این جا نگه داری میکنیم

بسیار خب یه مقدار بیشتر ادامه بدیم ببینیم که در این پوشه چیز های دیگه ای هم هست و چطوری اون ها رو دسته بندی کردیم :

data :

  • database : پوشه ای که فایل های دیتا بیس در اون قرار میگیریند
  • model : محلی که مدل داده های ما در اون قرار میگیرند
  • network : محلی که داده های ما که از اینترنت میان در اون قرار میگیرند
  • repository : واسط بین داده و ویو مدل است

ui :

  • صفحه های ما مانند Screen ها و MainActivity و them که همه این ها فقط وظیفه نمایش دادن UI هستند در این پوشه قرار میگیرند

utils : 

  • اگه به این پوشه دقت کنید ، فایل های مانند base , di , constants , Extension این ها هیچ کدام مربوط به UI – data – Viewmodel نیستند اما برای پروژه لازم هستند مانند پوشه di که مخفف Dependency Injection یا تزریق وابستگی هست در این قسمت Utils قرار میگیرد

 

جمع بندی و نقش Repository و ViewModel در معماری

🗂️ Repository

پوشه و فایل‌هایی که با نام repository در این ساختار قرار گرفتن، وظیفه‌ی پل زدن بین ViewModel و Model/Data رو دارن. شاید بپرسی چرا اصلاً به همچین لایه‌ای نیاز داریم؟ دلیلش اینه که تو خیلی از سناریوها، منبع داده فقط یکی نیست؛ مثلاً ممکنه گاهی نیاز به اینترنت داشته باشیم، گاهی هم بخوایم از دیتابیس لوکال بخونیم.

اینجاست که Repository وارد میشه و تصمیم می‌گیره که داده‌ها باید از کجا خونده بشن. این تفکیک باعث میشه توی آینده، اگر بخوای چیزی رو تغییر بدی یا دنبال یک مشکل بگردی (debug)، خیلی راحت‌تر و سریع‌تر بتونی بفهمی داده‌ها از کجا اومدن و مشکل کجاست.

🧠 ViewModel

ViewModel نقش واسطه رو بین داده‌هایی که از Repository میان و UI ایفا می‌کنه. یعنی داده رو می‌گیره، یه‌جورایی مدیریت و پردازشش می‌کنه، بعد می‌فرسته به سمت UI. نکته‌ی مهم اینه که ViewModel باعث میشه منطق برنامه از بخش نمایش (UI) جدا باشه.

یه جورایی می‌تونیم بگیم ViewModel کمک می‌کنه که ظاهر برنامه و مغز برنامه با هم قاطی نشن. مثلاً اگه یه روز تصمیم بگیریم که طراحی UI رو عوض کنیم (مثل کاری که Jetpack Compose کرد و XML رو کنار گذاشت)، همچنان منطق و عملکرد اصلی برنامه دست نخورده می‌مونه. این همون چیزیه که معماری MVVM دنبالشه: جدا نگه‌داشتن ظاهر و منطق برنامه برای توسعه‌پذیری بهتر.

تا این جا این شد کلیتی از معماری MVVM حالا در مطلب بعد که مفهوم تزریق وابستیگی توضیح میدم از نحوه کد زنی در این کلاس ها هم آشنا میشوید

فایل اصلی این پروژه هم میتونید از اینجا دانلود کنید .

موفق باشید

دیدگاه‌ها ۰
ارسال دیدگاه جدید