arrow_back

Firebase を使用してサーバーレス ウェブアプリを構築する

参加 ログイン
Test and share your knowledge with our community!
done
Get access to over 700 hands-on labs, skill badges, and courses

Firebase を使用してサーバーレス ウェブアプリを構築する

Lab 1時間 universal_currency_alt クレジット: 5 show_chart 中級
Test and share your knowledge with our community!
done
Get access to over 700 hands-on labs, skill badges, and courses

GSP643

Google Cloud セルフペース ラボ

Pet Theory のロゴ

概要

Google Cloud Run Serverless Workshop」のラボでは、架空のビジネス シナリオの登場人物を支援してサーバーレスへの移行計画を進めていきます。

Lily さんは 12 年前、獣医クリニック チェーン「Pet Theory」を開業しました。Pet Theory チェーンはここ数年で急速に拡大しました。古い予約システムでは増加したトラフィックを処理しきれず、クライアントが自分の予約をスケジュールすることもできないため、Lily さんは IT 部門の Patrick さんとコンサルタントの Ruby さんに対して、簡単にスケーリングできるクラウドベースのシステムを構築するよう依頼しました。

前のラボ「データを Firestore データベースに移行する」では、Firestore を活用して顧客データをホストする方法を学習しました。このラボでは、ユーザーが情報を記録し、予約をリアルタイムでスケジュールできる本格的な Firebase ウェブアプリを構築します。

アーキテクチャ

この図は、使用するサービスの概要と、それらがどのようにつながっているかを示しています。

アーキテクチャの図

学習内容

このラボでは、次の方法について学びます。

  • Google Cloud プロジェクトで Firebase API を有効にする。
  • Firebase プロジェクトを作成および構成する。
  • サーバーサイドの認証と認可が自動化されるように Firestore セキュリティ ルールを構成する。
  • Google ログインをウェブ アプリに追加する。
  • ユーザーが連絡先情報を追加できるようにデータベースを構成する。
  • ユーザーによる予約のスケジュールを可能にするコードを確認してデプロイする。
  • ウェブアプリで Firebase のリアルタイム更新を確認する。

要件

これは基礎レベルのラボで、Cloud コンソール環境とシェル環境に精通していることを前提としています。Firebase の使用経験は役立ちますが、必須ではありません。このラボを受講する前に、次の Qwiklab を完了しておくことをおすすめします。

ファイルの編集にも慣れている必要があります。ご自身で使い慣れたテキスト エディタ(nanovi など)を使用するか、上部のリボンにある Cloud Shell からコードエディタを起動できます。

[エディタを開く] ボタン

準備ができたら下にスクロールし、手順に沿ってラボ環境をセットアップします。

タスク 1. Firebase 環境のプロビジョニング

Ruby さんは Patrick さんにメールを送りました。

Ruby

Ruby さん(ソフトウェア コンサルタント)

Patrick さん

先週はお疲れ様でした。クリニックのデータが Firestore に移行されたことを確認しました。

次のタスクは Firebase を使用して Pet Theory のウェブサイトをホストすることですね。

Ruby

Patrick

Patrick さん(IT 管理者)

Ruby さん

Firebase Hosting については聞いたことがありませんが、どのようなメリットがありますか?何から始めればよいですか?

Patrick

Ruby

Ruby さん(ソフトウェア コンサルタント)

こんにちは、Patrick さん

Firebase Hosting の主なメリットは、サーバーレスであるため、インフラストラクチャを管理しなくてよいことです。セキュリティ ルールもアプリケーション内に埋め込まれるため、権限を絞り込んで、顧客データを処理する際の問題を最小限に抑えることができます。

「従量課金制」料金モデルも用意されているので、Firebase は今回のユースケースに合った包括的なモバイル開発プラットフォームといえます。

Ruby

Patrick

Patrick さん(IT 管理者)

Ruby さん

Firebase を使用すると、セキュリティとインフラストラクチャの管理(私の仕事の大部分)がずっと簡単になるように思います。アイドル状態のサーバーには課金されないというのもいいですね。

Patrick

Ruby さんは Patrick さんに背景情報を電子メールで送信し、重要な作業について検討するための打ち合わせを設定します。この打ち合わせで、Patrick さんは次のことを行う必要があることがわかりました。

  • Firestore CLI を Google Cloud プロジェクトに追加する。
  • Firestore データベースを作成する。
  • Firebase プロジェクトを構成する。
  • セキュリティ ポリシーを確立する。

次に、Patrick さんが行うこれらの作業をサポートしていきます。

タスク 2. Firebase CLI をインストールする

注: 開発環境には Firebase ツールが事前構成されています。
  1. Cloud Code を開くには、[ラボの詳細] パネルから IDE リンクをコピーして新しいブラウザタブに貼り付けます。

  2. ターミナルを開いてコマンドラインにアクセスします。左側のパネルで、アプリケーション メニュー(アプリケーション メニュー アイコン)> [Terminal] > [New Terminal] をクリックします。

  3. コマンドラインから GitHub リポジトリのクローンを作成します。

git clone https://github.com/rosera/pet-theory.git
  1. 左側のパネルでエクスプローラ アイコンをクリックしてから、[Open Folder] > [pet-theory] > [lab02] をクリックします。[OK] をクリックします。

  2. ターミナルを開きます。

  3. 必要なノード パッケージをインストールします。

npm i && npm audit fix --force

出力:

+ firebase-tools@10.7.0 added 3 packages from 11 contributors, removed 1 package and updated 8 packages in 79.808s

これで Firestore データベースを作成する準備が整いました。

タスク 3. Firestore データベースをセットアップする

ターミナルで、Firestore データベースを使用する環境を準備します。

  1. プロジェクトのリージョンを に設定します。
gcloud config set compute/region {{{project_0.default_region|REGION}}}
  1. App Engine アプリケーションを有効にします。

    gcloud app create --region={{{project_0.startup_script.app_region|REGION}}}
  2. Firestore データベースを作成します。

    gcloud firestore databases create --region={{{project_0.startup_script.app_region|REGION}}}

これで、Firestore プロジェクトを作成して Google Cloud アカウントにリンクする準備ができました。

タスク 4. Firebase プロジェクトを作成する

シークレット ウィンドウで Firebase コンソールを開きます。

注: このラボには、Firebase への権限が含まれています。 Firebase コンソールのリンクをコピーして Firebase にアクセスします。このラボで提供されているユーザー名とパスワードを使用して、Firebase での認証を行います。
  1. ページの右上隅にあるアカウント アイコンをクリックし、このラボ用にプロビジョニングされている Qwiklabs 受講者アカウントであることを確認します。

  2. [プロジェクトを追加] をクリックします。プロジェクト名の入力を求められたら、プルダウン メニューにあるプロジェクト ID を使用します。

  3. Firebase の利用規約に同意し、[続行] をクリックします。「従量課金制」料金プランを利用することを確認します。

  4. [続行] をクリックし、次のページで Firebase プロジェクトの Google アナリティクスを無効にします。

  5. 次に、[Firebase を追加] をクリックします。新しいプロジェクトが準備できたというプロンプトが表示されたら、[続行] をクリックします。

プロジェクトの準備完了プロンプト

完了したタスクをテストする

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。

Firebase プロジェクトを作成する

タスク 5. アプリを登録する

最後のステップを完了すると、Firebase コンソールが表示されます。 このページを閉じた場合は、別のシークレット タブを開いて次の Firebase コンソールへのリンクを使用します。

  1. [アプリに Firebase を追加して利用を始めましょう] の下に並ぶアイコンのリストから、ウェブアイコン(下図でハイライト表示)を選択します。

強調表示されたウェブアイコン

  1. [アプリのニックネーム] の入力を求められたら、「Pet Theory」と入力します。

  2. 次に、[このアプリの Firebase Hosting も設定します] の横にあるチェックボックスをオンにします。

  3. [アプリを登録] ボタンをクリックします。

  4. [次へ] > [次へ] > [コンソールに進む] をクリックします。次のページが表示されます。

アプリに追加するプロダクトを選択します

これで、プロジェクトの Firebase が構成されました。次に、Firebase Hosting を参照するようにプロジェクトを初期化します。

完了したタスクをテストする

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。

アプリを登録する

タスク 6. Firebase に対して認証を行いデプロイする

IDE を使用して Firebase に接続し、アプリケーションをデプロイします。 エディタ内に用意されているターミナルにコマンドを入力します。

  1. Firebase に対して認証を行います。
firebase login --no-localhost
  1. Firebase にエラー報告情報の収集を許可するかどうかを尋ねられたら「Y」と入力し、Enter キーを押します。

  2. 生成された URL をコピーして新しいシークレット ブラウザタブに貼り付けEnter キーを押します(リンクを直接クリックするとエラーが発生します)。

  3. ラボアカウントを選択してから [許可] をクリックします。[Yes, I just ran this command] をクリックして続行し、[Yes, this is my session ID] をクリックしてセッション ID を確認します。その後、アクセスコードが付与されます。

  4. アクセスコードをコピーして Cloud Shell プロンプト [Enter authorization code:] に貼り付け、Enter キーを押します。次のような出力が返されます。

出力:

✔ Success! Logged in as gcpstaging86673_student@qwiklabs.net
  1. 現在の作業ディレクトリで新しい Firebase プロジェクトを初期化します。
firebase init

このコマンドを実行すると、プロジェクト ディレクトリと Firebase プロダクトを設定する手順が表示されます。

  1. このフォルダに設定する Firebase CLI 機能を選択するよう求められます。矢印キーと Space キーを使用して、[Firestore] と [Hosting] を選択します。シェルで次のように選択されていることを確認して、Enter キーを押します。
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default insta ◉ Firestore: Configure security rules and indexes files for Firestore ◯ Functions: Configure a Cloud Functions directory and its files ❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys ◯ Hosting: Set up GitHub Action deploys ◯ Storage: Configure a security rules file for Cloud Storage
  1. 次に、残りの手順を実行して Firebase を構成します。
  • [Use an existing project] まで矢印キーで移動して、Enter キーを押します。
  • リストから Qwiklabs のプロジェクト ID(「qwiklabs-gcp-」で始まる ID)を選択し、Enter キーを押します。
  • Enter キーを押してから「N」と入力して、firestore.rules ファイルを保持します。
  • Enter キーを押してから「Y」と入力して、firestore.indexes.json ファイルを保持します。
  • Enter キーを押して public ディレクトリを保持し、次に「N」と入力して /index.html ファイルの書き換えを禁止します。
  • Enter キーを押して、「Set up automatic builds and deploys with GitHub?」と表示されたら N キーを押します。
  • 404.html ファイルの上書きを確認するメッセージが表示されたら、「N」と入力します。
  • index.html ファイルの上書きを確認するメッセージが表示されたら、「N」と入力します。

次の出力が表示されます。

✔ Wrote public/404.html ✔ Wrote public/index.html i Writing configuration info to firebase.json... i Writing project information to .firebase... i Writing gitignore file to .gitignore... ✔ Firebase initialization complete!

これでローカルの構成が完了しました。 サービス間のアクセスを実現するには、データベース認証ステップが必要です。

タスク 7. 認証とデータベースを設定する

このステップを完了するには、Firebase コンソールに戻ります。

  1. 左側のナビゲーション メニューで [プロジェクトの概要] ボタンをクリックします。

  2. [Authentication] タイルを選択し、[始める] をクリックします。

  3. [新しいプロバイダを追加] をクリックしてから Google アイテムをクリックします。

  4. 右上隅の [有効にする] 切り替えボタンをクリックし、[プロジェクトのサポートメール] でプルダウン リストからラボアカウントを選択します。ページは以下のようになります。

強調表示された [有効にする] 切り替えボタンと [プロジェクトのサポートメール] のプルダウン メニュー

  1. 以上を確認したら、[保存] ボタンをクリックします。

これで、Firestore 認証が設定されました。次のステップでは、Firebase でアプリケーションをホストする作業を行います。

完了したタスクをテストする

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。

認証とデータベースを設定する

タスク 8. シナリオ: アプリケーションを設定する

ここまで、ウェブ開発者がコードをデプロイできるように Firebase Hosting 環境をセットアップする Patrick さんの作業をサポートしてきました。しかし、Patrick さんは Firebase Authentication を有効にしたことも、コードを Firebase にデプロイしたこともないため、メールで Ruby にサポートを求めます...

Patrick

Patrick さん(IT 管理者)

Ruby さん

ヒントをいただきありがとうございます。Firebase 環境はすべて設定できたようです。次のタスクは、ウェブサイト開発者が作成したコードのデプロイですね。

コードのデプロイにはどのような作業が伴うのか、次に何をする必要があるか教えていただけませんか?

Patrick

Ruby

Ruby さん(コンサルタント)

Patrick さん

環境を設定できたんですね。アプリケーションを実行して、次の機能を追加する方法をメールにてご説明します。

  • ログインする際のウェブ認証をセットアップする。
  • 顧客の詳細をプロフィール ページに記録できるようにする。
  • 予約用のセルフサービス ポータルを作成する。

Ruby

Patrick

Patrick さん(DevOps エンジニア)

Ruby さん

かなりの作業量になりそうですね。

新しい機能を追加するたびに構造を変更する必要があるということですか?確認するだけでも時間がかかりますが...

Patrick

Ruby

Ruby さん(コンサルタント)

Patrick さん

面倒な作業のほとんどは Firebase ライブラリで行うことができます。

ブラウザで更新内容を確認するには、コマンドラインから firebase deploy を呼び出すだけでいいんです。

変更を加える、デプロイする、ウェブサイトで変更を確認する、という流れです。

Ruby

Patrick

Patrick さん(IT 管理者)

Ruby さん

それを聞いて安心しました。Firebase Hosting の良いところがだんだんわかってきました。

Patrick

必要な作業について Patrick さんの理解が深まったところで、あなたは Patrick さんが Pet Theory に Firebase アプリケーションをデプロイすることをサポートします。

タスク 9. Firestore 認証を構成し、ログインをウェブアプリに追加する

このステップはターミナルに戻って行います。 前の手順で Firebase を初期化したときのコマンドライン セッションがまだ開いているはずです。

  1. 次のコマンドを実行して、lab02 ディレクトリ内のフォルダとファイルを一覧表示します。
ls -1
  1. 次のような出力が表示されることを確認します。
README.md firebase.json firestore.indexes.json firestore.rules node_modules package-lock.json package.json public solution
  1. コードエディタを使って、pet-theory/lab02/firestore.rules を開きます。
rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /customers/{email} { allow read, write: if request.auth.token.email == email; } match /customers/{email}/{document=**} { allow read, write: if request.auth.token.email == email; } } } 注: この構成により、Firestore データベース ユーザーからアクセスできるデータが自分のもののみに限定されます。firestore.rules ファイルは、Firestore データベースのセキュリティを確保するために使用されます。 詳しくは、Firestore データベースのセキュリティをご覧ください。

タスク 10. アプリケーションのデプロイ

すべての変更が行われ、アプリケーションをデプロイするための準備が整いました。pet-theory/lab02 フォルダにいることを確認します。

  1. 次のコマンドを実行して、Firebase アプリケーションをデプロイします。
firebase deploy

出力:

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.web.app
  1. ホスティング URL([プロジェクト ID].web.app など)をコピーして、新しいタブで開きます。
  2. [Google でログイン] ボタンをクリックします。
注: ブラウザがサポートされていない、またはサードパーティの Cookie およびデータが無効になっている旨のエラーが表示された場合は、ブラウザで Cookie を有効にしてください。 サードパーティ Cookie のエラー メッセージ Chrome の場合は、URL タブの右端にあるのアイコンをクリックし、ポップアップに表示される青いリンクをクリックします。[サイトが動作していない場合] をクリックしてブラウザ設定を更新し、Cookie の使用を許可します。
  1. Google アカウントを選択します。次のページが開きます。

プロフィール ページ

注: パスワードの管理は難しく、会社側のリスクを高める可能性があります。ユーザーも、別のユーザー ID やパスワードを作成することは望みません。

Pet Theory のような小さな会社には、これを行うためのリソースや必要なスキルがありません。 この場合、アプリケーション ユーザーが既存の Google アカウント(または他の ID プロバイダ)でログインできるようにする方が効率的です。

これで、ユーザーが Google 認証を使用して予約アプリにアクセスするためのコードがデプロイされました。

タスク 11. ウェブアプリに顧客ページを追加する

ターミナルに戻り、エディタを使用して public フォルダにあるファイルの内容を表示します。

  1. customer.js ファイルを開き、次のコードをコピーして貼り付けます。
let user; firebase.auth().onAuthStateChanged(function(newUser) { user = newUser; if (user) { const db = firebase.firestore(); db.collection("customers").doc(user.email).onSnapshot(function(doc) { const cust = doc.data(); if (cust) { document.getElementById('customerName').setAttribute('value', cust.name); document.getElementById('customerPhone').setAttribute('value', cust.phone); } document.getElementById('customerEmail').innerText = user.email; }); } }); document.getElementById('saveProfile').addEventListener('click', function(ev) { const db = firebase.firestore(); var docRef = db.collection('customers').doc(user.email); docRef.set({ name: document.getElementById('customerName').value, email: user.email, phone: document.getElementById('customerPhone').value, }) })
  1. styles.css ファイルを開き、次のコードを貼り付けます。
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; } #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; } #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; } #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; } #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;} #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; } #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; } #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; } @media (max-width: 600px) { body, #message { margin-top: 0; background: white; box-shadow: none; } body { border-top: 16px solid #ffa100; } }
  1. コマンドラインで次のコマンドを実行します。
firebase deploy

出力:

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.web.app
  1. アプリのタブに移動し、command+shift+R キー(Mac の場合)または Ctrl+Shift+R キー(Windows の場合)でページのハード再読み込みを行います。通常の更新だけでは、必要な更新内容は表示されません。いくつかの顧客情報を入力します。名前と電話番号を入力し、[Save profile] をクリックします。

プロフィールのフォーム

  1. Firebase コンソールに移動して [構築] > [Firestore Database] をクリックし、保存されたプロフィール情報を表示します。

Cloud Firestore、データ タブページ

  1. ウェブアプリのページに戻り、[Appointments] リンクをクリックします。予約コードがまだデプロイされていないため、空白のページが表示されます。

完了したタスクをテストする

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。

ウェブアプリに顧客ページを追加する

タスク 12. ユーザーが予約をスケジュールできるようにする

次に、ユーザーが予約をスケジュールできるページを作成します。

  1. コードエディタのタブに戻ります。public ディレクトリの 2 つのファイルにコードを追加します。

  2. サイドメニューから appointments.html を選択し、次のコードを貼り付けます。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Pet Theory appointments</title> <script src="/__/firebase/6.4.2/firebase-app.js"></script> <script src="/__/firebase/6.4.2/firebase-auth.js"></script> <script src="/__/firebase/6.4.2/firebase-firestore.js"></script> <script src="/__/firebase/init.js"></script> <link type="text/css" rel="stylesheet" href="styles.css" /> </head> <body> <div id="message"> <h2>Scheduled appointments</h2> <div id="appointments"></div> <hr/> <h2>Schedule a new appointment</h2> <select id="timeslots"> <option value="0">Choose time</option> </select> <br><br> <button id="makeAppointment">Schedule</button> </div> <script src="appointments.js"></script> </body> </html>
  1. appointments.js ファイルを開いて、次のコードを貼り付けます。
let user; firebase.auth().onAuthStateChanged(function(newUser) { user = newUser; if (user) { const db = firebase.firestore(); const appColl = db.collection('customers').doc(user.email).collection('appointments'); appColl.orderBy('time').onSnapshot(function(snapshot) { const div = document.getElementById('appointments'); div.innerHTML = ''; snapshot.docs.forEach(appointment => { div.innerHTML += formatDate(appointment.data().time) + '<br/>'; }) if (div.innerHTML == '') { div.innerHTML = 'No appointments scheduled'; } }); } }); const timeslots = document.getElementById('timeslots'); getOpenTimes().forEach(time => { timeslots.add(new Option(formatDate(time), time)); }); document.getElementById('makeAppointment').addEventListener('click', function(ev) { const millis = parseInt(timeslots.selectedOptions[0].value); if (millis > 0) { const db = firebase.firestore(); db.collection('customers').doc(user.email).collection('appointments').add({ time: millis }) timeslots.remove(timeslots.selectedIndex); } }) function getOpenTimes() { const retVal = []; let startDate = new Date(); startDate.setMinutes(0); startDate.setSeconds(0); startDate.setMilliseconds(0); let millis = startDate.getTime(); while (retVal.length < 5) { const hours = Math.floor(Math.random() * 5) + 1; millis += hours * 3600 * 1000; if (isDuringOfficeHours(millis)) { retVal.push(millis); } } return retVal; } function isDuringOfficeHours(millis) { const aDate = new Date(millis); return aDate.getDay() != 0 && aDate.getDay() != 6 && aDate.getHours() >= 9 && aDate.getHours() <= 17; } function formatDate(millis) { const aDate = new Date(millis); const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; return days[aDate.getDay()] + ' ' + aDate.getDate() + ' ' + months[aDate.getMonth()] + ', ' + aDate.getHours() + ':' + (aDate.getMinutes() < 10? '0'+aDate.getMinutes(): aDate.getMinutes()); }
  1. ファイルが作成されたので変更を確認します。Cloud Shell で次のコマンドを実行して、アプリケーションをデプロイします。
firebase deploy

出力:

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.web.app
  1. 以前に空白のページが表示されたウェブアプリのタブを更新します。予約をいくつかスケジュールしてください。

スケジュール設定された予約のウィンドウ

  1. 次に、Firebase コンソールに移動して [構築] > [Firestore Database] をクリックし、ユーザーの下に作成した appointments コレクションを選択します。

  2. 次のような予約コードのコレクションが表示されます。

予約コード

タスク 13. Firestore のリアルタイム更新を確認する

Firestore はリアルタイムのデータベースです。 この機能の活用例として、アプリケーションでリアルタイム更新を加えてみます。

  1. 新しいブラウザタブを開いて [プロジェクト ID].web.app にアクセスした後、Google ボタンを使ってログインして [Appointments] をクリックします。

  2. 2 つのブラウザタブを並べて配置します。最初のブラウザ ウィンドウで、新しい予約をスケジュールします。

  3. 次に、他のブラウザタブを確認します。更新しなくても、自動的に追加された予約が表示されます。

スケジュール設定された予約のウィンドウ

正しく表示されました。Firestore では、クライアント(ウェブアプリとネイティブ モバイルアプリ)がリアルタイムで更新されるので、ユーザーが更新または再読み込みを行う必要はありません。

  1. Firebase コンソールに移動し、Cloud Firestore の [データ] タブをクリックして、データを編集します。ユーザー レコードに含まれる appointments コレクションを削除することもできます。どちらのブラウザ ウィンドウもリアルタイムで更新され続けます。

まとめ

このラボでは、Firebase を使用して堅牢なサーバーレス ウェブ アプリケーションを作成しました。Firebase プロジェクトを作成して構成してから、サーバーサイドの認証と認可を自動化する Firestore セキュリティを追加しました。次に、Google ログインをウェブアプリに追加し、ユーザーが連絡先情報や予約を追加できるようにデータベースを構成しました。最後に、ユーザーによる予約とスケジュールを可能にするコードを確認してデプロイし、ウェブアプリで Firebase のリアルタイムの更新を確認しました。これで、この学習パスの他のラボを受講する準備が整いました。

クエストを完了する

このセルフペース ラボは、「Google Cloud Run Serverless Workshop」および「Build Apps & Websites with Firebase」クエストの一部です。クエストとは学習プログラムを構成する一連のラボのことで、完了すると成果が認められて上のようなバッジが贈られます。バッジは公開して、オンライン レジュメやソーシャル メディア アカウントにリンクできます。このラボの修了後、このラボが含まれるクエストに登録すれば、すぐにクレジットを受け取ることができます。受講可能な全クエストについては、Google Cloud Skills Boost カタログをご覧ください。

次のラボを受講する

シリーズの次のラボ「Cloud Run を使用して PDF ファイルを作成するサーバーレス アプリを構築する」または「Cloud Build と Firebase のパイプラインで Hugo ウェブサイトをデプロイする」に進んでクエストを続けてください。

次のステップと詳細情報

Google Cloud - サーバーレスとは

Google Cloud トレーニングと認定資格

Google Cloud トレーニングと認定資格を通して、Google Cloud 技術を最大限に活用できるようになります。必要な技術スキルとベスト プラクティスについて取り扱うクラスでは、学習を継続的に進めることができます。トレーニングは基礎レベルから上級レベルまであり、オンデマンド、ライブ、バーチャル参加など、多忙なスケジュールにも対応できるオプションが用意されています。認定資格を取得することで、Google Cloud テクノロジーに関するスキルと知識を証明できます。

マニュアルの最終更新日: 2023 年 9 月 28 日

ラボの最終テスト日: 2023 年 9 月 28 日

Copyright 2024 Google LLC All rights reserved. Google および Google のロゴは Google LLC の商標です。その他すべての企業名および商品名はそれぞれ各社の商標または登録商標です。