[MUSIC] Okay, now what we're gonna do is we're gonna layout our user interface in this case, what we'd like is we'd like a log in button, a log out button, a UI image view container and a refresh button or a reload button. So let's go ahead and just do that using some of the processes that we've already seen. All right, so let's start by going into our program and going into our storyboard and let's get our code up and I think that we'll just start by turning off size classes as I like to do. And great, we get a little bit more screen real estate here. All right, and then I'm gonna get a text button for our login. I'm gonna put that up here, and I'm gonna change it so it says login. And then I'm gonna option drag it over here. And change the text so it says log out and re-position it so it kinda looks like it matches there, great. All right, now I'm gonna get an image view container. Whoops. And I'm gonna center that in the middle of the field in the middle of the UI. I'm going to stretch it out to the edges, and I'm going to go ahead and check to see how big it is when it's stretched out here, we're using the little ruler. So it's 320, so let's go ahead and make it 320 by 320. We'll focus on square. I'm going to set it in the center. Get it in the center. Now I'm gonna option drag my login button down here and I'm gonna do, let's say refresh. All right, so that is the basics. Now what we wanna do is put some constraints in there. So for starters I'm gonna have the image view be centered horizontally in the container. And I'm gonna go ahead and have it be stretched out to the width of the container. And here's interesting. I want to specify that the aspect ratio is gonna remain constant. So the idea is that regardless of how big or small the screen is, it should be centered and it should be square. All right, so add those constraints. And then what we want to do is we want to, this refresh button, we'd like that to be in the center horizontally and we'd like the distance from, actually lets just go ahead and put it all the way at the bottom. Let's just have that be anchored on the bottom. For login and logout up here I like where they're positioned, so let's go ahead and add some constraints here and say this one's going to be in the upper left corner at the position where we put it. I'm going to go ahead and make it zero. So there's zero. Good. And add those two constraints. And then I'm going to put this one, and add constraints for that one. We'll make that one zero and zero on the right. Add those two constraints. Okay, so now we're gonna run it to make sure the constraints did what I think I wanted them to do. Okay, so far so good, build succeeded. And in a second we'll get our simulator up. Okay that was kinda funny, I started running my, I started running my application and it took over my camera, so we're gonna undo that. Let's set up our destination to be the simulator with the iPhone 6S Plus and we'll try running it again to make sure that our constraints came out the way we intended for them to come out. All right, let's bring this back to our screen. All right, it looks okay. I want that refresh button to be down in the bottom. I'm not sure why it's not down there. So let's see if we can fix that. And while we're fixing that, let's put some content into that image view container, so that we can see what it is that's in there. So we're going to do that by, as I described previously, by going over to our project navigator, looking into supporting files. We don't have any pictures there right now. So, let's see what we can do about finding ourselves a picture that we like. Let's go into. My Downloads and here's a picture of me. Let's put that in supporting files. XCode's gonna ask me about how I want to do that, copy items if needed, okay. And so now if I click on image view and I come on up here to my property attributes, I should see an option of picking that picture. Great. All right, that's good. So now my smiling mug is in our interface, and now, if I run it, oh, I didn't fix refresh. Let me fix that. All right, that puts my picture in the view. That's good. I like that. And then let's go back here and let's see if we can adjust this again. Let's see. We currently, if I look over here in our constraints. We can see that we have constraints. All we have is align to the center. Hm, I thought I put a constraint in to put it at 0 at the bottom, but maybe I clicked here and it didn't add it. There we go, let's try that. And let's rerun it. Okay, there we go. I like the way that interface looks. It's a good layout. And now the last thing we need to do is drag and drop the components that we need to access for our app. So I'm gonna Control drag and drop the login item up here, we'll call it login Button. And the reason why I'm doing that is because I'd like to disable it when we're already logged in. Similar for logout, I would like to be able to disable the logout button if we are not logged in. In order to that, we gonna need access to those components. And then, we're also going to need the refresh button to make it enabled and disabled the same way. [SOUND] And then we're gonna need actions that happen on our login, our logout, and our refresh. So let's control drop over here and get an action for that. We'll call it login button. Oops. Actually, I don't like that at all, because I named it the same thing as the object. Let's see. Let's call it login button first. All right, then let's do log out. Log out button pressed. Then refresh button. Called refresh button pressed. Now, I have to say that I'm a little worried that when I dragged and dropped that log in button action over. And, gave it a name that matched the button itself. And then, I just changed it in the code. I'm a little worried that the link doesn't still remain there between the log in button and the code. I'm just gonna go ahead and test it real quick. And so if I hit the login button, I'm just gonna say, let's have self.log and button.text to be equal to everything is okay. Just to make sure that when we run this we haven't lost the connection between hitting the login button and hitting the log in button and actually change it. So here's a good example. Property taxes not found on object UI button. What have I done? What properties do we have? Title, label because this isn't a label, it's a button. There we go. All right, so the button has a different field. All right, and our simulator comes up. Wait for it, there we go. And we hit login button. Now if we did loose the linkage, okay. So let's go to our story board, hit our button, check to see what this is connecting to. Let's. Drag our touch-up inside to our login Button Pressed. All right, so let's try that. So what I've done here is I've, these are the places where you can connect all of your UI elements to a particular function. And so rather than drag and dropping from the element in my Storyboard over to the code. I'm drag and dropping from these little slots here, these little circles over to the code. This is what you do if you've written the code before you dragged and dropped over. The dragging and dropping from the UI element sort of makes this link for you conveniently and does the template. But if were to start to typing the function first and then after the fact wanted to connect them this is how you would do it. You right click on the element and then you drag and drop from the event that you want to handle with the particular function. The event that we're handling is called touch up and side which is a tap. So now if we run it, hopefully everything will go okay. Last time we got an error because when we touched that login button the function that I initially connected it to, when it doesn't exist anymore, because I changed the name. So let's see if that works. Okay, great. So you can see that the text is in fact changing but the button won't allow it to stay changed which is fine. All right, so good. All right, so everything is connected together. We have access to the login button, we have access to the logout button, we have access to the refresh button, and we have access to, no we don't have access to the picture. We need access to the picture if we are going to change it after we talk to Instagram. So we're gonna call it ImageView, Okay, UI ImageView, ImageView. All right, so I think that's everything that we need for now. Let's run it on a bigger device to make sure we like the way it comes out. Let's do protect two and it will take a second for the simulator to join us cuz it's gonna reboot. Close that simulator. Try it again. All right, so it's gonna take a second to boot. And so, what we've done is we've added that. Up, there we go. All right, I like the way that looks. You can see that the image maintained its square aspect ratio. All the buttons are in the places where I wanted them with constraints. I'm happy with that. So, lets, next thing that we need to do now is we need to talk about bringing in our authentication to the Instagram service and to do that we need to use the OAuth 2.0 protocol. So we need to talk about that a little bit before we go ahead and implement it in our code. All right, so that's what we'll do next. [MUSIC]
