Build an Instagram Clone App with Swift | Sandra L | Skillshare

Build an Instagram Clone App with Swift

Sandra L, Front Development

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
39 Lessons (5h 51m)
    • 1. Tabbar Template

      2:44
    • 2. Facebook Login Page

      5:20
    • 3. Firebase Introduction & Dashboard

      3:59
    • 4. CocoaPod & PodFile Install

      4:48
    • 5. Facebook Developers Account

      9:35
    • 6. Facebook SDK - User Authentication

      13:04
    • 7. Facebook Login Button

      2:57
    • 8. TableView - Contacts

      8:20
    • 9. Contacts List

      6:31
    • 10. Adding Contacts List to Firebase

      8:29
    • 11. Query Firebase

      12:39
    • 12. Contact 's Profile View

      12:19
    • 13. PrepareForSegue & Contact's Information

      12:52
    • 14. Images Gallery - CollectionView

      6:59
    • 15. Unsplash API

      17:45
    • 16. Query Posts

      12:41
    • 17. Custom Cell

      5:31
    • 18. Data Source & Control Flow

      4:58
    • 19. PostViewController

      6:04
    • 20. UITapGestureRecognizer

      7:54
    • 21. See Posts

      13:40
    • 22. Like Button

      4:47
    • 23. Active User

      10:08
    • 24. Monitoring Authentication

      7:22
    • 25. Liking Post

      11:25
    • 26. Unliking Post - Part I

      15:13
    • 27. Unliking Post - Part II

      8:20
    • 28. Profile Image

      8:52
    • 29. Follow Contacts I

      9:27
    • 30. Follow Contacts II

      10:17
    • 31. Follow Contacts - Part III

      9:54
    • 32. Unfollow Contacts

      6:02
    • 33. Current User Profile

      19:40
    • 34. Profile Image

      6:31
    • 35. Current User Posts - CollectionView

      5:19
    • 36. CameraController

      8:22
    • 37. UIImagePickerController

      10:22
    • 38. Add & Save Post

      10:14
    • 39. Display Posts

      9:23

About This Class

You will building an Instagram-like App that you will build from the ground-up with the Firebase and the Facebook SDK  (Software Developer Kit).

  • Firebase is a cloud back-end service that handles data persistance and synchronisation for your app. 
  • You will sign up with the Facebook Developers Program to create a Facebook App and integrate user authentication with the Facebook Login SDK

In this 3-hour+ tutorial, you will apply your accumulated skills to build a Instagram-like, multi-views application with more advanced features, like:

  • Displaying Contacts in a TableView
  • Networking to display web content
  • Importing Images from the Photo Library (UIImagePickerView)
  • Implementing Facebook User Authentication & Monitoring (Facebook Login SDK)
  • Enabling Data Persistance and Synchronization with Firebase as a Service Data Persistance (BaaS)

fb5f3f90

Transcripts

1. Tabbar Template: So now we're going to begin with our project. So we have a few sets here that we're going to be using. So let's look at it. So we're gonna have a few avatars and also the logging on log out buttons for Facebook. So we're gonna be using that. So let's begin with creating on your projects. And for this project, we're gonna use this one which is attacked application. So you see below that it's gonna be so This is a template that provides a starting point for an application that's uses a tab bar. So we're gonna be using that. And then we're gonna click next, and I'm gonna call this one that swift the ground like So I'm going to say this one on the next up Quick rate. There you go. And we're gonna make a tour off this application right now. So we have with these templates, we have a second you controller and also the first you controller. So let's go now to the main story board. So here we're gonna find that template. So we're gonna see a visual of how the apse looks like. So the starter project. So we have a tough bar controller which is gonna allow us to navigate so to either the first few or the second view. So by clicking on the one or another button, So we're gonna be working at first with these 1st 2 controllers. So we're gonna have a table of you. We're gonna have a list of contacts, and we're gonna be able to click on one contact and then navigate to the profile page. And then I have a collection off pictures from this contact so very similar to an INSTAGRAM application. So we're gonna call this one surf to grow, and at first we're gonna have a locking page which is gonna allow us to signing with the Facebook account. So that's gonna be the first part of these demo. So we're gonna actually have that's right here before the Taber controllers. We're gonna have a signing page before we ever enter this birth. So that's not gonna be the entry point. So we're gonna have a log in page with a lugging, but it so that's gonna be the beginning off this demonstration. So let's run the application of first time just to see how it works. So I'm gonna run. And here is the number. So we have the first use of it defaults to this one, and then we have the second view, and we're gonna have some extra buttons right here. So we're gonna be able to add the third and extra view controller right here. So that's gonna be later and that the most. So let's begin with the log in page that we're gonna be doing this Facebook, and we're going to start that in the next video. 2. Facebook Login Page: So to begin this time, we're going to start by having a logging page. So we're gonna add one extra view controller. So here, you see that this is the enterprise. So that's actually not gonna be our entry point right here. So I'm gonna go to the rights. So the first choice. So that's gonna be the view controller. I'm going to select one and drag it over. To my view, I'm gonna try to grab the whole thing and then place it right here, so something I didn't do, I havent done yet. So I'm gonna disable the size classes in order to have smaller representation of those templates. So I'm gonna go right here and then uncheck size classes. That's gonna be for all that's better. So here, that's gonna be my logging controller, which is gonna become my entry point. So that's like this one. I should be able to do it from here. So on the right. So you're gonna select the attributes, inspector. Then you're gonna have these options. So under view controller, these initial view controller. So you're gonna check this one and here you go. So now we've switched to this one so that's gonna be our entry point. So we're gonna need to do a few things now. So I'm gonna click twice on the storyboard to zoom in a year ago, drive a large of you, and I'm going to start by adding your bucked him on this view controllers I'm gonna drag discover to here in the middle. I'm gonna make it literature. So this one is going to say, is going to read signing with Facebook hopes signing with Facebook. Okay, so we're gonna put it in the middle, and I'm gonna add some constraints just to have this one centred. So it's gonna be actually this one for the alignments. So we're gonna select. We're gonna check both on my back. I haven't selected it, So we're gonna check both horizontally and vertically in continue. And I'm gonna need also to confirm the Heights 59 Harry go and then I'm gonna confirm of date frames year ago. So what I'm gonna be doing now is allowing to navigate from here to the top bar controller . So to start with, I'm just gonna create a Segway. So ultimately, that's gonna be with after we've successfully signed it with Facebook just to test that this is working property. I'm gonna be creating a segment from these buttons, so that's gonna be with control and then dry, and that's gonna be a push. And now we're gonna create an identifying for these new Segway. So I'm gonna select this one, So right here and we're gonna give it and we're gonna give it unidentified. So that's gonna be Go, Swift Graham. Here you go. And every time that you create a push that grace, you're going to need an instance off the U. N navigations controller, so we're gonna be doing that right away, so that is required. So I'm going to select these view controller, then go to that's up editor, then embed een and then navigations controller. Merry go. So now we have an instance of the navigations control, so let me show you. So I'm gonna zoom out Great click twice. So now we have an instance of the navigations controller which is gonna allow us to navigate from this Logan page. So after we have successfully signed in with Facebook, so we're gonna be able to enter this application, which is a tub, are templates. So that's gonna be the process when history that signing with Facebook. So that is the first. So that is the entry point. Then we're gonna quick on it and her look and because we have added an instance of the navigations controller So it's gonna provide all the mechanisms and functions to allow to navigates back and forth, and you're gonna be able to go backwards like so perfect. So the next thing that we're gonna be doing off course is to allow to actually in signing with Facebook with the Facebook as decay. And we're gonna be doing that actually with fire base so fire base is gonna allow to handle so the desert with application with Facebook. So I'm gonna introduce you to the Fire Bays service. So that is also back and service. So we're gonna be using it for user authentication with the Facebook s ticket. So we're gonna use fire base as well for data persistence and Seiken ization. And I'm gonna shoot as well how to install cooker pots and create a put file in order to be able to import by bays into our project. So I'm gonna be showing you all of that starting in the next video 3. Firebase Introduction & Dashboard: five days is a back and as a service that provides several features for building powerful mobile apps. So it's gonna include three core services, a real time database user with applications and also hosting. So, after instilling five days, we're going to be able to use one of the main feature, which is to store and synchronize data. So inroads time. So you're going to see that this is gonna be stored in just informant. So that's gonna be very easy to understand and to handle to manipulate the data. And also, we're gonna be able to authenticate users by using the Facebook has decayed. So you see that you have many options, so you can without the gate users with email passwords. All the options, like with Social Media, is like Twitter kid, huh? Google? But we're gonna be using phrasebook in that demo. As you work on this project, you're gonna learn about saving data. Cherifia based database also, how to sing data between the firebase database and your application. So in real time, and you gonna learn very importance how to authenticate users and monitor connected users. So, in order to create an account with by a base to create an application and manage it from fire base. As a back and service, you're gonna need to sign up with Google. So if you don't have an account yet, so you're gonna need to have a Gmail account, So I am already signed it. So I'm gonna be able to go to logging, and here we're gonna lend on the dashboard and you're gonna have the option. So starting right here to create any application. So the first step for you is to logging or create an account. If you don't have one yet and make sure that you have a Gmail account and then you're good to go. So I'm gonna create in your up right here. I'm gonna name this one. That's gonna be swift diagram, so looks like it's available. So we're gonna be able to create a unique reference of a unifier bees connection. Then I'm gonna click, create new up farrago, and from here we can go to manage up. And here is a visual representation off the debate. So here you have the main So the roots of the database and you have also hear the connection. So we're gonna be using that in order to refer to our database, and it works like a Justin from it. So you're going to see that you're able to add new entry and you note, and that's gonna be with a key value pair formats. So let's say that I want to create a branch for users. So I'm gonna be creating a new user so that sexually here, user one and the value is gonna be sending. Then I'm gonna click on ads. You go. So now I have a new entry, So I'm going to remove this one because this is gonna be don't actually programmatically so from our code, I'm going to remove it here ago. So now it's back to empty, and we're also gonna go to the section which is logging and authentication right here. And this is where you're gonna be able to enable So the type off both applications that you want for your application. So here you have with email and password. So we're gonna go to Facebook and in order to enable the Facebook complications. So you're gonna check on this one? I'm gonna be very easy, and then you're gonna have some instructions as to how you can configure your Facebook application that we're gonna be doing in another videos. So we're gonna have a video which is gonna be on Lee for the Facebook as decayed introduce you create and up with the Facebook developers accounts and also allow the authentications from our application. So we're gonna go to these. We're gonna follow this link no more, and here we're gonna learn about the Facebook authentication. But before we do that, we're gonna need to have to include Firebase into our application. So for that, we're gonna need to make sure that you have cocoa pods installed and also we're gonna be creating a but felt so we're gonna be seeing that next. 4. CocoaPod & PodFile Install: so find Bates is a service that we're gonna be able to install as a dependency in our export project. But in order to do so, we're gonna need to make sure that we have cocoa pods installed. So you see that cocoa pods manages library dependencies for your ex code projects, And then the dependencies for your project are specified in a single text file called but fall. So right here is that this is very well explained. So here we have all instructions as to how to get started. It was simply What we're gonna be doing is you're gonna use your terminal. We're gonna be using that as well to create, put how and then install the dependencies of the patrol. So here. So when you opened your germinal, so I'm using my term so you can download this one for free. Or you can use the built in Germany also, which is provided with the Mac. We're gonna need to run this command, which is Sudo gem in Selkirk. About so pseudo. This is for Super User, just in case that you have some permissions restrictions so you can use to dough in order to use super user and then you're gonna be able to install Google pounds, which is gonna allow you to then create a portfolio and then insult fire bees as a part. So you're gonna do that first, and then we're gonna proceed to creating apart foul. So once you're done with installing cooker pots, we're gonna be able to create a but fall. So we're going to be doing that from the roots off our exclude project. So first of all, we're gonna be navigating through this folder to this project. So this is wherever you have saved your demo. So you're exclude project. So I'm gonna go to my next up first so CD for change directory. So here. So I'm gonna be able to least all the folders and project that I have available. So that is on my deck. Stop that. I'm going to see d so change directory too swift a gram. So I'm gonna need to be inside my ex god protect. So at the root level in Odessa, create a new part foul. So I'm gonna be doing that with this command, so that's gonna be with pods in it. Here goes, And now we have the foot style, and we're gonna go to these folder now, So I'm gonna open it in Finder and here you're going to see so the put fall that you just created So I'm gonna open this one in the code editor, So I'm gonna click right up in with, and I'm gonna be using sublime text so you can feel free to choose any to use any of the code editor, so that's gonna be fine. And here going to see. So that's the text fall that we're gonna be able to at it. So first of all, I'm gonna un command this one this line, and then I'm gonna change to nine for the platform. And because we're using Swift, I'm gonna uncommitted this line as well. So you see, you read uncommitted this nine, if you're using Swift, So we're gonna make this line available, and finally, we're going to be able to refer to fire base. So that's gonna be fog and then fire base. So just make sure to spell it writes like so So then you can save. I'm gonna close that off so I no longer need sublime text. I'm gonna quit and back to my journal from here. I'm gonna be able to run for installed. So her go. So here we have the message that said that this is now instilling the fire base and you have the version and here ago. So once this is complete, you're gonna get the message that the both installation is complete, and here you're going to see the instructions. So the next instruction, which is for you to open this. So So I'm gonna close that off. So you're going to see that you have this workspace, which is not available. So as a result of running thought install, we're gonna be opening this one now, so I'm gonna make sure to close my project first. So here, that was my projects. I'm gonna close this one off, and instead I'm gonna open this workspace so we can open it. I'm gonna navigate in my project, and I'm gonna go to We were in the main story board. And the next thing that we're gonna be doing is in order to allow the authentication with Facebook we're gonna need on your foul, which is gonna be a log in page where we're gonna be importing fire base and also the Facebook as decay. And we're gonna be seeing that together in the next video. 5. Facebook Developers Account: So now we're gonna move on to our lugging into face. So first of all, I'm gonna be creating a new fall. So from here, I'm gonna click rights on this folder, and that's gonna be New Fall. And that's gonna be a cottage class to make sure to select from Iowa s source and then cook a touch class. Then we're gonna click. Next on. This one is gonna be a subclass off you. I've you control. I'm not gonna be logging not here. So I'm gonna make sure that this is your eye view controller. And then from here, I'm gonna chance the name lugging view controller subclass off you Ivy controller. Then we're gonna click next a year ago. So this is our in your fall. I'm gonna go back to the main story board and make sure that I can connect this new foul. So these new class to this view right here on the storyboards to make sure that I can control it from my code, that's gonna be looking view controller. So you're gonna go here and then replace year the class with lugging view control. You're So now we're good to go. So The next thing that I'm going to be doing is creating an outlet and also an action for this button. So I'm gonna go to the assistant Aitor in order to have side by side. So the storyboard and also so the father that just created So in order to make things convenience, so it looks like it's already automatic. But although it hasn't provided with the log in view control from the top, you're gonna go select automatic and then lugging view control hair grows. So now you have the corresponding fall. So I'm gonna go select my signing with phrasebook, and I'm gonna control dry to first create. That's gonna be Facebook. You know, I'm gonna put Facebook logging button, but that's gonna be able silvio gout. So we're going to see that we're gonna have We're gonna be able to switch from lugging to look out. So depending on the connection status of the user, So first of all, that's gonna be an outlet. And then we're gonna create also in action for these about them, and that's gonna be connect with Facebook action. And then that's gonna be in action. Then connect here ago. So we have everything from the interface. So I'm gonna go back to Standard Editor and select logging view controller. I'm going to recruit them together. So I'm gonna drag this one over to here in order to have them grouped like this. We're going to create a perp later when we're gonna have more assets to keep things organized. So the next thing that we're gonna be doing together is we're gonna need to then allow the connection with Facebook. So that's gonna be a lot of configuration at first in order to allow. So this up for these applications to go to the Facebook application to allow the authentication with the Facebook account and then go back to our application once we are connected. And we're gonna be able do that by going So here we have. So this is where we had left off. So when I had first introduced you to fire base, So in order to allow the Facebook complication So first of all, we're gonna need to create a new Facebook application with Facebook developers account. So here we have all the instructions. So in order to get started with Facebook authentication, you need first agreed on your Facebook of vacation. And here you have all the steps, a quick ad and you up in the top right of the page website as a platform and you're gonna have a up i d. Then you're gonna create a new Facebook up i d. You're gonna need to inform also the category and then creates and so forth, and we're gonna be following that. Although we are on the web section, so I'm gonna make sure to select the IOS guide. So guide and then user with application, it's gonna be Facebook and here, so that's better. We're going to stay here for the Iowa's as decay. So from here, you're gonna have all the same instructions. So we're gonna need to also update the info policed, so they start with creating in your Facebook application. So I'm gonna up in this one in a new window. So here because already have an account with the Facebook developers and I am signed in with my Facebook or council. That is important in order for you to land on that page for Facebook. For developers, you're gonna need to signing with your Facebook account. And from here we're gonna be able to add in your up. So I'm gonna click right here, and I'm going to select IOS. Here we go from here. I'm gonna just type swift demo social app if you try to type something. Bridge is very similar to something which is popular. Like Instagram, for example, is not going to allow you to creates an application with that name because this is something which is already taken. So that's why I'm using something which is quite generous, which is swift, the most social. So then I'm gonna create in your Facebook up i d. So from here, I'm gonna need to put my email for these parts is required. So you're gonna need to add your email address. Gee, models come and then we're going to choose a category. So I'm gonna select this one. That's gonna be a category which is gonna be entertainment's. And then we are ready to create a new up Heidi a year ago. So first of all, we're gonna need to down with the sdk back age. We're gonna do that here. It's gonna take about one or two minutes. And after that we're gonna need to We're gonna be able to update the info, please. So we're gonna be doing that next. So once the download is complete, and so once this is complete, so we're gonna be able to continue with the configuration. So we're gonna go back to these folder afterwards, we're gonna need to add some assets in order to allow so the core as decay and also the logging as decayed. So then we're gonna follow the rest of the instructions. So we're gonna need to up in the info police that we have in our exclude projects. And we're gonna open this one as the source could in order to add. So here it's very clear we're gonna need to cope. Ian based these XML snippets. So we're gonna add these to our info populist, And we have also this birth that we're going to need you at. So let's go to our export projects. So we're gonna go select our info policed, so you're gonna go select this one, and right now this is presented as probably least you're gonna click rights and open us, and you're gonna open this one as a source code in order to have the XML formats. So we're gonna be able to add those extra lines XML snippets so right below. So that's why I'm leaving some space the right below. So these closing tax, which is for this beret, so that is separate. So we're gonna go back to the Facebook instructions, so we're gonna need to add this snippets, so just provide with the Facebook at idea and also the Facebook display name. So I'm gonna pace this warm right here. So you see that this is this includes one key for the Facebook up I d. So this is your Facebook up i d. And it also provides with a Facebook displaying So this is the one that we created so at the time were created the up. So let's go back because we're going to need to also add this. It's in a bit of code. That's gonna be I'm gonna copy this one, and I'm going back to mine. Who? Police. And then I'm gonna pace this one right here. So that's where I'm just gonna remove these gap and then we're going to see So there is one extra step, which is to provide with the bundle identifier and we're gonna be able to find this one. So in our exclude projects. So by going to that's up right here, we're going to select here and under identity you're gonna find here your bundle identifier , which corresponds to like, a demon. Names of this, which is in verse, reverted. So that starts with a calm than your name. And then the name of the application, the exclude project. So we're gonna compete with the anti a string, and then I'm gonna add this one right here that suits, and then we're gonna quick next and here gonna have old instruction as to how you can then enable the Facebook logging. So that's gonna be different steps. We're gonna be able to update the AB delegates. So right here, we're gonna need to update this file in order to allow the applications to navigates to another application, which is gonna be Facebook in order to allow the authentication with the Facebook application and then allow them to go back to our application. So we're gonna be seeing that next, because that's gonna be a long process. So see you there 6. Facebook SDK - User Authentication: So we're gonna be continuing with the Facebook as the case. So we have updated being populist. So remember that we had this one as a source group. So if we go back to it, actually, I forgot to show you something just to make things clear. So now you see that you have these two extra notes for the Facebook up ideas. So we have added those ones as external snippet code. So by using the info policed as a source code. So here you have your facebook up I d. And also you have the Facebook explaining right here. So with same, which is that we created in the Facebook developers account. So let's go back to the after the gates sweep, we're gonna continue and then allow the Facebook as decay, you know, up. So let's go back to the instructions. So all of that, that is for objective C. So we're gonna need to use the instructions for Swift. So we're gonna go back to diabetes. It's gonna provide with extra information and below, so you're gonna have the same instruction. So we did that already. So you can if you'd like to follow the different links in order to learn more about how to proceed. But we did all that. So we're gonna need to first import the Facebook cork. It's on the Logan kids. So we're gonna start with that. So remember that we have downloaded the sdk package, so we're gonna first import that to our project, And I have this one on my deck. Stop. So this is the zip folder that I have saved on my deck Stop. So I'm gonna answer this one by clicking twice. There you go. I'm gonna open this one in the finder, and I'm gonna be using those two. So this is the one that you want that we're gonna be using for this project. So I'm gonna drag and dropped and out to the project like so and make sure that you have this one checked copy items if needed. So you're going to make sure that this one is checked and then you're gonna click on finish . So we have the 1st 1 which is added. Then I'm gonna be needing this one as well, which is lugging kids for work. So I'm gonna drag this one over to the project, so make sure that copy items if needed, is checked and then I'm gonna click finish, and then we're done with this part. So then we're gonna go back to the instructions from fire bays. So I'm gonna start by importing those two lines in order to allow to import those two frameworks and for the rest. So here, we're gonna be able to updates this function, which is did finish launching with options and that's going allow to then starts the application with the Facebook as decay. So we're gonna could be those two lines we're gonna then paste right here. So this is this function we're gonna updates with these two lines. There you go. Let's go back. So now we have. So the applications did become active. We're gonna copy this line, and I'm going to search for these function, which is right here, so I'm gonna piece it right here. But that's gonna allow to activate the applications for phrasebook, and then we're gonna have an extra function that we're gonna need to use. And that is this one which is source application. Open your Oh, so we're gonna use we're gonna copy the entire thing, and I'm gonna add it right below. So we just added we just updated. So this function, which is, did finish launching with options which is going out to start the applications for Facebook . And then we have also updated applications did become active. And finally, we have added this one, which is open euro. And this one is very important because once you're done with complicating with threes book with your Facebook account, you're gonna need to go back to your applications. So this is what this function does. It's going to allow you to then go back to your application, do your, like, main page. So now we're not done yet, so we're gonna need to then allowed to connect. So these buttons So we have these actions, so we're gonna be creating another function, which is now that's gonna be connects with Facebook, and we're gonna go get instructions again from five days, So we're gonna scroll down to find more information as to that. So here you go, with complicating Facebook users, do your fire base up. So this is what we're gonna use in order to connect with Facebook. So we're gonna go select Swift and to begin with, we're gonna need a connection. Starfire based application. So we're gonna take this, We're gonna go back to our application, so it's not gonna be happy. And that's because we haven't imported yet. Fire bays now, applications that gonna be import five days. And now, because it doesn't recognize firebase, we're going to need to build in order to allow so these projects to include Vialli's so now , in a replication. So what we're gonna do is clicking on shift, then command and be at the same time, you know, due to build and that's been allowed to build, including flybys and here ago. So this time we're fine. So now we're gonna need to also update these segments. So here, you see that this is just a generator template could template code snippets. So we're gonna need to then change to our to the name of our applications in order to allow the connections to have identities. So that's very simple. We're gonna go get that from prior bays. We're gonna go to the fire base up dashboard, and without including this, you're gonna then copy all of this, which is the name of your application and then they're gonna replace. So we're gonna highlights all of these and then paste. And here you go. So here you have the name of your applications, which is gonna allow to then create a connection, a reference to your firebase did Abi's. So let's will the rest of the instructions. So we're gonna need to add this at the top right here. And then we're gonna compete all of this so you could copy it also from here. So we're just gonna go actually step by step, So I'm gonna take all of this from here. So from lined 4 to 24 and then because I want to do the connection with this function, which is then that we're gonna add to this action, I'm gonna paste all of this inside this function. So right now, it's not recognizing so any of these because we haven't imported. So yet the Logan kids on the cork it, So we're going to do that right now, so that's gonna be important. And that's gonna be f B s f B s. No, that's gonna be f be as decay core cute and also imports F b s. That should not to complete. There will be more convenience, but in order to do more simple also, you could also go back to here and then simply copy and paste. That's gonna be more simple. They could copy and then paste right here. That's work the same. Okay, So refined now. So this is recognizing. So the Facebook looking as decay. So we're gonna need to update a few things because looks like the code, which is provided by fire base, is not really up to date supports Swift to. So for the commands print Ellen. So now this is Prince Onley. So I'm just gonna update that. And also for the reference, let me see, because we are inside a block of code, we're gonna need to refer to it with self a year ago. And the other thing So we have a warning here, so we're gonna need to pay attention to this one, so it looks like this one. So this function is now duplicated. So now we should be using lugging with read permission from you Control. So I'm just gonna close this one so you can actually read the whole thing? Not really, but what it says is that now we should be using the function, which is looking with read permissions from view controller. So we're gonna be taking this one, so that's very simple. So I'm just gonna create I'm gonna actually call this one from here from the top. So that's gonna be Facebook looking. So you know, this one that we just added Facebook looking. And so I'm gonna type. I'm going to start typing logging, and that's gonna provide with the functions that are available. And we're gonna select this one from view controls who looks like this is the one that was recommended. So we're gonna simply copy from the 1st 1 So first for the permission. So that's gonna be the email from view controller. So that's gonna be self and then Henderson, that's gonna be the block of code. So we're gonna copy, just like for this one. So first of all, we're gonna need a Facebook result of variable, so that's gonna be the result that are returned by the Facebook as decay when the complication is successful and if it's not successful, we're gonna have some error, and I'm gonna add this variable so right here and finally, you're gonna have So your coat, which is gonna be actually all of this? So we have the If that's the end off the block of coats, I'm gonna compete the whole thing right here cuts, and I'm gonna add it right here in order to use the right function and not the one which is depreciated. So I'm going to remove it on. Then we should be good. So now we have so this function, which is gonna allow to do the connection with Facebook, So you see that if there's no error, we're gonna have to. So if we have any error so this is what's gonna be around. So Facebook looking filled if it's canceled, so you're gonna have this one. And if it's good, So if we have an access token so meaning back the acidification is fine. If there's any errors again with the authentication, So we're gonna have looking filled, and if it's fine, we're gonna be able to then see that and this is what we want. So we're gonna be able to test that. And of course, I want to call this function So from this action, So when I click on the button. So I'm gonna add this one right here, connect with Facebook. So let's try that signing with threes book. So we're gonna go to the Facebook application. So I'm gonna log in with my Facebook information, Logan, and then, yes, continue as Sandy and one since don't. So we learned back to a replication, which is the landing page. So we don't get C the Logan parts. So I'm gonna restart the application again, and it's like you need to again signing with Facebook. So what would be great is to allow the applications to Yes, we could do that each time. But what would be great is to allow to land directly to navigate directly to the landing page right here, so without having to connects every time, so each time with Facebook. So that's something that we're gonna be doing later during this demo. So for now, we're just gonna be continuing with the first view, and that's very simple. So if you want to read more about monitoring, that's gonna be actually right here, going back to use a complication monitoring with complications. So this is where we're gonna be doing later with the swift code. We're gonna be able to check if we already have a user who is connected and allow to then go directly to the landing page. So to the home page. 7. Facebook Login Button: So now we're going to customize thes signing with Facebook buttons. So I have a few sets available as part of these products, or you're going to go find this folder richest assets. So we're gonna select the whole thing and then drug over to the projects and you're gonna make sure that you have cookie items if needed, checked and they're gonna click on finish. Here you go. So now you have this all of these assets, So we're gonna be creating a group just to keep things organized. So that's gonna be click rights, then select in your group, and I'm gonna name this one a sense. Then I'm going to select all of this. So everything that we just copied and drag and drug over to these group assets, so and here we're going to see that you have this image, which is the logging with Facebook buttons. So we're gonna be using this one for our interface. So let's go to the main story board. We're going to select this one and on the rights attributes, Inspector, we're gonna find this section which is for image, and we're gonna go find lugging with Facebook. So we're gonna need to readjust the constraints, because here it's there's a lot of conflicts and issues, so first of all, we're going to get the rights dimensions for these, but, um, the original warm sexually. So from finder, you're gonna be able to select the corresponding foul and then here gonna have the dimension. So that's gonna be 194 by 42. So we're gonna add the same dimensions. So that is 194 by 42. So we will confirm the within heights, like so at two constraints. And from now on, I think it's gonna be fine. We're just gonna need to also may be removed the previous constraints. So make sure that it doesn't conflict for the height we had that originally. So I'm going to remove this one, so I'm going to select it and click on Did it just gonna check? So we've got the height, which is 42 and then the with 194 so that should be farmed. So let's just click on update frames and here you go. So now we have our log in with Facebook, which is available, so let's try that looks fine. So we're gonna click on this one then we're gonna connect again with Threes book here ago. We also have the lookouts button, and we're gonna be using bets later during this. 8. TableView - Contacts: So we're done with this part. So we're going to be dealing with lugging out later on. So let's move along. We're gonna be taking care off this section right here. So we're gonna have at least of context, we're gonna be using a table of you and for her contacts, we're gonna be using so these assets. So this is avatars that we have just added to the project, so we're gonna be using that. So first of all, we're gonna take care off danger face. So this is the default interface, which is provided with the tab are templates. So we're going to remove that. So you're going to select it and then click on delete. Here you go. So now this is empty, and we're gonna go to the right, and then we're gonna search for table view, so that's gonna be the second we're gonna drag this one over right here, and then we're gonna add constraints. We're gonna click, um, before sites and then changed the values to zero in a ritual out the stable view to stretch across the within heights to cover the entire view. Then we're gonna add the four constraints there you go. And next, we're going to confirm with update of frames, and we're gonna keep this one selected. So these table of you, we're gonna add a right away or prototype cell. So we're gonna do that from the attributes inspector. And here we're going to see Prototype self. So for now, this is zero. You're gonna quick one in order to add one. So that's quite big. Let me see. So for now, this is 44. We're gonna use something. It'll be bigger. But let's move on to for now. Just have checking. If we have everything working, probably meaning that we're gonna need to also import. We're gonna need to also conform to the white table view data source. So we're gonna use the assistant editor, and we're gonna make sure to select the first view controller. So this is the one corresponding to this table view to this view controller in the storyboard. You see first. So I'm gonna go select first you control. So I'm gonna keep my finger on option and then select in order to open this one. So on the right here ago and what I'm going to be doing is creating an outlet for the stable. You. So I'm gonna be able to then control it from this first few controller. And that's gonna be contacts stabled you context deviled you, and then we're gonna click connects that sits. And next week we're gonna be doing so we're just gonna go to the standard editor. We're gonna be taking care of some codes. So that's good. Select first few controller. Now we're gonna adopt the you I table view did a source particle. And here it's not happy because as soon as you adopted, you're gonna need to then conform to it by implementing so, too functions that are required in order to indicates of the number of rows and also to configure the cells. So we're gonna go get those methods by clicking on command and then selected. So you're going to see this? I consider these little finger. So when you present, come in and then select. Here you go. We're gonna lend on this class, you know, to get so the functions corresponding to the record functions and by default. So you're going to see that we don't have optionals, so they're not optional. So there those two are record so number of rows in sections and also self at index path. So these are the two functions that we're going to need. And as if those two records, you're gonna have optional meaning that you can use this function as part of the political . But they're not record, they are optional. So we're gonna take those two. So I'm gonna copy them, and then I'm gonna go back to first you control, and then we're gonna go paste those ones. So I'm just gonna remove this function. So now I'm not gonna need that. And right below view did load. I'm gonna add. I'm gonna pace those two functions. I'm just gonna remove a few things. Just give funk and then add the curly brackets here as well. I'm going to remove public, remove all this comments, adds the curly brackets, and they both returns objects. So we're gonna need to return and interject for this one. So now we're just gonna return zero just to remove the air. And for this one, it's expecting an object off talk you a table of yourself. So we're gonna create this one, so that's gonna be let cell but we're gonna create with table of you were going to call this function, which is thank you. Reusable cell with identify air and we're gonna have unidentified air for the prototype cell. That's gonna be so and then index about that, that's gonna be index breath. Here you go. And after that, we're just gonna need to return the cell. And, of course, in the middle, we're going to configure. It's so right here. I'm gonna add a comment for Leader on That's gonna be here, that we're gonna configure the cell, meaning that we're gonna provide a text some color if you want the background color. So this is where you're gonna contributor it and then return it. So because we have specified and identify air for this dick your reusable cell, we're gonna need to specify it also in the storyboard. So we're going to select it. So if you're not sure that you have selected the prototype so you can go to the horror key the view hierarchy and make sure that you select table of yourself and I'm gonna go to the rights attributes Inspector and here gonna find this section for the I don t fire. And this is where you're going to specify cell and the Juma's match. So remember that we've just specified cell in our coats. So the two mismatch So I say that I would call this one instead contact cell. Then I'll need to also add to my code contact cells. So for now, we're just going to use something very simple as self, so the two must match. And for a first demonstration, we're just gonna have some text generate text, so that's gonna be Celtics label than text. And we're just gonna put contact. And obviously, you're going to need You have rose existing in order to be able to make the demo. So we're gonna put that on hero. So let's try that. We're gonna look in again and we've got nothing. So something that we've missed that's important. So I'm going to remove these lines of code misconduct. We don't need it. You're gonna need also to then a sign. So this view controller, in order to be able to use the data source methods, we're gonna need to do that which is contacts, table view than data source and then assigned self in order to allow this view control to then control the stable. So this part you need that and then apply those two days a source methods. So, by the way, I'm just gonna put the mark. That's gonna be mark data source methods to give things here because we have we're gonna because we're gonna have more functions. After that, it's gonna be where be easier. We're going to start to do query with via Bay, so just to get things organized. So let's go back to do these demonstrations just to see that the table view works properly and here ago, So now we have our contact, so we know that the table who works So next we're gonna be creating a list of contacts. So we're gonna be using these avatars, and we're gonna add actually, those contacts into our database, So meaning that's we have these database right here, which is empty. We're gonna have an extra notes, which is gonna be for the users, and we're gonna add a note and you note for each your user. So we're gonna be doing that next. First of all, we're gonna create at least of contacts, and then we're gonna add the contacts to the firebase database 9. Contacts List: So now we have the table, You working? So we're going to be able to cruise at least of context. And we're gonna be using those assets, introduce you, create those contacts. So we're gonna have a collection that's gonna be contacts. That's gonna be a collection of string. So that's just initialize it for now, like so because it's just gonna be the name of these files. Then we're going to refer to it in order to display the pictures and also the name of these contexts. And that would be nice, actually, to have, like, names for these contacts. So instead of just reading Avatar Warm two and three, I'm just gonna add some names for them. So I'm just gonna be doing that offline, So feel free to use different names if you'd like. So, for example, so intern itude of date, the foul, that's gonna be very simple. You can click on it twice, or just one. Yeah, just one. And then you get a date. The felt. So I'm gonna name, for example, this one, Tom. So I'm going to be doing a few and feel free to name them. So the way that you want. So I'm gonna name this one, Mary. So that sits. I have renamed the Falls in order to have something which is more personal. So, Danielle, Peter, Leslie and so forth. We also have some generate avatars that we're gonna be using later own. So when you have no pictures, but for now we're gonna be using those ones are not going to be using the 1st 1 You could delete it if you like. So we're gonna go back to the first you controller, and we're going to initialize these contacts collection, which is expecting objects off type string. That's gonna be contacts. So the 1st 1 So let me open that again. So the 1st 1 will be Tom. Then we're gonna have Mary followed by Martine. Then we have Danielle. Then Peter less the That's Richard, Uncle Ben and finally film. So this is early stuff concepts, so we have them all. OK, so that's good. So we're gonna be using that for so as a set, so as a source of information, and that's gonna be very simple. So in order to have accounts, we're gonna then refer to concepts and then counts. And finally for the texts were going to refer to then contacts and then index craft room. So this function works as a loop. So it's going to look through all the items that we have in that collection and then display them for the corresponding cell for each room. So we're gonna have the name of each context, and we're gonna want to also have an image view. So that's gonna be with this property than image. Then we're gonna create an image object. So that's gonna be with name and we're gonna need. So we're gonna take the whole thing. So we're gonna use the whole thing, because that's gonna be a string that we're gonna be using as well for the image. And we're gonna actually be doing this one outside because it requires a little bit more off formatting. So that's gonna be outside. I'm gonna create Avatar, and that's gonna be in quotes. And then I'm gonna add this PNG because you see that for each avatar we have this extension , which is PNG. Then I'm gonna use the interpolation, you know, don't you include some code? So that's gonna be interpreted. So that's gonna be interpreted by the Swift compiler. And then we're gonna be able to then refer to yeah, that's our as value here for the image. And then I'm just gonna need to I confirmed this one because this is an optional. So very good. So we're just gonna put this one's together? A year ago, we could actually put this one with here, So we have all the constants group together, and then the part that corresponds to configure the cell bill. So let's try that. We're going to see if we can properly display the name and also the image for each contacts . And here you go. So we're just gonna need to do a few adjustments. So here. So we're gonna make the view. So the rule larger first of all, African also capitalize Ich ni. So let's start with the height of a true. So we're gonna go back to the main story board and we're gonna make sure to select the table, Hugh. Then go to this ruler, which is show the size Inspector. And then from here, you're going to be able to update the River Heights. So I'm going to make this one us big as a t. I think it's fine. So we can readjust afterwards. I'm gonna use 80 for now. Let me go back Contact, stable view and then on the right select size inspectors. So we have of 80 to 80. We're gonna try that and I'm gonna go back to the code because I'm gonna want you also capitalized. I'm gonna want to also get me to life the string. So we're going to be doing that. So that's gonna be very simple. We have one function which is available, So I'm wrapping the whole thing in order to use this function on a string which is capitalized string a year ago. So let's try that. Now we're gonna looking again and here ago, So now we have contact, so this is much larger, and that looks pretty nice. Next, we're gonna add those contexts to firebase in order to be able to store them in the database and be able to then jury query. And this is from fire base that we're gonna be able to get those contacts to then display them 10. Adding Contacts List to Firebase: So the next thing will be to add those contacts to fire base. So if we go to the firebase dashboard, so for now, this is empty. So basically, we're going to create a new entry for each contact. By clicking on this one, you're going to see that we have. So I'm trying to get here ago. Plus, we're gonna have so a key and a value. So let's go back to the code. We're gonna need to import Firebase to begin with. That's gonna be import five days. And just like we did for the logging view controller, we're gonna need a reference primary database. So we're gonna then paste that in first view controller and read below. We're gonna need also reference for the users. So that's gonna be gonna name this one users, ref, I'm going to use the same construct. It's gonna be just by a base. And then at the end of these segments, I'm just gonna use users. I'm gonna add users. So the way I'm gonna proceed is very simple. So I'm going to create a new function that I'm gonna add right here, and that's gonna be called ad contacts. Shoot five days and basically I'm going to create a look which is gonna be executed. So as any times that we have objects in that contacts collection, that's gonna be four of our I it cools to zero that it's gonna be as long as I is less than that's could be contact counts toe the length of this collection. Then we're gonna execute it. So as many times So we're gonna increment. And then inside this look, we're gonna then execute our function. So that's gonna be we're gonna create a new note. So here we have the general note, which is gonna be the general brunch for all the users. Then we're going to create and you note for each contact. So that's gonna be user reps with no s for this one. And that's gonna be we're gonna create this one from users, ref. And that's gonna be child by depending past. So we're going to create a new path for each user, and we're gonna add a name for each of them. So that's gonna be user, and we're gonna increments the number for so based on this I variable, which is gonna be incriminated each time. So then we're gonna create so this from a Justin, So that's gonna be an anise dictionary. So we're gonna have a collection of information for each new user. And for each user, you're gonna could we're gonna include an i d. So that's gonna be a key I d. So we're gonna complete that afterwards. We're gonna have also a key for the name. So for now, I'm just creating the key, and then we're gonna have another key, which is gonna be for the email. We're gonna have also a key for the avatars of the image and for every users with every contact that we're gonna have on these swift A gram applications. So obviously we're gonna have informations about the followers following and also the number of posts. So we're gonna be adding that so that's gonna be followers. Then we're gonna have another key full following each time. So separated by a coma. So each key value pair and then each key value pair, so has a key and a value. Let's continue. So the last one will be post on a year ago. So we're gonna be using this one. So just for information we're gonna be. And just for information, we're gonna be using this once of four. Just the show. So just to show, display a number, But we're gonna be actually working also on creating actual boasts that we're gonna be adding for its users. So every time that you have a new entry, So we're gonna be working as well own importing and adding your pictures, and that's gonna be every time, a new path for a new pope. So that's gonna be later. So for now, let's just complete this new informations for each user. So that's gonna be user. That's gonna be very similar to this one. We're gonna add an i d. Then we're gonna provide a name. So we're gonna refer to the contacts collection and then refer to so the index position in the array with the I variable. We're gonna do the same for the email and we're gonna add some extra details because this is gonna be an email. So that's gonna be gmail dot com. So we're gonna have the name of this contacts. We're gonna have the name of this contact followed by gmail dot com, and we're gonna have also an avatar, which is gonna be the name of it's like, let some extra thing here. So that's gonna be the name off this user, followed by PNG and then for the followers. For now, we're just gonna put some random numbers 100 then 200 for the following, and then for the number of books. For now, we're gonna put 150. So for now, they're gonna be strings. And so next What we're gonna be doing is we've created this new user reference, which is gonna be a new path into fire base. And we're gonna need to then said the value for this new path. So that's gonna be with user ref. We're gonna call them this function, which is set value, and then the sign contact, which is this one. So this is gonna be a look, and this is gonna be executed. So as many times that we have items in that collection. So each time we're gonna have a new user ref pot, then we're gonna create a new dictionary and then a sign as a value, these dictionary, we're gonna set it to this new path, so we're gonna be trying that I'm gonna call this function. So from view did load that's gonna be at contacts to fire base. Let's do that. Okay, so that misstep worked. Let's go check out now in the fire base, so I'm just gonna remove that. So now we have the new path for the users. Let's click on it. And here you see that we have any path for each user's. We can click on it, and you're going to see some some details about the Avatar. So the email than about followers and following, which for now is just generate contents. We also have a user I d. So that's important because we're gonna be able to then refer to each contact individually . Then we have the name and the number of posts, and that's gonna be for each user. We're gonna have a new path, and so the next step will be to then not to display generously. So each contact in our table here, we're gonna want to do a query from Firebase in order to then assigned to this contacts collection and displayed from fire bees. So we're gonna be seeing back next 11. Query Firebase: So now we have successfully added to the list of contacts to fire base. So the next step will be to do a query to fire base in order to return this list of contact with from five B. So you see that we have this list which is available. So we're gonna be doing a query in order to return to fetch all these data uses data do then display it in our applications. So we're not gonna be referring to this collection contacts, So I'm gonna be actually right now creating a new collection. So that's going to give our users, and it's gonna taken Ennis dictionary as an object. So we're gonna christened with that and then here I'm just gonna add a mark. This section is gonna correspond Stoute for a base and then below, I'm gonna create my new function, which is gonna be used to performing a query to the database. So that's gonna be funk query five days, and we're gonna have a completion handler as a parent or pull these functions. So that's gonna be completion, because we're going to return a collection as a result off executing. So this request of these query, which is gonna be a type in history. So we're going to return a collection. And then So this is how you create a completion as a perimeter for a function like so and then inside. So we're gonna call the function in order to do Khoury on this path, which is the use is ready. So the one that includes all the users and that's gonna be the functions observe events type, and that's gonna be the last one. So here we're gonna specify the type, and that's gonna be value. And here we're going to specify the value, which is returned by five days. We're also gonna have a cancel book. It's gonna be error. So there's just in case of an air, and then inside we're gonna be able to execute. So our coat and we're going to start by printing the snapshot. Just you can see what I'm talking about. So we're gonna run this function so we're gonna call this one from the View did load on because we no longer need to add contacts to five days. I'm just gonna commend this one out, and then I'm gonna call this function so this new function, which is query five days. And the purpose of this function is gonna be to return a collection. So the one that we're gonna fetch from the database and we're gonna be able to use this one afterwards. So for now, we're not doing anything. So we're just gonna pranks query successful, Just to show you that the function works properly and we're gonna need to also call this function, which is the completion handler. So right here, which is completion. So it's expecting interest, and we're gonna have a local collection. So a rehearing, that's gonna be temporary items, which is gonna include dictionaries as objects. And this is what we're gonna be using. So that's gonna be empty for now. But for now is just for the demo. So that's gonna be 10 items that we're gonna ask as a completion that we're gonna pass as an arguments in that completion function. And then if it's successful, we're gonna be able to read query successful. So let's run bets. So here, curry successful. So don't pay attention to that. So that's something else we thought. Please book. So here we could return. So all the snapshot values. So what I was talking about. So this is the snapshot. So we're gonna be able to refer to each press, uses a rose, use Awan, then use it you ex cetera, and then refer to each key in order to return the value. So this is what we're gonna be doing next. So inside, so back here. So Prince snapshots. So we're gonna remove that, so we know that it works. So what we're gonna do is to create the loop. So that's gonna be for user in snapshots, Children, so missing just one s. So that's gonna be for user. It's nuptial Children. So we're gonna look through each user path, and then we're gonna create let's item, which is gonna be so user as fire bees, fire data, snapshots, and then we're gonna create a dick, which is gonna be dicked short for dictionary. So that's gonna be so that's gonna be item value as in this dictionary, and that's gonna be very similar to what were printed. So now we have a dictionary that we're gonna be able to use, and we're gonna been assigned to this local variable, which is the temp items we're gonna penned Itch Dictionary. So that's maybe this one dicked and then we're gonna pass this as an arguments to the completion, and we're going to be able to then use that in our collection, which is gonna be users this time. So that's gonna be self users. Then we're gonna make it equal jury and what we're gonna be doing is I'm gonna actually print self users. So you're gonna be able to see that. No, we have. So whatever has Bean. So whatever has being collected from this query, we're gonna be able to assign it to self users and then use it in a replication. So let's see. We're gonna need to specify the type as well as in this dictionary, so I think we're good. We're gonna try that. Here you go. So if we go back, so remember that we were printing originally from here, So we know you have the prince. So this is actually coming from this self users, so we know that now we have. So the choir, which is coming from fire base, we could then included to these collection. So we're going to use that from now on. So From now on, we're gonna then refer to So we put a lot of space here, Doesn't put these back, so he's just too make the debut more clear. So now we're gonna count from users and then that we're gonna access all that The doctor, all the data from the uses dictionary dictionaries here as well. So that's gonna be users. And I'm not missing any. So that's fun yous. And because now we are refering to a dictionary, we're going to need you also specify more information. So here it's expecting a string, whereas here it's a dictionary. So we are referring to the in exposition off one big object which is in the nest dictionary for each user. So we want to display the names. So that's gonna be for the key name a year ago. That's gonna be users index bathroom, and then we want to return the value for the key name. And here is what we're gonna need to specify for the avatar that we want the value for avatar. Okay, so if we go back, you're going to see that for each user. So that's a dictionary. So we have a value for avatar and also for the name. So this is what we need for our least of contact. So we're gonna try that now. So after we're done during the query, we may need to reload the data. So I'm just gonna check if that works without even reloading the data. So we've got an Aramis Czech quit. This is so we're gonna need to also probably confirm unwrapped here. Okay, so let's from That's okay. So this is what I was expecting. So we're gonna need to reload the data also the table view. So that's a function that you always need to use, so we don't give me that. So I'm just gonna remove that and as a result of the query, So when we know that this is successful So after we're done with executing the query, so then we can assign So these values to self users, we're gonna also need to reload the data for the context table. You and we're going to do that with reload data. Here we go. That's going to resolve that issue in order to be able to display. So this data not here ago. So this is taking a little bit of time for the avatar. Looks like so or may have something wrong. Gonna check. So we're going to fix that. And let's go back also to this error message that we have So one thing that we need to specify also, for every firebase application that includes log in with Facebook, we're gonna need to specify the Facebook I D and secret. Well, that's gonna be a very simple to resolve. So here, this is where you specify the Facebook APP idea in secret. So we're gonna go back to Facebook developers, websites, and I think the one that I created waas some this one. And in order to get this information So you're gonna go, actually, so this is right here. So this is where you're gonna need to, then. So that's gonna be dashboard and here. Gonna find your app ideas. So we're gonna copy this one, then go back to the dashboard. So you're gonna add this one a year ago, I also would be absent Great that you can show. So we're going to logging, Then I'm gonna copy it's and then paste it. Okay, so that's one thing that you need to use the first enable. Then you go to configure your up and then once you're duck and figuring your absolute, then you're gonna get the i d. The ab secrets back to the fire base. Dodgeball. So this is where you add those information. So and for the Avatar. So we're gonna fix that because originally we were entering to this object, so in concepts which was not including the extension off the fellow. So you see that we have a sets which are PNG falls, and we were adding, So we're combining. So this the value with the duds P and G, which was a string of characters. So what we're gonna be doing is removed this section and we're gonna print about are just to make sure that we returned the rights inflammation and make sure that we can then access the right of sex. And this is an optional, so that's not gonna work. So we're gonna need to. Then I confirmed this one great here, and then we're gonna be able to then refer to this one once this is unwrapped because we cannot refer to optionals. So that's gonna fix the problem. Your books are now we find So we can ben display. So the right assets and we don't have So this error that was displayed because we were not so we had not configured properly the Facebook with complications part. 12. Contact 's Profile View: So now we have our list of contacts that we get directly from five A. So what we would like to do next is to see the profile page for each contact. So we're gonna add we're gonna go to the main story board. We're gonna be adding a new view right next to this table you. So we're gonna go search for So we're gonna go search for review controller, we're gonna add one. So right here and we're gonna be able to Segway to this single page with these single detail views from the cell. So that's gonna be we're going to select this one and then control drag. Okay, so we're gonna need to create in your novel this one, so let's begin with That's so we're going to right click from Swift A Ground like this, Then you fell. So that's the vehicle touch class, and that's gonna be a subclass off view controller. And I'm gonna call this one profound. You control it. So here you go. Let's go back to the main story board and that's the signs with this new class bell to this , if you control and that's gonna be profile, so and then we're gonna be able to create that was sick with. So that's elects the prototype, then control drag. So it doesn't seem to work. So I'm just gonna make sure that I select this cell, so that may be the issue. So I'm just gonna make sure that I select that drag from the cell, and then I can then create my post. So if you have some difficulty here, so let's just go to the hierarchies. So from the first scene, then you're gonna create your Segways from the soul, like so and that's gonna be a push. Here you go. I'm gonna close that. And then we're gonna give an identifying name for this new say grand That's gonna be go to profile a year ago. So next we're gonna take your off the interface for this new profile view controller. So we're gonna have a your image. You're here, which is gonna display the name off this contact. We're also going to see the number of followers following and post, and we're gonna have also a big buttons that saves follow. So you're gonna be able to follow one contract and finally we're gonna have a collection of you were going to do that in another parts, we're gonna have a collection you to display pictures, gallery of pictures for these practical contacts. So let's begin with the U R image you that's gonna before the the avatar of these contacts . So I'm gonna make this one smaller. So anyway, we're gonna have the same width and height, and we're going to be doing that with the constraints. So let's do that right now. I'm gonna sit this one out Constraints. So I want this one to have the same within height. So that's gonna be 100 by your hundreds. For this demo, you could have all the dimensions, Of course. Then we're gonna also set the leading, so that's gonna be 20 and then fixed the tough. So that's gonna be 20 pixels from the top. Then we're gonna let's see. So let's just pay attention to that as well. So I'd like this to be 100 by 100 so somehow the value had changed, so just make sure that you have the same value in order to create a square. Then I'm gonna have before constraints. Here you go. And then I'm gonna confirm a year ago. Next, we're gonna have, like, three labels in order to display the number off post followers and following. So we're gonna do that. So that's gonna be labels. Then we're gonna have a second great here and then is third. And in order to make things more convenience, actually, for this particular part, we're gonna be using what we call a stack of you, which is something new with I. Wes, I think since I was eight or nine, so they included the stunning view which is gonna allow you to keep things stocks together . So when you want to have, like, a row or different several elements similar lines in the ST A Really, you could use a stuck view. So that's drug one right here. So this is how it shows at first. Then we're going to include a first element. So that's gonna be this label, and then it's gonna shrink to fit. So this first object so you see that this is gonna fit, So I'm just gonna select also again. So I'm gonna open the horror que of views, so make sure that you're under profile, view controller and here. You see that you have your stacked you, which now includes a serve you, which is a label I'm gonna make sure to see, like, this one in order to move it a year ago and then inside this die abusive. For now, we have to all the labels that are outside. I'm gonna include that you others. So I'm gonna include a 2nd 1 and then 1/3 one. Like so. Okay, so that's cool. That actually, I'm gonna keep it open because I want to make sure that I can select this stack of you and I'm gonna police to drink here. So next, I'm gonna provide constraints for this type of use all of this to be a little bit larger and also change the height, so I'm gonna select it. And then from here, I'm going first opinion to shoot. It's up and said the leading that I'm gonna put at is 20 and then let's go back and forgot You also confirm the with. I want this to be choosy or four. And for the hide. It's gonna be 43 at two constraints here ago. So then we're gonna confirm the constraints, so that's gonna be with update frames. Then we're going to select each label by keeping your finger on the sheets buttons. You're gonna be able to click on each of them and have them all selected, and then we're going to decrease the phone size. So we're gonna go from 17 to 13. So that's gonna be enough. Then I'm going to select the 1st 1 in order to apply some wife and height. So in order to have something so to have an equal distribution off the with for each label . So we're gonna apply 68 for the with, and we're gonna allow them to be similar. So each of them and then 43 for the heights. And then the three labels will be able to fit evenly within the container. Then I'm going to select the 2nd 1 So that's gonna be so. That's maybe 68. More than 43 for the heights and the third 63 No. 68 for the with and then 43 for the high. So this try that. It looks funny. We're gonna need to do some adjustments. That's good to one. Okay, so it looks like it's far in. Actually, we're just gonna need to apply them in the center, so that looks money in the storyboard. But that looks fine in the simulator. So we want them to be aligned for each of them. Just gonna check that the with its fine, actually. Oh, here ago. That's my bet. So here, the with is that what we want is to have 204 in order to allow so each label to fits even the or that could be too much. Let's make it smaller. So that's gonna be stuck. You then I could use something like 150 and then you could have 50 for the week for each label. So that's gender. So there's gonna be 100 50 for the with the container. Then I'm going to select each other label and then change to 50 so that's a lot of adjustment that you need to do. Then again, the 2nd 1 that's gonna be 50 and then the last one is gonna be 50 as well. So that's gonna be 53 times coming down to 150. So that subjects also we're gonna go here to remove this one so it's not required anymore. The 60 2nd 1 we're going to remove this one 33 No. And then the last one. So we have to that conflicts the with that says 33 I'm going to remove it. Here we go. So as long as you have so just one with which is similar for each label and that corresponds to the so that's gonna be three times the same with which is gonna be the equivalent of the total with off the container, then your fun. And finally, we're just gonna select them all. And I'm gonna date the frames or the constraints. So what's missing is that we need to partly also confirm this and this and finally, I think it's fine for the rest. So that's a lot of steps in order to have so But that's very convenience to use this back to you because you see that you're good aligned those three elements within the stock view and then below, we're gonna add a button, which is gonna be the following button. So we're gonna make this one so as large as the stock view. So that's gonna be the with is gonna be 150 a year ago. For the height, we could do 37 or 40. Let's do 37 for now. We could change it afterwards. Then we're gonna also set to the top and the leading as well, which is gonna be twenties. We're gonna have the same alignments as for this time, then confirm with at four constraints. And here you go. So I'm gonna customize this button right now. So I'm gonna go to the attributes, inspector, so we're gonna go give it a background color. So you see these sections for the view, See this color? So they have a green button on the original INSTAGRAM application so we could select this one. Then we're gonna go change the text color, which is gonna be one. Here you go. So I think this is fine. So we've got the right constraints for each of these elements. So that's from that. We're gonna go to marry, and that's fine. So what's left to do is to edit of it are here as well. So we're gonna do a few adjustments to finish this Berks. So I'm gonna select the image you I'm just gonna add one generate so image. And I'm going to select aspect to fit, So it's not distorted. And for this three labels I'm gonna use instead of regular, I'm going to select the thing I like that better arrogant. So I think, refined for the interface for the first part of the interface, let's go to Tom. But when I was just this general avatar and here ago and here ago, so the next step will be to then display so obviously the information of the users. So when you pass from Mary, too, So here. So for Mary to the profile page. See? So you want to be able to see the profile face with the Avatar, but also to see the number off followers post and following, and here this button, we're gonna change the text as well. So we're gonna see that next 13. PrepareForSegue & Contact's Information: And then we have the beginning off the interface for the profile view controller. So next we want to be able to then display the information off the contact which is selected. So the cell, which is selected, So we're gonna use one potion, which is gonna be prepared for sake. Wait, So we're gonna go first, you controller, and we're gonna have the sole right below the data source methods for the table of you. We're gonna add a few more that's gonna be that's clearly navigation. And this function is prepare for sick with very good. And we're first going to create an index constant pinotage a great a reference to the cell which is selected. And we're gonna be able to access that with this property, which is indexed bath for selected room, and that's gonna return any index. And we're going to create another constants, which is gonna be contacts selective, that we're gonna be able to then access thanks to these index. So whichever cell So which of a cell which is selected, So that's gonna be then returned. So we're gonna have the integer, the index position, so that's gonna be contacts or my bet that's gonna be actually users index and then room. So my mistake and just correcting one thing. So for this one, it is actually an index path. So this object is an index path. So for the cell, which is selected, and then we can access the index positions because we can use this property, which is room, which is an intelligence. So if you keep your finger actually an option and that you have over, you're going to see that this one is an integer as opposed to this one, which is, and Index Beth Okay, just you can understand the process. So now we have these contacts elected, so we're gonna be able to then passed this one to the next view, which is gonna be the profile view controller. So what we want is to pass these entire object, which is an end his dictionary. So we're gonna go to profile view controller. So what we hear and could actually take this one and drag it over to here in order to keep all of them grouped together. So in another part, we're going to create a group in order to keep things organized. So we're just gonna leave it as is for now. So in the profile view controller, I'm gonna create in your variable, and this one is gonna be user, which is gonna be in in this dictionary. And just to show you that it's gonna work, the way it's gonna work is that we're gonna assign to the title of these controllers. So the name of this particular users So once we're ready to pass the object dictionary. So from the first few controllers, So the least up contacts do the profile view controller, we're gonna be able to then excess the name of this user. So we're gonna need to unwrap the that. This is an optional and we're just gonna write something like Welcome. Let's see, we're going to hear is well unwrapped here ago. That should be fine. So So let's go back to the first your controller, because we're not done yet. So here we're gonna create a reference to this. Do you control, which is the destination view controller? And that's gonna deep, profound, busy four of you control and that's gonna be sick with destination do controller. As for a foul view controller and then we can access. That's gonna be profound, V c. And then we can exist with these terrible that we just created, which is expecting also a dictionary that we should specify. So here, at this level. So let's see if this is required. So maybe not. Okay, sometimes it's asking for it, so we're just gonna leave it blank, so that's fine. So, no, we're able to then pass to these variable, which is an Ennis dictionary. This and it's dictionary that includes all the information off the contacts with the cell, which has been selected. So we're gonna try that. So I think that we've got everything. So the last thing that we missed, we're gonna do that speaker. That's gonna be important. So we're gonna go back to the main story board. So remember that we have added and identify it for the Segway. So we're gonna want to also check if we are referring to this. Identify here. So we're gonna go back to the first few controller, and before we do all of this gonna check if Sig, where I don't to fire is equal to this Go to profile, and then we're gonna wrap the whole thing. So this is only if it's true. We know that we're referring to the destination view controller, which is the profile view controller, and then we're gonna be able to then pass the correct information to these destination control. Okay, so let's try that. You're a ghost when it's trying with thumb, and here we can rid welcome toe. So we're gonna need to capitalize as well. Just for the nice display. Welcome, Mary. Well, that's the first step. So we know that we're able to pass the correct objects over to the next view controller. So let's go back to the profile of you, Control. So I'm gonna capitalize this one that's optional. We're gonna try to wrap this one. So, with doubts, messing with everything that's gonna be capitalized string here ago and what we want to do . So we're gonna need to adjust the create outlets for this profile view controller. We haven't done that yet, so we're gonna go select the assistant editor. So, in order to have so the corresponding fall so on the right side. So I'm gonna select option with my finger and then click provided you control. So that's the right fell, and then I'm gonna create a new outlet. Were the same age you. So that's gonna be avatar image you. Then we're gonna have also are not played for each label. So the 1st 1 will before the posts, then we're gonna have also labeled for the followers and another one for the following. Let's put that together. So now we're gonna be able to control each of them programmatically, and we're gonna need to have also an outlet for these bottom. So I'm gonna call this one. Follow It's about time, and we're gonna have also an action for these buttons. We're gonna create this one right now, and that's gonna be follow contracts, action, and we're gonna select collection connects. That's gonna be related. So this change the title of this one, by the way. So that's gonna be follow a year ago, so refined with all the outlets, let's select now again. So the standard editor to go back to the profile of you control and finish with the configuration off this page. So that's gonna be we have several stuff here, so that's gonna be for the image you So that's gonna be avatar image you than image. Then we're gonna create an image that's gonna be named. And then we're gonna use this. We want to refer to Avatar, and we're gonna confirm that this is a string. Then we're gonna also specify so all the labels So that's maybe plus label text and pull this one. We're gonna have a chain of character. So that's gonna be posts. And also followers label six. So that's gonna be followers, then following label. Gonna have some space. So we're gonna be able to read for each contacts of how many post followers and following they have. Well, that's gonna be users. And the key is posts. And then for this one, it's gonna be followers. And this one, Finally, it's gonna be fully, and I'm gonna add an extra line. So that's gonna be a return that I'm gonna create with this. So that's gonna be back slash and in order to have so this chain of characters in the next line So I think refined. So we've got the image and also the through label. So let's try that Tom first to hear ago so we don't see everything, and that's because we're gonna fix that that Because so each label is limited to one line, so we're gonna go to the storyboard. So if it's limited to one line, so it's gonna cut off in the middle. So here you have. So the number of line which is specified So in order to have an unlimited number of lines, we're gonna put this one at zero. So destroyed that again Tom year ago, which is gonna need to. So it's not enough space That looks pretty fine. So we're gonna need to do a few adjustments, so going back to the storyboard. So we're gonna need to make this one so bigger. So I'm gonna make sure to select the stack view. So maybe instead of having 150 we're gonna increase the with off. So the width of this stack of u 280 on Further to that, I'm gonna increase. Also, I'm gonna just obviously so the width of each level, So that's gonna be 60. I'm going to select the 2nd 1 for the followers, and that's gonna be 60 as well. And then the last one following, it's gonna be 60 so hopefully it's gonna be fine. We're gonna also update the with off the follow button. So that's gonna be now 108 place, right? That's let's try with thumb. So that looks fine. So maybe we should also decrease the size of the phones because I think it's visible enough anyway, So for now we have 13. We're gonna decrease to 12. Yeah, that looks good. So far. Anyway, to adjust, play a little bit with the with the Maybe you could so you could still have a little bit of space between the two. Maybe you could decrease. Maybe you could increase to 200 maybe 2 50 is the maximum and then adjust accordingly. The with off each label and same for the button support. The next part. We're going to be adding a collection view in order to display so a gallery of pictures so which are so that corresponds to the images on the post of each year 14. Images Gallery - CollectionView: Now let's continue. So this time we're gonna be adding a collection view in this burnt. So I'm gonna go search for a collection of you. And that's maybe this second choice right here that's gonna love to displace data in a collection of cells. We're gonna drag this one so over, like so and that's gonna goodbye. So also, the entire second part of this you So there's gonna be no margin left and right, and same for bottom. We're gonna add right away some constraints. Gonna uncheck this. Those levees around the left, Same for the bottom. And same for the rights. And then for the with No, actually, so there's not gonna be any with or height. It's gonna be 27 or the top, so that's gonna be 27 speaks. Also, compare to those sentiments right here and then make sure so because it keeps going back to 180 to put 20 for the bottom. Then we're gonna add four constraints. You go and next we're gonna confirm, then we're going to keep the collections you selected. So just to make sure that this is the collection view that you are targeting make sure that in the hierarchy view you have this one selected. Then we're gonna go here to size Inspector, and from here, you're going to be able to update the width and height off each cell. I'm just gonna close that up. So when you know that you have the collection viewed, selected, we're gonna go here, and I'm gonna have date these 220. So that's going to 124. The height and seen for the with. There you go. So we're gonna have something larger, and the next thing that we're gonna be doing is we're gonna create an outlet for this collection of you. So we're going to select the assistant editor and here, so writes about the follow contact action. We're gonna create an outlet for this collection. You're gonna keep this one selected, then drag control drag, and make sure that you have so the type, which is your eye collection view. And we're gonna name this one collection you very simple. So that's done for these birds for the interface. So let's go now to the profile of you. Control is so we're gonna go to the Standard editor then select profile of your controller from here. We're gonna be able to then confirmed to the UAE collection view data source, just like we do for the table. Get it? And so? So we're gonna be able to indicate the appearance of the collection view. So the number of cells and also configure of the cells So we're gonna be doing we're gonna start to buy, assigning soon these controller as the dealer source for this collection of you and next we're gonna be adding so the required methods for the data source of the data source methods. So you're gonna keep your finger on command and select like so And here you have. So the Jew recording methods. So we're gonna copy them and go back to the profile of you controller. I'm going to remove this function, and then I'm gonna out of Mark. That's gonna be Mark and I'm gonna put collections, view the resource leopards, and I'm going to copy them, so it just never moved. I'm just gonna remove a few things. There you go. So this one is returning in the intruder. So here is what I'm going to remove was not required and here. It's going to return an object off type you. I collections yourself, So that's put zero for No, that's gonna be returning zero. And here we're gonna create spin you. So that's gonna be cell. It's gonna be collection view, Dick, you reusable settle. That's gonna be dick your reasonable cell with reuse identity higher. So we're gonna provide unidentified air and the index path, and then we're going to rejoin the cell. Here you go. So now the air is our cone. So next we're gonna be doing a demonstration. So just to make sure that the collection jeez working fine. So we're gonna have a background color that's gonna be you, like color. Gonna make this one green, and we're going to return 10 cells, then cells with me 10 prince cells. My bad. I'm selecting the wrong property. So that is background color. Nobody's you like caller ring coat, so make sure to select, so make sure to select this property in the background. Okay, so we're almost ready to go. So because here we are specifying this. Identify here for this also in order to be able to generate a new cell. So the 10 cells from the prototype cell. So we're gonna need one, which is corresponding. So let's go back to the main story board. We're going to select the cell, go here. So the attributes, inspector, and then we're going to specify cell for the item to fire. So this mismatch this so we should be good to go. So let's try that. This driver thumb soul Perfectly fun. So we have our collection You. So we're gonna change the background view color off the collection of you, So that's gonna be pretty simple. So that's got to marry, So that's gonna be the same. So we're gonna have a gallery of images for each contact, So that's update Also, the background color view off the collection. You So that's gonna be background color. You like a learned. That's maybe what? Here we go. And ultimately we're gonna have actually a gallery of images and we're going to be able to the scrimmages by using an A p I. And that's gonna be the unspool ash, a p I, which is gonna allow to access a collection of istock photo so of good quality. And so we're gonna be doing that in another video. Let's go to Tom. And here it goes. So now it's better. So for now, we see just green color. So cells with green color. So as I was saying so we're gonna be using these FBI. So I'm gonna explain. So how it works in the next video. 15. Unsplash API: So right now I am in splashed outcome. So we're gonna be able to get some nice pictures, like so for our replication. And you can go to collections as well to see what's available, Although we're gonna be actually generating Sarandon pictures. So I'm gonna show you how so we're gonna go straight to the section for developers, and he we're gonna have a few information. So instructions as to how you can use with the source and the Giessen Eppy I'm so the terms of use right here. So we're not gonna need to register as a developer. So we're gonna go straight to the end splash source dogs, and that's gonna be very simple. So you have the options to select so randomly or from a category? Oh, from a user. So that's pretty nice from a category. So if you have a particular same for your application and for applications, so we're gonna be using actually a random, so that's gonna be these euro. So basically for this part of the applications, So we're gonna need to perform a request in order to be able to collect data from an FBI from an external source and then returns with these data to display in our applications. So what we want is to have a nice collection of pictures for each contact. So we're gonna be creating your posts with images for each user. So we're gonna be doing that. So right here that's gonna be marked firebase. And also we're gonna need obviously so connections to the firebase that obeys. So they started. That's and because we already have that in the list of contacts were gonna copy that from here, and I'm gonna paste. It's right here at the top, and we're gonna need all their reference for the fire base and we're gonna create each A Z , and we're gonna need other reference for the fire base. So that's gonna be we're gonna have a reference for the posts. And for now, that's gonna be in optionals. We're gonna update this one. So afterwards and so I'm gonna go create one function so right here, and this one is gonna be to create the boats of From the Sunsplash FBI source So that's gonna be function create posts. This one is gonna have a completion handler as an argument as a perimeter. So that's gonna be completion. It's not going to return anything. So what we want is to execute something. So after we're done creating the post and we're gonna create the look because we won't dysfunctions to execute so and above times that's gonna be initialized at zero. And then we're gonna run this as long as we're below 10. But it's gonna be about nine times, 10 times my bed. So then it's gonna be incriminated. So each time and we're gonna create a new post I d for each new post path. So before I go any further so I'm gonna explain the way it's gonna work, So basically gonna have for each user. So we're gonna need to create another reference for the user. So that's gonna be user ref, which is gonna be a type fire base right here. Then we're gonna go to If you did know to configure these new reference in the database, it's the first of all we want to refer to the specific users. So it's shoes. I was gonna have a profile page. So we're gonna have these user ref that we're going to specify. So we're gonna do that in view did load. So here I'm gonna specify. So reference five days is to give things clear. So that's gonna be user ref that we're gonna create from uses, ref, which is the general path users, ref. And that's gonna be chilled by depending path. So we're gonna then at another segment which is gonna corresponds to these specific years, or and we're going to be able to refer to that with So we have user. Then we're going to refer to the I. D for this user that they were going to need to also unwrap because this is an optional. You're as well and you're gonna see, Actually, we're gonna print this one just so you can see what I'm aiming for here. That's going to use a ref like so. So that's from that to begin with. So you're gonna be able to understand. So let's go to Tom. So here we're able to then prints these user, so we're gonna need to obviously so each time that we're gonna be referring to this one. So we're gonna need to unwrap it then Mary and here ago. So if we go back to for five days, so if we click on one of this, so if we click on one of them, gonna be able to see that we have the same note. So what we want, basically, is to refer to one to each contact. So for for each, for Val Page, and then be able to add the next draw note, which is gonna be post. So we're gonna need to name this one actually differently because he already have one path which is posed. So I'm going to change the name. So we're gonna create this one, actually, right here. So this is the post truck, and we're gonna people to create this one from the user ref, because that's gonna be an extra path for each contact that's going to use a rest. And that's gonna be child by depending path. I'm just gonna remove back because we no longer needed. And here we're just gonna name this one least posts just to have something different so it doesn't complete. And now that we have the references, so we have created all the connections to the database, we're gonna be able to create this functions which is gonna allow to then create post for each concepts. So let's go back to here. So we're gonna create till the post idea we're going to continue been regular, creates in you pass, and that's gonna be post ref. But we're gonna create from the post reference and that's gonna be child by a pending path . Doesn't seems to be able to completing. So this try, like so posts I d a year ago plus riff and then we're gonna need to add an image from this euro, which is the splash a p I. So I'm gonna go place this one so right above. So this section is for the fire base, and this one is gonna be for the on slash FBI, and that's gonna be very simple. So I'm gonna create a function which is gonna allow to do a query. But this time, this is gonna be true database. So that's gonna be funk download images. And we're gonna have a few barriers for this function. Of course. So, first of all, it's gonna take So a string, which is gonna corresponds to the euro, that's gonna be the euro off so of the FBI. So though the Internet source, then it's gonna be completion. So you want to return an image data, So there's gonna be of type Ennis deal. And from this drink that we're gonna pass right here. So we're gonna create a euro string. We're gonna need to, obviously. So make the requests with an actual you're also that's going with N S zero, which is gonna take a string as a parameter. And that's gonna be this string. And so after that, we're gonna create then or requests And that's gonna be from Ennis, your old session. Sure, its session. And then we're gonna be able to been run a request with euro, and that's maybe with these euro string and then we're gonna have a completion hunter, which is gonna return to Variables with First, we'll be data than a response, an air If there's any, that's gonna be the request. And before we continue inside this request function, we're gonna also allow this request to resume, and that's gonna allowed to run dysfunction. So this request was gonna be right below and so inside we're gonna check if there's no error for this request. So if it's equal to know that we're gonna be able to to create an image data and that could be with Ennis data data and from these variable that's gonna be returned by this request. We're gonna pass this one in order to create the data, and we're gonna make sure to unwrap this one. And finally, we're gonna be able to them return this data, which is gonna be then equals to image data and because it's a request. So this is a function which is run on the back threats we're gonna make sure to execute. So this birth on the main queues were going to do that with dispatch a sink and that's gonna be on the main accuser that's gonna be dispatch get gets main que and then we're gonna have the block, and we're gonna run this one inside this book. So we've got everything. So that's good for this function. Support the splash, B p I and also so be careful here, I have a typo. So that's gonna be off type string, and I'm gonna need also we're gonna need to also confirmed the euro string right here, Internet to run this week west. So then we're gonna go back here in order to call this methods, which is gonna be so download images. So we're gonna have a civil barriers. So first of all, we're gonna have these Eurail from and splash. So we're gonna add this one, right? You So we'll go back to the page in order to get it, and then we're going to return an image data that we're gonna need to convert to a string because it's only possible to save string, so object of type string inside. So fire base. So we're gonna be doing that's afterwards. So let's go to the splash page. So here, we're gonna be using this euro in order to get a random picture, and it's gonna be executed so 10 times. So we're gonna get each time a random so image which is gonna be returned them that we're gonna be able to save to the database. So we're gonna pass this string So we're gonna pass this string, which is gonna be then converts converted into a year. Oh, in order to perform my requests and then return an image data. So we're gonna use that. So we're gonna need to also change these backed into his drink, So I'm gonna create a variable here at the top. So that's gonna be image as to your So there's gonna be an optional because we're gonna need to convert this image data into a string because it's only possible to save Chan of characters so into the five days database. So I'm going to be doing that with this function, which is base. So it's not as terrible. That's gonna be the image data that's gonna be based 64 coded string with options. So that's gonna be this one. And for the option, which is gonna leave it empty with the toot square brackets, and then we're gonna create a new post. So inside this post reference, So we're gonna be able to create a new post for each new image, and that's gonna be a Type N s dictionary. So that's gonna be we're gonna have an I d. Then the 2nd 1 will be the key for the image. And that's gonna be this image string we can pass, just like so we're gonna confirm it because that's an optional. And for the idea we're gonna pass this post I d. That's we created up. It's up and finally, we're gonna be able to then set the value for this new posts path that is gonna be set value. Let's see if we have everything right here. So the value for each new post ref will be these new post dictionary right here. So we're gonna try that. So we're gonna call this function, sir, from the view Did load right here. So they're gonna be create post. We're gonna have a completion handler gonna be using that some other times so that you see , if I God spoke a So I've got an air here, so maybe I'm not using so the rights function. So let me go back. I'm gonna erase that. I'm gonna do clean. So that's gonna be based 64 which should be for this drink. You have two options, so that's gonna be the one which is for this drink, and I think we're fine here. I'm just need to build to make sure that I am all rights here ago. So this is fine. Baseline build succeeded. So I'm going to run again. So although there's nothing happening, so right here, So we're gonna check So for those two first Tom and Mary, if we actually have so now, a new path for the posts and we should have 10 of them. So that's gonna be least posts. And we have exactly so, like, that's 10 of them. So that's good if we open. So you're going to see that we haven't. I d for each post. And also an image. So what we're gonna be doing next, So we're gonna be able to do a query in order to then display. So those pictures. So here the same for this user number one. We have now a list of Post, and that's gonna be added. So it goes progressively. And of course, we're not gonna be doing that. So for each, each time that we start the application. So we're gonna be doing a query interview to gets this list off post and then display the image in our application, and we're gonna be doing that next with a query to five bees 16. Query Posts: So now we want to be able to I would remove these marks. I'm just gonna add it. We're gonna do a query for the firebase database in order to be able to get to collect this post that we just created. And that's only when you go on the contact page that you're able to created and we're gonna be able to obviously to do that. So each time that we visits a contacts page and also do it just one time, So if it's already existing, we're not going to run the same function. So each time it's gonna be on Lee So the existing post that we're gonna be able to collect and then display So we're gonna go step by step, so that's gonna be several steps in order to the form that So first we're gonna do the query. So that's gonna be funk Query Fire Base, and we're gonna have a completion handler for this one. Also, we're going to return to type of data, so that's maybe first images, which is gonna be uptight and history. So that's gonna be a collection. We're also gonna have a list of posts, so we're gonna have a collection. So just for the images, and that's gonna be for the purpose off displaying it on the gallery of images and we're gonna be able to regiments. And what we want to do is to obviously said, your query on the posts. So the post reference I was gonna be post ref, and we're going to use this function, which is observed event type. So we're going to select the last one and for the event type, So that's gonna be the value. We're going to return a snapshot value, which is gonna be of type fire data Snapshot. Finally, we're gonna have a lot of blood for the error. So if there's any, we're gonna be able to print it and then debug Let's go to this section plus drift. You were gonna have to local variables and that's gonna be attempt items and inside We're gonna include objects off type string. So that's just gonna be to include the chant of character that corresponds to the images just for the display purposes. But we're gonna need to also collect the entire post dictionary, and we're gonna do that just having troubles now with my ex coat. So that's gonna be dicked items. And for this one, we're gonna include in this dictionaries and we're gonna do the loop. So that's gonna be four post in Snapshot Children. I've got a type of So that's why I cannot really continue here. Let's meet, Go backwards. That's gonna be N s dictionary year ago. Its continue. That's gonna be four posts in its natural Children. So we're gonna create another constants from here. So that's gonna be closed as fire data snapshots. And then it's gonna be I'm going to create this one as a child boasts, that's gonna be child value as in this dictionary. And finally, we're gonna have imaged posts and we want access. So the information that we won't is for the images that's gonna be for the key image as string and finally, So when we've got that, we're gonna be able to then append to each of these look over a ball. So which array and that's gonna be you can. So I'm going to use this one to a band, the images. So that's gonna be Image Post. And finally to this one dicked items. I'm gonna use this one to bend the entire child post. So that's gonna be the dictionary. And finally, we're going to run this completion where we're gonna be able to then return. So the temp items and also the child and also the deked items so short for dictionary like so And because this is something that we're gonna be doing from the internet. So we're gonna make sure to run bets on the main cube that's gonna be dispatch. Okay, sink. And that's gonna be dispatch gets main que you go. I'm gonna take the whole thing and include it right here. Let's go backwards a little bits just to make things clear. So I'm just gonna Indian police I'm gonna do come and a and then control I to get things cleaned. So you're gonna have all of this. So this is only if this is valid. So we're gonna have also a block of code. So if there's any error with canceled block, so we're gonna do a loop in order to look through each snapshot, Children, So that's gonna be the post that we have for each contact, and then we're gonna get so each value, which is gonna be in in his dictionary. So if we go back to the fire base, you're going to see that for each user. So the 1st 1 we have this list post, then each one is a snapshot. Children, a child snapshot. Then we have an idea image. So we're gonna be able to collect each a collection like this and also for the just for the purpose of having just the images, we're gonna also collect this one only. So this value and a sign it here image most and so for the arrow. So in the case would have any we're gonna print Sprint error description. So that would be just for debugging the bugging purposes if necessary. But let's see that everything is perfectly fine. So we're gonna call this function. So from the view did load. So as soon as we get to this page, we're gonna be able to then query, so we're gonna have a completion. So we're gonna have to We're gonna be able to return the images in post, so we're going to need to then have a collections for these new assets. So we're gonna go here, so I'm gonna create one collection and that's gonna people the posts. And this one is going to include object off type Ennis dictionary. And we're also gonna have of our images for just images like so. And basically, what we're gonna be doing is simply a sign. So when the Jews images and then self post equals to post, they were gonna need to also. So this one we name a collection of you, so we're gonna need to reload the data. So just like we did for the table of you, we're gonna need to promote the deductible, these collection of you. So we're going to confirm year ago and finally for these collection views. And now we have a reference years, So we're gonna use that to dynamically display so images. So that's maybe self images counts. Then we're gonna need to configure the cells with each cell in order to display an image for itself. So we're gonna need to collect the data information from the firebase database. So remember that this was say, first as a data from So after downloading from the splash FBI, so we had to save it as a string as a chain of characters before the database because it doesn't accept any data, But this is neither a euro or a data for now. So we're gonna need to convert this drink into a data in order to use it as a data and display it as an image. So we're gonna choose that. So we're gonna do that right here, So we're going to need another function, so that's gonna be very simple. You're going to see, So I'm gonna put this one right here, and that's gonna be Mark download images from five days, so we don't really need Mark for that. So you just to specify that this is part of the fire base section and this function is gonna be download images Debbie for five days. So that's gonna be a string because we're gonna get a string from diabetes and then we're gonna return a data that we're gonna be able to then use handle for the purpose of displaying it. So we're going to return a data. So first we're gonna create a local variable, which is going to have our image data type China's data, and we're gonna use an optional by things that just to check a first we have an image that's gonna be Ennis Data, so that's gonna be based. So sorry I made a typo. So that's not gonna be working. That's gonna be based 64. And that's gonna be the 2nd 1 because it's gonna take a string as an argument. That's gonna be this one image that we have right here and then for the options. So that's gonna be decoding options. And we're gonna pass a role value, which is gonna be zero. And then let's open the curly brackets. We have an extra parenthesis here. Let's go back here. I'm gonna remove it, okay? And then we're gonna sign. So once we've been able to, then so creates a data from here. From that, we're gonna sign so image data. So this image to image data right here, which is our local variable, And then finally, because this function is expecting to return an object up tight image data. So we're going to return this one image data and then in Rapids because that's been optional. So that's all there is to it. So what we did here, we're gonna need to converts but Jane of character. So if a string in June and his data. So let's go back to this function with yourself for item at the next path through here, we're gonna be able to display an image for itself. So we're gonna have something like so image view. It doesn't come by default. So it's not the similar to the table you where we have a pretty like ticks label. Also, the image you we're gonna need to actually at this in order to allow to have an image. You for these cells. So let's go back to the story board. So in order to be able to do that, we're gonna add a u I image you in this cell and we're gonna need to create a custom cell. So this is what we're gonna be doing next. 17. Custom Cell: So we're gonna add a custom cell for this. So and then we're gonna be able to adds an image you. So first of all, let's create the custom cell. So that's gonna be from this group. We're gonna kick right, and that's gonna be new fell. Now that's gonna be off type cocoa touch class, and we're going to select. That's gonna be a subclass off you y collection view cells. So be careful to select this one. You Why collections, you sell, and then we're going to save it, like so. Although we could specify it, like just to make things different enough, So that's gonna be foot to a collection of yourself. Then I'm gonna click next. Terrible. So you have your new custom cells. So we're gonna go back to the story board and make sure that we select the cell. We're gonna go here. I don't it, inspector. And from here, we're going to specify So the custom Selves with a custom class for this cell we go next, we're gonna add a U I image view to the self, so we're gonna be able to display an image for each of them. So I'm going to drag these over here and we're gonna need to add constraints. So we're gonna do that in a very easy way. So I'm gonna open this panel right here. Then we're gonna select these image you and you're gonna keep your finger on control. And from here gonna drag over to this, which is the parent, You Which of the cell? So you're gonna have this window, and then you're gonna keep your finger on the shift key and make sure that you select the four first one so leading trailing than top space and bottom space. So we're gonna have constraints for the four sides of the view. Then we're gonna press return here ago. So now we have constraints. So that's check, actually, So by going So by keeping this one selected and go to the sighs inspector. So here you go, you have You're constraints. So we're gonna need to also update the values, so I'm going to select each 12 edits, and I'm gonna change that to zero, then the 2nd 1 for believing. So that's gonna be also zero than the bottom. That's gonna be zero, and it's up zero as well So here it goes. So now you have everything that fits perfectly and nicely. So the next step will be to create an outlets for this image used. You were gonna be able to then display an image for this image. You. So we're gonna go to the assistant editor, and besides, we want to see the custom cell that we created. So I'm gonna select this one. So from the Project Navigator right here. So I have my finger on option at the same time that I selected to make sure that I can open this one on the right and then this is where I'm going to be creating the new outlets. So I'm gonna select this one. They control drag, and that's gonna be for two image. You, you're goes. And now we have outlets. So this part is finished. We're just gonna go back to the Standard editor and we're gonna go back to the profile of you, control it, and right here. So we're gonna need to specify that these cell is up tight, as so that's gonna be as photo collection of yourself. So this is our custom self. So you need to do that first. Then we're gonna create these local constant, and that's gonna be to collect. So these data information that we create with this function, which is download image database and we're gonna use as a reference so images index bath room. So we have a string. So we have a collection of string in that's collection bet Marie. And with this function, so to which we pass on arguments as a string, So we're gonna be able to then return the data. So this is what we do here. So image data, and then we're gonna access. So this photo image view new outlet that's recreated, and that's gonna be image and we're gonna create an image object with the data. So that's gonna be this one image data and that's six. So let's try that. So we should have everything in place. So we have the image count. We have configured the cell. So each cell with a custom cell, so we're gonna give you to try We should be able to see now a collection of images for each contact. Let's try with thumb and here ago and that was pretty fast. Mary, We also have some images, and that's for everyone. So something that we're gonna need to do also is to reflector the code to allow to Joe Query if we already have existing post for a contact and not to recreate the post from by doing a query from the Splash Epi, I So that's gonna be we're gonna do instead of query from the fire based out of these. So we're gonna be doing that next. 18. Data Source & Control Flow: So as I was explaining in a previous video. So sometimes we have posts existing for some contacts and sometimes not. So it's gonna take actual it longer to first look the post, create them, and then see if to the database. So we're not going to be doing that each time that we load the beach for contacts. Instead, we're gonna be so we're gonna be doing some control flow in order to executes a query from the special FBI energy creates So new post from an Internet source. Otherwise, security have some content, some data, which is existing per contacts. We're gonna be doing a request from the five instead of these. So we're gonna need to control the flow, call our query. So we're going to be doing that. We're gonna go to this function which is right here and what we're gonna be doing. It's very simple because we're gonna do account for the snapshot Children. So we're gonna do that with one party, which is very convenient. So we're gonna check first if snapshots so that's gonna be Children counts is equal to zero . It is gonna be the first spot off our condition and we're gonna haven't Elsa's well, So we're gonna do He's a warm first of all if this is equal to zero. So we're going to run this function, which is that we were originally calling from the view did load. So we don't want to call this function each time that's gonna be used less. We're gonna call this one, actually, inside right here. So this is only if the count off the Children off this natural. So if there is nothing So if there is nothing So if it doesn't return anything, we're gonna run these Internet secrete in your post and and save you to the devotees. And as soon as we have a council, if this is more than zero, But then we're going to be able to do this, which is to them look through each results that we get from that query in order to then assigned to each of this local variable which is gonna be in return, then sense of the other completion and then for the rest. So, you know, the rest of the process is that we're gonna be able to then get this from the five reason than assigned to our collection of images and posts. So let's go back to the query. Fire base is to make sure that we've got everything in order. So we're just gonna do a verification. So each time that there is zero accounts, so we're just gonna print something, so that's gonna be something like print loading from and slash from a P I. And here it's gonna be print that's gonna be else. So we're gonna put it right here loading firm primaries. So if we're check the five days dashboards so hopefully we haven't so maybe we left. OK, so this one, the last one. So we're gonna be able to check fulfills of this contact. We don't have any post yet on this one either. So the last one, and for the rest that should be loading from the five years because we have the count's, which is not equal to zero. So we have Children's for this path, so that should be loading from the five. So let's so that's giving a try. So we're gonna go to the last one because we know that we don't have any post yet, So that would be logically loading from the FBI. So that's good to feel Year ago, saluting from FBI and then because we have fire base. As a result, we have loading from diabetes. But we know that from the starter this is loading from the FBI. So let's drive with Glenn as well. It starts with the FBI. So that was fast. And then we're gonna try with one that we know. So the count of the Children is not gonna be equal to zero. So that should be loading directly from the five days Mary and here ago. So this is Onley loading one time from the fire bees. Same for Tom. Same for Martine. So yes already had. Okay, so that's just a way to control the flow, because we're gonna need to keep the same posts, so those ones are gonna be permanent. So the same way that we would have and instagram account so you'd have you'd keep the same posts and then you'd be collecting them from that Abi's. And so next, we're gonna add some user interactions for each of the post, so we're gonna be able to then navigates to another view in order to have a larger view of that image that we select and also the options to like this image this post, So we're going to see that next. 19. PostViewController: So now in this part. So we're gonna allow so user interactions for each of the cell. So one the user click on one cell on one image. So they're gonna be able to navigate, do another view in order to have a larger view of the post and have the option to like the Post. So we're moving forward. We're gonna add in your view, controller. So right here, Review controller. So you're gonna type view in order to populate those results. So we're gonna play this one so writes next to this one, and I'm gonna go ahead and creates in you class file. That's gonna be you're gonna right, click and then select a new foul and this one is gonna be cook a touch class will make sure to select under source under IOS, Then click next, and this one is gonna be a subclass off you have you control. And I'm gonna name this one cost view control. So here ago. So let's go back to the main story board. So I'm gonna sign this once to this. So I'm going to sign this one to these new view controller. So you're gonna make sure to see like this one, and then we're gonna go to the identity inspector, and then we're going to select the pose you can shoulder and Harry And in order to allow so to navigate, from this view to this, you we're gonna need to create a Segway. So I'm going to select this one, and I'm gonna control direct from here like so and then I'm going to select push. So here it is. We have our new Segway. I'm gonna select it. And I'm gonna go to attributes, inspector in order to provide to give it a night anti fire. And that's gonna be good too post a year ago. So this is how this should looks like. So also, you can name it differently, but as long as you're gonna be able to then refer to the same identity fire for the coat, so that's gonna be fine. So let's continue with this post view controller. So we're gonna add a big white image you in order to allow to display a larger view of this image, and also we're gonna have a smaller imagery in order to display the other tower on the user off the concepts. So to start with this big image, you we're gonna place it here, gonna be adding constraints, of course afterwards. And we're gonna have another one right here, smaller. And finally, we're also gonna have a button. But I'm gonna aren't right here. That's gonna be lucky. So let's add construct board this big white image, you the first that's gonna be the heights we're gonna imply the with by confirming so on each side support the left and right. So by confirming so leading and trailing so that's gonna be 20 each the with is gonna be automatically calculated. And then we're gonna confirm also that up, and then we have four constraints to regard to go. So let me go back. Looks like I'm missing something. So I'm going to select this one, actually go to the size inspector just to check. So we have a trailing the leading the top, the height as well. Oh, I know. Actually, my bad. So we're confirming the top two something which doesn't have any constraints yet, So we're gonna take care of the constraints before this one, and then that's gonna be fine for the rest. So so make sure to select. So make sure to select the imagery for the Avatar. And here we're gonna be confirming So the leading the top also the within heights that we're gonna make similar. So that's gonna be 65 by 65. And we're gonna confirm and I'm gonna date also update frames. So now it's fine. So we have blue lines, and as a result, it's gonna be fine as well for this one. So that was just missing. So this part brought it up. I'm going to also add constraints for this like button. I'm gonna make sure that this one is aligned, rip, You made you. So I'm gonna add a leading that's up the with and also maybe the height. Here you go. So next. So we have already error class fall. So we're gonna be displaying this one on the right. So that's Gumby with option and then post view controller. Here you go. I'm gonna create an outlet for this about their image view. So that's gonna be avatar image of you. Then we're gonna have post in age you and also we're gonna have this like bottom, which is gonna be both on outlets and also in action. So that's really like Button First Outlets. And we're also gonna connect, spend action to these, but, um and that's gonna be like post action, and that's gonna be in action. Then we can create clinic. So that's it for the interface. So we're gonna be completing a little bit more later. But for now, there's no h navigates from these profile view controller to this post the controller, and we're gonna need to add to allow user interaction, so that's gonna be on the top. So when you click when you top on one soul and one image, you're gonna be able to then navigate dozen eggs, you and we're going to be able to do that with a you I just to recognize er and we're going to be doing that in the next video 20. UITapGestureRecognizer: So now we're gonna go back to the profile view controller because what we're gonna do is to add adjuster recognizes. So that's gonna be a you light up just to recognize er and we're gonna create this one as a global variable. We're gonna go right here. So we're going to regroup all the outlets do to keep things just to get things organized and right video I'm gonna create. So that's gonna be tuck gesture. That's gonna be a type of you I touch just to recognize it. So that's gonna be an optional first. And then we're gonna go inside The view did load. I'm just gonna remove So what we no longer need And here, Bill, which is gonna put I'm gonna talk to you. I just her recognize er and then we're going to refer to these global variable. So that's gonna be tough gesture. And we're gonna initialize this one with this function, which is gonna be you lights up just a recognize er and that's gonna be dysfunction with two arguments. So first the targets, so the target is gonna be self. Then we're gonna have a selector, so that's gonna be the function, which is gonna be triggered as a result of the top and this one we're gonna create it afterwards, and that's gonna be sickly two posts. And also, I'm gonna configure also the number of tops Richards recorders in order to trigger this function, and that's gonna be one. And then we're gonna confirm this one. We're gonna unwrap it because this is an optional. And here I am, missing one Prentice's because we have this one and then, like, so good next we're gonna be creating. So this function, which is cigarette to boot. So I'm going to copy its first. Then we're gonna go, so right after is actually before and slash ps and that's gonna be more simple. It was gonna be funk cigarette to post, so we're gonna be able to trigger this function as a result off the top. So let me copy that just to keep things clear and organized. So that's gonna be secret to post and, you know, just to check that this is working fine. For now, we're just gonna bring something like that and we're going to know that it's up. So the white tub jester recognize er is recognized so with the user interaction. So this trying that So we're gonna go to the 1st 1 We're gonna go to Tom, and here go, we're going to click on the one. Still image doesn't seem to be working, So let's go back to the main story board so And also, what I suspect is because automatically, you don't have any user direction which is enabled for the image. So the image use we're gonna need to make sure that this is enabled. First, we're going to select this one. Well, the profile view controller, we're gonna go to attributes, Inspector, and you're going to see that under view this one user and direction enabled we're gonna need to check this one. And also, we're gonna go back to provide a view controller. What you need to do is to add the jester recognizing to this photo images so that's going to sell at just to recognize er and that's gonna be tab gesture. And then we're gonna wrap this one, and we're gonna need to add this one to the images of the photo in match view. Let me go back. Photo image of you, then just a recognize er and then we're gonna add the tough just drug that we just created . So this was once that missing in the whole thing. So this and also make sure that we've added we have enabled the using direction. So there's try that. So we're gonna try again with film. Then we're gonna accept on one cell, take sometimes, but then you have. So this is triggered, and then you're gonna have it's displayed. So that's for me the result of this function, which is taking time. But what we're gonna be doing next is to allow to say great is next post to the next few. So we're gonna be doing that next. So let's go back to profile view controller and what we're gonna be doing is very simple. We're gonna call this function, which is gonna be so perform cigarette with identity fire, and that's gonna be the one which is let's go back to the main story board to check which think way it is. So that's gonna be good to post. So back to profile view controller, I go. I'm gonna make sure to specify the correct item to fire, and then that's gonna be self for the center, so let's remove that. So that was just for testing purposes. So that's trying that. So we're gonna go to Tom again, Okay, so it's not working perfectly. So what we're gonna be doing instead of having the trigger, But it's come back to the main story boards to remember when we were creating. So the Segway. So I'm gonna make sure to have these cigarette identifier, and I'm gonna be creating So this secret from the cell, let's go make sure that we select the right one. So that's gonna be the profile view controller, then the collection view that the cell. So let's do that from here to make sure that we select the right elements and that's gonna be like So So that's gonna be Let's just make sure that we have this one dilated. There you go. So make sure to remove this one. Then we're gonna create anyone, so that's gonna be control. Then sell and push and I'm gonna provide the same. I don't see fire. Let's do that. So let's try with married this time, Okay? So let's drive with married this time with Mary. And here goes so that weight. So that works. We nizer perfect. So what we're gonna be doing next is, of course, to allow to pass the information off the cell, which is selected in order to display the image of that cell. So we're gonna be seeing that next. So here as well we're gonna be using the prepare for a second. 21. See Posts: Okay, so moving along. So now we want to be able to then display so this so the data on the poster controller. So we're gonna need to pass the information from here. So when you click on the cell in order to pass it over to here, so really need to pass security, several types of information. So obviously we're gonna need the image. We're also going to need the information off the contacts in order to display the avatar right here and later. We're gonna need also the information off the post itself in order to be able to like this post right here with this button. So this faction. So let's start with the prepare for Sigrid function. We're going to go back to the profile view controller, and we're going to go all the way down. So you have this function, which is that belongs to this mark, which is navigation and this function that is prepare for Segway. So first of all, we're going to check the identity fire off these Segways, so that's gonna be equal to I'm gonna check again to make sure I've got the right one. So here in the storyboard So this is this identity fire, which is go to post. So I'm going back to propel. Here you go. And then we're gonna need to refer to this destination view controller, which is the photo of you controller, which is the post. I'm sorry, the poster controller. So that's gonna be opposed to the sea. And that's gonna be signaling destination of you controller as post view controller. Here we go. And from there we're gonna be able to then excess different data, also different variables that we would create. So I'm gonna go back to post the controller interviewed to create those ones. So let me drag this one over right here, just to keep them together. We're gonna go to post and here I'm gonna create a variable. So that's gonna be the bar, which is gonna be for the image that that's gonna be image of type string. Then we're gonna have also one variable, which is gonna be for the contact. So that's gonna be on Ennis Dictionary and finally, we're gonna have also the information about in regards to the posts itself. So that's gonna be also Ennis dictionary, and I'm going back to the profile view controller. So energy to be able to pass the information for the corresponding cell. So the one that we select, we're gonna need to refer to the index position off each collection. So we have a collection for if we go back to the top, we have a collection for the Post and also for the images. So what we need to do is to be able to target. So So we're gonna be able to do that with one function which is gonna be did select items at index path. So we're gonna go get this one from the delegate protocols. First of all, we're gonna confirm to this world, So that's gonna be you. I collection Have you delegates. There you go. And I'm going to go to this one. So there is no required methods for this one, So we're able to access functions which are provided by this protocol. So by clicking on command and clicking at the same time, So we're gonna be able to then lend on the class ball, and I'm gonna get this one, which is did select at index part. You see, this is an optional, So let's go back to profound your controller, and I'm gonna put this one so that's not gonna be the data source of right below. We're gonna add a mark. So if they swung through this section, that's gonna be for the delegates methods. So every time that we click on the cell, So we are expecting to get so the index position. So let's try that with this function, actually, So I'm gonna print, So every time that I quick on the cell, I'm gonna print the index Bath Road, so that's gonna be an integer. And now, because we conform to So we want to be able to use the delegate methods we're gonna need to also a sign. So these view controller as a dedicate. So that's gonna be right here. I'm gonna actually put this one at the top and this one as well. So anything that's corresponds to the configuration of the collection view that's gonna be collection few delegates? No, not description meant So not description, but delegates and then self. There you go to here. That's gonna be the contacts. Information. Go. OK, let's try that. Okay, so this time, let's try with Martine. We're gonna click on the one hand, going to see that each time that you click on one cell, you're gonna have the index bath. So we're gonna be able to use that information energy to pass the corresponding income for each index path each cell. So what we're gonna be doing is I'm gonna create one variable, which is gonna be a global one. So that's maybe for so Index, and that's gonna be of typing. And then so whichever cell which is stopped, I'm gonna been assigned so index path pro. Then I'm gonna go to my prepare for Segway function. So then we're going to refer to each collection. So that's gonna be post, do you see? So we want to refer to the image, so that's gonna be photos, and then we're gonna pass these values. So which paper cell, which is step. So we're gonna pass. So the corresponding photo at the corresponding index position in that collection, and then it's gonna be posts BC and then the post that's going to refer to the post collection here as well. We're going to refer to the corresponding index. They were gonna have also the information for the contacts and for this one, actually, we already have. So one dictionary right here that we're gonna be using, So that's gonna be the user. So we're gonna make this one equal to user interview to pass the information off the contact. So each time that we click on one cell and for the photos, I'm gonna check because it doesn't seem to be recognizing. So this is actually images. So the name off the collection is actually wrong here, So I'm gonna change from photos to images on their anywhere. Good. And so now we're gonna go to the Post, you controller, where we're gonna be able to then configure so the outlets in order to display the post. So first, we're gonna be displaying. So the Avatar So that's gonna be the is just one, Because basically, So that's gonna be the avatar image you then. Then that's gonna be image and you like image unnamed, And this is gonna be a string. So that's gonna be contact that we're gonna unwrap. Then we're gonna access the value for the Avatar. So that's gonna be the key avatar, and that's gonna be as a strength. Let's confirm as well. And rep. Oh, my bad I have the next red dots and hair ago were good. And for the rest of for these outlets, which is the post images. So because we're gonna need to actually use So the data information, which is provided by very base, remember that this is not a euro, but that was originally some data that we changed into a string. So we're gonna need to use the exact same process We're gonna go to provide view controller . In order to get this function, I'm gonna copy it. So that's gonna be download images dp for database. So let's go, Pete, that right here, I'm going to remove this one and then paste that right here and I'm gonna create in your image data local, variable. And I'm gonna call this function, which is gonna be down with Image DB, and then we're gonna use these image that we just got. So this is in a form off a string, but we're gonna need to then take this string, converted it into data, and from there, we're going to be able to then a sign, so that's gonna be posts image of you than image that's gonna be you are image, then data and then assign image data as a value for this one. Now, we should be able to see ich ghosts every time that we click on the cell. Okay, so let's drive with Danielle. Let's go to the second war, because here I got an error, and that's pretty coming from the cell index. So if I type, we're gonna try something for the club you sell, Index. So beautiful printouts. Looks like this is no. So we're gonna need to check something first. And so there's gonna be different steps, energy to result that so First of all, we're gonna check if Sal Index is not Neil, and we're gonna need to then trigger the Segway programmatically, and then we're gonna need to trigger the cigarette programmatically because it looks like that's working from the storyboard. The signal is gonna be activated first without taking that information, which is important, which is the cell index in order to allow to pass the information from here in prepare for secret. So we're gonna go to the top right here, and I'm gonna first check if cell index is not meal So that was the one that was returning meal, and we're gonna activate. So this is what we had we were using originally. So that's gonna be sake. Wait to post. So only if this is not know we're gonna trigger this one. So from here and let's go back to the story board. So we heard originally so dilated the Segway in order to trigger it from the cells. So we're gonna again remove its and make sure to copy from here, Then we're gonna delete, and then we're gonna trigger this once of from So we're just gonna actually create the cigarette from here. That's gonna be a push. So if you select, you can see that this is gonna be the entire view, and then we're gonna have these item to fire. So let's go back to the profile view controller. So here we're gonna make sure that we have this item to fire and same as well, for this one go to post and then we're gonna be normally good to go because this part is gonna be triggered only if we have a seven decks which is available. So we're gonna be able to then friends inside, so I'm gonna print something like Index Bath the row, and then we're going to return, actually, the ceiling decks with the interpretations and tucks, so that should be fine. So let's try that. Okay, so let's drive with Mary. Here we go. And this time it worked. Perfect. So you see that sometimes you need to re factor the code differently. But more importantly, is that you need to understand that the Segway maybe triggered right away when you install this one. So when you connected from the storyboard and that was fine earlier, so as long as we were not passing information, so from one view to another, so that was just fine. But now that we need to pass to make sure that we can pass information. So from one views from the profile view controller to the post few controller, you're gonna need to make sure that you've got the proper information first before you activate the Segway. So now a goat and next we're gonna be able to then, like a post from this view 22. Like Button: so that we want to be able to like one post. So we're gonna be drink that from the Post you controller. So we have these outlets, which is also in action. So we're going to be able to like, one button and then display that we've liked this post. So we're gonna go to the Post, you controller, And first we have these action right here that we're going to be using for the action for these, like, bottom and we're gonna creates for function. So that's gonna be like posts. And then these function is gonna have one pair a murderer, and that's gonna be a boolean, you know? Did you have the option to toggle between liking and liking? So that's maybe if, like, we're going to do something So if, like so, if this is true, So if we want a like so that's gonna be it's gonna be liking, and then else that's gonna be like it. So we're gonna be testing that. So we're gonna be passing your values. So based on one condition as well here and that's gonna be we're gonna check, actually, the title of his buttons. So for now, so For now, we read a like on this button, so that's money with title label text. So if it's equal to like then we want to like this post, so that's gonna be we're gonna pass. Then we're gonna call this function, and that's gonna be like Post. And then we're gonna pass, True as a value, meaning that we want to then, yes, like this post and else if it's not equal to like so that's gonna be a different text, and we're gonna be changing that afterwards. So here, actually, when we're gonna be talking so between liking and and liking, we're gonna also change the text. And here it's gonna be false. So we're gonna need to also change the text right away, because that's gonna be based on the condition that's this is equal to like, So we're gonna need to updates the title In order to allow this conditions to work properly . That's gonna be either true or false. So here we're gonna be drink that with, like, button, then set title. So if we want to like this one, so if this is true, we want to then read lights, and that's gonna be for the state normal on. If it's not true, if we're going to unlike, it's gonna go back to just like and then we're gonna be able to then check again back here . So if this is back to like, we're gonna then have again the option to, like again by calling this function. If we click on the button, we're gonna also change the color just for the visual. And that's gonna be with Jean Color. That's gonna be you. Eye color read colder. And then if it's not light, we're gonna put it in blue. Here we go. Let's try that. So for now, it's just for the visual. So let's go to Mary. We're gonna go to these posts and then we're gonna like this one so liked Ben, we're gonna unlike lights and unlike so obviously if you go back so that's gonna go back to normal, who is just maybe like the plane bottom. So there's nothing which is registered, and what we want to do is to allow to register that we've liked one post as the current user, so we're gonna need a reference to the current user. So as soon as you lugging with Facebook's. We want to keep a reference to the active users, so we're gonna be doing that in different steps. So first of all, we're gonna need to have a reference to the active user in fire base. And then we're gonna need to also create a new path for the active user and then be able to , like one posts and save these post as like by the active user. So we're gonna be seeing next how to make a reference to the active user. 23. Active User: so in order to keep track of the active users, So that's gonna be from the logon page. So let's go, actually to the main story boat. So we're going to be able to see the different steps. So here. So from this point, So as soon as we looking So we should be able to get a reference to the currents off the current user and then keep it as the active user and then when we navigate throughout, so the different views of the application. So we should also have keep track of the active user. And when you reach these points, so the post you controller so you'd be able to like this post as the active current user and then you'd be able to save this, like us being liked by yourself. So by you, by the current choosen. So we're gonna be starting from here. So here we're gonna need to keep track of the active users. So we're gonna go to the Logan view controller. I'm going to start by creating and you variable, which is gonna be active user. This one is gonna be a string. And right now, so what? We're gonna be doing is we're gonna need these variable so everywhere because as you understood, So we're gonna need to give truck of these active users so everywhere, so throughout the application. So I'm gonna copy it and then go to the next year, which is the first few controller. So I'm gonna add the same variable right here, and then we're gonna also have the same active user in the profile page, finally, also in the post you control. And so how we can get the active users, So that's gonna be very simple. We're gonna go back to the log in page and here, So at this point, So as soon as you connect so you're gonna be able to have a talking So the current excess token. So this is what we're gonna be using energy to register ourselves as an active user. But the other thing that we're gonna be doing is that we're gonna be actually creating a note for I was also at the path in fire base for the active users, and we're gonna be able to do that in that section. So when the logging, the authentication is successful, so we're gonna be able to then return data. So you see these Both data. So this is what we're gonna be using in order to get so information from the user. So from the current user. So we're gonna go to the five days documentation. We're gonna go to use electrification and go to Facebook Here. You're going to see that you've got this object, which is fire based off data, and we're gonna be able to get the information, support the Facebook accounts. So the Facebook idea and also the access token also the d splaining. So we're gonna be able to use that as data and save it in our database in order to have an extra user, which is gonna be ourselves. So we're gonna start with that. So we're gonna need to have also our data registered in the five day, so that's gonna be first the display name, and we're gonna be able to access that from the off data that's gonna be provided data, and then we're gonna get the disciplining, and that's gonna be as a string. So if we go back here and see that this is part off the information that chicken gets back from with implicating with the Facebook accounts, we're gonna get the ideas. Well, it's gonna be elect User, I d. That's gonna be off data provider data, and then that's gonna be the i d. Also as a string, we're gonna continue and also get the email provided data, and that's gonna be the email. Also, as a string, we're also gonna get the Avatar, so we're gonna be able to display our profile image. It's gonna be, uh, data provider Dedeaux, and this one is gonna be Let's go back. So that's gonna be like with this key with a very profound imagine euro, and that's gonna be also as a strain and from here, So we have enough information. So I'm going to start by printing the user i d. And as soon as we connect, we're gonna be able to then print this one, so I'm gonna actually add some extra details like current, like active and current user. I d is. So we're gonna need to use the interpolation. So let's try that. So we're gonna connect, and here it goes, and now you can read active and current user I D. Is and that much is so also what we're printings of red below we have So this log in and out data. But what's important is to get this information that we're gonna be using as the active user id information. So this is what we're gonna be doing. So here, at this level, but we're going to be doing is so active user, we're gonna make it equal to user I d. And then we're gonna be able to also best information. So when we Segway to the next view So we're gonna go back to the story board to make sure that we've got the rights, So that's maybe go swifter ground. So I'm gonna take the identifier. So when we Segway from the Logan view to the tub, our controller and lending on that page So I'm going back to log in first, I'm gonna check if Siegler item to fire is a culture this identity fire, whichever identify where you give two, you're sick. Where and then we're gonna need to refer to because we navigate through a tub. Our controller. So we're gonna need first to refer to the bar controller because this is actually the destination of you control it. So that's gonna be tough bar controller, then. Sick way. This nation view controller as you I the bar control. Well, that's gonna be the first step, because we need to go through the stubborn and then access the table view. So the contact space and that's gonna be contacts, view controller, just contacts. And I'm gonna be tough bar controller. Then we're going to refer to the view controllers, and that's gonna be the 1st 1 as first view controller. Do you see that? This is this glass ball. Then we're going to refer to contacts, active user and then active user. Did you clean to remove all those warnings were going to take care of it, leader. And if you have the same message you can build again in order to include five days, sometimes you're gonna have that tricky issue. And so we're gonna be able to then pass the information of the active user from this looking page to the next few. So we're gonna put two break points just to see that this is working properly. So we're gonna connect first and here ago. So first we're gonna hit the break point. So that allows to interrupt the execution of the program in order to see how it works. If it works as expected, we're gonna get yourself. So the active users. So for now, this is Neil. So let me check. And I know what's happening here. So we actually go to the next year. So we Segway before we actually have a chance to go through all of this because the Segways activated. So when you click on the buttons and then the Facebook is decays, gonna then allow you to land to the next page. However, you want to be able to authenticate first, to get all the use information, including the user I d before you can get to the next year. So the first thing that we're gonna be doing is to allow to monitor if we are actually authenticated, and we're gonna be able to do that with this function. So let me retrieve it. So that's gonna be this one monitoring authentication, So we're gonna be using so the swift code. So we're gonna be doing that next. So that's gonna allowed to authenticate the user with this function and then allowed to Segway to the next year 24. Monitoring Authentication: So I'm gonna get this function from the firebase documentation. You're gonna find it here, right here. So I'm gonna copy the whole thing, and I'm gonna add this to the view Did load. So basically, we're going to check if we are both indicated. So if we are, so we're just gonna print That's actually it was complicated, okay? And that's going before with the old data. And before that, of course, we're gonna pass. So that's gonna be self active user. We're gonna get the information from the data that will be out there that provided Dedeaux . Then we're gonna get the I d. That's gonna be as a string. So that See the warning here. Okay, we're gonna change that to an optional We're gonna go to the storyboard. I'm going to select this Segway, so this is go straight to ground and you see that this is actually connected to this button . So meaning that every time that we click on this button, we go straight to the landing page. So it's actually not what we should be doing. So what we want is to create the cigarettes between the two, but then allow the sequester Onley if we are loved in with complicated. So I'm gonna make sure to copy these identifier because I'm gonna need it, and then I'm going to remove these segments, so I'm gonna click on delete. Here you go. I'm gonna zoom mean by pressing twice. Okay? Then I'm going to select this one and created from here like so and that's gonna be a push . And then we're gonna provide the same identify. So that was just a two step thing. So we delete it first because it was connected to this bottom. And then we re created the sacred from here and provided the exact same identify. So now we're gonna need to trigger these Segway, and that's gonna be on one condition that we are elected. So let's go back to looking view controller. I'm gonna go creates so actually right here, support the navigation. I'm gonna create toe one function, which is gonna be Segway. I'm gonna do a clean to remove all of this. All of these warnings, and that's gonna be we want to perform a sick way. So that's gonna be performed cigarette with identity fire. And that's gonna be this. I don t fire in order to navigate to the home page. And then that's gonna be self. And so what we're gonna be doing next A's going here and call this function right here. And we're gonna call it just right here because that's gonna be used as to observe if the user is connected and then allowed to Segway to the home page. We're not going to need to do it right here, because after we're done with this function, then it's gonna check this one and call this one gonna be. If user is successfully, it's complicated. Let me remove these one of the white. It's redundant. Okay, so this check everything, so that should be fine. So this time we're gonna keep the break points we should see this time. So the user i d for the active user because we're going to need that. Oh, I'm gonna need a self somewhere. So let's me go back to these error because we are in the book of codes. So we're gonna need to refer to these function with the self. Let's run again. So here you go. And this time it's fine. So we got the active user user, I d. So that's good. So now we're gonna be able to use this one. So in every Segway, So let's do that. So normally we have added so first of all, we have for this one, then we're gonna go to the first few controller we're gonna need to pass school. So from the 1st 3 controllers, from the least of contacts to the profile view controller, who is gonna be profound BC and that's gonna be user. No active user, an equal to active user. That should be a call to the 1st 1 And then from the least of context, we're gonna go to the profile view controller. Here is what we're gonna pass through the post. They see the active user, and that will be equal to active. Use it. So I'm gonna put break points everywhere. So profound, you controller, then imposed your controller. I'm gonna printed active user. We're gonna prints it, so that's in the pool. So that's gonna be the landing. So the ending points, then profile, we're gonna be able to break right here. Then we're gonna go to 1st 3 controllers for the least of concepts. We're also gonna put the break points, so that should be fine. So they strike that. So we're gonna make sure that every of every step this is working as expected. So now we have the active user. So this is good. So now we can continue in order to continue with the execution of the program. You can click on that button. Let's go to Tom. Then we're going to stop before we segue Way to the profile view self. So we have the active user, so that's fine. Let's continue by clicking here. Then we're gonna go to the Post, you controller, and we're going to stop again. Then check. And here we have it again, the active users. So this is working fine. So far, we're gonna continue. Go to the post view, and here we should be able to print it's and hear about. So that's just adoption, often out. But it's not too important, so as long as you unwrap its when you need it, So this is what we need. We're gonna need to keep track of the active user and monitor if he is or she is connected and then be able to register. So any activity like liking or commanding, opposed as the active user 25. Liking Post: So now we're gonna be able to like posts as a user. So we're gonna begin by importing by a base, because we're gonna need, of course, degreed references, and we're gonna be doing that. So from the top right here. So that's gonna be first. We're gonna have a reference for the likes that's gonna be likes, rip. So they're all gonna be optional for now. Then it's gonna be we're gonna have as user ref. It's gonna be five bees as well. Then we're gonna have post a rep. So now let's go. Indeed, Load. So we're gonna initialize this post, ref because that's gonna be this post that we're gonna like, You know that when we click on one cell. So then we're gonna learned so on this post two views of the larger beauty and have the option to like it. So we're gonna create so a reference to this one. So that's gonna be post Trump, and then that's gonna be five days. And that's where the euro. So let's go get Spectra Lee the beginning off this rural from a previous page in order to get the start imports. So that's gonna be all of this. Then let's go back to post your controller. So we're gonna start with. That's so that's gonna be between quotes. And so, actually, let's go back to fire base so I can walk you through the process, begin So we're gonna access. They use this path and then go down to one specific user and then visits the post, and then we're gonna have one post that we're gonna want to like in particular. So, for example, the 1st 1 So that's become it. And so you're gonna see this note, and so you're gonna see this path. So this is what we won't do. Recreate. So first the users, then we're gonna want you have the contacts. I d then access the list of Post and finally this specific post. So the way we're going to be doing that is first refer to users. Then we're gonna have the information for the contact I d. And we can access that by doing contacts. I d. So, actually, I should create this one. I'm just keeping one step here, so that's gonna be contact, I d. And that's gonna be cool to contact. So we have this dictionary right here. That's gonna be contact. Then I d and that's gonna be as a string go. And then we're gonna be able to then refer to the guns act, Heidi, and then next we're gonna have so that's gonna be let me go back, because I'm gonna need to have the exact segments. So after we got so there were user, I d We're gonna take this this post so we want to access this path, and then we're gonna access this particular post that we want to like. So that's gonna be We have also a dictionary right here that's gonna be post, and we want to access the value that corresponds to the key idea. Let's confirm all of that wrapped. It's nice seeing right here. Or get so in order to make things simple for now. So we're just gonna print post a ref, which is an optional, So I'm gonna need to unwrap it. So we're gonna try that. Oh, I'm going to remove. We no longer need to stop the application. Now let's go to one post and you're going to see that this is gonna print. So for the first user, the Post number one. Let's go back to actually the 1st 1 and you're going to see that this is user zero and bust there. So this is exactly what we need. Because to this post, what we're gonna be doing is adding likes. So when you like, opposed as a user, we're going to register it as been you path and then add the likes with the user. I d the active user. I d so good. So now we're gonna make a query in order to be able to access this path and then add in your path, which is gonna be correspond to the lights. So we're gonna do that Berate Hugh. So down with images from five days. So right below, we're gonna add a new function, and that's gonna be used to do a query. First, I was gonna be a hunk query by a vase. It's gonna take one parent, so that's gonna be first a 1,000,000,000. Then we're gonna have a completion, which is just gonna be used to return a block of code. My bad. So here we have burning to seize on, like so. Okay, first, we're gonna create, so the path and that's gonna be so likes. So we have created this one earlier. So this is a global variable, and this one is gonna be attached to the post trip. So the one that we want to like and then we're gonna add a note, the path, and that's gonna be with this function, which is child by depending path, and this one is gonna be likes. So as soon as we create the actions of liking, we're gonna have this path created, and then we're gonna create been you, Beth inside the likes. And that's gonna be like, rep. So this one is gonna be a global. So this one is gonna be a local curable, and that's gonna be so likes rough. So that's gonna be added to this one's. So that's gonna be added to these path, And then that's gonna be child by a pending path. And for the both, it's gonna correspond to the active user, and we must and wrap this one and from there, So we're gonna be able to do a query on the like so they're gonna be different steps because we're gonna need to also check if we actually have likes for this post, so that's gonna be inside. So let's start with this one. So that's gonna be observed event type. That's gonna be this one, and that's gonna before the value. Then we're gonna have a snapshots. Apple's on air, if there's any. So here for the air, we're gonna prince error description. So inside we're gonna do a check. And that's gonna be if, like so, if it's true, we're gonna want to then Adam you like. But it's gonna be, Let's you like And it's gonna be an N s dictionary, which is gonna corresponds to the user. And then for the value we're gonna pass, it's gonna be similar to this sexually self active user. I have some extra quotes, and then we're gonna register this one, too, like ref, that's gonna be set. That's gonna be set value. And then we're gonna pass these new like, as in you back, and then else that's gonna be removed, like So we're going to start with adding the light for now, add like and then remove like I was just gonna be We're gonna print. It's actually just to see the back and forth removing like and there. I didn't like that should be working. So if we go to, we're gonna call this function from here. So that's gonna be Query Firebase. We're gonna pass this same value, so that's gonna be like and then we're gonna have a completion. So let's go again through the mechanisms of the logic. So we're gonna have the actions to like the button. So we're gonna have the actions to like The Post from here and then if it's equal to, like, we're gonna pass, sure as a value in order to have the option to like this post, then we're gonna go down to this post, which is gonna pass as well. So the value true through these clarify a vase. So and this quarter fire base is gonna be used to then do a query to get the corresponding post that we want A like So we're gonna be able to add a new path for the likes and then a new path for the active user and then here, if it's true, So if it's equal to true, we're gonna proceed to that, which is to add a new like and that's gonna response to the active user and we're gonna set the value to these you like right here. So, to this path, which is like, ref. So let's try that. We're gonna be able to read the comments of the prints in the console, but also to check in firebase if we actually have a new path. So let's go to Tom. That's gonna be easier. We're gonna go to the first post, and like this one, I think like unlike so that would be removing. So for now, we don't have any actions to remove the lights. So we should see something added to the five days database, So that's good to hear. So that's actually so this one, we can check it from here and here. Is he so our user i d and so it again, our information as a user. So that's good. So if we go back to the general path for the users, so you see that down the tree So let's close this one. So least post so we can so we can understand. So we are referring to Tom. So this is the one that we selected then we liked the first post, and that's why we have this one. So what we're gonna be seeing next is how we can actually remove the lights in order to be able to toggle back and forth between liking and in liking and also display. So because now we have a reference to the likes being able to display so that we'd liked posts in the past. 26. Unliking Post - Part I: do not. We're going to see how to remove likes. So I'm just gonna remove these prints so we know that it works. So instead of adding, we're gonna be removing the likes, So what we're gonna be doing? So that's gonna be the reverse. We're going to refer to the like rest and that's gonna be we're gonna be able to do that with the function. Remove value. There you go. So let's try that. I see. Let's see if that works. So that should be working. So both on the interferes, but also in real time. So in the fire based out of these, So we're gonna go to Tom because we know that we've liked the first post. We have this text which isn't updated because we haven't been able to check if it's already likes or not. So we're gonna run into an issue in the first place because it's gonna understand these as options to like this post, although it's already light. So you're going to see that there was no change in the database, So we're gonna go back to the senior later and this time like it. So here you're gonna see so this command to show that now we have unliked this post and here we're going to see that it's gonna attempt to then remove it. So let's stop the application. We've got an issue here where you're going to see that as a result, the likes is going to be removed. So here it goes. You see that? Now the likes is gone. So the only thing that we're gonna need to fix is to avoid to have this function surrounding multiple times. And that's because we're gonna need to do a few updates also with being to face. Because every time that we click on these action, we run the same function. Let's do something first. We're gonna need a reference, a global reference. So I'm gonna put this one right here on this one is gonna be of our he's liked, and that's gonna be a bull that I'm gonna set to false. But first we're gonna update it. So depending on the action of the user and then based on the action, we're gonna update right here. So that's gonna be is liked, which is gonna be equal to like, right here. So that's maybe if is true and they were gonna pass. The same information to the query is light. And based on that, we're gonna be able to then of dates, the status. So the presentation off the buttons if itself is light, so you is true, we're gonna want to change, then the display. Let's remove that dream of that as well. So we're gonna need to refer to this each of them because we're inside a block of gold with itself. We're just gonna need to update that. There you go. So if it is true, so we want to change the text two lights and then if it's not true, it's false. We want to change the text to like and then just display a blue collar. So obviously we want to check a first one Post has been liked by the active user, so we're gonna do another query. So here we have the query for five days, we're gonna add another function, which is gonna be specifically for the likes. So that's gonna be funk Curry likes, and it is gonna return. We're gonna have a completion handler. So recovery. So we're going to return to the number of Lennox if there's any and that's gonna be ominous . Hurry. So we're gonna do a query to the database and then return if there's any likes, So we're gonna be doing that's up from so we're gonna be doing that. So by doing a crappy on the bus threat. So the one that we have declared right here, these most rep. Okay, so that's gonna be with observed event type with this one before I even type that that's gonna be value. Then we're going to return snapshots, and we're gonna have also look for the air and then prints the air. If there's in, find, we're gonna have a local variable, and that's gonna be likes counts. That's gonna be an interesting action, right? And that's gonna be an early that includes. And his dictionary. I mean, they were going to check, So let's item. So that's gonna be like the snapshot as fire data snapshots. And then it's gonna be post. So I want to rejoin the post, and that's gonna be item value, as in this dictionary, and then we're gonna see if there's any likes. So that's only with this optional binding, And that's gonna be if let likes. So we're going to refer to these boats which is supposed to return a dictionary and then refer to the path likes. So if there's any, we're gonna be able to then return them and that's gonna be as an in his dictionary for each of them. And then we're gonna eat you right through each off. The likes my bed. So this is not the right syntax you. So that's maybe if let's here you go. And then we're gonna look through each of the likes. Let's go before, like, in likes. And then we're going to simply depend to this. It's gonna be like counts. Attend has an upended like and finally. So when this is done, we're gonna then richer in the completion Handlers of this likes count, and we're gonna be able to choose, then do something with that. So that's correct. This warning as well a year ago, So that's gonna be the first step to checking first a pre, actually have a light already. If we have lights as far as we're concerned as an active user, then we're gonna have a second function, which is gonna be to check if it is lights by the active users. So I'm gonna name this function fun, and that's gonna be liked by the U And that's gonna take one parent, which is gonna be up tight and it's great. And then we're going to return a completion, and that's maybe a 1,000,000,000. Could be Yes, multibillion. So there's gonna be truffles, of course. So here, we're gonna have a local variable, have it's gonna be like that's gonna be easy, liked by you. It's gonna be an optional, and then we're gonna eat right through it's objects off these array, which is best as an argument. So that's gonna be for like in likes. So we're gonna create the constant so Internet to refer to their user. So the value for the user So we have one key, which is user, and then we're gonna be able to then check the value. So if we go back to the database, so for this, like so we have the key user and then the user, I d. So we're gonna get these user I d Actually, we're gonna name this one user i d just to make things more clear. And then we're gonna check a user I d is equal to active user is then he's liked by you is gonna be set to true or else if it's not, the case is gonna be is liked by you said to force. And as a result of all of that we're gonna do, we're gonna run the completion, which is gonna be cool to. Then he's liked by you, which is gonna be either dribbles, and we're gonna need to interrupt disk optional. There you go. And then we're gonna call this function, which is so the query likes. First, we're gonna call it from refuted load. Let's go back to you did load. So here we're gonna add some permits. So counting likes and checking if Post is liked by active user. So we're gonna call this function, which is clearly likes, first of all, and then we're gonna be able to return the likes that we need, because this is what we're gonna need to first return and then compare and see if the active user is included. So first, we're gonna check if the counts off the likes is more than zero. So we're gonna create a global variable. So that's gonna be more convenience. I'm gonna add it right here. So that's gonna be of our likes. And that would include Ennis dictionaries here. So we're gonna be able to then assign the results off the lights to light yourself likes, and that's gonna be as and his dictionary objects. Okay, go. And after that, we're gonna check. If self likes is more than zero, we're gonna be able to then so safe likes count. If it's more than zero, we're gonna be able to then run dysfunction, which is so lights by you, we're gonna grab the likes, and then we're gonna do the comparison based on these hurry, we're going to return a Boolean. So that's gonna be true. Balls. And then we're gonna do If, yes, So, first of all, we're gonna need to update the interface, so that's gonna be the like button, like better. So we're gonna set the title two lights and that's gonna be like this only if, as a user, we have liked one toast and we're gonna change. Also, that would be so light. But Tim cooler. So that's gonna be you. Walk away, you eye color and then red color have a type of here, so that should be normal. And then we're gonna have it else as well. Let's grab the whole thing in this just update the values. So here, that's gonna be if false And so if it's not likes yet by the user and we're going to read like and I'm gonna change also the color. So that's gonna be blue color. So we're gonna have an even else right here. So if the count is more than zero, But we're gonna need also to specify and else here because if the count is equal to zero, that's gonna be else here. So we're gonna use the same display, which is gonna be like this neutral. So let's make a test with that's we're gonna like a post, and then unlike it, we're going to run. So I'm gonna go to Tom than the 1st 1 I'm gonna like it the first time. So let's go. So let's check out So on fire base. And now we have the first post from the Levy stuff post, and we have the 1st 1 which has been light. So that's trying now to unlike because so here we have an issue. We're gonna go back to the code. Let's stop it. Okay, So first of all, going back to these function, which is verifiably so instead of doing a query, we're just gonna do actually creating a new, like path and then allowed to add and you like, or venture remove it. So we're gonna be doing that. So we're gonna need to reflector the goats. We're gonna do that in a second part just to start from fresh. We're gonna reflector the code and then take it from there. 27. Unliking Post - Part II: interpreters video We were working on allowing the user to like and unlike, oppose. So what we're gonna be doing is a little bit of refractory before we go any further. So first of all, let's go invaded load. So we're gonna keep this function, which is gonna allow us to check the number of likes but also to return if one post has been liked by the user active. So the active user already in that case, we're gonna have I mentioned, which is going to say, like instead of just, like, which is gonna give you then the options to like a post, but it because already been liked, we're gonna be able to read, liked. And here we have these bullion is liked, which is gonna be updated based on whether or not one post has been liked. So this is what we're gonna be doing first. So here I'm gonna date these bullion, so that's gonna be self. He's liked. That's gonna be true. And here it's gonna be self is liked false if it's not the kids, and then we're gonna go further down because the big change will be so. Wherever we have put this function. So this one queer if I based so actually this one, I'm just gonna take these two lines and I'm gonna be dilating the whole thing. So I'm gonna highlights, and then we're gonna take that off year ago. So no function square. If I bays instead, we're gonna initialize this so we're gonna date. That's let's put that incremental just to ignore the air. So we're gonna go invaded Load interviewed to initialize these Barbies reference. So instead of this one, it's gonna be done inside the function. And so we're just gonna keep this one and make this one a global variable like ref. So I'm gonna go to the top and I'm gonna have a global variable for, like, ref 25 days. So let's recap again. So now I have a global variable for, like, rep. So that's gonna be the unique like which has Bean added by the user the active user and indeed the load I'm gonna initialize this one from Likes wrote So meaning that we're gonna have a new path likes which is added to the post. So the unique So the specific post and then under the path for the likes. I'm gonna have one extra pack, which is gonna be my like this one. So this is where we're gonna be initializing this one. So here, this is for the fire bays. Let's go further down. So here, this is where we're gonna be, actually, during the action of liking and liking. So let's take all of that. We're gonna be starting over. So that's really based on this argument, Rick, You that I'm gonna change two lights and here we're gonna be creating so inside this function and you let's go, baby and you dictionary And that's gonna be with user for the key. And then for the value that's gonna be the active user. There you go and we're gonna interrupt, and then we're gonna check A light is true. In that case, we're gonna have the option to then remove the like, and that's gonna be with. So yes, it's gonna be so like a rough which days? The global drivel, this one, we're going to remove the value because it does already exist. Remove belly and for the other, if it's false, it's gonna be the older way around to the gloomy the older options to add been like and then we're gonna choose. That's gonna be self like rep. So except that this time we're gonna set a value and this is gonna be then you like this one at the top. And also we're gonna be changing. So all these mentions So just like here. So we're gonna take the whole thing, so we're gonna be troubling. So between different colors and the fourth of first of all here. So if it's no longer like we're gonna change the text to like and then for the caller so that's gonna be Blue Color is liked is gonna be changed to false. And then I'm gonna check the whole thing and allows select meals to remove that sits nuts. You know that. And here it's gonna be Then if you add the life, so then it's gonna be liked for the color it's gonna be read. And for this one, it's gonna become true. And of course, for this function. So let's go back to the action, which is gonna allow the user to like the Post. So this is here. We're gonna update that we're gonna make it more simple. So that's gonna be like posts and we're gonna pass these global variable bullion, which is gonna be either sure Fels, based on whatever is returned by these function right here, so self like by you. So it's going to look through the self likes if there's any first of all, it's gonna be then. So if we have any likes, it's gonna be then assigned to this collection, this area, and then it's gonna check if for the likes it's been like by us. So we have another function so right below, like by you, which is gonna check if the use I t is equal to the active user. Okay, lets go back. And based on that, we're gonna have a value for is Light. So that's gonna be the key to get this true or false. And then based on that, so that's gonna read it to me, defined the next action. So let's make a demo. So let's make a demo. So for the 1st 1 so that's gonna be Tom first posed, and I'm gonna keep also the firebase open. So let's check out. Actually, So it's true we have one booth which has been liked already by the active user. So we are the active user. So here, this is red and light. So let's try to remove it. Here we go. It's gone. Then we're gonna have the text and the color, which is updated and also the firebase debates. So it goes in sync real time, so we're gonna do the same. So we're gonna like again. So it's gonna add and you're like, Here you go. Unlike, So let's do that with So let's say we wanted, like so this post the 2nd 1 So that's gonna be this one. I'm just gonna close this one off. Let's keep a view on both things. So I'm gonna like this one. New likes path. And then if we collapse, we're going to see I would like and then you see that it's changed to like Then we're gonna click again and it's gonna go away. Perfect. We're gonna find the reflected code which is available for download in order to go through that again and next. What we're going to be doing is actually to allow the active user to follow or unfollow contact, So we're going to see that next 28. Profile Image: And this time I'm gonna show you how you can download one image from the Internet so you can display so the image through the profound image from Facebook. So we're gonna do that quick demo before we can then move on to be able to follow the contact. So let's go to the first few controller. So this is where we have our table view, and we're gonna go to wherever we configure the cells, which is gonna be right here. So where you print the avatar, I'm going to remove that. So instead of having just this option because we're not dealing with a string right here, So this is a euro. We're gonna need to download the avatar from the Internet first, and then we're gonna be able to then return. That's us. An image. The right below this so below the configure cell and right above the mark. Navigation. Let's have some space a year ago. So here I'm gonna add a function which is gonna be download avatar, And that's gonna be first, the image which is gonna be a string, actually, because whatever was saved, too. Five days. So that's Libya string. We're gonna convert it afterward. Then we're gonna have a completion handler. And this one looks least when we're going to return an object off type and his data. And so inside we're gonna have a local variable, which is gonna be the euro string, meaning that we're going to convert this string into a euro. That's gonna be with string. We're gonna take this one, which is image. We're gonna convert that into a hero. And after that, we're gonna have a request. And that's gonna be with Ennis. Ural session shared session and then did a task with Euro. So the Hearst coroner will be this euro strained, okay, noted to run the task on that euro. And then after that, we're gonna have three variables. First that's gonna be data, then the response and the air. Oops, OK, and then we know we're gonna be able to then run out code. So that's gonna be like the usual. So let's confirm Also disc optional first, okay and requests so we can do that right now. So here. This is where you're gonna execute the code and we're gonna have also the completions. We can already resume the requests this is what's gonna allow to then run the tusk. There you go. So first of all, we're gonna check if there is no error. If it's equal to meal, then we can go ahead. And that's gonna be if let data valid. Check if First Benita are valid, that's gonna be called to data right here. You know, data data. So we do that optional binding. Just to check a first. This is OK, then we're gonna be able to use this one, and then we're gonna pass completion, and that's gonna be cool to deter. Valid. And this is what we're gonna be using as a data. That's it for this function. So now let's go to the dysfunction. So which is used to configure the cells? So this is where we're gonna have the options to either download from the Internet or to simply use the assets that you already have for each Alberta. So we're gonna go right here and here. I'm gonna put like either Facebook profound or P and G fell just to make this clear. So we're gonna have a condition, and it's gonna be if let avatar it and that's gonna be users in the expressed the room. And then this is the value for the avatar key. That's our which is up type string. So first we check if we actually have value for these Avatar Key, they were gonna have another conditional And that's gonna be If so, the way it's gonna work is that it's going to allow us to check if there is any mention in that other. So we're gonna check that with that function, which is range of its train, and then inside as an argument, we're gonna check if, if it does include this, Http, which means that this is a particle from the Internets and we're gonna do if not Neil, meaning that we're going to check if this is available. So if yes, if this is true, then we're gonna do the following, and then else we're gonna do something else, which is the regular this if it's else so I'm gonna put this one, so I'm gonna put this one at the top. First of all, that's gonna be the texts of the user. Then we're gonna take care of the image right here. So if we have an http meaning that if the avatar includes this SDP or is she to be s so we could actually put http s Then we're going to run this function, which is self download avatar, and we're gonna take this out at their peak, which then will be converting into a euro, and we're gonna be able to then run a tusk on this one and then return the data. So we're gonna use that rate you So that's gonna be data. And then we're gonna creates this local image data and that's maybe you want image, then data. We're gonna put this data, and then we're gonna be able to use this one to assign, to sell image, view a match. And then we're gonna sign image data right here. So that's gonna be either one. So if the evitar string includes https so we can run, that else is gonna be the usual, which is gonna be to then use the PNG sets. And there is also one last thing that we should be doing. So every time that you run on action, which is to download a sets data from the Internet, so we're gonna need to do that on the main cute. That's gonna be with dispatch. They sink and then that's gonna be dispatched. Getman que this one and then inside this block, this is what we're gonna do, those two lungs. So this is to step. So let's let's recap again. Because I know it can be confusing. So we have these optional binding which can include all of this, and then inside we have anything else we're gonna check first if the Avatar string includes https, which is a particle for the Internet, meaning that we're gonna need to download this image from the Internet with this function. And we must remember to also run this one on the main que And finally, if it's not an image from the Internet, we're gonna simply use the avatar strain to assign to the image clarity of the image you. So let's try that on. Here goes, and now you see the profile image. So this is me, my profound image from Facebook on my knee, so never ready to then add some contacts to are released of followings 29. Follow Contacts I: Hello. So we have done much work so far. And what we're gonna be doing in this part of the tutorial is that we're going to allow the active user to follow one contact. So you were going to be able to read following if this is a contact that you're following, And so the way that we're gonna be doing so that's gonna be in different steps. So in different parts. So first of all, we're gonna be able to greats a user for the active user, meaning that as an active user, I'm gonna be able to have my own path in the fire, These database. So here you see the least of users, so I'm gonna need to have an extra note. So I'm going to be able to see myself visible and add a path for all the contacts that I am following. So that's gonna be the first step. And then after that, we're gonna be adding new path for every contact that I'm following. So we're gonna be starting with that we're going to need a new references for the firebase at this level, So we're gonna start with that first. So right below this one. I'm gonna create var so that's gonna be an optional that's gonna be active user rep and that's gonna be of type fire bays. Here you go. We're also gonna have a new reference for for the full Always. That's gonna be followings, ref. Also five days and that's about it for now. And so we're gonna go to view did load. So in order to initialize those two optional So that's gonna be references five days because we're gonna have actually said Roll. So right below I'm gonna initialize. So this active user ref, it's gonna be in gonna do it that way. So that's gonna be with this function, which is gonna take one euro. So I'm gonna take this one because it's gonna be parts all of the users as well. And that's gonna be yes, that's maybe active user, this one and then we're gonna interrupt, meaning that we're gonna make a reference to this active use of rep. So every time that we want to check, So how many contacts you're following and which contacts and then we're gonna have followings rest and that's gonna be active users reps of the one rights but ball and we're gonna add a child, a child bath, and this one is gonna be followings. And this is where we're gonna be able to include all the contacts that your family in that case, we're gonna be able to then have the past followings inside our user use about. So you can imagine that this is one notes of one path for the active user and then inside we're gonna have a next draw past for the following. So we're going to be doing that first because this is something that we have never done. And in order to create a path for the active user, we're going to that at the stage off the connections. So whenever that you connect to the application. So by using your Facebook account, So this is when we're gonna create the new path for the active user. So let's go back to the Logan view controller. So what we want is to create a buffer for the active users. So we're gonna begin by creating a reference for all the users because we don't have it right here, and that's gonna be just like this one, and then we're gonna need to add the segments users that's gonna be under these South. And then we're gonna go right here. We're gonna create menu function, and that's gonna be at user to buy a bays, and we're gonna have several parameters for these functions. So first of all, so that's gonna be actually very similar to the information that we get from Facebook. So based on that, we're gonna be able to then at this information, Stuever that a base database of contacts. So that's gonna be first the i D. Which is gonna be a type stream, then the name also of type string the email and finally the Avatar and then in bed function . We're going to create a reference for the user, and that's gonna be from this uses ref best, and there's gonna be child by bending path, and we're gonna create these bath with the I d. So that's gonna be the idea from Facebook. So this end that we are using from the active users, you know, and then we're gonna create the new contacts, so that's gonna be let contact. So that's gonna be an Ennis dictionary. So we're gonna have several key value pairs. So that's gonna be first I d Then we can attract the society. Then it's gonna be the name. Could be the name, and they were gonna have also the email than the other car. So we're also gonna have fours, which for now, is gonna be just a generic fake numbers they were gonna have following. That's gonna be something like 120 and also posts it's gonna be something like they're a random here ago. And finally, we're gonna set these user ref in your restaurant that's gonna be with set value, and that's gonna be contact and this is gonna happen. So when we connect with Facebook, So when we creates, I mean, when we both out the gates, this is gonna be created. So we're gonna call this function right here that's going to self user to five days. So first of all for the idea, So that's gonna be user. I d. Then hold the name that's gonna be display name. Well, the email we have the email, and then for the avatar, it's gonna be avatar. Okay, so let's begin with that, because we're gonna need jazz. So these active user in order to at followings, and what I'll do is actually go into the simulator. So I'm gonna select this one, make sure that I have the simulator and I'm going to reset because because I'm gonna need you. I will need to reconnect with Facebook in order to allow so this process to happens to go through. So first of all, connecting with Facebook and then create the new accounts than your path in five bees. So we're gonna start with that, and here you go. So you can see that now, Here you go. So I have my name as a contact. So obviously you don't want to see yourself in the midst of contact. So that's something which is very easy to do by using controlled. Also, by checking a first, the active users connected and then do not so ignoring these contacts. So that's adding it in that place, Bert, we're gonna deal with that later. And so we're gonna want to see the profile image. So we're gonna be doing that as well. And most important, you can see that now we have these a path which corresponds to the active user. And here we're gonna find so old information. So the Avatar So you see that this is a euro. So we're gonna need to download that image from the Internet in order to display of a profound image from these books. We're gonna be doing that and then the rest of the information and for the next part later . What we want is to be able to add full always. So we're gonna have something very similar to least post So it doesn't conflict with one passed like this. We're gonna have, like, least followings something like that. But for now, let's just deal with being able to display the profound image, because we're going to need that. So later we're gonna create our own profound, and we're gonna want to display our avatar. So let's do that next 30. Follow Contacts II: it's now have a path for the active user. So that's gonna allow us to then other path four the followings. So instead of calling this one just following, we're gonna call this one following. So we're just gonna check that we've got that right in our code. So we're gonna go back to the profile of you controller and here we're going to see that we have this path which is following. So that's what. So we're gonna go create. So here you see that we have these action which is connected to So let's go back to the main story board. So here we have these bottom. If we click right, we're going to see that we have this action, which is full Oh, contact action. So that's good. And based on that action, we're gonna run. We're going to run one function which is gonna allow to then at the contact, which is gonna allow to add the contacts with the profile which is visited as the following a concept which is followed, who is followed. So we're gonna go create that so right below here and this function is gonna be fun, can follow contact and we're gonna have civil perimeter. So first of all, we're gonna have a bullion, and that's gonna be this one is following. We're gonna check first. If this contact is already followed and run the action accordingly, then we're gonna have also a completion handler. So for this one, what we're gonna be doing is actually returning a reference as the five days and I'm gonna be explaining that later. Not right now. So you gonna understand why we're using the following, right? You're going to see that next leader. So for now, we're just gonna run the actions to follow a contact. So we're going to start by creating a new path, which is gonna be corresponding to the contact that we follow, and that's gonna be let following reps. And this one is gonna be attached as a child path to followings and then child by defending path. So we're gonna add, actually the name off the contact police followed, and that's gonna be with self contacts. And that is gonna be let me check if this is the way that we had named it. So this is a dictionary. So that is a user. My bad. Let's go back. So it's not contact. This is user. So we want to refer to the page all of the user. That's we are viewing and then gets the idea of that user. Then we're gonna also unwrapped because this is an option, old. Here you go. So here, you see that we are referring to self followings. Ref, we initialize this one in beauty load. So this is the way it looks. So first active uses ref, and then we're adding this path followings, ref. So this is where we're touch. So first we're gonna have a path for the followings, and then we're gonna attach one unique path for the contact that we follow. So this is what we're doing here. And then I'm gonna create a dictionary, so that's gonna be let following. We're gonna pass all the details, all of information off the contacts. Who is followed? That's gonna be a long dictionaries of. First of all, we're gonna get the I d. Uh, we're gonna use this so we don't have to write the whole thing, So that's gonna be first the i d. Then we're gonna get We're gonna have a value key value appear for the name, and here it's gonna be the name. Next that's gonna be the email I'm gonna piece as well and replace the key e mail. But then we're going to get the information of the Avatar. You're as well I'm gonna paste and then replaced the key with Avatar. Then we will also get the information off the number of followers and this one. So the corresponding key is followers. Then we had next Halloween, and it is the value that corresponds to the keep following Gorgon extract quotes here, and then the last one will be for the number of posts for that particular contacts for that particular contacts, and that's gonna be puts to public it. So basically, what we do is just messing Soviet, that same information. So this is without the ness. So the same information that corresponds to that user. So this is what we're doing basically here, and what's left to do is to then set the value for these following ref. So this one no s remember, no s here, okay? And that's gonna be set value. And then we could have passed this following. So this dictionary as a valued for these new reference new Beth, and we're gonna run a release of the completion, so that's gonna be full later. Blisters do it. And this one is gonna be following rough that we're gonna pass. That's because we're gonna have another function, and I'm gonna explain suit what it is for then, of course. So we're going to go back to these action that we have habits up right here and from here, we're gonna call this function, which is to follow contacts, and we're gonna pass. He's followed. I think it was useful load. No, we haven't created this one yet, so let me create it. So we should have so the same way that we did for liking or liking. We're gonna set this one too false for starters because we know that this is gonna be false at the beginning. So we're gonna keep track off whether or not one contact is already followed by the active user. And this is this global variable that I'm gonna use to pass as a parent to these function. So that would be full of contacts, and I'm gonna pass. This one is followed. And then the completion So we're gonna use that later plan Now is just gonna be just so basically. Actually, we should actually use it. So I'm gonna print something. Let's say like contact and that's gonna be user you are now. So let's write something like that. You are on the following. Let's just keep this simple. Your not following whoever. Okay, so we're gonna be able to read that So every time, So that's you click on the follow button a year ago. Let's see where yes, you need to do to yourself. So when you're inside of look so this part So that is important because for another step, another part we're gonna be checking. Also, if first Contact is already followed by the active user in order to first of all, change the interface to change the title of the button. So to write following instead of just follow and then keep track off whether or not this is followed. So that's gonna be either triples and then run the actions accordingly, which is gonna be either to follow or unfollow. So first of all, let's try with just full away. Okay, so we're gonna go to town and then we're going to choose to follow Tom. And importantly, I haven't error, so that could be like with the information that I'm gonna do clean. So that's gonna be with command shift and K, And that could be for the information that we're not retrieving properly, so that's really related to this one. So, Post, actually, it's within this. So my guess is that that could be that. So we're gonna check for the rest of following It. Should be good, then we have followers, Avatar, So that should be fine for the rest of this. Try that again. Here you go. So that's why you need to be very careful with this belly. So let's try that again. So we're gonna go to Tom and then follow Tom. So now you're following Tom. Let's try another one. Mary, I'm gonna feel Mary. And now let's go check out info bees. If we actually have a path which is just for those contests, and now it would check by a base so you can see that now we have this extra path that corresponds to the following. So if we collapse this one we're gonna expended. So we're going to see that. Now we have a note, a path for every user that we are now following. So that's gonna be come first of all, and then also Mary. So that works. All fine. So now we're gonna be also seeing so how we can toggle between following and follow. So we're going to see that in the next video. 31. Follow Contacts - Part III: So now we are following Tom and Mary. So how are we gonna be doing if we want to unfollow this contact? So first of all, we're gonna need to check. So how many contacts with fellow in order to check if well below those ones. So based on that, we're gonna be able to then updating to face. So instead of reading the button follow, you're going to read full away, which is gonna give you the option to than Unfollow. So we're gonna be doing that with a query to fire base. So we're gonna put this one so right below query five. These right here. So we're going to start with that. We're gonna do a query, and based on that, we're gonna be able to then. But that's gonna be function. We're gonna be able to then of date, the interface and also allowed to run actions based on that. So that's gonna be query following, and we're gonna have a completion, and this one is gonna be the bullion. Okay, so what are we going to do? So, first of all, we're gonna run a query on the active user path. So this one so we are the active users, so that can be any other user. So what we want to do is checking if we have any following for the active user generally, because we want to check if any other. That's for any profile pages that you visit. We want to check if you follow these reserves. So we have user Tom and use a merry And based on that, we're gonna be well, as I said so updating the interface and also allowed to run actions accordingly. So we're gonna be doing that from active use arrest. So that's gonna be observed event type. And that's gonna be this one with the cancelled look before the event type, so that's gonna be value. So here, we're gonna have a variable for the snapshots, also for the year. Let's do a command and control I to invent properly to keep things clean here ago. So now we're going to recuperate. So the item, which is the value from higher base So this is the snapshots as of data snapshot. So from that we're gonna get the dictionary that corresponds to First of all, that's gonna be item value as and this dictionary So if that does exist, So the reason that we do that is because we need to check a first. We actually have a dictionary for that parts. So a path for that part because that maybe Neil and we're gonna be doing the same also for the full wings, because it may not exist. So we're gonna do if let followings. And it's gonna be dicked from this one. So for no, that's gonna be inside. So there's gonna be for the Kik followings with a ness, so we must not mistakes, so we must not mistakes. Otherwise we get the crush, and that's gonna be also in in his dictionary and then based on that. So if this one is true, if we actually have a path for the followings meaning that we have contacts that we follow , let me check because of God's my bad. So this is an optional biting here, So that's gonna be if, let's that was a syntax error. Okay, let's continue So and after that, if we actually have following, so we're gonna do a loop, so that's gonna be four following in for the wings. So first of all, we gotta get from each user that we follow, We're gonna get the value. So that's gonna beat following value as also in his dictionary. Because you've seen that we were saving each contact as in the next dictionary with all the information, because we're gonna be using also the information off that user later. So when we're gonna want to build a page just for the favorites, we're gonna want to display all the posts for every contact that we follow. So that's why we need to get all the information on every contact to his followed. Then we're gonna get the user i d. And this is the part that we need in that demo. So it's gonna be for the key value, and that's gonna be as a string. And once we get that user, I d. We're gonna make a comparison. So that's gonna be user I d. If it's a cool too. Then we have this user who is a global variable user. I d as string and here So what we do is checking. So So the contact we saved as a contact followed the user i d. And then the one that's were visiting so the page that were visiting. So if the much we know that this contact is followed and then based on that's we're gonna update these global variable, which is a bullion is followed, we're gonna set it to true. So let's recap a bit so we can understand better. So remember that we have this liberal variable that we're gonna be using introduced to truck if the contact is followed. And we have this use a dictionary that we use to pass the information from the contact least to the profile page. And we can get so the user i d from that and then make a comparison with the user I d. That we get from our query. And if it's true, then we can set it to truth. And then based on that, we're going to update the interface. So we're gonna do that pain view did load right here, and I'm gonna put like, uh, following button started sub dates and that's gonna be if so, he's followed. So if it's true, then that's gonna be self off following. So I think it's full of bottom. I'm not a member of the way that we named it So we haven't outlet for this button as well. Let me check. Yes, Follow buttons. So this one, we're gonna update the title of this one. So that is the green button, you know? So we have these outlets, we're gonna update the title of this water, and that's gonna be so. If it's true, we're gonna want to read following so fall away for the state normal. And if it's false, else we want to read follow to give you the options to then follow these contacts. And also, we must not forget one important step, which is to call this function. So the same way that we're calling this query firebase. So we're going to be doing the same for query following, because we're going to need to first update basic allowable variable, which is is followed. So this one interview to then update the interface based on the data saved to the devotees so we can be in sync with the database and the information of the application. So let's run that. We're gonna try this out. So here you go. So let's go check out times profile because we know that we're following Tom. Here goes And now we can see following and also married. Perfect. And if we check another profile so we know that we're not following them. So let's photo Martine Perfect some final votes for this video. So we're gonna go back to where, recreate this function, which is query following. So you must call this function, which is you must call the completion added in a neutral house on this block of code to be executed as a result off the query following. So that's something that you must do and also you many around into some issues. So if you connect once again with Facebook, so that's gonna create again this note. So we're gonna be dealing with that so some of the time. So just so that's just for you to know that you may run into issues because that's gonna wipe out. So that's going to re initialize a new path for the user. So every time that you connect with Facebook, but also in higher base, So now we have our least off followings is not gonna include this path. So there's just one piece of information that I'm giving your ego that we can certainly deal with later. We're going to need to do some control flow in order to allow to recreate a path Onley if it doesn't exist if it already exists, so we don't need to recreate it. So that sits in the next video. We're going to see how we can then follow or unfollow a contact based on whether or not So we're gonna be using again this square following. So see you next time. 32. Unfollow Contacts: so nothing want to allow the active user too follow or unfollow. So we want to provide with the with bob options. So you know that we have this button following now for Tom Mary and also Martin now, But now who we're following now. So we're gonna go back to the action. So here, you see that we're passing this is followed, which is gonna be either truffles. And based on that, we're gonna be able to run some actions according, so we're gonna be using some control flow, and that's inside that function. So originally, we had only set the options do set to the value meaning that we were adding following. So first, So we have this parameter, which is the bull looking check if is following. So if it's true, so let me put else as well, so that's gonna be else. So if it's false, but then it's gonna be set value. And if it's false, we're going to simply remove the value year ago, and we're gonna also update the interface. So remember that we have this button, which is self follow button. So we're gonna set the title as well. And that's gonna be if we remove the value, so that's gonna be back to follow and then normal. And then if this is the contact that we don't, that's we've decided to follow. So we're gonna be able to then read following. So let's go backwards. So So we're gonna be proceeding the same way. So we're going to create this reference of these bath and also these dictionary or the contacts, information and Onley. If it's true, we're going to remove the value because it's existing because that means that I would have been through this query following first, you know, to check if one contact is already followed and then it's only freaks boast, Then we're going to set the value. Let's go back to the action just to make sure that everything is all set properly. Okay? And instead of printing anything here, I'm gonna go back to here just as a check over. We're gonna be checking that with by a base. So here, we're gonna print. So no, it's gonna be here. We're gonna print urine now, following whoever and now you are in our you're no longer full away. Okay, so let's try that. Okay, so Let's go check out sums profound because we're following Tom, and we're gonna click on the same bottom, so it doesn't seem to be so. You're no longer following time, so we're gonna check later for the interface. But we're gonna chicken out in the fire bees for the interface. We can deal with that later. So here ago, here for the wings. Okay, so dumb is gone. So now we only have the user one, which is for Mary and then for Martine. So we're gonna keep this one open, and we're gonna go to marry and then click on its That seems to be working in sync between the application and a database of pretty good. So we're gonna need you also updates the interface, So that's gonna be the next step. Okay, so there seems to be a bug with interface. That's only because this global variable that's we're gonna need to obviously of date to them. False. So that's gonna help, too. Get everything in sync to get the logic rights, and that's gonna be true if now this is followed. So let's try that, because next time that we called its function again, so if it's true, it's gonna become false. And if it was, well, it's gonna gonna become true. So let's try now with Danielle. So we're not following Daniel yet, So we're gonna try by clicking. So now we're following her and then and follow So it's gonna go back to follow. So just to check that this is also working probably in sync with via base. So I'm gonna get this one open. So for now, we're just following. We use a number two. Who is Martine? Let's get back to side by side. So I'm gonna click Follow. So here you go. So now we have the user three for Daniel and let's click following again to unfollow and then it's removed. Perfect. So that's it for this part For the follow and unfollow we're gonna move on to, we're going to go to the main story board. I'm gonna show you the next step. So now we have So here. This is for the first path when you click on this tab on the top bar controller. So now we're going to be taking care off the second pube. So we're gonna have a profile page for the active user and we're gonna be able to have so just like this example, we're gonna be able to have our avatar and also the number of followers following in post and then the collection of pictures that we're going to be selecting from the image libraries. So we're gonna be using a your image speaker controller in order to be able to select pictures from the library. So we're gonna be seeing that starting in the next video. 33. Current User Profile: So now we're gonna move on to the current user profile. So we're gonna be looking at this second you controller. So we have the spell, which is the second you controller. So at first we're going to be looking at the interface, so that's gonna be very similar to this interface. So we're gonna have and I dont perform, which is gonna be actually the Facebook profile. And then we're going to be able to read the number of posts, followers and following. And then we're gonna have as well a collection of you. We're gonna be able to display pictures that we have imported from the Image Gallery. So we're gonna start with first the interface of this bar. So that's gonna be the current user profile page view that we're gonna be able to access by clicking on the second That verboten. So what we want is to have first of all, are you our image, and then we're gonna have so labels as well here, So we're gonna have three total. So and we're gonna have a stab you in order to include those three labels. So I'm gonna decor stab you. So that's gonna be this one overs until it stuck. View you go. And you see that estimates I include one. It's gonna fit to the size off the elements which is contained. And then I'm gonna add the 2nd 1 Oh, year ago. Event 3rd 1 a year ago, I'm gonna open this panel in order to be able to select the Stack view, which is the burn view off those three now and then make sure to drag like so by following the guys and we're gonna be adding constraints. So we're gonna start with the image view gonna have constraints. So first of all, we're gonna confirm the with that's gonna be be cool, like 100 Actually, we're going to change the value 200 and then we're going to confirm Make sure that's the value. Tend to change as soon as you check over and check something. So I'm just gonna go back 200 to have, like, a square shape. Then I'm gonna come from the margin that creepy 18 pixels from the top and 24 ability. And here again, it changed. So make sure that you keep an eye on it in order to make sure that you have a similar value for the width and height. You know? Did you have a square shape? So that should be good. We have four constraints. So we're gonna confirm. Here you go. And then we're gonna click update frames. Then we're gonna take care of this debut. So just because I don't remember what we had done for this one, I'm going to select this one and check what was the with? So I selected this one from the profile View. Control is seen, and I'm gonna go to the size inspector just to check the with. So that was 1 80 Be cool. And for the labels. So that was 60 as a result. Okay, so we're going to be doing the same. So I'm gonna close this one back off and go back to my second scene. So So they could stack view here ago, and then we're gonna add constraints. So let's begin with the margins of the 50 18 pixels for this up and then 20 for the training for the whistle, that could be 1 18 And for the height, I think it was 43. 43 is gonna be fine. next, we're gonna update also the with of the labels. So I'm gonna go select in you go for We need to confirm that. And then for the with its gonna be 60 and for the height 43 same as the height off the stab you. Then let's select the second label. We're going to confirm the with and the heights. No need to confirm the leading and training or Trini. And then the last one 64 the with and 43 for their homes. Okay, that should be fine, So I'm gonna make sure to select all of them. So the three labels? No, we're gonna format the text. I think we had Children. Something like 13 point for the fun size. And then we're gonna make its light or thin, and then we're gonna lie. That's gonna be at the center for the alignments. There you go. Well, that should be fine. So we're gonna check out very quickly in the simulator that seem similar. OK, so we may readjust. So depend dependably, That depends on the design goals. So let's see how this looks in the simulator. So let's go to the second tab and here ago. So we're gonna add a placeholder image for the Avatar. And also, we're gonna create outlets on. We're gonna do a query for the active user in order to be able to display the information for the active user. So let's go back to the story board. First of all, we're gonna add a placeholder. So these die. I'm a use of a thaw home. So this is for male, although because I'm a female, so I'm gonna choose this one. But you have the options to choose either. So finale is just a place holder. So we're gonna be replacing so off course with the perfect image from Facebook. We're gonna stick also the labels. It's like I move this one. Okay, so and we're gonna make sure to select Xaver for the lines just to make sure that we can have multiple lines. And now we're gonna create outlets for these new elements. So that would select the assistant editor. So we're gonna make sure to get the second you control on the right by clicking option and then subjects here ago. So, first of all, the image you now that's gonna be propel image of you. Then let's check out how this way that we had set this up. So I'm gonna go to the first view controller very quickly. But that wasn't the first. My back, it's was the profile. So Post is the first, and then we have pullovers and then following this. Do that. Let's go back to second, you controller. So first we had the post, so that is posts level, then next, we had the followers label and finally the following label. Okay, gonna put this one back to the top. We're going to put them together right above the view. Did load function Lexus? So this is what you should have. So you should have an outlet for the profile image, you and then another one for the post post label, then for the full of words and the following legal. Okay. Next. We wanted to a query in order to be able to get the information's from the current user introduced to display them. So on this interface. So by using this this outlets. So how we're gonna be doing that. So obviously we're gonna have We're gonna need a reference to the connections to the five days that obeys. So that's gonna be first gonna import this one and instead of having this one, because we're not going to be using. So after that, the interferes builders are for the moment. So I'm just gonna close this one instead of have the 1st 3 controller on this side. I'm gonna close that office. Well, so we're not gonna using the object library and just like, but the first you controller, we're gonna have a reference to I would database and also for the users. And also, we're gonna need a reference for that's gonna be the active user ref, and we're going to then configure this one. And how are we gonna be President? So we're gonna need to. So at the time that your log in you can get the authentication. So from Facebook. So we're gonna need to do that for this part because we're not gonna be using any prepare for sick working order to pass the active user reference so information. So instead, what we're gonna do east to manager the user who is active, who is connected. So we have that information. So when we go to the local view controller, so that's not gonna be connect with Facebook. That's gonna be here at this level. So as soon as you start the application, we run this function which allows to check which user he is connected if the user is connected. So we're gonna copy that and go back to the view. Did load off the second view controller. Then I'm gonna piece this. So let me just make this one larger. We're gonna stay here for now, and I'm gonna need also reference to the active users. Let me create. That's let's go back very quickly. Active user. That's gonna be a string. And that's gonna be a variable of time stream here ago, and I'm not gonna be using that. So that was just for the logging view controller. There you go. So this is what did you do? So here we're going to check by doing a reference. So by calling this function on ref checking if the user is connected, so we're gonna be able to read so off Theda successfully authenticated. So instead, we just gonna print something which is more user friendly, and that is the disciplining a year ago and we're gonna be able to read so like myself. So this is centered a dusky. So that is my display name on Facebook. We're gonna be able to read so that Sandusky is successfully authenticated. And as a result of that, we're gonna be able to then assign active user so we're gonna be using That's a four and other parts. But for now, we're gonna be more importantly, we're gonna be able to then creates configure these active use arrest, so because we're gonna need to have several sections here, so I'm just gonna put some commence, so that's going to fire bays references. And this one is going to be self active users, ref active user, ref. And that's gonna be cool, too. Self Users rep. And then that's gonna be child by a pending path. And then we're gonna make this one equal to self active user a year ago. So that's gonna be the first step. And now that we have, that's the second step will be to then do a query by using this reference. So we're gonna do that right here, leaving some space. So that's gonna be first funk query current user. We're gonna have completion handler for this one. And because we're gonna be returning one inflammations, which is gonna be used to display the the image, the profound image of the users who were gonna be actually using this one for the image profound. That's gonna be image string, off type string. And we're gonna be doing several things inside this function. So that's gonna be used to get the information of the current user bills of the image so that start with having a local variable, which is gonna be image that's gonna be an optional. And then we're going to start with aquarium that's gonna be owned the active user rift. And that's gonna be child. Sorry. My bet is gonna be observed Events type with cancel block so the every type is gonna be a value. Then we're going to return value off type F Dada snapshot. So that's gonna be snapshot for these variable. We're also gonna have the Kinzel book That's gonna be error, okay? And then insight we're going to get so we gotta sign. So the result off snapshots, which is up type F D snapshots, data, snapshots, and that's gonna be if let's so we're gonna use an optional binding to Jackie. First, we actually, we actually have data for the active user. That's maybe as in this dictionary, let's go back. And then we're going to get the information for the Avatar. That's gonna be from this dictionary, and that's gonna be the value for the key of its are, and that's gonna be as a string. And we're gonna make this one equal to so the image. So this local image optional. So that's in the vehicle to the Avatar. And then we're gonna redress of this in hope in the completion handler. So that's gonna be image. And while we are here, we gonna wrap also while we are so in this query for the active user, we're gonna need you also get the entire information support these active user, which is in this dictionary. So I'm gonna be creating a new variable which is gonna give type and his dictionary, and that's gonna be active user info up type and his dictionary that made sure you again the fire basing film. So we have all these details. We want to get all of that, you know? So the avatar of the email, the followers following an order to display its on our interface. So this is what we want to collect. And then so these variable global variable we're going to assign to it this dictionary I'm gonna use self because we're inside of look of code and then we're gonna go back to you did load. And here inside. So this is only if we're successfully without the gated, we're gonna be able to run all of that. So we're gonna put I'm gonna add some conventions to give things clear, so that's gonna be getting current user information. There you go. And that's gonna be self query current user, and we're gonna re journal so much strain. So we know that as a result off running this query, we're gonna be able to then assign. So these data, this information's to this active user in ho dictionary. So we're gonna use that in order to updates those labels right here, which is used to update the interface with the proper current info. And that's gonna be we're gonna right good on both posts. Listen to be self active user and also because this is a dictionary. So we're going to refer to the key, and we're going to confirm again because this is an optional. And then that's gonna be than above post. I'm using the back slash and and in order to do you return to go to the next line and off posts and we're gonna do the same for the label for the followers. That's gonna be this same process. Instead, Here, we're gonna have the value for the followers, and that's gonna be followers. Been self following, leave all texts, and that's gonna be the value for Nikki following. And that's gonna be full. Just gonna check if I've got the rights spilling for this one. You are not supposed to be post within us, so now we're going to be able to run that on and check out. So if we've got this pearly displayed, I also want important information. So you got to make sure that you interrupt this one in order to make sure to not return an optional, so that needs to be unwrapped. So that's room. That's okay. So let's go to the second tub. I'm here. Go. So we're just gonna teach you updates, will readjust. Besides the with of each label, but we're gonna be doing that next at the same time that we're gonna be downloading. So the profile image, but good job so far. 34. Profile Image: So now for this part, we want to be able to display the profile image off the user. So that's gonna be coming from Facebook. You see that we have these euro. So it just like we did for So we have this in the first few controllers. So where we were displaying So all the images of the Avatar's, including the profound image from Facebook off the current user. So we're gonna be getting so the same. So that's gonna be the same process. I'm gonna get dysfunction in order to be able to, they'll note from the Internet. So I'm gonna take this function and then go to the second view controller and I'm gonna go right here. So I'm gonna put a commence. That's maybe downloading profound image from Facebook a year ago. And then once we get that, so that's good. We're almost all set. We're gonna go back to the view, did load, and we're gonna go inside these query current user. And the reason is because we're going to make sure that we've made the query first from the fire base in order to get the proper information and then from that, be able to down with the images, meaning that we're going to get actually this image string that corresponds to be image euro for the profile image. And then we're gonna use that as an information. So we're not gonna be doing that correctly. It's gonna be this one first. And after that, we're gonna run this function. So that's gonna be self don't node avatar. And then we're gonna pass in age string as an argument. Then we're going to return the data, so that's gonna be the image data. And then we're gonna be able to then assign this to profound image view. And and that's gonna be the Bernie image we're gonna create in a minute show with this function, which is gonna be data. So that's the one right here. And then we're gonna pass data perfects, so we're gonna give you the try. So remember that in the produced video, So when it'd also to adjust the with of the labels because it was too squished, so I couldn't see, like, the entire thing. So we're gonna increase the width of this one. It's maybe too small. I'm gonna make sure to select the stock view, then go back to the size, inspector. You were going to be able to update the with it Looks like we may not have with, though. I'm gonna go to the constraints. Maybe the problem, though. So I'm gonna beat that. So that would be 100 80 then with and then constraints we weren't or I'm gonna need to update it from here a year ago. Let's go back. Stuck view. We're gonna need to update also the with of its label. So that was 60 for the full of words. So that was 60 and finally 60 as well. And that seems to be fine. Maybe too close to the Avatar. But we're going to see how this looks in in the simulator. I don't know if I should puts. I'll check from the provide you control is what was the fun size? It's being attributes, Inspector. And we had actually used 12 and see, So we're gonna do the same. That's going to be better to have something similar. So that 30 12 Okay, that should be fine now. So we're gonna be able to see the profile image from Facebook and also the number of followers posed and following. Okay, so let's go to the second top. So we got that right. Although this taking so maybe sometimes to update a year ago. So now it's you. So that's gonna take sometimes to update and then display the image. So the profound image from phrasebook so something that we're gonna need to do, we're gonna go back to our code and we're gonna make this one also round. So we're gonna add some readers. Let's go back to the code. So that's gonna be in sick and view controller, What was needed to run the function on the main que something that I forgot also from the first parts. Always keep that in mind. So that is this function which is dispatch a sink and then dispatch Getman Cube and then we're gonna room that's inside, and I'm gonna be doing the same. So that was in the first. You control out just to keep things right and consistent. Let's go back to the second view. I want you also allow this image to be rounded simple. We're gonna do that with self profound image view, and then we're gonna do that's by accessing the layer and and that's gonna be Corner Radius . And we're gonna make this one equal to zero. So that takes afloat as a value. And then it's gonna be profile image you then clips to bound to bounce. And that's gonna be true. Let's do that again. So I've got to the second time and here goes so you could see right away that we had So the image for fly that showed right away So for the updates And now we have a rounded image and also we can read some family, the number of post followers and following. So for the other parts, what we're gonna be doing is having a collection of you. We're gonna add that in the next video and then later on, so following that's we're gonna be able to then create a gallery, and we'll do that with you. I image bigger 35. Current User Posts - CollectionView: Okay, so now we're gonna continue with the interface. So what we're gonna be doing is adding the collection, do you? Right here. And that's gonna be very simple. So we're gonna go search for collection of you right here. So that's gonna be the second option. And I'm gonna drag this one over right here, like so we're gonna keep it selected, and then we're gonna add constraints. That's maybe 17 pixels from the top than for left. So that's gonna be zero for rights for the same. So we don't want and marching and for the bottom. So that's gonna be zero as well. Make sure that we have zero, and then we're gonna add forecast rings. Then we're gonna confirm with update frames and also in order to then be able to use this collection view. So we're gonna need you, then create an outlet. So we're gonna be doing that. So I'm gonna be having the assistant editor. So here I have my second view controller. I'm gonna create this one. So writes Bill right here. And I'm gonna call this one collection of you. Simple. Is that okay? So let's go back to the second view control. So we're gonna go back to the standard editor. We're gonna select speaking view controller. We're gonna need now to then use the collection. Do you did a source methods? In order to indicate the display for this collection of you, we're gonna need to also later create a custom cell, just like we did for the first. The profile view controller that's gonna be the critical is you, like, collection of you did a source, and we're gonna go to there. So I'm gonna quicken command and then select because we're gonna need So the two required methods, so those ones are mandatory, so I'm gonna could be from here. So when you're inside, suggest compete that you first gonna copy and then go back to second you controller and we're gonna go We're gonna go right here. So writes on top of query current users. I'm just gonna keep gonna put Mark. That's gonna be Mark, and then here I'm gonna put that this is everything related to five days. And here I'm gonna write Mark. So that's gonna be collection view data source, and it's copy that we're just gonna remove. So what's not required So the 1st 1 it's gotta return and introduce A That is for the number of items in section. Then I'm going to remove that as well. I don't need the comment either. And the 2nd 1 So that is used to configure the cell, and this one is going to return a cell. So we're going to do that right now. So first of all, here through, that's gonna be 10. And then for this one, we're gonna create one cell, and that's gonna be collection view Dick, you reusable cell with reuse identifier. So that's the one dysfunction for the identified her. So we're gonna keep things simple. So that's gonna be cell and then index path here, and then we're going to return the cell. So we're gonna take care of configuring later. Although we could add a background call, it just you see that this is working properly color, and then it's gonna be you eye color, black color. And then we're gonna go to the view did know because we're gonna need to then assigned also and here we're gonna put everything which is related to the collection view. You're gonna put fire base. Okay, collection of you. So we must also assigns itself, which is so this view controller as a data source to allow to control. So how to display these collection views? So we assigned self today a source. So you must do that. And we're gonna also give a background core, and that's gonna be what's before we check that all works fine. So I'm gonna go to the main story board and then change the size of the cell and also provides very importance the identifier in order to allow to create to dick you. So creed generates new cells every time, each time from that product I sell. So that's important. Otherwise, it's gonna crush, so always specify this. Okay, so let's open this panel. I'm gonna make sure to have the collection you selected and then go to size Inspector. And here we're gonna date the size of the with and heights. Okay, so let's make a demo. We should be able to see a collection to you with about 10 cells white, them cells. Okay, so let's go to the second time And here ago. So now you see that we have So the collection do which is probably set up. So the next step will be to then creates a new view controller. And that's gonna be for the U. S. Image for your controller. So that's gonna be another one that we're gonna be able to trigger with one button right here. We're gonna be doing that next. 36. CameraController: So now we're gonna create a new view controller in order to add to allow. So the current user, too, creates its own, his own or her own collections. You go your images, and that's going to be from the image library. So I'm gonna go to the object library and search for a few controlled er I'm gonna add and you view controller. So right here next to this one, okay. And this one is gonna be triggered. So by clicking on one button right here. So first of all, we're gonna create menus. Segway. From here on, it's one is gonna be a model, and we're just gonna put, like, ad posts. So that's gonna be the item to fire for these Segway. And we're gonna need to have here one button, which is gonna be like a camera. I come to indicate that you can take a picture. So we're gonna add this one, sir, right here to the stub on the right side of these Are we're gonna go to second you controller, and I'm gonna put this warm. Yeah, Let's just keep this fire base at the bottom here. I'm gonna put number, and we're gonna create these icons. So Barberton items programmatically and that's gonna be camera button. That's gonna be your bar. But an item, then bourbon and system item, and we're gonna indicates so the systems of the style of this button, your Barbara consistent item, it's gonna be this one. And then we're going to specify that this is gonna be a camera and we're gonna have in action as well. And this one is going to be I'm gonna name this one tick peak so it doesn't exist yet. I'm gonna create it. And finally, we're gonna need to add this button to the number. And because originally so this number is controlled by the Taber, meaning that we have a number which is contained within the top bar controllers. We're gonna need to first refer to the tub our controller, like so and then and then the navigation item, like so and then the right Barberton. So I didn't select the right ones from my best. So that's gonna be navigation item, like so here ago. So we're good, and then we're going to refer to the right bar, but an item and that's gonna be this one, which is camera button here ago. So now we're gonna be able to see that we have a camera button. So let's check this out. So we're just gonna need to then create this function, which is gonna be tech pick. And one thing that we missed it is also the target, which is something. So next I'm gonna create this function, which is technique. So I'm gonna add this one. So right here that's gonna be function. Tick pick. I think this is the way that I named it. May check. It must be the right spending. Otherwise, it's gonna say unrecognized function. And so what we want is, so we're just gonna print check pictures for now, taking pictures. So that's drive that. So we should be able to see these little icon. And as soon as we click on its, we're going to be able to print this message so here ago. So let's go to the second top and you're going to see that you're gonna be able to click on this little I come in order to trigger service message that's gonna be printed. So what we want. So the goal off this function is obviously to go to another view. We're gonna have the options to then import images to display in this collection of you. So let's go back to the main story board so he would have this Segway. So this is a type model. So we're gonna take this identify here, so we're gonna just that in order to trigger the Segway problematically. So we're going to be doing that here so that in itself, the forum signalling we've item to fire and that's gonna be at post and then that's gonna be self and we're gonna go back to the main story board right now, So we're gonna need to create a new class file also for these view controller. First of all, we're gonna create an interface, so that's gonna be with and navigations borrow of constraints, make sure that we selected. So this may be zero for each of this size for each of these sides. And then for the height, it's gonna be 60 dead. We're gonna concern also, we're gonna have Barberton items on each side. So the 1st 1 on the left that's gonna be pro cancel and another one here on the rights for safe So let's go. I had one here, so that's gonna be safe for the rights and then cancel for that a year ago and here I'm gonna put at the post. So I'm gonna go here swift, aground, and I'm gonna go ahead and create a new fall. So that's gonna be a new class fall. So that's gonna be coca touch glass, and this one is gonna be a subclass off you. I view controller, and I'm gonna call this one camera view controller here ago. Let's go back to the story board and make sure that we assigned this one. So by going to Identity Inspector and that's gonna be camera view controller Here you go. And then we're gonna then open this one That's gonna be side by side. So going to the SS dictator, and then I'm going to like camera view controller. So while we here, So I'm just gonna put this one together here, so we're starting to have a lot. So we're going to create a new groups also for the controllers very soon, the view controllers. So here we're gonna create outlets for these buttons, so that's gonna be very simple for now, So we're just gonna have the possibility to go backwards. So this one, it's gonna be an action, and that's gonna be canceled. And this one is going to be saved action, And that's gonna be safe a year ago. So let's go back to just standard Editor. I'm going to camera view controller, and what I'm going to be doing is only allowed to dismiss the view controller with dysfunction. And that's gonna be this true for the first argument of India. And same for save. Although we're gonna have, of course, additional actions for the same. So as a result off clicking on save your going to be able to then confirmed So create one post and save it to your profile. So that's gonna be next. Let's from that to see that this is working properly a year ago, Let's go to the second top. So I'm gonna click on the camera icon here goes, and now I have my camera view controller. Then I'm gonna click, Cancel to go backwards. Perfect. So now what? I want Ace to add one big picture here, and that's gonna be used as a placeholder. And when you're quick on this picture, you're gonna be able to trigger the image bigger controller in order to access your image. Libraries of the image library that you have on your phone. So that would be like, I photos. So this is what you're gonna be able to access. So all the pictures that you take with your iPhone selfies, any pictures in your albums, you're gonna be able to save them to your profile. 37. UIImagePickerController: So now let's continue with the Kemira View controllers. So we're gonna go to the main story board in or did you have one? You are image you here that's gonna be used as a placeholder to display the image that you imported on that you you are ready to post to your profile. That's gonna be you. I image view. We're gonna have constraints as well. Of course it's gonna be, You know, we're gonna put a constraint for the top for the with. Would you like so? And then we're gonna also align horizontally in container, centred you. Then we're gonna create an outlet. Gonna be right. You. So that's gonna be important image, have you? A year ago. That's good for the main story. So let's go back to camera view controller. Then we're going to confirm to to protocol which is gonna allow us to navigate to another view controller, which is gonna be the white image speaker. Control of delegates, the yuan image picker controller. And that's gonna be possible with the EU image Speaker, control of delegates. So we're gonna need to conform to the two. So that's gonna be first. You in aviation so that's gonna be first. Ewing navigations control of delegates year ago and next We're gonna also confirm to you I image speaker controller delegates, and then we're gonna go get one function from this dedicate which is gonna allow us to navigates to the to our image library. And the one that we need that we're looking for is this one. And this is your eye image. So that is image picker Controller did finish picking media with info. So we're gonna take that. So you see that this is an optional, so I'm gonna make sure to copy it, and then I'm gonna go back to my camera view controller and then I'm going to remove this one and based that right here. So we're gonna use this function in order to access the photo library so in your phone and then import the image that we selected. So that's gonna be with So we're gonna first create a local variable. So that's gonna be image, and we're going to do that with info, which is this one which is gonna return and objects. So that's gonna be like a collection of string with and the objects. Let's go. So that's gonna be within square brackets. And that's gonna be you want image picker. It's gonna be original image, this one, and that's gonna be over type you are image and then from here, So that's gonna be very simple. So we're gonna then display. So that is imported image you So there's gonna be imported. You go been assigned to the image for Eddie, and that's gonna be image. So we're gonna start with that. You're gonna be able to see that tomorrow we're gonna have, like, an average. And, of course, we're gonna need to find a way to trigger this image speaker so too crude and actions in order to have So these pop ups present as new you controller. So we're going to be doing that from the image You first of all, we're gonna have, like, here a placeholder. So I'm gonna be adding this one first, So that is for a visual cue. So here you're gonna have this image here that we're gonna be using as a placeholder. I'm going to drive this one over to the assets, make sure that you have this one checked copy items if needed. Here you go. I'm gonna like this one. And then No, it's not the right place. So that's gonna be in attributes, inspector, in much here. And then we can also select inspect foods. Here you go. So by default, the images are not Do not allow user interaction. So we're gonna need to enable AIDS on Internet too. Connect one actions to the imagery we're gonna need to add, but just a recognize er so that's gonna be a top gesture. You are tough, Chester. Recognize? Er it was It's actually top just to recognize us. You need to talk. So you need to type t AP in order to get this one. And then I'm gonna drag this one over to here a year ago, and he we're going to see that. Now you have this tub jester recognizes. So this is what's gonna be used. So that's gonna be the events which is going to trigger the action. So let's go to the assistant editor. We're gonna create actions from this. I'm gonna put this one so right under safe, I'm gonna control. So I'm gonna keep my finger on control and then drag. And this one is gonna be import image, and that's gonna be in action. Okay, so now we have an interaction which is enabled with this image here. So first of all, make sure that you check using direction enabled right here under attributes, inspector. And then we've looked for that, that just a recognize er Internet to drag this one over to the image here. Then you're gonna get this icon and then from this icon Dub, just to recognize er re created a new action which is gonna be used to import pictures. Let's go to the standard editor. I'm gonna close that off and go back to camera of you. Control it. So here, we're gonna create an instance off the U. N. Mitch Baker controller. So that's gonna be leads Image. It's gonna be your image picker controller. Then we're gonna sign itself as a delegate to allow these your controller to control and also to allow them to use this function. So that's important. This step you must always a sign self, which is the present you controversy on this one. As a delegate of this, you are image speaker, controller, delegate, particle. So let's continue. So once we've done that we're gonna then specify their source site, meaning that we're gonna be able to get pictures from the photo library. So we must specify that that's gonna be your image picker speaker control source type, And that's gonna be photo library. So if we go back here and see that you're gonna have different source camera also introduced to take pictures with your camera in your iPhone. So for that example that the more we're gonna use photo library a year ago and then we're gonna also specify for this party, which is allows editing, we're gonna set it to force. And finally, we're going to allow this view controller that richest that we're creating here. So that's gonna be self present view controller. That's gonna be this one. So that's gonna be the one that we just created. That image. I'm going to change the name. I'm gonna put this one as you are an image maker of PC. That's not images. So we understand that this is like the controller. I'm going to update like he I'm gonna have date also here, team HPC on image PC and then animated. So we're gonna set it to true and for the completion. So that's gonna be new here ago. So we are all set. So we should be able to then no, make a demo with the photo library. Okay, so from here, So we're gonna go to the camera control and then quick here. So here it's gonna ask first if we can access. So if it can access your photos, you're gonna click. OK, so obviously, because this is a simulator, so that's gonna be placeholder images, but we're gonna be able to do the demo with that. So let's go to moments, doesn't seem to be responding and looks like we may have a type of here. So first of all, I'm gonna any true move that. So let's start over and just gonna stop. That's Mr You later. And one thing that I miss steaks I'm a strict about. So we must also allowed this to be dismissed. So that's gonna be with dismiss view controller, and that's gonna be true. And that's gonna be new. Okay, so let's do that again. We're going to run again, Okay, so let's go to the second time. So let's go to get a picture. So that's gonna be moments. And here. So now you see? So the image that was selected from the photo library and then displayed right here, So the next step will be to then save these to our account, and that's gonna be into five days. So here we have our path in the database, so we're gonna be able to have so just like the all the users. So we're gonna have a least post, and that's gonna be I'm opposed to We're gonna have, like, if we go back, so we're gonna have a post I d and also an image, and that's gonna be coming from the photo library, so we're going to be doing that next. 38. Add & Save Post: so now, in order to safe So the information that we take from the photo libraries of the images we're going to need to also refer to the active users, ref, So to this path. So we're gonna be able to do that. So once we authenticates meaning that once we get the active user information right here, So we're gonna have something similar for the camera of your control and we're not going to stop there. So obviously we're gonna need to import five days and let's go back to the second view controller. So we're gonna be using also these reference to the database by a base and go back to camera view controller right here. And we're gonna need to also have a reference to the active user That's gonna be rough, then fire base. And also because we want to create posts that belongs to the active users. So that's gonna be also another reference that we're gonna need, and that's gonna be post arrest. So we're gonna initialize those ones in view, Did load. So here we're gonna right references. Rep Frances by a bays, and that's gonna be first active user rest. Now that's gonna be by a bays. We're gonna create this one. So by referring to this route, Euro, No, that's gonna be in quotes. And then that's gonna be under the path users. And then that's gonna be active user, that we must also and wrap right use of their importance. So we don't have that information yet. So we're gonna be using the prepare for cigarette functions in order to make sure that we pass these active user information. We're gonna be doing that as well. And also, we can nationalize the past ref that we're gonna create from these active user ref, and that's gonna be with Let's been roughly swollen. So that's gonna be with child by that. Seem to recognize this one that the check to use a ref and that's gonna be with child by a pending path. But then we're gonna have lists, pose, and then once we get all of that, we're gonna be able to then create new posts. But that's gonna be for each new image imported we're gonna create in your post, which is gonna be then touched to this reference in the database. So let's go back to the second you controller here. We're going to need to use these function, which is prepare for Segway here. First we go check the sick wit item to fire so that it's gonna be if Segway identifier Easy call to I think it was a post Gonna check again. And then we're gonna create a reference to the destination of you controller. And this one is gonna be so that's maybe Sigler destination to control as camera view controller. Here you go. And then from here, we're gonna access of these active users reference and then a sign, active user. And if you remember, so we have this function, which is which allows to monitor so with implications for the current user if he or she is connected. And here, we're gonna be able to then assign to active users. So we know that this is not gonna be Neil. This is only if there with defecated on, we're gonna get a message also in the console to say so. And then we're gonna be able to assign the active user to the next view controls with the destination of you control. So that's jackal. So if the Segways correct so that should be add photo at Post. So that's the next. So Okay, that's correct. So that's gonna be add posts. Now we're gonna update the save action here. So inside we're gonna be creating. So every time that's we click on save, we're gonna create in your past two great and you pose and that's gonna be from post dress . Then we're gonna have a child by a pending path and introduce creating a path that's gonna be very simple. So because we know that this is gonna be unique each time we're gonna use the function, which is gonna be an estate to create a new date which is going to respond to the current time and date an estate like so. So we're gonna need some extra step here before we can confirm. So what we want is to also create a reference in order to access to get the information that we get from the photo Lavery. So by using this function for the image beaker and then save it to want global variable and then used this variable to assign the corresponding value and then save it to the database , So we're gonna be doing that first by creating a new variable, and this one is gonna be a variable of type string. And that's gonna be image saved, string simple. And we're gonna create this one. So from these function, there's gonna be a few steps. So let me walk you through The first of all that's gonna be image data, because this is a data that we get from the You are a much bigger control is a from the which is returning from the foot of library, and we're gonna be able to convert this one. So by first getting this function, which is you are image Jeff Peg representation, and we're gonna be able to then get a representations of from this image that we get right here and for the compression, So that's gonna be 07 So that's going to reduce a little bits. The quality emphasize also the picture. And then we're gonna convert this one into an object off type string, and we're going to be doing so and we're gonna be doing so by calling this function from image data and then bays 64 coded string with options. So select the 2nd 1 and that's gonna be square brackets because there's not gonna be any options just to leave the collection empty, and then we're good. So we're going to say that as a strings we're going to get first this image from the photo library that's we create from which recreates Perdita image data. And then we're gonna hurt Interesting, because we're gonna need to save object of type string into five days and when it's gonna be time to then read from the database to fetch the request to fetch the data, we're gonna need to then convert back into data. So that's gonna be later. For now, we just want to see into the baby's. So now that we've got that, we're gonna be able to then continue with dysfunction this action, and that's gonna be first weaken optional binding. We want to check first if we actually have value for this image safe. So if it's not kneel, so we're gonna check that first so it doesn't crush, and that's going to be we're gonna create a new collection of information before this new path, and that's gonna be first of all, we're gonna have an I D. And that's gonna be the same us what we use for to create the new path. But that's gonna be estates. And then, of course, we're gonna have the information abouts the image that's gonna be a key image and then bring the best image as about which is gonna be this one. I just have one extra parentis is here and here ago. So next we're gonna then set this new reference, which is gonna be post arrest and then set the value. And that's gonna be these new posts. It's a miracle. So this is where everything is gonna happen. So we made sure to have a global variable for this image that we imported from the photo library. And before that, when you need to create an image data and then converted into a stream so we can save it in five days, So that's gonna be the first step. Okay, so let's go take a picture. 1st 1 and then we're going to save this one first posed, so it looks like it may have worked. We're gonna check into five days if we have probably posted this one and here ago. So now you see that we have a list post with the date as a new path. So we have an I d and then also the informations for the post of the image. Next, we're gonna look at how we can make a query in order to get that image string converted it into data and then be able to display AIDS in a replication. And this is where it's gonna be displayed. So we're gonna be updating this birth next time in the next video. 39. Display Posts: So now we want to use McQueary's for the post that we've saved to ever accounts in order to display them on our profound. So we're gonna be doing that by first of all, we're gonna update. So all these variables connection that we have to the database. So on top of having, we're gonna have also on top of having the users refer gonna have also the post rough. So we're gonna have here, Post, ref, and then we're gonna create also variables because we're gonna be using those ones inner due to collect the data. So that's gonna be first posts. And that's gonna include objects off type M s dictionary. We're gonna have another one just for the pictures. But just gonna that's gonna be more manageable for the display purposes. That's gonna be off type string here ago and next, Obviously. So, as you may expect, we're gonna need to run a query from five bees in order to get this list of post. So we're gonna be doing that right below here. Query users Crary cure oats query current user. So I'm gonna put that to write use of that's gonna be clarify a base and we're going to return it to things in the completion hunger. So that's gonna be one completion handler as the barometer. So first that's gonna be the images. Grab your type in history and also that's gonna be the Post. I'm gonna call this one least posts, and that's gonna be also and in disarray. Then it's gonna return void. And so I'm gonna do this query on post trip. So we have to also initialize this one because for now is just an optional going to that next. So let's just create dysfunctions in order to do the query. So that's gonna be observed event type. And that's gonna be the value. No, you go back. So that's this one with the cancelled look year ago. So that's the correct one. So that's gonna be value then for the block, the variable. So that's gonna be snapshot than error for the council block. Let's put this one aside. So let's go inside this look in order to execute the query. So first of all, we're gonna have local dribbles, so that's gonna be 10 items and we're gonna have strings inside the stamp items, and then we're gonna have another local variables to includes dictionaries. That's gonna be dick items, dicked items that's gonna be in this dictionary inside. And so we go, then go ahead and then drew for Post in snapshot Children up, Typo That's gonna be Children a year ago. And Ben Ragan, it's been give the child as F databases, data snapshots. But then it's gonna be child posts, and that's gonna be as and in his dictionary, that's gonna be child value as N s dictionary. And then it's gonna be in aged posts that we're gonna get first from the child post. So that's a dictionary. And we're gonna get that from the image keys. Remember that we had two keys to key value pairs for itch. Close that easy. Do I wear counsel for the i d. With the value off the date, current date and time and we also have a value for the image. So we're gonna get that, and that's gonna be as it's drink and finally, So once we get that so we're going to be a vaulted than assigned these two our look over of also 1st 10 items that's gonna be with depends, and I'm gonna pass in major posts. That's the 1st 1 and then dicked items gonna penned as well. And that's gonna be the entire thing, which is gonna be the gel post. So I want to get the entire dictionary because I want to be able to make a reference to the to the entire post. And finally, So if we're good with that, So we're gonna be bolted then past all of this in the completion handler. So that's gonna be image, and that's gonna be the tank items. And then for Billy supposed. So that's gonna be dicked items a year ago. And also just to make sure, because we get that from the Internets, we're gonna want to rent. That's on the main que. It's gonna be dispatch Get Thank you. I'm using one thing here, so I just have to go backwards because I have a typo here, so I'm gonna be a sink. Let's go back to make sure we can populate the right thing here ago. So? So I'm going to replace the 1st 1 with dispatch, get me in Cuba and then inside the block, we're going to run this. So that is everything for the queer If I bays and, of course, we're gonna need to run this function interview did load. And also because we want to make sure first people actually have an active user current user. We're gonna be running that so here as well. So right below. Actually, this one is part of the Active Users Reference query. So we're gonna do that right below, and we're gonna put coasts by of these query here just to keep things separate and organized. And that's gonna be self query diabetes. So we're gonna give the images end of this post, so we're going to be able to then assign this to Post. So that's gonna be least post as going to specify that this is this is gonna be in a room with Anna's dictionaries inside and then for the images. So we have this array, these sell photos, global variable, and then we're going to sign images, and that's gonna be been a rate with string. Let me go back also to these function because we're gonna make sure also because you may have post or you may not have post available, so we're gonna check first the count for If there's any, then we're going to be able to run that because if this is no, we're going to run into problems and we may we may have the applications crushing. So we're gonna do that with snapshots. Children counts. So we have this function, which is so we have this property. So we have this party, which is convenient because we can then check the count's. So it's only if it is more than zero. So if it's not empty, we're gonna do the following and the rest, you know, so that not everything. So once we're done with this part, so we're gonna need to then update also the collection do data source methods. So here we're gonna find the collection you did a source methods. So here, we're gonna date so up, just even want to return. So the same counts object that we have in photos, and we're gonna need a few things here. So we're gonna date with a custom cell, and also we're gonna need to add outlets to each cell, and that's gonna be an imagery in order to be able to add pictures to each cell. So we're gonna be doing that next