# CS193P - Lecture 1: Getting started with SwiftUI - 82 mins

* Demo code at `cs193p.stanford.edu`
* How-to and How-things-work course
* How SwiftUI is doing what it's doing
* Prerequisites for student for this course is at least 3 and recommend 4 intro CS courses.
* * They are relatively experienced programmers.
* Object-oriented programming
* Swift
#
## [05:30](https://youtu.be/bqu6BquVi2M&t=5m30s)
* Simulators on iPhone 11 and iPhone 8
* The demo app is called Memorize, the course will create the app as home work.
* A card matching game
* Animation is very easy to do in SwiftUI
* Do rotation in simulator then the card resize themselves a little bit.
#
## [12:00](https://youtu.be/bqu6BquVi2M&t=12m00s)
* Intro about Xcode and how to download it
#
## [13:50](https://youtu.be/bqu6BquVi2M&t=13m50s)
* Intro the splash screen of Xcode
* Source control and repository will be involved later.
#
## [14:50](https://youtu.be/bqu6BquVi2M&t=14m50s)
* Hands on creating a new project
* "Choose a template for your new project” in create a new project dialog, and choose iOS project to create.
* Explanation about all those fields in the "Choose options for your new proeject" dialog, e.g. Team, Organization Identifier...etc. and covention about those value.
#
## [19:40](https://youtu.be/bqu6BquVi2M&t=19m40s)
* Where you going to put this thing in your file system?
* Stongly recommend to put in you home directory in a folder called Developer.
#
## [21:20](https://youtu.be/bqu6BquVi2M&t=21m20s)
* Wola, the project create successfully.
* Briefly introduction about Xcode UI buttons...etc.
* Desmonstrate
* prees play button to start the app simulation
* launch the simulater
* stop button
#
## [23:50](https://youtu.be/bqu6BquVi2M&t=23m50s)
* Introduciton about **Navigator** in the Xcode.
* default is the one to navigate by file.
* Introduction about the **Inspector** in the Xcode, and will talk about it later.
* Main editting window. Previewer which previews your UI.
* Code editing, preview and inspector are stay in sync. Basic manipulation in real project.
* [29:30](https://youtu.be/bqu6BquVi2M&t=29m30s) Assets.xcassests, which is like images, sounds and videos, those kind of assets.
* [30:43](https://youtu.be/bqu6BquVi2M&t=30m43s) Info.plist, essentially the setting of your app, we usually don't edit it directly.
* [32:10](https://youtu.be/bqu6BquVi2M&t=32m10s) main program, @main
* [35:30](https://youtu.be/bqu6BquVi2M&t=35m30s) struct. Not only parameters, we can also have function in struct. And functional programming.
* Swift support both object-oriented programming and functional programming.
* **:View** behind ContentView, to make the contentview behave like a view. The only one thing you have to do to behave like a view is to have the variable "**body**".
* A view can display things inside the rectangle area and receive input from the user in the form of multi-touch events, e.g. tap, swipe, pinch, things like that.

struct ContentView: View {
    var body: some View {
       // 
    }
}

* [43:00](https://youtu.be/bqu6BquVi2M&t=43m00s) Intro to variable.
* The keyword "**some**". var body: some View, the type of this body is something that behaves like a View. The body view is always going to be a combiner View.
* "some view" is like some advice to the compiler, "Hey, this variable's type is going to be some view. Please go figure out what it actually is and replace it with that when you compile it"
1. Just a declaration, this is going to be some combiner view.
2. We are going to make the code in the function more and more complicated, and make the compiler to do what it is good at.
* In the body, we actually have a "**return**" statement, and the return just be hidden by Swift just to make the world look a little nicer.
* The body is not a function with no name, takes no arguments. It returns in this case, a Text. This var body is not actually stored in memory. It's not a variable stored in memory. It's a variable that's calculated by executing this function.
* The teacher spent couple minutes to use anology to introduce swift coding to lego subsequently.

* [**56:00**](https://youtu.be/bqu6BquVi2M&t=56m00s) What is going on when we add modifier .padding to the Text. .padding is the way you calle a function in Swift. Default padding will be platform specific, which means the padding will be different in different platform.
* The padding function returns something. And the padding is called a modifier.
* What it return is something that behaves like a View. It returns a padded, modified other view which happens to be a Text in this case. The thing returned by .padding() might be "**modifiedContent**" .
* reference A: [Why modfier order matters](https://www.hackingwithswift.com/books/ios-swiftui/why-modifier-order-matters)
* reference B: [Understanding SwiftUI: Modfiers](https://dev.to/mtsrodrigues/understanding-swiftui-modifiers-3e50)
* [01:02:00](https://youtu.be/bqu6BquVi2M&t=1h02m00s) RoundedRectangle, RoundedRectangle(cornerRadius: 25.0). We have argument with argument label "**cornerRadius**", this is becuase we might have the argument with the label speicifying the size. If we don't specifying the lable, and have RoundedRectangle(25.0), it's not clear enough what that 25.0 is.
* The sample for text and color don't have the string or color lable becuase those are kinda redundant.
* add modifier in "**Inspector**", once we choose a modifier, then corresponding section shows up in the "**Inspector**".
* It's very common to make the modifier into a new line.
* [01:09:00](https://youtu.be/bqu6BquVi2M&t=1h02m00s) ZStack, argument "alignment" and "content". A bags of lego which is called "**TupleView**", though you will never type this in your code.
* ZStack stacks these views on top of each other from the device out towards the use.
* [01:14:00](https://youtu.be/bqu6BquVi2M&t=1h14m00s) modifiers. If you add modifier to the ZStack, this kind of modifer gets passed on to all views inside.
* Then the color of the ZStack will be the default color for those views inside that it's inheriting from its container.

* [01:19:00](https://youtu.be/bqu6BquVi2M&t=1h19m00s)Trialing closure, e.g. ZStack.