Getting Started with Firebase on the Web – Firecasts


[MUSIC PLAYING] DAVID EAST: What’s
up, everybody? David here. And today, I have a quick
and easy Firecast for you. We’re going to
get up and running with Firebase and the web. And this is actually to be
the first of many screencasts in a series. So make sure you subscribe
to get notified of tutorials on authentication, storage,
hosting, and web push notifications with
Firebase Cloud Messaging. Also, if you’re a fan of
JavaScript frameworks, I’m going to dropping videos
for Angular 1 and 2, Polymer, React, and Ember. So you better subscribe, because
you don’t want to miss those. But today, we’re going to
start with the very basics. I’m going to show
you some mad copy and pasting skills by getting
the project initialization code from the Firebase console. And then we’re going to
set up a small web app. So let’s go and dive in. So I’m in the Firebase console
at console.firebase.google.com And you can see I’m logged in
as myself up here, just smiling at you. But to get started, I’m going
to create a new project. So I’m going to click
Create New Project. Going to call it web-quickstart. And then we’ll create it. My project is now created. So I’m going to click Add
Firebase To Your Web App. And this brings
up a little model with all the initialization
code I need to get started. It has things like my apiKey,
authDomain, databaseURL, and storageBucket. So then I can go
to the bottom right and then I can click Copy. And that’s all the code
I need to get started. But just as a
little FYI, you can access all of this
information by clicking Auth And then going up
to the top right, where there is Web Setup. But now, to the editor. So here in my editor,
I’m going to get crazy. I’m going to create this
web page from scratch. So I’ll start out with my
basic HTML boiler plates. Give it a title. And now I can just paste in
all the code from the console. And this is all you
need to get started. And just to prove
that it works, I’m going to use the database
as a little tiny demo. So I’m going to create
an H1 and given it an ID. And every single time the
value changes in the real time database, I’m going
to sync it to this H1. So the first thing I need to
do is get that H1 by its ID. And then now I’m going to create
a database reference using firebase.database().ref(). And then create a child
location to the text location. And now I can synchronize
any changes using the on() function. And then using ES2015
arrow functions, I can just do it
all in one line. So to the left right
here, I have my projects in the Firebase console. And to the right is
just my blank page. To use the database, I’m
going to remove all security. So I’m going to click Rules. And then I’m going to say read
is true and write is true. And click Publish. And you should totally
know that you only do this while you’re developing. Because that means anyone can
read or write to your database. So now I’m going to give
my browser a Refresh. And then I’m going to
add a text location. And it synchronizes
to the browser. And so I can change it and
then it changes as well. So keep in mind that
the real time database is just one of the many features
Firebase offers for the web. You can also use authentication,
storage, hosting, and even Firebase Cloud Messaging. So that’s all it
takes to get started with Firebase in the web. And if you want to
go and learn more, then check out the
link in the description for our official documentation. And if you’re super excited
to learn more about Firebase on the web, then please
subscribe to our channel because we’re going to
have tons of more content. So that’s all for this time. And I will see you all later. [MUSIC PLAYING]

Add a Comment

Your email address will not be published. Required fields are marked *