= 使用 Node.js 和 Cloud Firestore DB 在 Google Firebase 上托管一个动态网站 =

图沙尔·卡普尔：(httpswww.tusharck.com/)
演示 Git 网址：httpsgithub.com/tusharck/firebase-demo
= 为什么选择 Firebase 托管？ =
Firebase 是一个基于 Google 基础架构构建的综合应用程序平台，因此它提供了一种安全、快速、免费（付费选项也可用于其他资源）且简单的方式来托管您的内容网络或移动应用程序

== 免费套餐的主要特点和优势：==
- 它提供免费的自定义域&
SSL（SSL为https连接提供了一个标准的安全层

- Cloud Firestore：一个灵活且可扩展的数据库，用于跨客户端应用程序进行实时数据同步

- 其他功能：云功能、云消息传递 (FCM)、Crashlytics、动态链接、托管、ML 套件、存储、性能监控、预测和测试实验室（这些产品的功能和资源可以通过购买付费计划来增加，但是免费套餐服务非常好。要查看计划，请查看 Firebase 定价）

- 资源的自动缩放

= 在 Firebase 上托管动态网站的步骤 =
==要求==
**1。 Google 帐户**如果您没有 Google 帐户，则需要注册一个。您可以访问 httpsaccounts.google.com/SignUp 来完成此操作。 **2。 Node.js 和 npm** Mac/Windows 可以从 httpsnodejs.org/en/download/ 下载安装程序。 Linux
按照以下步骤安装 Node.js：
1.打开一个终端
2. 运行以下命令：
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
setup_13.x| sudo bash -sudo apt install nodejs **我用过 注意：** **
setup_13.x 因为在教程的时候最新版本是
**13**您可以访问 httpsnodejs.org/en/ 查看最新版本

要检查 Node.js 和 npm 是否安装成功，请运行以下命令，这将输出安装的版本：
节点-v
npm -v
**3。 Firebase-CLI（命令行界面）这些是管理、查看和部署 Firebase 项目的工具

npm 安装 -g firebase-tools
= 第 1 步：创建 Firebase 项目 =
- 转到 httpsfirebase.google.com 和
从右上角登录

- 点击
从右上角转到控制台

- 然后点击
创建项目，如下图

4.接下来是输入你的项目名称，然后按继续

5. 按继续为您的 Firebase 项目启用 Google Analytics（如果您不想要它，请选中禁用）
6.为谷歌分析选择最近的位置

7. 点击
**创建项目并等待它加载。然后你会看到类似下面的东西
= 第 2 步：初始化 Firebase 登录 =
- 打开命令行/终端然后创建并转到新目录

mkdir my-firebase-projectcd my-firebase-项目
2. 要在 Firebase 上托管网站，请使用以下命令登录到 firebase。运行该命令后，将打开一个浏览器窗口，要求您使用 Google 凭据登录 firebase。在此处输入凭据，Firebase 将登录您的系统

登录

= 第 3 步：将 Firebase 项目初始化到您的系统中 =
- 现在我们必须将我们在 Firebase 控制台上创建的项目初始化到系统中。为此，请运行以下命令

火力初始化
2. 按下键选择
**两件事**通过按**空格键
- 职能
- 托管
然后
**按 Enter** 继续

3.然后选择
然后按回车

**使用现有项目**
4. 按回车键
**my-firebase-project** **或您使用的项目名称或您使用的项目名称

5.选择
**Javascript** 然后按回车

6.你可以说
**否** 是否要使用 ESLint 来捕获可能的错误并强制执行样式？
7.类型
**是** 用于使用 npm 安装依赖项

8、这里我们要做两个任务：
- 您必须选择您的网站和资产所在的目录。默认情况下是
pubicyou 可以按 enter 继续，或者您可以更改为所需的目录名称

- 类型
是对于单一应用程序页面，以便您的动态 URL 可以重定向到正确的目的地

9. 通过运行以下命令在本地系统上测试 firebase 应用程序。然后去
**httplocalhost:5000** 查看您的基本网站正在运行

firebase 服务——仅托管、功能
打开后你应该会看到类似下面的内容
**httplocalhost:5000** 网址

10.从终端关闭服务器

= 第 4 步：为动态网站安装包和创建视图目录 =
- 在这里，我们将在函数目录中切换，以便使用

光盘功能
**2。安装 Express** 它是一个最小且灵活的 Node.js Web 应用程序框架

npm 我表达 --save
**3。安装 Handle Bars** 它是用于网站动态前端的 Node.js 模板引擎

npm i handlebars --保存
**4。安装整合**
npm 我合并 --save
5.创建一个名为
**views** 在 **functions** 文件夹中，我们将在其中存储所有前端代码

目录
观点
6. 通过运行以下命令切换回主目录：
光盘。

= 第 5 步：设置 Firestore（云数据库）=

== 数据库配置 ==
- 转到 httpsconsole.firebase.google.com/

- 选择您的项目

- 选择
左侧窗格中的数据库
4. 点击
**创建数据库**
5. 选择以测试模式启动，否则您将无法从您的系统访问数据库。一旦我们完成网站的开发，我们将更改此设置

然后点击
**下一步** 这样做之后

6. 选择您的 Firestore 数据库的位置

**设置此位置后，以后无法更改。笔记： **
== 创建数据 ==
- 点击开始收集

2. 输入
**您现在可以采样的集合 ID

3. 输入示例数据。进入
**sample_doc **作为 **文档 ID。 **在 ** 字段中输入 **标题**。我喜欢 Cloud** 里面的 **Value 然后点击 **Save**

= 第 6 步：建立网站的动态内容 =
我们将把这部分分成两部分，在第一部分，我们将看到如何从 Firestore 获取数据并在网站中使用。在第二部分，我们将看到如何提交表单数据

**首先，我们将下载访问 Firestore 的凭据**
2. 点击
**设置**从左窗格转到**项目设置**

3. 前往
**服务帐户**并点击**生成新的私钥
4. 点击
**生成密钥 它会弹出一个下载密钥的窗口。将密钥存储在您网站的 **functions** 文件夹中

== 从 Firestore 获取 ==
- 打开
index.js 在 functions 文件夹中

2. 我们需要定义一些我们想在我们的应用程序中使用的库。这些是我们之前安装的相同库

const functions = require('firebase-functionsconst express = require('expressconst engines = require('consolidatevar hbs = require('handlebarsconst admin = require('firebase-admin
3.这里我们设置了一些东西：
- 使用 express 初始化应用程序

- 我们将我们的引擎设置为车把

- 然后我们会告诉快递，我们的前端代码将在 views 文件夹中

const app = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('view enginehbs
4. 授权您的应用程序访问您的 Firestore 数据库

*笔记：*
1.改变
**YOUR_SDK_NAMEjson 以及您下载的用于访问 Firestore2 的 **凭据的文件。将数据库 URL 更改为您的数据库 URL。要查看 URL，您可以**设置 >服务帐户**

var serviceAccount = 要求
YOUR_SDK_NAME.jsonadmin.initializeApp({credential: admin.credential.cert(serviceAccount), databaseURL: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5.从Firestore中获取数据的功能

- 收藏 ID 是
样本
- 文档 ID 是
示例文档

我们在输入示例数据时定义了上面的内容

异步函数 getFirestoreconst firestore_con = await admin.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(doc =>{
if (!doc.exists) { console.log('没有这样的文件}
否则{返回doc.data
.catch(err =>{ console.log('获取文档时出错', errreturn writeResult
}
**我们使用注意：** **async**因为我们必须等待数据库和我们网站之间的承诺操作完成

6.创建路由并将结果发送给前端

app.getasync (request,response) var db_result = await getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7. 创建
**index.hbs** 在 **views** 文件夹中。 hbs 是一个 handelbars 文件注意：**
8.在里面写这个基本的HTML代码
**index.hbs** 查看抓取的结果


  


" method="post" >


Sample Form
First name:
  
 Last name: