All right. 1
So first things first, you should have cloned the starting project from the GitHub repository FlashChat 2
iOS 13, and we're going to clone it like you have done before many, many times. 3
So once you've cloned it, you should end up with a file that looks like this. 4
And if you go ahead and expand the folders, then you'll see that we've got a Main.storyboard that's already 5
been set up. 6
And in this app, we've got a little bit more of a complex setup. 7
We've got four screens and this first screen is the welcome screen, 8
then we've got a registration screen, a login screen, 9
and finally, the actual chat screen. 10
So notice how we're using a lot of custom assets in here. 11
For example, the way that we're able to get these shadows and shapes around these text fields, the email 12
and password text fields is by using some custom assets that we've added in here. 13
So these have their custom shadows and shapes and we've basically just used these as an Image view, so 14
that we can give our app some custom design and make it look beautiful. 15
Now, in addition, we've got some colors that are going to be the brand colors for our app. 16
So we've defined these colors over here. And then we've given them a name so that we'll be able to identify 17
it in our app. 18
And we've also got some other images, such as the app icons and the avatars that we'll be using in the 19
app. 20
So heading back over to the Main.storyboard, you'll notice that if you go into Assistant mode that 21
we've already linked up some of these IBOutlets and IBActions. 22
So for example, over here on the welcome screen, we've got the titleLabel that's been linked up, and then 23
over here on the registration and login screens, we've got these text fields already linked up and the 24
IBActions for the buttons. 25
Now, if you don't see the files that are associated with these design files automatically showing up 26
when you go to the assistant view, then it might just be that you have to click on automatic and select 27
it manually which is a little bit ironic given that it's called automatic. 28
But essentially, the reason why these are paired up if you remember is because we've actually linked 29
it in the storyboard file, so when we've selected each of these screens and we've created these new view 30
controllers, we've added it inside here as the custom class that's going to control the screen. 31
And we've done that for each of these screens, so ChatViewController is linked 32
to ChatViewController.swift, the login view controller screen is linked to the LoginViewController.swift, 33
et cetera. But sometimes Xcode is a little bit weird and it shows you this file which is actually 34
the header file, which is not what we want, and instead you want to click on Automatic and select the 35
Swift File like this. 36
So let's go ahead and close down our assistant and let's head back to our Main.storyboard. 37
So notice that most of the components that have been added here are things that you've already seen 38
before, 39
so labels, buttons, text views, image views, but this we've yet to use. 40
So this is what's called a table view and you can get hold of it by simply going to the Object library 41
and searching for a table view. And you can read through this, 42
but basically, it's just a way for us to be able to display data in a list. 43
So on Android, it's called a list view and it's probably a little bit better of a description, 44
rather than table view. 45
But if you have an iPhone, then you've already seen table views. 46
If you think about your mail app, this is a bog-standard table view without any modifications. 47
And even if you think about the chat app, this is actually still based on a table view because it's vertically 48
stacked cells and each of these are just simply customized to look a little bit more pretty than the 49
standard table view, and we're gonna be doing this later on ourselves, as well creating these custom views 50
in our messaging app. So if in the future, you need a table view or you need the functionality of this 51
kind of vertically scrolling and stacked components, you'll know to get it from the object library. 52
Drag it on and link it up as an outlet as you would for any other component on the Main.storyboard. 53
So the other thing that you might have noticed when you've opened up this app is that we've got a couple 54
of warnings here. And they're telling us that there's a couple of view controllers on our Main.toryboard 55
which is unreachable because it has no entry points. 56
So what does that mean? 57
Well, notice how we've got these four screens. We've got this arrow which determines where the app is 58
going to start out which screen it's going to show first. 59
And you can drag this around or you can simply select the View Controller and click Is Initial View 60
Controller. 61
It does exactly the same thing. 62
I find it easier to just visually just drag that arrow around. But you can see that if this is the entry 63
point, this is the first screen that the user sees. 64
Then in order to get to some of these other screens, we're going to need some segue ways, right? 65
And at the moment, there are no segues because I've left it for you to set up. 66
So I want you to see if you remember how to set up segues and I want you to set up a segue between 67
the RegisterViewController and the ChatViewController, 68
so from this screen to this screen. And then another one between the LoginViewController and the 69
ChatViewController, 70
so from the screen to the screen. Because remember, once the user successfully registers all logs in which 71
take them directly to the ChatViewController. 72
So pause the video and see if you can complete that challenge. 73
All right. 74
So this shouldn't be too hard. 75
Remember, firstly, we have to select the entire view controller, and you can either click and drag like this, or 76
the easiest way is actually just to click on this little yellow icon up here which does the same thing. 77
So, now from this point, from the RegisterViewController, we're going to make a link or a segue to the 78
CharViewController. 79
So I'm going to hold down the control key on my keyboard, click from here and drag it over to this screen, 80
and then go ahead and let go. 81
And now I've created a segue and I'm going to choose a bog standard show segue as we have done many, 82
many times before. 83
And then I'm gonna do the same thing for our LoginViewController, and now we have two segue set up. 84
So if you're at all confused about this, then be sure to head back to previous modules or search in the 85
course for segues, 86
because we've covered this in detail before. So I'm not going to waste too much time talking about it 87
again here. 88
Now, the type of segue that I haven't shown you before is a much simpler type of segway because these 89
segue actually connect a view controller to another view controller. So they have to be triggered 90
manually and we do that using the identifier. 91
So you've seen this before as well. But there's another type of segue which is much simpler. 92
We can actually select the register button, hold down the control key on the keyboard, click and drag 93
from it to the register screen. 94
So this way, what we're saying is that we should show the RegisterViewController when the user taps 95
on the register button. And indeed, if you right-click on this button now, you can see that there is now 96
a triggered segue set up so, that whenever this button is tapped, it goes straight to 97
the RegisterViewController. 98
So let's go ahead and do the same thing for the login screen as well. 99
And now if we go ahead and run our app, then you'll see that when I click on register, it goes to the register 100
screen, 101
and when I click on login, it goes on to the login screen. 102
Now, notice that we're getting what's called a modal transition. 103
So this is a screen that slides up from the bottom and covers the one that's behind. 104
Now, this is not quite the behavior that we want because what we actually want to do is to have a navigation 105
stack, 106
so a way to be able to replace the previous screen with the next screen. Because this way will end up 107
with a navigation bar and will end up with a back button which allows us to go easily back and forth 108
between the welcome screen and each of these register or login screen. 109
Now, how do we do this? 110
Well, it's pretty simple. 111
We select the first view controller. 112
So this is what we would call the route view controller, it's the one that we started from. 113
And we select it again using that yellow button. We go to Editor and then Embed In, and then we select Navigation 114
Controller. 115
And notice how 116
as soon as I do that, you'll see that all of the downstream view controllers get a navigation bar added 117
in completely for free. 118
So we haven't done anything to create these other than embed the route view controller into a navigation 119
controller stack. 120
So, now each of these screens have a back button and the screen has a top navigation bar. 121
And if we run our app again, you'll see that we're able to navigate back and forth and this is the same 122
behavior that you see in a lot of apps like the settings app on your iPhone or the mail app. 123
And this is a really common way of replacing screens with other screens. And creating the navigation 124
for an app that has lots of screens like we have here. 125
So Navigation Stack is a little bit like a stack of pancakes. 126
So I know you guys are missing the food analogies. 127
So this is it. 128
It's coming in right now. 129
Here we've got a stack of three pancakes, right? 130
And in order for me to be able to eat the last pancake, I can't really get to it unless I remove the 131
top two. 132
So the that the Navigation stack works is that for every new screen that's presented, they're stacked 133
on top one another like a stack of pancakes. 134
And in order to get to the bottom one, we have to actually take these off which means these pancakes 135
at the top will get destroyed and dismissed, or eaten, or deallocated memory, whichever term you prefer, 136
and that way, we can actually get to the very, very bottom, pancake or in our case that would be the root 137
view controller which is this screen right here. 138
So, now effectively what I've got is the user will enter on the welcome screen, and then when they click 139
on the register button, that is going to take them to the register screen. When they click on the 140
login button, 141
it's gonna take them to the login screen. 142
And then once they've actually been successful in registering, then do we actually trigger the segue 143
to the table view. 144
And once they've been successful in logging in, do we take them to the chat view as well. 145
So these segues are unconditional, right? 146
It doesn't matter what they've done or if they're authenticated. 147
We don't actually care. As long as they press that button, 148
we take them straight to the screen. 149
But these segues down here, actually depend on something. 150
It depends on whether if they've successfully registered or successfully logged in before we actually 151
trigger these segues. 152
So that's why we've got two different types of segues. And our navigation stack basically allows 153
the user to navigate between these screens in case they've made the wrong decision, say, they've clicked 154
on the register, but actually they've already registered, so they actually need the login, 155
et cetera. 156
So that's a really common sort of pattern that you'll see. 157
And this is the reason why we're getting some warnings about these two segues. 158
So you can see when I click here on the warnings, it's highlighting this segue and this segue, but not 159
any of these, because these don't need an identifier, they are automatically going to be triggered from 160
the buttons. 161
So these ones need an identifier, so that we can trigger it from our code. 162
So the first one I'm going to call RegisterToChat. 163
So this is from the register screen to the chat screen. And make sure that you've spelled it exactly the 164
same way as I've got it here, 165
so that further down the line, we won't end up with any problem of mismatch. 166
So let's hit enter on that one. You'll see one of the warnings disappear. 167
And then this one, this is going to be called LoginToChat. And notice how login, the "I," I've kept lowercase. 168
So, again, make sure that you've got exactly the same spelling as I've got here. 169
So, now when we hit enter and activate that, then we should be able to clear our warnings. 170
So, now if you hit command B to rebuild our app and refresh those warnings, then all of the ones that 171
shouldn't be there anymore should get cleared. 172
And we've now gotten to our starting point and we're ready to create some functionality in our app. 173
In the next lesson, 174
we're going to be adding some animation to our title here, the FlashChat title. And in order to do that, 175
we're going to be learning about Swift loops. 176
So all of that and more, I'll see you on the next lesson.