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 take care of our problems by figuring out how to sort this posts by date and starting to implement LIKE function as well. In order to do that, we're going to use a native method of Firebase. So, when we get this information from the Firestore database, we just add the SnapshotListener.
So, if you hit 'Enter' over here before we add the SnapshotListener, we're going to add another method called .order. This will enable us to order data in any way we want. So, if you say, '.order', you will see that it will ask you for a FieldPath or String. So, if you give date here, you can specify whether it's going to be a descending or ascending. So, we want this one a descending Boolean by FieldPath. So, I'm going to say, 'date' here. And for 'descending: true' for me. So, it's going to take the date and it's going to order all of these post by descending a structure so that I will see every post by descending order regarding to their dates.
So, let's test this and let's see if we can get the Last Supper in the first position when we run this. Remember, this is the last post that we have posted. And here you go. Now, we see all of these posts in order by their date. So, let me try this. Let me add another one. Let me choose 'Starry Night' this time. And for comment, I'm going to say, let's say, van Gogh or test. I don't know. Let's say, 'van Gogh'. And hit the 'Upload' button. It will upload this and download then in the feed. And, as you can see, we see the van Gogh in the first position.
So, our Instagram clone actually works at this point. So, this .order works. So, this is how you order your queries. This is how you order when you try to retrieve information from the database. And we're going to have to filter the results as well. And, in order to do that, we're going to implement LIKE function. In order to learn that, actually. In the likeButtonClicked, now we're just going to print 'likeButtonClicked'. And you will see, whenever we tap one of the Like buttons, it will print out this statement in the logs. So, we will be certain that this works. So, you can just click one of the Like buttons here. As you can see in the logs, 'like button click' appears. So, let's try this one as well. As you can see, wherever we type, wherever we hit on the Like button, it just prints out in the logs. So, what do we want to do in the Like button when we tap on that? We want to increase these likes by one and then upload the new value to the server. So, we're going to see how we can filter our results just by the related posts. So, if I click on this post, I just want to take this Like value from here or I just want to upload to this Like value, not the other post. And also, I want to not touch the other values from here. I just want to update the Likes. So, we're going to see how to do that.
And this is important information because if you don't know what you're doing, you may end up by uploading Likes value to the all of the posts or you can delete everything in a post by mistake. So, we're going to see how to do that properly working with some other methods of Firebase. So, let's see how we can do it. Let's go into the Like button. And in here, we are getting all of these information. And we're getting the likeArray and we're getting this documentID as well. But, we are not using this documentID. We didn't save this documentID into any array yet.
So, let's do that because we will need that documentID in order to differentiate posts from each other. We have to know how to get the current post. So, I'm going to use a different technique in order to do that. I'm going to add another label here and assign my documentIdArray to that label so that I can reach that value inside of my feed cell as well. Because, that's where I want to write my Like function, inside of my FeedCell. You will see what I mean. Let me just write this. So, this is going to be a documentIdArray. And this is going to be a stringArray. And in here, I'm going to remove all the values to prevent duplicating. And in here, in the for loop, I'm going to append this documentID to my documentIdArray. So far, so good.
You know how to do this. But now, let me add this. Now, I have to reach this documentID from FeedCell. So, that's the trick. So, it gives me an error because I misspelled it. Yes, this one. I want this one. So, inside of FeedCell, how can I reach the related documentID. I don't have an indexPath in my FeedCell. So, how can I know which user tapped on which picture? Which post? So, I'm going to add a hidden label in here. So, that I can reach from the FeedCell, user won't be able to see that label but we know the documentIdLabel is there so I can get the current value from the documentID. This is a technique that you can use. Of course, you can come up with another solution as well. But, I believe, this is the easiest one. So, let me show you how it goes.
So, you have to bring in a 'Label'. You can put it wherever you want because it's going to be hidden. If you go to 'Properties' here, the Property Inspector, you can check this 'Hidden' box and it will be hidden from the user. So, let me add the missing constraints as well. And, in fact, it doesn't matter if I add the constraints or not, but it's good to add this because we will be getting errors if we don't do it. So, let me bring in this label to my FeedCell. So, let's say that this is documentIdLabel, 'documentIdLabel'. So, let's connect this. So now, I have this label.
Lets go back our 'FeedViewController'. Not FeedViewController, 'FeedCell' actually. In here, rather than printing out. Now, I'm going to increase the likeLabel by one and create a post. Create a Like post like a Firebase post, Firestore post. And upload the current value to the Firebase.
Of course, in the cellForRowAt IndexPath, we have to say, 'cell.documentIdLabel = documentArray'. In order to do that, I'm going to do a 'Command + B' to synchronize everything. So, when I say, 'cell.', it will see the 'documentIdLabel' as well. So, this one, yes. 'documentIdLabel.text = documentIdArray[indexPath.row]'. So, all the values will be assigned to this label and we will see the texts in here. Actually, we're not going to see them because it's hidden. User will not be able to see those, but we will be able to get those information using that label inside of our FeedCell. So, let's stop here. And within the next lecture, we're going to continue implementing our Like feature.
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.