not right now.
Anyway, I will start recording.
Let's see.
Core.
Okay, let's go and get started here so the plan for today is, I want to talk to you about
assignment to.
So I'm going to start with assignment to because that is definitely the most important thing and then we can go back to the tutorial.
Any other logistics questions.
Curious here.
Whole.
While you're answering that. So, Simon tues up, I finished that final last night.
Oh, shift is in here she might actually say hi.
The assignment to is based on remote pic viewer too. So I'm going to go ahead and get remote viewer to running in a clean assignment, clean project here it's just our standard swift UI multi platform app
is cut and paste here and say this.
Okay, you can go out. I'll just show you can see.
Come say hi.
So want to catch up.
Hello. Yes, hello.
Gone
know if you hear that, but she was like really like are you doing that to me.
Okay, let's stop the poll, share the results.
Okay so
interesting.
So, most of you 63% of you are like really yeah wow like 70% of you are behind a really behind. Okay. Well, fortunately, you shouldn't have time to catch up.
Yeah, so, yeah, you should have trying to catch up over the break is kind of what it's always hard for me to calibrate go like you know I don't think I'm doing too much I think but it's like, How are you all doing so.
I actually had an idea for this project that I wanted to do.
Yes, so one needs to be done by the 15th Yes.
That's when submissions close.
So I want to do a picture puzzle and I had this idea of having the pieces and you'd have to rotate them and put them in position, and I could do all that except I couldn't figure out what I really want to do is take an image, and just clip it in different
ways, and then use that to make a puzzle but I couldn't figure out how to change the origin of the clipping, so I just thought and I thought, okay, maybe I'm trying to make this too fancy so I made something a little simpler.
So all it is.
It's really mostly just remote pic viewer, but she's
up.
So here let's rotate this back here.
This way. There you go.
select this boot up while we keep going. But the key thing of this program you'll notice it's mostly the same. The one as remote viewer the big differences like put the URLs in this array.
And I added some options for basically to be all test manually edit or change these URLs.
And so, let's
see if I can do this, but so so if you look at it, it has the same basic content view struct. It's mostly the same all here except here I've added in.
There's a text field now, along with this menu. And so you see this. So, it's doing is doing a sync image course with is loading the background. So what we can do here is the menu has these, so we can decide dog, we have that.
But we can also let me see if I can do this. So I think I can go to a browser type here.
Okay, so there's my picture.
Oh, there we go.
Oh, I should really change that I don't think I put up an HTTPS link in there.
Okay so, copy, And now we go to remote viewer to.
And now we go here.
We
faced.
See if it loads.
You get a hostname not found errors me trying to run remote pic viewer.
That sounds like you're somehow your simulator phone doesn't have access the internet. Okay, that's okay.
Are you not, is this, so if it just keeps loading it generally means that it's a valid link.
Oh, I have to go to secure site. Okay, so I better.
I should change my website so you see. So you'll notice what happens is if you just do something like this you mess up the URL. It's still, it just sits there and it's trying to look for it.
But the moment you have a have a full one. It loads it, and then you can go here and you can say remember image, this is it persistent across runs we haven't talked around the safe state, you know there but.
But yeah, now it's there and what does it takes the last part of the URL.
And just copy this as the name. So we now have kittens.
Sad dog.
And we have me.
So, and of course the all these images you can do this, we can do.
you know, rotate them.
And let's see, it's a long process to reset it back, which is useful, and you can switch back to these.
So, this is work for I run on a phone similar or just using the Mac application simulators. Oh.
Hmm, That's interesting, it didn't. So you're saying, Carl you're saying it didn't work when you did it as a Mac App. Oh, yeah, I haven't tested it try and do it as a Mac App.
I'm not sure why it wouldn't work. That's interesting.
Yeah, we're doing mobile application development so you should be trying to do it on a mobile device of some kind.
Yeah, because the whole cross platform thing is kind of cool.
But yeah, that's definitely not our focus and certainly that's going to go away very soon when we start moving to Android and also you'll notice for storyboard apps.
They're very much not desktop and mobile at the same time.
Yeah, those are okay.
Are we done with store, I'm going to talk a bit more storyboard right now I'm just talking about assignment to.
Oh, is it just, yeah the preview. I find but unless your computer is very fast I find the preview is, is, yeah, doesn't work that great. But if your machines fast it actually works well.
Anyway, I need a. I'm still need, I would have finished up the solution sets today and once I finished the solutions, I will open up submissions and if I have to make any changes to the assignment.
I'll let you know, but I'm pretty sure that I think this is we're all good here so.
So there's 11 questions. 20 points, and really these questions are oriented around, seeing if you actually understand this code.
And what it's doing.
So,
it used to work before, before I was forced to update from Catalina.
Yeah.
Okay, if you're running an old Mac yeah okay that. Yeah.
One thing I'm before going on and so work on the assignment. I don't want to I can answer clarification question on the assignment but you all should be working on it.
Acknowledged or collaboration is before.
The one thing I've given you a validator script which would work.
One thing I've.
Yeah, I'm happy to answer whatever questions on tutorial questions and you'll notice a lot of this is close to the tutorials.
What's. Oh, that's what I want to talk about, um,
okay.
So, starting next week we're going to be running Android Studio.
I posted a notice about this in the thing but really go here and download Android Studio.
You don't need to run this on a Mac, if you do run this on a Mac, there is the good news is, yes.
And then once you agree to this, you can download it with Intel chip or the or Apple silicon. Either way, so they have two different versions download the right version for your Mac.
But again if you don't, but you can also use Windows or Linux for doing development, I'd say use the fastest computer you have, because Android Studio is based on jet brains jet brains is written in Java.
It's just a really big Java app, and use a lot of cycles me hex codes a bit piggish but frankly compared to me.
It's actually very lightweight compared to this. So, have your. Have your system ready, and also one of the big tip when you're doing stuff in Android Studio is let it run for a while, it'll start up and it'll show a screen it all seemed fine, but if
you notice, there'll be this little message bar that's busy doing stuff, and like it wants to do lots of upgrades of components and stuff like do all the updates, let it finish doing all that spilling otherwise parts of the application won't work right.
It'll be like why isn't this working, oh it's busy indexing the project.
So, yeah so so yeah so using Windows so yeah so it'll, it should be, it should be better but just, no matter what platform, it is this is very. This is a big gap.
So.
okay so question is a Unix text file different from a normal text file.
Just to a call, text files, plain text files.
knows the difference in capitalism capitalization, really old max us characters. So, these are the ASCII characters character on the wifey. So,
normally.
So that's how lines are down so there's different kinds of text files.
If you go into, you know, use Unix text Unix ones.
So,
And please know RTF or anything else like that.
You should really know text files as a computer science person because that's what we work in.
That's the format of stuff.
Going back to but but now, unless there's a specific questions about assignment to let's go back to the storyboard stuff.
So we have the store let's go and get Xcode running. so we can fund the.
That will take a while to load.
No, No, that's not too bad either.
Notice how I tend to make this wide.
So you often will want to do this because if you're actually trying to wire up things between here and here you'll, which you often will want to do is actually have it like this have one set to
hear, because you're going to want to do things like.
There we go.
Let's do this over here, because you'll want to do things like draw like drag these things from here I can notice how, when you do this, you see a little thing there like you want to draw arrows from this to this to connect them, you won't have to do
that too much for this assignment, but that's kind of the way it goes when you're working with storyboard. And there are ways to do it. Other ways but this is the way they want you to do it and it makes very simple and the other ways are kind of annoying.
So keep that in mind you have to we have to connect storyboards to these outlets.
One.
One thing I wanted to emphasize which I'm not sure if I talked much about was these
Is this function. This function.
Update analysis.
So this update analysis here.
What does this correspond to in our regular.
What does this correspond to this update analysis in a text, and
go back here.
we're back here. Mostly text analyzer to assignment one.
What code does this correspond to look here at text analyzer to.
Where do we update the analysis where do we run this basically where are we calling the analysis function, where we call the analysis function is in here.
So analysis result is this.
But.
this is the thing I want to talk about his when his analysis result actually called.
When is this code. Run.
So we know exactly when you look here, okay, updated analysis is right here,
Where is it run, we know where it's run. We know it's run right here. After when you're when the view first appears we call update analysis here, to make sure that you know result is outdated.
We call it here, when the menu, you know when a menu item is selected we call update analysis. After we've set the new mode.
You know, because we do it there we do it here.
And we have this every time you select them.
Every time you type something into the text field. So this do analysis is actually connected by.
So you go here, files here let's go to.
So remember, we have this text field here let's zoom in a bit.
So if I tap on this, and we go to the connectors you'll notice that.
That's, that's our that's our result so this this is where you type this is the way you enter your tax. So you notice here when it says editing changed it's kind of small tax on it but so when when editing change called do analysis.
So this right here is what caught causes do analysis to be called, and we go back to the view controller, we can see that okay do you will all do analysis does that cause update analysis so update analysis.
So, I will talk about it in a second here.
So I be action is what you have to put. So, if you look at it here, when you have.
When you select some we select an item that can have that can send events.
So, what's this.
So that's, that's what the reaction is you have to mark the code with this specific. So here we have, we mark this with IV action so that this function, basically that Id action is what creates this little know circle here, that allows us to connect it
to an event, such as such as this and literally what you do is you drag and drop these things, cream, does that make sense.
Okay.
The drag and drop thing yeah so, like for example what I can do here is, let's move on.
Let's. How am I gonna do this I'm going to make a new one this is this, this is where it gets annoying to me in this world like the scene controller in here we're going to move this weekend's.
Okay so yeah so we got this text analyze here, we've got this year, we select this, we've got this. So now what I can do is things like, Oh, I want to do on a touchdown event.
I want to.
So now it says interactions so.
So notice what it does is it automatically created a little function template for us to
get rid of this.
So you see now by doing that little dry, I now have a create a new function here that I can fill in, and this function will be called whenever there's a touchdown event.
So that's what that's it. And so that's what you really have to do is drag and drop those things. And so now there's this little outlet. And it says this main storyboard thing here and now I can choose to click on that and it will slip, you know, move
me over here. Now I can do now is I don't actually want this so I can hit the X here, get rid of it.
And if I go back now to the view controller, you'll notice the code is still there, but this little circle has gone away, so they're no longer connected.
Now, how this connection actually happens is there's a reference in the XML underneath the storyboard, which does this but and technically you can go in and edit that but Apple really wants you to do the graphical thing, because they really make the symbols
underneath it I find androids a little more cleaner with, you know, manipulate XML, but the graphical part is less friendly.
So I'm getting rid of that because we're not using it.
So, so you're going to use. So when you use a do it on Android, we will see the XML, and you will see the GUI. I'll probably use more of the XML view for interacting with things because it's all.
it's a bit I think easier to understand at least for me, but I'll show you the GUI tools for, um.
So anyway, but let's go back here. This is understand the logic.
And this is the big thing, I think will help you. and one of the reasons why I wanted to cover this now.
We in the context where our main focus actually for the midterm will be on swift UIYY is storyboard worth looking at is because it helps you understand what's actually happening.
When you do swift UI.
Yeah yeah yeah the xml. xml is clean and autocomplete I agree, I agree with you exactly the XML so much easier for us.
But all these calls to update analysis.
Where is that hear me, This is the code here for analysis result.
This is where it's actually calculated, it's built into the view.
Where is this code in this view called me. This is reference this view is included in the main view right here, we say analysis result is here, that's putting where the end result is on the screen.
And we refer to the mode and the user input which are, you know, connect by a binding.
But when is it updated.
When is this code run.
Whenever.
So this is, if you understand this.
You understand swift UI, and why it's so cool, because what we're getting to do is, you know, we just put this thing here and we say, update it when it needs to be.
And when you should update is when these variables change because we declare them as binding variables, but we don't have to, in the flow of our program we have to think well when does it need to be updated here.
I will tell you when I was developing this program. When I was doing this, I had bugs.
I had bugs because I didn't miss a put an update analysis here first. I may have forgotten to put it here after the I mean it's like I had to make sure okay when the first week, first comes up I better update the screen.
Okay, when I you know, set up, know these buttons and whenever there is an action.
Yeah.
You know, basically this is saying this is all setting up the actions are all the menu buttons and visit okay when a menu button is called, I can't just change the analysis mode, which is all I had to do and swift you I just update the variable eyes Oh
well what's dependent on that well I've made this update analysis which will update the analysis part of that depends upon mode, I had to remember that so I called it.
And here again.
I had to do it when a when a menu item is selected, I better put it there.
Wait, is that redundant.
Oh no, yeah do analysis, decide this is whenever a key is pressed. And this one is whenever a menu item is processed.
Yeah, so when any of the when any of the state very in so in text analyzer three a day or two. Whenever any of the state variables are changed.
Any views that depend on those state variables are automatically updated.
That's the key with a.
So what's the difference between the state and the binding variables.
So what the difference between the state and the binding variables, is that the state is where this is the actual state.
And the binding is a reference to that state.
states the actual state, and binding is just a pointer to it.
Yeah, a binding is like, it's like calling there it's literally in see if you've passed it a pointer to it.
Can you say it's like call it without calling it it's that you have a reference for it turns out, under the hood, it's actually more complicated because around the state variable is all this monitoring machinery to say, Oh, this variables change so we
better call this code.
But that's all you don't even have to do it, but from, from your codes perspective.
It looks like a reference.
Java reference to a you know a shared shared object or, you know, and see you're pointing to a variable that's stored elsewhere.
So I mean, these wise not saying, I saw I'm not saying calling the variable because you never call variables you access them, neither read them, or you write them here reads and writes to the variables do other things.
overwritten.
That's not
so that this thing about state variables is the thing, if you understand state variables, and you, and you understand when the views are being updated, you really understand swift UI, and you should be able to map mentally between how swift UI is doing
things, and how storyboard is doing it because underneath the end of the day, the functionality is fundamentally the same. It's just a different way of expressing it.
And these different expressions have different advantages disadvantages I mean the advantage of doing the storyboard kind of way it's very clear. Oh, there's these things on the screen.
That's what's doesn't it and then the functionality associated with completely separate and state you manage the exact control flow of how your screen is updated and you can do however you like.
I'm here you're not really controlling how the screens updated you're just saying, This is what the screen should look like. and here are the variables which would do that.
But you are manually saying oh change this change that change that. And if you want to have that kind of granular changing. It can be a little confusing because like, well, how should I do that like but you have these weird things that we animate things
by literally just changing certain variables, I mean, notice that when we rotate.
Well the typing. Notice that when we type things in that in this thing. As we type, it automatically updates the screen, we didn't have to manually check to update the screen, but it just happens because of how the code structured.
And so if you don't want to do that you have to think about it. Now, if you compare this to how we know how you do things here.
I have to specifically put something on here to say, whenever I have to add in functionality here for this do analysis and when does this get called.
I have to say well what event should happen here Oh, the event that should happen is, anywhere is this TT if you go here, it's like, oh, editing changed.
Now I could have done it on vaulted editing begin to and touch me out of touch down your top into a drag drag inside of it, and there's all these different events I can think of how your colleagues explicitly insight well should I do this one or should
I do that one I'm not sure it's like, but that's actually what we don't we don't really hear, but we care. It's a text field.
But we care. It's a text field. So we care about is, did the text change, we don't necessarily care whether they tap in it, they none of the scrolling in it so it's like in the tax change if the text change we update the result is the text didn't change
and we don't update the result.
And so, and and notice I'm actually structured.
This code we bring up here.
I've actually structured the code here by making this update analysis function, rather than having this update analysis function that updates the whole view, you might I could have instead implemented it so that in the update analysis and do analysis,
it updated the appropriate state variables. And here I just updated whatever state variables needed to be done and here I just update whatever you know things need to be done and maybe there was less work.
That could have been done rather than, you know, doing all this but even this is, this isn't that much work, this is having a function to update the state of your screen.
Based on changes to variables is a common design pattern that makes your code much saner much easier for you to think about how it is, but it's not the only way to structure it.
So, this is effectively what you get is under the hood, it makes this update analysis function for you.
And this update, update well it doesn't make an update now since update screen as what ever needs to be updated and then sticks these calls in, wherever you need it in your app to update the screen whenever any of those values change automatically.
And that's why, You know what's this, we have 88 lines of code.
And 74 lines of XML, compared to
what these aren't even realize this is for the preview hundred lines
of things to describe it. I mean, it's like, you know, a, it's like, 150 I mean right saying like 50 lines of code.
And actually improperly this interest will look at this, this is 88 lines. It's almost 100 and this doesn't even say anything about how the layout works.
There's nothing about how the layout structure
and idiot lines, and we get the entire layout here for another like 20 lines.
So, it's kind of crazy.
But at this point, just to keep in mind for the midterm.
The material for the midterm.
This class come back here.
The material for the midterm is these two assignments, which are based on these five tutorials, it's really mostly the first for tutorials, but if you don't tutorial five will help you understand these other things.
I think I don't add any questions here.
I didn't ask any storyboard specific questions.
So, in principle, you could skip doing tutorial five just focus on tutorial for you know one through four and then how they relate to assignment one and two and you should in person will be fine for the midterm because I'm very careful to make sure my
questions on the midterm will be based on these, you know these 11 here, and these, you know, seven questions now. I'm not just going to repeat those questions I'm going to basically asked about the concepts.
I expect you to have learned from those questions, and we will talk about you know that more so make sure you don't just. If you're working with others makes you understand what's really going on.
If you just search for the answer or do something else and like okay I got an answer like you know if you understand what's going on.
If you don't ask.
Will the file include both Android and Mac iOS development or in the finals cumulative.
It will include both, but the final will be probably a bit more biased towards Android. But, but no, I'm good. It'll be, it'll be about the whole semester and the reason it will be about the whole semester is because it's cumulative.
And it's about things so
I'm happy to keep talking about this but I kind of feel like I've talked about what I need to for these things.
Yeah, starting from now yeah starting tutorial six through 10 will all be Android Yes. So basically, after this, you can. After you finish the assignment to.
You can put away your Mac and work on Windows, and you might want to go back to your Mac to review things for the final exam. But, honestly, you. It's all about conceptual stuff so moving, what is this girl doing so if you remember how the code works,
but you're trying to figure it out, you need to get your Mac out and trying to run things.
Cool.