GSP643

概览

12 年前，Lily 创办了 Pet Theory 连锁宠物医院。近几年来，Pet Theory 宠物医院的规模迅速扩张。他们的旧预约系统无法处理日益增加的客流量，客户也无法自行安排预约，因此 Lily 请 IT 部门的 Patrick 和顾问 Ruby 构建一个易于扩缩的云端系统。在本实验中，您将构建一个功能齐全的 Firebase Web 应用，允许用户实时记录信息和安排预约。

架构

下图概述了您将使用的服务，以及这些服务之间的关系：

目标

在本实验中，您将学习如何完成以下操作：

• 在 Google Cloud 项目中启用 Firebase API。
• 创建并配置 Firebase 项目。
• 配置 Firestore 安全功能以自动执行服务器端身份验证和授权。
• 向您的 Web 应用中添加 Google 登录功能。
• 配置数据库，以便用户可以添加他们的联系信息。
• 探索和部署允许用户安排预约的代码。
• 在您的 Web 应用中探索 Firebase 的实时更新。

前提条件

这是一个中级实验，假设您熟悉 Cloud 控制台和 shell 环境。具备 Firebase 使用经验会有帮助，但这不是硬性要求。在进行本实验之前，建议您先完成以下实验：

• 将数据导入 Firestore 数据库

您还应该能够自如地修改文件。您可以使用自己惯用的文本编辑器（如 nano、vi 等），也可以从 Cloud Shell 顶部的功能区启动代码编辑器：

准备就绪后，请向下滚动页面，并按下方步骤来设置实验环境。

任务 1. 配置 Firebase 环境

Ruby 给 Patrick 发送了一封电子邮件：

Ruby，软件顾问	Patrick，您好！ 上周的工作完成得很出色。很高兴看到诊所的数据已迁移到 Firestore！ 看来接下来的工作就是使用 Firebase 来托管 Pet Theory 网站。 Ruby
Patrick，IT 管理员	Ruby，您好！ 我没听说过 Firebase Hosting，它有什么优点？我应该从何处着手？ Patrick
Ruby，软件顾问	Patrick，您好！ Firebase Hosting 的主要优点是它是无服务器的，因此无需管理基础设施。应用中还嵌入了安全规则，因此在处理客户数据时可以限制权限，最大限度地减少可能出现的问题。 它还具有“即用即付”模式，这意味着，Firebase 这个综合性移动开发平台很适合我们的应用场景。 Ruby
Patrick，IT 管理员	Ruby，您好！ 听起来 Firebase 会简化安全和基础设施管理，这些可是我工作中很重要的一部分。不用为空闲服务器付费，也让我很期待！ Patrick

Ruby 通过电子邮件向 Patrick 发送一些背景信息，然后他们开了一次会来确定要执行的主要活动。在这次会议上，他们确定了 Patrick 需要完成以下任务：

• 将 Firestore CLI 添加到 Google Cloud 项目。
• 创建 Firestore 数据库。
• 配置 Firebase 项目。
• 制定安全政策。

接下来，请帮助 Patrick 完成这些任务。

任务 2. 安装 Firebase CLI

注意：开发环境已预配置 Firebase 工具。

1. 从“实验详细信息”面板复制 IDE 链接，然后将其粘贴到新的浏览器标签页以打开 Cloud Code。

2. 打开一个终端以进入命令行。在左侧面板中，点击“应用”菜单 () > 终端 > 新终端。

3. 从命令行克隆 GitHub 代码库：

git clone https://github.com/rosera/pet-theory.git

4. 点击左侧面板中的探索器图标，然后点击打开文件夹 > pet-theory > lab02。点击确定。

5. 如果您看到 Do you trust the authors of the files in this folder?（您信任此文件夹中文件的作者吗？）的弹出式窗口，请勾选相应复选框，然后点击 Yes, I trust the authors（是的，我信任作者）。

6. 依次点击“应用”菜单 () > 终端 > 新终端，再次打开终端。

7. 安装必要的节点软件包：

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. 创建 Firestore 数据库： gcloud firestore databases create --location={{{project_0.default_region|REGION}}}

现在，您可以创建一个 Firestore 项目，并将其关联到您的 Google Cloud 账号。

任务 4. 创建 Firebase 项目

在无痕式窗口中打开 Firebase 控制台。

注意：该实验配置了访问 Firebase 的权限。复制 Firebase 控制台链接以访问 Firebase。使用实验提供的用户名/密码向 Firebase 进行身份验证。

1. 点击页面右上角的账号图标，确保账号是您为本实验配置的 Qwiklabs 学员账号。

2. 然后点击添加项目。系统提示您输入项目名称时，请使用下拉菜单中的项目 ID。

3. 接受 Firebase 条款并点击继续。确认“随用随付”结算方案。

4. 点击继续，在随后出现的页面上为您的 Firebase 项目停用 Google Analytics。

5. 然后点击添加 Firebase。看到新项目已准备就绪的提示时，点击继续：

验证您已完成的任务

点击检查我的进度以验证是否完成了以下目标：

创建 Firebase 项目

任务 5. 注册您的应用

完成最后一步后，您应该位于 Firebase 控制台中。如果关闭了该页面，则可以打开另一个无痕式标签页，并使用以下链接进入 Firebase 控制台。

1. 从“将 Firebase 添加至您的应用即可开始使用”图标列表中选择 Web 图标（下图中已突出显示）：

2. 在系统提示输入应用别名时，输入 Pet Theory。

3. 然后选中“还为此应用设置 Firebase Hosting”。

4. 点击注册应用按钮。

5. 点击下一步 > 下一步 > 前往控制台。现在您应该会看到以下页面：

现在，您已经为项目配置了 Firebase。接下来，您将初始化项目以引用 Firebase 主机。

验证您已完成的任务

点击检查我的进度以验证是否完成了以下目标：

注册您的应用

任务 6. 向 Firebase 进行身份验证并部署

使用 IDE 连接 Firebase 并部署应用。在编辑器中可用的终端中输入命令。

1. 向 Firebase 进行身份验证：

firebase login --no-localhost

2. 如果系统询问 Firebase 是否可以收集错误报告信息，请输入 Y，然后按 Enter 键。

3. 在新的无痕模式浏览器标签页中复制并粘贴生成的网址，然后按 Enter 键（直接点击链接会出错）。

4. 选择您的实验账号，然后点击允许。点击 Yes, I just ran this command（是，我刚才运行的是此命令）以继续，然后点击 Yes, this is my session ID（是，这是我的会话 ID）确认您的会话 ID。然后，您会获得一个访问代码：

5. 复制该访问代码，将其粘贴到 Cloud Shell 提示 Enter authorization code:（输入授权代码：）中，然后按 Enter 键。您应该会收到类似以下响应的输出：

输出如下：

✔ Success! Logged in as gcpstaging86673_student@qwiklabs.net

6. 接下来，初始化当前工作目录中的一个新 Firebase 项目：

firebase init

运行此命令后，系统会引导您完成设置项目目录和 Firebase 产品的每个步骤。

7. 系统会要求您选择要在此文件夹中设置的 Firebase CLI 功能。使用方向键和空格键选择 Firestore 和 Hosting。确保您的 shell 符合以下条件，然后按 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

8. 然后执行其余步骤来配置 Firebase：

• 使用向下键选择 Use an existing project（使用现有项目），然后按 Enter 键。
• 从列表中选择您的 Qwiklabs 项目 ID（以“qwiklabs-gcp-”开头的 ID），然后按 Enter 键。
• 按 Enter 键，然后按 N 键，以保留 firestore.rules 文件。
• 按 Enter 键，然后按 Y 键，以保留 firestore.indexes.json 文件。
• 按 Enter 键保留公共目录，然后按 N 键以禁止重写 /index.html 文件。
• 按 Enter 键，出现“Set up automatic builds and deploys with GitHub?”（设置使用 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. 点击右上角的启用切换开关，对于项目支持邮箱，从下拉列表中选择您的实验账号。现在，您将看到类似下图的页面：

5. 验证上面的设置后，点击保存按钮。

现在，您已经设置了 Firestore 身份验证。接下来需要使用 Firebase 托管应用。

验证您已完成的任务

点击检查我的进度以验证是否完成了以下目标：

设置身份验证和数据库

任务 8. 场景：设置应用

您协助 Patrick 设置了一个可正常运作的 Firebase Hosting 环境，Web 开发者可以在该环境中部署他们的代码。然而，Patrick 从未启用过 Firebase Authentication，也没有在 Firebase 中部署过代码，因此他向 Ruby 发邮件寻求帮助...

Patrick，IT 管理员	Ruby，您好！ 感谢您提供的所有建议！Firebase 环境看起来已完全就绪。我的下一项任务是部署网站开发者的代码。 您能介绍一下这需要做哪些准备，以及下一步我需要做什么吗？ Patrick
Ruby，顾问	Patrick，您好！ 太好了，我将向您发送如何运行应用和添加以下功能的说明： 设置用于登录的 Web 身份验证。 允许在“个人资料”页面记录客户详细信息。 创建自助式预约门户。 Ruby
Patrick，DevOps 工程师	Ruby，您好！ 听起来工作量还不小呢。 这是不是表示每次我想添加新内容时，都必须更改结构？更何况，所做的更新还要过些时间才能体现出来... Patrick
Ruby，顾问	Patrick，您好！ 大部分繁重的工作都可以使用 Firebase 库来完成。 只需在命令行中调用 firebase deploy，就能在浏览器中看到更新，操作起来很简单。 您只需要进行更改、部署，然后就能在在网站上看到所做的更改。 Ruby
Patrick，IT 管理员	Ruby，您好！ 哇，这样方便多了！Firebase Hosting 是越来越好了 :-) Patrick

现在，Patrick 已经更好地了解了需要进行的准备工作，您将帮助他把 Pet Theory 部署为 Firebase 应用。

任务 9. 配置 Firestore Authentication 并向 Web 应用添加登录功能

请返回终端来完成此步骤。之前初始化 Firebase 时使用的命令行会话应该仍然打开着。

1. 运行以下命令列出 lab02 目录中的文件夹和文件：

ls -1

2. 确保输出内容如下所示：

README.md firebase.json firestore.indexes.json firestore.rules node_modules package-lock.json package.json public solution

3. 使用代码编辑器打开 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

2. 复制托管网址（应类似于 [PROJECT-ID].web.app），然后在新标签页中打开它。
3. 点击使用 Google 账号登录按钮：

注意：如果看到 browser is not supported or 3rd party cookies and data may be disabled（浏览器不受支持，或者第三方 Cookie 和数据可能会被禁用）错误，请务必在浏览器中启用 Cookie。 在 Chrome 浏览器中，点击网址标签页最右侧的眼睛图标，然后点击弹出式窗口中的蓝色链接，即可启用 Cookie。点击网站无法正常运行？链接，可更新浏览器设置以接受 Cookie。

4. 选择您的 Google 账号。以下页面即会打开：

注意：管理密码是一项艰巨的任务，可能会给公司带来额外风险。此外，用户也不想再创建一个用户 ID 和密码。

像 Pet Theory 这样的小公司没有资源或必需的技能来做这件事。在这种情况下，允许应用用户使用他们现有的 Google 账号（或任何其他身份供应方）登录会更好。

现在，您已经部署了允许用户使用 Google 身份验证访问预约应用的代码。

任务 11. 向 Web 应用中添加客户页面

返回终端，使用编辑器查看 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, }) })

2. 打开 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; } }

3. 从命令行中，运行以下命令：

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

4. 前往应用标签页，按 CMND+SHIFT+R (Mac) 或 CTRL+SHIFT+R (Windows) 硬刷新页面。常规刷新无法显示所需更新。输入一些客户信息：编造一个姓名和电话号码，然后点击 Save profile（保存个人资料）。

5. 返回 Firebase 控制台，然后点击构建 > Firestore Database，以查看保存的个人资料信息：

6. 返回 Web 应用页面并点击 Appointments（预约）链接。您将看到一个空白页面，因为还没有部署预约代码。

验证您已完成的任务

点击检查我的进度以验证是否完成了以下目标：

向 Web 应用中添加客户页面

任务 12. 允许用户安排预约

构建允许用户安排预约的页面。

1. 返回代码编辑器标签页。您将向 public 目录下的两个文件中添加代码。

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>

3. 现在打开 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()); }

4. 您的文件已构建好，现在来查看所做的更改。在 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

5. 刷新您的 Web 应用标签页，之前它是空白页面。安排几次预约：

6. 现在前往 Firebase 控制台，点击构建 > Firestore Database，然后选择刚刚以您的用户身份创建的 appointments 集合。

7. 您应该会看到一个类似如下的预约代码集合：

任务 13. 查看 Firestore 实时更新

Firestore 是一种实时数据库。现在向应用中添加实时更新，以利用这一优势。

1. 打开一个新的浏览器标签页，将其指向 [项目 ID].web.app，使用 Google 按钮登录，然后点击 Appointments（预约）。

2. 将两个浏览器标签页并排排列。在第一个浏览器窗口中，安排一个新的预约。

3. 现在看看另一个浏览器标签页，您应该会看到预约已自动添加，无需刷新：

太酷了！Firestore 会实时更新客户端（Web 应用和原生移动应用），用户无需刷新或重新加载。

4. 前往 Firebase 控制台，点击 Cloud Firestore 中的数据标签页，然后修改数据。您甚至可以删除您的用户记录名下的 appointments 集合。两个浏览器窗口都会实时更新。

恭喜！

在本实验中，您使用 Firebase 创建了一个强大的无服务器 Web 应用。创建并配置 Firebase 项目后，您添加了 Firestore 安全功能，以自动执行服务器端身份验证和授权。然后，您在 Web 应用中添加了 Google 登录功能，并配置了数据库，使用户可以添加联系信息和预约。最后，您探索并部署了允许用户安排预约的代码，并在 Web 应用中查看了 Firebase 的实时更新。现在，您可以参加此学习路线中的更多实验了。

后续步骤/了解详情

• Google Cloud - 什么是无服务器？

Google Cloud 培训和认证

…可帮助您充分利用 Google Cloud 技术。我们的课程会讲解各项技能与最佳实践，可帮助您迅速上手使用并继续学习更深入的知识。我们提供从基础到高级的全方位培训，并有点播、直播和虚拟三种方式选择，让您可以按照自己的日程安排学习时间。各项认证可以帮助您核实并证明您在 Google Cloud 技术方面的技能与专业知识。

上次更新手册的时间：2024 年 6 月 24 日

上次测试实验的时间：2024 年 6 月 24 日

版权所有 2024 Google LLC 保留所有权利。Google 和 Google 徽标是 Google LLC 的商标。其他所有公司名和产品名可能是其各自相关公司的商标。