SwiftUI یک «فریمورک اعلانی» (Declarative Framework) است که از سوی اپل برای ساخت اپلیکیشن‌های مربوط به محصولات این شرکت ارائه شده است. این بدان معنی است که به جای استفاده از استوری‌بورد و یا تولید برنامه‌نویسی شده اینترفیس، می‌توانید به سادگی از فریمورک SwiftUI بهره بگیرید. SwiftUI از معماری MVC پیروی نمی‌کند. به زبان ساده‌تر وقتی می‌خواهید یک اپلیکیشن کاملاً جدید در Xcode 11 بسازید و SwiftUI را فعال می‌کنید هیچ کنترلری ایجاد نمی‌شود. البته این به آن معنی نیست که نمی‌توان از الگوی طراحی MVC در SwiftUI استفاده کرد، بلکه صرفاً به این معنا است که یک الگوی معماری متفاوتی به نام MVVM در SwiftUI برای رفع نیازهای ما در این فریمورک عملکرد بهتری ارائه می‌کند. الگوی MVC ساختاری سه لایه دارد و در توسعه وب با چارچوب MVC در PHP بسیار کاربردی است.

در این مقاله یک اپلیکیشن خبری کامل با استفاده از SwiftUI و الگوی طراحی MVVM ایجاد می‌کنیم و به این ترتیب به بررسی الگوی MVVM در SwiftUI می‌پردازیم.

پیاده‌سازی

در این اپلیکیشن خبری آخرین عناوین اخبار را از وب‌سایت NewsAPI.org دریافت می‌کنیم. ثبت نام در وب‌سایت NewsAPI.org برای به دست آوردن کلید API جهت ارسال درخواست به این سرویس ضروری است.

وب‌سرویس و مدل‌ها

پیش از پرداختن به بخش SwiftUI ابتدا یک وب‌سرویس ایجاد می‌کنیم که مسئول بازیابی آخرین خبرها از NewsAPI خواهد بود. این وب‌سرویس به صورت زیر پیاده‌سازی می‌شود:

تابع loadTopHeadlines همه مقالات را بازیابی می‌کند و مدل Article را پر می‌کند. مدل Article و NewsResponse به صورت زیر پیاده‌سازی شده‌اند:

مدل‌های نما

این مدل‌ها داده‌ها را از وب‌سرویس می‌گیرند و سپس آن را به «مدل‌های نما» (View Models) که مسئول نمایش دادن آن روی صفحه هستند، تحویل می‌دهند. ArticleViewModel مسئول یک مقاله منفرد است که در یک سلول شامل کنترل List، نمایش خواهد یافت. پیاده‌سازی ArticleViewModel به صورت زیر است:

ArticleViewModel با پروتکل Identifiable سازگار است، زیرا باید داده‌ها را به List ارائه کند. List از مشخصه id برای مطمئن شدن از یکتا بودن محتوا بهره می‌گیرد. سپس ArticleListViewModel را پیاده‌سازی می‌کنیم. این مدل نما مسئول بازتاب محتوای کل صفحه است. ArticleListViewModel ضمناً از وب‌سرویس بهره می‌گیرد تا همه مقالات اخیر را بازیابی کند.

چند نکته در ArticleListViewModel وجود دارد که باید مورد اشاره قرار دهیم. ابتدا این که با پروتکل BindableObject سازگار است. این به آن معنی است که می‌تواند رویدادها را به مشترکان انتشار دهد و می‌تواند به نماهای روی صفحه اتصال یابد. تنها الزام BindableObject، الزام به پیاده‌سازی رویداد didChange است. رویداد didChange به مشترکان اطلاع می‌دهد که داده‌های جدیدی موجود شده است.

در تابع fetchTopHeadlines از یک درخواست وب‌سرویس ایجاد می‌کنیم تا همه مقالات خبری را بازیابی کنیم. زمانی که همه مقالات دریافت شدند، به مشخصه articles انتساب می‌دهیم که یک متد به نام didSet دارد. بدین ترتیب رویداد didChange در self ارسال می‌شود که در این مورد ArticleListViewModel است. اکنون تنها نکته‌ای که مانده این است که مطمئن شویم مقالات روی صفحه نمایش یافته‌اند. SwiftUI این کار را به سادگی ممکن ساخته است.

SwiftUI

استایل اعلانی ارائه شده از سوی SwiftUI موجب شده که ساخت اینترفیس بسیار آسان شود. کد کامل برای SwiftUI که در فایل ContentView.swift نوشته می‌شود به صورت زیر است:

نخستین نکته‌ای که توجه ما را جلب می‌کند، این است که مدل دارای علامتی به صورت ObjectBinding@ است. معنی آن این است که وقتی مدل در نهایت تنظیم شود، پس از فراخوانی ناهمگام، اقدام به رندر مجدد صفحه با اجرای مشخصه body می‌کند. اگر ObjectBinding@ را با State@ عوض کنید، همچنان به همین صورت عمل می‌کند. اما مقصود از State@ با ObjectBinding@ تفاوت‌هایی دارد. تصویر زیر اپلیکیشن را در عمل نمایش می‌دهد:

MVVM در SwiftUI

اگر این مطلب برای شما مفید بوده است، آموزش‌ها و مطالب زیر نیز به شما پیشنهاد می‌شوند:

==

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

آیا این مطلب برای شما مفید بود؟

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *