2022 年 6 月 29 日

使用 Firebase 和 Meilisearch 创建搜索界面

本教程将介绍如何使用 Meilisearch 的 Firebase 扩展轻松创建搜索界面。此扩展使您可以在 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 项目

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

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

创建项目

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

您现在应该在您的 Firebase 帐户上有一个项目，看起来有点像这样

A look at a fresh new Firebase account settings

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

安装 Meilisearch 扩展

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

⚠️ 结算

要安装扩展程序，您的 Firebase 项目必须使用特殊的结算方案，该方案每月至少向您收取 1 美分。

安装并授权 `firestore-meilisearch`

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

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

早期访问合作伙伴扩展：在“扩展发布者早期访问计划”下找到 firestore-meilisearch，选择它，然后单击“下一步”
查看结算和使用情况：Firebase 会告知您使用扩展程序产生的费用，我们建议您仔细阅读。如果 Firebase 提供了该选项，请单击“更新项目以继续”；否则，请单击“下一步”
查看已启用的 API 和创建的资源：Firebase 还会为您提供有关 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>