2022 年 6 月 29 日

使用 Firebase 和 Meilisearch 创建搜索界面

本教程教您如何使用 Firebase 的 Meilisearch 扩展轻松创建搜索界面。此扩展使您能够在 Cloud Firestore 文档中运行全文搜索。

Amélie Lallemand我在 Meilisearch 的集成团队工作

Create a search interface with Firebase and Meilisearch

简介

如果说 Firebase 缺少一项功能，那就是一种良好且高效的数据搜索方式。他们的文档建议使用第三方解决方案

“Cloud Firestore 不支持对文档中的文本字段进行原生索引或搜索。[...] 要启用 Cloud Firestore 数据的全文搜索，请使用专用的第三方搜索服务。”

Firestore-meilisearch，Meilisearch 的官方 Firebase 扩展，在 Cloud Firestore 集合和 Meilisearch 索引之间同步文档，监控您每次在索引中创建、更新或删除文档。这确保了 Meilisearch 中的数据镜像了 Cloud Firestore 中的内容，有效地使您能够创建功能齐全的搜索体验。

在本教程中，我们将向您展示如何在您的 Firebase 实例上安装 firestore-meilisearch 扩展，并将全文搜索添加到您的 Cloud Firestore。

工具

Firebase： Firebase 是 Google 开发的平台，旨在帮助开发人员创建移动和 Web 应用程序。它是一项完全托管的后端服务，为 Web 应用程序提供基础设施，处理从用户身份验证和服务器扩展到崩溃分析和可靠测试环境的所有事务。
Meilisearch： Meilisearch 是一款快速、开源的搜索引擎，使用和部署都非常愉快。Meilisearch 使您只需几个步骤即可开箱即用地创建相关的搜索体验，而无需任何配置。

要求

要运行此项目，您将需要

设置了结算配置文件的 Google 帐户
打开的终端或命令提示符
Node.js >= 14 && <= 17
npm >= v7

步骤

以下是我们将要执行的操作摘要，以使用 Firebase 和 Meilisearch 创建一个漂亮的搜索界面

部署 Meilisearch
创建 Firebase 项目
安装 Meilisearch 的 Firebase 扩展
设置搜索界面

部署 Meilisearch

对于本教程，您将需要一个在云服务上运行的 Meilisearch 实例。有很多方法部署 Meilisearch 实例。生成 Meilisearch 实例的最简单方法是使用 Meilisearch Cloud，它提供 14 天免费试用，无需信用卡。

创建 Firebase 项目

注意：如果您已经有一个包含文档的 Firestore 数据库的 Firebase 项目，则可以跳过此步骤。

一旦我们的 Meilisearch 实例启动并运行，我们就可以创建一个 Firebase 项目，对其进行配置，并添加一个 Firestore 数据库。

创建一个项目

按照 Firebase 文档启动您自己的项目。

您现在应该在您的 Firebase 帐户中拥有一个类似于这样的项目

A look at a fresh new Firebase account settings

创建 Firebase 帐户和我们的项目后，我们将需要向我们的项目添加一个 Firestore 数据库。有关更多说明，请参阅 Firebase 的文档。

安装 Meilisearch 扩展

我们现在准备在我们的项目上安装 Meilisearch 扩展。

⚠️ 结算

要安装扩展，您的 Firebase 项目必须采用特殊的结算计划，该计划每月至少向您收取 1 美分。

安装并授权 `firestore-meilisearch`

要在您的 Firebase 项目上安装 firestore-meilisearch 扩展，只需点击此链接，它将重定向您到您的 Firebase 控制台。

选择您要在其中安装扩展的项目。然后，您将可以访问安装面板。该面板由三个主要步骤组成，最后是扩展配置部分

抢先体验合作伙伴扩展：在“扩展发布者抢先体验计划”下找到 firestore-meilisearch，选择它，然后单击“下一步”
查看结算和使用情况： Firebase 将告知您使用扩展产生的费用，我们建议您仔细阅读。如果 Firebase 提供该选项，请单击“更新项目以继续”；否则，请单击“下一步”
查看已启用的 API 和已创建的资源： Firebase 还将为您提供有关 Cloud Functions 的更多信息，Cloud Functions 是我们在此扩展中使用的一组 Firebase 功能。这些说明解释了 Cloud Functions 如何触发及其主要功能

配置 `firestore-meilisearch`

激活 firestore-meilisearch 的第四个也是最后一个步骤是配置它。

Configuring the Meilisearch extension in Firebase

Cloud Functions 位置：选择后端代码被调用的区域，每当从 Firestore 添加、更新或删除文档时。我们建议选择靠近您的用户和您的 Meilisearch 实例的区域
集合路径：您要镜像到 Meilisearch 索引中的 Firestore 集合的名称
要在 Meilisearch 中索引的字段（可选）：可选设置使您可以仅索引 Firestore 数据库中包含的文档中的某些字段
Meilisearch 索引名称：包含您的 Firestore 数据的 Meilisearch 索引的名称。如果此索引不存在，Meilisearch 将自动创建它
Meilisearch 主机：您的 Meilisearch 实例的 URL
Meilisearch API 密钥（可选）：具有对索引执行操作权限的 Meilisearch API 密钥。有关 API 密钥的更多信息，请参阅我们的安全指南。

您也可以通过命令行安装此扩展。为此，请确保您已安装 Firebase 命令行工具，然后运行以下命令

firebase ext:install meilisearch/firestore-meilisearch --project=(your project ID)

检查一切是否正常运行！

假设我们正在创建一个应用程序，允许用户搜索电影数据库。我们的第一步是在 Firestore 中创建一个名为 movies 的集合

Starting a collection on Firebase

我们可以使用 Firestore 数据库的访问面板手动添加电影文档

Adding a document to Firebase

这是我们在示例中使用的数据

title
    The Hobbit: An Unexpected Journey

poster
    <https://image.tmdb.org/t/p/w500/yHA9Fc37VmpUA5UncTxxo3rTGVA.jpg>

overview
    Bilbo Baggins, a hobbit enjoying his quiet life, is swept into an epic quest by Gandalf the Grey and thirteen dwarves who seek to reclaim their mountain home from Smaug, the dragon.

release_date
    1353888000

添加此电影后，当您访问实例的搜索预览时，您应该能够看到它

Search preview of Meilisearch with a first document

做得好！您已成功安装 Meilisearch Firestore 扩展！

从现在开始，每当您从 Firestore 集合中添加、更新和删除文档时，它们都将以相同的方式镜像到您的 Meilisearch 实例中。

除非在安装后修改或创建了现有文档，否则此扩展不会将所有现有文档导出到 Meilisearch 中。您可以运行此扩展提供的导入脚本，以检索 Meilisearch 中存在于 Firestore 集合中的所有文档的数据集。有关更多信息，请查看我们 firestore-meilisearch 存储库中的专用指南。

管理您的扩展

要访问扩展的概览面板，首先单击 Firebase 侧边栏菜单上的“扩展”选项卡，然后找到 Meilisearch 扩展并单击“管理”。

Finding the Extensions tab in Firebase

Finding the Manage settings of meilisearch extension

您将被定向到一个页面，您可以在其中访问有关您的扩展的所有信息、更改其配置，甚至删除它。

Configuring the Meilisearch extension for Firebase

访问您的日志允许您监控您的云函数并获取不同级别的信息。您可以通过“扩展”选项卡访问扩展的日志。或者，您也可以访问“函数”选项卡，然后选择“日志”，如下图所示。

Finding the Functions tab in Firebase

Finding the Logs tab in the Function menu of Firebase

Looking at the logs to monitor Cloud Functions

Isolating an interesting log of our Firebase extension

设置搜索界面

我们已经完成了安装和配置 firestore-meilisearch 扩展，但是如果我们没有在实际的前端应用程序中尝试搜索，那就不好玩了。在本可选部分中，我们将了解如何使用 instant-meilisearch 为您的项目创建一个搜索栏。

使用数据填充您的 Firestore 集合

我们需要做的第一件事是将更多文档添加到我们的 Firestore 数据库。在我们的例子中，我们将使用此电影集合。有关如何添加和管理数据的更多信息，请参阅 Firebase 文档。

完成向 Firestore 数据库添加内容后，访问您的实例的搜索预览以检查您的文档是否已由 Meilisearch 成功索引。

Search preview of the Firestore database

在您的文档中搜索

现在让我们创建一个出色的搜索体验！有很多方法可以做到这一点，但这次我们将保持简单，并使用 instant-meilisearch，我们用于 instant-search JavaScript 库的插件。阅读我们关于instant-meilisearch 的文章以了解更多信息。

在您首选的开发环境中创建一个 index.html 文件。此 HTML 页面应包含一个搜索栏和一个包含返回搜索结果的框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meilisearch demo</title>
    <link rel="stylesheet" href="<https://cdn.jsdelivr.net.cn/npm/instantsearch.css/themes/algolia-min.css>" />
</head>
<body>
    <div>
        <div id="searchbox"></div>
        <div id="hits"></div>
      </div>
  
      <script src="<https://cdn.jsdelivr.net.cn/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js>"></script>
      <script src="<https://cdn.jsdelivr.net.cn/npm/instantsearch.js@4>"></script>
      <script>
          const searchClient = instantMeiliSearch(
              'your Meilisearch url',
              'your Meilisearch API key'
            )
            const search = instantsearch({
              indexName: 'movies',
              searchClient
            })

            search.addWidgets([
              instantsearch.widgets.searchBox({
                container: '#searchbox',
              }),
              instantsearch.widgets.hits({
                container: '#hits',
                templates: {
                  item: `
                    <div style="text-align:center;">
                      <div class="hit-name">
                        {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}
                      </div>
                      </br>
                      <div>
                        <img src="{{poster}}" width="200px" />
                      </div>
                    </div>
                  `,
                },
              }),
            ])

            search.start()
      </script>
</body>
</html>