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!
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 Upload View Controller because we are already done with the authentication method, right? We are done with the authentication module. We can create users, we can sign them in, we can log them out and we can even remember if the user is signed in or not. Now, next thing will be to create the Upload View Controller. Because why? Because we need to upload something to the server first so that we would have the data to retrieve from the database and show the data to the users in the feed view controller. But right now we don't have anything. And of course in order to do that, we need an user interface in the upload view controller. And remember the first introduction lecture in the section where I showed you what we're going to build in this section. So, you have seen the prototype app that we're going to build. Remember we are uploading an image. We are uploading a note or a comment of the user below the image. And that's all. In fact in the background we're going to upload the date, we're going to upload the username and we're going to upload the like count as well. But for right now in the user interface we only need an image view and the text field and the button. So, your assignment now is to pause the video and come up with a way to create an image view and when user taps on it you will reach the photo library of the user and get the image and display it in the image view. And you can add the text field and you can add the Save button or Upload button as well. Of course you don't have to write the upload function right now because you don't know how to do it. We're going to do it later on together. But you know how to create an image view. If you tap on it, you can take the user to the photo library and take the image back to the image view. So, let's pause the video and try to do that. [no audio] I hope you managed to do it by yourself. If not, don't worry, I'm going to show you or remind you how to do that because we have already done that before. So, I'm going to open my library and search for Image View, okay? And we're going to take the Image View and put it in here. So, this is the main thing, right? We're writing an Instagram clone. So, we have to post an image first. And after that of course, if you want to add something, you can add like a comment or maybe a note, maybe something else. I'm just going to add a comment after this image view. So, this will be the image view, okay? And below this image view, I'm going to have a text field. So, search for text field. After you drag and drop the text field. Let's make this a little bit bigger, okay? So, that's good I believe. Let me put this into the center of this view controller. And let's write comment for a placeholder and make it centrally aligned as well. And the last thing that we need is a button actually. So, let me bring in a button and make this a little bit bigger. And we can name this button Save or Upload, right? Because we're uploading something to the server. So, I'm going to call this Upload. And that looks fine to me. Now, we have to find an image to show inside of this image view. I'm going to do this step to select image that we have done before. Remember I've done with Sketch, but if you don't want to do it, you can always go to my GitHub and grab the image that you can use in your own project as well. If you have any sketch or Photoshop or anything at all, any design software, you can easily do this kind of thing. Later on in the course, we're going to have a design section as well so that we will learn how to create these basic images so that we can use in our apps very practically. So, I'm going to create a rectangle in here and I'm just going to change the color of this. Something blue should be okay. And after that I'm going to write tap to select here, okay? And of course this is way too big, I'm going to go for something like 60 or 70. And we have a fancy font here. Let me change this to something much basic like that. And I'm going to say tap to select, okay? So, user will know where to tap to select an image. So, let me make this 72. Yep, that's good. That's all I have to do. So, let me look the dimensions from here. So, we have 300 to 200. Let me go to this ruler in the size inspector so I can see the size of my actual Image View, okay? So, it's 285 and 275. So, I can adjust this to be a little bit more square than it used to be so that I can select this and export this. So, let me make this into a group and then call it select and then export this. And again, if you don't have any design software or if you don't want to deal with this, you can just download this from my GitHub account and you can use it. And I believe if you have watched the art book section, you already have a tap to select image so that you can use that image as well. So, after putting this into my assets, I'm going to go ahead to storyboard to choose the image that I have created, and here we go, we have a good looking upload view controller right now. I believe we have to make this a little bit smaller than what it is right now. And let me put this a little bit higher. I believe this is down, okay. So, let me give the suggested constraints. And of course I'm going to give fixed width and height to prevent any further issues in here. And after I do this, I believe we're getting some errors in the constraints, yep these red lines. So, in order to fix this, let me come over here and say Update Constraint Constants and this will be okay. Of course you can do this without giving fixed height and width constraints to the image view, but I'm not going to focus on user interface too much in here. All I want is to create an upload view controller so that we can learn how to work with Firebase, right? So, let's delete all of this comment section and let's bring in the image view first. I' m going to call this image view and the comment text. So, let's bring in the comment text here, commentText. And then finally, let's bring in the upload as an action, okay? So, this will be actionButtonClicked. Why did I even call this action button, I don't know. Let me define this as an outlet as well. It's not an action button, it's an upload button but I'm not going to choose action as I'm going to rather choose outlet because if you want to do something like don't enable this button until the user chooses an image view or something, you want this Upload button defined as an outlet. Okay? And once you do it you can go to this viewDidload because you have to make sure that your image view is tapable. I'm going to do this very fast because we have done this before, okay? I'm going to create a gesture recognizer and assign it to my image view. So, how do we do that? I'm going to go ahead and say imageView.IsUserInteractionEnabled, sorry, true. So, it enables us to interact with the image view like tapping on it. So, later on I'm going to create a UITapGestureRecognizer. You know how to do that, right? Target will be self, selector will be selector. Of course you have to create your selector function like this. I'm going to call this chooseImage. And under this function we're going to write the UIPicker View Controller codes, but first we have to say imageView.addGestureRecognizer gestureRecognizer. So, in here in my choose image function what should I write? Maybe you remember that we're working with something called the UIPicker View Controller, right? We're going to work with the same thing as before. So, I'm going to create the picker controller. So, this is going to be a UIImagePickerController, okay? And the speaker controller will have a delegate of the current view controller. So, I'm going to assign it to be self. Once I do that it gives me an error because I have to make sure I come up here and make my upload view controller a delegate of the picker controller. So, this is UIImagePickerControllerDelegate and a UINavigationControllerDelegate. Once I do that, the error will go away so I can proceed. And we have to assign it. We have to specify the source type of the speaker control. So, the source type of the speaker controller will be photoLibrary. Of course you can go for camera as well but it's not going to work on the simulator. So, I'm going to go for a photoLibrary, and you can't specify if you're going to allow editing or something else but I'm not going to do that. You know how to do that already. So, I'm just going to present this, okay? I'm of course going to use animation and for completion, I'm going to say no. So next, we want to specify what will happen once a user goes to the photo library and chooses an image. Remember how we do that. There is a function in order to specify this and it's called didFinishPickingMedia, okay? So, write didFinishPickingMedia and it will show up like this, and under this function we're going to get a dictionary, we're going to get a dictionary which is a UIImagePickerController InfoKey to any dictionary. So, I'm going to say imageView.image is going to be an info and in here for the InfoKey, I'm going to say dot and you will get the options here. I'm going to go for originalImage and in return this will give me any object and I'm going to optionally cast this as a UIImage. And then I'm going to say self.dismiss the animated, yep why not? And the completion will be new. So, actually we are done here right now, but before we test this, maybe we want to go to info.plist in order to give a photo library usage description like we did before. So, find the privacy, okay? Photo library usage description. And in here write an explanatory reason. Something like to choose a photo, okay? And of course in the real life, maybe you may want to be more specific here. And go to the UploadViewController, then we are done. So, let's run this. And if it's working done, the only thing left to do here is to learn how to write data to storage and to database in the Firebase so that we can save all of this information in our cloud server. So, here we go I believe now this simulator is okay so let's see. We're going to go to upload view controller and this is looking nice. So, if I tap here to select any picture from my gallery, it will show me the photo library of the current user of current phone. And these are the old photos that we used in art book, but it's going to do the job. As you can see if I choose one of them, then it displays it here. Now, I can write any comment that I want and I can hit the "Upload" button. Of course, it's not going to work because we don't have that function right now. So, we now want to learn how to upload this image to the storage under this action button clicked. And then we're going to learn how to write into the database as well. Let's do all of those in the next lecture.
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.