User Interface
Start course
3h 35m

In this course, we're going to create an Instagram Clone and learn how to work with cloud servers using Firebase. By the end of this course, you will be well-equipped to build your own apps!

Intended Audience

This course is designed for anyone who wants to:

  • Learn about iOS development and coding
  • Move into a career as an iOS developer
  • Master Swift skills


To get the most out of this course, you should have some basic knowledge of iOS.


Hi. Within this lecture, we're going to create our user interface, we're going to see how to work with tab bars. And before we go on and dive deep in our main.storyboard, as you can see this is indexing processing files. After you integrate the pots, before you do anything, please wait to make sure that this indexing is done because there are too many files in your project right now and they're newly integrated. In order to make things synchronized, you're just going to have to wait for them to index. Remember, for the step five, we have this importing Firebase and adding this FirebaseApp.configure in our app delegate. So, let's do that and then we can go back to our main storyboard. So, first thing to do is just importing this Firebase, here. Okay, and as you can see, we see the other modules as well, so everything seems to be working right now, but it asks us to import the Firebase itself. So, I'm going to go ahead and do that, okay. And under this, did finish launching with options. I'm going to configure the Firebase. So, this is one of the first functions that is executed actually when our app is opened and something like we did load, but it's not specific to View Controller. Okay, so we did load this specific to View Controller and did finish launching with options, of course, is related to the whole app, okay? So, even before the View Controller gets slowed, this gets code, so, I'm going to configure my Firebase app in here. So, I'm going to say Firebase app. So, let me go back and check one more time. Yes, FirebaseApp.comfigure. So, FirebaseApp, yes, this one, .comfigure. So, this will actually start our Firebase process. Now, generally after we integrate some parts, some external libraries, we want to come over simulator and test that to see if that's working. But we don't have any tab bar, we don't have any user interface right now. So, quickly let's go to main.storyboard in order to make sure we have a user interface that we can see what's going on. So, in here, we have an empty View Controller and that's good because we're going to need a sign-in, sign-up View Controller, as you have seen in the previous lectures, right? We're going to use this View Controller for that reason. We're going to have our sign-up and sign-in. But also, I want to have a tab bar and some View Controllers connect to that tap bar as well. So remember, we could have chosen that when we first create the project but we have gone for a single View app anyway. And now we're going to manually import this and in order to do that, if you search for a tab bar, here, you will see something called tab bar controller. If you drag and drop this and it's quite large as you can see, it will drag and drop. So, let me just take this View Controller and take it to the right side. So, here you see a Tab Bar Controller and two View Controllers connected to that tab bar. So, you see this Item 1 and Item 2 here. So, this is for Item 1, and this is for Item 2. If we click on the Item 1, first View Controller will open. If we click on the Item 2, the second View Controller will open. So, this is kind of cool. This is very easy to work with. We have this Tab Bar Controller and we have two View Controllers connected to that tab bar. And we can actually add tab bars until five View Controllers.  Okay? And in the first tab bar, I'm going to use a Feed View Controller, and in the second one, I'm going to use an Upload View Controller. So, here I'm going to have a sign-in/ sign-up View Controller. I'm going to ask for the user email and the password. I'm going to have a two buttons, and I'm going to, of course, do a segue from here to that tab bar controller. So, later on when a user signs in, we will take them to their feed. So, in order to do that, let me do the segue here. If I say show segue, as you can see this is not we expect. We're going to take care of this. Just hit on 'Segue'. And you see this is kind of a show segue without navigation controller. Okay, so this is kind of a popover over here, but I don't want that. And in this case, I don't want a navigation controller as well because I don't want to go back to my sign in. Once I signed in, you shouldn't take back, take the user back to the sign-in view controller unless they log out. Okay? So, we don't want navigation controller but we don't want that popover feature as well. So, we have to change our segue type this time. So far, we have only been working with show segues and we have dealt with this kind of problem with navigation controllers. But if you click on the segue and go to the identity inspector, you can see the other selections as well. For example, let me choose one by one. If I say show detail, for example, nothing will change. So, let me go to another one like present modally. So, that is the one that we're looking for but that I'm going to show you later, and this is present as popover. And this is not we want actually. And in here we have some deprecated ones. Of course, we're not going to use them. So, if you go to present modally, you can see the presentation and you can see this. What we want is the presentation. If you go to your automatic or full screen, you will see we want this full screen. As you can see, we don't see a popover here anymore. So, this is exactly what we want. If you go to automatic, this will be the default one and you can actually try and see the other ones as well, but in most of the cases we want to go to full screen, okay? So, let's choose full screen and here you go. And we are changing the presentation not the one below it, okay? So, presentation, full screen. So, this is not a show segue, present modally segue and we are doing a full screen presentation. And of course, we have to have an identifier as well. So, I'm going to call this Two-feed View Controller, okay? So, if you click on this item over here. If you can change the Item 1 to feed for example, and you can change the icon as well. Right now, we only have some kind of square icon here and you can choose whatever you want from this image. If you want to import an image you can choose that one as well. For example, I'm going to choose the F icon for feed, and in the Item 2, I'm going to go for upload and I'm going to look for 'U' circle, okay. So, now I have a good tap bar in here with feed and upload and I have my segue. So, next thing will be to bring in the buttons and text fields in my Sign-in View Controller, okay? So, we're going to have two buttons in here. One for signing in, the other one for signing up. Signing up means registering for a new account, okay?  So, let me change this to sign in and this is for accounts that have been created before and this one is going to be sign up. So, that's good. We have our buttons. Let me try to bring in the text field as well. So, first one will be the email text field, okay? This is where we're going to take the input from the user. So, let's say, 'Email' to here, and let me make this into a central way. So, let me put this into the center and copy and paste it. The second one will be the password, Okay? And that's it, actually. Let me just make this a little bit aligned with each other. Let me take this down a little bit so that we can have a label as a title over the top like this. So, this is of course, not mandatory. I'm just doing this so that we would have a good looking Sign-in View Controller. And I'm going to name this Instagram Clone, okay? So, you can name yours whatever you want. And I'm going to increase the font a little bit. So, here we go. We have a good looking Sign-in View Controller in which we will have to sign the user up or in. So, here we go. Now, let me give the suggested constraints here so that they will be sitting on the right place when we open it up. And the next thing would be to actually define all of these values in my View Controller. So, let me go to buttons first. First, I'm going to drag and drop as an action and I'm going to call this sign-in clicked, and of course, we're going to have a sign-up clicked as well. So, let me bring in this one, signup clicked, and we're going to have two text fields here. So, first of which email text. Okay, I'm going to call this email text and the second one will be the password text. So, password text. So, here we go. We're done with the sign-in button and sign-up button and Sign-in View Controller user face in fact. So, in the Sign-In Clicked, let me perform a segue for right now, as an example, to see if my tab bar is working. I'm going to call this 'toFeedVC' and sender will be nil. I'm going to run this. So, remember I have imported Firebase in my project and I have opened the workspace project. Even though it got indexed, it will still take a little bit time to build all of these files for the first time. After you do this once, it will get much more faster, it will just start, like it used to start in general examples like when you don't use Firebase, but for right now we're going to have to wait to build all of these Firebase modules, so that we will have a working simulator. And of course, feel free to pause the video and come back when it's done, so that we can see if our tab bar is working in a way that we want it to, okay? By the way, on the left hand side, you see a lot of warnings and they are all in the Firebase pods, okay? So, when they're in the pods, you don't have to worry about it and yellow means warnings and red means errors. If you get any error, you won't even be able to run your project on a simulator. If you get a warning, it just warns you to take care of possible future problems, and if you're working with a pod you just don't have to worry about that. So, here we go. We're good looking in here and if I hit on the 'Sign-in', as you can see, it doesn't pop over or anything, it just brings us to the tab bar in which we have two tabs, first of which feed, second one is upload. So, when I click on this, it just actually changes the View Controller, but we cannot see it because we don't have anything in them. But right now, we know that this is working. And of course, we have some problems here. Like, we don't have a logout tap bar or we don't have a logout button. So, we cannot go back to our Sign-in View Controller even though if we wanted to. We have to add a new View Controller here, we have to add a new tab bar. And then later on, of course, we're going to have to check the user, we're going to have to create the user and check to see if they are giving the right credentials, only then we're going to perform the segue and let them in. Let's do this in the next lecture.


About the Author
Learning Paths

Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.

Covered Topics