arrow_back

Develop Serverless Apps with Firebase：挑戰研究室

登录 加入
Test and share your knowledge with our community!
done
Get access to over 700 hands-on labs, skill badges, and courses

Develop Serverless Apps with 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

GSP344

Google Cloud 自修研究室標誌

總覽

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

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

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

這個研究室適合報名 Develop Serverless Apps with 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 互動的前端應用程式。您也學到了如何部署測試環境和正式環境的前端應用程式。

Develop Serverless Apps with Firebase 技能徽章

取得下一枚技能徽章

這個自修研究室屬於 Develop Serverless Apps with Firebase 技能徽章課程的一部分。完成這個課程即可獲得上方的徽章，表彰您的成就。您可以在履歷表和社群平台張貼徽章，並加上 #GoogleCloudBadge 公開這項成就。

Google Cloud 教育訓練與認證

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

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

研究室上次測試日期：2024 年 5 月 2 日

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