Stanford CS193p: iOS Development with SwiftUI | 2025 | L1: Intro to Xcode and SwiftUI

Welcome to Stanford CS193P spring of 2025 lecture number one. I'm Paul

Hegerty by the way. I've been teaching this class for 14 years here. 15 years

something like that. I don't know how long has the iPhone been out pretty much since the start of the iPhone coming out. Today I'm going to do this brief,

out. Today I'm going to do this brief, very brief course overview. Then after I do that, I'm going to start with a kind of brief tour of Xcode. Uh people who have done assignment zero have already

launched Xcode and done some stuff, but I'm going to try and briefly explain most of the important parts because we're going to be doing all our work in Xcode and it's a pretty big app. It's

got a lot of features in there, so a tour is warranted. And then I'm going to dive into kind of understanding the real basics of building iOS apps with Swift

UI views. Okay, just the basics of it.

UI views. Okay, just the basics of it.

Then on Wednesday, we will start building an app. Okay? And we're going to take weeks to build this huge app. Uh

and I'll explain in a second here why we use that approach. So what's this course about? Building iOS apps. Of course, you

about? Building iOS apps. Of course, you all know that's why you're here. And

we're mostly going to build iPhone and iPad apps, but actually we're going to make our app work on Mac OS as well. And

one thing that's really cool about Swift UI is all the tools that you learn to build an app for an iPhone, it works for Apple Watch app building or tvOS or Vision OS. They're all the same tools.

Vision OS. They're all the same tools.

Now, you might not have the exact same codebase running exactly on the other things as you see when we start on an iPhone and then we switch over to iPad.

It's some slight differences and then a Mac is another slight differences, but for the most part, what you're learning here really portable across all of those uh Apple uh architectures.

What are you going to learn in this class? I mean, a lot of what you're

class? I mean, a lot of what you're going to learn here is going to be kind of familiar to you. Like probably all of you or most of you know object-oriented programming and some of the stuff we're

do we're going to do looks kind of like object-oriented programming, but we're not actually doing object-oriented programming in this class. Swift UI is not object-oriented. And then the

not object-oriented. And then the language we're going to use is kind of looks like C Cish, but it's not. Okay?

It's a different language. It's Swift.

So a lot of the things you're going to learn are going to be completely new.

Okay, this language Swift completely new. It's a very modern language.

new. It's a very modern language.

Incorporates all the best things from a lot of other languages. So it's a great language to learn, but it is a new language and you're going to be learning functional programming or some would say

protocoloriented programming instead of object-oriented programming. Now, how

object-oriented programming. Now, how many people in here have have actual experience writing code in a functional programming language? See, almost

programming language? See, almost nobody. Okay, maybe some people took

nobody. Okay, maybe some people took CS43 or whatever that is, Haskell, that kind of thing, but it's pretty rare.

Okay, so most of you, I'm going to assume you know nothing about functional programming and protocol oriented programming similar. Uh, the other thing

programming similar. Uh, the other thing is probably going to be new if you've been building any kind of user interface on other platforms. Swift UI is a reactive user interface platform. Now,

the only other common reactive one that I see people have some experience with is React. Okay, there's something called

is React. Okay, there's something called React, React Native. It is a cross-platform reactive user interface development environment, whereas Swift UI is just for iOS. So, that's something

I'm going to assume most of you don't have a lot of experience with as well.

If you do know React, that's going to help you here because it's a similar architecture for building UIs. And then

we're going to do some ancillary things like when we do our database stuff, it's going to be structured access to the database. So, we're going to be

database. So, we're going to be accessing a SQL database, you know, tables and rows and all that, but we will access it access it at a much higher level, okay? Uh what you would think of as objects, but it's not

object-oriented programming, but kind of that level, a higher level. So, you're

going to learn that as well. And just in general, this whole course, it's a great place to get real world experience, okay, with all the stuff you're learning in all your other classes. Okay? All

these things I lifted at the bottom here, animation and uh CHI obviously and networking multi-threading even you're going to see all that happening here and all collected into one real world uh

environment. So it's a super good

environment. So it's a super good synthesis class of all the other stuff you're doing. All right. All right.

you're doing. All right. All right.

Prerequisites briefly. The number one prerequisite for this class is you have to have comfort writing a lot of code.

Okay. So if you have not taken a lot of classes or done other projects where you've written a lot of code, you're going to find this is a lot of code to write. Okay? Now that's not because

write. Okay? Now that's not because there's anything about Swift or Swift UI that requires a lot of code. It's just

that I believe that if you want to learn a system like this, you got to actually write the code to do it. So I'm not going to be giving you take-home tests about concepts and all that. I'm just

going to tell you to go write the code.

And if you can write the code, then it's going to show me, oh yeah, you understood the concepts because you just wouldn't even be able to do it otherwise. So if you're coming from

otherwise. So if you're coming from experience of having CS 106A and B and CS 107 and hopefully one or two or three of these other things like CS 108, which I guess is object-oriented programming

these days, and then CS43, I mentioned CS110, I think you do programming in that, right? That's systems. Um or

that, right? That's systems. Um or CS147, I guess you could learn React in that. uh if you have these other things

that. uh if you have these other things then you're going to have enough coding experience where this is going to feel okay I can do this. So it's not extreme programming but it's also not if you're coming straight out of CS 106A this is

going to feel like oh my gosh I got to write an awful lot of code here. Okay so

that's the number one prerequisite for this class. Um I do think it's also

this class. Um I do think it's also important to know some structured programming language object-oriented programming or something not just C like you know level of programming because we

are going to use a very important structured programming approach to make our code understandable so we can build these humongous apps but still have them work and be reliable and debugable and

all that we need a structure and we're not going to do object-oriented programming but it's another thing functional programming protocol oriented programming which similar.

Uh I think it is a bonus prerequisite if you have already learned at least two languages because I'm going to teach you a completely new language here. Okay?

And so if this is only the second language you've ever learned, you only know Python and now you got to learn a second language. That's going to be an

second language. That's going to be an extra burden on you this quarter because you're going to be learning how to learn another language at the same time you're learning all the other stuff. So if you know Python and you know Java and you

know C++, okay, this is going to be fine. you've had seen multiple languages

fine. you've had seen multiple languages is just another one. Look, when you get to where I am, I'm old now. But, you

know, I I know dozens of programming languages and if you tried to teach me a new one, I'd be like whatever. You know,

it's because I understand all the different ways programming languages do different things and it's like there's nothing new under the sun anymore. Okay?

So, the farther along along you are on that uh spectrum, the better because I am going to teach you an entirely new programming language.

All right. How does the course work?

Okay. What are the mechanics of the course? Well, Canvas and Ed discussion

course? Well, Canvas and Ed discussion are crucial in this course. All right.

Most of the communication I'm going to do is right here in lecture. I'm going

to teach you how to do Swift UI. But all

the dis communication you give to me is going to mostly be a discussion. Now, I

absolutely want you to raise your hand and interrupt me here uh in this class.

If you have a question, no problem with that. But a lot of times you don't want

that. But a lot of times you don't want to ask it in class or you don't think of it till later or you're doing your homework and you're thinking about it and that's when you're going to hit ed discussion. And I'm really good at

discussion. And I'm really good at answering Ed discussion questions really fast. Okay? You're probably already

fast. Okay? You're probably already seeing that. Okay? Uh so really I can't

seeing that. Okay? Uh so really I can't emphasize it enough. If you ignore Canvas and Ed discussion, you will not learn in this class. But when we're in lecture, most of the learning is going

to be demos. I'm going to be writing code. Okay? writing code to do Swift,

code. Okay? writing code to do Swift, use Swift UI to build iOS apps. And

that's what you're going to be doing your homework as well. I always try to show you things three times, okay? One

time uh I will show you uh in slides or some kind of explanation and another time I'll write a demo and then the third time you're going to do the homework. So you are really going to

homework. So you are really going to learn the stuff we're doing because you're going to see it multiple times.

So the demos are really, really important. And I'm doing these demos in

important. And I'm doing these demos in what I call a narrative fashion. We're

going to spend the first six or seven weeks in this class on one app. It's

going to be very large by the end. But

the reason I do this one app over six or seven weeks is because I want you to get the feel of what it's like to build a big app. And I call this a narrative

big app. And I call this a narrative approach because it's like we're writing a novel together. You in your homework and me in lecture where we're learning new characters and the plot and the settings. You see what I mean? And that

settings. You see what I mean? And that

all stays the same as we build this bigger and bigger app. Now, there's a different way to learn things like Swift UI, which is what I call the vignette approach. This is the approach where

approach. This is the approach where you're like, I want to use a scroll view in my app. So, you go to chat GPT or you just go to Google and you say, how do you use a scroll view in Swift UI and

you go to some web page or chat GP spits back at you a little dozen lines of code or so that perfectly encapsulates here's how you use a scroll view. You get a little vignette that's teaching you

that. And so narrative is quite

that. And so narrative is quite different, right? We we're building this

different, right? We we're building this big app versus this little 12 15 lines of code. Now, which is better, narrative

of code. Now, which is better, narrative or vignette? Of course, it's both of

or vignette? Of course, it's both of them together. Okay, that is the best.

them together. Okay, that is the best.

The best is when you can get the narrative underlaying like I'm going to give you in the next six or seven weeks.

And then after that, you're going to pound on vignette learning. You're going

to be doing Google and chat GPT all the time to learn new things, new ways to do ways to do things I don't get to in the narrative, which is going to be a lot of things. Okay? It's only six or seven

things. Okay? It's only six or seven weeks. So, those things will go together

weeks. So, those things will go together and you'll see it in your class because during the first six or seven weeks, you'll be doing homework, which is inside the narrative. Okay? All your

homework is going to be related to our narrative. And then when you do your

narrative. And then when you do your final project, which is the last three weeks of the quarter, then you'll be doing vignette learning because you're going to be wanting to show me that you can learn new things. That's one of the most important things about the final

project. Uh lecture slides like this

project. Uh lecture slides like this minimal mostly for concepts for review like I'll do some slides maybe on Tuesday if we have time reviewing what we did just just to keep it fresh in

your mind. And then in terms of

your mind. And then in terms of assignments, you've got reading assignments. For the first four weeks, I

assignments. For the first four weeks, I will be giving this kind of guided approach to reading the Swift programming reference manual. It's big

because Swift is a big language. It's

got functional programming in there.

It's got object-oriented programming in there. It's got protocol oriented

there. It's got protocol oriented programming in there. It's got all of it. It's got so much. It's really great

it. It's got so much. It's really great language, but there's a lot to it. So,

my homework assignments will guide you through it in a way where you can consume it in a sensible way because I can't really expect you to consume all of it as just one big chunk like that.

At the very least, I want you to do all the reading of the language learning just so you know what it can do. Even if

you read something, you're like, "What is it? What is that feature? I don't

is it? What is that feature? I don't

really get that language feature." At

least you'll know that there's such a language feature out there. And then

when I mention in lecture, you're like, "Oh, that's what that is."

And then you will have five programming assignments. And these programming

assignments. And these programming assignments uh build on each other. So

assignment one which is going to go out on Wednesday will be due next Wednesday.

And then assignment two is going to go out next Wednesday. It will build on assignment number one. So if you're late turning in assignment one, oh now you're late to assignment two. It's going to cascade. And same thing three, four, and

cascade. And same thing three, four, and five all build on each other. Like I

say, they're mostly week-l long assignments. I'm kind of thinking maybe

assignments. I'm kind of thinking maybe for assignment three I might give you an extra few days or maybe that's 10day you know kind of a thing but I'll play it by ear. We'll have to see how it goes. And

ear. We'll have to see how it goes. And

then the final project. So the last three weeks I will give you no homework assignments and you'll spend entirety of your time on the final project. And your

final project you get to choose what it is. You can do anything you want. There

is. You can do anything you want. There

is a process whereby you run it by us.

So we can look at it and tell you uh no you're never going to get enough points to pass this class with that simple idea or whatever. Um and so you can get some

or whatever. Um and so you can get some guidance from us doing that. Yeah.

Question.

>> I haven't joined the course for just the final project individual.

>> Yeah. So uh question here is is the final project an individual only because all the homework stuff is individual only and the final project is generally individual only although I will allow

under certain circumstances teams of two. So when you get on Canvas and you

two. So when you get on Canvas and you read the course description, it explains all the rules for that. But there are rules, but no more than two. No more

than two. And it's actually more work to do this final project in a team of two than it is to have two individuals do it. And that's explained in the document

it. And that's explained in the document as well.

All right, so let's get started. And

we're going to build this application together. But before we can get started

together. But before we can get started with the app we're going to build, we got to learn a little bit about Xcode and a little bit about Swift UI. The

heart of Swift UI. That's what we're going to learn today. It's heart. So,

let's go over to Xcode.

How many of you have done assignment zero?

Oh, most of you. Okay, great. So, if

you've done assignment zero, then you have Xcode. If not, no problem. You're

have Xcode. If not, no problem. You're

just going to download this thing from the app store. Now, uh Xcode when you launch it has this splash screen and on the right is all the projects that you've ever worked on. And if you've never worked on Xcode, this is empty

like this. But as you go along the

like this. But as you go along the quarter and you're doing your homework assignments, uh you will see this in here. And then on the right is just

here. And then on the right is just three ways of creating a project. Either

creating a new one, cloning one from a GitHub repository, uh or opening an existing project on disk. So we're

obviously going to be creating our first new project here. You can also do it with the file menu as I said in assignment zero. Go down here, say file,

assignment zero. Go down here, say file, new project. When you do this, it puts

new project. When you do this, it puts up this little thing. And what this is asking you is what template do you want to get started here? And there are actually a ton of templates because

there's a lot of different kinds of apps that you can build. Different iOS apps, Mac OS apps, watch OS apps, Apple TV apps, vision apps, etc. And we're going

to start first of all with a multi-platform app because we again we want our app to work on iPhone and then it's going to work on iPad and then it's going to work on Mac OS, right? Right.

So, another platform and we're going to pick this one app in the upper left which is the basic app. And why are we choosing that? Because we're just

choosing that? Because we're just getting started. We're just learning all

getting started. We're just learning all those other things. I would have to teach you other stuff to use those build those other kinds of apps. Now, it's

saying where do you want to store this thing? And this is the most important

thing? And this is the most important step of this whole thing. Okay? Because

you want to put it in the directory you cloned from GitHub. So, if you're watching this lecture and you haven't done assignment zero now, you definitely want to pause and go do assignment zero because you need to clone a directory

out of your repository in GitHub. And

then you want to put this in there. Now,

one way to really check and make sure you're doing the right thing is this right down here. You see where it says create git repository on my Mac? That

should be grayed out. Uh, if you've picked the thing you cloned, then the repository is in GitHub, so it won't even offer you this. So, this is the thing I cloned. I'm going to create it.

I did assignment zero. You briefly saw it get created right there. And this is it. So, let's go ahead and make this

it. So, let's go ahead and make this nice and big. We can see what's going on here. And I'm going to give you a tour

here. And I'm going to give you a tour of Xcode here in a big spiral. Okay. I'm

going to start in the upper left. I'm

going to spiral around the edges until I get to the middle. And the middle is all this code in here. So, let's start with the spiral. Upper left corner is this

the spiral. Upper left corner is this button right here. This button hides and shows this grayish blue thing on the left. That thing is called the

left. That thing is called the navigator. It's called the navigator

navigator. It's called the navigator because it lets you navigate your application in lots of different ways.

For example, this is in the you can see it's on the leftmost tab right up here and here. Uh this is navigating by files

and here. Uh this is navigating by files basically. So we're seeing a file here

basically. So we're seeing a file here content view. It's a swift file. You see

content view. It's a swift file. You see

that little orange swift spurred there?

This is a Swift file and that's what this is right here. And then here's another Swift file. This is our main program right here. And here is an interesting one. This is our assets.

interesting one. This is our assets.

This is all of our media, our JPEG files, our sound files, our colors, our app icon is here. If I click here, we don't have an app icon, but that's where it would go, etc. So, that's what this

assets thing is. And you can even click on this top thing. That's your project itself. This project has a lot of

itself. This project has a lot of settings. I mean, every one of these

settings. I mean, every one of these tabs has a lot of stuff in here. And the

great news is about all of these things is that Xcode takes care of them for you. Okay? There's almost nothing you

you. Okay? There's almost nothing you need to do in here. I don't even know if we'll ever go in here in the next six or seven weeks because Xcode is so good at automatically managing things. But you

could do things in here. Look in this first one you see right there. It says

supported destinations. And here they are. We know we're not going to do Apple

are. We know we're not going to do Apple Vision, so I could remove that from the list if I wanted. I don't have to, but I could. And then we're going to build,

could. And then we're going to build, for example, for iOS 18.2, we want to build for the latest thing because we want to learn the latest features in Swift UI and all that, but we're not

going to go here very much. Now, there's

other ways we can navigate. Here's the

navigation to our repositories, like our GitHub repository up there. Uh, here is searching. Navigate by searching. Find

searching. Navigate by searching. Find

and replace. Don't forget there's find and replace and this is projectwide find and replace. There's find and replace in

and replace. There's find and replace in a file of course, but then there's also this projectwide one. Uh there's your break points over here. This is kind of a cool one. This is all the output from

all your previous builds. So you might run your app and it crashes with some warning message and then you think you fix it and you run it again and it has a different message and you're like what was that message that was referred before? And then you can go back and see

before? And then you can go back and see your previous builds which is really kind of cool. So, this thing is the navigator, the project navigator.

There's actually a better way to navigate through the files, which I'm going to get to when we come around the next time of the spiral. So, we usually leave this thing closed.

All right. What's the next thing in our spiral? Oh, it's this button right here.

spiral? Oh, it's this button right here.

This is the play button. This is how you run your application. Now, where is it going to run it? Well, it depends on what's selected here in the middle. So

right now it's my Mac is selected. So

it's going to run my app. This hello

world app that it built for us here on my Mac as a Mac app which is kind of cool. But I told you we're going to

cool. But I told you we're going to start running it on an iPhone. We're

going to build our app on an iPhone first. So I'm going down to the bottom

first. So I'm going down to the bottom here where it has simulators. See where

it says iOS simulators. So we've got iPad simulators of all the various kinds. An iPhone simulator right there.

kinds. An iPhone simulator right there.

And there's even other ones like iPhone 15s and 14s. You can get those from manage run destinations. But I'm going to pick iPhone 16 to run my app. Notice

it changed on screen here. It should be an iPhone as well. And I'm going to hit run. I'm going to hit this play button.

run. I'm going to hit this play button.

Now watch what happens. It's going to actually launch another app. This is the iOS simulator. And it ran our app. There

iOS simulator. And it ran our app. There

it is. Hello World. Now, this is cooler than you think because not only did it go and run our Hello World app, but this is a full iPhone that can be simulated.

You can go into settings and set some settings. You maybe could go over to uh

settings. You maybe could go over to uh mail or to calendar. And why do you need this simulator to have all those things simulated? Well, because your app might

simulated? Well, because your app might interact with the calendar or it might interact with mail. And so, you need your app to have this in the simulator.

Now, the other thing is, of course, you could run your app on your device. If

you take a USB cord and jam it in there, hook it up to your phone. Then, back

over here where we have our choices, one of the choices will be your phone, and then you just click play and it'll run it on your phone. It's simple as that.

It's really, they have made it so simple. Used to be much more of a chore

simple. Used to be much more of a chore to make all that work, but now it's just all completely seamless. It's even

possible if your Mac and your iPhone are on the same Wi-Fi network, you can do it wireless. You don't even need to plug it

wireless. You don't even need to plug it with USB. It'll run it on your phone

with USB. It'll run it on your phone using wireless. It's really very

using wireless. It's really very convenient. And then you can see once I

convenient. And then you can see once I ran, look this little square up here to the left of it, which is stop to stop my simulation running. And you can see over

simulation running. And you can see over here, it was telling us as we were running, running on iPhone. Now it says finished running. That's your status

finished running. That's your status bar. It just tells you what's going on

bar. It just tells you what's going on when you're compiling, etc. We'll tell you that. Uh, all right. Let's keep

you that. Uh, all right. Let's keep

going around in our spiral. This little

guy right here is incredible.

Unfortunately, we will not be doing anything with it in this class. This is

Xcode Cloud. Let's say you build an app and you're about ready to ship it out to the app store. Well, you want to test that thing on every single device on the planet that you want to support, right?

All versions of iPhones, iPads, different versions of the operating system, etc. That's impossible for you to do as an individual developer or even as a company. What are you going to have hundred iPhones lined up on the table

and you're hooking? No, you can't do it.

So, what Xcode Cloud lets you do is upload your app to a server and it runs it on a whole bunch of platforms and then gives you the feedback all the ones that crash, things that didn't work, and again, you've got this great testing

infrastructure, so it can tell you everything what's going on with your app. So, that's what Xcode Cloud is

app. So, that's what Xcode Cloud is about. Obviously, we don't do it here

about. Obviously, we don't do it here because we're not putting it on the app store. We're never getting to that

store. We're never getting to that level, but that's what it's about. This

little beauty, this plus, this is a hidden wonder right here. If you click on that, this is the library. The

library has a whole bunch of nice things you can look up as you're developing your app. This is on the second tab

your app. This is on the second tab right here, this little tab, which is our view modifiers. I'm going to talk about view modifiers at the beginning of Wednesday's lecture, but view modifiers

are at the heart of what we're building.

There's two things at the heart of Swift UI. One is views and the other one is

UI. One is views and the other one is view modifiers. And if you look through

view modifiers. And if you look through this list of view modifiers, there are a lot of them, hundreds of these things.

So mastering Swift UI is eventually learning all these view modifiers, believe it or not, or at least the vast majority of them. But in the meantime, you can kind of come here to library and

search for them. Maybe I'll search for things that have to do with fonts.

Here's a bunch of view modifiers that have to do with font. Even that, there's a ton of them. But here's the font. view

modifier. And you can see it's got the documentation there for you to tell you about it. And same thing with the other

about it. And same thing with the other heart of it, which is views. This is

buttons and color pickers and date pickers and disclosure group. These are

all views, things that we build our UI out of in iOS. Now, I'm going to teach you all about views today. Today is

about views. But there's more in the library. There's also code snippets

library. There's also code snippets here. If you search for things, you can

here. If you search for things, you can like here I search for variable var uh and it's showing me a whole bunch of code snippets that have to do with variables. Like this is a code snippet

variables. Like this is a code snippet for the declaration of a variable.

Variable name equals a value or here is a computed variable which we're going to see going on today. And you can doubleclick here and it'll put that in

your code. And then the see the gray

your code. And then the see the gray things you can tab to them and fill them in. So that's kind of cool part of it.

in. So that's kind of cool part of it.

And then in addition to code snippets, we have colors and images. These are

things in your asset library. Remember I

told you about that assets thing over there? That's these in there. You can

there? That's these in there. You can

name them, look, search for them, etc. And then this one is really cool.

Symbols.

Swift has thousands, thousands, many, many hundreds of symbols that you can use on your buttons and to decorate your UI and all that stuff. And they're all

listed here. Now, you can search for

listed here. Now, you can search for them here. Like this is Stanford. Let's

them here. Like this is Stanford. Let's

search for tree. Oh, there's a tree. A

nice little tree. Doesn't look like the Stanford tree, but it is a tree. You can

search from here. But there's actually another app called SF Symbols, which you can get by going I'll post this on Ed discussion, but you go to developer.apple.com. apple.com and right

developer.apple.com. apple.com and right there on the homepage there'll be like a downloads thing and you can download SF symbols. So SF symbols shows you all

symbols. So SF symbols shows you all these symbols but much more searchable and you can see all the them in color because these are all multicolor things etc. But we end up using these symbols

quite a lot. Now why does Apple go to the trouble of making these hundreds of symbols? Well because it wants symbols

symbols? Well because it wants symbols for certain activities to be the same in every app. So that when I see a symbol

every app. So that when I see a symbol it's like oh I know what that does. I

saw that in another app and it does that thing. All right, let's keep going

thing. All right, let's keep going around our spiral and click on this one.

This is similar to the other side. It's

opened up a little pane. This is the inspector and this pane is inspecting what's selected on the left. So, if I click on this tab, this is the file it's

in. See, it says full path. It's even

in. See, it says full path. It's even

telling whether this file is included when you build this app code breaker.

And there's other things too though.

Like if I pick this hello world line of code, then if I go to the rightmost tab, this is things about that selected line.

Like what font is it? What color is this thing? And I can actually change it here

thing? And I can actually change it here and it's going to change the code. So I

want you to keep an eye on the text hello world over there. And I'm going to pick this font thing. I'm going to change it to be a large title font.

Okay, ready? I clicked and it added a line of code. And let's make it so we can see. If I delete this line of code

can see. If I delete this line of code from here, then the inspector will be back to not showing it. See? So, hello

world. So small we can't even see. Large

title.

We'll continue this and it gets bigger.

This is kind of way to write code without typing a code. Now, why would you ever want this on the right? Well,

in this class, you probably don't want it because I'm going to teach you to code. So, you're going to be writing the

code. So, you're going to be writing the code on the left.

But what if you were a localizer making this app work in a different language?

Or what if you're a UI designer and you're trying to pick the right font sizes and all that stuff, but you're not a coder here. You can come in do that.

It's going to change the code. Then

you're going to use the GitHub or something to merge it back in with the code coders who are write the writing the functionality. And so in a way it

the functionality. And so in a way it makes it so that non-coders can contribute to the coding process. Does

it make sense? So localization, graphics design, those are two good examples. In

this class, you're not going to use it.

So this is mostly going to be closed, okay, for this class, which is good because we want the screen real estate.

Okay, let's keep going in our spiral.

We're going to go down to here, this little area down here. See that? Now,

this appeared when we ran the simulator.

And why did it appear? Because the these little lines, messages, came out on the console. So this right pane and you can

console. So this right pane and you can close this right pane with this button.

Open it and close the left pane with this button. Uh this right pane is the

this button. Uh this right pane is the console and we will do a lot of early debugging in this class by printing to the console. Printing to the console

the console. Printing to the console especially in a reactive UI like this.

Really nice because you can just see what's going on without interrupting the UI drawing itself. So we'll do a lot of printing to the console and you're going to see Swift UI putting a lot of stuff

on the console too like this on the left. That's the debugger. When we start

left. That's the debugger. When we start debugging and looking at variables, it's going to be showing the state of all the variables in this back trace in that

window right there. The debugger also includes something from here, the navigator. When you start doing

navigator. When you start doing debugging up here, the back trace of a crash will appear here. So you'll be able to see the full back trace and click on levels of the back trace and

see the variables down here in the left.

We usually have this closed as well because if we run in the simulator and it crashes, it'll bring that up just like it brings up the navigator when it crashes.

All right, keep going around. We're

going to go around about up to here. So

we're back up to the top, but not all the way to the top. We're talking about these two lines right here. This guy is kind of a quick way to go to recent

files, for example, files that you've recently been editing. Also, locally

modified files. So once we check this in to GitHub, then if we make an edit after that, it'll be a locally modified file, right? So we can quickly go to it here.

right? So we can quickly go to it here.

And it has a bunch of other stuff I'm not going to talk about, but it's kind of a quick access menu, this thing. The

next thing up here is back and forward.

So, it goes back to the last thing you looked at and forward. It's like a browser's back and and forward button.

And then right next to it is tabs. You

see this is tabs. And these tabs will build up as you go around to different files. Just again like a browser, tabs

files. Just again like a browser, tabs in a browser. And then this is really cool. This is our path to what is

cool. This is our path to what is selected here. So, I've made a selection

selected here. So, I've made a selection there in blue. It's inside that thing called body. See the word body right

called body. See the word body right there? So, it's saying, "Oh, yeah.

there? So, it's saying, "Oh, yeah.

you're in body which is in content view which is in the folder codereaker which is in the project codereaker right so it's showing you the path and if I clicked up here on the content view now

it says I'm in the content view and I can actually navigate to things by picking here see I'm going over to our main program going back to our content

view so this is both navigation and telling you where you are so that's mostly how we navigate rather than bringing out this big heavy thing over

here to use a lot of screen real estate, etc. We tend to just use this path navigate or our tabs.

Make sense? All right, let's go over here. We got these three buttons. These

here. We got these three buttons. These

three buttons basically are configuring how your UI looks over here. And before

I show you this first one, I'm going to commit my code to GitHub. Okay, so I'm just going to go up here, integrate, commit. And this is what we saw in

commit. And this is what we saw in assignment zero. You can see it's got

assignment zero. You can see it's got everything here because I haven't committed. I've never committed. So I'm

committed. I've never committed. So I'm

going to call this my new project commit.

And I need to stage everything. So I'm

staging all the files. Again, you could stage only some things, but if you stage some things, you might check something in that doesn't work, right? Because you

had two files that kind of depended on each other and you only think so. Be a

little careful that I tend to try and, you know, stage all. And then I'm just going to hit commit. It commits it. That

didn't do anything in GitHub yet. That

has just committed those changes to my repository. And if I wanted to go up to

repository. And if I wanted to go up to GitHub, I'm going to then say push. Push

might as well be called submit my assignment because it's going to put it up on GitHub. And again, we want this main right here. And I'm going to hit push. And it pushed it up there. And so

push. And it pushed it up there. And so

now it's up in GitHub. And I can go to github.com and see it there and see what I've submitted. It's really, really

I've submitted. It's really, really great. So now let's go and take a look

great. So now let's go and take a look at this again and look at this little close this and look at this little arrow. You see this little double arrow?

arrow. You see this little double arrow?

That is doing code review. That is

showing you the changes between what's on your last commit and what you've done so far. Right now they're the same.

so far. Right now they're the same.

There's no changes. But what if I went in here and got rid of that font large title thing? Now look, little gray thing

title thing? Now look, little gray thing saying, "Oh, you deleted that. This is

an awesome way before you do a a commit to say, "What have I actually changed?"

That's what this little guy appears. Uh,

this one right here is for opening and closing windows. Like you see this big

closing windows. Like you see this big version of an iPhone right here, which we haven't even talked about yet. You

can make that go away by saying show editor only. If you don't want to be

editor only. If you don't want to be seeing that, you can do show editor only. Or you can bring it back by saying

only. Or you can bring it back by saying canvas. This thing is called, by the

canvas. This thing is called, by the way, our preview canvas. You can also show some other things like when you do your comparison, you could do it in line instead of having two side by sides like

that. Uh you also have this mini map

that. Uh you also have this mini map which is kind of fun. This is a miniature version of your entire file.

You see? And now I only have enough code for it to fit at the very top. But what

if this was really long? Then I could use this thing to navigate around in my file. So that's kind of a fun thing

file. So that's kind of a fun thing there. So that's the mini map. Uh and

there. So that's the mini map. Uh and

this last one here, this little plus adds another pane. So now I have two things going. And for example on this

things going. And for example on this side maybe I'll put my app, the main program. And then this side I'll put my

program. And then this side I'll put my content view. And it even has its

content view. And it even has its preview down there below. And you can have as many of these as you want. I

only have two, but I'm allowed to add another one over here. And I can close them, etc. The little trick, if you go over to the navigator and you go

optionclick, it'll open up another one with that. So if you're kind of person

with that. So if you're kind of person you like the navigator open, option click in the navigator. kind of a cool way to open a second window there. Let's

go back to showing our content view.

So, we're still making our spiral. We

got these three buttons up here. Now,

I'm going down to the preview right here. So, this preview is amazing. Okay,

here. So, this preview is amazing. Okay,

it's even more amazing in my opinion than the simulator. And let me make it so that it's size is good here.

It's showing me what is going on here on the left hand side in real time. So this

is my UI. This code over here essentially being compiled and run instantly. So watch this. See it says

instantly. So watch this. See it says hello world. What if I change this to

hello world. What if I change this to hello CS? Look what's happening on the right.

CS? Look what's happening on the right.

1 93p. You see it's actually compiling and running my code in real time. This

is how you're going to be doing all your development. Now, of course, if you make

development. Now, of course, if you make a big change, copy and paste a big piece of code in there, or you have an syntax error where it can't compile it, then this thing on the right might pause,

might even crash and then pause. Or when

you run the simulator, it will definitely pause. Or if you build your

definitely pause. Or if you build your code, which you almost never do build, because it's building it for you all the time, but if you build your code, it will pause. And that's what we saw

will pause. And that's what we saw before. So, let me do that build. See

before. So, let me do that build. See

that preview paused? And if you just click continue, it'll start running again.

Now, you can have it in this run mode all the time, or you can switch it to this mode. You see this little switch

this mode. You see this little switch down here? That turns it to select mode,

down here? That turns it to select mode, selection mode. And here, when you

selection mode. And here, when you select something in here, it's going to select it in the code. This is great when you have a big complicated UI and you're like, where does the code for that button? And you go and click on it

that button? And you go and click on it and it'll take you right to it. And vice

versa. If I go here and say, "Where is this text field?" Oh, there it is right there.

You sometimes will go in there, but it's more like a discovery thing to find things in there. And then these buttons over here, we're not going to show them now, but those are for things like, "Show me what my UI looks like in dark

mode, or show me what it looks like in landscape instead of portraits, or show show me what it looks like when the fonts are really big." When you get old like me, you want the fonts on your phone big. Your app still wants to look

phone big. Your app still wants to look good. Doesn't want all the wrapping of

good. Doesn't want all the wrapping of text to look terrible. We can do all that. So we can see in the preview under

that. So we can see in the preview under those circumstances as well, but we'll show that stuff to you later. All right.

So we're going to leave this in run mode the vast majority of the time. And

that's it. Yes. Question.

>> How is this different than running in the simulator?

>> You know, it's actually not that different. Probably the same code that

different. Probably the same code that runs in a simulator is somewhere running in the background here kind of really quickly and showing this UI. I don't

think it's that different, but there are certain things that don't work totally right in the preview, like sophisticated animation. We're going to do animation

animation. We're going to do animation in a couple weeks. You're going to see some of the animation doesn't quite work right in the preview. Some stuff doesn't quite work right in the simulator, and you have to go all the way to a device

to really test things. But I'm going to say 95% of the stuff works here. 99% of

stuff works in the simulator. Then 100%

if it's going to work, it's going to work on the device. Okay? So they're

they're not perfect replicas of each other. But the main difference is though

other. But the main difference is though that it's on the screen at all times.

That's the main difference. You used to have to before they had this you'd have the simulator and you'd have it up on screen at the same time, right? Side by

side, but it used up a lot of screen row space to and it couldn't easily be closed. So this is a far superior and

closed. So this is a far superior and plus you'd have to hit run every time.

Whereas here, you don't have to ever hit run.

Any questions about Xcode? That was kind of the quick tour. I mean, look, let's look at Xcode's menus, shall we?

Look at all this. I didn't even tell you about except for this thing. I didn't

tell you about these things. There are a lot of stuff in Xcode. And plus, there's settings. Don't forget about all these

settings. Don't forget about all these settings.

We'll learn most of this stuff by doing.

I'd take the whole lecture today if I had to show you all of that stuff. So,

now we know about Xcode. We're going to go talk about this code right here. This

is really the end of our spiral is to get to here and talk about this. And I'm

going to talk about every single character on here and what it does. And

I'm going to start down here. This

hashtag or pound sign preview. It's just

saying what to show on the right here.

This is our preview canvas. And that

little code is saying what to show here.

Well, right now it's saying, "Show the content view." Well, what's the content

content view." Well, what's the content view? That's this. That's why it's

view? That's this. That's why it's showing all this. And this is normally what your preview looks like. It just

has the name of the thing that is in this file. But you can change it to

this file. But you can change it to anything you want. You'll see me do that on Wednesday where I add things to make it so it's showing my view more appropriately so I can see what's going

on. Now, this preview canvas is not UI

on. Now, this preview canvas is not UI testing. There's a UI testing framework

testing. There's a UI testing framework for that. But it is UI standardy check,

for that. But it is UI standardy check, right? Take a look at my UI. It's like,

right? Take a look at my UI. It's like,

oh yeah, that looks like I think it's supposed to look. All right, let's go up to the top. This is a comment. This is

what comments look like in Swift slash.

You can also do slashstar and then end with star slash just like in other languages. Nothing special there. This

languages. Nothing special there. This

probably know what this is, right?

You've seen include or pound sign import in other languages. This is basically saying my code here wants to use somebody else's code out there. And

Swift has a really powerful mechanism for doing modules and packages and they package all of the Swift UI stuff. So

buttons and windows and all that stuff into one package, Swift UI. Now, you

might think, well, I'm always going to import Swift UI in this class. But

that's not true because when we do the back end of our app for our coderebreaker game, the actual playing of the game, the logic that plays the game, that will not be in the UI. That

will be separated from the UI. So there

we will import something called foundation. You'll see that or maybe

foundation. You'll see that or maybe swift UI core, which is some of the core things in Swift UI like colors and things like that. So we're not always doing that. And then there's other

doing that. And then there's other things we're going to import like when we do the database thing, we'll import Swift data that I mentioned before. So

import, we don't use it a lot, you know, it's pretty it's usually Swift UI, but sometimes we will. All right, next word.

Strruct.

So strct is a key word that says that we are building a strruct here. A strruct

is the most important data construction mechanism in all of Swift. Now other

languages have strrus. Probably almost

every language has a strct, right? C has

strrus. In other languages, strrus are usually containers of variables, right?

You got a strct, it's got some variables in it. And that's true in Swift as well.

in it. And that's true in Swift as well.

However, strrus are much more powerful in Swift than that. Strs have functions, for example. You might be starting to

for example. You might be starting to think, wow, this sounds like a class, right? A class is like a strruct that

right? A class is like a strruct that has functions. But this is most

has functions. But this is most definitely not a class.

Swift has a keyword called class and a class in Swift is a collection of variables and function. But a strruct which is also a collection of variables and functions is a different thing. I'm

not even going to talk to you about class for three or four weeks. We will

use a class in in this course but not for for a while. So right now we're focused on strrus. Everything we build in our UI pretty much is a strruct. And

this word content view is just its name.

Just the name of this strruct. So that's

how you create a strct. Strruct and its name.

Why is this called content view by the way? Well, because this is just template

way? Well, because this is just template code. It doesn't know what we're

code. It doesn't know what we're building. So this is basically saying

building. So this is basically saying that this strruct is a view of your content of your app. So that's just a complete generic term right there. We

will be renaming this post haste probably on Monday to be something like codereaker view.

Now this right here super duper important. This means that this strct called content view behaves

like a view. That's what colon view means. It behaves like a view. This is

means. It behaves like a view. This is

not view is its superass. This is not object-oriented programming. Okay?

object-oriented programming. Okay?

There's nothing no inheritance going all at all. In fact, strrus have no

at all. In fact, strrus have no inheritance. That's one of the things

inheritance. That's one of the things that makes them different than a class.

No inheritance in a strct. So this is behaves like a view. Well, what is a view? A view is what we call a protocol.

view? A view is what we call a protocol.

And you heard me say earlier that Swift is a protocoloriented language. Well,

you're seeing it right here. And what is a protocol? A protocol is a description

a protocol? A protocol is a description of behavior, specifically varss and funks that things that want to behave

like a view h get or have to have. And

if we looked at a view's definition, any protocol's definition, we would see that it's just a list of functions with no bodies, just the names of the functions and varss with no values assigned to

them. That's what it would be. So when

them. That's what it would be. So when

we say a strruct behaves like a view, we're saying that it has all the behavior of view. But we're also might be saying that we have to do something as a strruct if we want to behave like a

view. So in other words, when you say

view. So in other words, when you say you behave like a protocol, it's a double-edged sword. Okay? Or at least a

double-edged sword. Okay? Or at least a two-sided coin. One side is you have to

two-sided coin. One side is you have to do something to behave like a view.

Okay? If you say you behave like a view, well then you better behave like a view, right? So it might be something you have

right? So it might be something you have to do. But the flip side of the coin is

to do. But the flip side of the coin is if you say you behave like a view and you do that thing you're supposed to do, then you get all the rest of the things that a view knows how to do. And I

already showed you in library all those view modifiers those are all functions in view. So you get hundreds of

in view. So you get hundreds of functions if you say you behave like a view. But of course you have to do

view. But of course you have to do something to behave like a view. It

doesn't come for free. We have some responsibilities in the world. And the

responsibility that you have to do to be a view is to implement this variable. If

you implement this one variable, then you are behaving like a view and then you get hundreds of other functions on your strct for free. They just come for free. So what is going on here with this

free. So what is going on here with this variable? First, let's talk a little bit

variable? First, let's talk a little bit about what a variable is in or what its syntax is at least in Swift. It's just

simple. The word var keyword for variable, the name of the variable like I and then colon its type. Okay, so

that's how you declare a variable var name of it colon type. Now this colon int right here is different than the

colon view above. The colon view above view is a protocol. So the colon view above means behaves like okay colon view it behaves like a view. That's what that

means. This means it is an int. An int

means. This means it is an int. An int

is a concrete type. It's an actual type.

It's got storage. obviously some integer value in there. So I guess you could say that that var I behaves like an int.

Well yeah because it is an int. int is a concrete type. And we can have lots of

concrete type. And we can have lots of other kinds of varss. How about var a string. We have a var that's a string.

a string. We have a var that's a string.

And int and string are not some sort of built-in thing. They're just strrus.

built-in thing. They're just strrus.

Everything is a strruct pretty much in Swift unless it's a class which again I'll talk about in a few weeks.

Everything is a strct. So int is a strruct, string is a strruct they're strct or they're protocols like view as a protocol. So that's what it looks like

a protocol. So that's what it looks like to declare a variable. Now you probably noticed that the AI when I started to type this, it tried to put equals zero there. You see that? I didn't do that.

there. You see that? I didn't do that.

It did that. Uh one thing in Xcode, if you go into settings, I'll show you this. You might as well do it. If you go

this. You might as well do it. If you go to settings here and you go to text editing and you go to editing, you'll see here it's got this suggest completions while typing and predictive

code completion. It has a whole AI

code completion. It has a whole AI engine that it'll actually download to your computer to kind of guess what you want to say. And it's not bad. I mean,

it, you know, you probably use chat GPT to do coding or something. It's it's not bad. And so, this one's a simple example

bad. And so, this one's a simple example of it, but I typed vi int. And so, it says, oh, do you want to set it to zero?

So I'll say sure give me that zero. When

you hit tab it fills it in. So this

variable is getting an initial value.

Now here's an important thing to understand about Swift variables.

Actually two important things right at the same time. One is Swift variables always have a type. Swift is what's

called a strongly typed language. It's

very different than like Python where it's like you have var I like is that a string? Is that a number? I don't know

string? Is that a number? I don't know until I put something in it what it actually is. Swift, no way. Everything

actually is. Swift, no way. Everything

has to have very explicitly have a type, a specific type. There's no floating around in Swift. And number two, all

Swift variables must have a value at all times. You're not allowed to have a

times. You're not allowed to have a variable. It's like what is the value of

variable. It's like what is the value of this? I don't know. Nothing. It always

this? I don't know. Nothing. It always

has to have a value.

>> There's no concept of none or null. So

the question is so is there no concept of none or null or nil? Oh yes there is in swift very important and I'm going to show you that on Monday because it's a

very important type but it is a type.

It's called optional. The type is called optional. It's not nothingness. It's a

optional. It's not nothingness. It's a

type. I said that these bars always have to have a value but you don't always have to say equals here. That's one way to give them a value. The other way is if you don't specify one like vars s

string right there then when someone creates a content view they have to give you that value. In other words, it's not possible to create a content view strct here with that s like that unless the

person who creates it gives me the value for s because s can't not have a value.

So either I have to initialize it like this or I have to give it a value.

There's another way which is that we can have initializers and you're probably used to this in other language C++ has constructors and things like that. Of

course, there are special functions that we can add to a strruct that initialize the variables to certain values. That's

another way of doing it as well. Okay,

so that's variables. That's our quick thing about variables there. So, let's

get back to this variable. Now, this

variable's type uh is kind of kooky.

Okay, some view. It's got a keyword in there and then a protocol. And I told you that these variables have to basically be concrete types. And but we know view is just a protocol. It's not a

concrete type. It's not a thing. It's

concrete type. It's not a thing. It's

just a description of behavior. So what

does sum view mean right there? Well,

sum view means this can be this has to be a concrete type, but it has to be some view. Okay, it has to behave like a

some view. Okay, it has to behave like a view. But even more than that, the

view. But even more than that, the actual concrete type here is going to be determined from this code. This variable

vari is what we call a computed property. Variables, we sometimes call

property. Variables, we sometimes call them properties because they're a property of a strruct. This thing is computed. And that means every single

computed. And that means every single time someone asks what the value of this bar is, it runs that code every single time. Over and over and over, every

time. Over and over and over, every single time. Now you might think, "Wow,

single time. Now you might think, "Wow, it sounds pretty inefficient. I got to run code every time to figure the value of this thing." But Swift is super efficient about not calling this unless something that is inside of it might

have changed. So don't worry about the

have changed. So don't worry about the efficiency at all here. Now, this idea of having a variable whose value is computed like that is very common. We're

going to do it all over the place, not just for some view kind of a thing, but all the time. This is very very very common to do and you can kind of look at it as kind of

like a function that has no arguments that only has a return value. I guess

you can think of it that way if you want. I think that's fair to think of it

want. I think that's fair to think of it that way. But the real key about this

that way. But the real key about this computed property is that we're going to look in here and see what this evaluates to, what it is, and then the compiler is

going to replace some view with that concrete type. some view is magic from

concrete type. some view is magic from the compiler that will look in there and replace it with the actual concrete type, which means that whatever's in there has to evaluate to a specific

single concrete type. And I'm going to show you how it does that magic in a second here. But before I do that, I

second here. But before I do that, I want to just quickly talk about views in general because inside here, I'm going to clean this up and make it a little less sophisticated here. We got to look

inside there and see that there's a whole bunch of views in there. This

right here is a view. This is a strct that behaves like a view. This is also a strct that behaves like a view. And this

is a strct that behaves like a view. So

what do strrus that behave like a view do? Well, they're rectangular areas on

do? Well, they're rectangular areas on the screen that draw. That's what a view is. And also those views can receive

is. And also those views can receive multi-touch events, swipes and taps, things like that. That's what a view is.

And it's kind of weird that to behave like a view, you have to have a var that returns some other view, right? Because

that's what it says right there. My

responsibility if I said I want to behave like a view is I have to implement var body some view. That

basically means I have to implement a var that returns some other view. So how

does that make any sense? We're creating

image here. When we create a strct, we give arguments to it in parenthesis. You

see this text give it arguments and like some take no arguments like if I put a circle in here big circle no arguments sometimes the arguments have names

system name right there see that system name globe but sometimes they don't like text right here you see that so that's how we create strrus we just their name

and then the arguments it takes to create them and sometimes those arguments are like that var s string they're uninitialized variable that you have to initialize, right? But other

times they're arguments to a constructor or initializer. But notice that this

or initializer. But notice that this guy, it doesn't have any. Okay, what

kind of how what's going on with that strruct? Okay, that is a wacko strct

strruct? Okay, that is a wacko strct right there. Bstack has no parentheses

right there. Bstack has no parentheses after it. And it also has a curly brace

after it. And it also has a curly brace thing after it. So that just ridiculous.

So, let's take a pause here and talk a little bit about views because I want to introduce some analogous terminology that you can use to think about views so that when I'm talking

about them, I'm going to use this analogy and you're going to be like, "Oh, I see. I see what that is. I see

what that view is. I understand how that view works." Okay. And the analogy we're

view works." Okay. And the analogy we're going to draw is Legos. Okay. Everybody

loves Lego. I've got this Lego set right here. It is I can't tip it up or it'll

here. It is I can't tip it up or it'll all fall out, maybe. There we go. It's a

city Lego. This is emergency vehicles headquarters. 706 pieces in here. Okay.

headquarters. 706 pieces in here. Okay.

And you everyone here has played Lego, I hope. Okay. If not, you can leave now.

hope. Okay. If not, you can leave now.

But no. Okay. So, Legos. So, most Legos here. I'm going to put these Legos out

here. I'm going to put these Legos out here maybe so that the camera can get them. You can look them inside. Most

them. You can look them inside. Most

Legos kind of look like these little pieces. You can zoom in there. Maybe.

pieces. You can zoom in there. Maybe.

Let me zoom in.

And then maybe we'll put them up here. I

don't know if we can do that. We'll put

it up here even. I don't know. Anyway,

for those of you in the building, here's I'll pick one up. Here's a Lego, right?

This is kind of one piece of Lego. And

there's another. This is like a normal Lego brick. It's kind of a funny color,

Lego brick. It's kind of a funny color, but it's Lego. This is what we think of when we think of what's a Lego. There

all kinds of weird Legos there. Um, you

know, like this one right here. I don't

even know what that is. Some kind of flower or something? I don't know. Um,

and so you can probably quickly go from here to understand my analogy. It's like, of course, this text right here. Am I still

up here? Yes. This text or this image,

up here? Yes. This text or this image, they're like Lego bricks or this circle, right? They're kind of fundamental

right? They're kind of fundamental building blocks. And I'm going to put

building blocks. And I'm going to put them things together to build things.

Okay. All right. Good. Good start. Okay.

But we're going to push this Lego analogy a little bit further. Okay. And

we're going to do it with this guy right here. See him? This is that little

here. See him? This is that little helicopter. This is what I'm going to

helicopter. This is what I'm going to call a helicopter Lego. So, I'm going to extend my definition of Lego to not just

include bricks, but completed things.

This is now a Lego. It's a helicopter Lego, right? And this Lego, this hot

Lego, right? And this Lego, this hot couple Legos actually made out of other Legos like a rotor Lego and skids Lego.

Here's three Legos I have in my hand.

And I'll put them together to make another Lego, which is a helicopter Lego. All right. So, everyone cool with

Lego. All right. So, everyone cool with my extending this analogy to say that when you put things together, now you have a Lego. Okay. I'm not done yet, though. So, this helicopter Lego right

though. So, this helicopter Lego right here, if it'll stay there, that is like this guy. Content view, right? Content

this guy. Content view, right? Content

view is obviously here it is over on the side there. It's obviously made out of

side there. It's obviously made out of those other Legos. And I'm going to say that content view is a Lego because I'm going to say that Legos are views. Okay?

So, Legos bricks are like text and image and circle. Lego like a helicopter is

and circle. Lego like a helicopter is like content view. Everybody cool with my analogy? Okay, now I'm really going

my analogy? Okay, now I'm really going to go crazy on you because if you get a Lego set like this, it doesn't have 706 pieces just strewn about in here and you got to like look on the outside to

figure out how to put it together, okay?

It's not a jigsaw puzzle. It's Lego. And

so the Lego actually comes in little bags. See, this is bag number two,

bags. See, this is bag number two, bag number three. Okay. And it also has instruction manuals. Yay. Hey, cuz we

instruction manuals. Yay. Hey, cuz we couldn't build these things without that, right? Here's three. This is for

that, right? Here's three. This is for building this, you know, a medical building or something. We got an ambulance,

police car. Okay, there's a book for all

police car. Okay, there's a book for all of those things in here. So, I'm going to say that a bag of Lego is a Lego.

Okay. So, if you accept this from me, then you're going to be in good shape in this class. All right. So, this is a

this class. All right. So, this is a Lego. So, just like I put those Legos

Lego. So, just like I put those Legos there, I'm going to put that there.

That's a Lego. Okay, it's a bag of Lego.

That's the thing. So, you're going to hear me saying later in this course, oh, this is a bag of Lego view. Okay? And

that's because we're going to define our Lego analogy that a bag full like that is itself a Lego.

Then I'm going to go even farther and take these instructions. Here's the

instructions for the skids. Okay. Here's

instructions for the rotor.

What am I gonna say? This is

>> Yeah, it's a Lego. Okay, this is a Lego as well. Okay, so we have four kinds of

as well. Okay, so we have four kinds of Legos in the world. We got bricks, we got helicopters, which are constructed Legos, we got bags of Lego, and we got instruction manual page Legos. They're

all Legos. Okay, now where are those up here? Well, vstack right here is an

here? Well, vstack right here is an instruction manual page Lego. Because a

vstack is a view, but its only purpose in life is to put other Legos together.

In this case, it stacks them vertically.

That's why we have our three things there stacked vertically. And where's

our bag of Lego? Right here. That is a bag of Lego. So, that little curly brace right thing right there is actually returning to us a view. It's called a

tupole view. You don't care about that.

tupole view. You don't care about that.

You're never going to type the word tupil view in. But that's what it's doing. is returning a tupole view which

doing. is returning a tupole view which is a view but it's a view that is purely a bag of Lego holds other views.

So that's my analogy. So when you hear me say bag of Lego view I'm talking about what's selected here. When you

hear me say instruction manual view I'm talking about something like vstack. If

I say helicopter view I'm talking about something like content view that we build. And then of course Legos like

build. And then of course Legos like image text and circles are like Lego bricks.

Now that we have this terminology, uh, we're armed with it. Let's break down this really weird code around VStack.

Because, as we said, vstack has no parentheses after there. And it has this weird curly brace going on here. And

then, while we're at it, let's understand why varum view is the thing we're required to do if we want to behave like a view because they kind of go together. Let's look at the actual

go together. Let's look at the actual arguments of vstack. If I go optionclick on something, optionclick, it will bring up documentation for that

thing.

And here's the documentation for vstack.

Now, we don't know enough yet to fully understand what's going on here, but we know quite a bit. And we can see here that when you initialize a vstack, this innit is the constructor function I was

talking about, but forget that. It has

three arguments. Look alignment

horizontal alignment spacing which is some floatingoint number content colon that okay so let's explore these three

things and see what is going on let's put these three arguments out here okay let's start with alignment so alignment center now that happens to be the

default dot center that's why they're centered you see them up there centered I can change it though. How about

alignment leading?

Woo! They slammed over to the left side.

Now, when we do alignment, horizontal alignment like this, we don't use left and right. We use leading and trailing.

and right. We use leading and trailing.

Anyone want to say why we use leading and trailing? Yeah.

and trailing? Yeah.

Exactly. Because some languages the text flows left to right and some from right to left. like he Hebrew and Arabic flow

to left. like he Hebrew and Arabic flow right to left and English and other western languages they left to right and we want all of our UI to flow in the same direction that all our text is flying so that's why we do leading and

trailing all right the other one was spacing spacing okay let's try 100 see how it spread

them out let's try 10 close them down or one really small and the default there is surprising default default. The

default is the right amount of spacing for this platform. So on the Apple Watch, it's probably going to be quite small, but an iPhone it's going to be pretty good size. You know, in vision OS

maybe it's depends on the context you're in, it could be quite big. So spacing

defaults to the right thing. So you

should use the default as much as you can for spacing so you get the right thing most of the time. And then the third argument, let's put it back up again so we can remind ourselves, was

content colon And then this thing. So let's type it.

Ready? Comma content colon. Oh, it's

even telling me right there. See that?

It's saying this is the type of it right underneath. What is that type? Anyone

underneath. What is that type? Anyone

want to guess what that type?

Parenthesis, arrow, context. What is

that type?

>> Function.

>> A function. Exactly. A functional

programmer right here. Maybe it's a function. And this is what we mean when

function. And this is what we mean when we say switch is a functional programming language. We are passing

programming language. We are passing functions to other functions or in this case to the creation of the vstack to do the behavior we want that function to

do. Now what is that content thing that

do. Now what is that content thing that it is returning? Let's take a look over here vstack. It says that that content

here vstack. It says that that content thing is where content behaves like a view. Now, we're not going to talk about

view. Now, we're not going to talk about wear clauses and all this at sign frozen and stuff down there, but you can see that strruct vstack down there. This

this area right here, it's saying strruct vstack has this content where content behaves like a view. So, this

function up here that content is going to return has to be a function that returns something that behaves like a view. That's what that parenthesis arrow

view. That's what that parenthesis arrow content made. And the parenthesis being

content made. And the parenthesis being empty means what? that this function takes no arguments.

So I'm going to create a function that takes no arguments and returns something that behaves like a view. So let's see what it looks like to create a function in Swift. We've never created a function

in Swift. We've never created a function before. Let's do it. Funk

before. Let's do it. Funk

is the keyword. And now you just put the name of it. I'm going to call this greetings. And then the arguments. I

greetings. And then the arguments. I

said I was going to create a function that took no arguments. So open

parenthesis close parenthesis means no arguments. If I had arguments in here,

arguments. If I had arguments in here, you know, I could pass an integer in there or whatever. And we'll learn a little bit how I create arguments that have names like system name, image

system name versus not. In this case, no arguments. And then you say returns.

arguments. And then you say returns.

That's what the arrow means. That's what

this function returns. And I'm going to have mine return a text. And then I'm going to have it return a text that says greetings.

Does everyone agree that this is a function that takes no arguments and returns something that behaves like a view? Because we know a text behaves

view? Because we know a text behaves like a view, right? Well, since I have such a function, look up here, I can say content greetings and then just get rid

of all the rest of this junk here. And

now I've created a vstack that has a content which is greetings. You see it's showing greetings right there because I gave it what it wanted a function that

took no arguments and returned a view.

Now of course I don't want just a text.

I want other things too here. I want

like you know let's put our image system name globe back for example. And then maybe also put a circle in here. Circle. But I

better not put return in the middle of that. So let's just take that out of

that. So let's just take that out of there. Okay. So this is kind of what I

there. Okay. So this is kind of what I had before. I had these three things,

had before. I had these three things, right? image text and circle. Well, this

right? image text and circle. Well, this

generates a massive amount of errors.

Look at all those errors. Result of

image not used missing return because of course I took that return away. So, you

know, I don't have return in there. So,

what the heck? What am I going to do here? Well, what I really want is for

here? Well, what I really want is for this thing to not return a text. I want

it to return a bag of Lego view. Right? So, how do I make this thing into a thing that returns a bag of Lego view? Well, I'm

going to put a little magic little statement on here. Apps sign

viewbuilder.

So, if you put ads sign viewbuilder on a funk or on a var, it will interpret the stuff inside of it as a list of views and bag them up and put them in a bag of

Lego and return that. But now, it still has an error here because I said I would my greetings returned a text. But that's

clearly not what it's returning now.

It's returning a bag of Lego view of some sort. And what is the type of a bag

some sort. And what is the type of a bag of Lego view? Well, it's actually telling me in this error. You see it says cannot convert return expression of type tupal view image. Let's type it.

Let's make that be my return type. So,

let's see. It's tupil view with an image, a text, and a circle.

Let's see if that works. Ah, it works.

No errors. So, that is the concrete type. Tupil view. Tupil view is a bag of

type. Tupil view. Tupil view is a bag of Lego view. Now, we never type tupil view

Lego view. Now, we never type tupil view because look how complicated that already is. I just have an image of text

already is. I just have an image of text and a circle and I got this thing is complicated. Imagine I added five more

complicated. Imagine I added five more things to that. It would just start getting out of hand really fast. So,

what are we going to do here? Well, I'm

going to let the compiler help me and replace it with some view. Yeah, you

guys are ahead of me there is absolutely some view. So now it looks in there and

some view. So now it looks in there and says, "Oh yeah, that's a super view with an image and a circle in the text.

That's going to be its return type." And

we never see it. We don't see tupil view. We never type it. We always use

view. We never type it. We always use some view here. Let the compiler do its work. And now if I go in here and add

work. And now if I go in here and add another thing here, text howdy.

It's working fine because that some view just got updated to be tubal view image text circle probably or something like that. And these things can get quite

that. And these things can get quite complicated because I didn't really tell you this but you can actually have ifs in here like I can say if true or false or whatever then do this look I said if

false greetings is not included here you see it's gone or if I change that false to be true now it comes back so I can have ifs so

that tupil view thing starts getting real complicated if we have ifs and all kinds of just junk in there so that's why we have some view. Now, we didn't we also never do this, by the way, putting

this view builder stuff in here.

Instead, we take this little code and we inline it. And we're going to inline

inline it. And we're going to inline functions left, right, and center this whole quarter. We call them closures.

whole quarter. We call them closures.

And I'll tell you later why we call them that, but that's what we're going to do.

So, I'm going to take this thing and I'm going to cut it. And I'm going to go up here where greetings is and paste it. I

inlined it. So now I don't need this whole greetings thing. But you might say, "What about the viewbuilder?" Okay,

I still need the viewbuilder. Well,

watch this. I'm going to go look in the documentation for VStack. Actually, I'm

going to go all the way into VStack's documentation. I'm going to go down to

documentation. I'm going to go down to it's initializer for VStack. This argument content has

for VStack. This argument content has viewer in front of it. You see? And

that's why I can pass a inline curly brace thing that's a viewbuilder to content. So at time viewbuilder can go

content. So at time viewbuilder can go on a function, it can go in a var. And

it can also go on an argument to a function, okay, or to a creation just like we see here in the initializer for vstack.

So that's why we don't need viewbuilder there. We're almost there. How did we

there. We're almost there. How did we get from this to what we had at the beginning, which was vstack open curly brace? Simple. First thing is if you

brace? Simple. First thing is if you have a function or a creation of a strct like this and the type of the last argument is a function then you are

allowed incredibly to remove its label and put the function on the outside of the call. I mean it's crazy I know but

the call. I mean it's crazy I know but you can see it actually looks kind of nice. It's pure syntactic sugar. It's

nice. It's pure syntactic sugar. It's

just to make it look nice. it perfectly

fine to do the content way we had before but this looks nicer and then if we had no other arguments here and we wanted the defaults of these two things then we

get this vstack open parenthesy close which this is correct but another special rule only if you have a little thing hanging off the end like like we

have here in that case in that case only you can get rid of the parenthesis so that you get this beautiful little thing that's the only time you can remove those parentheses like if I went here

and removed those parentheses off the circle errors because it doesn't have a little function hanging off the end so you can't do it. So that is all I was going to talk about today. We've

basically covered all there is to know about views, putting them together in bags of Lego, how to vstack them together, and we'll talk a little bit more next time about other options like

watch this h stack. Look, that stacked them horizontally. Or even Zstack that

them horizontally. Or even Zstack that stacked them on top of each other. We

can't see it because of the black circle. They're all black. And next time

circle. They're all black. And next time we're also going to learn that we can change the colors and the aspect ratios of all this stuff using all those hundreds of modifiers. So we'll see that all next time. And then after we've

covered that, we'll dive right into building our codebreaker app.

Okay, that is it. I will see you next time.