arrow_back

使用 Firebase 開發無伺服器應用程式：挑戰實驗室

登录 加入
访问 700 多个实验和课程

使用 Firebase 開發無伺服器應用程式：挑戰實驗室

实验 1 小时 universal_currency_alt 5 积分 show_chart 中级
info 此实验可能会提供 AI 工具来支持您学习。
访问 700 多个实验和课程

GSP344

Google Cloud 自學實驗室標誌

總覽

在挑戰研究室中，您會在特定情境下完成一系列任務。挑戰研究室不會提供逐步說明，您將運用從課程研究室學到的技巧，自行找出方法完成任務！自動評分系統 (如本頁所示) 將根據您是否正確完成任務來提供意見回饋。

在您完成任務的期間，挑戰研究室不會介紹新的 Google Cloud 概念。您須靈活運用所學技巧，例如變更預設值或詳讀並研究錯誤訊息，解決遇到的問題。

若想滿分達標，就必須在時限內成功完成所有任務！

這個實驗室適合使用 Firebase 開發無伺服器應用程式課程的學員。準備好迎接挑戰了嗎？

設定和需求

瞭解以下事項後，再點選「Start Lab」按鈕

請詳閱以下操作說明。實驗室活動會計時，且中途無法暫停。點選「Start Lab」後就會開始計時，顯示可使用 Google Cloud 資源的時間。

您將在真正的雲端環境完成實作實驗室活動，而不是模擬或示範環境。為此，我們會提供新的暫時憑證，供您在實驗室活動期間登入及存取 Google Cloud。

為了順利完成這個實驗室，請先確認：

  • 可以使用標準的網際網路瀏覽器 (Chrome 瀏覽器為佳)。
注意事項：請使用無痕模式 (建議選項) 或私密瀏覽視窗執行此實驗室，這可以防止個人帳戶和學員帳戶之間的衝突，避免個人帳戶產生額外費用。
  • 是時候完成實驗室活動了！別忘了，活動一旦開始將無法暫停。
注意事項：務必使用實驗室專用的學員帳戶。如果使用其他 Google Cloud 帳戶，可能會產生額外費用。

佈建環境

  1. 連結專案：
gcloud config set project $(gcloud projects list --format='value(PROJECT_ID)' --filter='qwiklabs-gcp')
  1. 複製存放區：
git clone https://github.com/rosera/pet-theory.git

挑戰情境

在這個實驗室，您會運用 REST API 和 Firestore 資料庫來建立前端解決方案。Cloud Firestore 是 Firebase 平台中的 NoSQL 文件資料庫，可以大規模儲存、同步處理及查詢行動與網頁應用程式的資料。目標為使用 Google Cloud 無伺服器基礎架構，解決實際問題。

您會建立以下架構：

應用程式架構圖

工作 1：建立 Firestore 資料庫

在這個情境中，請以 Google Cloud 建立 Firestore 資料庫。下方的概略架構圖總結呈現了一般架構。

Firebase 挑戰實驗室架構圖

需求條件：

欄位 值
Cloud Firestore 原生模式
位置

建立 Firestore 資料庫

為順利完成這個部分，請執行下列工作：

  • 建立 Cloud Firestore 資料庫
  • 使用 Firestore (原生模式)
  • 新增 位置

點選「Check my progress」，確認上述工作已完成。建立 Firestore 資料庫

工作 2：填充資料庫

在這個情境中，請將測試資料填入資料庫。

下方的概略架構圖總結呈現了一般架構。

Firebase 挑戰實驗室架構

填充資料庫

Firestore 結構定義示例：

集合 文件 欄位
data 70234439 [dataset]

Netflix Shows 資料集含有下列資訊：

欄位 說明
show_id: 各電影/電視節目的專屬 ID
type: 辨別是電影或電視節目
title: 電影/電視節目的名稱
director: 電影導演
cast: 電影/節目的演員
country: 製作該電影/節目的國家/地區
date_added: 新增至 Netflix 的日期
release_year: 電影/節目的實際上映年份
rating: 電影/節目的分級
duration: 內容總長度，單位為分鐘或季數

為順利完成這個部分，請執行下列工作：

  1. 使用 pet-theory/lab06/firebase-import-csv/solution 中的程式碼範例：
npm install
  1. 使用節點 pet-theory/lab06/firebase-import-csv/solution/index.js 來匯入 CSV：
node index.js netflix_titles_original.csv 注意事項：請查看 Firestore UI 中的資料，確認 Firebase 資料庫已更新完畢。

點選「Check my progress」，確認上述工作已完成。填充 Firebase 資料庫

工作 3：建立 REST API

在這個情境中，請建立範例 REST API。

下方的概略架構圖總結呈現了一般架構。

Firebase 挑戰實驗室架構圖

Cloud Run 部署作業

欄位 值
Container Registry 映像檔 rest-api:0.1
Cloud Run 服務 netflix-dataset-service
權限 --allow-unauthenticated

為順利完成這個部分，請執行下列工作：

  1. 存取 pet-theory/lab06/firebase-rest-api/solution-01。
  2. 建立程式碼並部署至 Google Container Registry。
  3. 以 Cloud Run 服務的形式部署映像檔。
注意事項：部署服務時最多使用 1 個執行個體，以免超過 Cloud Run 執行個體數量上限。
  1. 點選 Cloud Run 中的「netflix-dataset-service」，然後複製服務網址：
  • SERVICE_URL=copy url from your netflix-dataset-service
  • curl -X GET $SERVICE_URL 應會回應 {"status":"Netflix Dataset! Make a query."}

點選「Check my progress」，確認上述工作已完成。部署並測試 REST API

工作 4：Firestore API 存取權

在這個情境中，請部署修訂後的新版程式碼，以便存取 Firestore 資料庫。

下方的概略架構圖總結呈現了一般架構。

Firebase 挑戰實驗室架構圖

部署修訂後的 Cloud Run 服務 (版本 0.2)

欄位 值
Container Registry 映像檔 rest-api:0.2
Cloud Run 服務 netflix-dataset-service
權限 --allow-unauthenticated

為順利完成這個部分，請執行下列工作：

  1. 存取 pet-theory/lab06/firebase-rest-api/solution-02。
  2. 建構新版應用程式。
  3. 使用 Cloud Build 標記修訂版映像檔，並部署至 Container Registry。
  4. 以 Cloud Run 服務的形式部署新的映像檔。
注意事項：部署服務時最多使用 1 個執行個體，以免超過 Cloud Run 執行個體數量上限。
  1. 點選 Cloud Run 中的「netflix-dataset-service」，然後複製服務網址：
  • SERVICE_URL=copy url from your netflix-dataset-service
  • curl -X GET $SERVICE_URL/2019 應會透過回應提供 JSON 資料集

點選「Check my progress」，確認上述工作已完成。部署並測試 REST API

工作 5：部署測試環境前端

在這個情境中，請部署測試環境前端。

下方的概略架構圖總結呈現了一般架構。

Firebase 挑戰實驗室架構圖

部署前端

欄位 值
REST_API_SERVICE REST API 服務網址
Container Registry 映像檔 frontend-staging:0.1
Cloud Run 服務 frontend-staging-service

為順利完成這個部分，請執行下列工作：

  1. 存取 pet-theory/lab06/firebase-frontend。
  2. 建構前端測試環境應用程式。
  3. 使用 Cloud Build 標記修訂版映像檔，並部署至 Container Registry。
  4. 以 Cloud Run 服務的形式部署新的映像檔。
注意事項：部署服務時最多使用 1 個執行個體，以免超過 Cloud Run 執行個體數量上限。
  1. 設定前端的 REST API 和 Firestore 資料庫存取權。
  2. 存取前端服務網址。
注意事項：此處以示範資料集呈現畫面中的項目。

無伺服器架構的簡介網頁

點選「Check my progress」，確認上述工作已完成。部署測試環境前端

工作 6：部署正式環境前端

在這個情境中，請將測試環境前端更新為使用 Firestore 資料庫。

下方的概略架構圖總結呈現了一般架構。

Firebase 挑戰實驗室架構圖

部署前端

欄位 值
REST_API_SERVICE REST API 服務網址
Container Registry 映像檔 frontend-production:0.1
Cloud Run 服務 frontend-production-service

為順利完成這個部分，請執行下列工作：

  1. 存取 pet-theory/lab06/firebase-frontend/public。
  2. 將前端應用程式 (即 app.js) 更新為使用 REST API。
  3. 別忘了在 SERVICE_URL 後方加上年份。
  4. 使用 Cloud Build 標記修訂版映像檔，並部署至 Container Registry。
  5. 以 Cloud Run 服務的形式部署新的映像檔。注意事項：部署服務時最多使用 1 個執行個體，以免超過 Cloud Run 執行個體數量上限。
  6. 設定前端的 REST API 和 Firestore 資料庫存取權。

服務已部署完畢，您可以透過前端服務查看 Firestore 資料庫的內容。

無伺服器架構的簡介網頁

點選「Check my progress」，確認上述工作已完成。部署正式環境前端

恭喜！

恭喜！在這個實驗室，您成功建立了 Firestore 資料庫、填入資料、建立 REST API，並部署可以與 Firestore 資料庫和 REST API 互動的前端應用程式。您也學到了如何部署測試環境和正式環境的前端應用程式。

「使用 Firebase 開發無伺服器應用程式」技能徽章

取得下一枚技能徽章

這個自修實驗室屬於使用 Firebase 開發無伺服器應用程式技能徽章課程的一部分。完成這個課程即可獲得上方的徽章，表彰您的成就。您可以在履歷表和社群平台張貼徽章，並加上 #GoogleCloudBadge 公開這項成就。

Google Cloud 教育訓練與認證

協助您瞭解如何充分運用 Google Cloud 的技術。我們的課程會介紹專業技能和最佳做法，讓您可以快速掌握要領並持續進修。我們提供從基本到進階等級的訓練課程，並有隨選、線上和虛擬課程等選項，方便您抽空參加。認證可協助您驗證及證明自己在 Google Cloud 技術方面的技能和專業知識。

使用手冊上次更新日期：2024 年 5 月 2 日

實驗室上次測試日期：2024 年 5 月 2 日

Copyright 2025 Google LLC 保留所有權利。Google 和 Google 標誌是 Google LLC 的商標，其他公司和產品名稱則有可能是其關聯公司的商標。

准备工作

  1. 实验会创建一个 Google Cloud 项目和一些资源，供您使用限定的一段时间
  2. 实验有时间限制，并且没有暂停功能。如果您中途结束实验，则必须重新开始。
  3. 在屏幕左上角，点击开始实验即可开始

使用无痕浏览模式

  1. 复制系统为实验提供的用户名和密码
  2. 在无痕浏览模式下，点击打开控制台

登录控制台

  1. 使用您的实验凭证登录。使用其他凭证可能会导致错误或产生费用。
  2. 接受条款，并跳过恢复资源页面
  3. 除非您已完成此实验或想要重新开始，否则请勿点击结束实验，因为点击后系统会清除您的工作并移除该项目

此内容目前不可用

一旦可用，我们会通过电子邮件告知您

太好了！

一旦可用，我们会通过电子邮件告知您

一次一个实验

确认结束所有现有实验并开始此实验

使用无痕浏览模式运行实验

请使用无痕模式或无痕式浏览器窗口运行此实验。这可以避免您的个人账号与学生账号之间发生冲突，这种冲突可能导致您的个人账号产生额外费用。