Codelab: Get to know Firebase for webYouTube↗  IA↗(long shot)
Science & Technology  16.3K views 468 likes 8 dislikes   23 Jun 2020
Firebase 416K subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
[MUSIC PLAYING]
RACHEL: Hey, there. I'm Rachel from the Firebase team.
こんにちは Firebaseチームのレイチェルです
In this beginner level codelab, we're
ビギナー向けCodelabでは
going to build an interactive web app.
インタラクティブな ウェブアプリをビルドします
In this app, we can share details about an event,
アプリでは イベントの詳細を伝え
get RSVPs that folks are coming, and even let
イベントについて 仲間が入って チャットするための
people chat about the event.
RSVPを作ります
And here's a screen cap of what our web app will look like by the end of the codelab.
最終的にアプリは このような見た目になります
You can find the instructions for this codelab in the video description below.
Codelabの説明は 動画の下の説明欄にあります
In this codelab, we'll walk through some of the basics about Firebase.
Codelabでは 一連の Firebaseの基本をやります
We'll learn about Firebase authentication and the Firebase
Firebase認証と Firebase UIライブラリを学びます
UI library. We'll use Cloud Firestore as our database
データベースには Cloud Firestoreを使用し
and apply security rules to keep our website and data secure.
ウェブサイトとデータを守るための セキュリティルールを適用します
And when we're all finished building our app,
アプリのビルドが終了したら
we'll deploy it to the world using Firebase hosting.
Firebase Hostingを使用して アプリを世界へデプロイします
To build this app, we're going to be working in three spaces.
このアプリのビルドには 空間を３つ使います
We'll need these codelab instructions.
Codelab説明書が必要ですし
We'll set up some things in the Firebase console.
Firebaseコンソールでの設定と
And we'll actually build our app in a free web IDE called Stackblitz.
アプリを実際にビルドする無料ウェブIDE Stackblitzも必要です
And here's what we'll need to get started-- a browser, like Chrome.
そして Chromeなどの ブラウザがないと始まりません
You'll need to access Stackblitz from the website.
このウェブサイトから Stackblitzへ行きます
And here's their link if you want to learn more before getting into the codelab.
Codelabに入る前に知りたいことは こちらのリンクでどうそ
And to use Firebase, you'll need a Google account,
Firebaseの使用には
like a Gmail account.
Gmailなどの Googleアカウントが必要です
And one quick thing about email addresses for this codelab,
一言 Codelab用メールアドレスについて
you should just build your app in Stackblitz.
サインインせずに アプリのビルドがStackblitzで行えます
You don't even have to sign in. But to use some of their more advanced features,
しかし高度な機能を使うなら
you'll need to sign into Stackblitz with an email address associated with GitHub.
GitHub紐づくメールアドレスで Stackblitzへのサインインが必要です
And finally, you'll need this codelab starting code, which we'll get in the next step of this codelab.
ここでやっと 次のステップ 開始コードの取得です
Like I mentioned just a bit ago, we'll
先ほど言いましたが
be using Stackblitz to build our web app.
ウェブアプリのビルドには Stackblitzを使います
Stackblitz is this really cool in-browser code editor.
Stackblitzは本当に便利な ブラウザ内コードエディタです
And it's integrated some Firebase workflows.
Firebaseワークフローの一部に統合し
And it doesn't require software installation or even a special Stackblitz account.
ソフトウェアのインストールや Stackblitzアカウントは不要です
And Stackblitz lets you share project code with other people.
Stackblitzは 他の人とプロジェクトを共有できます
And that's just what we've done to get you the starting code
Codelabの開始コードの取得に 行うことはこれだけです
for this codelab. So go to the Stackblitz URL in the codelab instructions.
では Codelabの説明にある StackblitzのURLへ行きましょう
So here in Stackblitz, you'll see the public common source
こちらStackblitzでは
code for the codelab.
Codelab用の 公開共通ソースコードがあります
You can see that its owner is @Firebase-get-to-know-web.
オーナーは [@Firebase-get-to-know-web]ですね
And here is its project name.
こちらはプロジェクト名です
But you want to make the starting code all your own.
開始コードは独自のものを作成したいので
And you do that by clicking Fork here at the top of the page.
ページ上部の[Fork]をクリックします
Now you have your very own code.
これで独自コードができました
Since I'm not signed in, it just says Add Anonymous right here
サインインしていないので オーナーは[@anonymous]です
as the owner. But if you were signed in, this would show your GitHub handle.
サインインしたら GitHubハンドルが表示されます
And here's the new project name.
これが新たなプロジェクト名です
It has this random hash here at the end that cues you
末尾にランダムハッシュが付いて
in that you've forked the code.
コードがフォークしたことを示しています
And the starting code is now all your own.
これで 開始コードは あなただけのものです
You can edit it all you like and never affect the common source code for the codelab.
好きに編集しても Codelab共通ソースコードに影響しません
And this sharing and forking feature is also pretty handy for another reason.
この共有とフォークの機能は 別の意味で非常に便利です
Back here in the codelab instructions,
Codelabの説明に戻ります
just in case you get off track during the codelab,
セミコロンの付け忘れや タイプミスに気付かず
like you can't find that missing semicolon or that typo,
Codelabが追跡不能になっても
we provided a bunch of checkpoints along the way.
途中 いくつかの チェックポイントがあります
You can simply click a Stackblitz link
[Stackblitz]をクリックすると
and get code that's updated with all the code added up to that point in the codelab.
その時点のCodelabの 最新コードをすべて取得できます
So if you get stuck, look for one of these checkpoints
行き詰まった場合は チェックポイント探して進めてください
to get caught up. Just make sure you click Fork to make the codelab your own,
Codelabを作成するには [Fork]をクリックして独自のものとし
and also add your Firebase config object.
Firebase configオブジェクトを 追加してください
But more on that later in the codelab.
これ以上のことは 後でやります
Let's go ahead and get started actually building our app.
続いて 実際に アプリのビルドを始めましょう
In the starting code, the codelab
コードし始めた時点で Codelabには
already provides some style sheets to make the app look pretty.
アプリの見た目を整える スタイルシートがあるので
So I'm starting HTML, as well as some HTML containers
ウェブアプリに基本構造を与えるHTMLと
to give our web app some basic structure.
HTMLコンテナから始めます
We'll actually hook these containers up to our code
コンテナとコードの接続については 後でやります
later. If you're new to web apps, HTML is the core of your website.
ウェブアプリが初めての方へ HTMLはウェブサイトの核です
It's what the browser first gets from your site.
ブラウザは最初にそれを取得します
And it tells the browser what to do and what to display.
また HTMLは ブラウザへ 動作とディスプレイを伝えます
So back in Stackblitz, let's go to the index.html file
Stackblitzへ戻り index.htmlファイルへ行きます
and take a look at this starting HTML for the codelab,
Codelab用の開始HTMLを見て
and get more familiar with the Stackblitz, too.
Stackblitzインターフェースに 慣れましょう
In Stackblitz, you see all the code on the left side and a preview of our app on the right.
Stackblitzは 左側に全コードが 右側にアプリのプレビューが表示されます
And this right-side pane is something that's super handy about Stackblitz.
この右枠は Stackblitzの 非常に便利なところです
I'm going to edit the HTML to show you
これから HTMLを編集して
what this right-side pane does for us.
右枠が どうなるかお見せします
In our HTML, let's look for some of those containers that I was just talking about.
HTLMの中のある 私が話すコンテナを見てみましょう
Here's the event details container.
こちらは event-details-containerです
You can see that the content here matches up to the content over here.
この内容と一致する内容は ここだとわかります
And down here is the description container.
下のこれは description-container
Its content matches this content.
これに該当するのは こちらです
Now for the edit.
では 編集します
Since we're now doing so many virtual meetups and events,
とても多くのバーチャル交流会や イベントがあるので
let's change this event to a virtual meetup.
このイベントを Virtual Meetupに変更しましょう
And look at that.
こちらをご覧ください
Our preview automatically updated.
プレビューが自動的に更新されました
This is one of the things that makes Stackblitz super handy for development.
この点が 開発するのに Stackblitzが非常に便利なのです
It does these automatic page reloads for both HTML
HTMLとコードの両方で ページが自動的にリロードされます
and for code. You can work with your functioning app
Stackblitzインターフェースで
right here in the Stackblitz interface.
機能しているアプリを操作できます
Let's go ahead and edit a few more things in the HTML,
インターフェイスと リロード機能に慣れるために
just to get comfortable with the interface and the Reload
さらにHTMLのいくつかを 編集してみましょう
function.
見ていてください
Let's see. I'm going to edit the date here to be July 30th.
ここの日付を July 30thに編集します
But you feel free to edit your own HTML to whatever you'd like.
ご自身のHTMLなら 何でも気兼ねなく編集してください
And since it's a virtual event, let's
これはバーチャルイベントなので
make this wherever you are.
wherever You are!と 変えましょう
And let's see what else.
他には そうですね
What we'll be doing, Firebase workshops and pizza--
Firebase workshop and pizzaとあります
oh, well, I guess you can still have pizza.
ピザの部分は残しておいて
But let's change this to be from the comfort of your own home.
これを from the comfort of your own homeと変更しましょう
Wow, and look at that.
見てください
Everything automatically reloaded
すべてが自動的にリロードされて 内容が刷新されました
to show our new content. This is pretty cool.
非常にいいです
Displaying the event info is great and all,
イベントのディスプレイは いいのですが
but the app really isn't very useful
サインインやチャットの機能が入るまで
until there's some functionality, like being able to sign in or chat.
アプリは あまり役に立ちませんので
And this is where Firebase comes in.
Firebaseを利用します
To get started with Firebase, we'll
Firebaseを始めるには
need to create what's called a Firebase project, then
Firebaseプロジェクトを立ち上げて
do some basic setup for that project.
プロジェクトの基本設定を行います
Let's go back to the codelab instructions.
Codelabの説明へ戻ります
And we'll go to step 4.
ステップ４へ行きます
See this link that says Firebase?
[Firebase]と言う リンクを見てください
It'll take us to the Firebase console
ここからFirebaseコンソールへ入り
where we'll create and set up our Firebase project.
Firebaseプロジェクトを 作成設定していきます
Let's go ahead and click that link.
このリンクをクリックしましょう
So here's the opening page for the Firebase console.
Firebaseコンソールの ページが開きました
If you're new to firebase, it'll ask
Firebaseが初めての方へ
you to sign in with your Google account
ここでは Googleアカウントでの サインインが要求されます
and do some sign-in tasks.
サインインのタスクを踏んでください
But if you're like me, you might already have a couple Firebase
私のように すでに Firebaseプロジェクトを持ってる人もいます
projects. Either way, after signing in, click Add Project,
いづれにせよ サインインしたら [Add Project]か
or Create Project if you're new.
新規なら[Create Project]を クリックします
The name your Firebase project.
Firebaseプロジェクトの 名前を付けます
I'm going to name mine Firebase Web Codelab.
私は Firebase Web Codelabと付けます
You'll notice this little tag down here says my project name,
下にプロジェクト名の 小タグが出てきましたが
but with a random hash after it.
末尾にランダムハッシュが付いてます
This value is my Firebase project ID, a unique identifier
この値はFirebaseプロジェクトIDです
for my project, unlike the project name, which is just a display name in the console.
プロジェクト独自のユニークIDで コンソール内で表示されるだけの プロジェクト名とは異なります
You'll see your project ID pop up at various places within Firebase and even
プロジェクトIDは FirebaseやGoogle Cloudなど
within Google Cloud.
いろいろな場所で出てきます
But for now, let's go ahead and click through the project creation setup.
続いて プロジェクト作成の 設定へ行きましょう
For this particular codelab, we won't be using Google Analytics.
Codelabでは Google Analyticsを使いません
But for most of your own projects, you'll probably want to take advantage
たいていのプロジェクトに Firebase機能をすべて利用したいでしょう
of all these Firebase features. But for this codelab, make sure to not enable it.
しかし このCodelabでは 使用不可にしてください
So our project takes just a bit of time for the backend
このプロジェクトは
to provision.
バックエンドのプロビジョニングに 時間がかかります
While we're waiting, let's go back
待っている間に Codelabの説明へ戻り
to the codelab instructions to see what we need to configure in our Firebase project.
Firebaseプロジェクトで 設定するものを確認しましょう
Hm. So it looks like the first thing we need to configure is Firebase authentication.
まず 設定する必要があるのは Firebase Authenticationです
Setting up this feature will let users sign into our web app.
この機能の設定でユーザーが サインインできるようになります
In this codelab, we'll use the email password
Codelabでは Sign-in メソッドに メールとパスワードを使います
for our sign-in method. Let's go see if our project is ready.
プロジェクトの準備を確認しましょう
Yep, here it is.
よし どうぞ
Here in the console is where we manage all things Firebase.
このコンソールで Firebaseをすべて管理します
This particular view is called our project overview.
このビューを プロジェクトオーバービューと言います
To set up authentication, let's go to the Develop section
認証を設定するには 左側のパネルにある [Develop]セクションへ行き
in the left panel.
[Authentication] をクリックします
Click Authentication. Then click the Sign-In Method tab.
[Sign-In Method]タブを クリックします
And here are all the different sign-in providers
Firebase Authenticationが サポートするサインインプロバイダーが
supported by Firebase auth.
すべて表示されました
You'll see all the popular ones here--
よく使われているのはこちらです
Google, Facebook, even phone number.
Googleに Facebookに 電話番号もあります
But we're going to use email password for this codelab.
Codelabでは メールとパスワードを使うので
So let's click that.
ここをクリックしてください
All we need to do is toggle this top option to enable.
一番上のスイッチを 有効に切り替えるだけです
Then click Save.
[Save]をクリックします
Let's see what else we need to configure in the Firebase
Firebaseコンソールで 他の必要な設定を見てみましょう
console. Ah, our data.
データです
Our web app will use a database to store chat messages.
ウェブアプリはチャットメッセージの保存に データベースを使います
In the console, let's enable one of the Firebase databases,
Firebaseデータベースのひとつである Cloud Firestoreを
Cloud Firestore.
コンソールで有効にしましょう
We'll talk more about Cloud Firestore when we actually add it to our app.
Cloud Firestoreの詳細は 実際にアプリの追加でやります
To set up Cloud Firestore, stay in the Develop section
Cloud Firestoreを設定するには
of the left panel, but click into Database.
左側パネル[Develop]セクションの [Detabase]をクリックします
Firebase offers two different databases.
Firebaseには 異なるデータベースが２つあります
Both are NoSQL real time databases,
いづれもNoSQL リアルタイムデータベースですが
but each one is useful for different types of apps and use
それぞれ使えるアプリと ユースケースが異なります
cases. You can read more about selecting a database option
データベースオプション選択の 詳細はドキュメントをご覧ください
in the docs. But for this codelab, we'll be using Cloud Firestore.
Codelabでは Cloud Firestoreを使います
So make sure to click Create Database in the Cloud Firestore
[Cloud Firestore]セクションの [Create Database]をクリックします
section. We now get this dialogue about creating the database.
データベース作成のダイアログが 出てきました
And the first step is about rules-- security rules.
最初のステップはセキュリティルールです
Security rules control access to your data.
セキュリティルールは データへのアクセスを制御します
There are two options here.
２つのオプションがあります
Since we're building a practice app in this codelab,
ここでは練習用アプリをビルドするので
we're going to start in test mode.
[Start in test mode]を選択します
This means that our website can read and write to our database,
つまり サインインしなくても
even without sign-in.
ウェブサイトがデータベースへ 読み書きできます
So it's an easy way to get started with Firebase and building an app.
これが Firebaseでアプリのビルドを 開始する簡単な方法ですが
But if we were going to production or moving into more advanced stages of building our app,
アプリを製品版にしたり より高度な段階へ行くなら
we'd want to add more robust security rules to protect our data.
データを保護するために セキュリティルールを追加してください
And we'll actually do that later in this codelab.
それは 後ほどやります
In the next step of setting up a database,
次のステップはデータベースの設定です
we'll choose a location for our Firestore database.
Firebaseデータベースの 場所を選択します
Be aware that this location selection would also be the location for other Firebase products
この場所の選定は プロジェクトの 他のFirebase製品と機能の
and features in our project.
場所にもなるので ご注意ください
And it can't be changed once it's set.
一度 設定すると変更できません
So for your actual projects, you want
実際のプロジェクトでは
to be thoughtful about selecting this location.
この場所の選択を 慎重に検討する必要があります
But for this codelab, and for me, the first option of US Central is fine.
ここでは 最初のオプションの us-centralでいいと思いますが
But you select whatever location works best for you.
みなさんはどこでも最適な場所を 選んでください
And now we're done.
これで完了です
Now that we've got Cloud Firestore set up,
Cloud Firestoreの設定が終わりました
you can see that we have an empty database.
データベースは空ですね
We'll add data to this database later in the codelab.
データへデータベースを追加するのは 後でやります
Let's go back to the codelab instructions
Codelabの説明へ戻り
to see what else we need to set up.
他の設定を見ていきましょう
Now that we've set up a Firebase project,
Firebaseプロジェクトを設定したので
we need to tell our teller web app
ウェブアプリに Firebaseを使用することと
that we want to use Firebase and tell it which Firebase project to use.
どのFirebaseプロジェクトを 伝える必要があります
For our web app to use Firebase, we need to add the Firebase libraries.
ウェブアプリが Firebaseを使うために Firebaseライブラリを追加します
For our web app, we're writing in JavaScript.
このウェブアプリは Javascriptで書かれているので
So we need to add the Firebase JavaScript libraries.
Firebase Javascriptライブラリを追加します
For this codelab, the starting code actually already has the libraries that we need.
Codelabでは 始めのコードに 必要なライブラリが載っています
Let's go back to Stackblitz to our index.js
Stackblitzのindex.jsファイルへ戻り
file to look at our starting JavaScript.
始めのJavascriptを見てみましょう
You can see that the core Firebase
中心のFirebaseライブラリは ここに表示されています
library is here, as well as the libraries that are specific to the Firebase products that our app needs--
アプリに必要なFirebase製品に 固有のライブラリもあります
Authentication, Firestore, and this one, Firebase UI.
authと firestore そして ここにfirebaseuiがあります
So we're all set for our Firebase libraries.
Firebaseライブラリの準備ができました
But those libraries need to know which
ライブラリと通信する Firebaseプロジェクトを
Firebase project to talk to.
知らせる必要があるので
So we need to provide our app with a Firebase configuration
全プロジェクト情報が入っている Firebase構成オブジェクトを
object that contains all of our project info.
アプリに渡す必要があります
We get that config object back in the Firebase console
Firebaseウェブアプリを設定すると
by setting up a Firebase web app.
configオブジェクトが Firebaseコンソールに戻ります
In the Firebase console, go to the project overview page
Firebaseコンソール左上の [Project Overview]をクリックし
by clicking Project Overview in the top left corner.
プロジェクトの概要ページへ行きます
In the center of the Project Overview, click the web icon to create a new Firebase web app.
プロジェクトの概要ページの 真ん中の[web]アイコンをクリックし 新規のFirebaseウェブアプリを作成します
I'm going to register my Firebase web app with the nickname Web App.
私はFirebaseウェブアプリの ニックネームをWeb Appと登録します
You can use this nickname or anything you want.
ニックネームは何でもいいです
It's only a display nickname for the console.
コンソールに表示されるのは ニックネームです
For this codelab, do not check the box next to Set
Codelabでは [Set Up Firebase Hosting]の
Up Firebase Hosting.
隣のボックスにチェックを入れません
Even though we'll be using hosting later in this codelab,
Hostingは後で使用しますが
we'll be using Stackblitz's preview pane for now.
今は Stackblitzプレビューを使用します
Click Register App.
[Register App]をクリックします
You'll now see a bunch of instructions about adding the Firebase libraries.
これで Firebaseライブラリの 追加手順が表示されます
But we already did that using import statements.
しかし すでにimportステートメントで 行っています
But these here are just showing other options for how you can add libraries.
ここでは ライブラリ追加オプションを 表示しているだけです
What we're after is the Firebase config object for our web app.
残りは ウェブアプリの Firebase configオブジェクトです
It has our project ID and other non-secret info about our project and app.
プロジェクトとアプリに関する プロジェクトIDと その他の公開情報です
Copy this bit here to your clipboard.
これをクリップボードにコピーします
Back in Stackblitz, make sure you're in your index.js file.
Stackblitzに戻り index.jsファイルにいることを確認します
Find the comment about the Firebase config object.
Firebase config オブジェクトの コメントを見つけ
Paste your config snippet below the comment.
その下に構成要素をペーストします
Make sure that you only have one initializing statement for telling Firebase which configuration to use.
使用する構成をFirebaseに 伝える初期化ステートメントが ひとつなのを確認してください
It'll use the one that we just added to our code.
これは 今 コードに追加したものを使用します
Let's un-comment this line here to initialize Firebase.
この行のコメントアウトを削除し Firebaseを初期化しましょう
Let's go back to the codelab instructions
Codelabの説明へ戻り
to make sure we didn't miss anything.
やり残しがないか確認します
Here's some important info.
重要な情報があります
If you miss getting the config object for your project and web
プロジェクトとウェブアプリの configオブジェクト取得を忘れても
app, you can always get it from the Firebase console.
Firebaseコンソールから いつでも取得できます
This is handy if you need to use one of those Stackblitz
先ほど説明した Stackblitzチェックポイントを
checkpoints that I talked about earlier.
使用する必要がある場合に これは便利です
If you get stuck at a later step of the codelab,
コードラボの後の ステップで行き詰まった場合は
the instructions for getting your config object are here in the codelab instructions in step 5.
configオブジェクトの取得方法は こちらのステップ５にあります
But I'm going to show you how to go ahead and get it in the console.
これからお見せするのは コンソールでの取得です
Up here in Project Overview, click Project Settings.
上の[Project Overview]＞ [Project Settings]をクリックします
Then scroll down to the Your App section.
[Your App]セクションへ スクロールダウンします
Find your web app, and then click Config.
ウェブアプリを見つけたら [Config]をクリックします
And here's your web app config snippet.
これがウェブアプリ設定スニペットです
You can copy it from here and paste it into your code at anytime.
いつでもこれをコピーをして 自分のコードへペーストできます
Let's go to the next step of the codelab.
次のステップへ行きましょう
So at this point, we really haven't done much actual coding
現時点では 実際コーディングは あまりしていず
or added any functionality to our app.
アプリに機能を追加していません
Let's get on that.
それを行いましょう
Let's add an RSVP button that prompts the user
RSVPボタンを追加して
to sign into our app.
ユーザーにアプリへの サインインを促しましょう
It'll be hooked up to Firebase authentication
Firebase Authenticationに接続し
and use the sign-in method that we set up-- email password.
設定したSign-inメソッド メールとパスワードを使用します
And by using the Firebase UI library,
Firebase UIライブラリを使うと
we can layer pre-built UI on top of Firebase auth.
Firebase認証のトップに プレビルドされたUIを設置できます
Our sign-in flow will be powerful and smooth without any complex coding or design work from us.
サインインのフローは 複雑なコーディングや設計作業をしなくても
Now Firebase UI requires that we pass in a configuration for which sign-in methods
強力でスムーズです 現在 Firebase UIには 表示したいSign-inメソッドの
we want to display and add some code to help
構成を渡すことと
handle a successful log-in from a user.
ユーザーの正常なログインを 処理するのに使うコードの
This codelab has thankfully already provided
追加が必要です ありがたいことに Codelabは
this config object in the starting code for us.
このconfigオブジェクトを すでに開始コード内に提供しています
Let's go back to Stackblitz and take a look.
Stackblitzへ戻り 見てみましょう
Make sure that you're in the index.js file,
index.jsファイルにいることを 確認します
and here's the Firebase UI config object.
こちらがFirebase UIの configオブジェクトです
For the email password config, we
メールとパスワードのconfigでは
don't need any special credentials, like we need for, say, Google sign-in.
Googleへのサインインなどで求めれる 特別な資格情報は不要ですが
But we do need to say that we want to use the email password
メールとパスワードの プロバイダが必要とします
provider. You can learn about all the different configurations
サインインプロバイダーの 構成については
for different sign-in providers in the docs.
ドキュメントにすべて入っています
And here, we define a function that would be called if we have a successful log-in.
ここでは ログインに成功した場合に 呼び出される関数を定義します
And we have a comment to the outline down here.
アウトラインについてのコメントは 下にあります
We need to initialize Firebase UI
Firebase UIを初期化して
and pass in an instance of the Firebase auth
上のここで初期化した Firebase認証オブジェクトの
object we initialized up here.
インスタンスを渡します
Let's uncomment this line to get a new instance of Firebase UI that we'll call UI.
この行のコメントアウトを消して UIと言うFirebaseUIの 新しいインスタンスを取得しましょう
But what the starting code doesn't provide is the actual RSVP button in our app
しかし すべての認証を許可する アプリのRSVPボタンは
that will kick off all this authentication.
開始コードで提供されません
Let's go back to the codelab instructions
Codelabの説明へ戻り
to find out how to add this button.
ボタンの追加方法を見つけましょう
Adding button UI is done using HTML.
ボタンUIの追加は HTMLを使って行います
Here in the codelab instructions,
Codelabの説明はこちらです
it says that we should add our button to the event details
「index.htmlファイルの event-details-containerに
container in our index.html file.
ボタンを追加する必要がある」と 書いてあります
Now, just as a quick note, the starting code in our index.js file is hooked up
ちなみに index.jsファイルの 開始コードは
to the specific container IDs.
特定のコンテナIDに接続されます
So it's important to add the button to the expected HTML
ですから 予想されるHTMLコンテナに ボタンを追加することが重要です
container. Let's add this button to our HTML file in Stackblitz.
StackblitzのHTMLファイルに ボタンを追加しましょう
Back in Stackblitz, let's make sure we're
Stackblitzへ戻り
in our index.html file.
index.htmlファイルに いることを確認します
Then find our event details container.
event-details-containerを 見つけます
We'll add the button within this container at the bottom.
下のコンテナ内にボタンを追加します
And whoop, look.
見てください
There's our button.
ボタンです
This button here, no matter how many times we click it, though,
このボタンは何度クリックしても
it won't work.
作動しません
It needs a listener that when someone clicks this button,
ボタンをクリックしたときの リスナーが必要です
it'll call to Firebase UI to display the sign-in widget
Firebase UIを呼び出し
that we configured earlier.
以前に構成したSign-Inウィジェットを 表示するリスナーです
Let's head back to the codelab instructions
Codelabの説明へ戻り
to learn about that listener.
リスナーを見てみましょう
Did all this, and here in the codelab
ここは終わっていて
instructions is the code for that listener.
Codelabの説明の中のこちらが リスナーのコードです
It says, hey, when this button is clicked, ask Firebase UI to display its sign-in widget
「このボタンがクリックされたら Firebase UI認証コンテナセクション内の サインインウィジェットを
inside this Firebase UI auth container section.
表示するよう Firebase UIへ 要求しろ」と書いてあります
We're going to pass in this UI config object
これをUI configオブジェクトへ渡すと
so that Firebase UI knows exactly what providers to show.
Firebase UIが プロバイダの表示を認識します
For our app, that's email password.
このアプリでは メールとパスワードです
Let's add this listener to the bottom of our index.js file over in Stackblitz.
このリスナーをStackblitzの index.jsファイルへ 追加しましょう
We can just copy it here, so I don't make any typos.
コピーすればタイプミスをしません
Go to the index.js file.
index.jsファイルへ行き
And then go to the very bottom, paste it in.
下へ行ってペーストします
Now here's the magic moment.
さて 魔法の時間です
Does it all work?
動くでしょうか？
Now remember, this preview pane in Stackblitz,
Stackblitzのプレビュー画面は
it's not just a static display.
静的ディスプレイでは なかったですよね？
It's your actual web app being served at this preview URL.
プレビュー用URLで提供される 実際のウェブアプリです
We can interact with it.
実際に作動します
So click your RSVP button.
RSVPボタンをクリックすると
And woot, there's our Firebase UI widget for email password sign-in.
メールとパスワードでサインインする Firebase UIウィジェットです
Now for this codelab, you can enter any email address, even
Codelabでは どんなメールアドレスでも 偽物でも入力できます
a fake email address. We didn't set up any email verification for our app, which you probably should do in your own real apps.
実際のアプリで必要な アプリのメール確認は設定していません
And this entry of a name is going to be important later.
このエントリー名は 後で重要になってきます
Make sure to enter a password that's easy to remember.
思い出しやすいパスワードを 入力してください
And here's where the other magic happens.
では 魔法をもうひとつ
Let's go to the Firebase console.
Firebaseコンソールへ行きましょう
We should see this email as a new user in our authentication
このメールは新しいユーザーとして
user's dashboard.
認証ユーザーダッシュボードに表示されます
Cross your fingers.
うまくいきますように
And here in the console, let's go to the authentication
こちらのコンソールで [Authentication]セクションへ行きます
section. And whoop, there it is.
そして そう！ こちらが新規ユーザーです
There's the new user. And it says the sign-in provider was email password.
サインインプロバイダが メールとパスワードと記載されています
Let's go back to our app.
アプリに戻ります
So now we can display the sign-in widget
これでボタンがクリックされると
when this button is clicked.
Sign-Inウィジェットを表示できます
But our sign-in button still says RSVP,
しかし サインインボタンは
even though we're definitely signed into the app.
アプリにサインインしているのに RSVPを表示し続けます
We need to fix that.
修正が必要です
We need to add some state to our UI.
UIに状態の追加が必要です
And I bet the codelab instructions will tell us how.
Codelabの説明に その方法があるはずです
So let's look here how we can add state to our UI.
UIに状態を追加する方法を 見ましょう
Hm. Ah, here it is.
ここにあります
State to the UI.
State to the UIです
We can use Firebase auths on auth state changed function.
Firebase認証には onAuthStateChanged関数が使えます
It'll listen for a user to sign in or sign out
認証状態が変わると
in authentication state change.
ユーザーのサインインと サインアウトを確認します
And it will change the button text as appropriate.
そして ボタンの表記を 適切なものに変更します
When a user is signed in, the button label will be Log Out.
ユーザーがサインインしているときは ボタンはLOG OUTを表示し
But otherwise, the label will be RSVP.
そうでないときは RSVPを表示します
Let's add this listener to the bottom of our JavaScript code
このリスナーをindex.js JavaScriptコードの
in index.js.
一番下に追加しましょう
So I'm just going to copy it here and go to index.js.
これをコピーして index.jsへ行き
And add it here at the bottom of the code.
コードの一番下に追加します
Did you see the change in the preview pane?
プレビュー画面は変わりましたか？
I'm still signed in.
サインインしてるので
And the button now accurately says Log Out like we want.
現在のボタンは 意図通り LOG OUTを表示しています
But we're not quite done yet with our authentication flow.
認証フローは まだ完成していません
This button, even though it says Log Out,
ボタンにはLOG OUTと 表示されていますが
we've not added any code with the functionality to log anyone
ボタンがクリックされても
out when the button is clicked.
ログアウト機能のコードは 追加していません
Let's go back to the codelab instructions
Codelabの説明へ戻り
to find out how to add that functionality.
この機能の追加方法を見つけます
Remember this event listener we added to the Sign
サインインボタンに追加した イベントリスナーを覚えていますか？
In button, the one that displays the sign-in widget if someone clicks the RSVP button?
RSVPボタンをクリックすると サインインウィジェットを表示しました
Well, we need to complete the listener
LOG OUTと表示されているボタンを クリックすると
to actually sign out folks who click the button when the button says Log Out.
実際にサインアウトするように リスナーを完成させる必要があります
Let's add this check to first find out
サインインしたユーザーを 最初に確認するために
if there's a signed in user.
このチェックを追加します
Then allow them to sign out.
それから サインアウトを許可します
We can just replace our whole button listener with this code
ボタンのリスナーのコードを 丸々 置き換えることで
so that we don't make any typos.
タイプミスを回避できます
Make sure we're in index.js, find our event listener,
index.jsにいることを確認し EventListenerを見つけます
and go ahead and replace it.
置き換えます
So now in our app, our button, when you're signed in, says Log Out.
アプリにサインインしていると ボタンはLOG OUTになっています
And we now can actually sign someone out when we click that button.
今 ボタンをクリックすると 実際にサインアウトできます
So let's give it a try.
やってみましょう
Click Log Out.
LOG OUTをクリックすると
And the button changes to RSVP.
ボタンがRSVPに変わりました
If I click it, I can log back in with the Firebase UI widget.
クリックし Firebase UIウィジェットで 再度ログインできます
Enter my password.
パスワードを入力し
And let's see.
見てみましょう
Yep.
いいですね
Cool. It changes back to Log Out, and I'm signed in.
LOG OUTに戻り サインインした状態です
Our auth flow is looking pretty smooth now.
認証フローがとてもスムーズです
Let's head back to the codelab instructions
Codelabの説明へ戻り
to make sure we didn't forget anything about our auth flow.
認証フローを見落としがないか 確認しましょう
Let's see, we did that.
見てみましょう やりました
Oh.
見てください
Hey, look here. Here's one of these checkpoints that I mentioned earlier.
先ほど言っていたチェックポイントです
So if you're stuck and you just can't get that Sign In button working, visit the Stackblitz link
行き詰まって サインインボタンが作動しない場合は
to get the code up to this point in the codelab.
Stackblitzリンクへ行き この時点までの コードを取得してください
Just fork the code, and add your Firebase config object
コードをフォークし 直近のステップで取得した Firebase configオブジェクトを
that we got in the last step of the codelab.
追加するだけです
Then you can continue with the rest of us onto the next step of the codelab.
そして 次のステップへ進みましょう
So folks can now sign into our app.
これで フォークは アプリにサインインできます
But what can they do now that they're signed in?
でも サインインすると何が起こるでしょう？
How about we give them a way to talk to each other before the event, especially since it's a virtual meetup
バーチャル交流会なので イベントの前に交流の場を設けて
and people might be all over the world?
世界中の人々が集まれるように してみましょう
Early in this codelab, we set up Cloud Firestore just for this.
最初の方で Cloud Firestoreを 設定したのはそのためです
We'll use our database to store our chat messages.
データベースを チャットメッセージの保存に使います
But before we put the Firestore code into our app,
でも Firestoreのコードを 記入する前に
let's just learn a little bit more about it.
もう少し学んでからにしましょう
So Cloud Firestore is a NoSQL database,
Cloud Firestoreは NoSQLデータベースです
which means its structure isn't based on the tables that a relational database uses.
つまり 関係データベースに使う テーブルに基づいた構造ではありません
Instead, the structure is based on collections,
その代わりに コレクションに基づいた構造です
which hold documents.
ドキュメントを保管してるのです
Each document contains the actual data
各ドキュメントに
for your database and its fields.
データベースとフィールド用の 実際のデータが入っています
And documents can even hold more subcollections,
そして ドキュメントには データベース木構造を
which can create a more tree-like structure for your database.
より多く作成できる サブコレクションを保存できます
Also, unlike relational databases,
また 関係データベースとは異なり
with NoSQL databases, you don't even have to create a schema in advance.
NoSQLデータベースに 事前スキーマを作成する必要はありません
As you'll see in this codelab, we
Codelabにあるとおり
can just start writing to our database from our app,
アプリからデータベースへ 書き込みを始めると
and the necessary collections and documents are automatically created for us.
必要なコレクションとドキュメントが 自動的に作成されます
In this codelab, we're going to store
Codelabでは アプリに投稿されたメッセージを
each message that's posted in the app as a document.
各ドキュメントとして保存します
These documents will contain the name of the person posting their message
このドキュメントには メッセージを投稿した人の名前と
and some other useful info about the post.
投稿に関する便利な追加情報が付きます
All these documents, the message posts,
すべてのドキュメント つまりメッセージの投稿は
will be stored in one top level collection that we'll call guestbook.
guestbookを呼ばれる トップレベルコレクションに保存されます
It's a pretty straightforward data model.
非常に率直なデータモデルですね
When you're building your own app,
アプリをビルドしていても
though, you should definitely learn more about data models
データモデルや Cloud Firestoreのためのツールについて
and the tools available for Cloud Firestore.
学ぶことからは 逃れられません
We have docs and a great series of videos,
これらに関する ドキュメントや複数の動画があり
especially if you're new to NoSQL databases.
NoSQLデータベースの 初めての人に最適です
So let's get to building out this part of our app.
では アプリのこの部分を ビルドしていきましょう
Let's go ahead and add the UI for our chat messages.
チャットメッセージ用UIを 追加していきます
It'll look like this when we're done.
出来上がると こんな感じです
Adding visual elements to our app means we need to add HTML elements.
ビジュアル要素をアプリに追加することは HTML要素の追加が必要ということです
So we'll be building out the contents of another HTML
ですから 他のHTMLコンテナの 内容をビルドしていきます
container, this time called guestbook container.
今回は guestbook-containerです
We'll add a chat message heading and a form, which
チャットメッセージの 見出しとフォームを追加します
has a label, a text field, and a submit button that
ラベルと テキストフィールドと Sendと書かれた送信ボタンがあります
is labeled Send. Let's locate the guestbook container in our app
guestbook-containerを アプリに配置して
and add this chat message heading in form.
チャットメッセージ見出しを フォームに追加しましょう
So we need to go to index.html.
index.htmlへ行きます
And here's that guestbook container that we need.
必要なguestbook-containerは これです
Let's go ahead and add our new form and fix up our heading.
新しいフォームを追加して 見出しの修正をしましょう
And then let's go see if our discussion section is there.
Discussionのところを 見てみると
Look, there it is.
こうなりました
But let's just try sending a message.
メッセージを送信してみましょう
We'll click Send.
Sendをクリックします
Look at it a little bit.
少し待ちます
Oh, nothing happened.
あれ？何も起こりません
It's because we've got to give this UI a backend.
UIをバックエンドへ 与える必要があるからです
Let's head back to the codelab instructions to learn how.
Codelabの説明へ戻り その方法を学びましょう
So let's see. Hm.
見ていきましょう
Ah, here.
ここですね
Here's the first part of the backend code that we need.
これが必要なバックエンドコードの 最初の部分です
Since the HTML for the chat message UI is a form,
チャットメッセージUIの HTMLはフォームなので
we can add an event listener to its interactive element,
イベントリスナーを インタラクティブ要素に追加できます
specifically this Send button.
ここではSendボタンです
So that's what this code down here does.
ここのコードが それを行います
It says, hey, in the form, listen for the Submit button
「このフォームでは Submitボタンのクリックを認識したら
click. Then, do some stuff.
何かしろ」と記載してあります
This first line here just overrides the default behavior of forms to request and reload content.
この最初の行は コンテンツを要求して リロードするフォームのデフォルト動作を
But the real meat is down here.
オーバーライドするだけですが 本質は下のここにあります
Here's how we get messages stored into Cloud Firestore.
メッセージをCloud Firestoreへ 保存する方法はここです
We'll use the Firestore library that we added earlier
アプリに先ほど追加した Firestoreライブラリを使います
in our app.
ここです
And here, remember how when we were talking about the database
データベースモデルの話のとき
model, we said that we'd be building a collection called guestbook?
guestbookコレクションを ビルドすると言っていました
Well, here it is in our code.
ここが そのコードです
We're telling our app go to the collection in the database.
データベースのコレクションへ行けと アプリに指示していきます
Then add a document to it.
そして それにドキュメントを追加します
Each time the Submit button is clicked,
Submitボタンがクリックされる度に
the message from the user will be
ユーザーからのメッセージが
added as a new document in our guestbook collection.
新規ドキュメントとして guestbookコレクションに追加されます
And in that document, we want to include
ドキュメントの中には
the text of the message, the time it was sent,
メッセージ投稿者の 名前とユーザーIDと共に
which will later help us order our messages in our app,
後にアプリ内メッセージを 整頓するのに役立つ―
as well as the name and user ID of the person posting
メッセージテキストと 送信日時も入れたいと思います
the message.
先ほど言及しましたが
And this here Firebase auth current user
こちらの Firebaseの ユーザー認証には
is using the Firebase auth library that we hooked up earlier.
先に接続したFirebase Authentication ライブラリを使っています
And this UID is an auto-generated unique ID
このUIDは アプリにサインインする各ユーザーへ
from Firebase auth for each user that signs into our app.
Firebase Authenticationから 自動生成されるユニークIDです
It'll be important later in this codelab.
これは後に重要になってきます
And finally, this code here clears out the message text
最後に このコードは アプリの メッセージテキストフィールドをクリアし
field in our app so that a person can type a new message.
新たにメッセージを入力できるようにします
Let's go ahead and add this event listener to our app.
アプリに このイベントリスナーを 追加していきましょう
I'm just going to copy it here so I don't make any typos.
これをコピーすれば タイプミスは防げます
Then go to index.js file and add this JavaScript to the bottom of our code.
index.jsファイルへ行き コードの一番下に このJavaScriptを追加します
But we don't want just anybody to be able to post or even read the messages in our app.
しかし アプリでメッセージを 投稿する人も読む人も制限したいですね
So let's display this discussion board only to signed in users.
ですので ディスカッション掲示板を サインインユーザーのみに公表しましょう
Also, that matches up better to our code
また それは ここのコードと一致します
right here that says a message document in our database
これは ユーザーがサインインしたときに
should contain the name of the person posting
取得するデータベース内の メッセージドキュメントに
the message, which we get when a user is signed in.
メッセージ投稿者の名前を 入れるよう指示します
So let's hide this discussion section
なので ユーザーが サインインしないときは
when a user isn't signed in.
ディスカッションの部分を 非表示にします
We can leverage this auth state changed listener
先ほどコードに追加した onAuthStateChangedリスナーを
that we added earlier in our code.
変更できます
It's the listener that controls whether to show Log Out versus RSVP on this button.
これはボタンのLOG OUTとRSVPを 制御するリスナーです
Let's give that listener more things to do.
このリスナーに機能を追加しましょう
Let's head back to the codelab instructions
Codelabの説明へ戻り
to find out what we need to do to add to our code.
コードに追加する方法を見つけましょう
So we did all this.
これは終わりました
Ah, here's the part about showing only to signed in users.
only to signed-in usersが ここにありますね
And like we just talked about, it's
話していたように
modifying the on auth state change listener.
onAuthStateChangeリスナーを 変更するとあります
When a user is signed in, let's not
ユーザーがサインインしたとき
only show the Log Out label on the button, let's also display
ボタンにLOG OUTを 表示するだけでなく
the guestbook container, the discussion section.
Discussion部分に guestbook-containerも表示します
But when there's no user, display the RSVP button label,
ユーザー名がないときは ボタンにRSVP を表示して
but no discussion section.
Discussion部分は非表示します
I'm just going to grab this whole new on auth state change
onAuthStateChangeリスナーを 丸々コピーするので
listener so that I don't make any typos in my JavaScript.
JavaScriptでタイプミスはしません
But just remember that there's really only
でも このスニペットで新しいのは
two new lines here in this snippet to display or not display the guestbook container.
guestbook-containerを 表示する 非表示にするの ２行のみです
So I grab this, go back to Stackblitz,
これをコピーして Stackblitzへ戻り
and in my index.js file., I'm looking for that
index.jsファイルの中で
on auth state change listener.
onAuthStateChangeリスナーを探します
And I'm just going to replace it with the updated version.
新しいバージョンに入れ替えるだけです
But remember, it's only actually getting two new lines
変更は２行のみでした
so that when the auth state of my app changes,
アプリの認証状態が変わると
so does the display of my discussion section.
Discussion部分の 表示も変わります
Let's test out what we've added so far to our app.
これまでのアプリへ追加したものを テストしましょう
We're still signed in, and we see the Log Out button label.
サインインしているので ボタンはLOG OUT表示です
And if we scroll down, we see the discussion section.
スクロールダウンすると Discussion部分が出てきます
Good so far.
うまくいってますね
Let's go ahead and log out.
では ログアウトしましょう
We see the RSVP button label.
ボタンはRSVP表示です
Did the discussion section disappear?
Discussion部分は 消えたでしょうか？
Yep.
うまくいきました
That's great. Let's try signing in as an entirely different user.
違うユーザーでサインインしてみましょう
The Firebase UI sign-in widget still works.
Firebase UIのSign-Inウィジェットは 動作しています
And let's log in as a different user.
他のユーザーでログインします
And here's where the display name for our Firestore document gets populated, and our password.
ここに Firestoreドキュメント内の 名前とパスワードがここに表示されます
I see the Log Out label because I'm now signed into the app.
アプリにサインインしてるので LOG OUT表示です
And I see the discussion section.
Discussion部分が出ました
And if I go back to the auth dashboard,
Authentication ダッシュボードに戻り
let's see if that new recorded user is there.
新規登録ユーザーを確認しましょう
And yep, new user, Kiana.
はい 新規ユーザーのKianaです
And let's check the sign and provider. It's email password.
サインとプロバイダを確認すると メールとパスワードです
Oh, and over here are those auto-generated UIDs
ここに各ユーザーの自動生成UIDがあります
for each user. Let's head back to our app.
アプリに戻ります
Since we're signed in, let's try typing a message
サインインしているので
in the discussion section.
Discussionにメッセージを 入力してみましょう
Hm, what would Kiana say?
Kianaは何て言おうかな？
Let's see. What's up?
What's up?かな
And let's click Send.
そして Sendをクリックします
Well, the message disappeared when we clicked Send like we want, but what happened to it?
Sendをクリックすると 予想通りメッセージは消えましたが 何が起きたのでしょう？
We don't see it here in the discussion section.
Discussion部分には 何も表示されません
Well, that's because we've only added
なぜなら メッセージの入力と保存という
the first part of the chat capability-- entering and storing messages.
チャット機能の最初の部分のみ 追加したからです
But we haven't added the displaying and reading messages
メッセージの表示と読み込みは まだなのです
part. So we'll need to get to that in just a bit.
なので もう少しする必要があります
But since we have added the storing part,
保存の部分は追加しているので
we should be able to see the stored messages in our cloud
クラウドFirestoreデータベースに 保存されているメッセージは
Firestore database.
確認できるはずです
Let's go over to the Firebase console and look.
Firebaseコンソールへ行き 見てみましょう
So we're in the authentication section right now.
Authenticationセクションですが
But we need to go to the database section.
データベースのセクションへ 行く必要があります
And looky here.
ここを見てください
The Firestore code automatically created our guestbook
言っていたように
collection, just like we said it would.
Firestoreコードが ゲストブックコレクションを自動生成します
And it added our message as a document.
そして メッセージを ドキュメントとして追加します
Notice that the document has a random ID.
ドキュメントにはランダムIDが付きます
That's because we used the add method from the Firestore library, which gives each document
Firestoreライブラリの addメソッドを使っているから
a unique random ID.
各ドキュメントに ユニークIDが与えられています
There's other ways to create documents in Firestore,
Firestoreのドキュメント作成方法は 他にもあるので
though, which you can learn more about in the Firestore docs.
Firestoreドキュメントで 学ぶことができます
And over here is the document info.
こちらがドキュメント情報です
And we see the message fields that we expect.
メッセージフィールドが 期待どおりに表示されます
Cool.
いいですね
Let's go back to the app.
アプリに戻ります
I'm going to sign in as Rachel again.
Rachelとして 再度サインインします
And I'm going to send a new message to show you something really awesome about Firestore.
Firestoreのすごいところをお見せするため 新規メッセージを送信します
You should send a message from your app, too.
あなたのアプリからも メッセージを送信してください
This time, though, immediately after clicking Send,
今度は Sendをクリックしたら
go back to the Firestore dashboard in the console.
すぐにコンソールの Firestoreダッシュボードへ戻ります
Let's see-- so excited to see you all.
見てみましょう 見ていただくのが楽しみです
And to see some magic, click Send,
Sendをクリックする魔法をかけ
and then back to the auth dashboard.
すぐに Authentication ダッシュボードへ戻ります
And look, there's our new message.
見てください 新しいメッセージです
Before we could even get back to the console, our message was added.
私がコンソールに戻るより前に メッセージが追加されました
You'll see more of this Cloud Firestore magic in the next section of the codelab,
他のCloud Firestoreの魔法は 次のセクションでやりますので
and we'll talk more about it then.
もう少し説明します
For now, let's go back to the codelab instructions
今はCodelabの説明へ戻り
to see if there's anything left for us to do for writing to our database.
データベースの書き込みで やるべきことが残っていないか確認します
We did this.
これはやりました
And we tested sending messages.
メッセージを送信をテストして
Oh, look. Here's one of those checkpoints.
見てください チェックポイントです
Definitely use it if you couldn't get writing to your database working.
データベースの書き込みが機能しないなら ここを使用してください
Let's head to the next step of the codelab.
次のステップへ進みましょう
So far, our users can sign in and enter a message,
ここまでで ユーザーはサインインして メッセージを入力できましたが
but they can't read them, neither theirs or anyone else's
自分や誰かが投降したメッセージを 読むことはできません
who's posted a message. Let's fix that.
それを修正しましょう
We'll first need the UI in our app.
まずは アプリにUIが必要です
Again, that means HTML elements.
つまり HTML要素です
Lucky for us, the codelab instructions
幸運にも 必要なものは Codelabの説明にあります
give us what we need. We'll add this new section called guestbook
既存のguestbook-containerに
to our existing guestbook container.
guestbookというセクションを 新たに追加します
We'll next hook up this guestbook section
次に guestbookセクションを
to this code down here that'll read messages from our database.
データベースからメッセージを読み取る コードに接続します
In this code here, we're creating a query
このコードで
for our Firestore database.
Firestoreデータベース用 クエリを作成します
It listens to our guestbook collection for changes, like a new message being posted and its document
これが 新たなメッセージの投稿や ドキュメントのデータベースへの追加など
added to our database.
ゲストブックコレクションの変更を認識します
And that event triggers this callback function.
このイベントが callback関数をトリガーさせます
This JavaScript updates the HTML that
このJavaScriptは Discussionセクション内の
displays all our app's messages within our discussion section.
すべてのアプリのメッセージを 表示するHTMLを更新します
Oh, and the messages, they'll be ordered using the timestamp
メッセージはドキュメントの timestamp値を使って
value from the documents.
整頓されます
Descending means that it'll show the most recent messages first.
Descendingとは 最新メッセージが 最初に表示されるということです
And the change to the database, that could be anything, though,
また データベースへの変更とは ドキュメントの削除や
like a document deletion or a change in the message text.
メッセージテキストの変更など 何でもです
Now we don't have those types of features in our app's message
現在 アプリのメッセージボードUIに このタイプの機能はありませんが
board UI, but you could imagine an app
このタイプの機能をビルドし
building out those types of features and wanting their app to accurately display
アプリにこの種の変更を 適宜 表示させるアプリを
those types of changes, too.
考えることも可能です
So now let's add this code to our app,
では このコードをアプリに追加します
the guestbook section to the guestbook container
guestbookセクションを guestbook-containerへ
and our index.html file and the Firestore query
index.htmファイルと Firestoreクエリを
to our index.js file.
index.jsへ入れます
Let's see, let's grab this section.
では このセクションをコピーして
And we'll go to HTML file, guestbook container,
HTMLファイルの guestbook-containerへ行き
and we'll add it here down at the bottom.
一番下のここに追加します
Let's go back and grab our query.
戻って クエリをコピーし
And we'll add it to the index.js file down here at the bottom.
index.jsファイルの 一番下に追加します
Cool.
いいですね
And now that we have this JavaScript in our app,
これで アプリに JavaScriptが入りました
let's see if we're reading from our Firestore database.
Firestoreデータベースからの 読み込みを見てみましょう
Let's scroll down.
スクロールダウンして
Whoop, and look at that.
見てください
We even see the messages that were already in our database.
データベースのメッセージが すでに表示されています
Let's see if adding a new message
新しいメッセージを追加すると Discussion掲示板が
updates the discussion board.
更新されるか見てみましょう
I hope.
お願い
Yep.
よし
I hope yes.
いいと思います
Let's click Send.
Sendをクリックしましょう
There it is.
どうぞ
And now let's see some real database magic.
本物のデータベース魔法を まだまだ見てみましょう
Let's see what happens if we have our app
アプリを複数のウィンドウで開いて
open in multiple windows and we add
そのうちのひとつに メッセージを追加すると
a message to just one of them.
どうなるか見てみましょう
I'm going to use this preview URL to open our app in each
このプレビューURLを使用して 各ウィンドウでアプリを開きます
of these windows. Just put this URL into each address bar.
URLを各アドレスバーに入れるだけです
Let's see and then scroll down to view our discussion section
それでは スクロールダウンして
for each of these instances.
各インスタンスの Discussion部分へ行きます
And let's see.
見てください
When I type a message in just one window,
ひとつのウィンドウに メッセージを入力します
watch how all the other windows displaying our app sync immediately.
他のウィンドウのアプリ表示が 即時に同期する様子をご覧ください
And this is the real-time part of our Cloud Firestore--
これがCloudFirestoreの リアルタイムなところです
incredibly fast syncing.
同期が非常に迅速です
And even at large scale, like in a production app,
製品版アプリのように 巨大なスケールであっても
this real-time syncing happens for all the users of your app on all of their different devices.
アプリのリアルタイム同期は 全ユーザー どのデバイスでも行われます
And if we go to the console and delete or change
また コンソールに移動して
a document or field, we'll see those changes
ドキュメントかフィールドを 削除 変更すると
automatically sync to all the windows displaying our app.
アプリを表示する全ウィンドウに 自動的に同期されます
Lets try changing one of these messages.
メッセージのひとつを 変更してみましょう
So back here in the console, we see all of our messages.
コンソールへ戻り 全メッセージを確認します
I see there's one from Kiana.
Kianaからのメッセージや
There's a couple more.
他にも あります
Let's go ahead and edit this one.
これを編集しましょう
And I want you to watch right here as we do.
右側のここを見ていてください
Hm, let's see.
いきます
I hope.
お願い
And click Update.
[Update]をクリックします
And boom, there's that fast syncing.
そして どうですか 同期が速かったですね
In your own app, you should try deleting a document
みなさんのアプリも ダッシュボードでドキュメントを削除して
in the dashboard and watch the auto syncing across all your instances.
すべてのインスタンスが 自動同期するか確認してください
But for now, let's go back to just viewing one instance of our app.
では アプリのインスタンス表示を ひとつに戻しましょう
And we'll head back to the codelab instructions to finish up this section of the codelab.
そして Codelabの説明に戻って このセクションを終わりにします
Let's see, we finished this.
ここは終わりました
And we tested syncing.
同期をテストしました
Oh, and here's another checkpoint.
次のチェックポイントです
If you couldn't get writing and reading in Firestore hooked up,
Firestore接続で 読み書きができない場合は
grab the code from the Stackblitz link
Stackblitzリンクから コードをコピーして
and head over to the next step of the codelab with us.
次のステップへ行きましょう
Now this next step is a really important step of the codelab--
次のステップは非常に重要です
security.
セキュリティです
We display our discussion board only when a user is signed in.
ユーザーがサインインしているときだけ Discussion掲示板を表示しています
But that's not actually securing our data
しかし 実は それでは データを保護して
and preventing people from finding other ways to read and write to our database.
データベースを読み書きする 他の方法を発見されるのを防げません
We need what's called security rules for that.
セキュリティルールが必要となります
With security rules, you define what's
セキュリティルールを使用し クライアントアプリから
allowed for database reads and writes from your client apps.
データベースを 読み書きする許可を定義します
You can say things like, if a user is signed in,
例えば こう記述できます
then let them write to the database,
「サインインしたユーザーは データベースへの書き込みを許可する」
or even things like only allow users to edit their own documents by matching which documents they
「ユーザーIDに基づいて照合された 所有ドキュメントのみ
own based on their user ID.
ユーザーがドキュメントを 編集することを許可する」
In this codelab, we're going to keep it pretty simple, but still secure.
Codelabは 非常にシンプルに 安全性を確保できます
You can learn more in depth about security rules
セキュリティルールの詳細は
in our Firebase docs and videos.
Firebaseのドキュメントと 動画をご覧ください
When we started building this app,
アプリのビルド開始時に
we created our database using test mode security rules.
テストモードのセキュリティルールで データベースを作成しました
Let's go look at those rules in the Firebase console.
そのルールを Firebaseコンソールで確認しましょう
Let's go to our database Rules tab.
[Database]＞[Rules]へ行きます
And we can see the default test mode rules here.
すると デフォルトで テストモードになっています
Right now, our database rules allow any read or write,
現在のデータベースルールでは
as long as the read or write is before this date.
この日付より前の読み取りと書き込みは すべて許可されています
Cloud Firestore does have some backup security rules
Cloud Firestoreは テストモードでも
for our database, even in test mode.
データベースのバックアップ セキュリティルールがあります
It shuts down client side read and writes one month
データベースを設定した1か月後に
after you set up your database.
クライアント側の 読み書きをシャットダウンします
You have to purposefully update your security rules
広く開かれたルールの 開発や運用を継続する場合は
if you want to continue developing or operating with these wide open rules.
セキュリティルールを 意図的に更新する必要があります
But we want to get rid of these wide open rules.
しかし オープンなルールは 取り除きたいです
And we'll actually edit our rules directly here
コンソールで ルールを直接編集していきます
in the console. But right now, let's go back to the code that instructions to learn more about rules.
しかし今は ルールの詳細を 説明するコードに戻りましょう
With Firestore security rules, you
Firestoreのセキュリティルールでは
need to identify the collection that you want to secure.
保護するコレクションを 定義する必要があります
We only have one collection in our database, called guestbook.
データベースには ひとつだけ guestbookコレクションがあります
So we'll tell our rules to watch that collection.
ですから そのルールへ コレクションの確認を伝えます
And down here, let's go through how
下のここで 実際のルールを特定する方法を
we'll specify our actual rules.
見ていきましょう
What these rules say is allow read if a user is signed in.
ルールでは ユーザーがサインインしていれば 読み取りを許可すると宣言しています
Signed in means that there's a user recorded
サインインとは 認証レジストリの中に
in our authentication registry with a matching user ID to the person signing in.
サインインするためのユーザーIDと 一致する登録ユーザーがいるということです
In other words, any signed in user
言い換えると サインインしたユーザーは
can see anything in our guestbook collection.
guestbookコレクションの すべてを見ることができます
And that's expected for our app.
このアプリも そうしたいです
All the messages are public to signed in users.
サインインしたユーザーに すべてのメッセージを公開しますが
But we're much more restrictive about the writes.
書き込みには制限を設けたいです
The rule here says that only allow a write
ルールでは サインインしたユーザーのIDが
if the signed in user's user ID matches
ドキュメントのユーザーIDと 一致する場合のみ
the user ID in that document.
書き込みを許可すると宣言しています
Remember how each message document contained
各メッセージドキュメントには
the user's auth user ID?
ユーザーの認証とIDが 付いてましたよね？
Here's why having that user ID in the document is useful.
ユーザーIDをドキュメントに付けると 便利なのはそのためです
You can restrict people from editing each other's messages
人々が 互いのメッセージや データベースの他の部分を
and the rest of your database, too.
編集しないような制限も可能です
So security rules help us control access to our data.
セキュリティルールは データへのアクセス制御に便利です
But it can also help us prevent unwanted data, incomplete data,
また 不要なデータや不完全なデータ 不正形式のデータが
or malformed data from being added to the database.
データベースに追加されるのを 防ぐのにも使えます
For this type of functionality, we can add validation rules.
このタイプの機能は 検証ルールで付けられます
To our write rule, let's add what kind of data
書き込みルールに
we'll allow in those writes.
書き込みに許可する データの種類を追加しましょう
Here's the rules that we'll add to our new write rule.
新しい書き込みルールに 追加するルールは こちらです
This says that the document must contain a user display name,
「ドキュメントには ユーザー名表示と メッセージテキストと
message text, and a timestamp.
日時を入れなくてはならない」
These are all pieces of data that make our app work as expected.
これはすべて アプリを期待どおりに 機能させるためのデータです
Let's go ahead and add all these rules, both access control and validation rules, to the rules console
続いて アクセス制限と検証の 両方ルールをルールコンソールに追加して
and get rid of those wide open test mode security rules.
広く公開するテストモードの セキュリティルールを
We'll just grab all of these rules,
取り除きましょう このルールをすべてコピーして
then go to the Database Rules tab,
[Database]＞[Rules]タブに移動し
and select all these old rules and replace them.
この古いルールをすべて選択し 置き換えます
We also need to click Publish to make all our new rules go live
すべての新ルールを有効にし プロジェクトとアプリに適用するには
and be enforced in our project and app.
[Publish]を クリックする必要があります
So let's cook this Publish button.
[Publish]をクリックしてください
And boom, our changes are propagating.
そして 変更できました
Well, now with these security rules,
さて このセキュリティルールにより
we've actually caused a bit of a problem for ourselves.
実は 少し問題が発生しています
Let's go back to our app's code real quick.
ちょっと アプリコードに戻ります
Right now, in our code, when the page first loads,
現在のコードでは ページが最初に読み込まれるとき
we automatically try to do this database read.
データベースを自動的に読み取ろうとします
But if there isn't a user signed in,
しかし サインインしないと
we're going to trigger permission denied errors
設定したセキュリティルールにより
from Firebase in the security rules that we just set up.
Firebaseから アクセス拒否エラーが発動されます
Our app is going to crash on people because a not signed in
サインインしていないユーザーは 読み取りを実行できないため
user just can't do this read.
アプリがクラッシュします
So to prevent this crash, we're going
ですから このクラッシュを防ぐため
to leverage our old friend, our on auth state
周知の仲である onAuthStateChangedリスナーを
changed listener, again.
再び使います
This thing is doing a lot of work for us.
これは多くの機能があります
It's showing specific button labels, a discussion section,
特定のボタンラベルを表示し Discussionセクションを表示し
and now it will also control when we fire this Firestore query.
今では Firestoreクエリを 実行する時期も制御しています
Specifically, we'll make it fire only when a user is signed in.
これをユーザーがサインインしたときにのみ 起動するようにします
The first step is to wrap this Firestore query in a function
最初のステップは Firestoreクエリを呼び出したいときに
that we can call whenever we want to call it.
呼び出せる関数でラップすることです
That is, when the user signs in.
ユーザーがサインインしているときにです
Let's go back to the codelab instructions to find out how.
Codelabの説明へ戻り 方法を見つけましょう
Like we just said, we're going to use the same query.
言ったように 同じクエリを使います
Just wrap it in the subscribe guestbook function
subscribeGuestbook関数で これを包みます
that we can call in our auth listener when a user signs in.
これはユーザーがサインインしたときに 認証リスナーを呼びだします
We'll also capture the value returned by the on snapshot query, which will let us modify it later.
また on snapshot クエリにより 返される値をキャプチャします これで後で変更可能になります
But what happens when the user signs out
しかし ユーザーがサインアウトし
and there's no longer a user ID to match against our security
セキュリティルールに一致する ユーザーIDがない場合はどうなるでしょう？
rules? The app will crash then, too.
また アプリがクラッシュします
We need to stop our Firestore listener when the auth state changes back to signed out.
認証状態がサインアウトになると Firestoreリスナーを停止するべきです
We can prevent this crash when there's no signed in user
サインインユーザーがいないときの クラッシュを防ぐには
by writing an unsubscribe guest book function
ユーザーがいない場合
that we can call in our auth state listener
認証状態リスナーで 呼び出すことができる―
when there is no user.
unsubscribeGuestbook関数を 使います
What this function does is check to see if this guestbook
この関数は guestbookListener変数が
listener variable is set.
設定されているかを確認します
We assign a value to this only if the user
ユーザーがサインインして
is signed in and subscribed to listening to the guestbook
guestbookコレクションのリスニングに 署名している場合のみ 値を割り当てます
collection. We'll then call this function, which
そして この関数を呼び出します
was the return value from the on snapshot query,
これは クエリを停止するため
to stop the query.
on snapshotクエリから 返される値です
Then we'll reassign the value to null because we know
関数が使用されたのは明らかなので
the function was already used.
値をnullに再度 割り当てます
Let's go ahead and update our code with our Firestore query wrapped in our subscribe guestbook
続いてsubscribeGuestbook関数で ラップされたFirestoreクエリと共に
function and add our new unsubscribe guestbook function to the bottom of our JavaScript code.
コードを更新し JavaScriptコードの最後に subscribeGuestbook関数を 新たに追加しましょう
So I'm going to go ahead and grab our new subscribe function
ですから クエリをラップする subscribeGuestbook関数を
that wraps our query.
新たにコピーします
And I'm going to add it to our index.js file.
これを index.jsファイルへ追加します
Here's our query that we're going to replace.
ここが置き替えるクエリです
And here we go. This would replace it.
では 置き換えます
And let's go back and grab our unsubscribe function.
戻って unsubscribe関数を コピーします
I'm just going to copy it here.
ここをコピーして
And then go back and add it to the bottom of the code.
戻って コードの一番下に追加します
And great, we have our own subscribe and our subscribe.
よし unsubscribeと subscribeが入っています
Great.
最高です
But we wrote these two functions to call within our auth state
上の方に 認証状態リスナー内で 呼び出すための関数が
listener up here.
２つ記述されています
So let's add them, our subscribe one here
では それらを追加しましょう
and our unsubscribe one here.
subscribeは こちら unsubscribeは こちらです
So when there's a user, we'll subscribe.
これでユーザーがいたらサブスクライブし
But when there's no user, we'll unsubscribe.
ユーザーいない場合は サブスクライブを解除します
So now, when a user signs in, our app
ユーザーがサインインすると アプリがサブスクライブして
will subscribe and start listening to our database.
データベースに接続されます
But then when a user signs out, our app
ユーザーがサインアウトすると
will unsubscribe and stop listening to our database
アプリはサブスクライブを解除し データベースと通信しなくなり
and keep those permission denied errors and crashes from happening.
拒否エラーや クラッシュが発生しないようにします
Wow. We have a fully functional app now.
これでアプリ機能が すべて実装されました
You can try out all the features we added in your own app.
ここで追加した全機能を みなさんもアプリに試せます
You can try out log in, log out, and sending and syncing messages.
ログインとログアウト メッセージの送信と同期が試せます
But this app is only being served right now at this preview URL.
しかし このアプリは現在 プレビューURLでのみ提供されています
What if we wanted to share our app with the world?
世界へ公表するにはどうするのでしょう？
Well, Firebase can help with that, too.
それも Firebaseが役に立ちます
Back to the codelab instructions.
Codelabの説明へ戻ります
So back here, let's finish up the security rules.
セキュリティルールは終わらせましょう
Here's a checkpoint that will get all of your Stackblitz code
こちらは Stackblitzコードを すべて更新するチェックポイントです
updated. But it won't update the rules in the console. So you'll need to add those on your own.
コンソールでルール更新はしないので 自分で追加する必要があります
Let's go to the next step of the codelab.
Codelabの次のステップへ行きましょう
Firebase offers a hosting service
Firebaseは アプリのコンテンツと構成を
that lets you serve your app's content and configuration
全世界に提供できる ホスティングサービスを提供します
to the whole world. And your content is automatically cached on a global CDM.
コンテンツはグローバルCDMに 自動的にキャッシュされます
Every Firebase project comes with two free public default
Firebaseプロジェクト毎には元々 ２つの無料公開URLがあります
URLs. But you can also hook up custom domains to Firebase hosting.
カスタムドメインをFirebase Hostingに 接続することもできます
You can deploy your files to Firebase
コマンドラインインターフェースである FirebaseCLIを使用して
using the Firebase CLI, which is a Command Line Interface.
ファイルをFirebaseに デプロイできます
But in this codelab, we're using Stackblitz,
Codelabでは Stackblitzを使用します
which has integrated the deploy command right into its interface.
これは デプロイコマンドを インターフェイスに直接統合したものです
Now this integration requires you to sign into Stackblitz using your GitHub account.
この統合には GitHubアカウントによる Stackblitzへのサインインが要求されます
If you haven't already, click the Sign In button at the top of the Stackblitz interface.
まだの場合は Stackblitzインターフェース上部の
[Sign In]ボタンをクリックします
Let's head back to Stackblitz.
Stackblitzへ戻ります
Now I've already signed in.
私はサインインしているので
And over here on the left panel, I see the Firebase icon.
左側のパネルに Firebaseアイコンがあります
If you haven't already, click that icon.
まだの人は このアイコンを クリックしてください
Now it's asking me to sign in with a Google account.
Googleアカウントでの サインインが要求されます
And this account has to be the same one that I set up for this codelab because it's the one that's
アカウントは Codelabで設定したものと 同じでなければなりません
the backend for this app.
アプリのバックエンドだからです
So I'm going to sign in.
サインインします
And now I see all the Firebase projects associated with my Google account.
これで Googleアカウントに関する Firebase全プロジェクトが表示されます
I'm going to click the project that's for this app.
このアプリ用のプロジェクトを クリックします
Now deploying to Firebase hosting is literally a one-click operation from here.
Firebase Hostingへのデプロイは 文字通り ここからのワンクリック操作です
Click this deployment.
[Deploy]をクリックします
Yep.
よし 終わりです
This is it. This is all it takes to deploy and serve your app to the world.
これだけで アプリをデプロイし 世界中に提供できます
You can view your app by clicking this Open Live Site button.
[Open Live Site]をクリックして アプリを見ることができます
This URL here is one of your two free default Firebase URLs
このURLは Firebaseプロジェクトで 元々与えられる2つの無料FirebaseURLの
that you get with your Firebase project.
ひとつです
The other is web.app.
もうひとつはweb.appです
If you share your URL with a friend,
URLを友人と共有すれば
they'll be able to use your app with all the sign in and discussion section features that we've
Codelabにビルドされている― サインインと Discussionセクション機能のアプリを
built into this codelab.
友人も使用できるようになります
You can go to the Firebase Docs to learn more
Firebase Docsにアクセスすると
about what you can do with hosting, including connecting custom domains
カスタムドメインを接続し デプロイされたコンテンツを提供するなど
to serve your deployed content.
ホスティング機能を詳しく知ることができます
Well, now that this app is being served at a real URL,
これで本当のURLにアプリが提供されました
it's a real app.
本物のアプリです
Let's head back to the codelab instructions
Codelabの説明に戻り
to see if there's anything left to do.
やるべきことが残っていないか 確認しましょう
Back here in the codelab instructions, ah,
Codelabの説明へ戻り
here's some more things about Stackblitz
StackblitzとFirebaseの 統合についての説明が
and its integration with Firebase.
いくつかあります
But let's head to the next step.
でも 次のステップへ行きましょう
And here's a bonus step.
ここはボーナスステップです
Now we're not going to go through this step
この動画ではやりませんが
in this video, but definitely feel free to practice some more with Firebase features on your own
Firebaseの機能を自分のアプリで 自由に練習してください
and in your own app. Let's head to the next step.
次のステップです
Ah!
何ということでしょう
Guess what? Congratulations.
おめでとうございます
You've built and served an interactive real-time web
インタラクティブな リアルタイムウェブアプリを作成し
app to share with the world.
提供し 世界へ公開しました
It allows folks to sign in.
これでサインインできます
And we didn't even have to build out the backend complexity of authentication ourselves.
認証のために自分でバックエンドを 複雑にビルドする必要がなかったです
And when signed in, our users get access
サインインしたユーザーは
to advanced features, like a messaging board.
メッセージボードなどの 高度な機能にアクセスできます
And that messaging board uses a real-time syncing database--
そのメッセージボードは
Cloud Firestore.
リアルタイム同期データベース CloudFirestoreを使用しています
So no one is left out of getting the most up to date messages.
ですから 最新のメッセージを 逃すことはありません
And when our app becomes a hit, our database
アプリがヒットしても
will scale to meet that demand.
データベースが 需要を満たすように拡張されます
And it's secure.
そしてセキュリティは
Malicious actors can't hurt our app or our users' data
セキュリティルールを実装しているため
because we implemented security rules.
悪意ある攻撃者がアプリや ユーザーデータを傷つけられません
And our app is served via Firebase hosting, which
アプリはFirebase Hostingを 介して提供されます
automatically serves our content over a global CDM
これは グローバルCDMへ コンテンツを自動的に提供するため
so that it loads fast across the world.
世界中で読み込みが速いです
Now we've written about 150 lines of code to get all this functionality.
今 すべての機能を取得するために 約150行のコードを記述しました
And that's not all that much.
これで大したものではありませんが
But if you want to add even more functionality to your app
アプリにさらなる機能を追加したり
or learn more about the features we used today,
現在使用している機能について 詳しく知りたい場合は
you can visit the docs, work through some more codelabs,
ドキュメントで さらなるCodelab作業ができます
and watch a great series of YouTube videos
特にNoSQLデータベースが初めての人は
about Cloud Firestore, especially if you're new to NoSQL databases.
CloudFirestoreに関する YouTube動画シリーズをご覧ください
Well, thanks for watching this video and working through this codelab with me
ご視聴と Firebaseを知るために 一緒にCodelabを使っていただき
to get to know Firebase.
ありがとうございました
If you want to learn more about Firebase, subscribe to our YouTube channel.
Firebaseをもっと知りたい方は YouTubeチャンネルを登録してください
And I really hope to see y'all soon,
また お会いしましょう
even if it's at a virtual meetup. [MUSIC PLAYING]
バーチャル交流会でお会いしましょう
Similar videos:

Codelab: Get to know Cloud Firestore Web
Firebase
6.6K views 143 likes 3 dislikes 30 Jun 202057% match

Codelab: Friendly eats in Flutter
Firebase
14.3K views 309 likes 0 dislikes 07 Jul 202034% match

Codelab: Firebase Performance Monitoring for web
Firebase
3.7K views 68 likes 4 dislikes 14 Jul 202034% match

Codelab: Building a web application with Angular and Firebase
Firebase
13.3K views 387 likes 7 dislikes 01 Nov 202030% match

Faster web apps with Firebase (Firebase Summit 2019)
Firebase
6.2K views 112 likes 4 dislikes 26 Sep 201927% match

Firebase productivity tips (Part 2) #AskFirebase
Firebase
3.5K views 137 likes 5 dislikes 26 Mar 202027% match

Zero to App: Live Coding a Cross-Platform App on Firebase (Google I/O'19)
Firebase
34.1K views 561 likes 11 dislikes 07 May 201927% match

Shipping production web apps on Firebase Hosting
Firebase
2K views 91 likes 0 dislikes 31 Oct 202027% match

Zero to app: Livecoding a cross platform app with Firebase and Flutter
Firebase
9.5K views 186 likes 4 dislikes 04 Nov 202027% match

Firebase Summit 2020 Livestream Day 2
Firebase
13.5K views 290 likes 8 dislikes 28 Oct 202026% match

Zero to App: Live coding a Firebase app in JavaScript, Kotlin, and Swift (Google I/O '17)
Firebase
28.4K views 384 likes 23 dislikes 18 May 201725% match

Best practices for a great sign-in experience - Google I/O 2016
Firebase
25.2K views 210 likes 8 dislikes 20 May 201625% match

Codelab: Get started with Firebase in C++
Firebase
2.1K views 50 likes 1 dislikes 30 Oct 202025% match

Firebase can help you bring your web app A-game (Firebase Summit 2019)
Firebase
4.9K views 86 likes 0 dislikes 26 Sep 201925% match

Codelab: Local development with Firebase Emulator Suite
Firebase
5.2K views 138 likes 3 dislikes 31 Oct 202025% match

#AskFirebase Live
Firebase
2.3K views 54 likes 0 dislikes 11 Nov 202024% match

Build a scalable web app with Firebase in 20 minutes
Firebase
1.7K views 73 likes 1 dislikes 01 Nov 202024% match

Adding on-device recommendations to your app using TensorFlow and Firebase
Firebase
2.8K views 115 likes 1 dislikes 01 Nov 202024% match

Welcome to Firebase
Firebase
20.5K views 339 likes 15 dislikes 21 Jul 202024% match

Accelerate app development with Firebase Extensions (Firebase Summit 2019)
Firebase
9K views 230 likes 2 dislikes 26 Sep 201923% match

Why web developers (should) love Firebase (Firebase Summit 2018)
Firebase
8.4K views 138 likes 7 dislikes 29 Oct 201823% match

Firebase Summit 2020 Livestream Day 1
Firebase
29.3K views 898 likes 13 dislikes 27 Oct 202023% match

Introducing Firebase A/B Testing
Firebase
40.1K views 167 likes 6 dislikes 08 May 201823% match

The Firebase YouTube channel: here to help you build better apps
Firebase
30.4K views 231 likes 34 dislikes 18 Oct 201823% match

How to set up CI using the Firebase Emulator Suite
Firebase
1.9K views 56 likes 0 dislikes 30 Oct 202023% match

Firebase In-App Messaging: Engage active app users with contextual messages
Firebase
153.7K views 634 likes 13 dislikes 16 Aug 201822% match

Introducing Firebase Extensions
Firebase
33.3K views 431 likes 7 dislikes 26 Sep 201922% match

How to turn on billing and still sleep at night
Firebase
1.6K views 63 likes 1 dislikes 30 Oct 202022% match

Extending Firebase to the Web (Firebase Dev Summit 2017)
Firebase
6.5K views 79 likes 6 dislikes 31 Oct 201722% match

Supercharge your app with Firebase and BigQuery (Firebase Summit 2018)
Firebase
7.1K views 68 likes 5 dislikes 29 Oct 201822% match


Settings Privacy About Contact Donate