Exercise (Video): Firebase

Loading...

Del curso dictado por The Hong Kong University of Science and Technology

Server-side Development with NodeJS, Express and MongoDB

363 calificaciones

The Hong Kong University of Science and Technology

Server-side Development with NodeJS, Express and MongoDB

363 calificaciones

Curso 4 de 4 en SpecializationFull-Stack Web Development with React

This course deals with all things server-side. We base the entire course around the NodeJS platform. We start with a brief overview of the Web protocols: HTTP and HTTPS. We examine NodeJS and NodeJS modules: Express for building web servers. On the database side, we review basic CRUD operations, NoSQL databases, in particular MongoDB and Mongoose for accessing MongoDB from NodeJS. We examine the REST concepts and building a RESTful API. We touch upon authentication and security. Finally we review backend as a service (BaaS) approaches, including mobile BaaS, both open-source and commercial BaaS services. At the end of this course, you will be able to: - Demonstrate an understanding of server-side concepts, CRUD and REST - Build and configure a backend server using NodeJS framework - Build a RESTful API for the front-end to access backend services

De la lección

Backend as a Service (BaaS)

In this module we learn about Mongoose population, a way of cross-referencing documents and populating the documents from other documents. We then review secure communication using HTTPS. We look at Backend as a Service (BaaS) and take a brief look at Loopback.

Backend as a Service18:11

Exercise (Video): Firebase22:57

Exercise (Video): Angular Application using Firebase as BaaS47:48

Exercise (Video): React Application using Firebase as BaaS19:37

Conoce a los instructores

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

Let's go fishing in the bass market.

We'll start out with Firebase,

the premium offering from Google.

Let's understand a little bit about Firebase,

configure a Firebase server,

and then we will look at the angular application,

which I'm going to retrofit based upon

the previous angular application that you have seen in the earlier lecture.

We will modify it to make use of Firebase as the backend.

So, as we would see at the end of this lesson,

this exercise and the following exercise,

we can easily take an angular application and retrofit it to make use of

Firebase as the backend as a service provider.

To get started on the journey,

let's go to firebase.google.com to understand a little bit about Firebase.

A topic sort of making a whole presentation about Firebase,

I will quickly run you through what has been

explained on the Firebase site itself because they give you

sufficient details about how Firebase itself supports various features.

So let's run through this website to understand how Firebase works.

So if you go to the website, as you can see,

it says Firebase helps you build better mobile apps and grow your business.

And then, as you see here,

it explains you the details about how it allows you to build your apps

fast without having to manage the backend infrastructure for your application,

and a single console that brings a bunch of products that work together.

So these are all Google-offered products that work together to meet your backend needs.

And also here, you can leverage

many of the complementary products that are available from Google.

So in particular, in this exercise,

we will be leveraging the Cloud Firestore,

the new provision from Google.

We'll look at more details about that later on.

We look at how we can use authentication support

that is provided by Firebase for authenticating users.

We'll look at cloud storage for storing our image files and serving them up.

And then we'll also look at how we can leverage all these together with

the Firebase-related node module that we can incorporate together with

angularfire2 node module into our angular application so that

we can communicate with our Firebase backend as a service.

Also, looking more detail,

we see how the Firebase

dash itself provides various features like allowing you to roll out

different user features for different onboarding of your application and

how easy it is to integrate your backend with either an iOS,

Android or the web application.

In particular, we will look at the web application and using JavaScript and

also the use of how we will

incorporate this into our angular application a little bit later.

And also, Firebase provides a real-time database,

both the original real-time database,

as well as the new Cloud Firestone,

allow you to automatically synchronize the data between various user devices.

So any changes made on

the server side will be automatically reflected to all the clients,

and, of course, you can read more details about Firebase on this website.

And it's very easy to get started because the basic offering is free for users.

So let's get started using Firebase.

We'll set up our Firebase account and then access and set up our backend as a server,

which we will then leverage from our angular application.

So this is a quick tour of Firebase,

but instead of just looking at these,

let's go in and actually get our hands dirty,

configuring a Firebase base

back into the service and then using it on our angular application.

So to get started,

as you will see to the right edge here,

it says go to console.

Obviously, you should be having a Google account in order to be able to use Firebase.

That goes without saying,

and you should be logged into your Google account.

So, as you can see,

I'm already in my Google account.

So that'll give me access to my console.

If you're not logged in,

then it is better for you to log in to your Google account.

So when you go to the console,

this will take you to the Firebase services console here,

where you can set up projects.

So when you go to the console,

as you can see, it says add a project.

And, as you can see,

I have already tried out my hand at setting up

another Firebase project before I explained it to you.

So let's set up a project here.

So we'll click on the add project,

and that should bring up a nice little window,

where you can type in information.

So we'll call this project as conFusionServer,

as you would expect and configure it to wherever you are at the moment.

So I am going to configure it to use

Hong Kong and create a project.

And once your project is created,

this is what you will be presented with by Firebase.

And, in here, you would see that the first thing that you would want to grab

is information about your Firebase configuration so

that you can use it within your angular application.

So to do that,

click on this button here.

So it says, add Firebase to your web app.

And this will provide you with a bunch of information that

you should copy and save because I will be

making use of this information to configure

my angular application a little bit later in the next exercise.

So save this information at a convenient location so that you

can make use of this information when you set up your client's site.

The next step, I will set up a couple of accounts here.

So let me click on the authentication here.

And when the authentication is brought up,

we'll set up the sign in methods that we will use for our Firebase server,

and in my case,

I will use the email password as one of the options.

So we will enable the email password.

I will also enable the Google sign-in.

So these two are enabled.

If you want to, you can enable other ways of authenticating the users.

Next, going to the users, now,

if you log into this application with your Google account,

that user will be automatically added into your system.

But right now, I'm going to set up one user with an email and password.

So I will set up an admin@confusion.net,

and I will set up a password here and add in the user.

So this will be one user,

who can sign in with the email-password combination.

We can also sign up to access this using our Google account.

So my angular application,

I will set up to use both the email password way of signing in

and as well as by Google account-based sign in.

After that, we will go into storage.

So we will set up storage next.

So the storage is where you can set up a way

of uploading files to your server and then making them available for use.

So this storage, I'm going to set up my storage to store

the images that we will use and save up from our server site.

So when you set up storage,

it will come up with the set of security rules,

which specify what kind of operations will be allowed by the user.

So it says allow read,

write: if request.auth not equal to null,

so which means that only users that have logged

into this server will be able to read and write.

Now, I'm going to change this to allow reads for anybody,

but writes will be allowed only by authenticated users.

So we'll say, got it,

and then I'm going to get started.

So, in the rules,

I will go into the rules here and then modify the rules to

allow users to be able to read from the server.

Now, we can set it up at specific folder level,

but since this is a simple application,

I'm going to set it up at the entire storage level.

So, here, I will say, allow read,

and then I'm going to modify this rule to say allow read,

and I'll say, allow write if request.

So, as you can see,

users will be allowed to read from the storage.

Any user will be allowed to read, even without authentication,

but writing is restricted only to users that log into the system.

So this is simple modification to the access rules,

of the security rules.

You can be more elaborate on this,

but in the simple example,

I'm going to stay with this.

And then we'll publish these rules to our server.

Then going back to files, in the files,

I'm going to create a new folder here named images.

Now, as you see,

the rules can be set up for this specific images folder,

so it'll allow users to only read from these images folder and then only

authorized users to upload to this images folder if you so choose to.

But, right now, I'm going to leave it as such,

as the generic set of rule that I have configured there.

Now, going to the images folder.

I'm going to upload a bunch of images to this folder here.

So let me grab a bunch of images that I have for my application.

And so, earlier, I had used these images in my other applications.

I'm going to select all these images and then upload them to the Google storage here.

These images are available in

your images.zip file that I have provided you in the previous exercise,

in the previous lesson.

So just download the images.zip file,

or if you have already downloaded,

you should have these images with you so you can upload them to the file.

When you upload these images,

you can click on any one of those images and also notice that down below here,

it gives you this file location.

You need to copy this URL for this file location because when we configure our database,

in the images field of our JSON data,

we're going to configure each one of them with this URL for the corresponding image.

Next, we will move on to that database.

In the database, you're given two choices.

You can go with the older real-time database,

which is supported by Google,

and indeed most current applications that use Firebase will use the real-time database.

But then, in this course,

we will explore the newer Firestore beta.

The Firestore beta provides a lot more comprehensive real-time database.

So this is the next generation real-time database and provides

a lot more advanced ways of doing querying and

automatically scaling their storage for us.

So we'll go with the Firestore beta.

Now, one of the reasons again for me to start with

the Firestore beta is simply because it

allows us to store the information in the form of documents and collections.

Now, from our experience with MongoDB,

we already know how documents and collections work,

and so that's why the Firestore beta is a much better choice for us,

since we already know how that is configured.

If you want to default to the standard real-time database,

you can choose to do so.

But the real-time database stores all your data in

one large tree and has a limited amount of querying capability.

So for the security rules for my Firestore,

I will go with the test mode,

where I will just leave it open for people to read and write at the moment.

And this is okay because we're just testing the database, but normally,

I would suggest to go with a more configured way of working with your database here.

So we'll start with a test mode to start with.

And so we'll set up the security rules like this to begin with.

You can go with more elaborate security tool set-up.

So as you saw with the storage,

we had set up such that reads are allowed by

anybody but writes are allowed only by authorized users.

We can set up a similar functionality here also.

So this is the confusionserver.

And so, in the rules,

let me go to that storage and then just copy the rule from the storage here,

and we will set up the same kind of restriction here.

So we will allow anybody to read but only

authorized users to write to the database.

So going back to the database, in the rules,

we can say allow read: and then the second line I'm going to replace that,

saying allow write if request.auth is not equal to null.

So only people that are logged in,

they'll be able to make modifications to the data so that we,

at least, I have some protection on my data.

Now, in here, we now can graphically add in the data to our application.

And this, I find the quickest way of adding in the data.

If you set up the client site,

you can post data from the client site also, but,

right now, we'll start up by adding in three collections here.

So the first collection that I will add up is dishes.

And we can add documents to the dishes,

so we can add our first document.

So to add a document to the dishes,

remember that I've given you the db.JSON file there.

So you can go with the db.JSON file and then add in,

step by step, each of the dishes that we have.

So, here, I'm going to configure the first dish here.

So for the dish, we can allow Firebase to automatically assign the ID for our document.

So I'll let that automatically assign.

So we'll add in the first dish here.

The field's name and the first dish here.

So we have to painstakingly add,

bit by bit, each of the dishes here.

So we'll say name,

and then we'll say category, which is mains.

And then we will add in image,

which I'm going to come back and add in a little bit later because I need to copy

the image URL from my storage and use it here.

Then we will have it labeled as Hot, price.

So we have category,

name, category, image, label, price,

description, which I'm going to copy and paste from my db.JSON file.

And, finally, the featured flag,

which I will set as a boolean and set that to true in this case.

So this will be our first document that we will add into our database here.

So you would immediately notice that,

in our database, the first document gets added.

So we'll see dishes and the first document,

and you can see the information about this document configured here.

So we have category, description,

featured, image, label, name and price.

We will also add one more field here called createdAt,

and this will be a timestamp.

And the timestamp would be today's timestamp and then I leave there time value as such.

So we can add timestamps also to this, and, also,

we'll add one more timestamp as updatedAt and with the timestamp here.

So we have two more timestamps here.

Now, for the image,

we will go to the storage here.

And from our storage, in the images,

we will select the image file here

and then go to the file location and then copy this URL here.

So if we just click on this,

that URL will be copied.

So we'll come back to

that database and then

edit the image field and then add in that URL there.

Like that, you can go ahead and add the remaining dishes,

the promotions and also the leaders.

So once you complete all the steps,

which will take quite some time for you to do step by step.

So I let you finish adding all this information to your Firebase.

So after you complete entering all the data into your database,

your dishes should have four dishes here.

Again, make sure that you initialize

the image field with the URL from that storage for that particular image.

So you'll have one, two, three and four dishes.

Then you'll have four leaders correspondingly.

One, two, three and four and one promotion's here.

Again, make sure that you initialize the images for each one of

them appropriately from the Firebase storage.

With this, our server is completely configured.

So our Firebase server has all the data that is required for it to serve up to our plans.

We will now move on to the next exercise,

where we will configure our angular client to be able to access

this Firebase backend as a service and then retrieve

data and then also push data to their Firebase server.

With this, we complete this exercise.

In this exercise, we have seen how easy it is for us to

configure our Firebase backend as a service for both authentication,

for storing files and serving them up and also storing information into

the Cloud Firestore database in the form of collections and documents within collections.

With this, we complete this exercise.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2018 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play