SwiftUI Firebase Chat 06: Fetch Current User Firestore

[Music] alrighty everybody class is back in session uh welcome back for another lesson in the swift ui firebase chat series hope you guys are doing well and i hope you guys enjoyed the very last lesson uh last episode i put out a silent video on how to build out the main messages view right over here and a lot of the code was just pure ui so that's kind of why i just left it as silent most of this is just swift ui code it's nothing too hard to follow it's very straightforward and once you have all of the code inside of your editor you can start rendering out in the preview panel on the right side eventually we will have the preview up and ready with the green dot hopefully uh sometimes it does take a while but uh finally we're here with the preview uh today's video what are we going to talk about well i wanted to go ahead and dive into the profile picture here in the top left so the more finished version of our application you'll see we have pikachu online with the uh the profile image on the left of it right and i'm gonna show you guys exactly how to do that in today's video it's again pretty simple and straightforward once you see the code so let's go ahead and begin i'm gonna go back into my main messages view right over here and let's see what happens if i launch this inside of the simulator uh the top right the simulator i have right here is the pro max i'm going to launch this in the pro and hopefully i can pull it somewhere right here you'll see our application looks like this so nothing too bad it's in light mode but you know dark mode is fine as well uh if you guys want to run your application in the simulator make sure to use the main messages view instead of your your app file here okay so moving on uh i want to render out the current user being logged in as pikachu or whatever the user is here and i also want to fetch the profile image so how do i do that well one thing you are going to more often than not create inside of your swift vr projects is this view model object and let's see main messages view model and we're going to want to use an observable object and it's really that easy to see why in just a moment first thing i will do is inside of my view model right i'm going to execute a bit of logic during the let's say initialization phase and the logic will be to fetch the current user it will be a method that i will momentarily create right below uh so you can create it as a private function it's always a good idea to make a private whatever uh whenever you sort of want to just give this access only to the class itself so that's a good idea next thing i will do is i'm going to utilize the auth on firebase manager shared in the auth right here so uh first thing to do is to pull the uh the current user's uid into a variable like this and as you can see uh the current user is optional so the resulting string that you get from here is optional as well uh it's always a good idea to just use a guard statement to to get the actual variable outside of your optionals so i'll use this right here for those of you guys are wondering where firebase manager shared is coming from is from your logged in view here here is your firebase manager um it's also a good idea to refactor this stuff whenever possible so uh in other words what i will do is i'm going to create a brand new file i'm sure a lot of you guys know how to do this already so i'll just create a new file i'll call this the firebase manager uh let's hit create and here we go so simply go back to your login view and then i believe i want to cut from the firebase area here or maybe i'll just cut that and then i'll head back into my firebase manager so good stuff there just a little bit of refactoring and um you know you have all this firebase uh all these libraries from firebase there so obviously you'll you'll need to import firebase to make these guys available and once i do all that i can go back to my main messages view i'm going to resume and this guy should eventually come back to the green um maybe maybe not it'll spin for a while every time you create a new file it kind of chokes a little bit but eventually it'll be right back up like so all right so now that we have our uid from our firebase manager that we just uh refactored uh we can go ahead and fetch the current user that's logged in um you know in other words it's pikachu for our finished version over here and we have to fetch the current user for whatever we are here and so i will try to fetch our user by saying firebase manager uh good old autocomplete firebase manager.shared and we'll fetch it from our firestore database this guy you'll have to access whatever wherever you saved your actual user document and for us it's in the users right here and you want to get the actual document with you know some kind of path right so the path is actually the user id that we saved during the login phase or the the registration phase rather and you know this is just users and uid it might be different compared to whatever your database schema is but this is a pretty common one here and then so you want to get the document with some kind of completion right i don't think i've ever used this source one so this guy is going to be pretty straightforward to use now you can also use um the new ios 13 or ios 15 async methods but this is kind of new and i don't think it works for older iphones just yet i believe they're going to back port the async libraries but i'm not sure what the progress is on that just yet so just to be safe we'll use this completion block here and then just hit enter you'll get your snapshot and then you'll get your potential error like so uh like usual you'll want to check your error with either a guard or an if let optional binding so if this happens we'll say uh print fail to fetch current user like so and why don't we just also attack on the error as well um let's see you know if that happens we'll bail and that should be okay um yeah i believe that's fine and then finally what you want to do is to actually get your user off this snapshot there so this snapshot right here and this one's pretty easy you can access it like this right i'm going to say data equals say data equals snapshot and you'll get this data dictionary here hopefully you guys can see everything and uh let's see else return and just type that out correctly and now that you have your data dictionary right here what you really want to do is to extract the information from your database what i'm going to do is i'm simply going to print out something like the actual data dictionary itself so what you can do now is uh you can load up your simulator or execute this code in your preview um let's see we have our view model here so in order to actually utilize it in your preview or inside your app you'll need to create an instance of it and you'll want to use an observed object variable i'm just going to use a vm for view model and we will just create our view model like this so nothing too fancy again if you want to make it private you can do that as well now uh once you fire up your preview everything's going to look just the same as you would kind of expect here nothing too fancy we have our custom nav bar up here and then we have our main body here so something i'll do just to make sure that things are working correctly is i'm going to say text right here current user id and you'll see the text slowly show up here right so let's see next thing i'll do is i'm going to now go back to my view model right here and to make sure that things are working out correctly here's what i normally will do i'll create a couple of uh published variables uh right at the very top here and i'll use something called an error message and uh i'll let this guy be an empty string like so and what i'll do with this error message is um let's say i'm in the fetch current user right i'm going to say self error message is a fetching current user and uh we'll just do that for now so inside of my main messages view right i'm gonna go back to my body which is this guy right here i'm gonna cut this and put this a little further up above so that makes this a little easier for the video recording so for the current user id right here i can simply use a string interpolation and i'll just say vm dot error message like so i'm going to command option p to resume my preview now because i have everything set up correctly you'll see a user id fetching current user and that's because i i'm kind of hard coding this error message right next thing is to you know actually make it do what it's supposed to do and so what i'll do is i'm going to cut this and i'll paste this down here and instead of using this i'm just going to use the uh uid right here and you'll see my uid is this s 0 ui for u value there and that's the the current user that's being logged in and a lot of you guys should be seeing this user id um but if you're not seeing this user id that means that you're not logged in as the current firebase user inside of this preview panel so you might want to go back to your login view and actually log in first and the next thing is to you know you can also check that inside of this statement here and let's do our first real error message and could not so could not find a firebase uid or something like that so you know you won't be seeing this message until you maybe flip over to a different simulator here i don't know how long this mini is going to take to compile but because i haven't logged in with my iphone 13 mini in the preview before you're going to see this message instead of the the current user id maybe i'll give it a second to load up here alright so the previous backup i'm going to hit the stop right here and then i will hit the play so maybe i will use the the light moon kind of corresponds to the the right side here so you'll see uh currently i'm not logged in with the iphone 13 mini all right next thing i'll do is i'm going to hop back to my iphone iphone 13 pro i'll hit the stop here and i'll hit the play one more time and you'll see i'm actually logged in as my user here okay so make sure you have that working and the next thing you want to do is you don't exactly want to use the error message here of the user id i'll remove that that will go away and then what i'll do is i'm going to use the the data inside of line 32 and i will remove that i will hit the stop and play and hopefully this should work uh maybe this doesn't have an actual value so is there a description on here maybe the description should work all right so nothing looks like it's appearing inside this guy so i will use data and we'll put that there all right so that's pretty good it looks like we're not reaching this statement right here and looks like we're actually following into this error message so i'll use this guy and we will um just use this here okay so i'm going to say this right here and we will use string interpolation and we'll use the error like so all right so once we have that we should start seeing something inside of this block of code and it looks like nothing is actually happening so why might that be um i'm gonna say stop that error message equals one two three that should be doing something and i believe it's actually this right here okay so it looks like uh one two three is showing up right here and i believe things should be working it looks like uh the snapshot.data right here is actually not getting back a valid dictionary so we will check this error one more time right here so that error message is uh no data found and we will just confirm that everything is working so it looks like snapchat.data is not finding any data on the snapshot so this might be happening for a couple of different reasons and i believe the reason is because the currently logged in user isn't saved correctly from like a previous login so what i'll do is i'm going to hit command 1 to bring this back up i'm going to hit the login view here and again we are on the iphone 13 pro i'm going to make sure that i'm registered as a proper user inside of the panel here if you don't see it just hit the stop and play you'll see this here okay i'm gonna hit the waterfall and we'll call this the waterfall maybe one at gmail.com and then one two three and one two three so this is going to create our user inside of firestore and then it's going to upload the image into storage and it's going to store that image url inside of firestore all kind of sequentially and once all of that is working right uh we can go back to our main message view and you'll see the the top area right the actual message that we have is the data and it is being uh kind of printed out using line 42 currently so if we look at the the data it's a dictionary of the uid has this r8z value it has our email waterfall1 has the profile url which is this long url here so that's pretty good this means that we're correctly logged in and we're able to correctly fetch the current logged in user's information and what i'll do now is i'm going to uh ingest or decode this dictionary as a kind of a user that we can use for uh you know future kind of lessons and what i'll do is i'm going to call this destruct and i'm going to call this struct a chat user and then i will just leave it like that a couple of things that i'll have available to me as a user is all these properties here so there's the email there's the uh the profile image url and there's this uid value right here and they're all strings so this is going to make it a little easier so profile image url all right so make sure all your properties here are set up as strings and uh you should be good to go okay hit the resume make sure things are rendering and running correctly inside of your preview and looks like things are kind of okay all right next thing we are going to head back into our view model fetch and instead of using this error message right i am going to uh i guess what's the word that i'm looking for decode i'm going to say let my chat user equals uh some kind of chat user here and i want to construct it using uh the user id the email and the profile image area you url what you can do is you can get it from this data dictionary in a lot of different ways but to make it easier i'll just do this right here uid and this guy is the data we can access the actual uid using this it doesn't know that it's a string because it's a a data is a string to any dictionary so we'll have to cast it down to a optional string if it's if it's there uh if it's not we'll just kind of leave it and default it to an empty string like so and then this means that we have the uid right there all right a lot of talking but uh you know i hope you guys kind of get the picture here i will repeat the same process so this is the email get it out of the dictionary and we'll get the profile image url equals the same thing there and hopefully i've spelled things out correctly and uh yeah we'll get the email like that and we'll also get the profile image url so the last thing to do to make sure things are working is to perform this exercise again and we'll call this the chat user dot profile image url i am going to check to see if the url is being printed and that's exactly what we have we have this long ass url there okay so what is the point of uh you know fetching the current user and decoding all these properties right here right well obviously we want to print out the information in this top area that says user name and also this image on the left so we don't really have a username so instead of using username we'll just use the email for the pikachu thing right there and how i will do that is i'm going to go back to my view model and in addition to creating this error message right you want to have a hold or a reference on your chat user so you might be asking well what is the property type right well i'm going to declare it as an optional chat user and that's because it's going to start off as nil in the beginning uh hit command option p that error will go away and the green dot will come back all right um so far so good i'm gonna remove this error message at the very bottom here and that should be coming back as one two three which i don't really care about that so i'll comment that out as well um maybe i'll just remove that comment there okay so next up what we'll do is we are going to go into our current user id here and you can go ahead and access the the chat user dot uid and just use nil coalescing right here and you'll see it says nothing you know you can rename that as user you'll see that it's going to update so the last thing to do is to utilize this chat user and i'll just say self dot to make it easy once you have that the user id is right here r8 and z so pretty good stuff uh last thing i'll do is i'm going to use the email for this username right here so i'll comment this out and let's go back to our custom nav bar we have our user name right here corresponds to this there some of you guys can probably guess what to do we're going to say the chat user dot email and we'll just know coalesce it to the uh the empty string like so and this is an optional chat user so once we do that we can have this waterfall one guy if you want to get rid of the gmail thing i think you can replace the replace occurrences is this how to do it i can't remember exactly what it is but it should be something like that and i will just leave the email as is next thing i'll do is in addition to the email we can also render out the uh the profile image url which is the pikachu here and we're going to replace this person.fill system image um you might be asking how do i easily render out an image instead of a swift ui right well there's this image inside of ios 15 swift ui 3.0 but i really dislike the new image uh swift ui view so instead of using the uh what i'll call the broken image inside of switch ui i'll use a sd web image and in other words i'll go ahead and go inside of my package manager so make sure you're clicked on this right here and this tab i'm going to click on this and if you have a swift ui uh web image installed already or previously you'll see it show up right here otherwise go to the swift ui just google this and you'll arrive on the github page and it should look like this url here so double click on this and uh hit the add package you'll i guess you'll get xcode to fetch the library that's at that github.com address and then once it's done it will allow you to install it inside of your project uh it only takes a while i don't know why but sometimes it's slow sometimes it's fast but eventually you'll have your package right here you'll see it as synchronizing with your dependencies there and you know you'll hopefully see this inside of your project if you don't uh i guess try to fix why it's not showing up all right last thing we'll do is i'm going to head back into main messenger's view and again for this person.fill we want to use the the image loader that comes with uh see import uh see i think it's called sd web image swift ui and that's what that library is called head back down to your person.fill which is inside of your custom nav bar again this is really easy you just want to use this sd web image class and it comes with the url and the string is this guy uh can you guess what the url string needs to be well we'll just use the chat user and the profile image url which is an optional so it will coalesce it down to empty string if that's uh what happens and i think we're pretty much good to go here i'm going to hit command option p or just hit the resume in the top right this might take a little longer than normal because we just installed the sd web image library but eventually what you'll have is something that you know starts rendering out an image on the left side like so okay that looks pretty good i guess um the first thing to fix is we'll just remove this right here i suppose so that's kind of what you have here um you might want to set a frame on the image uh 34 is that what we want and let's see i think there's always the scouts of phil and that's pretty good so that's great uh i think we want to clip this guy and then that looks okay so finally i will give this a height of 34 as well why am i using 34 i don't really know i normally use something like 44 which is somewhat recommended and then finally we will give this a corner radius of 44 as well i think that's pretty good uh let's see maybe give this a value 50 make it a little larger so that's what we get here i think this just has to be greater than half of the the width value and you should be fine for the full circle and there you go now you have your image you have your current user and everything is kind of working out a-okay um maybe if you want to render out this circular border overlay you can go back down to what i showed in the last video and inside of your messages view there's this overlay code right here that has a rounded rectangle so i'll just copy that um let's see go back here i can never remember which uh which modifier to use or where to put it but it looks like uh looks like it's gonna work right here so you start to see this uh maybe i can zoom in i have a trackpad now and normally this zoom in works with a trackpad but it's not working today so we have that border right there now if you want to give this a shadow you might as well do that uh do that here give it a shadow value of five and uh makes it pop out just a little bit um and it's looking like this here so again there's this really long email address there uh how do i want to remove the long email address um i guess there's this so if you're getting the email from the dictionary you can do this replace occurrences of characters i believe is this right so i'll do this of that gmail.com with the empty string and that works um but you know you're you're actually removing the gmail.com from the email here okay so now that you've removed the at gmail.com from the chat user's email right there you might not want to do that right you might want to keep the correct email on this chat user object here so instead of removing it directly from the actual email property what i'll do is i'm going to cut that code and head down to wherever my user email is right here so this one's a little tricky i'm going to paste that bit of code and if you have all of your code typed out correctly it should look like something like this here uh for swift ui if you want to simplify your code a little further for these long strings you can use a let statement instead so what i mean is you can do this right here just use a light right here and i believe you can uh let me see i believe it's all of this code here so i'm gonna say this right here um let's see let's see i'm gonna say email equals all of that right here and uh you have your email above so what i'll do is i'll just use the email like so um yeah so i noticed that inside of switch ui if you have a a really long statement that's evaluating some optionals and you have some nil coalescing like this right here uh in the previous versions of swift ui this used to really confuse the compiler and sometimes i would go to the extent of having a separate function to produce this string value and it looks like in swift ui the compiler is a little smarter in terms of not choking up on really long confusing statements like this so if you're not on the newest version of xcode yet make sure to update to at least xcode13 i believe 13.1 might be either out right now or it's on beta but uh yeah these statements used to really confuse the the xcode compiler okay so that is all for today's really really long video uh there was a comment in the last lesson that uh kind of said that they wanted to have me uh kind of narrate what i'm doing in terms of the logic of these lessons right uh if you guys want me to actually narrate and explain all the code uh let me know sometimes i maybe get a little tired of doing this like actually live code and explain what i'm doing because uh sometimes it takes a little bit of time to prepare everything to make sure i can get through the entire lesson without having some kind of bug or just you know it takes a it takes some preparation so it's easier for me to just code everything without having to talk about what's going on but i guess i do understand that sometimes the code is a little too much and if you're not the actual person that's coding the the program it can be hard to to follow okay so again that's gonna be it for today's video hopefully you enjoyed it and again make make sure to let me know what you guys want to see for uh you know the live coding all right bye

Channel: Lets Build That App

Views: 1,673

Keywords: ios, swift, development, tutorial, learn, xcode, programming, code

Id: yHngqpFpVZU

Length: 32min 51sec (1971 seconds)

Published: Wed Nov 17 2021