UPDATE. See the latest basics video here: https://youtu.be/q5J5ho7YUhA

Master the basics of Firebase in 20 minutes. In this episode, we run through hosting, auth, firestore, storage, and cloud functions using nothing but plain JavaScript. https://angularfirebase.com/lessons/the-ultimate-beginners-guide-to-firebase/

- Firebase https://firebase.google.com/
- CLI Tools https://github.com/firebase/firebase-tools
2024-02-04T07:43:31.540Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
0363d856-1e7b-4f31-8ce0-2c0131446f3d
8f18f55ebe709f596267dae4e46061f0f1f8b0045e1a2ccadbb43f353938a13a
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Today I wanna do something I've never done on the channel and that's a basic level video for Firebase.
Over the past year, I've created close to a 100 videos covering intermediate to advanced level concepts, but I've never really talked about why I use Firebase and why I think it's an excellent platform for building apps.
I'm going to take you through all the main features using nothing but JavaScript and you don't really need to have any coding experience to follow along with this video.
5.
If you're new here make sure to like and subscribe and follow along with the code on angularfirebase.com.
So I originally started in web development when Ruby on Rails was powering things like Twitter and Airbnb.
At the time it seemed like magic because it made the back end so much easier to develop, but Firebase takes this to a whole new level by completely abstracting away the back end.
Firebase doesn't pay me to say these things.
I use it for my clients for three main reasons.
The first one is the developer experience.
It's well documented, easy to use, and the team has a really good culture of listening to developer feedback.
The second factor is minimization of cost.
Firebase is free for all of your small experimental projects and then scales up in a linear way based on your user growth and design choices.
I I really dislike platforms that get you in on a free tier and then start charging you $500 a month once you reach a certain threshold.
And the final factor is the maximization of time.
I want to create the most amount of value in the least amount of time, and I think Firebase facilitates that really well.
And hopefully, you'll agree with me there when we finish writing the code for this video.
File.
To follow along, you just need an editor like Versus Code and Node.
Js installed on your local system.
After that, you can go to Firebase and create a new project.
A project is just a container for resources on Google Cloud Platform, such as your database, file storage, web hosting, and things like that.
Fire.
You can manage all of your app resources from the Firebase Admin console.
And your project can span across multiple platforms.
Firebase provides software developer kits for the web, iOS, Android, Unity, and several others.
Your project is identified by the credentials that you see here, and they they can integrate seamlessly with other APIs on Google Cloud Platform.
So if you wanna implement something like Cloud Vision or Google Maps, you can do that with click of a button.
Now that we have our project created, we're going to install the Firebase command line tools by running npm install firebasetools flag g to install it globally.
Now I wanna show you how quick and easy it is to create and deploy a project from the command line.
So I've just opened up an empty folder in b s code, and then I'm pulling up the terminal window and running Firebase init hosting.
That's That's going to create a few files for us.
The first one is Firebase JSON, which holds all of our hosting roles.
And then, uh, Firebase RC file is just a script to identify our project.
The public folder with index HTML is our actual app.
What it's doing is importing the Firebase Web SDK in the head of the document.
And you can import these 1 by 1.
So if you only need the database, you don't have to import all the other modules as well.
File.
So that can be a big help with your page load performance.
Then you'll notice all these script tags have defer on them.
That just tells a web browser not to execute the script until the page is finished loading.
From there, if we go down to the body of the document, we have another script tag, which is going to have all the actual Firebase SDK resources initialized and available to us.
We're going to replace the script with our own basic JavaScript app.
But for now, let's go ahead and serve our app locally by running firebase serve.
5.
This is going to spin up a web server locally on port 5000.
We can just paste that into a browser and start testing our app locally.
You should see this default app, which is just the content directly in that index HTML file.
We can take this a step further and deploy our app to a live hosted URL that's accessible on the Internet.
All we have to do is run firebase deploy.
That'll give us back a URL, and now we can view our app live on the Internet.
And this is actually a lot more powerful than it seems on the surface because the app is deployed with an SSL certificate, so we immediately have support for HTTPS in the URL.
5.
In addition, it uses Google's content delivery network, which will cache and serve all of your static resources in a highly performant way.
Now that we know how to deploy our app, let's go back into the index HTML and delete all the boilerplate code except for the main imports in the head of the document.
5.
Then down in the body, I'm going to point our script tag to a new file called app JS.
That's where we're going to write all of our actual code.
Then we can create that file from the command line by running touch public/appjs.
The next thing I'm going to do is bring up the browser window side by side and run Firebase Serve so we can check out the changes that we make.
Now I wanna show you how you can use Firebase to manage your user authentication.
In the past, user auth was always a very difficult feature to implement.
But with Firebase, we can do it in a few lines of code.
I just have a simple HTML button here that will fire this Google login function when clicked.
Then inside of App JS, we wanna make sure to run our code after the document content has loaded because Firebase won't be available until after that point.
Once the content has loaded, we can access the Firebase resources under this Firebase namespace.
For example, if we call Firebase app and then console log it, it should give us an object with all of our Firebase credentials and other things attached to that object.
You don't have to do that, but if you wanna make sure that Firebase is available, that's one way to find out.
Before we can actually log in, we need to go into the Firebase console under authentication and enable the methods that we wanna use.
So in this case, we wanna use Google as the OAuth provider, but we could also do things like email password, anonymous, Twitter, Facebook, GitHub, etcetera.
From there, let's write a function that will log the user in.
The first thing we need to do is define the provider that we wanna use, which in this case would be the Firebase Auth Google Auth provider.
From there, we can reference the Firebase auth library and call sign in with pop up passing at that provider as an argument.
5.
And that's literally all the code that it takes to log in the user with Google.
This operation happens asynchronously, which means it returns a promise.
Whenever we have a promise, we can attach then to it, which will give us the user once that promise resolves.
So we're saying sign in with pop up, 5.
Then when we have a user, let's set that user as a variable.
Then we can write their display name to the DOM, and we'll also console log the user object.
All of the user information will come from the actual Google account.
If we go ahead and click our log in with Google button, it's going to bring up a pop up window where the user will log in to their actual Google account.
5.
Then it's going to execute any code inside of that then block.
Firebase uses JSON Web Tokens for authentication, which means there's an encrypted token on the browser now that identifies this user.
If you wanna see that token, you can just go into the browser and type in local storage, 5.
And you can see the current user session there.
JSON Web Tokens are much easier to work with compared to cookies, especially for JavaScript applications like Angular and React.
I won't get into the details here, but I do cover that in some of my more advanced videos.
If we go back into the Firebase console now, you'll see that our user is created in the Firebase authentication tab.
We can use this to disable accounts, update email templates if you're using email password auth, perform text message verification, and view some basic analytics.
5.
So that wraps up UserAuth.
Now let's move into the cornerstone of Firebase, which is its database.
As of October 2017, we have 2 different database options, both of them being NoSQL databases.
We have Realtime Database and Cloud Firestore.
5.
You can use both of them together, but more often than not, you're going to choose between 1 or the other.
And the best way to do that, in my opinion, is to analyze the pricing.
For the real time database, we're charged $5 per gigabyte stored and $1 per gigabyte downloaded.
For Firestore, on the other hand, we're charged 18¢ per gigabyte stored, but we're also charged for each individual document read and write operation.
So what that boils down to is that if you have a really simple dataset that is read frequently, you would use the real time database.
But for a larger, more complex relational dataset, you'd wanna use Cloud Firestore.
In the majority of cases, I find that Cloud Firestore ends up being the better choice, so that's where we're going to start.
5.
Enable the database and start it in test mode which is going to disable any security rules.
Then the actual database itself is structured as collections 5 documents.
It follows a pattern similar to MongoDB, which is the most widely adopted NoSQL database in the world.
And if you're interested in data modeling, check out episode 85.
The first thing we'll do is create a collection which is just a container for documents, 5.
And then we'll add our first document to it.
Every document has a unique ID, which you can create yourself or you can have it automatically generated.
In this case, I'm going to create myself and call it first post.
Then the actual data that we consume from our app will be set as fields on this document.
The structure is similar to a JavaScript object or an object in any other programming language.
We can then use these fields to pull a subset of documents from a collection based on whatever condition we wanna pass to it.
That'll make a little more sense when we start building some queries in our front end code.
5.
One of the coolest things about Firebase is that your user authentication system is directly tied to your database.
5.
Under the rules tab, you can write expressive statements that define the back end security logic for your app.
For example, if you had a certain set of documents that only a logged users should see.
You'd be able to do that here with a single line of code.
It's beyond the scope of this video, but needless to say, it's a very important part of building a fully secured app.
Then the last thing Firestore can do is build indices.
By default, you'll have an index for every field on a given document.
But if you want to query by multiple fields, you may need to create your own custom index.
Now getting back to our front end app, I'm going to replace the Firebase database import with Firestore.
And the first thing I wanna do is just retrieve and read that document that we created in the database console.
File.
So first, we make a reference to Firestore as a variable named DB.
Then we make a reference to the collection by calling DB collection posts.
5.
And then we reference the specific document ID, which I gave a custom ID of first post.
So at this point, we have a reference to the document, And we could use that reference to retrieve it, listen to it in real time, or update and delete it.
What we wanna do right now is just retrieve it and be done with it.
So to retrieve it, we just call get, which is an asynchronous operation that returns a promise that resolves with the actual document data that we saved in Firestore.
5.
So I'll set the data as a variable, and I'll write the title and timestamp to the browser window.
Now if we refresh the page, we should see that document information printed to the screen.
So that's pretty cool.
But one of the major benefits of Firebase is that we can listen to data changes in real time.
So if you have some data that's shared between multiple users and that data changes somewhere, all of your users are going to be notified at that exact moment of the change.
5.
That would be an extremely difficult feature to build from scratch, but we can do it with a few modifications to the code we just wrote.
5.
So instead of calling get, we're going to replace that with on snapshot.
Instead of returning a promise, this is going to return a real time stream that we can listen to with a callback function.
So we can get rid of then and we'll just copy and paste all of our previous code inside of this callback function.
Every time the document changes, it's going to emit a new document to this function, and we can handle it accordingly.
5.
In this case, the browser should write another line every time a change occurs in Firestore.
So let's go ahead and change the title.
And you can see here on the right that it's automatically updated in the browser.
If your app does anything that's real time in nature, this is going to be one of the most powerful aspects of Firebase for you.
In addition to reading documents, we can also update documents from our client side code.
What I'm going to do here is set up a form input.
And every time this input changes, it's going to run an update to Firestore.
So we'll set up a function called update post, and then we'll make a reference to the document just like we did before.
But this time, we'll call update and pass it the information that the user had typed into the form.
When data is updated from your app, Firestore does something really cool called optimistic updates or latency compensation.
If you have a real time listener on the data like we set up before, it will update the view immediately so your user doesn't have to wait for a server to respond, which might take a second or 2 and potentially hurt the user experience.
5.
In most cases, though, we're probably not going to be reading a single document, but trying to query a collection of documents.
To show you that, I'm creating a collection of products where every product has a price and a name.
One of the major benefits of Firestore is that you can query multiple documents in a very expressive way.
5.
Back in the code, we'll first make a reference to the products collection.
And then if we want to get a subset of the documents in that collection, we can call where.
5.
And where takes 3 different arguments.
1st, it's the field that we wanna sort by, which, in this case, is the price.
Then it takes an operator, which could be equal to, greater than, greater than or equal to, and so on.
Then the 3rd and final argument is the actual value.
So So in this case, we want all the products whose price is greater than $10.
Then just like we did with the document read, we can call get.
And instead of returning a single document, it's going to return an array of documents.
So really the only difference is that we need to loop over these documents to get the data for each one.
For each document in the array, I'm writing the name and price to the screen.
So we have our wrench and our chainsaw, which are both over $10.
5.
If we change the operator to greater than or equal to $10, then the query will also include products that are equal to $10.
If we want to check for gist equality, we can change the operator to equals, and then it's only going to return the hammer.
5.
In addition to the where method, we can also use order by to return documents in a specific order.
If we want to retrieve all of our products ordered from highest price to lowest price, then we can say order by price descending, and we'll get our products back in that order.
And we can also limit the number of documents that are returned, which is really important when you're working with a large collection.
Simply chain the limit method to any query, And that will cap the number of documents that come back in the array.
That wraps up the database section.
Now we're ready to get started with Firebase Storage.
5.
Storage is just a cloud storage bucket that is also tied to your Firebase project.
This is where you might put user generated content like uploaded images, videos, things like that.
So the first thing we wanna do is go into the rules section.
And currently, it's set up to only allow authenticated users to upload files, but we wanna change that.
For now, we're just going to let anybody upload files to our storage bucket.
Back in the index HTML in our front end app, I'm setting up a form input that is set to type file.
Then on the change event, we're going to run a function called upload file 5, and pass it this files as the argument.
I am also going to display an image tag that currently doesn't have a source, 5.
But we'll set its source asynchronously after the upload is complete.
In the JavaScript, we'll make a reference to the storage library.
In a similar way that we did with the database, we will reference a path in that storage bucket.
But in the storage bucket, we do that by calling child.
And then in this case, we'll just pass it a static image name of horse.jpeg.
With this reference, we can either upload file or download an existing file URL.
Our form input's going to return a file list, so we'll just take the first item of that list with item 0.
And then to upload the file, all we have to do is call the reference put file.
We can run code when the upload's complete by chaining then to it.
It's going to return some data about the upload itself including the snapshot download URL.
What we wanna do in this case is take that URL and then apply it to the source of that image tag that we set in the HTML.
If we go ahead and choose a file, it's going to start the upload, and then you'll see it updated in the document after a couple seconds.
If we jump back to the Firebase console, we can also see the image in the storage bucket there as well.
That was super easy.
And now we can get on to my favorite part of Firebase which is Cloud Functions.
We're going to do something very simple.
But if you wanna see Cloud Functions do things like hit machine learning APIs, handle payments, 5.
Send emails and things like that.
Check out the functions tag on the main website.
Functions can be thought of as your own Node.
Js server that runs on demand.
So instead of having 1 giant monolithic framework that handles all of your back end code, you write microservices that perform a specific function.
5.
And anything that you can do in Node.
Js, you can do in a function.
You can install any NPM packages you want into your functions environment, and the Node.
Js ecosystem is huge, so that opens the door for a lot of creativity.
We can initialize functions in our project by running Firebase init functions.
That's going to create a new directory called functions which isolates all of our back end code.
You can trigger functions in a variety of ways, but the way we're going to do it is with a Firestore database trigger.
What that means is we're going to listen to a specific document path.
And when a new document is created there, it's going to trigger that function code to run on the back end.
What we're going to do in this case is just send a message from the function back to the database.
The idea here is to show you how information can be shared between your back end code and your database.
Inside the functions directory, we have a package JSON which defines all of our third party npm dependencies.
Then we can define our functions in the index JS file.
And another unique thing we can do here is use the Firebase Admin SDK.
The Admin SDK can only be used in a back end environment like Cloud Function, and it will bypass any security rules that you've defined in your Firebase app.
The first thing we wanna do is say exports followed by the name of our function, which in this case is send a message.
Then we'll point this function to Firestore 5 on documents in the products collection.
The brackets make the product ID a wildcard, so it's going to run this function every time a new document is created.
5.
Inside this onCreate trigger, we need to return a Promise, and it's going to give us access to this event object that has some information about the incoming request.
5.
In Firestore, we can get the document ID from the event params, and then we can get the data inside that document from the event data data.
And in this demo, we're only interested in the name of the actual product.
So now the Cloud Functions receive some data, 5.
And it wants to send that data back as an update to the same document.
So to do that, we say admin Firestore And then reference that document path.
Then the last thing we'll do is return the actual update operation which is a promise.
5.
In other words, we're returning the update operation from this function, and the function will terminate as soon as that promise resolves.
5.
The last thing we need to do is run Firebase deploy functions, and that will send our code up to Firebase.
You can verify that it was deployed by going to the functions tab, and you should now see that function in there with some basic analytics.
Then if you switch over to Firestore and add a document to the product's collection, you should see the update run after a second or so of latency.
So that wraps up the main development resources in a Firebase project, authentication, database, storage, hosting, and functions.
But when it comes to native mobile apps, there's still a huge number of features that we haven't even looked at.
So let's quickly go over some of the highlights there.
The first area is testing and stability.
If you're like most developers, you probably don't enjoy writing a lot of tests.
But thankfully, Firebase has a robo testing tool where Where you can just upload your app build, and it will run a suite of tests that look for issues that commonly cause mobile apps to crash.
And you can review the screenshot results of every test.
5 The next thing is analytics, and there's a ton of analytic tools in Firebase.
But the one that really stands out to me is StreamView.
It gives you a global geographic representation of your entire user base in real time.
Then you might want to use trending data there to send push notifications tier users.
Firebase makes it easy to send out push notifications based on a user segment, specific topic, or just to a single device.
5.
You can also set up AB testing for your notifications and track the conversion rates of each one that you send.
I'm going to go ahead and wrap up my tour of Firebase there.
If this video helped you, please like and subscribe.
And if you're serious about building apps with Firebase, check out Angular Firebase Pro where you get access to a whole bunch of exclusive resources designed to help you build and ship your app faster.
Thanks for watching, and I'll see you soon.
5.

Speaker 0: Today I wanna do something I've never done on the channel and that's a basic level video for Firebase. Over the past year, I've created close to a 100 videos covering intermediate to advanced level concepts, but I've never really talked about why I use Firebase and why I think it's an excellent platform for building apps. I'm going to take you through all the main features using nothing but JavaScript and you don't really need to have any coding experience to follow along with this video. 5. If you're new here make sure to like and subscribe and follow along with the code on angularfirebase.com.

So I originally started in web development when Ruby on Rails was powering things like Twitter and Airbnb. At the time it seemed like magic because it made the back end so much easier to develop, but Firebase takes this to a whole new level by completely abstracting away the back end. Firebase doesn't pay me to say these things. I use it for my clients for three main reasons. The first one is the developer experience.

It's well documented, easy to use, and the team has a really good culture of listening to developer feedback. The second factor is minimization of cost. Firebase is free for all of your small experimental projects and then scales up in a linear way based on your user growth and design choices. I I really dislike platforms that get you in on a free tier and then start charging you $500 a month once you reach a certain threshold. And the final factor is the maximization of time.

I want to create the most amount of value in the least amount of time, and I think Firebase facilitates that really well. And hopefully, you'll agree with me there when we finish writing the code for this video. File. To follow along, you just need an editor like Versus Code and Node. Js installed on your local system.

After that, you can go to Firebase and create a new project. A project is just a container for resources on Google Cloud Platform, such as your database, file storage, web hosting, and things like that. Fire. You can manage all of your app resources from the Firebase Admin console. And your project can span across multiple platforms.

Firebase provides software developer kits for the web, iOS, Android, Unity, and several others. Your project is identified by the credentials that you see here, and they they can integrate seamlessly with other APIs on Google Cloud Platform. So if you wanna implement something like Cloud Vision or Google Maps, you can do that with click of a button. Now that we have our project created, we're going to install the Firebase command line tools by running npm install firebasetools flag g to install it globally. Now I wanna show you how quick and easy it is to create and deploy a project from the command line.

So I've just opened up an empty folder in b s code, and then I'm pulling up the terminal window and running Firebase init hosting. That's That's going to create a few files for us. The first one is Firebase JSON, which holds all of our hosting roles. And then, uh, Firebase RC file is just a script to identify our project. The public folder with index HTML is our actual app.

What it's doing is importing the Firebase Web SDK in the head of the document. And you can import these 1 by 1. So if you only need the database, you don't have to import all the other modules as well. File. So that can be a big help with your page load performance.

Then you'll notice all these script tags have defer on them. That just tells a web browser not to execute the script until the page is finished loading. From there, if we go down to the body of the document, we have another script tag, which is going to have all the actual Firebase SDK resources initialized and available to us. We're going to replace the script with our own basic JavaScript app. But for now, let's go ahead and serve our app locally by running firebase serve.

5. This is going to spin up a web server locally on port 5000. We can just paste that into a browser and start testing our app locally. You should see this default app, which is just the content directly in that index HTML file. We can take this a step further and deploy our app to a live hosted URL that's accessible on the Internet.

All we have to do is run firebase deploy. That'll give us back a URL, and now we can view our app live on the Internet. And this is actually a lot more powerful than it seems on the surface because the app is deployed with an SSL certificate, so we immediately have support for HTTPS in the URL. 5. In addition, it uses Google's content delivery network, which will cache and serve all of your static resources in a highly performant way.

Now that we know how to deploy our app, let's go back into the index HTML and delete all the boilerplate code except for the main imports in the head of the document. 5. Then down in the body, I'm going to point our script tag to a new file called app JS. That's where we're going to write all of our actual code. Then we can create that file from the command line by running touch public/appjs.

The next thing I'm going to do is bring up the browser window side by side and run Firebase Serve so we can check out the changes that we make. Now I wanna show you how you can use Firebase to manage your user authentication. In the past, user auth was always a very difficult feature to implement. But with Firebase, we can do it in a few lines of code. I just have a simple HTML button here that will fire this Google login function when clicked.

Then inside of App JS, we wanna make sure to run our code after the document content has loaded because Firebase won't be available until after that point. Once the content has loaded, we can access the Firebase resources under this Firebase namespace. For example, if we call Firebase app and then console log it, it should give us an object with all of our Firebase credentials and other things attached to that object. You don't have to do that, but if you wanna make sure that Firebase is available, that's one way to find out. Before we can actually log in, we need to go into the Firebase console under authentication and enable the methods that we wanna use.

So in this case, we wanna use Google as the OAuth provider, but we could also do things like email password, anonymous, Twitter, Facebook, GitHub, etcetera. From there, let's write a function that will log the user in. The first thing we need to do is define the provider that we wanna use, which in this case would be the Firebase Auth Google Auth provider. From there, we can reference the Firebase auth library and call sign in with pop up passing at that provider as an argument. 5.

And that's literally all the code that it takes to log in the user with Google. This operation happens asynchronously, which means it returns a promise. Whenever we have a promise, we can attach then to it, which will give us the user once that promise resolves. So we're saying sign in with pop up, 5. Then when we have a user, let's set that user as a variable.

Then we can write their display name to the DOM, and we'll also console log the user object. All of the user information will come from the actual Google account. If we go ahead and click our log in with Google button, it's going to bring up a pop up window where the user will log in to their actual Google account. 5. Then it's going to execute any code inside of that then block.

Firebase uses JSON Web Tokens for authentication, which means there's an encrypted token on the browser now that identifies this user. If you wanna see that token, you can just go into the browser and type in local storage, 5. And you can see the current user session there. JSON Web Tokens are much easier to work with compared to cookies, especially for JavaScript applications like Angular and React. I won't get into the details here, but I do cover that in some of my more advanced videos.

If we go back into the Firebase console now, you'll see that our user is created in the Firebase authentication tab. We can use this to disable accounts, update email templates if you're using email password auth, perform text message verification, and view some basic analytics. 5. So that wraps up UserAuth. Now let's move into the cornerstone of Firebase, which is its database.

As of October 2017, we have 2 different database options, both of them being NoSQL databases. We have Realtime Database and Cloud Firestore. 5. You can use both of them together, but more often than not, you're going to choose between 1 or the other. And the best way to do that, in my opinion, is to analyze the pricing.

For the real time database, we're charged $5 per gigabyte stored and $1 per gigabyte downloaded. For Firestore, on the other hand, we're charged 18¢ per gigabyte stored, but we're also charged for each individual document read and write operation. So what that boils down to is that if you have a really simple dataset that is read frequently, you would use the real time database. But for a larger, more complex relational dataset, you'd wanna use Cloud Firestore. In the majority of cases, I find that Cloud Firestore ends up being the better choice, so that's where we're going to start.

5. Enable the database and start it in test mode which is going to disable any security rules. Then the actual database itself is structured as collections 5 documents. It follows a pattern similar to MongoDB, which is the most widely adopted NoSQL database in the world. And if you're interested in data modeling, check out episode 85.

The first thing we'll do is create a collection which is just a container for documents, 5. And then we'll add our first document to it. Every document has a unique ID, which you can create yourself or you can have it automatically generated. In this case, I'm going to create myself and call it first post. Then the actual data that we consume from our app will be set as fields on this document.

The structure is similar to a JavaScript object or an object in any other programming language. We can then use these fields to pull a subset of documents from a collection based on whatever condition we wanna pass to it. That'll make a little more sense when we start building some queries in our front end code. 5. One of the coolest things about Firebase is that your user authentication system is directly tied to your database.

5. Under the rules tab, you can write expressive statements that define the back end security logic for your app. For example, if you had a certain set of documents that only a logged users should see. You'd be able to do that here with a single line of code. It's beyond the scope of this video, but needless to say, it's a very important part of building a fully secured app.

Then the last thing Firestore can do is build indices. By default, you'll have an index for every field on a given document. But if you want to query by multiple fields, you may need to create your own custom index. Now getting back to our front end app, I'm going to replace the Firebase database import with Firestore. And the first thing I wanna do is just retrieve and read that document that we created in the database console.

File. So first, we make a reference to Firestore as a variable named DB. Then we make a reference to the collection by calling DB collection posts. 5. And then we reference the specific document ID, which I gave a custom ID of first post.

So at this point, we have a reference to the document, And we could use that reference to retrieve it, listen to it in real time, or update and delete it. What we wanna do right now is just retrieve it and be done with it. So to retrieve it, we just call get, which is an asynchronous operation that returns a promise that resolves with the actual document data that we saved in Firestore. 5. So I'll set the data as a variable, and I'll write the title and timestamp to the browser window.

Now if we refresh the page, we should see that document information printed to the screen. So that's pretty cool. But one of the major benefits of Firebase is that we can listen to data changes in real time. So if you have some data that's shared between multiple users and that data changes somewhere, all of your users are going to be notified at that exact moment of the change. 5.

That would be an extremely difficult feature to build from scratch, but we can do it with a few modifications to the code we just wrote. 5. So instead of calling get, we're going to replace that with on snapshot. Instead of returning a promise, this is going to return a real time stream that we can listen to with a callback function. So we can get rid of then and we'll just copy and paste all of our previous code inside of this callback function.

Every time the document changes, it's going to emit a new document to this function, and we can handle it accordingly. 5. In this case, the browser should write another line every time a change occurs in Firestore. So let's go ahead and change the title. And you can see here on the right that it's automatically updated in the browser.

If your app does anything that's real time in nature, this is going to be one of the most powerful aspects of Firebase for you. In addition to reading documents, we can also update documents from our client side code. What I'm going to do here is set up a form input. And every time this input changes, it's going to run an update to Firestore. So we'll set up a function called update post, and then we'll make a reference to the document just like we did before.

But this time, we'll call update and pass it the information that the user had typed into the form. When data is updated from your app, Firestore does something really cool called optimistic updates or latency compensation. If you have a real time listener on the data like we set up before, it will update the view immediately so your user doesn't have to wait for a server to respond, which might take a second or 2 and potentially hurt the user experience. 5. In most cases, though, we're probably not going to be reading a single document, but trying to query a collection of documents.

To show you that, I'm creating a collection of products where every product has a price and a name. One of the major benefits of Firestore is that you can query multiple documents in a very expressive way. 5. Back in the code, we'll first make a reference to the products collection. And then if we want to get a subset of the documents in that collection, we can call where.

5. And where takes 3 different arguments. 1st, it's the field that we wanna sort by, which, in this case, is the price. Then it takes an operator, which could be equal to, greater than, greater than or equal to, and so on. Then the 3rd and final argument is the actual value.

So So in this case, we want all the products whose price is greater than $10. Then just like we did with the document read, we can call get. And instead of returning a single document, it's going to return an array of documents. So really the only difference is that we need to loop over these documents to get the data for each one. For each document in the array, I'm writing the name and price to the screen.

So we have our wrench and our chainsaw, which are both over $10. 5. If we change the operator to greater than or equal to $10, then the query will also include products that are equal to $10. If we want to check for gist equality, we can change the operator to equals, and then it's only going to return the hammer. 5.

In addition to the where method, we can also use order by to return documents in a specific order. If we want to retrieve all of our products ordered from highest price to lowest price, then we can say order by price descending, and we'll get our products back in that order. And we can also limit the number of documents that are returned, which is really important when you're working with a large collection. Simply chain the limit method to any query, And that will cap the number of documents that come back in the array. That wraps up the database section.

Now we're ready to get started with Firebase Storage. 5. Storage is just a cloud storage bucket that is also tied to your Firebase project. This is where you might put user generated content like uploaded images, videos, things like that. So the first thing we wanna do is go into the rules section.

And currently, it's set up to only allow authenticated users to upload files, but we wanna change that. For now, we're just going to let anybody upload files to our storage bucket. Back in the index HTML in our front end app, I'm setting up a form input that is set to type file. Then on the change event, we're going to run a function called upload file 5, and pass it this files as the argument. I am also going to display an image tag that currently doesn't have a source, 5.

But we'll set its source asynchronously after the upload is complete. In the JavaScript, we'll make a reference to the storage library. In a similar way that we did with the database, we will reference a path in that storage bucket. But in the storage bucket, we do that by calling child. And then in this case, we'll just pass it a static image name of horse.jpeg.

With this reference, we can either upload file or download an existing file URL. Our form input's going to return a file list, so we'll just take the first item of that list with item 0. And then to upload the file, all we have to do is call the reference put file. We can run code when the upload's complete by chaining then to it. It's going to return some data about the upload itself including the snapshot download URL.

What we wanna do in this case is take that URL and then apply it to the source of that image tag that we set in the HTML. If we go ahead and choose a file, it's going to start the upload, and then you'll see it updated in the document after a couple seconds. If we jump back to the Firebase console, we can also see the image in the storage bucket there as well. That was super easy. And now we can get on to my favorite part of Firebase which is Cloud Functions.

We're going to do something very simple. But if you wanna see Cloud Functions do things like hit machine learning APIs, handle payments, 5. Send emails and things like that. Check out the functions tag on the main website. Functions can be thought of as your own Node.

Js server that runs on demand. So instead of having 1 giant monolithic framework that handles all of your back end code, you write microservices that perform a specific function. 5. And anything that you can do in Node. Js, you can do in a function.

You can install any NPM packages you want into your functions environment, and the Node. Js ecosystem is huge, so that opens the door for a lot of creativity. We can initialize functions in our project by running Firebase init functions. That's going to create a new directory called functions which isolates all of our back end code. You can trigger functions in a variety of ways, but the way we're going to do it is with a Firestore database trigger.

What that means is we're going to listen to a specific document path. And when a new document is created there, it's going to trigger that function code to run on the back end. What we're going to do in this case is just send a message from the function back to the database. The idea here is to show you how information can be shared between your back end code and your database. Inside the functions directory, we have a package JSON which defines all of our third party npm dependencies.

Then we can define our functions in the index JS file. And another unique thing we can do here is use the Firebase Admin SDK. The Admin SDK can only be used in a back end environment like Cloud Function, and it will bypass any security rules that you've defined in your Firebase app. The first thing we wanna do is say exports followed by the name of our function, which in this case is send a message. Then we'll point this function to Firestore 5 on documents in the products collection.

The brackets make the product ID a wildcard, so it's going to run this function every time a new document is created. 5. Inside this onCreate trigger, we need to return a Promise, and it's going to give us access to this event object that has some information about the incoming request. 5. In Firestore, we can get the document ID from the event params, and then we can get the data inside that document from the event data data.

And in this demo, we're only interested in the name of the actual product. So now the Cloud Functions receive some data, 5. And it wants to send that data back as an update to the same document. So to do that, we say admin Firestore And then reference that document path. Then the last thing we'll do is return the actual update operation which is a promise.

5. In other words, we're returning the update operation from this function, and the function will terminate as soon as that promise resolves. 5. The last thing we need to do is run Firebase deploy functions, and that will send our code up to Firebase. You can verify that it was deployed by going to the functions tab, and you should now see that function in there with some basic analytics.

Then if you switch over to Firestore and add a document to the product's collection, you should see the update run after a second or so of latency. So that wraps up the main development resources in a Firebase project, authentication, database, storage, hosting, and functions. But when it comes to native mobile apps, there's still a huge number of features that we haven't even looked at. So let's quickly go over some of the highlights there. The first area is testing and stability.

If you're like most developers, you probably don't enjoy writing a lot of tests. But thankfully, Firebase has a robo testing tool where Where you can just upload your app build, and it will run a suite of tests that look for issues that commonly cause mobile apps to crash. And you can review the screenshot results of every test. 5 The next thing is analytics, and there's a ton of analytic tools in Firebase. But the one that really stands out to me is StreamView.

It gives you a global geographic representation of your entire user base in real time. Then you might want to use trending data there to send push notifications tier users. Firebase makes it easy to send out push notifications based on a user segment, specific topic, or just to a single device. 5. You can also set up AB testing for your notifications and track the conversion rates of each one that you send.

I'm going to go ahead and wrap up my tour of Firebase there. If this video helped you, please like and subscribe. And if you're serious about building apps with Firebase, check out Angular Firebase Pro where you get access to a whole bunch of exclusive resources designed to help you build and ship your app faster. Thanks for watching, and I'll see you soon. 5.
Today I wanna do something I've never done on the channel and that's a basic level video for Firebase. Over the past year, I've created close to a 100 videos covering intermediate to advanced level concepts, but I've never really talked about why I use Firebase and why I think it's an excellent platform for building apps. I'm going to take you through all the main features using nothing but JavaScript and you don't really need to have any coding experience to follow along with this video. 5. If you're new here make sure to like and subscribe and follow along with the code on angularfirebase.com. So I originally started in web development when Ruby on Rails was powering things like Twitter and Airbnb.
streaming
video gaming
youtube
multimedia
At the time it seemed like magic because it made the back end so much easier to develop, but Firebase takes this to a whole new level by completely abstracting away the back end. Firebase doesn't pay me to say these things. I use it for my clients for three main reasons. The first one is the developer experience. It's well documented, easy to use, and the team has a really good culture of listening to developer feedback. The second factor is minimization of cost. Firebase is free for all of your small experimental projects and then scales up in a linear way based on your user growth and design choices. I I really dislike platforms that get you in on a free tier and then start charging you $500 a month once you reach a certain threshold.
And the final factor is the maximization of time. I want to create the most amount of value in the least amount of time, and I think Firebase facilitates that really well. And hopefully, you'll agree with me there when we finish writing the code for this video. File. To follow along, you just need an editor like Versus Code and Node. Js installed on your local system. After that, you can go to Firebase and create a new project. A project is just a container for resources on Google Cloud Platform, such as your database, file storage, web hosting, and things like that.
software
software development
multimedia
video gaming
Fire. You can manage all of your app resources from the Firebase Admin console. And your project can span across multiple platforms. Firebase provides software developer kits for the web, iOS, Android, Unity, and several others. Your project is identified by the credentials that you see here, and they they can integrate seamlessly with other APIs on Google Cloud Platform. So if you wanna implement something like Cloud Vision or Google Maps, you can do that with click of a button. Now that we have our project created, we're going to install the Firebase command line tools by running npm install firebasetools flag g to install it globally. Now I wanna show you how quick and easy it is to create and deploy a project from the command line. So I've just opened up an empty folder in b s code, and then I'm pulling up the terminal window and running Firebase init hosting. That's That's going to create a few files for us. The first one is Firebase JSON, which holds all of our hosting roles. And then, uh, Firebase RC file is just a script to identify our project. The public folder with index HTML is our actual app. What it's doing is importing the Firebase Web SDK in the head of the document. And you can import these 1 by 1. So if you only need the database, you don't have to import all the other modules as well. File. So that can be a big help with your page load performance. Then you'll notice all these script tags have defer on them. That just tells a web browser not to execute the script until the page is finished loading. From there, if we go down to the body of the document, we have another script tag, which is going to have all the actual Firebase SDK resources initialized and available to us. We're going to replace the script with our own basic JavaScript app. But for now, let's go ahead and serve our app locally by running firebase serve.
5. This is going to spin up a web server locally on port 5000. We can just paste that into a browser and start testing our app locally. You should see this default app, which is just the content directly in that index HTML file. We can take this a step further and deploy our app to a live hosted URL that's accessible on the Internet.
internet
All we have to do is run firebase deploy. That'll give us back a URL, and now we can view our app live on the Internet. And this is actually a lot more powerful than it seems on the surface because the app is deployed with an SSL certificate, so we immediately have support for HTTPS in the URL. 5. In addition, it uses Google's content delivery network, which will cache and serve all of your static resources in a highly performant way. Now that we know how to deploy our app, let's go back into the index HTML and delete all the boilerplate code except for the main imports in the head of the document.
google
internet
copyright licenses
5. Then down in the body, I'm going to point our script tag to a new file called app JS. That's where we're going to write all of our actual code. Then we can create that file from the command line by running touch public/appjs. The next thing I'm going to do is bring up the browser window side by side and run Firebase Serve so we can check out the changes that we make. Now I wanna show you how you can use Firebase to manage your user authentication. In the past, user auth was always a very difficult feature to implement. But with Firebase, we can do it in a few lines of code. I just have a simple HTML button here that will fire this Google login function when clicked. Then inside of App JS, we wanna make sure to run our code after the document content has loaded because Firebase won't be available until after that point. Once the content has loaded, we can access the Firebase resources under this Firebase namespace. For example, if we call Firebase app and then console log it, it should give us an object with all of our Firebase credentials and other things attached to that object. You don't have to do that, but if you wanna make sure that Firebase is available, that's one way to find out. Before we can actually log in, we need to go into the Firebase console under authentication and enable the methods that we wanna use.
So in this case, we wanna use Google as the OAuth provider, but we could also do things like email password, anonymous, Twitter, Facebook, GitHub, etcetera. From there, let's write a function that will log the user in. The first thing we need to do is define the provider that we wanna use, which in this case would be the Firebase Auth Google Auth provider.
google
From there, we can reference the Firebase auth library and call sign in with pop up passing at that provider as an argument. 5. And that's literally all the code that it takes to log in the user with Google. This operation happens asynchronously, which means it returns a promise. Whenever we have a promise, we can attach then to it, which will give us the user once that promise resolves. So we're saying sign in with pop up, 5. Then when we have a user, let's set that user as a variable. Then we can write their display name to the DOM, and we'll also console log the user object.
All of the user information will come from the actual Google account. If we go ahead and click our log in with Google button, it's going to bring up a pop up window where the user will log in to their actual Google account. 5. Then it's going to execute any code inside of that then block. Firebase uses JSON Web Tokens for authentication, which means there's an encrypted token on the browser now that identifies this user. If you wanna see that token, you can just go into the browser and type in local storage, 5.
google
cryptocurrency
And you can see the current user session there. JSON Web Tokens are much easier to work with compared to cookies, especially for JavaScript applications like Angular and React. I won't get into the details here, but I do cover that in some of my more advanced videos. If we go back into the Firebase console now, you'll see that our user is created in the Firebase authentication tab. We can use this to disable accounts, update email templates if you're using email password auth, perform text message verification, and view some basic analytics.
5. So that wraps up UserAuth. Now let's move into the cornerstone of Firebase, which is its database. As of October 2017, we have 2 different database options, both of them being NoSQL databases. We have Realtime Database and Cloud Firestore. 5. You can use both of them together, but more often than not, you're going to choose between 1 or the other. And the best way to do that, in my opinion, is to analyze the pricing. For the real time database, we're charged $5 per gigabyte stored and $1 per gigabyte downloaded. For Firestore, on the other hand, we're charged 18¢ per gigabyte stored, but we're also charged for each individual document read and write operation. So what that boils down to is that if you have a really simple dataset that is read frequently, you would use the real time database. But for a larger, more complex relational dataset, you'd wanna use Cloud Firestore. In the majority of cases, I find that Cloud Firestore ends up being the better choice, so that's where we're going to start. 5. Enable the database and start it in test mode which is going to disable any security rules. Then the actual database itself is structured as collections 5 documents. It follows a pattern similar to MongoDB, which is the most widely adopted NoSQL database in the world. And if you're interested in data modeling, check out episode 85. The first thing we'll do is create a collection which is just a container for documents, 5. And then we'll add our first document to it.
databases
billing
amazon
data
data management
purchasing
data analysis
Every document has a unique ID, which you can create yourself or you can have it automatically generated. In this case, I'm going to create myself and call it first post.
Then the actual data that we consume from our app will be set as fields on this document. The structure is similar to a JavaScript object or an object in any other programming language. We can then use these fields to pull a subset of documents from a collection based on whatever condition we wanna pass to it. That'll make a little more sense when we start building some queries in our front end code. 5. One of the coolest things about Firebase is that your user authentication system is directly tied to your database. 5. Under the rules tab, you can write expressive statements that define the back end security logic for your app. For example, if you had a certain set of documents that only a logged users should see.
security
databases
data
You'd be able to do that here with a single line of code. It's beyond the scope of this video, but needless to say, it's a very important part of building a fully secured app. Then the last thing Firestore can do is build indices.
By default, you'll have an index for every field on a given document. But if you want to query by multiple fields, you may need to create your own custom index. Now getting back to our front end app, I'm going to replace the Firebase database import with Firestore. And the first thing I wanna do is just retrieve and read that document that we created in the database console.
databases
File. So first, we make a reference to Firestore as a variable named DB. Then we make a reference to the collection by calling DB collection posts. 5. And then we reference the specific document ID, which I gave a custom ID of first post. So at this point, we have a reference to the document, And we could use that reference to retrieve it, listen to it in real time, or update and delete it.
databases
What we wanna do right now is just retrieve it and be done with it. So to retrieve it, we just call get, which is an asynchronous operation that returns a promise that resolves with the actual document data that we saved in Firestore. 5. So I'll set the data as a variable, and I'll write the title and timestamp to the browser window. Now if we refresh the page, we should see that document information printed to the screen. So that's pretty cool. But one of the major benefits of Firebase is that we can listen to data changes in real time. So if you have some data that's shared between multiple users and that data changes somewhere, all of your users are going to be notified at that exact moment of the change. 5. That would be an extremely difficult feature to build from scratch, but we can do it with a few modifications to the code we just wrote. 5. So instead of calling get, we're going to replace that with on snapshot. Instead of returning a promise, this is going to return a real time stream that we can listen to with a callback function. So we can get rid of then and we'll just copy and paste all of our previous code inside of this callback function. Every time the document changes, it's going to emit a new document to this function, and we can handle it accordingly. 5. In this case, the browser should write another line every time a change occurs in Firestore. So let's go ahead and change the title. And you can see here on the right that it's automatically updated in the browser. If your app does anything that's real time in nature, this is going to be one of the most powerful aspects of Firebase for you. In addition to reading documents, we can also update documents from our client side code. What I'm going to do here is set up a form input. And every time this input changes, it's going to run an update to Firestore. So we'll set up a function called update post, and then we'll make a reference to the document just like we did before. But this time, we'll call update and pass it the information that the user had typed into the form. When data is updated from your app, Firestore does something really cool called optimistic updates or latency compensation. If you have a real time listener on the data like we set up before, it will update the view immediately so your user doesn't have to wait for a server to respond, which might take a second or 2 and potentially hurt the user experience.
5. In most cases, though, we're probably not going to be reading a single document, but trying to query a collection of documents. To show you that, I'm creating a collection of products where every product has a price and a name. One of the major benefits of Firestore is that you can query multiple documents in a very expressive way. 5. Back in the code, we'll first make a reference to the products collection. And then if we want to get a subset of the documents in that collection, we can call where.
commerce
publishing
5. And where takes 3 different arguments.
1st, it's the field that we wanna sort by, which, in this case, is the price. Then it takes an operator, which could be equal to, greater than, greater than or equal to, and so on. Then the 3rd and final argument is the actual value. So So in this case, we want all the products whose price is greater than $10. Then just like we did with the document read, we can call get. And instead of returning a single document, it's going to return an array of documents.
earnings
purchasing
revenue
sales
economics
taxes
billing
finance
So really the only difference is that we need to loop over these documents to get the data for each one. For each document in the array, I'm writing the name and price to the screen. So we have our wrench and our chainsaw, which are both over $10. 5. If we change the operator to greater than or equal to $10, then the query will also include products that are equal to $10. If we want to check for gist equality, we can change the operator to equals, and then it's only going to return the hammer. 5.
In addition to the where method, we can also use order by to return documents in a specific order. If we want to retrieve all of our products ordered from highest price to lowest price, then we can say order by price descending, and we'll get our products back in that order. And we can also limit the number of documents that are returned, which is really important when you're working with a large collection. Simply chain the limit method to any query, And that will cap the number of documents that come back in the array. That wraps up the database section.
databases
purchasing
Now we're ready to get started with Firebase Storage. 5. Storage is just a cloud storage bucket that is also tied to your Firebase project. This is where you might put user generated content like uploaded images, videos, things like that. So the first thing we wanna do is go into the rules section. And currently, it's set up to only allow authenticated users to upload files, but we wanna change that. For now, we're just going to let anybody upload files to our storage bucket. Back in the index HTML in our front end app, I'm setting up a form input that is set to type file. Then on the change event, we're going to run a function called upload file 5, and pass it this files as the argument. I am also going to display an image tag that currently doesn't have a source, 5. But we'll set its source asynchronously after the upload is complete. In the JavaScript, we'll make a reference to the storage library. In a similar way that we did with the database, we will reference a path in that storage bucket. But in the storage bucket, we do that by calling child. And then in this case, we'll just pass it a static image name of horse.jpeg. With this reference, we can either upload file or download an existing file URL. Our form input's going to return a file list, so we'll just take the first item of that list with item 0. And then to upload the file, all we have to do is call the reference put file. We can run code when the upload's complete by chaining then to it. It's going to return some data about the upload itself including the snapshot download URL. What we wanna do in this case is take that URL and then apply it to the source of that image tag that we set in the HTML. If we go ahead and choose a file, it's going to start the upload, and then you'll see it updated in the document after a couple seconds. If we jump back to the Firebase console, we can also see the image in the storage bucket there as well. That was super easy. And now we can get on to my favorite part of Firebase which is Cloud Functions. We're going to do something very simple. But if you wanna see Cloud Functions do things like hit machine learning APIs, handle payments, 5. Send emails and things like that. Check out the functions tag on the main website. Functions can be thought of as your own Node. Js server that runs on demand. So instead of having 1 giant monolithic framework that handles all of your back end code, you write microservices that perform a specific function. 5. And anything that you can do in Node. Js, you can do in a function. You can install any NPM packages you want into your functions environment, and the Node. Js ecosystem is huge, so that opens the door for a lot of creativity. We can initialize functions in our project by running Firebase init functions. That's going to create a new directory called functions which isolates all of our back end code. You can trigger functions in a variety of ways, but the way we're going to do it is with a Firestore database trigger. What that means is we're going to listen to a specific document path. And when a new document is created there, it's going to trigger that function code to run on the back end.
What we're going to do in this case is just send a message from the function back to the database. The idea here is to show you how information can be shared between your back end code and your database. Inside the functions directory, we have a package JSON which defines all of our third party npm dependencies.
databases
Then we can define our functions in the index JS file.
And another unique thing we can do here is use the Firebase Admin SDK. The Admin SDK can only be used in a back end environment like Cloud Function, and it will bypass any security rules that you've defined in your Firebase app. The first thing we wanna do is say exports followed by the name of our function, which in this case is send a message. Then we'll point this function to Firestore 5 on documents in the products collection. The brackets make the product ID a wildcard, so it's going to run this function every time a new document is created.
trade
commerce
security
products
shipping
patents
5. Inside this onCreate trigger, we need to return a Promise, and it's going to give us access to this event object that has some information about the incoming request. 5. In Firestore, we can get the document ID from the event params, and then we can get the data inside that document from the event data data.
And in this demo, we're only interested in the name of the actual product. So now the Cloud Functions receive some data, 5. And it wants to send that data back as an update to the same document. So to do that, we say admin Firestore And then reference that document path.
data management
Then the last thing we'll do is return the actual update operation which is a promise. 5. In other words, we're returning the update operation from this function, and the function will terminate as soon as that promise resolves. 5. The last thing we need to do is run Firebase deploy functions, and that will send our code up to Firebase. You can verify that it was deployed by going to the functions tab, and you should now see that function in there with some basic analytics. Then if you switch over to Firestore and add a document to the product's collection, you should see the update run after a second or so of latency. So that wraps up the main development resources in a Firebase project, authentication, database, storage, hosting, and functions. But when it comes to native mobile apps, there's still a huge number of features that we haven't even looked at. So let's quickly go over some of the highlights there. The first area is testing and stability. If you're like most developers, you probably don't enjoy writing a lot of tests. But thankfully, Firebase has a robo testing tool where Where you can just upload your app build, and it will run a suite of tests that look for issues that commonly cause mobile apps to crash.
And you can review the screenshot results of every test. 5 The next thing is analytics, and there's a ton of analytic tools in Firebase. But the one that really stands out to me is StreamView. It gives you a global geographic representation of your entire user base in real time.
data analysis
visualization
streaming
data
data management
Then you might want to use trending data there to send push notifications tier users. Firebase makes it easy to send out push notifications based on a user segment, specific topic, or just to a single device. 5. You can also set up AB testing for your notifications and track the conversion rates of each one that you send. I'm going to go ahead and wrap up my tour of Firebase there.
If this video helped you, please like and subscribe. And if you're serious about building apps with Firebase, check out Angular Firebase Pro where you get access to a whole bunch of exclusive resources designed to help you build and ship your app faster. Thanks for watching, and I'll see you soon. 5.
youtube
seasons
Today I wanna do something I've never done on the channel and that's a basic level video for Firebase. Over the past year, I've created close to a 100 videos covering intermediate to advanced level concepts, but I've never really talked about why I use Firebase and why I think it's an excellent platform for building apps. I'm going to take you through all the main features using nothing but JavaScript and you don't really need to have any coding experience to follow along with this video. 5. If you're new here make sure to like and subscribe and follow along with the code on angularfirebase.com. So I originally started in web development when Ruby on Rails was powering things like Twitter and Airbnb. At the time it seemed like magic because it made the back end so much easier to develop, but Firebase takes this to a whole new level by completely abstracting away the back end. Firebase doesn't pay me to say these things. I use it for my clients for three main reasons. The first one is the developer experience. It's well documented, easy to use, and the team has a really good culture of listening to developer feedback. The second factor is minimization of cost. Firebase is free for all of your small experimental projects and then scales up in a linear way based on your user growth and design choices. I I really dislike platforms that get you in on a free tier and then start charging you $500 a month once you reach a certain threshold. And the final factor is the maximization of time. I want to create the most amount of value in the least amount of time, and I think Firebase facilitates that really well. And hopefully, you'll agree with me there when we finish writing the code for this video. File. To follow along, you just need an editor like Versus Code and Node. Js installed on your local system. After that, you can go to Firebase and create a new project. A project is just a container for resources on Google Cloud Platform, such as your database, file storage, web hosting, and things like that. Fire. You can manage all of your app resources from the Firebase Admin console. And your project can span across multiple platforms. Firebase provides software developer kits for the web, iOS, Android, Unity, and several others. Your project is identified by the credentials that you see here, and they they can integrate seamlessly with other APIs on Google Cloud Platform. So if you wanna implement something like Cloud Vision or Google Maps, you can do that with click of a button. Now that we have our project created, we're going to install the Firebase command line tools by running npm install firebasetools flag g to install it globally. Now I wanna show you how quick and easy it is to create and deploy a project from the command line. So I've just opened up an empty folder in b s code, and then I'm pulling up the terminal window and running Firebase init hosting. That's That's going to create a few files for us. The first one is Firebase JSON, which holds all of our hosting roles. And then, uh, Firebase RC file is just a script to identify our project. The public folder with index HTML is our actual app. What it's doing is importing the Firebase Web SDK in the head of the document. And you can import these 1 by 1. So if you only need the database, you don't have to import all the other modules as well. File. So that can be a big help with your page load performance. Then you'll notice all these script tags have defer on them. That just tells a web browser not to execute the script until the page is finished loading. From there, if we go down to the body of the document, we have another script tag, which is going to have all the actual Firebase SDK resources initialized and available to us. We're going to replace the script with our own basic JavaScript app. But for now, let's go ahead and serve our app locally by running firebase serve. 5. This is going to spin up a web server locally on port 5000. We can just paste that into a browser and start testing our app locally. You should see this default app, which is just the content directly in that index HTML file. We can take this a step further and deploy our app to a live hosted URL that's accessible on the Internet. All we have to do is run firebase deploy. That'll give us back a URL, and now we can view our app live on the Internet. And this is actually a lot more powerful than it seems on the surface because the app is deployed with an SSL certificate, so we immediately have support for HTTPS in the URL. 5. In addition, it uses Google's content delivery network, which will cache and serve all of your static resources in a highly performant way. Now that we know how to deploy our app, let's go back into the index HTML and delete all the boilerplate code except for the main imports in the head of the document. 5. Then down in the body, I'm going to point our script tag to a new file called app JS. That's where we're going to write all of our actual code. Then we can create that file from the command line by running touch public/appjs. The next thing I'm going to do is bring up the browser window side by side and run Firebase Serve so we can check out the changes that we make. Now I wanna show you how you can use Firebase to manage your user authentication. In the past, user auth was always a very difficult feature to implement. But with Firebase, we can do it in a few lines of code. I just have a simple HTML button here that will fire this Google login function when clicked. Then inside of App JS, we wanna make sure to run our code after the document content has loaded because Firebase won't be available until after that point. Once the content has loaded, we can access the Firebase resources under this Firebase namespace. For example, if we call Firebase app and then console log it, it should give us an object with all of our Firebase credentials and other things attached to that object. You don't have to do that, but if you wanna make sure that Firebase is available, that's one way to find out. Before we can actually log in, we need to go into the Firebase console under authentication and enable the methods that we wanna use. So in this case, we wanna use Google as the OAuth provider, but we could also do things like email password, anonymous, Twitter, Facebook, GitHub, etcetera. From there, let's write a function that will log the user in. The first thing we need to do is define the provider that we wanna use, which in this case would be the Firebase Auth Google Auth provider. From there, we can reference the Firebase auth library and call sign in with pop up passing at that provider as an argument. 5. And that's literally all the code that it takes to log in the user with Google. This operation happens asynchronously, which means it returns a promise. Whenever we have a promise, we can attach then to it, which will give us the user once that promise resolves. So we're saying sign in with pop up, 5. Then when we have a user, let's set that user as a variable. Then we can write their display name to the DOM, and we'll also console log the user object. All of the user information will come from the actual Google account. If we go ahead and click our log in with Google button, it's going to bring up a pop up window where the user will log in to their actual Google account. 5. Then it's going to execute any code inside of that then block. Firebase uses JSON Web Tokens for authentication, which means there's an encrypted token on the browser now that identifies this user. If you wanna see that token, you can just go into the browser and type in local storage, 5. And you can see the current user session there. JSON Web Tokens are much easier to work with compared to cookies, especially for JavaScript applications like Angular and React. I won't get into the details here, but I do cover that in some of my more advanced videos. If we go back into the Firebase console now, you'll see that our user is created in the Firebase authentication tab. We can use this to disable accounts, update email templates if you're using email password auth, perform text message verification, and view some basic analytics. 5. So that wraps up UserAuth. Now let's move into the cornerstone of Firebase, which is its database. As of October 2017, we have 2 different database options, both of them being NoSQL databases. We have Realtime Database and Cloud Firestore. 5. You can use both of them together, but more often than not, you're going to choose between 1 or the other. And the best way to do that, in my opinion, is to analyze the pricing. For the real time database, we're charged $5 per gigabyte stored and $1 per gigabyte downloaded. For Firestore, on the other hand, we're charged 18¢ per gigabyte stored, but we're also charged for each individual document read and write operation. So what that boils down to is that if you have a really simple dataset that is read frequently, you would use the real time database. But for a larger, more complex relational dataset, you'd wanna use Cloud Firestore. In the majority of cases, I find that Cloud Firestore ends up being the better choice, so that's where we're going to start. 5. Enable the database and start it in test mode which is going to disable any security rules. Then the actual database itself is structured as collections 5 documents. It follows a pattern similar to MongoDB, which is the most widely adopted NoSQL database in the world. And if you're interested in data modeling, check out episode 85. The first thing we'll do is create a collection which is just a container for documents, 5. And then we'll add our first document to it. Every document has a unique ID, which you can create yourself or you can have it automatically generated. In this case, I'm going to create myself and call it first post. Then the actual data that we consume from our app will be set as fields on this document. The structure is similar to a JavaScript object or an object in any other programming language. We can then use these fields to pull a subset of documents from a collection based on whatever condition we wanna pass to it. That'll make a little more sense when we start building some queries in our front end code. 5. One of the coolest things about Firebase is that your user authentication system is directly tied to your database. 5. Under the rules tab, you can write expressive statements that define the back end security logic for your app. For example, if you had a certain set of documents that only a logged users should see. You'd be able to do that here with a single line of code. It's beyond the scope of this video, but needless to say, it's a very important part of building a fully secured app. Then the last thing Firestore can do is build indices. By default, you'll have an index for every field on a given document. But if you want to query by multiple fields, you may need to create your own custom index. Now getting back to our front end app, I'm going to replace the Firebase database import with Firestore. And the first thing I wanna do is just retrieve and read that document that we created in the database console. File. So first, we make a reference to Firestore as a variable named DB. Then we make a reference to the collection by calling DB collection posts. 5. And then we reference the specific document ID, which I gave a custom ID of first post. So at this point, we have a reference to the document, And we could use that reference to retrieve it, listen to it in real time, or update and delete it. What we wanna do right now is just retrieve it and be done with it. So to retrieve it, we just call get, which is an asynchronous operation that returns a promise that resolves with the actual document data that we saved in Firestore. 5. So I'll set the data as a variable, and I'll write the title and timestamp to the browser window. Now if we refresh the page, we should see that document information printed to the screen. So that's pretty cool. But one of the major benefits of Firebase is that we can listen to data changes in real time. So if you have some data that's shared between multiple users and that data changes somewhere, all of your users are going to be notified at that exact moment of the change. 5. That would be an extremely difficult feature to build from scratch, but we can do it with a few modifications to the code we just wrote. 5. So instead of calling get, we're going to replace that with on snapshot. Instead of returning a promise, this is going to return a real time stream that we can listen to with a callback function. So we can get rid of then and we'll just copy and paste all of our previous code inside of this callback function. Every time the document changes, it's going to emit a new document to this function, and we can handle it accordingly. 5. In this case, the browser should write another line every time a change occurs in Firestore. So let's go ahead and change the title. And you can see here on the right that it's automatically updated in the browser. If your app does anything that's real time in nature, this is going to be one of the most powerful aspects of Firebase for you. In addition to reading documents, we can also update documents from our client side code. What I'm going to do here is set up a form input. And every time this input changes, it's going to run an update to Firestore. So we'll set up a function called update post, and then we'll make a reference to the document just like we did before. But this time, we'll call update and pass it the information that the user had typed into the form. When data is updated from your app, Firestore does something really cool called optimistic updates or latency compensation. If you have a real time listener on the data like we set up before, it will update the view immediately so your user doesn't have to wait for a server to respond, which might take a second or 2 and potentially hurt the user experience. 5. In most cases, though, we're probably not going to be reading a single document, but trying to query a collection of documents. To show you that, I'm creating a collection of products where every product has a price and a name. One of the major benefits of Firestore is that you can query multiple documents in a very expressive way. 5. Back in the code, we'll first make a reference to the products collection. And then if we want to get a subset of the documents in that collection, we can call where. 5. And where takes 3 different arguments. 1st, it's the field that we wanna sort by, which, in this case, is the price. Then it takes an operator, which could be equal to, greater than, greater than or equal to, and so on. Then the 3rd and final argument is the actual value. So So in this case, we want all the products whose price is greater than $10. Then just like we did with the document read, we can call get. And instead of returning a single document, it's going to return an array of documents. So really the only difference is that we need to loop over these documents to get the data for each one. For each document in the array, I'm writing the name and price to the screen. So we have our wrench and our chainsaw, which are both over $10. 5. If we change the operator to greater than or equal to $10, then the query will also include products that are equal to $10. If we want to check for gist equality, we can change the operator to equals, and then it's only going to return the hammer. 5. In addition to the where method, we can also use order by to return documents in a specific order. If we want to retrieve all of our products ordered from highest price to lowest price, then we can say order by price descending, and we'll get our products back in that order. And we can also limit the number of documents that are returned, which is really important when you're working with a large collection. Simply chain the limit method to any query, And that will cap the number of documents that come back in the array. That wraps up the database section. Now we're ready to get started with Firebase Storage. 5. Storage is just a cloud storage bucket that is also tied to your Firebase project. This is where you might put user generated content like uploaded images, videos, things like that. So the first thing we wanna do is go into the rules section. And currently, it's set up to only allow authenticated users to upload files, but we wanna change that. For now, we're just going to let anybody upload files to our storage bucket. Back in the index HTML in our front end app, I'm setting up a form input that is set to type file. Then on the change event, we're going to run a function called upload file 5, and pass it this files as the argument. I am also going to display an image tag that currently doesn't have a source, 5. But we'll set its source asynchronously after the upload is complete. In the JavaScript, we'll make a reference to the storage library. In a similar way that we did with the database, we will reference a path in that storage bucket. But in the storage bucket, we do that by calling child. And then in this case, we'll just pass it a static image name of horse.jpeg. With this reference, we can either upload file or download an existing file URL. Our form input's going to return a file list, so we'll just take the first item of that list with item 0. And then to upload the file, all we have to do is call the reference put file. We can run code when the upload's complete by chaining then to it. It's going to return some data about the upload itself including the snapshot download URL. What we wanna do in this case is take that URL and then apply it to the source of that image tag that we set in the HTML. If we go ahead and choose a file, it's going to start the upload, and then you'll see it updated in the document after a couple seconds. If we jump back to the Firebase console, we can also see the image in the storage bucket there as well. That was super easy. And now we can get on to my favorite part of Firebase which is Cloud Functions. We're going to do something very simple. But if you wanna see Cloud Functions do things like hit machine learning APIs, handle payments, 5. Send emails and things like that. Check out the functions tag on the main website. Functions can be thought of as your own Node. Js server that runs on demand. So instead of having 1 giant monolithic framework that handles all of your back end code, you write microservices that perform a specific function. 5. And anything that you can do in Node. Js, you can do in a function. You can install any NPM packages you want into your functions environment, and the Node. Js ecosystem is huge, so that opens the door for a lot of creativity. We can initialize functions in our project by running Firebase init functions. That's going to create a new directory called functions which isolates all of our back end code. You can trigger functions in a variety of ways, but the way we're going to do it is with a Firestore database trigger. What that means is we're going to listen to a specific document path. And when a new document is created there, it's going to trigger that function code to run on the back end. What we're going to do in this case is just send a message from the function back to the database. The idea here is to show you how information can be shared between your back end code and your database. Inside the functions directory, we have a package JSON which defines all of our third party npm dependencies. Then we can define our functions in the index JS file. And another unique thing we can do here is use the Firebase Admin SDK. The Admin SDK can only be used in a back end environment like Cloud Function, and it will bypass any security rules that you've defined in your Firebase app. The first thing we wanna do is say exports followed by the name of our function, which in this case is send a message. Then we'll point this function to Firestore 5 on documents in the products collection. The brackets make the product ID a wildcard, so it's going to run this function every time a new document is created. 5. Inside this onCreate trigger, we need to return a Promise, and it's going to give us access to this event object that has some information about the incoming request. 5. In Firestore, we can get the document ID from the event params, and then we can get the data inside that document from the event data data. And in this demo, we're only interested in the name of the actual product. So now the Cloud Functions receive some data, 5. And it wants to send that data back as an update to the same document. So to do that, we say admin Firestore And then reference that document path. Then the last thing we'll do is return the actual update operation which is a promise. 5. In other words, we're returning the update operation from this function, and the function will terminate as soon as that promise resolves. 5. The last thing we need to do is run Firebase deploy functions, and that will send our code up to Firebase. You can verify that it was deployed by going to the functions tab, and you should now see that function in there with some basic analytics. Then if you switch over to Firestore and add a document to the product's collection, you should see the update run after a second or so of latency. So that wraps up the main development resources in a Firebase project, authentication, database, storage, hosting, and functions. But when it comes to native mobile apps, there's still a huge number of features that we haven't even looked at. So let's quickly go over some of the highlights there. The first area is testing and stability. If you're like most developers, you probably don't enjoy writing a lot of tests. But thankfully, Firebase has a robo testing tool where Where you can just upload your app build, and it will run a suite of tests that look for issues that commonly cause mobile apps to crash. And you can review the screenshot results of every test. 5 The next thing is analytics, and there's a ton of analytic tools in Firebase. But the one that really stands out to me is StreamView. It gives you a global geographic representation of your entire user base in real time. Then you might want to use trending data there to send push notifications tier users. Firebase makes it easy to send out push notifications based on a user segment, specific topic, or just to a single device. 5. You can also set up AB testing for your notifications and track the conversion rates of each one that you send. I'm going to go ahead and wrap up my tour of Firebase there. If this video helped you, please like and subscribe. And if you're serious about building apps with Firebase, check out Angular Firebase Pro where you get access to a whole bunch of exclusive resources designed to help you build and ship your app faster. Thanks for watching, and I'll see you soon. 5.
Today
today
I
i
wanna
wanna
do
do
something
something
I've
i've
never
never
done
done
on
on
the
the
channel
channel
and
and
that's
that's
a
a
basic
basic
level
level
video
video
for
for
Firebase.
firebase
Over
over
the
the
past
past
year,
year
I've
i've
created
created
close
close
to
to
a
a
100
100
videos
videos
covering
covering
intermediate
intermediate
to
to
advanced
advanced
level
level
concepts,
concepts
but
but
I've
i've
never
never
really
really
talked
talked
about
about
why
why
I
i
use
use
Firebase
firebase
and
and
why
why
I
i
think
think
it's
it's
an
an
excellent
excellent
platform
platform
for
for
building
building
apps.
apps
I'm
i'm
going
going
to
to
take
take
you
you
through
through
all
all
the
the
main
main
features
features
using
using
nothing
nothing
but
but
JavaScript
javascript
and
and
you
you
don't
don't
really
really
need
need
to
to
have
have
any
any
coding
coding
experience
experience
to
to
follow
follow
along
along
with
with
this
this
video.
video
5.
5
If
if
you're
you're
new
new
here
here
make
make
sure
sure
to
to
like
like
and
and
subscribe
subscribe
and
and
follow
follow
along
along
with
with
the
the
code
code
on
on
angularfirebase.com.
angularfirebase.com
So
so
I
i
originally
originally
started
started
in
in
web
web
development
development
when
when
Ruby
ruby
on
on
Rails
rails
was
was
powering
powering
things
things
like
like
Twitter
twitter
and
and
Airbnb.
airbnb
At
at
the
the
time
time
it
it
seemed
seemed
like
like
magic
magic
because
because
it
it
made
made
the
the
back
back
end
end
so
so
much
much
easier
easier
to
to
develop,
develop
but
but
Firebase
firebase
takes
takes
this
this
to
to
a
a
whole
whole
new
new
level
level
by
by
completely
completely
abstracting
abstracting
away
away
the
the
back
back
end.
end
Firebase
firebase
doesn't
doesn't
pay
pay
me
me
to
to
say
say
these
these
things.
things
I
i
use
use
it
it
for
for
my
my
clients
clients
for
for
three
three
main
main
reasons.
reasons
The
the
first
first
one
one
is
is
the
the
developer
developer
experience.
experience
It's
it's
well
well
documented,
documented
easy
easy
to
to
use,
use
and
and
the
the
team
team
has
has
a
a
really
really
good
good
culture
culture
of
of
listening
listening
to
to
developer
developer
feedback.
feedback
The
the
second
second
factor
factor
is
is
minimization
minimization
of
of
cost.
cost
Firebase
firebase
is
is
free
free
for
for
all
all
of
of
your
your
small
small
experimental
experimental
projects
projects
and
and
then
then
scales
scales
up
up
in
in
a
a
linear
linear
way
way
based
based
on
on
your
your
user
user
growth
growth
and
and
design
design
choices.
choices
I
i
I
i
really
really
dislike
dislike
platforms
platforms
that
that
get
get
you
you
in
in
on
on
a
a
free
free
tier
tier
and
and
then
then
start
start
charging
charging
you
you
$500
$500
a
a
month
month
once
once
you
you
reach
reach
a
a
certain
certain
threshold.
threshold
And
and
the
the
final
final
factor
factor
is
is
the
the
maximization
maximization
of
of
time.
time
I
i
want
want
to
to
create
create
the
the
most
most
amount
amount
of
of
value
value
in
in
the
the
least
least
amount
amount
of
of
time,
time
and
and
I
i
think
think
Firebase
firebase
facilitates
facilitates
that
that
really
really
well.
well
And
and
hopefully,
hopefully
you'll
you'll
agree
agree
with
with
me
me
there
there
when
when
we
we
finish
finish
writing
writing
the
the
code
code
for
for
this
this
video.
video
File.
file
To
to
follow
follow
along,
along
you
you
just
just
need
need
an
an
editor
editor
like
like
Versus
versus
Code
code
and
and
Node.
node
Js
js
installed
installed
on
on
your
your
local
local
system.
system
After
after
that,
that
you
you
can
can
go
go
to
to
Firebase
firebase
and
and
create
create
a
a
new
new
project.
project
A
a
project
project
is
is
just
just
a
a
container
container
for
for
resources
resources
on
on
Google
google
Cloud
cloud
Platform,
platform
such
such
as
as
your
your
database,
database
file
file
storage,
storage
web
web
hosting,
hosting
and
and
things
things
like
like
that.
that
Fire.
fire
You
you
can
can
manage
manage
all
all
of
of
your
your
app
app
resources
resources
from
from
the
the
Firebase
firebase
Admin
admin
console.
console
And
and
your
your
project
project
can
can
span
span
across
across
multiple
multiple
platforms.
platforms
Firebase
firebase
provides
provides
software
software
developer
developer
kits
kits
for
for
the
the
web,
web
iOS,
ios
Android,
android
Unity,
unity
and
and
several
several
others.
others
Your
your
project
project
is
is
identified
identified
by
by
the
the
credentials
credentials
that
that
you
you
see
see
here,
here
and
and
they
they
they
they
can
can
integrate
integrate
seamlessly
seamlessly
with
with
other
other
APIs
apis
on
on
Google
google
Cloud
cloud
Platform.
platform
So
so
if
if
you
you
wanna
wanna
implement
implement
something
something
like
like
Cloud
cloud
Vision
vision
or
or
Google
google
Maps,
maps
you
you
can
can
do
do
that
that
with
with
click
click
of
of
a
a
button.
button
Now
now
that
that
we
we
have
have
our
our
project
project
created,
created
we're
we're
going
going
to
to
install
install
the
the
Firebase
firebase
command
command
line
line
tools
tools
by
by
running
running
npm
npm
install
install
firebasetools
firebasetools
flag
flag
g
g
to
to
install
install
it
it
globally.
globally
Now
now
I
i
wanna
wanna
show
show
you
you
how
how
quick
quick
and
and
easy
easy
it
it
is
is
to
to
create
create
and
and
deploy
deploy
a
a
project
project
from
from
the
the
command
command
line.
line
So
so
I've
i've
just
just
opened
opened
up
up
an
an
empty
empty
folder
folder
in
in
b
b
s
s
code,
code
and
and
then
then
I'm
i'm
pulling
pulling
up
up
the
the
terminal
terminal
window
window
and
and
running
running
Firebase
firebase
init
init
hosting.
hosting
That's
that's
That's
that's
going
going
to
to
create
create
a
a
few
few
files
files
for
for
us.
us
The
the
first
first
one
one
is
is
Firebase
firebase
JSON,
json
which
which
holds
holds
all
all
of
of
our
our
hosting
hosting
roles.
roles
And
and
then,
then
uh,
uh
Firebase
firebase
RC
rc
file
file
is
is
just
just
a
a
script
script
to
to
identify
identify
our
our
project.
project
The
the
public
public
folder
folder
with
with
index
index
HTML
html
is
is
our
our
actual
actual
app.
app
What
what
it's
it's
doing
doing
is
is
importing
importing
the
the
Firebase
firebase
Web
web
SDK
sdk
in
in
the
the
head
head
of
of
the
the
document.
document
And
and
you
you
can
can
import
import
these
these
1
1
by
by
1.
1
So
so
if
if
you
you
only
only
need
need
the
the
database,
database
you
you
don't
don't
have
have
to
to
import
import
all
all
the
the
other
other
modules
modules
as
as
well.
well
File.
file
So
so
that
that
can
can
be
be
a
a
big
big
help
help
with
with
your
your
page
page
load
load
performance.
performance
Then
then
you'll
you'll
notice
notice
all
all
these
these
script
script
tags
tags
have
have
defer
defer
on
on
them.
them
That
that
just
just
tells
tells
a
a
web
web
browser
browser
not
not
to
to
execute
execute
the
the
script
script
until
until
the
the
page
page
is
is
finished
finished
loading.
loading
From
from
there,
there
if
if
we
we
go
go
down
down
to
to
the
the
body
body
of
of
the
the
document,
document
we
we
have
have
another
another
script
script
tag,
tag
which
which
is
is
going
going
to
to
have
have
all
all
the
the
actual
actual
Firebase
firebase
SDK
sdk
resources
resources
initialized
initialized
and
and
available
available
to
to
us.
us
We're
we're
going
going
to
to
replace
replace
the
the
script
script
with
with
our
our
own
own
basic
basic
JavaScript
javascript
app.
app
But
but
for
for
now,
now
let's
let's
go
go
ahead
ahead
and
and
serve
serve
our
our
app
app
locally
locally
by
by
running
running
firebase
firebase
serve.
serve
5.
5
This
this
is
is
going
going
to
to
spin
spin
up
up
a
a
web
web
server
server
locally
locally
on
on
port
port
5000.
5000
We
we
can
can
just
just
paste
paste
that
that
into
into
a
a
browser
browser
and
and
start
start
testing
testing
our
our
app
app
locally.
locally
You
you
should
should
see
see
this
this
default
default
app,
app
which
which
is
is
just
just
the
the
content
content
directly
directly
in
in
that
that
index
index
HTML
html
file.
file
We
we
can
can
take
take
this
this
a
a
step
step
further
further
and
and
deploy
deploy
our
our
app
app
to
to
a
a
live
live
hosted
hosted
URL
url
that's
that's
accessible
accessible
on
on
the
the
Internet.
internet
All
all
we
we
have
have
to
to
do
do
is
is
run
run
firebase
firebase
deploy.
deploy
That'll
that'll
give
give
us
us
back
back
a
a
URL,
url
and
and
now
now
we
we
can
can
view
view
our
our
app
app
live
live
on
on
the
the
Internet.
internet
And
and
this
this
is
is
actually
actually
a
a
lot
lot
more
more
powerful
powerful
than
than
it
it
seems
seems
on
on
the
the
surface
surface
because
because
the
the
app
app
is
is
deployed
deployed
with
with
an
an
SSL
ssl
certificate,
certificate
so
so
we
we
immediately
immediately
have
have
support
support
for
for
HTTPS
https
in
in
the
the
URL.
url
5.
5
In
in
addition,
addition
it
it
uses
uses
Google's
google's
content
content
delivery
delivery
network,
network
which
which
will
will
cache
cache
and
and
serve
serve
all
all
of
of
your
your
static
static
resources
resources
in
in
a
a
highly
highly
performant
performant
way.
way
Now
now
that
that
we
we
know
know
how
how
to
to
deploy
deploy
our
our
app,
app
let's
let's
go
go
back
back
into
into
the
the
index
index
HTML
html
and
and
delete
delete
all
all
the
the
boilerplate
boilerplate
code
code
except
except
for
for
the
the
main
main
imports
imports
in
in
the
the
head
head
of
of
the
the
document.
document
5.
5
Then
then
down
down
in
in
the
the
body,
body
I'm
i'm
going
going
to
to
point
point
our
our
script
script
tag
tag
to
to
a
a
new
new
file
file
called
called
app
app
JS.
js
That's
that's
where
where
we're
we're
going
going
to
to
write
write
all
all
of
of
our
our
actual
actual
code.
code
Then
then
we
we
can
can
create
create
that
that
file
file
from
from
the
the
command
command
line
line
by
by
running
running
touch
touch
public/appjs.
public/appjs
The
the
next
next
thing
thing
I'm
i'm
going
going
to
to
do
do
is
is
bring
bring
up
up
the
the
browser
browser
window
window
side
side
by
by
side
side
and
and
run
run
Firebase
firebase
Serve
serve
so
so
we
we
can
can
check
check
out
out
the
the
changes
changes
that
that
we
we
make.
make
Now
now
I
i
wanna
wanna
show
show
you
you
how
how
you
you
can
can
use
use
Firebase
firebase
to
to
manage
manage
your
your
user
user
authentication.
authentication
In
in
the
the
past,
past
user
user
auth
auth
was
was
always
always
a
a
very
very
difficult
difficult
feature
feature
to
to
implement.
implement
But
but
with
with
Firebase,
firebase
we
we
can
can
do
do
it
it
in
in
a
a
few
few
lines
lines
of
of
code.
code
I
i
just
just
have
have
a
a
simple
simple
HTML
html
button
button
here
here
that
that
will
will
fire
fire
this
this
Google
google
login
login
function
function
when
when
clicked.
clicked
Then
then
inside
inside
of
of
App
app
JS,
js
we
we
wanna
wanna
make
make
sure
sure
to
to
run
run
our
our
code
code
after
after
the
the
document
document
content
content
has
has
loaded
loaded
because
because
Firebase
firebase
won't
won't
be
be
available
available
until
until
after
after
that
that
point.
point
Once
once
the
the
content
content
has
has
loaded,
loaded
we
we
can
can
access
access
the
the
Firebase
firebase
resources
resources
under
under
this
this
Firebase
firebase
namespace.
namespace
For
for
example,
example
if
if
we
we
call
call
Firebase
firebase
app
app
and
and
then
then
console
console
log
log
it,
it
it
it
should
should
give
give
us
us
an
an
object
object
with
with
all
all
of
of
our
our
Firebase
firebase
credentials
credentials
and
and
other
other
things
things
attached
attached
to
to
that
that
object.
object
You
you
don't
don't
have
have
to
to
do
do
that,
that
but
but
if
if
you
you
wanna
wanna
make
make
sure
sure
that
that
Firebase
firebase
is
is
available,
available
that's
that's
one
one
way
way
to
to
find
find
out.
out
Before
before
we
we
can
can
actually
actually
log
log
in,
in
we
we
need
need
to
to
go
go
into
into
the
the
Firebase
firebase
console
console
under
under
authentication
authentication
and
and
enable
enable
the
the
methods
methods
that
that
we
we
wanna
wanna
use.
use
So
so
in
in
this
this
case,
case
we
we
wanna
wanna
use
use
Google
google
as
as
the
the
OAuth
oauth
provider,
provider
but
but
we
we
could
could
also
also
do
do
things
things
like
like
email
email
password,
password
anonymous,
anonymous
Twitter,
twitter
Facebook,
facebook
GitHub,
github
etcetera.
etcetera
From
from
there,
there
let's
let's
write
write
a
a
function
function
that
that
will
will
log
log
the
the
user
user
in.
in
The
the
first
first
thing
thing
we
we
need
need
to
to
do
do
is
is
define
define
the
the
provider
provider
that
that
we
we
wanna
wanna
use,
use
which
which
in
in
this
this
case
case
would
would
be
be
the
the
Firebase
firebase
Auth
auth
Google
google
Auth
auth
provider.
provider
From
from
there,
there
we
we
can
can
reference
reference
the
the
Firebase
firebase
auth
auth
library
library
and
and
call
call
sign
sign
in
in
with
with
pop
pop
up
up
passing
passing
at
at
that
that
provider
provider
as
as
an
an
argument.
argument
5.
5
And
and
that's
that's
literally
literally
all
all
the
the
code
code
that
that
it
it
takes
takes
to
to
log
log
in
in
the
the
user
user
with
with
Google.
google
This
this
operation
operation
happens
happens
asynchronously,
asynchronously
which
which
means
means
it
it
returns
returns
a
a
promise.
promise
Whenever
whenever
we
we
have
have
a
a
promise,
promise
we
we
can
can
attach
attach
then
then
to
to
it,
it
which
which
will
will
give
give
us
us
the
the
user
user
once
once
that
that
promise
promise
resolves.
resolves
So
so
we're
we're
saying
saying
sign
sign
in
in
with
with
pop
pop
up,
up
5.
5
Then
then
when
when
we
we
have
have
a
a
user,
user
let's
let's
set
set
that
that
user
user
as
as
a
a
variable.
variable
Then
then
we
we
can
can
write
write
their
their
display
display
name
name
to
to
the
the
DOM,
dom
and
and
we'll
we'll
also
also
console
console
log
log
the
the
user
user
object.
object
All
all
of
of
the
the
user
user
information
information
will
will
come
come
from
from
the
the
actual
actual
Google
google
account.
account
If
if
we
we
go
go
ahead
ahead
and
and
click
click
our
our
log
log
in
in
with
with
Google
google
button,
button
it's
it's
going
going
to
to
bring
bring
up
up
a
a
pop
pop
up
up
window
window
where
where
the
the
user
user
will
will
log
log
in
in
to
to
their
their
actual
actual
Google
google
account.
account
5.
5
Then
then
it's
it's
going
going
to
to
execute
execute
any
any
code
code
inside
inside
of
of
that
that
then
then
block.
block
Firebase
firebase
uses
uses
JSON
json
Web
web
Tokens
tokens
for
for
authentication,
authentication
which
which
means
means
there's
there's
an
an
encrypted
encrypted
token
token
on
on
the
the
browser
browser
now
now
that
that
identifies
identifies
this
this
user.
user
If
if
you
you
wanna
wanna
see
see
that
that
token,
token
you
you
can
can
just
just
go
go
into
into
the
the
browser
browser
and
and
type
type
in
in
local
local
storage,
storage
5.
5
And
and
you
you
can
can
see
see
the
the
current
current
user
user
session
session
there.
there
JSON
json
Web
web
Tokens
tokens
are
are
much
much
easier
easier
to
to
work
work
with
with
compared
compared
to
to
cookies,
cookies
especially
especially
for
for
JavaScript
javascript
applications
applications
like
like
Angular
angular
and
and
React.
react
I
i
won't
won't
get
get
into
into
the
the
details
details
here,
here
but
but
I
i
do
do
cover
cover
that
that
in
in
some
some
of
of
my
my
more
more
advanced
advanced
videos.
videos
If
if
we
we
go
go
back
back
into
into
the
the
Firebase
firebase
console
console
now,
now
you'll
you'll
see
see
that
that
our
our
user
user
is
is
created
created
in
in
the
the
Firebase
firebase
authentication
authentication
tab.
tab
We
we
can
can
use
use
this
this
to
to
disable
disable
accounts,
accounts
update
update
email
email
templates
templates
if
if
you're
you're
using
using
email
email
password
password
auth,
auth
perform
perform
text
text
message
message
verification,
verification
and
and
view
view
some
some
basic
basic
analytics.
analytics
5.
5
So
so
that
that
wraps
wraps
up
up
UserAuth.
userauth
Now
now
let's
let's
move
move
into
into
the
the
cornerstone
cornerstone
of
of
Firebase,
firebase
which
which
is
is
its
its
database.
database
As
as
of
of
October
october
2017,
2017
we
we
have
have
2
2
different
different
database
database
options,
options
both
both
of
of
them
them
being
being
NoSQL
nosql
databases.
databases
We
we
have
have
Realtime
realtime
Database
database
and
and
Cloud
cloud
Firestore.
firestore
5.
5
You
you
can
can
use
use
both
both
of
of
them
them
together,
together
but
but
more
more
often
often
than
than
not,
not
you're
you're
going
going
to
to
choose
choose
between
between
1
1
or
or
the
the
other.
other
And
and
the
the
best
best
way
way
to
to
do
do
that,
that
in
in
my
my
opinion,
opinion
is
is
to
to
analyze
analyze
the
the
pricing.
pricing
For
for
the
the
real
real
time
time
database,
database
we're
we're
charged
charged
$5
$5
per
per
gigabyte
gigabyte
stored
stored
and
and
$1
$1
per
per
gigabyte
gigabyte
downloaded.
downloaded
For
for
Firestore,
firestore
on
on
the
the
other
other
hand,
hand
we're
we're
charged
charged
18¢
18¢
per
per
gigabyte
gigabyte
stored,
stored
but
but
we're
we're
also
also
charged
charged
for
for
each
each
individual
individual
document
document
read
read
and
and
write
write
operation.
operation
So
so
what
what
that
that
boils
boils
down
down
to
to
is
is
that
that
if
if
you
you
have
have
a
a
really
really
simple
simple
dataset
dataset
that
that
is
is
read
read
frequently,
frequently
you
you
would
would
use
use
the
the
real
real
time
time
database.
database
But
but
for
for
a
a
larger,
larger
more
more
complex
complex
relational
relational
dataset,
dataset
you'd
you'd
wanna
wanna
use
use
Cloud
cloud
Firestore.
firestore
In
in
the
the
majority
majority
of
of
cases,
cases
I
i
find
find
that
that
Cloud
cloud
Firestore
firestore
ends
ends
up
up
being
being
the
the
better
better
choice,
choice
so
so
that's
that's
where
where
we're
we're
going
going
to
to
start.
start
5.
5
Enable
enable
the
the
database
database
and
and
start
start
it
it
in
in
test
test
mode
mode
which
which
is
is
going
going
to
to
disable
disable
any
any
security
security
rules.
rules
Then
then
the
the
actual
actual
database
database
itself
itself
is
is
structured
structured
as
as
collections
collections
5
5
documents.
documents
It
it
follows
follows
a
a
pattern
pattern
similar
similar
to
to
MongoDB,
mongodb
which
which
is
is
the
the
most
most
widely
widely
adopted
adopted
NoSQL
nosql
database
database
in
in
the
the
world.
world
And
and
if
if
you're
you're
interested
interested
in
in
data
data
modeling,
modeling
check
check
out
out
episode
episode
85.
85
The
the
first
first
thing
thing
we'll
we'll
do
do
is
is
create
create
a
a
collection
collection
which
which
is
is
just
just
a
a
container
container
for
for
documents,
documents
5.
5
And
and
then
then
we'll
we'll
add
add
our
our
first
first
document
document
to
to
it.
it
Every
every
document
document
has
has
a
a
unique
unique
ID,
id
which
which
you
you
can
can
create
create
yourself
yourself
or
or
you
you
can
can
have
have
it
it
automatically
automatically
generated.
generated
In
in
this
this
case,
case
I'm
i'm
going
going
to
to
create
create
myself
myself
and
and
call
call
it
it
first
first
post.
post
Then
then
the
the
actual
actual
data
data
that
that
we
we
consume
consume
from
from
our
our
app
app
will
will
be
be
set
set
as
as
fields
fields
on
on
this
this
document.
document
The
the
structure
structure
is
is
similar
similar
to
to
a
a
JavaScript
javascript
object
object
or
or
an
an
object
object
in
in
any
any
other
other
programming
programming
language.
language
We
we
can
can
then
then
use
use
these
these
fields
fields
to
to
pull
pull
a
a
subset
subset
of
of
documents
documents
from
from
a
a
collection
collection
based
based
on
on
whatever
whatever
condition
condition
we
we
wanna
wanna
pass
pass
to
to
it.
it
That'll
that'll
make
make
a
a
little
little
more
more
sense
sense
when
when
we
we
start
start
building
building
some
some
queries
queries
in
in
our
our
front
front
end
end
code.
code
5.
5
One
one
of
of
the
the
coolest
coolest
things
things
about
about
Firebase
firebase
is
is
that
that
your
your
user
user
authentication
authentication
system
system
is
is
directly
directly
tied
tied
to
to
your
your
database.
database
5.
5
Under
under
the
the
rules
rules
tab,
tab
you
you
can
can
write
write
expressive
expressive
statements
statements
that
that
define
define
the
the
back
back
end
end
security
security
logic
logic
for
for
your
your
app.
app
For
for
example,
example
if
if
you
you
had
had
a
a
certain
certain
set
set
of
of
documents
documents
that
that
only
only
a
a
logged
logged
users
users
should
should
see.
see
You'd
you'd
be
be
able
able
to
to
do
do
that
that
here
here
with
with
a
a
single
single
line
line
of
of
code.
code
It's
it's
beyond
beyond
the
the
scope
scope
of
of
this
this
video,
video
but
but
needless
needless
to
to
say,
say
it's
it's
a
a
very
very
important
important
part
part
of
of
building
building
a
a
fully
fully
secured
secured
app.
app
Then
then
the
the
last
last
thing
thing
Firestore
firestore
can
can
do
do
is
is
build
build
indices.
indices
By
by
default,
default
you'll
you'll
have
have
an
an
index
index
for
for
every
every
field
field
on
on
a
a
given
given
document.
document
But
but
if
if
you
you
want
want
to
to
query
query
by
by
multiple
multiple
fields,
fields
you
you
may
may
need
need
to
to
create
create
your
your
own
own
custom
custom
index.
index
Now
now
getting
getting
back
back
to
to
our
our
front
front
end
end
app,
app
I'm
i'm
going
going
to
to
replace
replace
the
the
Firebase
firebase
database
database
import
import
with
with
Firestore.
firestore
And
and
the
the
first
first
thing
thing
I
i
wanna
wanna
do
do
is
is
just
just
retrieve
retrieve
and
and
read
read
that
that
document
document
that
that
we
we
created
created
in
in
the
the
database
database
console.
console
File.
file
So
so
first,
first
we
we
make
make
a
a
reference
reference
to
to
Firestore
firestore
as
as
a
a
variable
variable
named
named
DB.
db
Then
then
we
we
make
make
a
a
reference
reference
to
to
the
the
collection
collection
by
by
calling
calling
DB
db
collection
collection
posts.
posts
5.
5
And
and
then
then
we
we
reference
reference
the
the
specific
specific
document
document
ID,
id
which
which
I
i
gave
gave
a
a
custom
custom
ID
id
of
of
first
first
post.
post
So
so
at
at
this
this
point,
point
we
we
have
have
a
a
reference
reference
to
to
the
the
document,
document
And
and
we
we
could
could
use
use
that
that
reference
reference
to
to
retrieve
retrieve
it,
it
listen
listen
to
to
it
it
in
in
real
real
time,
time
or
or
update
update
and
and
delete
delete
it.
it
What
what
we
we
wanna
wanna
do
do
right
right
now
now
is
is
just
just
retrieve
retrieve
it
it
and
and
be
be
done
done
with
with
it.
it
So
so
to
to
retrieve
retrieve
it,
it
we
we
just
just
call
call
get,
get
which
which
is
is
an
an
asynchronous
asynchronous
operation
operation
that
that
returns
returns
a
a
promise
promise
that
that
resolves
resolves
with
with
the
the
actual
actual
document
document
data
data
that
that
we
we
saved
saved
in
in
Firestore.
firestore
5.
5
So
so
I'll
i'll
set
set
the
the
data
data
as
as
a
a
variable,
variable
and
and
I'll
i'll
write
write
the
the
title
title
and
and
timestamp
timestamp
to
to
the
the
browser
browser
window.
window
Now
now
if
if
we
we
refresh
refresh
the
the
page,
page
we
we
should
should
see
see
that
that
document
document
information
information
printed
printed
to
to
the
the
screen.
screen
So
so
that's
that's
pretty
pretty
cool.
cool
But
but
one
one
of
of
the
the
major
major
benefits
benefits
of
of
Firebase
firebase
is
is
that
that
we
we
can
can
listen
listen
to
to
data
data
changes
changes
in
in
real
real
time.
time
So
so
if
if
you
you
have
have
some
some
data
data
that's
that's
shared
shared
between
between
multiple
multiple
users
users
and
and
that
that
data
data
changes
changes
somewhere,
somewhere
all
all
of
of
your
your
users
users
are
are
going
going
to
to
be
be
notified
notified
at
at
that
that
exact
exact
moment
moment
of
of
the
the
change.
change
5.
5
That
that
would
would
be
be
an
an
extremely
extremely
difficult
difficult
feature
feature
to
to
build
build
from
from
scratch,
scratch
but
but
we
we
can
can
do
do
it
it
with
with
a
a
few
few
modifications
modifications
to
to
the
the
code
code
we
we
just
just
wrote.
wrote
5.
5
So
so
instead
instead
of
of
calling
calling
get,
get
we're
we're
going
going
to
to
replace
replace
that
that
with
with
on
on
snapshot.
snapshot
Instead
instead
of
of
returning
returning
a
a
promise,
promise
this
this
is
is
going
going
to
to
return
return
a
a
real
real
time
time
stream
stream
that
that
we
we
can
can
listen
listen
to
to
with
with
a
a
callback
callback
function.
function
So
so
we
we
can
can
get
get
rid
rid
of
of
then
then
and
and
we'll
we'll
just
just
copy
copy
and
and
paste
paste
all
all
of
of
our
our
previous
previous
code
code
inside
inside
of
of
this
this
callback
callback
function.
function
Every
every
time
time
the
the
document
document
changes,
changes
it's
it's
going
going
to
to
emit
emit
a
a
new
new
document
document
to
to
this
this
function,
function
and
and
we
we
can
can
handle
handle
it
it
accordingly.
accordingly
5.
5
In
in
this
this
case,
case
the
the
browser
browser
should
should
write
write
another
another
line
line
every
every
time
time
a
a
change
change
occurs
occurs
in
in
Firestore.
firestore
So
so
let's
let's
go
go
ahead
ahead
and
and
change
change
the
the
title.
title
And
and
you
you
can
can
see
see
here
here
on
on
the
the
right
right
that
that
it's
it's
automatically
automatically
updated
updated
in
in
the
the
browser.
browser
If
if
your
your
app
app
does
does
anything
anything
that's
that's
real
real
time
time
in
in
nature,
nature
this
this
is
is
going
going
to
to
be
be
one
one
of
of
the
the
most
most
powerful
powerful
aspects
aspects
of
of
Firebase
firebase
for
for
you.
you
In
in
addition
addition
to
to
reading
reading
documents,
documents
we
we
can
can
also
also
update
update
documents
documents
from
from
our
our
client
client
side
side
code.
code
What
what
I'm
i'm
going
going
to
to
do
do
here
here
is
is
set
set
up
up
a
a
form
form
input.
input
And
and
every
every
time
time
this
this
input
input
changes,
changes
it's
it's
going
going
to
to
run
run
an
an
update
update
to
to
Firestore.
firestore
So
so
we'll
we'll
set
set
up
up
a
a
function
function
called
called
update
update
post,
post
and
and
then
then
we'll
we'll
make
make
a
a
reference
reference
to
to
the
the
document
document
just
just
like
like
we
we
did
did
before.
before
But
but
this
this
time,
time
we'll
we'll
call
call
update
update
and
and
pass
pass
it
it
the
the
information
information
that
that
the
the
user
user
had
had
typed
typed
into
into
the
the
form.
form
When
when
data
data
is
is
updated
updated
from
from
your
your
app,
app
Firestore
firestore
does
does
something
something
really
really
cool
cool
called
called
optimistic
optimistic
updates
updates
or
or
latency
latency
compensation.
compensation
If
if
you
you
have
have
a
a
real
real
time
time
listener
listener
on
on
the
the
data
data
like
like
we
we
set
set
up
up
before,
before
it
it
will
will
update
update
the
the
view
view
immediately
immediately
so
so
your
your
user
user
doesn't
doesn't
have
have
to
to
wait
wait
for
for
a
a
server
server
to
to
respond,
respond
which
which
might
might
take
take
a
a
second
second
or
or
2
2
and
and
potentially
potentially
hurt
hurt
the
the
user
user
experience.
experience
5.
5
In
in
most
most
cases,
cases
though,
though
we're
we're
probably
probably
not
not
going
going
to
to
be
be
reading
reading
a
a
single
single
document,
document
but
but
trying
trying
to
to
query
query
a
a
collection
collection
of
of
documents.
documents
To
to
show
show
you
you
that,
that
I'm
i'm
creating
creating
a
a
collection
collection
of
of
products
products
where
where
every
every
product
product
has
has
a
a
price
price
and
and
a
a
name.
name
One
one
of
of
the
the
major
major
benefits
benefits
of
of
Firestore
firestore
is
is
that
that
you
you
can
can
query
query
multiple
multiple
documents
documents
in
in
a
a
very
very
expressive
expressive
way.
way
5.
5
Back
back
in
in
the
the
code,
code
we'll
we'll
first
first
make
make
a
a
reference
reference
to
to
the
the
products
products
collection.
collection
And
and
then
then
if
if
we
we
want
want
to
to
get
get
a
a
subset
subset
of
of
the
the
documents
documents
in
in
that
that
collection,
collection
we
we
can
can
call
call
where.
where
5.
5
And
and
where
where
takes
takes
3
3
different
different
arguments.
arguments
1st,
1st
it's
it's
the
the
field
field
that
that
we
we
wanna
wanna
sort
sort
by,
by
which,
which
in
in
this
this
case,
case
is
is
the
the
price.
price
Then
then
it
it
takes
takes
an
an
operator,
operator
which
which
could
could
be
be
equal
equal
to,
to
greater
greater
than,
than
greater
greater
than
than
or
or
equal
equal
to,
to
and
and
so
so
on.
on
Then
then
the
the
3rd
3rd
and
and
final
final
argument
argument
is
is
the
the
actual
actual
value.
value
So
so
So
so
in
in
this
this
case,
case
we
we
want
want
all
all
the
the
products
products
whose
whose
price
price
is
is
greater
greater
than
than
$10.
$10
Then
then
just
just
like
like
we
we
did
did
with
with
the
the
document
document
read,
read
we
we
can
can
call
call
get.
get
And
and
instead
instead
of
of
returning
returning
a
a
single
single
document,
document
it's
it's
going
going
to
to
return
return
an
an
array
array
of
of
documents.
documents
So
so
really
really
the
the
only
only
difference
difference
is
is
that
that
we
we
need
need
to
to
loop
loop
over
over
these
these
documents
documents
to
to
get
get
the
the
data
data
for
for
each
each
one.
one
For
for
each
each
document
document
in
in
the
the
array,
array
I'm
i'm
writing
writing
the
the
name
name
and
and
price
price
to
to
the
the
screen.
screen
So
so
we
we
have
have
our
our
wrench
wrench
and
and
our
our
chainsaw,
chainsaw
which
which
are
are
both
both
over
over
$10.
$10
5.
5
If
if
we
we
change
change
the
the
operator
operator
to
to
greater
greater
than
than
or
or
equal
equal
to
to
$10,
$10
then
then
the
the
query
query
will
will
also
also
include
include
products
products
that
that
are
are
equal
equal
to
to
$10.
$10
If
if
we
we
want
want
to
to
check
check
for
for
gist
gist
equality,
equality
we
we
can
can
change
change
the
the
operator
operator
to
to
equals,
equals
and
and
then
then
it's
it's
only
only
going
going
to
to
return
return
the
the
hammer.
hammer
5.
5
In
in
addition
addition
to
to
the
the
where
where
method,
method
we
we
can
can
also
also
use
use
order
order
by
by
to
to
return
return
documents
documents
in
in
a
a
specific
specific
order.
order
If
if
we
we
want
want
to
to
retrieve
retrieve
all
all
of
of
our
our
products
products
ordered
ordered
from
from
highest
highest
price
price
to
to
lowest
lowest
price,
price
then
then
we
we
can
can
say
say
order
order
by
by
price
price
descending,
descending
and
and
we'll
we'll
get
get
our
our
products
products
back
back
in
in
that
that
order.
order
And
and
we
we
can
can
also
also
limit
limit
the
the
number
number
of
of
documents
documents
that
that
are
are
returned,
returned
which
which
is
is
really
really
important
important
when
when
you're
you're
working
working
with
with
a
a
large
large
collection.
collection
Simply
simply
chain
chain
the
the
limit
limit
method
method
to
to
any
any
query,
query
And
and
that
that
will
will
cap
cap
the
the
number
number
of
of
documents
documents
that
that
come
come
back
back
in
in
the
the
array.
array
That
that
wraps
wraps
up
up
the
the
database
database
section.
section
Now
now
we're
we're
ready
ready
to
to
get
get
started
started
with
with
Firebase
firebase
Storage.
storage
5.
5
Storage
storage
is
is
just
just
a
a
cloud
cloud
storage
storage
bucket
bucket
that
that
is
is
also
also
tied
tied
to
to
your
your
Firebase
firebase
project.
project
This
this
is
is
where
where
you
you
might
might
put
put
user
user
generated
generated
content
content
like
like
uploaded
uploaded
images,
images
videos,
videos
things
things
like
like
that.
that
So
so
the
the
first
first
thing
thing
we
we
wanna
wanna
do
do
is
is
go
go
into
into
the
the
rules
rules
section.
section
And
and
currently,
currently
it's
it's
set
set
up
up
to
to
only
only
allow
allow
authenticated
authenticated
users
users
to
to
upload
upload
files,
files
but
but
we
we
wanna
wanna
change
change
that.
that
For
for
now,
now
we're
we're
just
just
going
going
to
to
let
let
anybody
anybody
upload
upload
files
files
to
to
our
our
storage
storage
bucket.
bucket
Back
back
in
in
the
the
index
index
HTML
html
in
in
our
our
front
front
end
end
app,
app
I'm
i'm
setting
setting
up
up
a
a
form
form
input
input
that
that
is
is
set
set
to
to
type
type
file.
file
Then
then
on
on
the
the
change
change
event,
event
we're
we're
going
going
to
to
run
run
a
a
function
function
called
called
upload
upload
file
file
5,
5
and
and
pass
pass
it
it
this
this
files
files
as
as
the
the
argument.
argument
I
i
am
am
also
also
going
going
to
to
display
display
an
an
image
image
tag
tag
that
that
currently
currently
doesn't
doesn't
have
have
a
a
source,
source
5.
5
But
but
we'll
we'll
set
set
its
its
source
source
asynchronously
asynchronously
after
after
the
the
upload
upload
is
is
complete.
complete
In
in
the
the
JavaScript,
javascript
we'll
we'll
make
make
a
a
reference
reference
to
to
the
the
storage
storage
library.
library
In
in
a
a
similar
similar
way
way
that
that
we
we
did
did
with
with
the
the
database,
database
we
we
will
will
reference
reference
a
a
path
path
in
in
that
that
storage
storage
bucket.
bucket
But
but
in
in
the
the
storage
storage
bucket,
bucket
we
we
do
do
that
that
by
by
calling
calling
child.
child
And
and
then
then
in
in
this
this
case,
case
we'll
we'll
just
just
pass
pass
it
it
a
a
static
static
image
image
name
name
of
of
horse.jpeg.
horse.jpeg
With
with
this
this
reference,
reference
we
we
can
can
either
either
upload
upload
file
file
or
or
download
download
an
an
existing
existing
file
file
URL.
url
Our
our
form
form
input's
input's
going
going
to
to
return
return
a
a
file
file
list,
list
so
so
we'll
we'll
just
just
take
take
the
the
first
first
item
item
of
of
that
that
list
list
with
with
item
item
0.
0
And
and
then
then
to
to
upload
upload
the
the
file,
file
all
all
we
we
have
have
to
to
do
do
is
is
call
call
the
the
reference
reference
put
put
file.
file
We
we
can
can
run
run
code
code
when
when
the
the
upload's
upload's
complete
complete
by
by
chaining
chaining
then
then
to
to
it.
it
It's
it's
going
going
to
to
return
return
some
some
data
data
about
about
the
the
upload
upload
itself
itself
including
including
the
the
snapshot
snapshot
download
download
URL.
url
What
what
we
we
wanna
wanna
do
do
in
in
this
this
case
case
is
is
take
take
that
that
URL
url
and
and
then
then
apply
apply
it
it
to
to
the
the
source
source
of
of
that
that
image
image
tag
tag
that
that
we
we
set
set
in
in
the
the
HTML.
html
If
if
we
we
go
go
ahead
ahead
and
and
choose
choose
a
a
file,
file
it's
it's
going
going
to
to
start
start
the
the
upload,
upload
and
and
then
then
you'll
you'll
see
see
it
it
updated
updated
in
in
the
the
document
document
after
after
a
a
couple
couple
seconds.
seconds
If
if
we
we
jump
jump
back
back
to
to
the
the
Firebase
firebase
console,
console
we
we
can
can
also
also
see
see
the
the
image
image
in
in
the
the
storage
storage
bucket
bucket
there
there
as
as
well.
well
That
that
was
was
super
super
easy.
easy
And
and
now
now
we
we
can
can
get
get
on
on
to
to
my
my
favorite
favorite
part
part
of
of
Firebase
firebase
which
which
is
is
Cloud
cloud
Functions.
functions
We're
we're
going
going
to
to
do
do
something
something
very
very
simple.
simple
But
but
if
if
you
you
wanna
wanna
see
see
Cloud
cloud
Functions
functions
do
do
things
things
like
like
hit
hit
machine
machine
learning
learning
APIs,
apis
handle
handle
payments,
payments
5.
5
Send
send
emails
emails
and
and
things
things
like
like
that.
that
Check
check
out
out
the
the
functions
functions
tag
tag
on
on
the
the
main
main
website.
website
Functions
functions
can
can
be
be
thought
thought
of
of
as
as
your
your
own
own
Node.
node
Js
js
server
server
that
that
runs
runs
on
on
demand.
demand
So
so
instead
instead
of
of
having
having
1
1
giant
giant
monolithic
monolithic
framework
framework
that
that
handles
handles
all
all
of
of
your
your
back
back
end
end
code,
code
you
you
write
write
microservices
microservices
that
that
perform
perform
a
a
specific
specific
function.
function
5.
5
And
and
anything
anything
that
that
you
you
can
can
do
do
in
in
Node.
node
Js,
js
you
you
can
can
do
do
in
in
a
a
function.
function
You
you
can
can
install
install
any
any
NPM
npm
packages
packages
you
you
want
want
into
into
your
your
functions
functions
environment,
environment
and
and
the
the
Node.
node
Js
js
ecosystem
ecosystem
is
is
huge,
huge
so
so
that
that
opens
opens
the
the
door
door
for
for
a
a
lot
lot
of
of
creativity.
creativity
We
we
can
can
initialize
initialize
functions
functions
in
in
our
our
project
project
by
by
running
running
Firebase
firebase
init
init
functions.
functions
That's
that's
going
going
to
to
create
create
a
a
new
new
directory
directory
called
called
functions
functions
which
which
isolates
isolates
all
all
of
of
our
our
back
back
end
end
code.
code
You
you
can
can
trigger
trigger
functions
functions
in
in
a
a
variety
variety
of
of
ways,
ways
but
but
the
the
way
way
we're
we're
going
going
to
to
do
do
it
it
is
is
with
with
a
a
Firestore
firestore
database
database
trigger.
trigger
What
what
that
that
means
means
is
is
we're
we're
going
going
to
to
listen
listen
to
to
a
a
specific
specific
document
document
path.
path
And
and
when
when
a
a
new
new
document
document
is
is
created
created
there,
there
it's
it's
going
going
to
to
trigger
trigger
that
that
function
function
code
code
to
to
run
run
on
on
the
the
back
back
end.
end
What
what
we're
we're
going
going
to
to
do
do
in
in
this
this
case
case
is
is
just
just
send
send
a
a
message
message
from
from
the
the
function
function
back
back
to
to
the
the
database.
database
The
the
idea
idea
here
here
is
is
to
to
show
show
you
you
how
how
information
information
can
can
be
be
shared
shared
between
between
your
your
back
back
end
end
code
code
and
and
your
your
database.
database
Inside
inside
the
the
functions
functions
directory,
directory
we
we
have
have
a
a
package
package
JSON
json
which
which
defines
defines
all
all
of
of
our
our
third
third
party
party
npm
npm
dependencies.
dependencies
Then
then
we
we
can
can
define
define
our
our
functions
functions
in
in
the
the
index
index
JS
js
file.
file
And
and
another
another
unique
unique
thing
thing
we
we
can
can
do
do
here
here
is
is
use
use
the
the
Firebase
firebase
Admin
admin
SDK.
sdk
The
the
Admin
admin
SDK
sdk
can
can
only
only
be
be
used
used
in
in
a
a
back
back
end
end
environment
environment
like
like
Cloud
cloud
Function,
function
and
and
it
it
will
will
bypass
bypass
any
any
security
security
rules
rules
that
that
you've
you've
defined
defined
in
in
your
your
Firebase
firebase
app.
app
The
the
first
first
thing
thing
we
we
wanna
wanna
do
do
is
is
say
say
exports
exports
followed
followed
by
by
the
the
name
name
of
of
our
our
function,
function
which
which
in
in
this
this
case
case
is
is
send
send
a
a
message.
message
Then
then
we'll
we'll
point
point
this
this
function
function
to
to
Firestore
firestore
5
5
on
on
documents
documents
in
in
the
the
products
products
collection.
collection
The
the
brackets
brackets
make
make
the
the
product
product
ID
id
a
a
wildcard,
wildcard
so
so
it's
it's
going
going
to
to
run
run
this
this
function
function
every
every
time
time
a
a
new
new
document
document
is
is
created.
created
5.
5
Inside
inside
this
this
onCreate
oncreate
trigger,
trigger
we
we
need
need
to
to
return
return
a
a
Promise,
promise
and
and
it's
it's
going
going
to
to
give
give
us
us
access
access
to
to
this
this
event
event
object
object
that
that
has
has
some
some
information
information
about
about
the
the
incoming
incoming
request.
request
5.
5
In
in
Firestore,
firestore
we
we
can
can
get
get
the
the
document
document
ID
id
from
from
the
the
event
event
params,
params
and
and
then
then
we
we
can
can
get
get
the
the
data
data
inside
inside
that
that
document
document
from
from
the
the
event
event
data
data
data.
data
And
and
in
in
this
this
demo,
demo
we're
we're
only
only
interested
interested
in
in
the
the
name
name
of
of
the
the
actual
actual
product.
product
So
so
now
now
the
the
Cloud
cloud
Functions
functions
receive
receive
some
some
data,
data
5.
5
And
and
it
it
wants
wants
to
to
send
send
that
that
data
data
back
back
as
as
an
an
update
update
to
to
the
the
same
same
document.
document
So
so
to
to
do
do
that,
that
we
we
say
say
admin
admin
Firestore
firestore
And
and
then
then
reference
reference
that
that
document
document
path.
path
Then
then
the
the
last
last
thing
thing
we'll
we'll
do
do
is
is
return
return
the
the
actual
actual
update
update
operation
operation
which
which
is
is
a
a
promise.
promise
5.
5
In
in
other
other
words,
words
we're
we're
returning
returning
the
the
update
update
operation
operation
from
from
this
this
function,
function
and
and
the
the
function
function
will
will
terminate
terminate
as
as
soon
soon
as
as
that
that
promise
promise
resolves.
resolves
5.
5
The
the
last
last
thing
thing
we
we
need
need
to
to
do
do
is
is
run
run
Firebase
firebase
deploy
deploy
functions,
functions
and
and
that
that
will
will
send
send
our
our
code
code
up
up
to
to
Firebase.
firebase
You
you
can
can
verify
verify
that
that
it
it
was
was
deployed
deployed
by
by
going
going
to
to
the
the
functions
functions
tab,
tab
and
and
you
you
should
should
now
now
see
see
that
that
function
function
in
in
there
there
with
with
some
some
basic
basic
analytics.
analytics
Then
then
if
if
you
you
switch
switch
over
over
to
to
Firestore
firestore
and
and
add
add
a
a
document
document
to
to
the
the
product's
product's
collection,
collection
you
you
should
should
see
see
the
the
update
update
run
run
after
after
a
a
second
second
or
or
so
so
of
of
latency.
latency
So
so
that
that
wraps
wraps
up
up
the
the
main
main
development
development
resources
resources
in
in
a
a
Firebase
firebase
project,
project
authentication,
authentication
database,
database
storage,
storage
hosting,
hosting
and
and
functions.
functions
But
but
when
when
it
it
comes
comes
to
to
native
native
mobile
mobile
apps,
apps
there's
there's
still
still
a
a
huge
huge
number
number
of
of
features
features
that
that
we
we
haven't
haven't
even
even
looked
looked
at.
at
So
so
let's
let's
quickly
quickly
go
go
over
over
some
some
of
of
the
the
highlights
highlights
there.
there
The
the
first
first
area
area
is
is
testing
testing
and
and
stability.
stability
If
if
you're
you're
like
like
most
most
developers,
developers
you
you
probably
probably
don't
don't
enjoy
enjoy
writing
writing
a
a
lot
lot
of
of
tests.
tests
But
but
thankfully,
thankfully
Firebase
firebase
has
has
a
a
robo
robo
testing
testing
tool
tool
where
where
Where
where
you
you
can
can
just
just
upload
upload
your
your
app
app
build,
build
and
and
it
it
will
will
run
run
a
a
suite
suite
of
of
tests
tests
that
that
look
look
for
for
issues
issues
that
that
commonly
commonly
cause
cause
mobile
mobile
apps
apps
to
to
crash.
crash
And
and
you
you
can
can
review
review
the
the
screenshot
screenshot
results
results
of
of
every
every
test.
test
5
5
The
the
next
next
thing
thing
is
is
analytics,
analytics
and
and
there's
there's
a
a
ton
ton
of
of
analytic
analytic
tools
tools
in
in
Firebase.
firebase
But
but
the
the
one
one
that
that
really
really
stands
stands
out
out
to
to
me
me
is
is
StreamView.
streamview
It
it
gives
gives
you
you
a
a
global
global
geographic
geographic
representation
representation
of
of
your
your
entire
entire
user
user
base
base
in
in
real
real
time.
time
Then
then
you
you
might
might
want
want
to
to
use
use
trending
trending
data
data
there
there
to
to
send
send
push
push
notifications
notifications
tier
tier
users.
users
Firebase
firebase
makes
makes
it
it
easy
easy
to
to
send
send
out
out
push
push
notifications
notifications
based
based
on
on
a
a
user
user
segment,
segment
specific
specific
topic,
topic
or
or
just
just
to
to
a
a
single
single
device.
device
5.
5
You
you
can
can
also
also
set
set
up
up
AB
ab
testing
testing
for
for
your
your
notifications
notifications
and
and
track
track
the
the
conversion
conversion
rates
rates
of
of
each
each
one
one
that
that
you
you
send.
send
I'm
i'm
going
going
to
to
go
go
ahead
ahead
and
and
wrap
wrap
up
up
my
my
tour
tour
of
of
Firebase
firebase
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you're
you're
serious
serious
about
about
building
building
apps
apps
with
with
Firebase,
firebase
check
check
out
out
Angular
angular
Firebase
firebase
Pro
pro
where
where
you
you
get
get
access
access
to
to
a
a
whole
whole
bunch
bunch
of
of
exclusive
exclusive
resources
resources
designed
designed
to
to
help
help
you
you
build
build
and
and
ship
ship
your
your
app
app
faster.
faster
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
5.
5
success
The speakers discuss the use of Cloud Firzek for their database and how it can be used for various datasets. They also explain how to retrieve and update data in the transcription tool, including updating the file and accessing and managing user information. The speakers also discuss scalability and the benefits of using the transcription tool for real-time listening to data changes and updating documents. They also mention Cloud PV and the "order" method for accessing and limiting the number of returned documents. They also touch on the use of CloudGeneration for testing, stability, and analytics, including StreamView and trending data.
Firebase - Ultimate Beginner's Guide
Today I wanna do something I've never done on the channel and that's a basic level video for Firebase. Over the past year, I've created close to a 100 videos covering intermediate to advanced level concepts, but I've never really talked about why I use Firebase and why I think it's an excellent platform for building apps. I'm going to take you through all the main features using nothing but JavaScript and you don't really need to have any coding experience to follow along with this video. 5. If you're new here make sure to like and subscribe and follow along with the code on angularfirebase.com. So I originally started in web development when Ruby on Rails was powering things like Twitter and Airbnb. At the time it seemed like magic because it made the back end so much easier to develop, but Firebase takes this to a whole new level by completely abstracting away the back end. Firebase doesn't pay me to say these things. I use it for my clients for three main reasons. The first one is the developer experience. It's well documented, easy to use, and the team has a really good culture of listening to developer feedback. The second factor is minimization of cost. Firebase is free for all of your small experimental projects and then scales up in a linear way based on your user growth and design choices. I I really dislike platforms that get you in on a free tier and then start charging you $500 a month once you reach a certain threshold. And the final factor is the maximization of time. I want to create the most amount of value in the least amount of time, and I think Firebase facilitates that really well. And hopefully, you'll agree with me there when we finish writing the code for this video. File. To follow along, you just need an editor like Versus Code and Node. Js installed on your local system. After that, you can go to Firebase and create a new project. A project is just a container for resources on Google Cloud Platform, such as your database, file storage, web hosting, and things like that. Fire. You can manage all of your app resources from the Firebase Admin console. And your project can span across multiple platforms. Firebase provides software developer kits for the web, iOS, Android, Unity, and several others. Your project is identified by the credentials that you see here, and they they can integrate seamlessly with other APIs on Google Cloud Platform. So if you wanna implement something like Cloud Vision or Google Maps, you can do that with click of a button. Now that we have our project created, we're going to install the Firebase command line tools by running npm install firebasetools flag g to install it globally. Now I wanna show you how quick and easy it is to create and deploy a project from the command line. So I've just opened up an empty folder in b s code, and then I'm pulling up the terminal window and running Firebase init hosting. That's That's going to create a few files for us. The first one is Firebase JSON, which holds all of our hosting roles. And then, uh, Firebase RC file is just a script to identify our project. The public folder with index HTML is our actual app. What it's doing is importing the Firebase Web SDK in the head of the document. And you can import these 1 by 1. So if you only need the database, you don't have to import all the other modules as well. File. So that can be a big help with your page load performance. Then you'll notice all these script tags have defer on them. That just tells a web browser not to execute the script until the page is finished loading. From there, if we go down to the body of the document, we have another script tag, which is going to have all the actual Firebase SDK resources initialized and available to us. We're going to replace the script with our own basic JavaScript app. But for now, let's go ahead and serve our app locally by running firebase serve. 5. This is going to spin up a web server locally on port 5000. We can just paste that into a browser and start testing our app locally. You should see this default app, which is just the content directly in that index HTML file. We can take this a step further and deploy our app to a live hosted URL that's accessible on the Internet. All we have to do is run firebase deploy. That'll give us back a URL, and now we can view our app live on the Internet. And this is actually a lot more powerful than it seems on the surface because the app is deployed with an SSL certificate, so we immediately have support for HTTPS in the URL. 5. In addition, it uses Google's content delivery network, which will cache and serve all of your static resources in a highly performant way. Now that we know how to deploy our app, let's go back into the index HTML and delete all the boilerplate code except for the main imports in the head of the document. 5. Then down in the body, I'm going to point our script tag to a new file called app JS. That's where we're going to write all of our actual code. Then we can create that file from the command line by running touch public/appjs. The next thing I'm going to do is bring up the browser window side by side and run Firebase Serve so we can check out the changes that we make. Now I wanna show you how you can use Firebase to manage your user authentication. In the past, user auth was always a very difficult feature to implement. But with Firebase, we can do it in a few lines of code. I just have a simple HTML button here that will fire this Google login function when clicked. Then inside of App JS, we wanna make sure to run our code after the document content has loaded because Firebase won't be available until after that point. Once the content has loaded, we can access the Firebase resources under this Firebase namespace. For example, if we call Firebase app and then console log it, it should give us an object with all of our Firebase credentials and other things attached to that object. You don't have to do that, but if you wanna make sure that Firebase is available, that's one way to find out. Before we can actually log in, we need to go into the Firebase console under authentication and enable the methods that we wanna use. So in this case, we wanna use Google as the OAuth provider, but we could also do things like email password, anonymous, Twitter, Facebook, GitHub, etcetera. From there, let's write a function that will log the user in. The first thing we need to do is define the provider that we wanna use, which in this case would be the Firebase Auth Google Auth provider. From there, we can reference the Firebase auth library and call sign in with pop up passing at that provider as an argument. 5. And that's literally all the code that it takes to log in the user with Google. This operation happens asynchronously, which means it returns a promise. Whenever we have a promise, we can attach then to it, which will give us the user once that promise resolves. So we're saying sign in with pop up, 5. Then when we have a user, let's set that user as a variable. Then we can write their display name to the DOM, and we'll also console log the user object. All of the user information will come from the actual Google account. If we go ahead and click our log in with Google button, it's going to bring up a pop up window where the user will log in to their actual Google account. 5. Then it's going to execute any code inside of that then block. Firebase uses JSON Web Tokens for authentication, which means there's an encrypted token on the browser now that identifies this user. If you wanna see that token, you can just go into the browser and type in local storage, 5. And you can see the current user session there. JSON Web Tokens are much easier to work with compared to cookies, especially for JavaScript applications like Angular and React. I won't get into the details here, but I do cover that in some of my more advanced videos. If we go back into the Firebase console now, you'll see that our user is created in the Firebase authentication tab. We can use this to disable accounts, update email templates if you're using email password auth, perform text message verification, and view some basic analytics. 5. So that wraps up UserAuth. Now let's move into the cornerstone of Firebase, which is its database. As of October 2017, we have 2 different database options, both of them being NoSQL databases. We have Realtime Database and Cloud Firestore. 5. You can use both of them together, but more often than not, you're going to choose between 1 or the other. And the best way to do that, in my opinion, is to analyze the pricing. For the real time database, we're charged $5 per gigabyte stored and $1 per gigabyte downloaded. For Firestore, on the other hand, we're charged 18¢ per gigabyte stored, but we're also charged for each individual document read and write operation. So what that boils down to is that if you have a really simple dataset that is read frequently, you would use the real time database. But for a larger, more complex relational dataset, you'd wanna use Cloud Firestore. In the majority of cases, I find that Cloud Firestore ends up being the better choice, so that's where we're going to start. 5. Enable the database and start it in test mode which is going to disable any security rules. Then the actual database itself is structured as collections 5 documents. It follows a pattern similar to MongoDB, which is the most widely adopted NoSQL database in the world. And if you're interested in data modeling, check out episode 85. The first thing we'll do is create a collection which is just a container for documents, 5. And then we'll add our first document to it. Every document has a unique ID, which you can create yourself or you can have it automatically generated. In this case, I'm going to create myself and call it first post. Then the actual data that we consume from our app will be set as fields on this document. The structure is similar to a JavaScript object or an object in any other programming language. We can then use these fields to pull a subset of documents from a collection based on whatever condition we wanna pass to it. That'll make a little more sense when we start building some queries in our front end code. 5. One of the coolest things about Firebase is that your user authentication system is directly tied to your database. 5. Under the rules tab, you can write expressive statements that define the back end security logic for your app. For example, if you had a certain set of documents that only a logged users should see. You'd be able to do that here with a single line of code. It's beyond the scope of this video, but needless to say, it's a very important part of building a fully secured app. Then the last thing Firestore can do is build indices. By default, you'll have an index for every field on a given document. But if you want to query by multiple fields, you may need to create your own custom index. Now getting back to our front end app, I'm going to replace the Firebase database import with Firestore. And the first thing I wanna do is just retrieve and read that document that we created in the database console. File. So first, we make a reference to Firestore as a variable named DB. Then we make a reference to the collection by calling DB collection posts. 5. And then we reference the specific document ID, which I gave a custom ID of first post. So at this point, we have a reference to the document, And we could use that reference to retrieve it, listen to it in real time, or update and delete it. What we wanna do right now is just retrieve it and be done with it. So to retrieve it, we just call get, which is an asynchronous operation that returns a promise that resolves with the actual document data that we saved in Firestore. 5. So I'll set the data as a variable, and I'll write the title and timestamp to the browser window. Now if we refresh the page, we should see that document information printed to the screen. So that's pretty cool. But one of the major benefits of Firebase is that we can listen to data changes in real time. So if you have some data that's shared between multiple users and that data changes somewhere, all of your users are going to be notified at that exact moment of the change. 5. That would be an extremely difficult feature to build from scratch, but we can do it with a few modifications to the code we just wrote. 5. So instead of calling get, we're going to replace that with on snapshot. Instead of returning a promise, this is going to return a real time stream that we can listen to with a callback function. So we can get rid of then and we'll just copy and paste all of our previous code inside of this callback function. Every time the document changes, it's going to emit a new document to this function, and we can handle it accordingly. 5. In this case, the browser should write another line every time a change occurs in Firestore. So let's go ahead and change the title. And you can see here on the right that it's automatically updated in the browser. If your app does anything that's real time in nature, this is going to be one of the most powerful aspects of Firebase for you. In addition to reading documents, we can also update documents from our client side code. What I'm going to do here is set up a form input. And every time this input changes, it's going to run an update to Firestore. So we'll set up a function called update post, and then we'll make a reference to the document just like we did before. But this time, we'll call update and pass it the information that the user had typed into the form. When data is updated from your app, Firestore does something really cool called optimistic updates or latency compensation. If you have a real time listener on the data like we set up before, it will update the view immediately so your user doesn't have to wait for a server to respond, which might take a second or 2 and potentially hurt the user experience. 5. In most cases, though, we're probably not going to be reading a single document, but trying to query a collection of documents. To show you that, I'm creating a collection of products where every product has a price and a name. One of the major benefits of Firestore is that you can query multiple documents in a very expressive way. 5. Back in the code, we'll first make a reference to the products collection. And then if we want to get a subset of the documents in that collection, we can call where. 5. And where takes 3 different arguments. 1st, it's the field that we wanna sort by, which, in this case, is the price. Then it takes an operator, which could be equal to, greater than, greater than or equal to, and so on. Then the 3rd and final argument is the actual value. So So in this case, we want all the products whose price is greater than $10. Then just like we did with the document read, we can call get. And instead of returning a single document, it's going to return an array of documents. So really the only difference is that we need to loop over these documents to get the data for each one. For each document in the array, I'm writing the name and price to the screen. So we have our wrench and our chainsaw, which are both over $10. 5. If we change the operator to greater than or equal to $10, then the query will also include products that are equal to $10. If we want to check for gist equality, we can change the operator to equals, and then it's only going to return the hammer. 5. In addition to the where method, we can also use order by to return documents in a specific order. If we want to retrieve all of our products ordered from highest price to lowest price, then we can say order by price descending, and we'll get our products back in that order. And we can also limit the number of documents that are returned, which is really important when you're working with a large collection. Simply chain the limit method to any query, And that will cap the number of documents that come back in the array. That wraps up the database section. Now we're ready to get started with Firebase Storage. 5. Storage is just a cloud storage bucket that is also tied to your Firebase project. This is where you might put user generated content like uploaded images, videos, things like that. So the first thing we wanna do is go into the rules section. And currently, it's set up to only allow authenticated users to upload files, but we wanna change that. For now, we're just going to let anybody upload files to our storage bucket. Back in the index HTML in our front end app, I'm setting up a form input that is set to type file. Then on the change event, we're going to run a function called upload file 5, and pass it this files as the argument. I am also going to display an image tag that currently doesn't have a source, 5. But we'll set its source asynchronously after the upload is complete. In the JavaScript, we'll make a reference to the storage library. In a similar way that we did with the database, we will reference a path in that storage bucket. But in the storage bucket, we do that by calling child. And then in this case, we'll just pass it a static image name of horse.jpeg. With this reference, we can either upload file or download an existing file URL. Our form input's going to return a file list, so we'll just take the first item of that list with item 0. And then to upload the file, all we have to do is call the reference put file. We can run code when the upload's complete by chaining then to it. It's going to return some data about the upload itself including the snapshot download URL. What we wanna do in this case is take that URL and then apply it to the source of that image tag that we set in the HTML. If we go ahead and choose a file, it's going to start the upload, and then you'll see it updated in the document after a couple seconds. If we jump back to the Firebase console, we can also see the image in the storage bucket there as well. That was super easy. And now we can get on to my favorite part of Firebase which is Cloud Functions. We're going to do something very simple. But if you wanna see Cloud Functions do things like hit machine learning APIs, handle payments, 5. Send emails and things like that. Check out the functions tag on the main website. Functions can be thought of as your own Node. Js server that runs on demand. So instead of having 1 giant monolithic framework that handles all of your back end code, you write microservices that perform a specific function. 5. And anything that you can do in Node. Js, you can do in a function. You can install any NPM packages you want into your functions environment, and the Node. Js ecosystem is huge, so that opens the door for a lot of creativity. We can initialize functions in our project by running Firebase init functions. That's going to create a new directory called functions which isolates all of our back end code. You can trigger functions in a variety of ways, but the way we're going to do it is with a Firestore database trigger. What that means is we're going to listen to a specific document path. And when a new document is created there, it's going to trigger that function code to run on the back end. What we're going to do in this case is just send a message from the function back to the database. The idea here is to show you how information can be shared between your back end code and your database. Inside the functions directory, we have a package JSON which defines all of our third party npm dependencies. Then we can define our functions in the index JS file. And another unique thing we can do here is use the Firebase Admin SDK. The Admin SDK can only be used in a back end environment like Cloud Function, and it will bypass any security rules that you've defined in your Firebase app. The first thing we wanna do is say exports followed by the name of our function, which in this case is send a message. Then we'll point this function to Firestore 5 on documents in the products collection. The brackets make the product ID a wildcard, so it's going to run this function every time a new document is created. 5. Inside this onCreate trigger, we need to return a Promise, and it's going to give us access to this event object that has some information about the incoming request. 5. In Firestore, we can get the document ID from the event params, and then we can get the data inside that document from the event data data. And in this demo, we're only interested in the name of the actual product. So now the Cloud Functions receive some data, 5. And it wants to send that data back as an update to the same document. So to do that, we say admin Firestore And then reference that document path. Then the last thing we'll do is return the actual update operation which is a promise. 5. In other words, we're returning the update operation from this function, and the function will terminate as soon as that promise resolves. 5. The last thing we need to do is run Firebase deploy functions, and that will send our code up to Firebase. You can verify that it was deployed by going to the functions tab, and you should now see that function in there with some basic analytics. Then if you switch over to Firestore and add a document to the product's collection, you should see the update run after a second or so of latency. So that wraps up the main development resources in a Firebase project, authentication, database, storage, hosting, and functions. But when it comes to native mobile apps, there's still a huge number of features that we haven't even looked at. So let's quickly go over some of the highlights there. The first area is testing and stability. If you're like most developers, you probably don't enjoy writing a lot of tests. But thankfully, Firebase has a robo testing tool where Where you can just upload your app build, and it will run a suite of tests that look for issues that commonly cause mobile apps to crash. And you can review the screenshot results of every test. 5 The next thing is analytics, and there's a ton of analytic tools in Firebase. But the one that really stands out to me is StreamView. It gives you a global geographic representation of your entire user base in real time. Then you might want to use trending data there to send push notifications tier users. Firebase makes it easy to send out push notifications based on a user segment, specific topic, or just to a single device. 5. You can also set up AB testing for your notifications and track the conversion rates of each one that you send. I'm going to go ahead and wrap up my tour of Firebase there. If this video helped you, please like and subscribe. And if you're serious about building apps with Firebase, check out Angular Firebase Pro where you get access to a whole bunch of exclusive resources designed to help you build and ship your app faster. Thanks for watching, and I'll see you soon. 5.
The speakers discuss the use of Cloud Firzek for their database and how it can be used for various datasets. They also explain how to retrieve and update data in the transcription tool, including updating the file and accessing and managing user information. The speakers also discuss scalability and the benefits of using the transcription tool for real-time listening to data changes and updating documents. They also mention Cloud PV and the "order" method for accessing and limiting the number of returned documents. They also touch on the use of CloudGeneration for testing, stability, and analytics, including StreamView and trending data.