[AUDIO LOGO] DAVID EAST: Hey, everyone. My name is David East. SEBA GNAGNARELLA: And
I'm Seba Gnagnarella. DAVID EAST: And today, we're
going to teach you everything that you need to know get
started with Firebase-- SEBA GNAGNARELLA: --and the web. Today, we are going to cover
creating a project, project initialization,
authentication for users, Firestore to Store
data, securing data with security rules, and deploy
the site to Firebase Hosting. Before you can get
started, Node.js and Java need to be downloaded
and configured. But don't worry. We won't be writing
any Java today. There are a lot of
things to get covered. So let's get started. The first thing you need
to do is create a project in the Firebase Console. Make sure you use
a name you like because that's what
Firebase Hosting then uses for your site. We can also configure
Google Analytics to obtain more information
about page views and other important things. Next, we need to
create a Firebase app. An app needs a name. I usually use the default, but
you can use whatever you want. This app contains
the configuration that the Firebase
SDK needs to connect your website with Firebase. DAVID EAST: Now that we've
completed these steps, we can finally write some code. I'm going to start with an
empty project on my computer with npm. First, you have to
download the Firebase CLI. And then next, you have to
authenticate with Firebase. Generally, people download
the Firebase CLI globally. But here, I'm going to download
the CLI as a dev dependency and use npx. Now we need to log
in with Firebase. This process will open up a
browser for authentication. But pro tip, you can
use Firebase login --add and Firebase login --use
to use multiple accounts. Now I'm going to start a project
with the command firebase init hosting. But I'm going to use
a new feature that requires an experimental
command, firebase experiments: enable webframeworks. And you'll see just
why in just a moment. I'm going to type the
firebase init hosting command to start a project. And this command has
so many features. So I'm going to write
the name of my project. And I'm going to set my project
to a path called hosting. This is just where all the
files are going to be stored. And now I can create a project
with several frameworks. I want a project with
Vite and TypeScript because Vite is
very easy and it's flexible to use
with any framework. When it asks for what backend
server you might need-- we won't need one in this
case, so we can skip past that. And I'm also going to choose
No for GitHub deployments because we cover that totally
in a whole other video. So see the description for more. And we already have
a project ready. So I'm going to open
it up in VS Code. SEBA GNAGNARELLA:
Now, in VS Code, I'm going to install
the Firebase SDK. Make sure you are in
the hosting directory during the installation. I'm going to import the SDK. The Firebase SDK is
organized with subpackages. The first one we
use is Firebase app to connect your
project to Firebase. In general, we have to use
initialize app function with its configuration. But when you're using
the experimental feature we mentioned a while ago, you
don't need the configuration or this import. So let's start with
authentication. DAVID EAST: Like most
Firebase services, authentication has
a getter function. You'll see this pattern
in most of our packages. So let's start by
logging in a user. So this package has
functions for logging in with multiple providers. For example, if you want
to sign in with Google, you can use a function
sign-in with redirect that works with social providers. And each social provider has
its own social provider function in the SDK. So how do we know if the user
is logged in to your app? Well, we can use the
onAuthStateChanged function. This function will be called
every time the authentication state changes. If the user does not exist,
the variable will be null. But before we can
run this code, we have to enable the
provider in the console. And this is required for each
provider you want to use. So now when we run
this code, we can see that our user
is in the DevTools. But most importantly, let's
take a look at the uid property. This property is very
important because it is a unique identifier. And don't worry if other people
can see these identifiers because security
in your database comes from security rules. SEBA GNAGNARELLA: Also, we can
use this ID to structure data in a database like Firestore. Firestore is a NoSQL
document database. This means that the database
is organized with a hierarchy. You can structure the data
and collections of documents, but powers comes
from the hierarchy. Instead of creating two
separate collections, you can use a hierarchy to
find expenses much easier. You don't need a query,
only the document path. If you need to do a query,
no problem because Firestore has many functions
for doing queries. We even recently released
operators like or, and, count, and many more. Before using Firestore, we need
to create it in the console. And now we are ready
to use Firestore. As you saw with the
authentication package, Firestore has a getter function. We can use this function to
create a Firestore instance. Now, to get the data, we
have to create a reference to collection or document. Let's say we want to get the
spending data for a user. Before, we need to
get the user ID. And as we saw before, we can use
the onAuthStateChanged function and use the ID to create
the document path we want. Then to get real-time
data, we can use the onSnapshot function. This function runs in real
time whenever the data changes. You will notice that
this function gives you a snapshot that contains
the data we have saved, another important
function, some metadata. For example, we
can use a snapshot to iterate over the documents. We can then sync this
data with the UI. And also, we can do other things
like see the types of changes that occur. Now that we have the data,
we can sync this data with the user interface. I'm going to create
a simple list and add a list item
for each expense and display the
name and the cost. I'm going to enter data in
the database with user ID. I'm going to create a
collection of users with uids. And then based on
the hierarchy, you create a subcollection
of expenses and create a sample
expense document. Now, in the browser, you can
see the data of this user. [NO SPEECH] DAVID EAST: But this query
retrieves every single document underneath the collection. And we're not doing
anything like restricting how many documents come
back or doing any filtering. So we can limit the
results of the documents by using query functions. So to create a query
with Firestore, we're going to import the
other query functions. And typically, you're going
to use query and where. And in this case,
I created a query that retrieves expenses
below $10, where cost is an attribute of each expense. And there are many
things to learn about querying with Firestore. And for more information,
please see the description below because we have so many
videos on this topic. But this is just
for retrieving data. If we want to update
this data, we can also use updating functions. So to update this data,
we have a whole set of functions to use. And certain functions
are for documents and certain others
are for collections. So for example, let's say I
want to create a document. I can write a new path
to create this document. And then I can use the setDoc
function with the data. But there is something
you need to know. The setDoc function
is destructive. This means that
with each update, it will replace the data
that was there before. So if you want to
only update, you can use the updateDoc
function that just updates with any
of the new fields. However, update doc is only for
documents that already exist. So we can use my
favorite trick, which is calling setDoc with
the merge true setting. And this, I tend to think,
works for most cases. In this case, we can create
a new document with a name. But most of the time, we
want to generate an ID. And for that, we can
use the addDoc function. This function adds a document to
the collection with a generated ID. SEBA GNAGNARELLA:
We haven't really seen how to authenticate
users can update data, but the database
is not secure yet. To secure it, we have
to write security rules in the Security Rules Console. In Firebase, security rules
are their own language. But they're easy to learn
and there are many tools to help you build them. Think of security
rules like a firewall. The goal is to match a
route and enforce a rule. We can enforce a rule
with allowed statement. This instruction can
enforce a rule for read and write operations. But this rule is not practical. We can match more
documents with wild card and write the entire rule
with one declaration. But how we can secure all
documents with a single rule? Well, security rules have
a lot of variable [? Cs. ?] As a request variable,
this variable contains information about
the document and the user. We can use the user to make
sure that only this user can access his data. We can test our rules
here in the console. I'm going to write the
path of a fake user. When I click Run,
I see an error. This error is because there
is no authenticated user, and we need to write
some code to verify. Now there is no error. And we know that an
unauthenticated request cannot access this data. To verify that an authenticated
user can access your data, we can try a fake ID. This is like a unit test. And you should know that we
have a package for unit testing. There are many things we
can do with security rules, so check the description
for more videos. DAVID EAST: So we are finally
ready to deploy the site. And since we're
using the experiment, it's very easy to deploy. The CLI automatically detects
the framework, runs the build, and deploys the site
all in one command. So we just write
firebase deploy, and CLI handles
everything for us. And now we have a site
with a web.app domain. SEBA GNAGNARELLA: That's
all you need to get started with Firebase on the web. This was just an introduction,
so check out the links below for more
detailed information. DAVID EAST: And tell us
what else you want to learn about Firebase on the web. And if you liked
this video, make sure to give it a
thumbs up and subscribe. And that's all for this time. And we will see you
on the next one. [AUDIO LOGO]
