Snap VC
Start course
2h 13m

In this course, we're going to create a Snapchat clone using structs and various advanced techniques of Firestore.

Learning Objectives

  • Learn how to make a Snapchat clone
  • Understand all the features of Snapchat and how to set them up

Intended Audience

This course is intended for anyone who wants to learn how to develop apps on iOS.


To get the most out of this course, some basic knowledge of iOS development would be beneficial. We recommend that you take this course as part of the Developing Mobile Apps for iOS learning path.


Hi, within this lecture, we're going to get the SDWebImage in order to show our images inside of our  Table  View. So, now we have the image URLs, but we need some tool to display them in our  Table  View. And remember, we have used this SDWWebImage in the Instagram clone section. Now, we're going to use this as well. Of course, if you have another favorite image downloader tool, you're more than welcome to use it, but I'm going to go for this SDWebImage.

So, remember how this is used, you just import this SDWebImage and you can just say sd_setImage. But in order to do that, of course, we're going to have to adjust our Podfile so that we can download this pod as well. So, let me copy this. And in order to open the Podfile, you can come over here and choose the Podfile. So, you can just paste whatever you want. And of course, after that, you have to save and close this down because we're going to go into our terminal and run pod install, anyway, okay?

So, let me make this a little bit bigger, and that's not the last pod that we're going to use in this section, unfortunately. So, let me go into Downloads and let me go into iOS Complete, and then Snapchat Clone, and now I can just run pod install because I have already edited my Podfile. So, here we go. It's installing only the SDWebImage. The other ones are already installed in my project. So, after it is complete, I can just go over to my project and start using it.

So, here we go. Let me open SnapchatClone one more time. So, now we are ready. I believe we're going to have a little bit indexing over here since we have brought in one pod. But right now, I can just try to access the SDWebImage in my FeedVC. By the way, we're going to have to decide which image URL to show in this feed image view because we're going to have an image URL array. But in here, we're only displaying one image. So, you can just choose to display the first or the last. So, let's come over here to  feedImageView and you can just call SD set image. And of course, in order to do that, you're going to have to import the SDWebImage.

So, once you import the SDWebImage, you can come over here and say SDSetImage. So, we want to set this image with URL and we don't need completion blocks. So, over here, you're going to have to call URL, and this will ask you for a string. So, we're going to get the string from our snapArray because we have this in our Snap model, right? So, you can just call snapArray[indexPath.row]. After that, you can just say .imageUrlArray. And as you can see, this gives you an array and you can go for the first element if you want, and if you want you can go for .last to get the last element to display over here.

So, this is your choice, whether you want to show the first snap of the user in the feed or user's last snap. So, that's it for showing the feed, okay? So, let me run this and see if we can get the first snaps displaying in our  FeedViewController, okay? So, let's see. In the  FeedViewController, we expect to see the James first snap. And it's taking a little bit of time. Anyway, we don't see it at all as you can see. I believe we have some error. So, let me go back to our function where we download data from Firebase.

And as you can see, we didn't even call  TableView.reloadData after this for loop. Remember, we have to do that in order to show the data inside of our Table View. Right now, we are just getting the data, but we're not refreshing our Table View so that we would see that data. So, let me run it one more time. Hopefully, we're going to see the first snap of the James this time. As you can see, now we have this. So, that's good.

So, now what I want to do is to click over here to open our snap  View  Controller in a popover VC, and in here we're going to display all the images in a slight imager, okay? So, let's do that. Let's actually bring in the prepare for segue and bring in the didSelectRow in order to do the segue and just pass this time left information to snap  View  Controller. So, let's see if we have this segue already. I have forgotten about it. Yes, we have this and let's see. Yes, it's called toSnapVC. So, let's come over here to our  FeedViewController. And when user taps one of the  Table View items, we're going to get this data and pass this to snap  View  Controller, and we're going to do as a segue, of course.

So, I'm going to create add variable in order to get this chosen snap and get this time left data in order to pass them to the snapVC. So, I'm going to call this chosen snap, okay? And this will be an optional snap and I'm going to call time left and this will be optional integer. So, we're going to assign the chosen snap depending on where user clicked. But for time left, we can come over here, we can just say self.dotimeleft is 24 hours minus difference. So, if the difference is two hours, then we will have 22 hours left to delete the snaps.

So, we're going to just pass this information to snap  View  Controller using our prepare for segue, right? So, let's come over here and say prepare for segue. So, this is the first one. And, of course, we're going to have to bring in didSelectRow as well. So, we're going to get the selected index over here. First of all, let me do my segue. So, this will be toSnapVC and sender will be nil. But before doing my segue, I'm going to assign my chosen snap to be self.snapArray[indexpath.row] so that I will know what my chosen snap is, so that I can pass this information to my snap VC.

So, over here, I'm going to say, if segue.identifier == toSnapVC, then I'm going to create my snapVC as a variable over here. So, this will be destination  View  Controller, okay? And I'm going to call this segue.destination. And I'm going to cast this as snapVC. And then later on, I'm going to say destinationVC.variablename and we need a variable over here. So, I'm going to call this selectedSnap, okay? So, this will be a type of snap optional. And I'm going to call the selected time and this will be, again, an interior optional.

So, let me come over here. And if I do a 'Cmd+B' to synchronize everything, then I can reach those variables from here as well. Now, let me wait until this is finished building up our project. Here we go. Now, we can say destinationVC.selectedSnap. Now, I can make this equal to choosenSnap. And here, I can just say destinationVC.selectedTime, and this will be our time left, self.timeLeft. Yep, this one. So, that's how we passed this information to our snap  Controller.

So, let's actually try this. I believe we have everything to try. Now, we are just passing this information, but we have to come to our snap View  Controller and display this information in our label so that we can be sure that we passed this information. So, let me do that. I'm going to call my timelabel.text. And this will display the selected time like this, not actually like this. Maybe we want to have Time Left string in front of this as well. So, let me do it this way, Time Left and a colon and a backward slash. And over here, you can just say selected time.

So, this will display the time. And right now, I believe this is optional, but we're going to take care of that later on if this works. So, let me test this. So, let me run this and let's see if we can make it work. So, click on 'James', and here we go. Now, we see the time left even though it's optional, but it's very easy to take care of that. We can come over here and say, if let time = selectedTime, then we will have a non-optional value of time.

So, I can come over here and say time rather than selected time. And now if I run this from scratch, then I will get time left, but this time with non-optional value. So, let's test this. Here we go. Now, we have the time left as 24 hours. So, here we go. Now, we are ready to get the image slider in our game. So, let's do that 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