Chapterبەش 3 · Lectureوانە 3.5

App Architecture: the MVVM Patternتەلارسازیی نەرمەواڵە: شێوازی MVVM

Separation of concerns and the MVVM pattern: what the view, the view model, the service and the model each do, how the arrows work (calls down, observation up), how a view model formats data, MVC and MVP for comparison, and how Android, .NET and Flutter guides use the same layers with repositories and services. Technology-free, with pseudocode.

و شێوازی : ، ، و هەر یەکەیان چی دەکەن، تیرەکان چۆن کار دەکەن (بانگکردن بۆ خوارەوە، چاودێریکردن بۆ سەرەوە)، چۆن شێوەی ڕێک دەخات، و بۆ بەراورد و ڕێبەرەکانی Android، ⁦.NET⁩ و چۆن هەمان لەگەڵ و بەکار دەهێنن. بێ پەیوەندی بە یەک تەکنەلۆجیاوە، بە .

22 min read23 خولەک خوێندنەوە · 19 stepsهەنگاو

What you will learnچی فێر دەبیت

Explain separation of concerns and why it makes apps easier to maintain, extend and test.
Name the MVVM parts (view, view model, service, model, data sources) and the job of each.
Read the arrows: who knows whom, and how data returns by observation (publish–subscribe).
Place a given piece of code in the right layer, including data formatting in the view model.
Compare MVVM with MVC and MVP, and with today's repository and service layers.

ڕوون بکەیتەوە و بۆچی ئاسانتر چاک دەکرێن، فراوان دەکرێن و تاقی دەکرێنەوە.
بەشەکانی (، ، ، ، ) و ئەرکی هەر یەکەیان ناو ببەیت.
تیرەکان بخوێنیتەوە: کێ کێ دەناسێت و چۆن بە چاودێریکردن دەگەڕێتەوە ().
پارچە کۆدێکی دیاریکراو لە دروستدا دابنێیت، لەوانە ڕێکخستنی شێوەی لە .
لەگەڵ و و لەگەڵ ئەمڕۆی و بەراورد بکەیت.

Where does the code go?کۆدەکە لە کوێ دابنرێت؟

Dilan is building an exam-timetable app for her university. Her first version puts everything for a screen in one place: the code that draws the list, the code that downloads the exams from the internet, the code that turns "2026-11-09T09:00:00Z" into "Mon 9 Nov, 12:00", and the code that saves favourites on the phone.

دیلان خشتەی تاقیکردنەوەکان بۆ زانکۆکەی دروست دەکات. یەکەم وەشانی هەموو شتێکی شاشەیەک لە یەک شوێندا دادەنێت: ئەو کۆدەی لیستەکە دەکێشێت، ئەو کۆدەی تاقیکردنەوەکان لە دادەبەزێنێت، ئەو کۆدەی «⁦2026-11-09T09:00:00Z⁩» دەکاتە «⁦Mon 9 Nov, 12:00⁩» و ئەو کۆدەی دڵخوازەکان لەسەر مۆبایلەکە پاشەکەوت دەکات.

It works, until it grows. A small design change breaks the download code. A bug in the date code can only be tested by opening the screen. Two classmates cannot work on the screen at the same time without conflicts. The problem is not the code itself, it is where each piece lives.

کار دەکات، تا ئەو کاتەی گەورە دەبێت. گۆڕانکارییەکی بچووکی دیزاین کۆدی دابەزاندنەکە تێک دەدات. لە کۆدی بەروارەکەدا تەنها بە کردنەوەی شاشەکە تاقی دەکرێتەوە. دوو هاوپۆل ناتوانن لە یەک کاتدا بەبێ پێکدادان لەسەر شاشەکە کار بکەن. کێشەکە خودی کۆدەکە نییە، بەڵکو ئەوەیە هەر پارچەیەک لە کوێ دانراوە.

Definitionپێناسە

The overall plan of an app: which parts it has (, classes, services), what each part is responsible for and how the parts talk to each other.

نەخشەی گشتیی ئەپێکە: چ بەشێکی هەیە (، ، خزمەتگوزارییەکان)، هەر بەشێک بەرپرسی چییە و بەشەکان چۆن پەیوەندی بە یەکەوە دەکەن.

Architecture answers "which part of the app does which job, and who may talk to whom?" This lesson teaches one popular answer for apps with a screen: MVVM. Like the previous lesson, it is the same idea in every technology, so it is shown with diagrams and pseudocode.

وەڵامی ئەم پرسیارە دەداتەوە: «کام بەشی کام ئەرک دەکات و کێ دەتوانێت قسە لەگەڵ کێ بکات؟» ئەم وانەیە وەڵامێکی بەناوبانگ بۆ ئەو شاشەیان هەیە فێر دەکات: . وەک وانەی پێشوو، لە هەموو تەکنەلۆجیایەکدا هەمان بیرۆکەیە، بۆیە بە وێنە و پیشان دەدرێت.

Separation of concernsجیاکردنەوەی بەرپرسیارێتییەکان

Definitionپێناسە

Splitting code into parts that each do one job, for example drawing the screen, handling the user's actions and fetching data, instead of putting everything in one place. Such code is easier to change and to test.

دابەشکردنی کۆدە بۆ چەند بەشێک کە هەریەکەیان یەک کار دەکات، بۆ نموونە کێشانی شاشە، مامەڵەکردن لەگەڵ کردەوەکانی بەکارهێنەر و هێنانی دراوە، لە جیاتی دانانی هەموو شتێک لە یەک شوێندا. کۆدی وا ئاسانتر دەگۆڕدرێت و تاقی دەکرێتەوە.

A concern is one job: drawing the screen, keeping the screen's state, getting data, storing data. Separation of concerns means splitting the code into parts with one job each, instead of putting it all in a single place. MVVM is built on this idea. The lecture lists what it buys you:

بەرپرسیارێتی واتە یەک ئەرک: کێشانی شاشە، هەڵگرتنی شاشە، هێنانی ، خەزنکردنی . واتە کۆدەکە بکەیتە چەند بەشێک و هەر بەشێک یەک ئەرکی هەبێت، لە جیاتی ئەوەی هەمووی لە یەک شوێندا دابنێیت. لەسەر ئەم بیرۆکەیە بنیات نراوە. وانەکە ئەوە ڕیز دەکات کە پێی بەدەست دەهێنیت:

Maintainability: you can fix or change one part without breaking the others.
Extendibility: new features are added as new parts, not by growing one huge file.
Easy unit testing: the logic can be tested without drawing a screen. (Unit tests are the first of the four testing levels.)
Platform-agnostic: the logic does not depend on one screen toolkit, so it can be reused.
Teamwork: designers can work on screens while developers work on logic and data.

ئاسانیی چاککردن: دەتوانیت بەشێک چاک بکەیت یان بیگۆڕیت بەبێ ئەوەی بەشەکانی تر تێک بدەیت.
ئاسانیی فراوانکردن: تایبەتمەندیی نوێ وەک بەشی نوێ زیاد دەکرێن، نەک بە گەورەکردنی یەک فایلی زەبەلاح.
ئاسان: لۆجیکەکە دەتوانرێت بەبێ کێشانی شاشە تاقی بکرێتەوە. ( یەکەمی چوار ئاستەکەی تاقیکردنەوەیە.)
سەربەخۆ لە : لۆجیکەکە بە یەک ئامرازی شاشەوە نەبەستراوە، بۆیە دەکرێت دووبارە بەکار بهێنرێتەوە.
کاری تیمی: دیزاینەران دەتوانن لەسەر شاشەکان کار بکەن لە کاتێکدا لەسەر لۆجیک و کار دەکەن.

Quick checkپشکنینی خێراWhich benefit of separation of concerns lets you check the date-formatting logic without opening any screen?کام سوودی ڕێگەت پێ دەدات لۆجیکی ڕێکخستنی بەروار بپشکنیت بەبێ کردنەوەی هیچ شاشەیەک؟Extendibilityئاسانیی فراوانکردنEasy unit testingتاقیکردنەوەی یەکە ئاسانTeamworkکاری تیمی

Separation of concernsجیاکردنەوەی بەرپرسیارێتییەکان

An everyday picture: the kebab restaurantوێنەیەکی ڕۆژانە: چێشتخانەی کەباب

The kebab restaurantچێشتخانەی کەباب

Think of a busy kebab restaurant in the bazaar. The waiter talks to customers: he takes orders and puts plates on the tables. The head cook at the grill prepares each order the way the customer asked: no onions, extra bread, salad on the side. The storekeeper brings meat, bread and vegetables from the storeroom or the market. Nobody does another person's job. When the cook finishes, he puts the plates on the counter, calls "two plates for table 4!" and does not care which waiter carries them. In MVVM, the waiter is the view, the head cook is the view model, and the storekeeper with his storeroom is the service and its data source.

چێشتخانەیەکی قەرەباڵغی کەباب لە بازاڕدا وێنا بکە. گارسۆنەکە قسە لەگەڵ موشتەرییەکان دەکات: داوا وەردەگرێت و دەفرەکان لەسەر مێزەکان دادەنێت. سەرئاشپەزەکە لە تەنیشت مەنقەڵەکەوە هەر داوایەک بەو شێوەیە ئامادە دەکات کە موشتەرییەکە ویستوویەتی: بێ پیاز، نانی زیادە، زەڵاتە لە تەنیشتەوە. کۆگادارەکە گۆشت، نان و سەوزە لە کۆگاکە یان لە بازاڕەوە دەهێنێت. کەس کاری کەسێکی تر ناکات. کاتێک ئاشپەزەکە تەواو دەبێت، دەفرەکان لەسەر پێشخانەکە دادەنێت، بانگ دەکات «دوو دەفر بۆ مێزی ٤!» و گرنگی نادات کام گارسۆن دەیانبات. لە ، گارسۆنەکە ، سەرئاشپەزەکە و کۆگادارەکە لەگەڵ کۆگاکەیدا و .

Where the analogy stops workingسنووری ئەم نموونەیە

In a real app the "waiter" rearranges the tables by himself whenever the cook's counter changes; nobody carries messages by hand. And the cook also remembers what is on his counter (the screen's state), which a real cook rarely writes down.

لە ڕاستەقینەدا «گارسۆنەکە» هەر کاتێک پێشخانەکەی ئاشپەزەکە بگۆڕێت، خۆی مێزەکان دووبارە ڕێک دەخاتەوە؛ کەس بە دەست پەیام ناگوازێتەوە. هەروەها ئاشپەزەکە ئەوەی لەسەر پێشخانەکەیەتی لە بیر دەمێنێت ( شاشەکە)، کە ئاشپەزێکی ڕاستەقینە کەم جار دەینووسێتەوە.

Quick checkپشکنینی خێراIn the kebab restaurant, who plays the part of the view model?لە چێشتخانەی کەبابەکەدا، کێ ڕۆڵی دەگێڕێت؟The storekeeper, who brings meat and bread from the storeroomکۆگادارەکە، کە گۆشت و نان لە کۆگاکەوە دەهێنێتThe waiter, who talks to the customersگارسۆنەکە، کە قسە لەگەڵ موشتەرییەکان دەکاتThe head cook, who prepares each order the way the customer wants itسەرئاشپەزەکە، کە هەر داوایەک بەو شێوەیە ئامادە دەکات کە موشتەرییەکە دەیەوێت

MVC, MVP and MVVMMVC، MVP و MVVM

Definitionپێناسە

A tried, reusable solution to a problem that comes up again and again in software design, with a name every developer knows, such as , the or .

چارەسەرێکی تاقیکراوە و دووبارە بەکارهێنراوە بۆ کێشەیەک کە لە دیزاینی دووبارە دەبێتەوە، بە ناوێک کە هەموو دەیناسن، وەک ، یان .

MVVM is an architectural pattern: a proven way to divide a whole app into parts. Its relatives are MVC and MVP. All three keep the screen apart from the data; they differ in the part in the middle.

شێوازێکی تەلارسازییە: ڕێگایەکی تاقیکراوە بۆ دابەشکردنی هەموو بۆ چەند بەشێک. خزمە نزیکەکانی و ـن. هەر سێکیان شاشە لە جیا دەکەنەوە؛ جیاوازییان لە بەشی ناوەڕاستدایە.

MVVM stands for Model–View–ViewModel. It gives a clear separation between the UI (the view) and the application logic (the view model and the model). It works especially well for apps with an interactive UI, where the screen changes often as the user taps and types. It also has many variations and implementations: each platform adapts it a little.

کورتکراوەی ⁦Model–View–ViewModel⁩ـە. جیاکردنەوەیەکی ڕوون لە نێوان () و لۆجیکی ( و ) دروست دەکات. بە تایبەتی بۆ ئەو باشە کە کارلێککەرە، واتە شاشەکە زۆر دەگۆڕێت لە کاتێکدا پەنجە دەدات و دەنووسێت. هەروەها زۆر جۆر و شێوەی جێبەجێکردنی هەیە: هەر کەمێک دەیگونجێنێت.

Where MVVM came fromMVVM لە کوێوە هات

The lecture says MVVM was proposed by Microsoft for WPF, a UI framework for .NET. More exactly: two Microsoft architects, Ken Cooper and Ted Peters, created it to simplify event-driven UI programming, and John Gossman announced it on his blog in 2005. It was used in WPF and Silverlight. MVVM is a variation of Martin Fowler's Presentation Model pattern and is very close to MVP; the main difference is that a view model holds no reference to its view.

وانەکە دەڵێت لەلایەن Microsoftـەوە بۆ WPF پێشنیار کراوە کە بۆ ⁦.NET⁩. وردتر: دوو تەلارسازی Microsoft، ⁦Ken Cooper⁩ و ⁦Ted Peters⁩، دروستیان کرد بۆ ئاسانکردنی کە لەسەر کار دەکات و ⁦John Gossman⁩ لە ساڵی ٢٠٠٥ لە بلۆگەکەیدا ڕایگەیاند. لە WPF و Silverlightـدا بەکار هات. جۆرێکی شێوازی ⁦Presentation Model⁩ـی ⁦Martin Fowler⁩ـە و زۆر لە نزیکە؛ جیاوازیی سەرەکی ئەوەیە کە هیچ ئاماژەیەکی بۆ نییە.

Quick checkپشکنینی خێراAccording to the lecture, where did MVVM come from?بە پێی وانەکە، لە کوێوە هات؟Microsoft proposed it for WPF, its UI framework for .NETMicrosoft بۆ WPF پێشنیاری کرد، کە فرەیموۆرکێکی ڕووکاری وێنەییە بۆ ⁦.NET⁩Apple created it for SwiftUIApple بۆ SwiftUI دروستی کردGoogle created it for FlutterGoogle بۆ Flutter دروستی کرد

Everything You NEED to Know About Client Architecture PatternsByteByteGo · Englishئینگلیزی · 340K viewsبینین · 12K likesلایک · Partبەشی 0:19–4:54 (ofلە 5:50)
MVC, MVP and MVVM side by side: what each middle part does and how the view talks to it.
، و لە تەنیشت یەکەوە: بەشی ناوەڕاستی هەریەکەیان چی دەکات و چۆن قسەی لەگەڵ دەکات.
Watch 0:19-4:54: the patterns and how they compare.
لە ⁦0:19⁩ تا ⁦4:54⁩ سەیر بکە: هەر سێ شێوازەکە و بەراوردکردنیان.

MVC, MVP and MVVMMVC، MVP و MVVM

MVC and MVP next to MVVMMVC و MVP لە تەنیشت MVVM

Patternشێواز	The part in the middleبەشی ناوەڕاست	Does the middle part know the view?ئایا بەشی ناوەڕاست دەناسێت؟
MVC (Model–View–Controller)	A controller handles the user's input, updates the model and chooses what the view shows.کۆنترۆڵەر وەردەگرێت، نوێ دەکاتەوە و دیاری دەکات چی پیشان بدات.	Usually yesزۆرجار بەڵێ
MVP (Model–View–Presenter)	A presenter holds a reference to the view and tells it what to show.پێشکەشکەر ئاماژەیەک بۆ هەڵدەگرێت و پێی دەڵێت چی پیشان بدات.	Yesبەڵێ
MVVM (Model–View–ViewModel)	A view model exposes the screen's state; the view watches it and redraws. شاشەکە ئاشکرا دەکات؛ چاودێریی دەکات و دووبارە دەیکێشێتەوە.	Noنەخێر

Quick checkپشکنینی خێراWhat is the main difference between an MVP presenter and an MVVM view model?جیاوازیی سەرەکی نێوان پێشکەشکەری و چییە؟The view model draws the screen itselfمۆدێلی دیمەن خۆی شاشەکە دەکێشێتThe presenter holds a reference to the view; the view model does not know the viewپێشکەشکەرەکە ئاماژەیەک بۆ دیمەن هەڵدەگرێت؛ مۆدێلی دیمەن دیمەن ناناسێتMVP has no modelMVP مۆدێلی نییە

The MVVM layers and their arrowsچینەکانی MVVM و تیرەکانیان

Here are the parts of an MVVM app, from the screen down to where data lives. Read the arrows carefully: they are the rules of the pattern.

ئەمە بەشەکانی ، لە شاشەکەوە تا ئەو شوێنەی تێیدا دەژی. سەرنج لە تیرەکان بدە: ئەوان یاساکانی شێوازەکەن.

Solid arrows: "knows and calls". Dashed arrows: "is observed by" or "returns data to".تیری پڕ: «دەناسێت و بانگ دەکات». تیری پچڕپچڕ: «چاودێری دەکرێت لەلایەن» یان « دەگەڕێنێتەوە بۆ».CêIT

Solid arrow (down): the upper part knows the lower part and calls it. The view holds a reference to its view model; the view model holds a reference to the service.
Dashed arrow (up): the lower part never calls the upper part directly. It only makes data available: the view model exposes its state to be observed, the service returns results.

تیری پڕ (بۆ خوارەوە): بەشی سەرەوە بەشی خوارەوە دەناسێت و بانگی دەکات. ئاماژەیەک بۆ هەڵدەگرێت؛ ئاماژەیەک بۆ هەڵدەگرێت.
تیری پچڕپچڕ (بۆ سەرەوە): بەشی خوارەوە هەرگیز ڕاستەوخۆ بەشی سەرەوە بانگ ناکات. تەنها بەردەست دەکات: بۆ چاودێریکردن ئاشکرا دەکات، ئەنجامەکان دەگەڕێنێتەوە.

Quick checkپشکنینی خێراIn the diagram, which way do the solid "knows and calls" arrows point?لە وێنەکەدا، تیرە پڕەکانی «دەناسێت و بانگ دەکات» بەرەو کوێ دەچن؟Down: view → view model → service → data sourceبۆ خوارەوە: دیمەن ← مۆدێلی دیمەن ← خزمەتگوزاری ← سەرچاوەی دراوەUp: data source → service → view model → viewبۆ سەرەوە: سەرچاوەی دراوە ← خزمەتگوزاری ← مۆدێلی دیمەن ← دیمەنBoth ways between every pair of layersبە هەردوو ئاراستەدا لە نێوان هەر دوو چینێکدا

MVVM in 100 SecondsPhilipp Lackner · Englishئینگلیزی · 259K viewsبینین · 5.4K likesلایک
The MVVM layers in 100 seconds: the view observes the view model, which gets data from a repository.
لە ⁦100⁩ چرکەدا: چاودێریی دەکات و لە وەردەگرێت.
Whole video (1:42): the layers and their arrows.
هەموو ڤیدیۆکە ⁦(1:42)⁩: و تیرەکانی نێوانیان.

The view: what the user sees and touchesدیمەن: ئەوەی بەکارهێنەر دەیبینێت و دەستی لێ دەدات

Definitionپێناسە

In , the part of the app that the user sees and touches: screens, buttons, lists. It shows the data its gives it and passes the user's actions on to it. In Flutter, views are .

لە ، ئەو بەشەی ئەپە کە بەکارهێنەر دەیبینێت و دەستی لێ دەدات: شاشە، دوگمە، لیست. ئەو دراوانە پیشان دەدات کە پێی دەدات و کردەوەکانی بەکارهێنەر بۆ ئەو دەنێرێت. لە دیمەنەکان .

The view handles what the user sees and interacts with. Examples: a whole screen, a button, an app bar, a list view.

ئەوە بەڕێوە دەبات کە دەیبینێت و لەگەڵدا دەکات. نموونە: شاشەیەکی تەواو، ، شریتی ، لیستێک.

It holds a reference to its view model and reads the state it shows from there.
It passes user actions to the view model ("Refresh tapped", "exam starred") instead of handling them itself.
It contains no business logic. Only simple display logic belongs here: show or hide a part when a flag is on, animations, a layout that depends on screen size, simple moves between screens.

ئاماژەیەک بۆ هەڵدەگرێت و ئەو پیشانی دەدات لەوێوە دەخوێنێتەوە.
دەگەیەنێتە («Refresh لێدرا»، «تاقیکردنەوەیەک ئەستێرەی لێدرا») لە جیاتی ئەوەی خۆی مامەڵەیان لەگەڵ بکات.
هیچ لۆجیکێکی کاری تێدا نییە. تەنها لۆجیکی سادەی پیشاندان لێرە دەگونجێت: پیشاندان یان شاردنەوەی بەشێک کاتێک ئاڵایەک داگیرساوە، ، کە بە قەبارەی شاشە دەگۆڕێت، چوونی سادە لە شاشەیەکەوە بۆ شاشەیەکی تر.

Quick checkپشکنینی خێراWhere should the code that decides "the Save button is enabled only when the form is valid" live?ئەو کۆدەی بڕیار دەدات « Save تەنها کاتێک چالاکە کە دروست بێت» دەبێت لە کوێ بێت؟In the view, by enabling and disabling the button by handلە دیمەندا، بە چالاککردن و ناچالاککردنی دوگمەکە بە دەستIn the data sourceلە سەرچاوەی دراوەداIn the view model, as state that the view readsلە مۆدێلی دیمەندا، وەک دۆخێک کە دیمەن دەیخوێنێتەوە

The view model: the model of the viewمۆدێلی دیمەن: مۆدێلی دیمەن

Definitionپێناسە

In , the class behind one screen that holds the screen's state, formats data for it (for example dates) and turns the user's actions into calls to . It does not know the ; it only announces that something changed.

لە ، ئەو لە پشت شاشەیەکەوە کە دۆخی شاشەکە هەڵدەگرێت، دراوەکان بۆی ڕێک دەخات (بۆ نموونە بەروار) و کردەوەکانی بەکارهێنەر دەکات بە بانگکردنی . ناناسێت؛ تەنها ڕادەگەیەنێت کە شتێک گۆڕاوە.

As its name says, it is the model of the view: an object that holds everything one screen needs to show, in the form that screen needs it.

وەک ناوەکەی دەڵێت، : کە هەموو ئەو شتانە هەڵدەگرێت کە شاشەیەک پێویستە پیشانی بدات، بەو شێوەیەی ئەو شاشەیە پێویستی پێیەتی.

It holds the screen's state: the list of exams, whether it is loading, an error message.
It formats data from the source into the form the view needs.
It synchronises the UI with what happens behind the scenes.
It takes requests from the view and forwards them to the service, which does the actual work.
It does not know about the view. It only exposes its data to be observed.

شاشەکە هەڵدەگرێت: لیستی تاقیکردنەوەکان، ئایا خەریکی بارکردنە، پەیامی هەڵە.
شێوەی ڕێک دەخات لە بۆ ئەو شێوەیەی پێویستی پێیەتی.
لەگەڵ ئەوەی لە پشتی پەردەوە ڕوو دەدات هاوڕێک دەکات.
داواکان لە وەردەگرێت و دەیاننێرێت بۆ کە کارە ڕاستەقینەکە دەکات.
ناناسێت. تەنها بۆ چاودێریکردن ئاشکرا دەکات.

In the lesson on app state, the declarative screen was drawn from one state owner. In MVVM the view model is that owner for its screen: the view is a function of the view model's state.

لە وانەی دۆخدا، شاشە وەسفییەکە لە یەک خاوەنی دەکێشرا. لە ئەو خاوەنەیە بۆ شاشەکەی: وەک وایە.

Quick checkپشکنینی خێراWhich job does not belong to a view model?کام ئەرک ناگونجێت بۆ ؟Drawing the buttons and choosing their coloursکێشانی دوگمەکان و هەڵبژاردنی ڕەنگەکانیانTurning a raw date into readable textگۆڕینی بەرواری خاو بۆ دەقی خوێندراوەForwarding the user's request to the serviceناردنی داواکەی بەکارهێنەر بۆ خزمەتگوزاریHolding the screen's loading and error stateهەڵگرتنی دۆخی بارکردن و هەڵەی شاشەکە

The view model: the model of the viewمۆدێلی دیمەن: مۆدێلی دیمەن

Formatting data for the viewڕێکخستنی شێوەی دراوە بۆ دیمەن

A view often shows data in a different form from the data source. The lecture's example is a date. Dilan's server sends each exam's start time as a precise text in world time (UTC). Students in Erbil want to read their local time, the weekday and how many days are left. Turning one form into the other is the view model's job.

زۆرجار بە شێوەیەکی جیاواز لە پیشان دەدات. نموونەکەی وانەکە بەروارە. دیلان کاتی دەستپێکی هەر تاقیکردنەوەیەک وەک دەقێکی ورد بە کاتی جیهانی ⁦(UTC)⁩ دەنێرێت. خوێندکارانی هەولێر دەیانەوێت کاتی ناوخۆیی، ناوی ڕۆژەکە و ژمارەی ئەو ڕۆژانەی تا تاقیکردنەوەکە دەمێننەوە بخوێننەوە. گۆڕینی شێوەیەک بۆ ئەوی تر ئەرکی .

The same exam, three forms: raw data, prepared by the view model, shown by the view.هەمان تاقیکردنەوە، سێ شێوە: خاو، ئامادەکراو لەلایەن ، پیشاندراو لەلایەن .CêIT

A view model that prepares rows (pseudocode)مۆدێلێکی دیمەن کە ڕیزەکان ئامادە دەکات (نیمچەکۆد)TEXT

class ExamRow                      // what one card on the screen needs
    subject: text
    room: text
    whenText: text                 // "Mon 9 Nov, 12:00"
    daysLeftText: text             // "in 17 days"

class ExamListViewModel
    rows: list of ExamRow = []     // state the view observes

    toRow(exam: Exam): ExamRow
        local = convertToTimeZone(exam.startsAt, "Asia/Baghdad")   // UTC+3, as in Erbil
        return ExamRow(
            subject: exam.subject,
            room: exam.room,
            whenText: format(local, "EEE d MMM, HH:mm"),
            daysLeftText: "in " + daysBetween(today(), local) + " days")

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 1-5

ExamRow holds text that is ready to show. The view only places these texts on the card.

ExamRow دەقی ئامادە بۆ پیشاندان هەڵدەگرێت. تەنها ئەم دەقانە لەسەر کارتەکە دادەنێت.

Lineدێڕی 10-15

All conversion happens here: time zone, date format and the day count. A unit test can call toRow with one sample exam and check the texts.

هەموو گۆڕینەکە لێرە ڕوو دەدات: ، شێوەی بەروار و ژماردنی ڕۆژەکان. دەتوانێت toRow بە یەک تاقیکردنەوەی نموونەوە بانگ بکات و دەقەکان بپشکنێت.

Quick checkپشکنینی خێراThe server sends prices in fils, and the screen must show "12,500 IQD". Which layer should turn 12500 into that text? نرخەکان بە فلس دەنێرێت و شاشەکە دەبێت «⁦12,500 IQD⁩» پیشان بدات. کام دەبێت ⁦12500⁩ بکات بەو دەقە؟The viewدیمەنThe view modelمۆدێلی دیمەنThe data sourceسەرچاوەی دراوە

The view model: the model of the viewمۆدێلی دیمەن: مۆدێلی دیمەن

The view model does not know the viewمۆدێلی دیمەن دیمەن ناناسێت

This rule surprises many students. The view model never holds a reference to the view and never calls it. It only exposes its data to be observed. Any view that is interested subscribes, and whenever the data changes the view model publishes a short message: "I changed". The subscribed views then read the new state and redraw. This is the publish–subscribe pattern.

ئەم یاسایە زۆر خوێندکار سەرسام دەکات. هەرگیز ئاماژەیەک بۆ هەڵناگرێت و هەرگیز بانگی ناکات. تەنها بۆ چاودێریکردن ئاشکرا دەکات. هەر کە حەزی پێیەتی بەشداری دەکات و هەر کاتێک بگۆڕێت، پەیامێکی کورت بڵاو دەکاتەوە: «گۆڕام». پاشان ئەو بەشدارن نوێیەکە دەخوێننەوە و دووبارە دەکێشنەوە. ئەمە .

Definitionپێناسە

A in which a publisher announces that its data has changed, and every subscriber (a ) that has registered with it is told, so that each one can fetch the new data. Provider, ChangeNotifier and view models use it.

کە تێیدا بڵاوکەرەوەیەک ڕادەگەیەنێت کە دراوەکەی گۆڕاوە و هەموو بەشداربوویەک () کە خۆی لەلای تۆمار کردووە ئاگادار دەکرێتەوە، بۆ ئەوەی هەریەکەیان دراوە نوێیەکە وەربگرێت. Provider، ChangeNotifier و بەکاری دەهێنن.

A radio stationوێستگەیەکی ڕادیۆ

A radio station broadcasts the news. It does not know who is listening: one taxi driver, a hundred shops, or nobody. Anyone who tunes in hears every update. The view model is the station, and the views are the radios tuned in to it (in programming, these radios are called listeners).

وێستگەیەکی ڕادیۆ هەواڵ بڵاو دەکاتەوە. نازانێت کێ گوێ دەگرێت: شۆفێرێکی تەکسی، سەد دوکان، یان هیچ کەس. هەر کەسێک کەناڵەکە بگرێت هەموو نوێکردنەوەیەک دەبیستێت. وێستگەکەیە و ئەو ڕادیۆیانەن کە لەسەری داندراون (لە بەم ڕادیۆیانە دەوترێت ).

Where the analogy stops workingسنووری ئەم نموونەیە

A radio listener who tunes in late misses the earlier news. A view that subscribes late is luckier: it simply reads the view model's current state and is up to date at once.

گوێگرێکی ڕادیۆ کە درەنگ کەناڵەکە دەگرێت، هەواڵەکانی پێشوو لە دەست دەدات. کە درەنگ بەشداری دەکات بەختی باشترە: تەنها ئێستای دەخوێنێتەوە و یەکسەر نوێ دەبێتەوە.

Why insist on this? Because a view model that knows nothing about buttons or screens can be tested alone, reused by a phone screen and a tablet screen at the same time, and kept when the whole UI is redesigned. Some platforms connect views to view models automatically; this is called data binding.

بۆچی پێداگری لەسەر ئەمە دەکرێت؟ چونکە کە هیچ لە و شاشەکان نازانێت، دەتوانرێت بە تەنها تاقی بکرێتەوە، لە یەک کاتدا لەلایەن شاشەی مۆبایل و شاشەی تابلێتەوە بەکار بهێنرێت و کاتێک هەموو دیزاینی نوێی بۆ دەکرێت بمێنێتەوە. هەندێک بە خۆکارانە دەبەستنەوە؛ ئەمە پێی دەوترێت .

Quick checkپشکنینی خێراA view model must tell the screen that the exam list has changed. What does it do? دەبێت بە شاشەکە بڵێت لیستی تاقیکردنەوەکان گۆڕاوە. چی دەکات؟Finds the list widget on the screen and adds rows to itلیستەکە لەسەر شاشەکە دەدۆزێتەوە و ڕیزی بۆ زیاد دەکاتPublishes "changed"; the views that subscribed read the new state«گۆڕام» بڵاو دەکاتەوە؛ ئەو دیمەنانەی بەشدارن دۆخ نوێیەکە دەخوێننەوەCalls a method on the view by nameمیتۆدێک لەسەر دیمەن بە ناوەکەیەوە بانگ دەکات

The service and the modelخزمەتگوزاری و مۆدێل

Definitionپێناسە

In app architecture, a class that does the actual work with one outside thing, such as a REST , Firebase, a file or a device , and keeps no screen state. View models or repositories call it.

لە تەلارسازیی ئەپدا، کە کارە ڕاستەقینەکە لەگەڵ یەک شتی دەرەکی دەکات (وەک APIـیەکی REST، Firebase، فایلێک یان ئامێرەکە) و هیچ دۆخێکی شاشە هەڵناگرێت. یان بانگی دەکەن.

The service gets the data that the view asked for (through the view model) from a data source. It does the actual work: sending the network request, reading the file, asking the sensor.

ئەو کە داوای کردووە (لە ڕێگەی ) لە دەهێنێت. کارە ڕاستەقینەکە دەکات: ناردنی ، خوێندنەوەی ، پرسیارکردن لە .

Definitionپێناسە

In , the layer that holds the app's data and the rules about it: classes such as User or Todo, and the code that loads and saves them (often through a ), with no UI code.

لە ، ئەو چینەیە کە ئەپەکە و یاساکانی هەڵدەگرێت: کلاسی وەک User یان Todo و ئەو کۆدەی باریان دەکات و پاشەکەوتیان دەکات (زۆرجار لە ڕێگەی )، بەبێ هیچ کۆدێکی ڕووکار.

The model represents data in a convenient way: a clear object such as Exam with a subject, a room and a start time, instead of loose text from the network.

بە شێوەیەکی گونجاو نیشان دەدات: ڕوون وەک Exam بە بابەت، هۆڵ و کاتی دەستپێکەوە، لە جیاتی دەقی پەرشوبڵاو لە .

Where does the data come from? The lecture's diagram names three kinds of data source: local storage on the phone, the device's sensors (location, camera, step counter), and the cloud (a server on the internet; see what a back end does).

لە کوێوە دێت؟ وێنەکەی وانەکە سێ جۆر ناو دەبات: لەسەر مۆبایلەکە، ئامێرەکە (شوێن، کامێرا، هەنگاوژمێر) و ( لەسەر ؛ بڕوانە لایەنی پشتەوە چی دەکات).

Model and service (pseudocode)مۆدێل و خزمەتگوزاری (نیمچەکۆد)TEXT

class Exam                          // the model: plain data, no screen code
    subject: text
    room: text
    startsAt: date-time (UTC)

class ExamService                   // wraps one data source: the university's web API
    fetchExams(): list of Exam
        response = httpGet("https://exams.example.edu/api/exams")
        return parseExams(response.body)

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 1-4

The model knows nothing about screens or the network. It is just the shape of the data.

هیچ لە شاشە و نازانێت. تەنها شێوەی .

Lineدێڕی 6-9

The service does the real work of fetching and turns the raw answer into Exam objects.

کاری ڕاستەقینەی هێنان دەکات و وەڵامە خاوەکە دەکات بە Exam.

Quick checkپشکنینی خێراA step-counter app reads the phone's motion sensor. Which part should talk to the sensor? ژماردنی هەنگاو جووڵەی مۆبایلەکە دەخوێنێتەوە. کام بەش دەبێت قسە لەگەڵ بکات؟The viewدیمەنThe model classکلاسی مۆدێلA serviceخزمەتگوزارییەک

The service and the modelخزمەتگوزاری و مۆدێل

Today's guides: repositories and servicesڕێبەرەکانی ئەمڕۆ: کۆگاکانی دراوە و خزمەتگوزارییەکان

The lecture has one box under the view model: the service. Today's official guides for Android and Flutter split that box in two, and the view model talks to the upper one:

وانەکە یەک سندووقی لە ژێر هەیە: . ڕێبەرە فەرمییەکانی ئەمڕۆی Android و ئەو سندووقە دەکەن بە دوو و قسە لەگەڵ ئەوەی سەرەوە دەکات:

Partبەش	Its jobئەرکەکەی	Holds state? هەڵدەگرێت؟
Repository	The source of truth for one kind of data (exams, users). It caches, handles errors and retries, and turns raw data into model objects.سەرچاوەی ڕاستییە بۆ یەک جۆر (تاقیکردنەوەکان، ). دەکات، مامەڵە لەگەڵ هەڵەکان دەکات و دووبارە هەوڵ دەداتەوە و خاو دەکات بە .	Yesبەڵێ
Service	Wraps one data source (a web API, a local file, a sensor) and returns its raw answers.یەک دەپێچێتەوە ( وێب، ناوخۆیی، ) و وەڵامە خاوەکانی دەگەڕێنێتەوە.	Noنەخێر

The view model does more than forwardمۆدێلی دیمەن لە ناردن زیاتر دەکات

The lecture says the view model "only takes requests from the view and forwards them to the service". In today's guides the view model does a little more: it also holds the screen's state and prepares data for display (as the lecture itself says on the same page), and it usually talks to repositories, which in turn use services. Android's guide calls the two halves the UI layer (UI elements and view models) and the data layer (repositories and data sources); Flutter's guide uses views, view models, repositories and services. The names differ a little; the idea is the same.

وانەکە دەڵێت «تەنها داواکان لە وەردەگرێت و دەیاننێرێت بۆ ». لە ڕێبەرەکانی ئەمڕۆدا کەمێک زیاتر دەکات: شاشەکەش هەڵدەگرێت و بۆ پیشاندان ئامادە دەکات (وەک خودی وانەکە لە هەمان لاپەڕەدا دەیڵێت) و زۆرجار قسە لەگەڵ دەکات کە ئەوانیش بەکار دەهێنن. ڕێبەری Android ئەم دوو نیوەیە ناو دەنێت ( و ) و ( و )؛ ڕێبەری ، ، و بەکار دەهێنێت. ناوەکان کەمێک جیاوازن؛ بیرۆکەکە هەمان شتە.

Quick checkپشکنینی خێراIn today's Android and Flutter guides, which part is the source of truth for one kind of data and handles caching and errors?لە ڕێبەرەکانی ئەمڕۆی Android و ، کام بەش سەرچاوەی ڕاستییە بۆ یەک جۆر و مامەڵە لەگەڵ و هەڵەکان دەکات؟The serviceخزمەتگوزاریThe viewدیمەنThe repositoryکۆگای دراوە

A full round tripگەشتێکی تەواو

Put the parts together. Dilan taps Refresh on the exam screen. Follow the request down and the data back up:

بەشەکان پێکەوە دابنێ. دیلان پەنجە لە Refresh لەسەر شاشەی تاقیکردنەوەکان دەدات. بەرەو خوارەوە و بەرەو سەرەوە بەدوادا بچۆ:

An animation in six frames over a four-layer stack: View, View model, Service, Cloud. Frame 1: a finger taps Refresh on the view. Frame 2: an arrow goes from the view to the view model, which sets loading to true; the view shows a spinner. Frame 3: an arrow goes down to the service, which sends a request to the cloud. Frame 4: raw data comes back up from the cloud to the service, which turns it into Exam objects. Frame 5: the view model formats the exams into rows and publishes changed. Frame 6: the view, which observes the view model, redraws the list with three exam cards. — Requests go down by calls; data comes back up by returns and observation.داواکان بە بانگکردن دادەبەزن؛ بە گەڕاندنەوە و چاودێریکردن سەردەکەوێتەوە.CêIT

View: the Refresh tap becomes a call to the view model's refresh().
: پەنجەلێدانی Refresh دەبێتە بانگکردنی refresh()ـی .
View model: sets loading = true and publishes the change, so the view shows a spinner. Then it asks the service (or repository) for exams.
: loading = true دادەنێت و گۆڕانەکە بڵاو دەکاتەوە، بۆیە هێمای چاوەڕوانی پیشان دەدات. پاشان داوای تاقیکردنەوەکان لە (یان ) دەکات.
Service: sends the request to the cloud and waits for the answer without freezing the screen.
: دەنێرێت بۆ و چاوەڕێی وەڵام دەکات بەبێ ئەوەی شاشەکە ڕابوەستێت.
Service: turns the raw answer into Exam model objects and returns them.
: وەڵامە خاوەکە دەکات بە Exam و دەیانگەڕێنێتەوە.
View model: formats each exam into a row, sets loading = false and publishes "changed".
: هەر تاقیکردنەوەیەک دەکات بە ڕیزێک، loading = false دادەنێت و «changed» بڵاو دەکاتەوە.
View: it is subscribed, so it reads the new rows and redraws the list.
: بەشدارە، بۆیە ڕیزە نوێیەکان دەخوێنێتەوە و لیستەکە دووبارە دەکێشێتەوە.

Notice the shape: calls go down, data comes back up. It is the same one-way flow you met in the lesson on state, now with a name for each part. The waiting in step 3 is asynchronous work, which has its own lesson.

سەرنجی شێوەکە بدە: بانگکردنەکان دادەبەزن، سەردەکەوێتەوە. ئەمە هەمان ڕۆیشتنی یەکئاراستەیە کە لە وانەی دۆخدا بینیت، ئێستا بە ناوێک بۆ هەر بەشێک. چاوەڕوانییەکەی هەنگاوی ٣ کارێکی کە وانەی تایبەتی خۆی هەیە.

Quick checkپشکنینی خێراDuring the round trip, how does the view find out that the new exams are ready?لە کاتی گەشتەکەدا، چۆن دەزانێت تاقیکردنەوە نوێیەکان ئامادەن؟It observes the view model, which publishes "changed"چاودێریی مۆدێلی دیمەن دەکات کە «changed» بڵاو دەکاتەوەThe service calls the view directlyخزمەتگوزاری ڕاستەوخۆ دیمەن بانگ دەکاتThe cloud sends the rows straight to the screenهەورەژمێرکاری ڕیزەکان ڕاستەوخۆ دەنێرێت بۆ شاشەکە

The same layers in different technologiesهەمان چینەکان لە تەکنەلۆجیای جیاوازدا

MVVM is platform-agnostic: the layers stay the same, only the tools change. A future Kotlin or Swift track can use this lesson exactly as it is. Here is how three official guides map the parts:

سەربەخۆیە لە : وەک خۆیان دەمێننەوە، تەنها ئامرازەکان دەگۆڕێن. بەشێکی داهاتووی Kotlin یان Swift دەتوانێت ئەم وانەیە وەک خۆی بەکار بهێنێت. ئەمە ئەوەیە کە سێ ڕێبەری فەرمی چۆن بەشەکان دابەش دەکەن:

Technologyتەکنەلۆجیا	View	View model	How the view learns about changes چۆن بە گۆڕانەکان دەزانێت	Below the view modelلە ژێر
⁦.NET MAUI / WPF (C#)⁩	A page written in XAMLلاپەڕەیەک کە بە XAML نووسراوە	A C# class with properties and commands ⁦C#⁩ بە تایبەتمەندی و	Data binding: the view model raises a "property changed" event: «⁦property changed⁩» دەنێرێت	Model classes, with services or repositories ، لەگەڵ یان
Android (Kotlin)	Jetpack Compose functions ⁦Jetpack Compose⁩	A `ViewModel` class (a state holder) `ViewModel` (هەڵگری )	It exposes state that the UI observes ئاشکرا دەکات کە چاودێریی دەکات	Data layer: repositories and data sources : و
Flutter (Dart) ⁦(Dart)⁩	Widgets	A view model class that notifies its listeners کە ئاگادار دەکاتەوە	The widgets listen and rebuild گوێ دەگرن و دووبارە دروست دەبنەوە	Repositories and services و

Noteتێبینی

In the Flutter track you build all of this in Dart: views are widgets, and view models are classes that notify their listeners. MVVM in Flutter with Provider rebuilds an app this way, first with the provider package and then without any package. Organising an MVVM project then shows the folders, the services and the get_it service locator.

لە ڕێڕەوی Flutterـدا هەموو ئەمانە بە Dart دروست دەکەیت: و کە خۆیان ئاگادار دەکەنەوە. MVVM لە Flutterـدا بە Provider بەم شێوەیە دووبارە دروست دەکاتەوە، سەرەتا بە پاکێجی provider و پاشان بەبێ هیچ پاکێجێک. دواتر ڕێکخستنی پڕۆژەیەکی MVVM ، و ⁦service locator⁩ـی ⁦get_it⁩ پیشان دەدات.

Quick checkپشکنینی خێراA team builds the same exam app for Android with Jetpack Compose and for the web with React. What can they share as a design, even though the code is different?تیمێک هەمان تاقیکردنەوە بۆ Android بە ⁦Jetpack Compose⁩ و بۆ وێب بە React دروست دەکات. چی دەتوانن وەک دیزاین هاوبەش بکەن، هەرچەندە کۆدەکە جیاوازە؟The same layers and responsibilities: views, view models, repositories, servicesهەمان چینەکان و ئەرکەکان: دیمەنەکان، مۆدێلەکانی دیمەن، کۆگاکانی دراوە، خزمەتگوزارییەکانNothing: MVVM works on one platform onlyهیچ: MVVM تەنها لەسەر یەک سەکۆ کار دەکاتThe same button widgetsهەمان ویجێتەکانی دوگمە

When is MVVM worth it?MVVM کەی شایەنی ئەوەیە؟

MVVM is great for apps with an interactive UI: many screens, data that changes, work that waits for the network. It also has costs. You write more classes and files, and beginners can find the extra layers confusing at first. John Gossman, the Microsoft architect who announced MVVM, later warned that it can be overkill for a very simple UI, and that heavy automatic data binding in a very large app can cost performance.

بۆ ئەو زۆر باشە کە کارلێککەرە: زۆر شاشە، کە دەگۆڕێت، کار کە چاوەڕێی دەکات. بەڵام تێچووی هەیە. و زیاتر دەنووسیت و لەوانەیە سەرەتا سەری فێرخوازی تازە بشێوێنن. ⁦John Gossman⁩، ئەو تەلارسازەی Microsoft کە ڕاگەیاند، دواتر ئاگاداری کردەوە کە لەوانەیە بۆ زۆر سادە زیادەڕۆیی بێت و خۆکاری قورس لە زۆر گەورەدا لەوانەیە خێرایی کەم بکاتەوە.

A one-screen calculator or a demo: MVVM can be skipped.
An app with login, lists from a server, offline storage and several screens: MVVM pays for itself quickly.
Start with a view and a view model per screen; add repositories and services when real data sources appear.

یەک شاشەیی یان نموونەیەکی تاقیکاری: دەتوانرێت بەکار نەهێنرێت.
بە ، لیست لە ، خەزنکردن بەبێ و چەند شاشەیەک: زوو قازانجی خۆی دەداتەوە.
بە و بۆ هەر شاشەیەک دەست پێ بکە؛ کاتێک ڕاستەقینە دەردەکەون، و زیاد بکە.

Quick checkپشکنینی خێراFor which app is MVVM most clearly worth the extra files?بۆ کام بە ڕوونترین شێوە شایەنی فایلە زیادەکانە؟A single screen that shows a fixed welcome textتەنها شاشەیەک کە دەقێکی بەخێرهاتنی نەگۆڕ پیشان دەداتA shop app with login, product lists from a server and a saved cartئەپێکی کڕین بە چوونەژوورەوە، لیستی کاڵا لە ڕاژەکارەوە و سەبەتەیەکی پاشەکەوتکراوA one-time test that prints "Hello"تاقیکردنەوەیەکی یەکجاری کە «Hello» چاپ دەکات

Common mistakesهەڵە باوەکان

Mistakeهەڵە	What is trueڕاستییەکە
The view model holds a reference to a button and changes its colour. ئاماژەیەک بۆ هەڵدەگرێت و ڕەنگەکەی دەگۆڕێت.	The view model never knows the view. It exposes state (for example `isValid`); the view decides the colour from it. هەرگیز ناناسێت. ئاشکرا دەکات (بۆ نموونە `isValid`)؛ ڕەنگەکە لەوەوە دیاری دەکات.
Network or database code inside the view.کۆدی یان لە ناو .	Only services (through repositories) talk to data sources.تەنها (لە ڕێگەی ) قسە لەگەڵ دەکەن.
Formatting dates and prices in the view.ڕێکخستنی شێوەی بەروار و نرخ لە .	Formatting is the view model's job, so it can be unit tested.ڕێکخستنی شێوە ئەرکی ، بۆ ئەوەی بە تاقی بکرێتەوە.
"The model is the screen's data."« شاشەکەیە.»	The model is the app's data (Exam). The screen's prepared data and state live in the view model (ExamRow, loading). ⁦(Exam)⁩. ئامادەکراو و شاشەکە لە دەژین (ExamRow، loading).
One giant view model for the whole app.یەک زەبەلاح بۆ هەموو .	Usually one view model per screen (or feature); shared data lives in repositories.زۆرجار بۆ هەر شاشەیەک (یان تایبەتمەندییەک) ؛ هاوبەش لە دەژی.
"MVVM belongs to one technology."« هی یەک تەکنەلۆجیایە.»	It started with Microsoft's WPF, but Android, Flutter and others use the same layers today.لە WPFـی Microsoftـەوە دەستی پێ کرد، بەڵام ئەمڕۆ Android، و هی تر هەمان بەکار دەهێنن.

Exercisesڕاهێنانەکان

ExerciseڕاهێنانWhich layer?کام چین؟

For each piece of code in a weather app, name the MVVM part it belongs to: (a) draw a sun icon and the temperature in big letters; (b) turn 293.15 kelvin into "20 °C"; (c) send the request to the weather API; (d) a Forecast object with city, temperature and time; (e) remember that the forecast is still loading; (f) read the phone's location sensor.

بۆ هەر پارچە کۆدێکی کەشوهەوا، ئەو بەشەی ناو ببە کە شوێنیەتی: (أ) کێشانی خۆر و پلەی گەرمی بە پیتی گەورە؛ (ب) گۆڕینی ⁦293.15⁩ کلڤن بۆ «⁦20 °C⁩»؛ (ج) ناردنی بۆ کەشوهەوا؛ (د) Forecast بە شار، پلەی گەرمی و کاتەوە؛ (هـ) لە بیرهێشتنەوەی ئەوەی پێشبینییەکە هێشتا خەریکی بارکردنە؛ (و) خوێندنەوەی شوێنی مۆبایلەکە.

Hintئاماژە

Ask: does it draw, prepare or keep screen state, do the real work, or just describe data?

بپرسە: دەکێشێت، ئامادە دەکات یان شاشە هەڵدەگرێت، کاری ڕاستەقینە دەکات، یان تەنها وەسف دەکات؟

Show answerوەڵامەکە پیشان بدە

(a) View: drawing and layout.
(b) View model: formatting data for display.
(c) Service: it talks to a data source (the web API).
(d) Model: plain data in a convenient form.
(e) View model: it is the screen's state.
(f) Service: the sensor is a data source.

(أ) : کێشان و .
(ب) : ڕێکخستنی شێوەی بۆ پیشاندان.
(ج) : قسە لەگەڵ دەکات ( وێب).
(د) : سادە بە شێوەیەکی گونجاو.
(هـ) : شاشەکەیە.
(و) : .

ExerciseڕاهێنانFind the broken ruleیاسا شکاوەکە بدۆزەرەوە

Read this pseudocode and say which MVVM rule it breaks and how to fix it.

ئەم بخوێنەوە و بڵێ کام یاسای دەشکێنێت و چۆن چاکی دەکەیت.

Broken view modelمۆدێلێکی دیمەن شکاوTEXT

class LoginViewModel
    loginScreen: LoginScreen          // a reference to the view

    onPasswordChanged(text):
        if length(text) < 8:
            loginScreen.loginButton.disable()
            loginScreen.messageLabel.setText("Password is too short")

Show answerوەڵامەکە پیشان بدە

It breaks "the view model does not know the view": it holds loginScreen and calls methods on its widgets. Fix: give the view model state such as canLogIn = false and message = "Password is too short", notify listeners, and let the login screen read that state to disable the button and show the text.

یاسای « ناناسێت» دەشکێنێت: loginScreen هەڵدەگرێت و لەسەر پێکهاتەکانی بانگ دەکات. چاککردنەوە: وەک canLogIn = false و message = "Password is too short" بدە بە ، ئاگادار بکەرەوە و با شاشەی ئەو بخوێنێتەوە بۆ ناچالاککردنی و پیشاندانی دەقەکە.

ExerciseڕاهێنانWrite the refreshRefresh بنووسە

Write pseudocode for the refresh() of the exam list view model. It must show a spinner while loading, show a friendly error if the network fails, and fill the rows on success.

بۆ refresh()ـی لیستی تاقیکردنەوەکان بنووسە. دەبێت لە کاتی بارکردندا هێمای چاوەڕوانی پیشان بدات، ئەگەر شکستی هێنا هەڵەیەکی دۆستانە پیشان بدات و لە کاتی سەرکەوتندا ڕیزەکان پڕ بکاتەوە.

Hintئاماژە

Three pieces of state are enough: rows, loading, error. Notify listeners after each change.

سێ پارچە بەسن: rows، loading، error. دوای هەر گۆڕانێک ئاگادار بکەرەوە.

Show answerوەڵامەکە پیشان بدە

Refresh in the view modelRefresh لە مۆدێلی دیمەنداTEXT

class ExamListViewModel
    rows = []
    loading = false
    error = none
    listeners = []

    refresh():
        loading = true;  error = none;  notifyListeners()
        try:
            exams = examRepository.getExams()        // the repository uses the service
            rows = map(exams, toRow)
        catch problem:
            error = "Could not load exams. Check your connection."
        loading = false;  notifyListeners()

The view shows a spinner while loading is true, the error text when error is not none, and the rows otherwise. The view model never touches the spinner or the list itself; it only changes its state and notifies listeners.

کاتێک loading ڕاستە هێمای چاوەڕوانی پیشان دەدات، کاتێک error بەتاڵ نییە دەقی هەڵەکە و لە باری تردا ڕیزەکان. هەرگیز خۆی دەست لە هێمای چاوەڕوانی یان لیستەکە نادات؛ تەنها دەگۆڕێت و ئاگادار دەکاتەوە.

ExerciseڕاهێنانDraw the layersچینەکان بکێشە

A prayer-times app shows today's five prayer times for the user's city, works offline with the last downloaded times, and lets the user pick a city. Draw (or list) its MVVM parts: one view, one view model, the repository, two services and their data sources. Mark which arrows are calls and which are observation.

کاتەکانی بانگ پێنج کاتی بانگی ئەمڕۆ بۆ شاری پیشان دەدات، بەبێ بە دوایین کاتە دابەزێنراوەکان کار دەکات و ڕێگە دەدات شارێک هەڵبژێرێت. بەشەکانی بکێشە (یان ڕیزیان بکە): ، ، ، دوو و . دیاری بکە کام تیرەکان بانگکردنن و کامیان چاودێریکردن.

Show answerوەڵامەکە پیشان بدە

View: the prayer-times screen with a city picker. It observes the view model (dashed arrow up).
View model: holds the city, the five rows such as "Asr 15:12", loading and error; formats the times. Calls the repository (solid arrow down).
Repository (PrayerTimesRepository): the source of truth. It tries the network service first, saves the result locally, and falls back to the saved times when offline.
Services and data sources: PrayerApiService → the cloud (a web API); LocalStoreService → local storage on the phone.
Model: PrayerDay with the date, city and five times.

: شاشەی کاتەکانی بانگ لەگەڵ هەڵبژێرەری شار. چاودێریی دەکات (تیری پچڕپچڕ بۆ سەرەوە).
: شار، پێنج ڕیز وەک «⁦Asr 15:12⁩»، loading و error هەڵدەگرێت؛ شێوەی کاتەکان ڕێک دەخات. بانگ دەکات (تیری پڕ بۆ خوارەوە).
⁦(PrayerTimesRepository)⁩: سەرچاوەی ڕاستی. سەرەتا تاقی دەکاتەوە، ئەنجامەکە بە ناوخۆیی پاشەکەوت دەکات و کاتێک نییە دەگەڕێتەوە بۆ کاتە پاشەکەوتکراوەکان.
و : PrayerApiService ← ( وێب)؛ LocalStoreService ← لەسەر مۆبایلەکە.
: PrayerDay بە بەروار، شار و پێنج کاتەکەوە.

Quick checkپشکنینی خێراWhich sentence describes MVVM correctly?کام ڕستە بە دروستی وەسف دەکات؟The view knows the view model, the view model knows the model and services, and the view model does not know the viewدیمەن مۆدێلی دیمەن دەناسێت، مۆدێلی دیمەن مۆدێل و خزمەتگوزارییەکان دەناسێت و مۆدێلی دیمەن دیمەن ناناسێتThe model draws the screen and the view stores the dataمۆدێل شاشەکە دەکێشێت و دیمەن دراوە خەزن دەکاتEvery layer knows every other layerهەموو چینێک هەموو چینەکانی تر دەناسێت

Summaryپوختە

MVVM (Model–View–ViewModel) is an architectural pattern, like MVC and MVP. It came from Microsoft (WPF, 2005) and today appears in the Android and Flutter guides too.
It rests on separation of concerns: easier maintenance, extension and unit testing, and logic that is not tied to one platform.
View: what the user sees and touches; knows its view model; no business logic.
View model: the model of the view; holds the screen's state, formats data, forwards requests; does not know the view and only exposes data to be observed (publish–subscribe).
Service and model: the service does the real work with a data source (local storage, sensors, cloud); the model represents data conveniently. Modern guides add repositories as the source of truth between view models and services.
Calls go down; data comes back up by return values and observation. The view model keeps views and models in sync.

⁦(Model–View–ViewModel)⁩ ، وەک و . لە Microsoftـەوە هات (WPF، ٢٠٠٥) و ئەمڕۆ لە ڕێبەرەکانی Android و هەیە.
لەسەر وەستاوە: چاککردن، فراوانکردن و ئاسانتر دەکات و لۆجیکێک دروست دەکات کە بە یەک نەبەستراوە.
: ئەوەی دەیبینێت و دەستی لێ دەدات؛ دەناسێت؛ هیچ لۆجیکی کاری تێدا نییە.
: ؛ شاشە هەڵدەگرێت، شێوەی ڕێک دەخات، داواکان دەنێرێت؛ ناناسێت و تەنها بۆ چاودێریکردن ئاشکرا دەکات ().
و : کاری ڕاستەقینە لەگەڵ دەکات (، ، )؛ بە شێوەیەکی گونجاو نیشان دەدات. ڕێبەرە نوێیەکان وەک سەرچاوەی ڕاستی لە نێوان و زیاد دەکەن.
بانگکردنەکان دادەبەزن؛ بە بەهای گەڕاوە و چاودێریکردن سەردەکەوێتەوە. و هاوڕێک ڕادەگرێت.

Review questionsپرسیارەکانی پێداچوونەوە

Why must the view model not hold a reference to the view?بۆچی مۆدێلی دیمەن نابێت ئاماژەیەک بۆ دیمەن هەڵبگرێت؟

So it can be unit tested without a screen, reused by different views, and kept when the UI is redesigned. It only exposes state that views observe.

بۆ ئەوەی بەبێ شاشە بە تاقی بکرێتەوە، لەلایەن دووبارە بەکار بهێنرێتەوە و کاتێک دیزاینی نوێی بۆ دەکرێت بمێنێتەوە. تەنها ئاشکرا دەکات کە چاودێریی دەکەن.

Give an example of data that the view model formats for the view.نموونەیەکی ئەو دراوەیە بهێنەرەوە کە مۆدێلی دیمەن شێوەکەی بۆ دیمەن ڕێک دەخات.

A UTC time such as 2026-11-09T09:00:00Z becomes "Mon 9 Nov, 12:00 (in 17 days)" in Erbil time.

کاتێکی UTC وەک ⁦2026-11-09T09:00:00Z⁩ دەبێتە «⁦Mon 9 Nov, 12:00 (in 17 days)⁩» بە کاتی هەولێر.

What is the difference between a repository and a service?جیاوازیی نێوان کۆگای دراوە و خزمەتگوزاری چییە؟

A repository is the source of truth for one kind of data and handles caching and errors; a service only wraps one data source and holds no state.

سەرچاوەی ڕاستییە بۆ یەک جۆر و مامەڵە لەگەڵ و هەڵەکان دەکات؛ تەنها یەک دەپێچێتەوە و هیچ هەڵناگرێت.

Name three benefits of separation of concerns.سێ سوودی جیاکردنەوەی بەرپرسیارێتییەکان ناو ببە.

Maintainability, extendibility and easy unit testing (also teamwork and platform-independent logic).

ئاسانیی چاککردن، ئاسانیی فراوانکردن و بە ئاسانی (هەروەها کاری تیمی و لۆجیکی سەربەخۆ لە ).

Videoڤیدیۆ

Watch a videoسەیری ڤیدیۆیەک بکە

A video that viewers liked a lot and praised in their comments, chosen for this lesson.ڤیدیۆیەک کە بینەران زۆریان پێ خۆش بووە و لە کۆمێنتەکانیاندا ستایشیان کردووە، بۆ ئەم وانەیە هەڵبژێردراوە.

What is the MVVM pattern, What benefits does MVVM have?James Montemagno · Englishئینگلیزی · 130K viewsبینین · 3.6K likesلایک · Partبەشی 0:35–3:23 (ofلە 22:38)
What MVVM is: the view, the view model and the model, and why separating them makes code easier to change and test.
چییە: ، و ؛ بۆچی جیاکردنەوەیان وا دەکات کۆدەکە ئاسانتر بگۆڕدرێت و بکرێت.
Watch 0:35-3:23, 'What is MVVM?'; the rest is .NET MAUI code.
لە ⁦0:35⁩ تا ⁦3:23⁩ سەیر بکە، بەشی What is MVVM?؛ باقی ڤیدیۆکە کۆدی ⁦.NET MAUI⁩ـیە.

Lesson complete!وانەکە تەواو بوو!

Well done. Review the key terms, then go on to the next lesson.دەستخۆش. سەیرێکی زاراوە سەرەکییەکان بکەرەوە، پاشان بڕۆ بۆ وانەی داهاتوو.

Key termsزاراوە سەرەکییەکان

Next lessonوانەی داهاتوو

What Is Flutter?Flutter چییە؟

Related lecturesوانە پەیوەندیدارەکان

References and further readingسەرچاوەکان و خوێندنەوەی زیاتر

This lecture is a first edition. The Kurdish text and terminology are waiting for review by Kurdish IT teachers.ئەم وانەیە چاپی یەکەمە. دەقە کوردییەکە و زاراوەکانی چاوەڕێی پێداچوونەوەی مامۆستایانی کوردی بواری IT ن.