The course is part of this learning path
In this course, we're going to create a Snapchat clone using structs and various advanced techniques of Firestore.
- Learn how to make a Snapchat clone
- Understand all the features of Snapchat and how to set them up
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 start building our feed view controller so that we can retrieve those data from Firestore to display them to the user. And right now, with inside of our feed view controller, we don't even have a prototype cell. So, I'm going to increase this to one and I'm going to create my prototype cell. So, you know how this works? We have done it in the Instagram clone section, right? We're going to have only one big image over here, displaying the image of the users, one of the snaps of the users, and on the top of that, I'm going to show you the username. So, let me call this something like username for right now just to be sure that this is the username label. So, let me make this central and here you go. I believe that's good. And we need another thing, and this is image view, because we're going to display one of the snaps in our post over here, okay? So, we can make this as bigger as we want because we're only going to display this image and the username anyway, okay? So, I believe that's good. We will have this huge image showing up in our feed. So, I'm going to give this some suggested constraints and I'm going to give a width and height, okay? So, here we go. Now, we are ready to create a new feed cell. So, let me come over here and say 'New File...' I'm doing this kind of fast because we know how this works. So, I'm going to go over my Cocoa Touch Class, and I'm going to search for UITableViewCell, okay? Now to control our cell. So, this will be our FeedCell, so that I can have a class, a Cocoa Touch Class, in order to assign it to my newly created cell. So, let's bring this in, and I believe by mistake I put it under ViewControllers, even though it's just a view, but I'm not going to bother with that, okay? We know it's just sitting right there. So, let me come over to my cell, okay? This one, Table View Cell. And if you go to Identity Inspector, you can choose the 'FeedCell' and over here you have to give it an identifier as well. I'm going to call it cell. And then we have to bring those views in. So, let me come over here and in the assistant editor, I'm going to go for FeedCell. And over here, I'm going to bring in this image view. I'm going to call this feedImageView and connect it. And we're getting the same error that we have gotten previously. So, I believe we have to close this down and open it one more time to let it index. So, it's kind of an Xcode bug, but it just doesn't interfere with our work too much. So, I believe they will resolve it anyway. So, once you open and restart it, it will start indexing. And once it completes, you can try to bring this in one more time and call it feedImageView. And here you go, now it's working. And then we're going to do the same thing for label as well. So, bring in the label, and I'm going to call this feedLabel, okay, or feedUsernameLabel. So, that's good. So, let me close this down, and let me go to my FeedVC, okay? Because we don't even have the table view setup yet, so let me do these steps as well. So, I'm going to say this is TableViewDelegate, okay, and also UITableViewDataSource. So, remember how this works? We have done it like a million times. So, I believe you can do it yourself as well. So, TableView.Delegate = self TableView.DataSource is self as well. After we do that, we have to call two functions. I'm going to call the number of rows in section first, and we need cellForRowAt indexPath. So, for right now I'm just going to call this return 10, and over here, we're going to create the cell, and the cell will come from tableView.dequeueReusableCell and it will ask us for an identifier and index path, and the identifier is Cell and index path is indexPath. And of course, I'm going to first cast this as FeedCell, so that I can reach the label and image view over here. So, right now I cannot reach that. So, let me do a 'Command B' and return the cell, okay, so that I can come over here and say cell. and I can reach as you can see. So in fact, let me just call these feedUserNameLabel and just make it equal to test, okay? And of course, I cannot do that. I have to say cell.feedUsernameLabel.text. So, here you go. Now, we are ready to use our tableView inside of our code. So, let me do a 'Command B' to make this error go away. Okay. Now, we are ready to write our retrieval function. So, I'm going to call this, getSnapsFromFirebase(). So, let me open a curly brace over here, and I'm going to call this function over here. So, what do we want here? Of course we want to create our snaps, right? So, we're going to get our snaps, and we're going to pass this information to display our snaps. So, let me do that. I'm just going to call this fireStoreDatabase.collection. And this time we don't need to have any filters over here, because we're going to display all the snaps. But we have this date value. So, maybe we want to order by this date, so that we can see the most recent one as the first snap. So, I'm going to say, order( by: and I'm going to choose this descending Boolean as well, because this will be descending here. So, I'm going to call this date, and descending will be true. And then later on, I can just get my data. And this time, I'm not going to say getData, but I'm just going to addSnapshotListener, because I want to get the updated information here as well. So, if you say addSnapshotListener and hit 'Enter', it will give you either a snapshot or an error, okay? So, let me close this down. And over here, I'm going to check to see if error is not nil. And if that's the case, I'm going to call my makealert function and say error, and message will be error.localizedDescription, okay? So, don't forget to put here the question marks, and I'm going to say error. So else, if that's the case, what I want to do to get this information and display them in the table view. So, let me do the checks first. So, I'm going to control to see if snapshot.isEmpty is false, and if snapshot is not nil, okay? If that's the case of course, I'm going to go into a for loop, and I'm going to say for document in snapshot.documents, okay? And this will give me the documents. Now, I can reach the snap owner, I can reach the image URL array and I can reach the date as well. But so far, we have been just getting this information and saving those information into arrays, so that we can display them in our table views. But this time, I'm not going to do that, but rather I'm going to create a snap model using Strucks. Let's do that within 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.