14

Question 1

141

Answer 1

141

Question 2

q

Answer 2

q

Question 3

q

Answer 3

q

Question 4

q

Answer 4

q

Question 5

q

Answer 5

q

Question 6

q

Answer 6

q

Question 7

q

Answer 7

q

Question 8

q

Answer 8

q

Question 9

142

Answer 9

142

Question 10

q

Answer 10

In this video you are going to learn how to set up a firebase.

So the first part of the video is going to require us to create a new account and set up our database via their web site.

In the second part of this video we’re actually going to connect to the firebase database from our Javascript code.

We’ll wrap the video up by writing a little bit of data and all of this configuration is going to set us up for the rest of the section where you’re going to learn how to save data remove data fetch data and update your data.

Step one though is to create a new account.

So I’m going to head over to firebase.google.com and you’re going to either need to sign in with your existing Google account or create a new one. From here on out I am going to assume that you are signed in and we’re going to kick things off by just heading over to the con..

I’m going to go to the con. This is going to require us to pick the firebase app we want to work with.

Now I do have some existing apps you might have some as well if you don’t have any, or you’re seeing some sort of get started guide you can actually just go ahead and close that down and we’re going to work through the process together right here.

All we need to do is add a new project and all we have to do to add the new project is to actually create a project name.

I’m going to call this one expensify.

Now we can keep the country and region the exact same as the default.

I can then create the project and this is going to bring us to the firebase project dashboard.

Now firebase has a whole bunch of features built in. A lot of the features we’re not going to be taking advantage of.

We’re using firebase for two big ones.

They’re real time database and they’re authentication system.

So they do have other ones for hosting their functions they have a test lab and crash reporting stuff.

We’re not going to worry about that.

And we’re also not going to be doing the mobile integrations we’re going to focus on the database for web and authentication for web. If we can integrate both of those then we will have a completely production ready expensify app.

Now at its core the firebase database is a known as Cuil database that resembles an object, a javascript object.

So we have various key value pairs where our data is stored. The key is a string. The value is something like a string and number a boolean an array or another object.

So this is going to allow us to easily structure our data to get started.

Let’s head over to the database tab.

Now this is where later on we’ll actually be able to view all of the data that makes up our application.

For now though there is no data.

We just have our application name right here.

It is the name we provided with a randomly generated ID.

This is the application ID and we see the exact same thing in that you are Elop here.

I have expensive a 13 e 6.

Now on this page all we really want to do is head over to the rules tab rules allow us to configure who can read and write to the database and they are a very important part of locking down your data something we are going to cover a bit later in detail.

For now though we actually want to loosen up those rules allowing anyone to read and write to the database.

This is going to make it easy to explore the basics of firebase without also having to cover authentication at the same time.

So right here we have a rules property on this object and we have read and write.

This lets us provide the global read and write rules.

Currently it just requires the user to be authenticated.

I’m going to go ahead and remove this string right here and set it equal to true instead.

This is going to allow anybody who has the database information to read from the database and we’re

going to do the same thing with right of move the string and set it equal to the boolean true.

We’ll fix these rules later to lock down the database.

But for now these rules are going to make it easy to get started.

I’m going to go ahead and hit publish.

This is going to actually publish these rules and you can see right now we’re getting a warning your security rules are defined as public.

Anyone can read or write to your database.

And this is perfectly fine.

We’re well aware of what we just did.

We’re just doing this to make life a little bit easier.

So from here there’s really not a whole lot left to do inside of the firebase Web site.

I’m going to go back to the home page and click this guy right here at firebase to your web app so adding firebase to you without location is really easy.

As you can see here they are using a script tag to add it.

We’re going to install the NPM library instead.

Then we just have to take our configuration object copy it into our code and we’ll be all done.

We’re going to learn how to break all of this out into environment variables a little bit later on.

But for now we will just actually take this object exactly as we see it here.

Let’s go ahead and install firebase.

We’re going to do that by heading over to the terminal and using yarn over here.

That’s going to be yarn and the module is firebase and we’re going to be installing the version at 4.2.0 which is the latest.

Now once we do add this into the application we’re actually going to be able to use it to do this but what we’re going to do is create a new file in the source directory and we’re actually going to create a new folder too.

So let’s make a new folder in src I’m going to call this one firebase and in there we’re going to store for the moment a single file.

The file will be called firebase.js. This is where we are going to actually connect to the database.

So we’re going to connect to the database once in this file and then other files in our project can use that connection by just importing what we have here for now what we need to do is grab everything from firebase and the syntax for this is going to look a little different than you might expect since the syntax is a little different.

Let’s just go through the line together typing it out.

Character by character.

Then we’ll come back and talk about what it does that’s going to be in port then a space then an actress

space then the word as space the word firebase and then from inside of quotes the module firebase.

So the big difference is this stuff right here.

This is stuff we haven’t seen before.

Star adds.

So what this does is it takes all of the named exports from firebase and it dumps them on a brand new

variable called firebase.

Now this is required because firebase doesn’t have some sort of default export like this.

This would be nice but it’s just not how it’s set up.

So when we add star as we take all of those named exports and we create a new variable for that now we can do this with our own files as well if we had a file with multiple named exports for example we have actions expenses.

I could set up an import statement to grab all of these and dump them on some object.

Now that might look a little bit like this in port star as expenses actions from.

And then I would provide the path to the file.

So I would go up a directory out of firebase into actions and then I would grab the expenses file.

Now I’m going to have access to all sorts of things like expenses actions dot and from here I have all

of the methods that are actually named export.

So I have access to add expense remove expenses and added expense.

So by adding star ads we’re not really doing anything we haven’t seen before.

We’re just setting it up a little bit differently.

So instead of needing to manually grab all of those named exports we can just grab all of them toss

them on a new variable and then access them from that variable.

The reason we’re doing this is because this is recommended by firebase and a lot of the firebase documentation

and examples you’re going to see out there use this exact same structure.

So it’s important to know exactly what it is and how it works.

Now at this point we can actually go ahead and make a connection to our database before we can though

we do need to ground that configuration object that we saw in the browser.

So I’m going to head over there.

I’m going to take this entire object.

I’m going to copy it and I am going to paste it over inside a visual studio code.

Now we can go ahead and change this regular variable over to a concert.

We are not going to be doing any reassignment of config.

And once we have this in place the last thing we need to do to make the connection is to use the method

shown right here.

Firebase dot initialize app.

This is going to initialize firebase to work with the specific application whose config you provided.

So we can set that up down below firebase dot initialize app and it takes in that configuration object.

So we have to do is pass in config.

Now at this point we should have a valid connection to the firebase database in the next video we’re

going to learn in detail how we can write data.

But I actually would like to add one statement real quick just to test our connection.

If it works correctly we know the connection was set up.

If it doesn’t work then we know that something didn’t go right.

So far to add this line we are just going to add a single statement down below.

Now I’m going to gloss over some of the details.

They’re going to be covered in the next video where we talk about writing data in detail.

For now though we’re just going to add the line in firebase.

Here we are going to access the database method.

This gives us access to all of the database related features.

As I mentioned there are a lot of tools provided by firebase databases just one of them from here.

We have to get a reference to somewhere in our database.

Now we’re going to learn a whole lot about this later.

We can get a reference to the area where we store users we can get a reference to the area where we

store expenses to do’s notes journal entries whatever our app needs to store for now we’re just going

to call DOT ref getting a reference to the root of our database.

We’ll talk about exactly how we can use this with arguments a little bit later.

Next up we’re going to do is call set.

This lets us actually provide the data we want to set.

I’m going to set something by passing an object on here.

We provide the various key value pairs and for our purposes to just test this connection I’m going to

set name equal to the string.

Andrew Mead go ahead and use your name right there.

We can then save the firebase file and actually test this out.

Now the firebase file never gets imported by the application.

So it’s actually not going to run and the data will never get returned because the file never runs.

To fix this we’re just going to import it from Appert J S for the moment.

I’m going to inport right here.

We don’t need to grab anything so we can just go ahead and move right on into the actual path that would

be forward slash firebase forward slash firebase.

So now the file will at least run when we start up the application.

And this is going to allow us to confirm that connection was created successfully.

Next up we do have to start up the development server so from the terminal I’m going to use yarn run

Devis server to start that up once it is up.

We’re just going to visit local host 88 in the browser and see what we get.

I’m going to switch over to that refresh localhost ADHD and I am going to crack open the developer tools

as well.

Now down below in the council we’re not getting any errors which is a good thing.

It appears that everything went well to actually test if the data was written correctly though we can

go over to the database firebase dashboard right here.

We’re going to go over to the database tab.

And what do we see here.

We see our data showing up.

So under expensive FY we have name name was set to Andrew if you’re seeing your data here then that

means in the database and the database connection were set up successfully and you’re ready to move

on to the next video where you’re going to learn about saving data in detail.

Let’s take just a quick moment to recap.

In this video we had to create a project on the firebase dashboard and we had to connect to the project

using the firebase module.

We provided this really long configuration object which contains what is equivalent to our password.

We then pass it into initialize app and this gave us access to the database where we were able to write

some data.

We’re going to cover more about this in detail in the next one.

So let’s go ahead and jump over there.

Question 11

How would you create a new firebase account?

Answer 11

Head over to firebase.google.com and you’re going to either need to sign in with your existing Google account or create a new one.

Question 12

What’s the first thing you could do when you’re logged in in Firebase?

Answer 12

Head over to the console

Question 13

What does heading over to the console in Firebase require us to do?

Answer 13

Pick the Firebase app we want to work with.

Question 14

What is something to note in regards to going to the console in Firebase?

Answer 14

You might have some existing apps or you might not have any, or you’re seeing some sort of get started guide.

Question 15

What do you need to do when you go to the console in Firebase?

Answer 15

Add a new project

Question 16

How can you add a new project in Firebase?

Answer 16

Create a project name. We can keep the country and region the exact same as the default.

Question 17

What happens when you create a new project?

Answer 17

It’s going to bring us to the Firebase project dashboard.

Question 18

What are some feature in Firebase?

Answer 18

Real time database and authentication systems. They also have other ones for hosting their functions and they have a test lab and crash reporting stuff. They also have mobile integrations.

Question 19

What is Firebase at it’s core?

Answer 19

A NoSQL database that resembles a JavaScript object.

We have various key value pairs where our data is stored. The key is a string. The value is something like a string, a number, a boolean, an array or another object.

Question 20

What does Firebase resembling a JavaScript object allow for?

Answer 20

Easily structure our data.

Question 21

How can we get started?

Answer 21

Head over to the database tab.

Question 22

What will the database tab do?

Answer 22

Later on we’ll actually be able to view all of the data that makes up our application. For now though there is no data. We just have our application name.

Question 23

What is the application name found in the database tab?

Answer 23

It is the name we provided with a randomly generated ID. This is the application ID and we see the exact same thing in the url.

Question 24

What do we want to do on the database tab?

Answer 24

Head over to the rules tab

Question 25

What do rules allow us to do in Firebase?

Answer 25

Allow us to configure who can read and write to the database and they are a very important part of locking down your data.

Question 26

What do we want to do for now in the rules tab?

Answer 26

Loosen up those rules allowing anyone to read and write to the database.

Question 27

Why do we, for now, want to loosen up the rules in the rules tab?

Answer 27

It will make it easy to explore the basics of Firebase without also having to cover authentication at the same time.

Question 28

What do we see when we open up the rules tab?

Answer 28

{
    "rules" : {
        ".read" : "auth != null",
        ".write" : "auth != null"
    }
}

Question 29

What is this code?

{
    "rules" : {
        ".read" : "auth != null",
        ".write" : "auth != null"
    }
}

Answer 29

We have a rules property on an object and we have .read and .write.

Question 30

What does the .read and .write properties do in this code?

{
    "rules" : {
        ".read" : "auth != null",
        ".write" : "auth != null"
    }
}

Answer 30

They let us provide the global read and write rules.

Question 31

What do the global .read and .write rules require in this code?

{
    "rules" : {
        ".read" : "auth != null",
        ".write" : "auth != null"
    }
}

Answer 31

The user to be authenticated.

I’m going to go ahead and remove this string right here and set it equal to true instead.

This is going to allow anybody who has the database information to read from the database and we’re

going to do the same thing with right of move the string and set it equal to the boolean true.

We’ll fix these rules later to lock down the database.

But for now these rules are going to make it easy to get started.

I’m going to go ahead and hit publish.

This is going to actually publish these rules and you can see right now we’re getting a warning your security rules are defined as public.

Anyone can read or write to your database.

And this is perfectly fine.

We’re well aware of what we just did.

We’re just doing this to make life a little bit easier.

So from here there’s really not a whole lot left to do inside of the firebase Web site.

I’m going to go back to the home page and click this guy right here at firebase to your web app so adding firebase to you without location is really easy.

As you can see here they are using a script tag to add it.

We’re going to install the NPM library instead.

Then we just have to take our configuration object copy it into our code and we’ll be all done.

We’re going to learn how to break all of this out into environment variables a little bit later on.

But for now we will just actually take this object exactly as we see it here.

Let’s go ahead and install firebase.

We’re going to do that by heading over to the terminal and using yarn over here.

That’s going to be yarn and the module is firebase and we’re going to be installing the version at 4.2.0 which is the latest.

Now once we do add this into the application we’re actually going to be able to use it to do this but what we’re going to do is create a new file in the source directory and we’re actually going to create a new folder too.

So let’s make a new folder in src I’m going to call this one firebase and in there we’re going to store for the moment a single file.

The file will be called firebase.js. This is where we are going to actually connect to the database.

So we’re going to connect to the database once in this file and then other files in our project can use that connection by just importing what we have here for now what we need to do is grab everything from firebase and the syntax for this is going to look a little different than you might expect since the syntax is a little different.

Let’s just go through the line together typing it out.

Character by character.

Then we’ll come back and talk about what it does that’s going to be in port then a space then an actress

space then the word as space the word firebase and then from inside of quotes the module firebase.

So the big difference is this stuff right here.

This is stuff we haven’t seen before.

Star adds.

So what this does is it takes all of the named exports from firebase and it dumps them on a brand new

variable called firebase.

Now this is required because firebase doesn’t have some sort of default export like this.

This would be nice but it’s just not how it’s set up.

So when we add star as we take all of those named exports and we create a new variable for that now we can do this with our own files as well if we had a file with multiple named exports for example we have actions expenses.

I could set up an import statement to grab all of these and dump them on some object.

Now that might look a little bit like this in port star as expenses actions from.

And then I would provide the path to the file.

So I would go up a directory out of firebase into actions and then I would grab the expenses file.

Now I’m going to have access to all sorts of things like expenses actions dot and from here I have all

of the methods that are actually named export.

So I have access to add expense remove expenses and added expense.

So by adding star ads we’re not really doing anything we haven’t seen before.

We’re just setting it up a little bit differently.

So instead of needing to manually grab all of those named exports we can just grab all of them toss

them on a new variable and then access them from that variable.

The reason we’re doing this is because this is recommended by firebase and a lot of the firebase documentation

and examples you’re going to see out there use this exact same structure.

So it’s important to know exactly what it is and how it works.

Now at this point we can actually go ahead and make a connection to our database before we can though

we do need to ground that configuration object that we saw in the browser.

So I’m going to head over there.

I’m going to take this entire object.

I’m going to copy it and I am going to paste it over inside a visual studio code.

Now we can go ahead and change this regular variable over to a concert.

We are not going to be doing any reassignment of config.

And once we have this in place the last thing we need to do to make the connection is to use the method

shown right here.

Firebase dot initialize app.

This is going to initialize firebase to work with the specific application whose config you provided.

So we can set that up down below firebase dot initialize app and it takes in that configuration object.

So we have to do is pass in config.

Now at this point we should have a valid connection to the firebase database in the next video we’re

going to learn in detail how we can write data.

But I actually would like to add one statement real quick just to test our connection.

If it works correctly we know the connection was set up.

If it doesn’t work then we know that something didn’t go right.

So far to add this line we are just going to add a single statement down below.

Now I’m going to gloss over some of the details.

They’re going to be covered in the next video where we talk about writing data in detail.

For now though we’re just going to add the line in firebase.

Here we are going to access the database method.

This gives us access to all of the database related features.

As I mentioned there are a lot of tools provided by firebase databases just one of them from here.

We have to get a reference to somewhere in our database.

Now we’re going to learn a whole lot about this later.

We can get a reference to the area where we store users we can get a reference to the area where we

store expenses to do’s notes journal entries whatever our app needs to store for now we’re just going

to call DOT ref getting a reference to the root of our database.

We’ll talk about exactly how we can use this with arguments a little bit later.

Next up we’re going to do is call set.

This lets us actually provide the data we want to set.

I’m going to set something by passing an object on here.

We provide the various key value pairs and for our purposes to just test this connection I’m going to

set name equal to the string.

Andrew Mead go ahead and use your name right there.

We can then save the firebase file and actually test this out.

Now the firebase file never gets imported by the application.

So it’s actually not going to run and the data will never get returned because the file never runs.

To fix this we’re just going to import it from Appert J S for the moment.

I’m going to inport right here.

We don’t need to grab anything so we can just go ahead and move right on into the actual path that would

be forward slash firebase forward slash firebase.

So now the file will at least run when we start up the application.

And this is going to allow us to confirm that connection was created successfully.

Next up we do have to start up the development server so from the terminal I’m going to use yarn run

Devis server to start that up once it is up.

We’re just going to visit local host 88 in the browser and see what we get.

I’m going to switch over to that refresh localhost ADHD and I am going to crack open the developer tools

as well.

Now down below in the council we’re not getting any errors which is a good thing.

It appears that everything went well to actually test if the data was written correctly though we can

go over to the database firebase dashboard right here.

We’re going to go over to the database tab.

And what do we see here.

We see our data showing up.

So under expensive FY we have name name was set to Andrew if you’re seeing your data here then that

means in the database and the database connection were set up successfully and you’re ready to move

on to the next video where you’re going to learn about saving data in detail.

Let’s take just a quick moment to recap.

In this video we had to create a project on the firebase dashboard and we had to connect to the project

using the firebase module.

We provided this really long configuration object which contains what is equivalent to our password.

We then pass it into initialize app and this gave us access to the database where we were able to write

some data.

We’re going to cover more about this in detail in the next one.

So let’s go ahead and jump over there.