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 test our app to see if it's working properly or not. And we're going to improve our code if we come across with any problem. As you can see now, time left is 23 hours because one hour is passed, so that we will know when it's going to be deleted or not. So, let me look out from this and let me create a new user. I'm going to call this and give a user name like Lars Ulrich, and give a password like 123456, and sign this up.

Once I do that, I can see the James Hatfield snaps as well. So, this is looking good. Let me create my own snap to see if this works or not. So, let me choose the Monalisa from here and let me try to upload this. So, once I do that, it will take me to the feed. And here we see the Lars Ulrich. So, that's cool. Let me open this and we will only see one image and we cannot slide yet. So, I believe there is a problem. Maybe you have realized that it also showed the 23 hours label. So, let me try it one more time and we're going to take care of that later on.

So, here we go. Let me open this, and now we can slide over here to see the stories. But I believe we have some problem regarding the time label as you can see this is 23 hours and this is correct, because in fact we uploaded them one hour ago but we just uploaded Lars Ulrich snaps and it still shows 23 hours. So, I believe we have something wrong with our time-left function. So, let me try to debug this in real time so that you will understand how these things work as well. So, let me come over here to my Firebase Firestore and let me see if date is correct or not. So, it seems correct. As you can see, now it's 2:00 over here, and here you go, this is 1:00. And the date value is actually correct in both James and Lars Ulrich's documents.

So, it must be us, it must be the code that understands the difference and passes this along to the SnapViewController. So, if we come to our FeedViewController, we have to find this difference, yep, this one. And now, I'm going to test to see if we have any issues over here. So, now we are checking to see if difference is larger than 24 hours and I'm going to print out the difference over here to see if we have some different weird values. So, let me say something like difference, okay? And let me put, actually, a backslash over here and say difference so that we can filter the results in our logs. So, let me run this from scratch and since it's going to be just executed in the FeedViewController, we can come over here to our logs and search for difference to see this difference value. So, let me search for difference. And here we go, we have one 0 and one 1. So, I believe we are doing something very wrong over here because we're getting this 1 and 0, and they are actually correct. So, it has to be 24 hours in Lars and it has to be 23 hours in James. But we're not saving these values into specific individual snaps, but rather we are just passing this along to SnapViewController so that we're just using one time difference value for all snaps.

So, that's not correct. So, let me print out value so that we can see the individual dates as well. Even though we are getting everything right and even though we are doing every calculation right, as you can see we're getting two different values regarding dates. Even though we're getting these two different values, we're just using one value in SnapViewController, and that's why we are failing at this moment. In order to overcome this problem, I believe we have to create a name variable inside of our snap model so that we can integrate this time difference to our snap model as well, so that we can use this inside of our model. It would be much more structural and safer than what we already have over here.

So, I'm going to test this, okay? Because it's not working clearly and as we move along to the other snaps as we increase the number of users, it will get only worse. So, let me come over to my snap model and let me create some variable called timeDifference or timeLeft for example. So, this will be an integer. So, once we do that, now I can come over to my FeedVC and before adding my snap to the snap array, I can add this value to my snap model as well. And it doesn't auto complete, so let me delete everything from here and write it from scratch. So, when I open parentheses, it should ask me for this time left.

Let me delete this and hit command 'B' to synchronize everything. So, once I do that, when I open the snap, yep, now this is asking for time difference. So, the username is the username, okay? imageUrlArray, yep, this is the same thing. So, date is still value and for time difference I'm going to go for this '24 - difference here as well. So, once we do that, we cannot reach the difference over here, and I believe we can just get our snap creation method from here and cut this, and paste over here so that we can reach the difference. And now, I can add my snap to the snap array. And we're not going to use that at all because right now I have my snap model over here with time difference. We're not even going to use this anymore. So, I'm going to delete this and I'm going to delete this as well. We don't need it, right? And we don't need to get this snap selected time from here as well. I'm going to delete this as well, and this one. So, we don't need to pass this information using segues. Now, I can get this from here. I can just say timelabel.text and this will be time left, okay? And if you open a backslash and parentheses, you can just call snap.timeDifference. So, that's how you get the time difference for individual snaps with different values. So, let me test this and see if this works or not. And that's how you do real time debugging as well. So, if you come over here, now we have 24 hours in Lars. And if you come over here, we have 23 hours in James. So, that's great. Now, we have different time left values for our different snaps. Now, let me come over to my FeedViewController because we have to make sure that this works as in the way we want. Let's see if we have any more errors over here. We can do that in an else statement, right? So, for example, right now if difference is greater than 24 hours, we are deleting these documents and else we don't want to delete this but just add the snap instead of deleting this. So, let me delete all of this. Why did I put this over here?

Because if this is actually more than 24 hours, it will get deleted. It will be deleted and I won't need to create this snap, right? And we're getting this error and I believe I misspelled else or something. This else doesn't refer to the if control that I want. Just let me cut this and delete this. So, I want to control else for 24 hours difference, yep, this one. So, let me test this and see if this still works or not. And if this still works, I believe we are done building our Snapchat clone because we have all the functionality that we need. Here you go, 24 hours here it is. And in the James, we have 23 hours and we can slide all the images and so on. Now, we made a real good app that you can work on if you want to work with Firebase.

We have learned how to work with URL arrays inside of our Firestore. We have learned about consolidating these values and updating these values, we have learned about image sliders and everything. However, there is still an issue regarding our app. For example, over here we have the same date for all snaps. So, even though we upload something at the last minute, it will get deleted if our first snap is uploaded 24 hours ago. And if we update the date when we upload something, then the 24 hours ago snaps won't be deleted.

So, you have to have different dates for each snap as well if you really want to build a Snapchat clone and put it on the App Store. But since we are just trying to learn and trying to muster the Firebase, I'm not going to go into that. So, right now you can understand how to create some different arrays, how to create some different structures. Because you have learned so much about Firebase, and you have learned so much about Swift, then you can work your up way from here. So, I hope you enjoyed this course. Let's stop here and continue within the next section.


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