iOS SwiftUI 2023

Стэнфордский курс CS193p — «Developing  Application for iOS with SwiftUI» («Разработка приложений для iOS с помощью SwiftUI») объясняет как создавать приложения для iPhone и iPad, используя SwiftUI.

Предложенные в весеннем семестре 2023 года (Spring 2023) Лекции читались лично, но, к сожалению, не были записаны на видео. Тем не менее, мы сделали скриншоты экрана ноутбука (capture the laptop screen) с презентациями и демонстрациями, а также соответствующий звук. Посмотреть эти скриншоты можно по ссылкам ниже. Вы также найдете ссылки на вспомогательные материалы, которые распространялись среди учащихся в течение семестра (домашние задания, демонстрационный код и т. д.).

Учебная программа по существу аналогична версии Spring 2021, поэтому, если вы ее уже смотрели, вы можете найти Лекцию 14 наиболее интересной (асинхронное программирование на основе акторов). Также обратите внимание, что всемирная конференция разработчиков WWDC 2023 уже прошла, и внесенное там изменения, вероятно, повлияют на представленный ниже учебный курс, — наиболее значимое обновление внесено в механизм реактивного UI в SwiftUI (@Observable против ObservableObject). Предположительно, ObservableObject какое-то время будет обратно совместим с новыми версиями, но начиная с Xcode 15/iOS 17 вы, вероятно, захотите перейти на использование @Observable.

P.S. В русскоязычных иллюстрированных конспектах Лекций сделаны пометки на полях, касающиеся изменений в iOS 17, а также восполнены некоторые фрагменты Лекций, где есть звук, но пропадает изображение того, что профессор демонстрирует что-то «в живую».

Наслаждайтесь!

Лекция 1. Начинаем со SwiftUI.

Введение в курс. Основы SwiftUI. Начинаем работать над первым приложением этого семестра — карточной игрой под названием Memorize. Это будет основой учебного материала для первых нескольких недель курса. Демонстрация основ композиции элементов пользовательского интерфейса (UI), используемой в SwiftUI, происходит в среде разработки Xcode.
Смотреть в YouTube.
Русскоязычный иллюстрированный конспект Лекции 1.

Задание на чтение 1.

Лекция 2. Больше о SwiftUI.

Разработка игры Memorize продолжается. Создание пользовательских View. Обработка жеста касания TapGesture. Добавление кнопок Button. Факторизация повторяющегося кода.

Смотреть в YouTube.
Русскоязычный иллюстрированный конспект Лекции 2.
Задание на программирование 1.

Лекция 3. MVVM.

Концептуальный обзор архитектурной парадигмы, лежащей в основе разработки приложений для iOS с использованием SwiftUI, известного как MVVM. Объяснение фундаментального компонента понимания языка программирования Swift: его системы ТИПов. Начало применения обоих для игры Memorize.

Смотреть в YouTube.
Русскоязычный иллюстрированный конспект Лекции 3.

Лекция 4. Применение MVVM.

Примените архитектуру MVVM к приложению Memorize. Попутно познакомимся с дженериками и получим представление о static переменных и функциях. Создание реактивного UI. Продолжим изучать возможности Xcode.

Смотреть в YouTube.
Русскоязычный иллюстрированный конспект Лекции 4.
Задание на чтение 2

Лекция 5. Протоколы protocol, перечисления enum, Optional

Основная тема — протоколы (Identifiable, Equatable и т. д.). Кроме того, ещё один важный элемент системы ТИПов в Swift, перечисление enum представлен с самым важным перечислением enum в Swift: Optional. Логика Memorize завершается использованием вычисляемых свойств.

Смотреть в YouTube.
Русскоязычный иллюстрированный конспект Лекции 5.
Задание на программирование 2.

Лекция 6. Расположение на экране Layout, @ViewBuilder

Как SwiftUI отображает свои Views, учитывая доступное ему пространство? И как мы можем создать свои собственные «механизма компоновки» Views? Обновление игры Memorize, чтобы максимально эффективно размещать любое количество карт на экране без прокрутки. «Закулисье» @ViewBuilder, используем @ViewBuilder для вычисляемых переменных, в инициализаторах init для аргументов-функций и переменных var в структурах struct.

Смотреть в YouTube.
Русскоязычный иллюстрированный конспект Лекции 6.
Задание на чтение 3
Задание на программирование 3.
Код AspectVGrid.swift.

Лекция 7. Геометрические фигуры Shape, модификаторы ViewModifier, константы Constants

Как рисовать геометрические фигуры Shape в SwiftUI (например, геометрическую фигуру в в виде «пирог» Pie, необходимую для будущей анимационной «фичи» игры Memorize). Как создавать собственные модификаторы ViewModifier (например, тот, который «картифицирует» (то есть превращает в карту) любое View, а не только нашу игровую карту Memorize). Попутно представим формализм для аккуратного добавления констант в наш код.

Смотреть в YouTube.
Русскоязычный иллюстрированный конспект Лекции 7.
Код Cardify.swift.
Код Pie.swift.

Лекция 8. Анимация (часть 1)

Первая часть анимационного приключения, состоящего из двух частей. Неявная (implicit) анимация против явной (explicit) анимации. Кривые анимации. Анимация модификатора ViewModifier (переворот карт).

Смотреть в YouTube.
Русскоязычный иллюстрированный конспект Лекции 8.
Задание на чтение 4.

Лекция 9. Анимация (часть 2)

Запуск анимации при появлении Views (усовершенствование «летящего» счета score). Анимация изменений состояния с помощью TimelineView ( «бонусные очков» для «пирога» Pie). Анимация «переходов» Views на экран и с экрана и соответствие геометрии этих Views (cдача карт в игре Memorize с помощью модификатора matchedGeometryEffect).

Смотреть в YouTube.
Русскоязычный иллюстрированный конспект Лекции 9.
Задание на программирование 4.
Код Memorize.

Лекция 10. EmojiArt

Создание приложения для iPad с нуля: Emoji Art. Это возможность заново взглянуть на MVVM, поскольку это приложение имеет совершенно другую архитектуру, чем игра Memorize. Оно использует SwiftUI Drag & Drop механизм для установки фонового изображения документа Emoji Art и добавления эмодзи (смайликов) в произведения искусства, которые вы можете создать с помощью этого приложения.

Смотреть в YouTube.
Русскоязычный иллюстрированный конспект Лекции 10.
Код EmojiArt L10.

Лекция 11. Жесты, вторая MVVM

Обработка мультитач-жестов (масштабирование и перемещение по экрану документов Emoji Art). Начинаем создавать более сложные приложения, добавив в приложение вторую конструкцию MVVM (палитры смайликов Emoji Art).

Смотреть в YouTube.
Русскоязычный иллюстрированный конспект Лекции 11.
Задание на программирование 5.
Код EmojiArt L11.

Лекция 12. Постоянное хранение (Persistence). Обертки свойства (Property Wrappers)

Обеспечение сохранения информации между запусками приложения. Emoji Art сохраняет свой документ, а также любые изменения, внесенные в его палитры. Файловая система и UserDefaults. Узнаём больше о том, как работают оболочки свойств (например, @State, @Published и т. д.).

Смотреть в YouTube.
Русскоязычный иллюстрированный конспект Лекции 12.
Код EmojiArt L12.

Лекция 13. Представляющие (Presenting) Views, Navigation

До сих пор каждое из наших двух приложений состояло только из одного основного «content View» ( EmojiMemoryGameView игры Memorize или EmojiArtDocumentView для приложения Emoji Art). Более сложные приложения должны представлять множество различных видов Views. Добавление в Emoji Art механизмов редактирования его палитр, представление всплывающих окон .popover, модальных листов .sheet и т.д., а также навигации между Views.

Смотреть в YouTube.
Русскоязычный иллюстрированный конспект Лекции 13.
Задание на программирование 6.
Код EmojiArt L13.

Лекция 14. Многопоточность, Обработка ошибок

UI мобильных приложений должен всегда быть отзывчивым, даже если он может выполнять действия, которые занимают (относительно) много времени (например, загрузка чего-либо из Интернета). Язык Swift имеет встроенный механизм, позволяющий прояснить, какие действия должны происходить «в фоновом режиме», чтобы не замедлять работу UI. При этом также важна обработка непредвиденных ошибок, поэтому в этой лекции обе темы представлены вместе.

Смотреть в YouTube.
Русскоязычный иллюстрированный конспект Лекции 14.
Код EmojiArt L14.

Продолжение следует…