Новые методы, которые следует учитывать при использовании MVVM в вашем приложении

Некоторое время назад я написал статью о реализации Паттернов проектирования MVVM в iOS с использованием языка программирования Swift. Я получил много отличных отзывов о статье.

Эта статья является обновлением моей исходной статьи и фокусируется на новых методах реализации приложений iOS, включая шаблон проектирования MVVM.

Идея статьи вращается вокруг приложения для заказа кофе. Бариста принимает заказ от клиента, который включает в себя:

  • Имя
  • Эл. адрес
  • Тип кофе
  • Размер кофе

Заказ отправляется на сервер и сохраняется. Наконец, бариста может просматривать все заказы клиентов в списке. Демонстрация приложения показана ниже:

Давайте начнем.

Сервер

Я реализовал сервер в Node.js с помощью Экспресс. Сервер действительно не так важен для целей этой статьи. Полная реализация сервера показана ниже:

Как видите, для нашего сервера не используется никакая база данных. Заказы на кофе сохраняются в памяти. В реальном приложении вы обязательно будете использовать базу данных, иначе все заказы волшебным образом исчезнут при перезапуске сервера, что приведет к недовольству клиентов.

Сервер также размещен публично на Heroku по следующему URL.

Клиент веб-сервиса

Наша первая задача - получить все заказы с сервера. Для этого мы реализуем клиент API веб-службы в нашем приложении для iOS.

Мы начнем с создания нашей структуры ресурса, которая будет представлять тип ресурса, URL-адрес и метод (GET / POST), используемый для доступа к ресурсу.

Затем мы реализуем клиент Webservice, как показано ниже:

Класс Webservice использует преимущества нового типа результата в языке программирования Swift 5.

Результат позволяет нам связать функции успеха и неудачи, что упрощает обработку двух случаев. Если вы хотите узнать больше о типе результата, посмотрите мое видео ниже:

Webservice вернет данные JSON, которые можно сопоставить с нашей моделью. В следующем разделе мы реализуем нашу Order модель.

Реализация модели

Как только Webservice вернет данные, нам нужно сопоставить их с нашей моделью. Swift 4 представил протокол Codable, который помогает нам легко сопоставить результат JSON с классом или структурой в соответствии с протоколом Codable.

Реализация модели Order показана ниже:

Структура Order предоставляет те же свойства, что и возвращаемые веб-API.

Помните, что свойства модели не обязательно должны совпадать с ответом, возвращаемым API. Вы можете использовать протокол CodingKey для предоставления настраиваемого сопоставления. Пользовательское сопоставление выходит за рамки этой статьи.

Наша модель Order также состоит из нескольких вспомогательных методов, которые позволяют ей создавать ресурсы. Взгляните на следующие методы:

Каждый метод будет отвечать за возврат объекта Resource, который предоставляет информацию о том, как работать с ресурсом.

Метод create принимает объект модели представления и использует его для создания экземпляра заказа, а затем передает объект заказа в веб-службу.

После того, как модели заполнены, им необходимо отобразить данные в представлении. Здесь в игру вступает концепция моделей представления.

Реализация моделей представления

Основная идея модели представления состоит в том, чтобы взять данные из модели, а затем предоставить данные представлению.

Давайте посмотрим, как работает OrderViewModel, который отвечает за отображение данных о заказе на экране.

OrderViewModel - это простая модель представления, которая просто возвращает данные как примитивный тип в представление. Поскольку он не возвращает сложный объект, данные можно легко отобразить в представлении.

Модели просмотра могут быть как умными, так и простыми.

  • В моделях Smart View может быть логика для выполнения Webservice вызовов через уровень веб-службы.
  • Модель представления называется простой, если она просто предоставляет данные для представления и не выполняет никаких сложных операций.

OrderViewModel представляет каждый заказ, который будет отображаться в элементе управления UITableView.

Хотя вы можете просто использовать массив OrderViewModels и заполнить свой UITableView, я рекомендую создать родительскую модель представления, которая представляет все представление.

Таким образом, у вас всегда будет возможность предоставить данные для дополнительных элементов представления, таких как SegmentedControl, PickerView и т. Д.

Модель родительского представления в нашем приложении называется OrderListViewModel. OrderListViewModel представляет собой весь экран, который отвечает за отображение заказов.

Вторая модель представления, которую мы реализуем, называется AddCoffeeOrderViewModel. Эта модель представления отвечает за предоставление данных, а также сбор входных данных с экрана Добавить заказ кофе.

Если вы посмотрите на экран заказа кофе ниже, вы поймете, что экран заказа кофе требует нескольких разных вещей, прежде чем мы сможем заказать кофе.

К счастью, вся эта информация может быть предоставлена ​​представлению с помощью AddCoffeeOrderViewModel.

Следует обратить внимание на свойства типов и размеров AddCoffeeOrderViewModel.

Оба свойства возвращают [String], который позже привязывается к экрану. Возвращая примитивные типы, мы упрощаем отображение информации на экране.

Добавление нового заказа на кофе

Теперь, когда мы отобразили на экране типы и размеры кофе, осталось только заказать новый кофе. Это реализовано в AddCoffeeOrderViewController.

Когда человек нажимает кнопку сохранения, мы собираем все выборы из пользовательского интерфейса, заполняем экземпляр AddCoffeeOrderViewModel, а затем делаем запрос через веб-службу, которая вставляет новый порядок.

Реализация показана ниже:

Имейте в виду, что после заполнения модели представления выбранными пользователем параметрами мы преобразуем модель представления в ресурс с помощью функции Order.create, а затем отправляем ее на сервер с помощью уровня нашего веб-сервиса.

В этой статье мы не использовали стороннюю платформу для привязки пользовательского интерфейса к виртуальной машине. Вы можете использовать RxSwift или Bond framework для выполнения однонаправленной (UI to VM) привязки в вашем приложении.

Шаблон проектирования MVVM позволяет нам разделить наш интерфейс на более мелкие компоненты. Это помогает нам создавать больше настраиваемых приложений, а также помогает нам писать модульные тесты для нашего приложения.

Имейте в виду, что только потому, что вы используете шаблон проектирования MVC, это не означает, что вы получите массивный контроллер.

Есть способы реорганизовать ваш контроллер и убедиться, что он экономичен. Никогда не стоит винить шаблон проектирования в собственных ошибках. В конце концов, это всего лишь шаблон дизайна.

Ресурсы

  1. MVVM в iOS
  2. "Исходный код"