Firebase Cloud Function Tutorial - REST API Part 1 | Diligent Dev

hey what has gone everybody it is rob a k2 diligent dev and welcome to this firebase cloud functions tutorial in this tutorial we'll be creating a REST API with full crud capabilities now if you get any value out of this content make sure you smash that like and subscribe button and without further ado let's jump over the computer and get right into it alright so the first thing we need to do is go to firebase google.com if you don't have an account go ahead and sign up for one once you have go to your console click on add a project we'll call this firebase functions API click continue hit continue again select default account and hit create project and once this is done I will be right back ok so the project has been created we're going to hit continue and we're gonna do a couple things here first thing we're gonna do is we're gonna click on database and then we're gonna click create a database it's gonna be a cloud firestore database and then we will start in test mode and we'll hit next and done and once this is done provisioning I will be right back alright so our firebase database has been provisioned so the next thing we need to do is install the firebase CLI so I've gone ahead and went to firebase google.com slash dot slash CLI and I'll leave a link to this in the description and we're gonna install their CLI globally on our machines so you see they have different instructions depending on what operating your system you're on but I believe both should be installable through NPM so we'll check windows and I believe Mac's gonna be the same command so what we're gonna do is go ahead and grab this command we're going to open up a terminal and paste that in and let that run and once that's done I will be right back ok so I got an error because on my Mac I am not running it as a administrator so what you need to do on a Mac is put sudo in front of this NP install so I put sudo right here hit run it's going to ask me for the password to my computer and then if I can type it in right it's going to go ahead and install so this is for Mac users only Windows users won't have to worry about this okay so finally everything installed successfully so what we're gonna do is I'm gonna close out of this we're gonna close out of the browser I'm gonna create a new folder and I'm going to call it firebase functions API and I'm gonna go ahead and open up a visual studio code I'm going to go to open I'm gonna go to my desktop and I'm gonna open up firebase functions API so we have just a blank folder here open in Visual Studio code I'm gonna open a new terminal and I'm gonna run the following command firebase and it's then it's gonna ask me which features I want to be using so I'm going to choose fire store and functions and hit enter it's gonna ask me if I want to use an existing project and I do cuz we already set one up and we are gonna use the fire based functions API project where do we want to store our fire store rules I'm just gonna hit enter so it chooses the default of the fire store dot rules then it's gonna ask me where I want to place the indexes and we'll just hit enter to choose the default again it's gonna ask what type of language we want to use for the cloud functions and we're just gonna choose Java scripts do we want to use es lint I'm gonna say yes and then do we want to install dependencies now with NPM and I'm also gonna choose yes and this is gonna take a second to run so when it's done I will be right back okay so now everything has installed let's take a look at what we've got here you see we've got this functions folder we'll open that up we have our node modules so inside of our firebase functions we can use any NPM packages that we'd like and they will all be stored in here we have our es link figuration file a GUID ignore this index J s and this is where we'll be writing all of our firebase functions package lot J and a package.json to keep track of different things like our scripts and packages that we'll need and then we have a firebase consumptions consumptions firebase configuration file we have a git ignore a firebase JSON to tell it where we have our rules and our indexes and how to deploy it and then we have our firestore indexes and our firestore rules okay so let's head back up to this index dot JSP now you'll see it imports the dependency of firebase functions and we're gonna be using those to make our functions and they give us this example here so we're gonna go ahead and uncomment this and what this example does is it exports a function called hello world and it's an HTTP and on the request of that function we'll get a request and a response and the response will send back hello from firebase now to show you how easy it is to deploy these firebase functions we're gonna go ahead and do it right now so I'm gonna run firebase deploy - - only functions I'm gonna give this a second to run and once it's done I will be right back okay so as indicated by the CLI our firebase function has deployed successfully so I'm gonna do is head back to firebase I'm gonna go to the functions tab and you'll see that we have it right here now what I'm going to be using to test out our API is a program called postman and I will leave a link to it in the description below so I'm gonna go ahead and open up my postman and I'm gonna drag it to this side of the screen drag this over here to the side of the screen I'm gonna make this a little bit smaller [Music] just so I can grab this URL out of here copy that I'll come back over to postman I'll make it fullscreen now we will post this URL in here and then we will hit Send and when we hit Send we get a response back from the server that says hello from firebase and that is exactly what we specified here in the function itself okay so this is all fine and dandy but let's go ahead and make something a little bit more interesting what we're gonna do here is set up a REST API so in order to do that we're going to import some packages here at the top or in say Const Express equals require Express we're gonna say Const course equals require cores and then we're going to initialize our Express app and I've misspelled Express there so we're gonna say Const app equals Express now the reason we're doing this is because firebase functions as they exist right now in our hello world function do not have the concept of get post put delete all that good stuff so when we're creating a REST API we're gonna use the Express framework to do this so down here we're gonna create a couple of API endpoints so we'll say app gets and we'll give it the route and we're just gonna specify a forward slash and you'll see why I'm about to do that a little bit later and then we'll say we'll give it a request and a response set that equal to an arrow function and we're just gonna copy this right here and paste in a post request okay so the next thing we're gonna do is set our user so we're gonna be passing a user in through the request body so it const user equals request dot body now in order to push data in and out of our fire store we're going to need to set up the firebase admin so we'll come up here and we'll say const admin equals require firebase admin so we'll come back down to our post request and we'll say admin dot fire store dot collection and we'll set it to the users collection and then we'll hit add and then we'll just pass it the user that we have here now this is an async function so we're gonna await it and then we'll make it async up here and then once this has completed we will say res dot status to a-1 which stands for created and we'll just send it back and now that we have our post requests all set up we'll come down here and we will make an exports so we'll say exports dot user equals functions HTTP dots on request and we will pass it our Express app that we created and this will set up an end point of user and when we don't specify anything in the URL path it's just the base path of user so now that we have that all done and setup we will run our firebase deploy and I will be right back once that finishes ok so you see that our function has uploaded with the name of user and I want to go test the function and I realize that I had an error and it was throwing a 500 so in order to debug your errors in your firebase functions you can open up this logs and you'll see we have an error here and it's telling me that the default firebase app does not exist make sure you call initialize app before using any firebase services so what this means is I forgot something up here after this admin we need to say admin dot initialize app and we'll save this and then I'm gonna run this again and I will be right back once it's finished all right so the function finished uploading so what I did is I grab this URL right here I went over to postman and I pasted it in here I made sure that post request and then I put some sample JSON in here so you want to click raw and then you can go down here and click JSON and now this is all loaded up we can go ahead and hit send and you'll see it's sent and we got our 201 back so if we go over to firebase we go into the database and we look and now we have a user's collection and one document in there with the exact data that we passed from postman so now that we have data flowing into the database let's pull it back out and in this get request we're gonna grab all the users we have in the database so we'll say cons snapshots equals admin dot firestore dot collection grab the users collection and we'll just do a get on it now below this we will declare an empty array called users to hold our data and we will say snapshots for each oh this is a an async function so we'll do an awaits and we'll do a sync up here so we'll say snapshots dot for each grab the documents and we'll say let ID equal doc dot ID well let's data equal doc dot data and then we'll say users push you push the ID in there and then we'll get spread operator on the data and then below that we will say res dot status and we will pass back a 200 with this and we will send JSON dot stringify our users data so after we're done we'll save everything and we will run our firebase deploy test - only functions command and once that's done I will be right back ok so while trying to upload the firebase functions I got a linter error and the reason I was getting it was because it didn't like this spread operator I have here so the way to fix this is to go into your es link configuration file here and change this Ekman from 2017 to 2019 if you're getting that error so if I scroll down here you'll see that after I fix that it uploaded just completely fine so let's go ahead and open postman backup let's paste in our URL and make sure that it's a get request and hit send and you'll see we get our data back I will change this to JSON to make it look a little prettier here and you see we get our ID along with all of the data of our user ok so now that we have our get request to return all users let's make another get request to just get one user so we're gonna say app top get we'll pass it a path 4 / : ID we'll set up our request and response variables and then we'll say Khan snapshots equals a Waits and we'll have to make this an asynchronous function admin firestore dot collection and we're going to be referencing the user's collection and we'll grab the documents and we will pass in request params dot Spidey and then we'll do a get on that we will grab the user ID and set that equal to snapshot dot ID and then we will grab Const user data and set that equal to snapshots dot data and then we will return so we'll say rez dot status we will return a 200 with this and we will send JSON dot stringify and send ID as user ID and then just do the spread operator and send the user data and we will save this and then we will run our firebase deploy and when that is finished I will be right back so now I've opened postman and this was our first get request that we had so I'm going to go ahead and copy this we are going to make a new get request and I'm gonna go ahead and copy the ID for this user and all we're gonna do is put a forward slash and then the ID and we're gonna hit send and you'll see here that we have all the JSON being returned but instead of it being wrapped in an array it's just a single JSON object okay so we have our post requests to add users to the database and get requests to get all users it get requests to get an individual user so now let's create a post request to update an individual user and to do this we'll do app puts we will set a route for / : ID we will setup a request and response set that equal to an arrow function and the first thing we're going to do is pull the body out of the request so we'll say Const body equals request body and then we will say awaits and if we do in a weight we have to do an async up here so we'll say Edmond fire store dot collection you're referencing the user's collection dude dot doc and we'll say request [Music] parameter of the body and then once this is all finished we will say response status 200 dot send and then we'll have to come down here and we will deploy our firebase function and once this is done deploying I'll be right back okay now that the function has deployed let's go ahead and test it so I'm gonna go ahead and grab this one that we use for our get request and I'm gonna paste it in here I'm gonna change it to a put request I'm gonna come back here and copy this JSON we're gonna go to body raw JSON we'll paste it in here and the only thing that I want to update is email you can update any fields that you'd like except for ID but I'm going to update the email so we'll say the diligent dev at test comm I'm gonna go ahead and hit Send and you'll see right here in our firestore database that it has updated correctly okay so the last thing we're gonna cover here is how to delete items Advait firestore database so we're gonna say app dot delete we're gonna set our route s /ko line ID we'll set up our request and response set that equal to an arrow function and this is gonna be an async function so we'll just go ahead and add the async right there and we'll do a weight admin dot firestore dots collection users dot doc and we'll pass it our request params dot ID and we'll do a delete on that item and once that is finished we will do response dot status and we'll pass back a 200 as a success successful deletion and send and as with everything else we will run our deploy script and I will be back as soon as that s finished so the function has finished uploading and now we're gonna test it it's all I'm gonna do is I'm just gonna grab this body and remove it and say none and I'm gonna change this to a delete request and since our route is exactly the same all I have to do is hit send and you'll see that our item was delete it out of the date now this is gonna wrap it up for the tutorial if you got any value out of this go ahead and smash that like and subscribe button and as always if you have any questions comments or concerns go ahead and leave them in the comment section below and until next time happy coding [Music]

Channel: Diligent Dev

Views: 49,539

Keywords: firebase function, firebase cloud function, firebase cloud function tutorial, firebase functions database

Id: iIVlRZIo2-c

Length: 20min 20sec (1220 seconds)

Published: Wed May 06 2020