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 控制台。

选择您要安装扩展的项目。然后您将进入安装面板。该面板包含三个主要步骤，最后有一个扩展配置部分。

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

配置 `firestore-meilisearch`

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

Configuring the Meilisearch extension in Firebase

云函数位置：选择当文档从 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，除非它们在安装后被修改或创建。您可以运行此扩展提供的导入脚本，将 Firestore 集合中存在的所有文档检索到 Meilisearch 数据集中。有关更多信息，请查阅我们的 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>