CS193p iPhone Application Development Spring 2020

The series of video lectures given to Stanford University students in Spring of 2020 continues with a conceptual overview of the architectural paradigm underlying the development of applications for iOS: MVVM. In addition a key concept in the Swift Programming Language, its type system, is explained. The Memorize demonstration continues, incorporating MVVM. It is impossible to develop applications for iOS using SwiftUI without using the MVVM architecture for organizing your code. This lecture explains what that is and then demonstrates how it works in our demonstration application. SwiftUI development happens entirely in the programming language Swift. Swift is unique in its support of most modern language features, including both object-oriented programming and functional programming. Since functional programming is new to most Stanford students, this lecture starts the process of explaining how it works by covering the basics of Swift’s type system, including structs and classes, gen

The first of the lectures given to Stanford University students who took CS193p, Developing Applications for iOS using SwiftUI, during Spring quarter of 2020. Paul Hegarty covers the logistics of the course and then dives right into creating an iOS application (a card-matching game called Memorize). The Xcode development environment is used to demonstrate the basics of SwiftUI’s declarative interface for composing user-interfaces. Note that this is not an active, on-line course. It is a release of lecture videos that were already given to Stanford students as part of its normal curriculum.

The third of the lectures given to Stanford students in Spring quarter of 2020 demonstrates the mechanisms supporting SwiftUI’s reactive UI paradigm by enhancing Memorize to flip the cards over when they are tapped. Protocols, an important Swift language feature, are covered in detail as is some of the API for laying out Views, including the “Stacks”, View modifiers and GeometryReader. A fundamental principle of MVVM in SwiftUI is the reactive, declarative approach to building UIs. The View of our MVVM is always automatically reflecting the state in our Model, creating a single source of “truth” for the heart of the application’s logic and storage. Added to that, we formalize the concept of capturing the user’s “intent” to do something and using that to change the Model appropriately. Going back to our demo, we apply this to our Memorize application by using @ObservedObject and @Published to make tap gestures cause cards to flip over. After that, we dive back into an exploration of a v

The fourth video lecture given to Stanford students in Spring quarter of 2020 continues the Memorize demo by enhancing significantly the arrangement of the cards by creating our own container View called Grid (which also involves a number of basic functional programming concepts). Two more important Swift language features are discussed (enum and Optionals). And we finally get Memorize playing the card matching game itself (prominently featuring Optionals in our implementation). The survey of the Swift type system completes with a discussion of enum, a data structure with more functionality built into it than students are used to from other languages. While the reading assignments in this course are the primary way students learned the Swift language, occasionally a very important feature of the language is highlighted in lecture, as in this lecture where Optionals are explained in detail and then extensively demonstrated as we use them prominently in our implementation of the full gam

Animation was the topic of lecture 6 of Stanford Spring 2020’s iOS Application Development course. After covering some ancillary topics like local, ephemeral state in Views (@State) and property observers, the lecture goes into a deep dive on animation, including implicit vs. explicit animations, transitions, Shape animations, animating ViewModifiers and more. These concepts are then installed in the Memorize demo by animating the flipping of cards, creating a new game and giving bonus points for quick matches. In SwiftUI, any changes to ViewModifiers or Shapes can be animated. Views can animate changes either implicitly (using the animate declaration) or explicitly (by wrapping a withAnimation function call around code that might cause changes, most notably Intent functions in the ViewModel) and can control the duration and “curve” of the animation. The “arrival and departure” of Views on screen can also be animated using the transition declaration (which declares which ViewModifiers

The fifth iOS lecture given at Stanford during Spring quarter of 2020 expanded coverage of topics related to drawing on screen including the @ViewBuilder construct for expressing a conditional list of Views, the Shape protocol for custom drawing and ViewModifier, a mechanism for making incremental modifications to Views. This lecture starts with an aside about access control (marking APIs so that they are revealed to the right “audiences” within an application) which is then applied throughout Memorize. After the Shape protocol is discussed, a “pie shape” is added to the background of Memorize cards in demo in preparation for animating a countdown timer for scoring. A custom ViewModifier is also added to Memorize to “cardify” any View (i.e. make the View appear to be on a card that has a front and a back).

Lecture 7 of Stanford’s iOS Development course from Spring 2020 begins with a conceptual discussion of multithreading and then launches into a completely new demonstration, EmojiArt, reviewing MVVM and then using SwiftUI API such as ScrollView, UIImage, Drag and Drop, and background/overlay to create an “emoji artist’s” tool. The demo circles back to multithreading by showing how to use this technology to keep the downloading of an image from the internet from blocking the responsiveness of the application.

Lecture 8 of Stanford’s iOS development course from Spring 2020 covers some persistence topics (UserDefaults API and JSON encoding/decoding) and the conceptual underpinnings of multi-touch gesture handling. We start adding these capabilities to EmojiArt by making its Model be convertible to/from JSON (using the Codable protocol) and then storing it (for now) in a lightweight storage vehicle. After that, pinch and drag gestures are added to EmojiArt to allow the user to zoom in and out and pan around in their document.

Lecture 9 of Stanford’s iOS Development course from Spring 2020 covers the basics of data flow, including Publishers and Bindings. These mechanisms allow for formalized references to the “truth” of data rather than requiring it to be replicated which can be error-prone. A basic explanation of property wrappers helps clarify what @ObservedObject, @EnvironmentObject, @Published, @State, @Binding, etc. are all about. The demo shows publishing the arrival of the background image for our EmojiArt document as well as auto-saving the document when changes are noticed (i.e. published). Finally, our UI is enhanced to let us choose from multiple palettes of emoji where a Binding is used to link our new palette chooser to our main EmojiArt UI.

The tenth lecture of Stanford’s Spring 2020 course CS193p is an immersive demo that illustrates a myriad of SwiftUI features, including TextFields, Forms, NavigationViews, Lists, sheets, popovers, Alerts, edit mode, and more. In particular, we start by adding a popover with a Form to our EmojiArt document that allows editing the emoji palette. The Grid from Memorize is brought over and revamped using advanced generics functionality to display the emoji in the palette editor. We then cover how to add multiple MVVM ViewModels to a single iOS application and navigate between those Views using NavigationViews and NavigationLinks. This allows the addition of an EmojiArtDocument store that allows users to keep track of multiple EmojiArtDocuments. We conclude by fixing some bugs and adding edit and delete functionality to the EmojiArtDocument store.