Lesson 6 - Firebase Storage
Create an App's Backend with AI📅 2024-12-22
Transcript
[00:00] welcome back to the series where I'm showing you how to actually build out software and its back end if you're just joining me now in the last episode which will be in the playlist down below we did the functions ability in that specific video I showed you how to create python based functions we went ahead and created a function that connects to open AI API therefore integrating artificial intelligence into our software therefore this is episode 6 and if you're confused you're like who what just happened I just land on episode 6 check out the playlist make sure leave a like before you leave as we're done with functions a v Zen today's video we're going to go over the ability for storage in our back end
[00:32] storage is a very ambiguous term here this encompasses PDFs videos any type of file in this video I'm going to show you how you can have it so your user can reset their profile image therefore in this video you're going to learn the logic to set it up for images but this applies to any type of file format therefore let's begin to start off here let's go ahead and log in create an account the purpose of today's tutorial is we're going to add a little icon here that's going to allow us to click upload and we're going to upload a new profile image that will store in the backend database obviously we have a user we have the unique ID their uid which is this right here this is how we identify
[01:02] that this is the user themselves so for example for orange raccoon right there we know that this is their user identifier we're going to be leveraging this in the storage path that we'll create together as you'll see storage is a whole separate section here when it comes to fire base first question might be is Corbin why is that that's because of the fact that when we store stuff here in the fire store this is going to be string based data URL links I like coffee chicken Olive like this is text based storage number based storage very much binary in the sense therefore when
[01:33] storing actual files or video files MP4s pgs. jpegs whatever it may be PDFs you use storage check out episode two or three I believe this is where we set up our storage bucket and set up the logic to do like a coin flip whether the user is a cat profile image or a dog profile image what we're going to do though is we're going to use the same storage bucket here but we're going to create a new folder and the purpose of this folder is for The Unique information associated with each user so what I'm going to do here is I'm going to say profile image or profile picture so this
[02:04] is going to be your base folder it's like the global folder from profile picture this is where the next leg here is going to be the user's uid as the folder and then the image associated with that that will make more sense as we get to the code here but for now we've set it up how we want to set it up that's in Firebase though we need to actually make sure it's running in our emulator as well therefore we got to come down here and what you'll notice is in our Firebase Json we got to make sure we add a storage Port here if you're not familiar what I'm saying here remember when we launch our emulator this is like a own little bubble Local Host 3000 is
[02:35] like the fake little front end with no internet how we can create a front end our fake little backend is Firebase emulator start which are referenced by all these different ports therefore we need to create a port for storage let's start off by doing that then we're going to go ahead and open a CH cursor AI we're going to make sure we select Firebase Json but also select your firebase.com here so we can leverage it outside of our application here we go okay we want to launch these storage emulators so make sure this line shows up in the port
[03:06] in the Json fire base. Json and the JJs export the storage so we can use it elsewhere hit enter and we should get a relevant code looks like I used up my free so we're going to have to do a smaller version of cursor which is cursor small so we got our Port here of storage coming back over here we go to fireb base. Json scroll down and we'll add it right here make sure you add a comma let's get rid of this comment we don't need that we're going to go there coming over to the Firebase JS doesn't look like it outputed perfectly but we get the general idea here we need to get the storage and the functions here so
[03:38] we're going to add these lines let me go to shrink down com back over to fire base.js here we need to import get storage connect storage emulator looking good this is like the other logic that we saw earlier with the functions we're going to paste that here nice and then we're going to scroll down here we're going to make sure we initialize it with cons storage get app storage I like it and go and do that notice how we do this with all the other things get off get fire store get functions looking good so far and then finally we need to make sure we have this nice little line here to ensure we get no Local Host cords erors con next storage emulator if I can
[04:08] speak 9199 not 911 and then finally the storage bucket storage right there good to go we did a lot of this in the past tutorial so this should start making more sense to you as you know the fireb base.js is basically our way of accessing all the abilities of Firebase within our front end and our back end mostly our front end though so far so good we've successfully imported and structured our storage bucket now if you haven't already what I encourage you to do is let's rerun the emulator here because now we have a new Port that we want to run with Firebase emulator start and for us to confirm whether or not
[04:39] this is live we're going to go to our Local Host 4000 it actually looks like I forgot one step here which is going to be the fire base in it for our configuration let's go and do that Firebase in it and I'm actually remembering I did forget that because what I did in the previous tutorial was I just referenced the links to those fixed profile picks of the dog and the cat I didn't actually initialize it yet so let's do that as we know Firebase in it allows us to access all the different abilities in Firebase we're going to go to a storage here we're going to hit space we're going to hit enter everything should just be default here enter and we're good to go so far so good start the emulator here we go
[05:09] loading in the storage rules perfect coming back over to Local Host 4000 we should see it on here we go it is on and then if we go to storage here we have our storage bucket looking good here now obviously if you want to enable anything else such as real-time database emulator follow the same steps but reference that kind of terminology when importing it to your Firebase .js and Json from now though we are going to go let's go to dashboard. JS and here's what we're going to do we're going to give the user the capability to import their own image therefore change their profile pick and someone might log in and be like you
[05:40] know what I don't like that cat I don't like it so we got to change it let's do that to get this working we're going to have to add a couple files to this chat obviously we're going to need the dashboard. JS and we're going to go ahead and need the Firebase JS so it has context of where we're getting the storage bucket in addition let's make sure we add the dashboard. CSS now look at the prompt all I did was this I went ahead and pointed out the very specific piece of code that is the profile image that little circle right there that code that's associated with that I pasted into the prompt and then I simply said
[06:10] this we can upload a new image and also have it so the max file size is 5 gigs also the storage path let's do profile picture which we identified before uid image name that's it hit enter get your code and of course you can get the code for free in the description Down Below in the GitHub repost so make sure you leave a like it's completely free it's right there so let me go ahead and watch through this code though first major thing you may run into an error right off the bat where it's like you don't have access to this this storage path you don't have access to don't worry to fix that we're going to come down to our storage. rules now right here is where
[06:40] we set up the rules of who has access to what depending on their authentication and admin level for right now we're going to allow a user to read and write from this path I've went ahead and identified the path match profile picture uid notice how it's smart enough to understand that user ID is a variable image name perfect and then we're going to do the next line here here which is going to allow a user who is authenticated to access this path this basically makes it so that they can upload an image and have no issues therefore coming back to the code here notice what we do from our Firebase .js we are importing storage that's where we
[07:11] referenced earlier coming down here I went ahead and reimported the font awesome icon that we used on our homepage from earlier tutorials so we can get a nice little upload icon therefore allowing me to use the icon fa upload which you'll see pretty soon here and then finally we went ahead and imported the relevant things we need in order to actually do this ref upload bytes get download URL from fireb SL storage therefore in your output for your code if you don't see any of that something might have messed up not necessarily the icons more in the sense of the imports from Firebase now coming down here it's pretty simple on the logic the idea is that obviously we're
[07:43] doing handle file change we're changing the profile image so maybe you want to do handle new image for profile whatever you want to call it scrolling down here the first important piece of code here is setting Max file sizes now this applies to anything whether we're talking about videos or PDFs everything in between you want this line here you want to do file. size and then identify the max amount of size you're willing to upload why is this important because the last thing you want to happen is a user uploads like a 100 Gig file not only is this extremely expensive at scale but also like why are they uploading a 100
[08:14] Gig file that's a lot so whatever it may be in reality this shouldn't be 5 gigs for a profile image maybe Max of two maybe even Max of one just set limits you don't want to be overpaying at scale furthermore notice how we're identifying the specific path here profile picture which we made before the user's uid and then the file name whatever the file name is on their computer that's how we're going to store it from there we go ahead and get the download URL which we then reflect in the user's profile image which you can see right here now typically in this logic what it'll do is it will fall back to the original profile image of the dog or the cat if
[08:45] it doesn't exist and if it does exist it will use the users's specific unique image they uploaded let me show you this live so I've come back to my image here and I'm like you know what I don't like that cat I want a dog so to do so right now I have it set up where we have a nice little upload icon here I click it and what you'll notice is that by me clicking that it's going to pop up like this pretty nice and we're able to click the specific file we want for a profile image I also want you to notice how we set parameters on the file type so for example here I'm not able to upload a zip I'm not able to install cursor again
[09:16] I'm not able to upload a video because I identified that in the code for your upload process if it's like only videos should be accepted or only PDF should be accepted identify that in the code how Corbin put it in a cursor AI chat be like hey I only want this size file and this type of file it's very simple for me though I want to change this to a dog double click and we officially have a dog profile pick that concludes this episode make sure you leave a like is completely fore it helps me out here in the next episode we're going to be checking out analytics showing you how to connect this to Google analytics which is actually pretty prevalent for
[09:46] us to understand one just how is our software doing but two for conversion metrics such as sign up and purchase but for now we set up the storage we're good to go and I'll see you in the next video we have storage it's been stored to random videos that's my face I'll see you in the next video