使用 Firebase 和 Meilisearch 创建搜索界面
本教程讲解如何使用 Meilisearch 的 Firebase 扩展轻松创建搜索界面。此扩展允许您在 Cloud Firestore 文档中运行全文搜索。
简介
如果说 Firebase 缺少一项功能，那就是一种良好而高效的数据搜索方式。他们的文档建议使用第三方解决方案
"Cloud Firestore 不支持对文档中的文本字段进行原生索引或搜索。[...] 要对您的 Cloud Firestore 数据启用全文搜索，请使用专用的第三方搜索服务。"
Firestore-meilisearch是 Meilisearch 的官方 Firebase 扩展，它在 Cloud Firestore 集合和 Meilisearch 索引之间同步文档，并监控您每次在该索引中创建、更新或删除文档的操作。这确保了 Meilisearch 中的数据与您在 Cloud Firestore 中的内容保持一致，从而有效地使您能够创建功能齐全的搜索体验。
在本教程中，我们将向您展示如何在 Firebase 实例上安装 firestore-meilisearch 扩展并为您的 Cloud Firestore 添加全文搜索功能。
工具
- Firebase：Firebase 是 Google 开发的平台，旨在帮助开发者创建移动和网络应用程序。它是一个完全托管的后端服务，为网络应用程序提供基础设施，处理从用户身份验证和服务器扩展到崩溃分析和可靠测试环境的一切事务。
- Meilisearch： Meilisearch 是一款快速、开源的搜索引擎，使用和部署起来都非常方便。Meilisearch 使您能够以极少的步骤和无需任何配置即可开箱即用地创建相关的搜索体验。
要求
要运行此项目，您将需要
步骤
以下是我们将要做的总结，以便通过 Firebase 和 Meilisearch 创建一个漂亮的搜索界面
- 部署 Meilisearch
- 创建一个 Firebase 项目
- 安装 Meilisearch 的 Firebase 扩展程序
- 设置搜索界面
部署 Meilisearch
在本教程中，您需要一个在云服务上运行的 Meilisearch 实例。有多种方法可以部署 Meilisearch 实例。启动 Meilisearch 实例最简单的方法是使用Meilisearch Cloud，它提供 14 天免费试用，无需信用卡。
创建 Firebase 项目
注意：如果您已经有一个包含文档的 Firestore 数据库的 Firebase 项目，则可以跳过此步骤。
一旦我们的 Meilisearch 实例启动并运行，我们就可以创建一个 Firebase 项目，配置它，并添加一个 Firestore 数据库。
创建**一个项目**
按照Firebase 文档开始您自己的项目。
您现在应该在 Firebase 账户上有一个项目，看起来有点像这样
创建 Firebase 账户和项目后，我们需要为项目添加一个 Firestore 数据库。有关更多说明，请参阅Firebase 文档。
安装 Meilisearch 扩展程序
我们现在可以开始在我们的项目中安装 Meilisearch 扩展程序了。
⚠️ 计费
要安装扩展程序，您的 Firebase 项目必须采用特殊计费计划，每月至少会收取 1 美分的费用。
安装并授权 firestore-meilisearch
要在您的 Firebase 项目上安装firestore-meilisearch扩展，只需按照此链接重定向到您的 Firebase 控制台。
选择您要安装扩展程序的项目。然后您将可以访问安装面板。该面板包含三个主要步骤，最后是一个最终的扩展程序配置部分
- 抢先体验合作伙伴扩展程序：在扩展程序发布商抢先体验计划下找到
firestore-meilisearch，选择它，然后单击“下一步” - 查看计费和使用情况：Firebase 将告知您使用扩展程序所产生的费用，我们建议您仔细阅读。如果 Firebase 提供选项，请单击“更新项目以继续”；否则，请单击“下一步”
- 查看启用的 API 和创建的资源：Firebase 还会向您提供有关Cloud Functions的更多信息，这是此扩展程序中我们使用的一组 Firebase 功能。这些说明解释了 Cloud Functions 是如何触发的以及它们的主要功能
配置 firestore-meilisearch
激活 firestore-meilisearch 的第四个也是最后一个步骤是配置它。
- 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 的集合
我们可以使用 Firestore 数据库的访问面板手动添加电影文档
这是我们在示例中使用的数据
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
添加此电影后，您应该能够在访问实例的搜索预览时看到它
干得好！您已成功安装 Meilisearch Firestore 扩展程序！
从现在开始，无论何时您在 Firestore 集合中添加、更新和删除文档，它们都将以相同的方式镜像到您的 Meilisearch 实例中。
此扩展程序不会将所有现有文档导出到 Meilisearch，除非它们是在安装后修改或创建的。您可以运行此扩展程序提供的导入脚本，以便将 Firestore 集合中存在的所有文档检索到 Meilisearch 中。有关更多信息，请查阅我们firestore-meilisearch仓库中的专用指南。
管理您的扩展程序
要访问扩展程序的概览面板，请首先点击 Firebase 侧边栏菜单中的“扩展程序”选项卡，然后找到 Meilisearch 扩展程序并点击“管理”。
您将被引导至一个页面，在那里您可以访问有关您的扩展程序的所有信息，更改其配置，甚至将其删除。
访问您的日志允许您监控您的云函数并获取不同级别的信息。您可以通过“扩展程序”选项卡访问扩展程序的日志。或者，您也可以访问“函数”选项卡，然后选择“日志”，如下图所示。
设置搜索界面
我们已经完成了 firestore-meilisearch 扩展的安装和配置，但如果我们不在实际的前端应用程序中尝试搜索，那就太没意思了。在这个可选部分中，我们将看到如何使用 instant-meilisearch 为您的项目创建搜索栏。
用数据填充您的 Firestore 集合
我们首先需要做的是向我们的 Firestore 数据库添加更多文档。在我们的例子中，我们将使用这个电影集合。有关如何添加和管理数据的更多信息，请查阅 Firebase 文档。
将内容添加到 Firestore 数据库后，访问实例的搜索预览，检查文档是否已成功被 Meilisearch 索引。
在文档中搜索
现在让我们创造一个很棒的搜索体验！有很多方法可以做到这一点，但这次我们将其保持简单，并使用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>
别忘了用您自己的数据替换示例配置。这可能包括 indexName（如果您将索引命名为 movies 以外的名称），您的实例 URL 和您的 API 密钥。
如果一切顺利，您应该能够访问您的 index.html 文件并立即开始搜索
恭喜！您已为 Cloud Firestore 添加了全文搜索功能。只要安装了 firestore-meilisearch 扩展程序，您的 Firebase 集合和 Meilisearch 索引将自动保持同步。
感谢您阅读此简短教程！有任何问题、评论或建议吗？请随时通过 GitHub 与我们联系——相信我们，我们非常重视您的反馈。
Meilisearch 使用二值量化将嵌入索引速度提高7倍
通过在向量存储 Arroy 中实现二值量化，显著减少了大型嵌入的磁盘空间使用和索引时间，同时保持了搜索相关性和效率。
