大家好!如你们中有些人所知,我最近加入了 Meilisearch 担任开发者倡导者。我的工作职责之一是通过回答问题来帮助社区,因此,在过去几个月里,我的首要任务是了解 Meilisearch。我认为学习新软件的最佳方法是像任何开发者一样使用它:构建一些东西。所以,我开始制作一个演示。

👉
这个演示是在 Meilisearch 最新版本为 v0.19 时创建的,由于在 Meilisearch 的更新版本中添加了新功能,因此本博文描述的某些变通方法现在不再需要。

Meilisearch x MoMA

第一步是找到一个我喜欢使用的不错的数据集。在尝试驯服一些非结构化数据集好几次都没有成功之后,我偶然发现了现代艺术博物馆 (MoMA) 的仓库。真是幸运的发现!他们有两个数据集:艺术家和艺术品。我决定选择艺术品数据集,因为它包含了每件艺术品的必要信息:标题、艺术家、尺寸、媒介,甚至艺术家传记。但最棒的是它以 JSON 格式提供!无需转换,无需恢复 MongoDB 备份,无需抓取:Meilisearch 就绪 😀

我使用Meilisearch JavaScript 创建索引、添加文档并自定义设置。对于前端,我决定使用Instant Meilisearch 结合Vue InstantSearch,如meilisearch-vue 仓库 中所述。我有点懒,所以如果我找到一个能毫不费力地提供良好结果的工具,我就会使用它!幸运的是,InstantSearch 提供了所有前端工具,可以随意自定义搜索环境,因此您可以通过几行代码体验 Meilisearch 的强大功能及其边输入边搜索功能。最后,我尝试添加一些像样的样式,但这并非我的强项 😅 我提前为视觉设计道歉!

您可以在这里查看结果

Web interface with searchbar and results for the query "Picasso"

解决问题

因此,我找到了一个数据集,在 Meilisearch 实例中建立了索引,并为搜索设置了前端。全部完成了,对吧?不完全是;现在到了迭代并使搜索结果变得更好的时候了。

我很幸运地找到了一个结构化的 JSON 数据集,它与 Meilisearch 无缝协作。尽管如此,我仍然需要进行一些小的更改以更好地显示结果。由于 Meilisearch 的自动高亮显示 不适用于存储在数组中的查询结果,因此我必须在添加之前将数组值转换为字符串

我还想让用户按日期对结果进行排序。由于日期字段没有标准格式,我不得不检索年份并将其存储在一个新的 `sortByDate` 字段中。然后出现另一个问题:Meilisearch 不支持在查询时进行排序(至少,现在还不行)!为了规避这种情况并实现此功能,我创建了另外两个索引,并使用自定义排名规则 desc(DateToSortBy) 和 asc(DateToSortBy)。每次您在下拉菜单中更改排序选项时,Meilisearch 实际上是在完全不同的索引中进行搜索,但它的速度非常快,以至于人类无法察觉到这种变化 🤯

在这里您可以看到排序的实际操作

Web interface with the query "Picasso" sorting by ascending and then descending date gif

🧐 您可能已经注意到我说 Meilisearch 尚未支持查询时排序——这是因为它是在我们的公开路线图 上最受请求的功能之一,并且现在正在考虑中 🥳 因此,如果您还没有这样做,请查看 Meilisearch 的路线图,并为您最喜欢的功能投票或提交您自己的想法!👉 更新说明:查询时排序功能在 Meilisearch v0.22 中发布。

创建此演示最具挑战性的部分是处理一个包含 138,151 个文档的未知数据集,因为大量文档使得难以知道不同字段的可能值和长度。我最初希望用户能够按 `medium`(例如 “摄影” 或 “绘画”)筛选结果。直到我意识到一些艺术品的 `medium` 字段很长!例如,请看这个

"H(第九卷):封面带有 Kliun 在正面用石版印刷的书写文本;1 个 Terent'ev 用石版印刷的插图;石版印刷的书写文本。L(第十三卷):封面带有 Kirill Zdanevich 在正面用石版印刷的插图和书写设计;石版印刷的书写文本和打字文本。M(第十四卷):封面带有 Kirill Zdanevich 在正面用石版印刷的书写设计和插图;石版印刷的书写文本和打字文本。P(第十七卷):封面带有 Goncharova 在正面用石版印刷的书写设计;以及 Mikhail Pustynin 和 Olga Olesha-Suok 用石版印刷的书写文本"

你能想象将它作为分面筛选 吗?这对 UI 来说不太好…

接近完美

制作此演示最轻松的部分是设置 Meilisearch。一旦我决定哪些属性应该显示可搜索,剩下的就变得轻而易举。除了上面提到的高亮显示和排序问题之外,我最后更改的是属性排名顺序。默认情况下,属性排名顺序是根据索引的第一个文档中属性的出现顺序自动生成的。在我的例子中,第一个属性是 `title`,这意味着在 `title` 字段中匹配查询词的艺术品位于结果列表的顶部。这提供了不错的结果,但我确信我可以做得更好。

我不仅需要考虑哪些属性对于这个特定数据集最重要;我还必须考虑哪些类型的查询更有可能被使用。如果用户使用其标题查询特定的艺术品,他将获得相关结果,因为所使用的词语不太可能在其他许多字段中找到。但是,如果用户查询一位著名艺术家的姓名,很有可能在艺术品标题中找到该姓名,例如作为一种致敬。因此,我决定将 `artist` 放在可搜索属性列表 的顶部。在我进行更改之前,您会在搜索 “梵高” 时找到以下结果

Information and image of a litograph called "Do You Leave without seeing the 150 Van Gogh's" by Willem Jacob Henri Berend Sandberg

如您所见,这是一件由一位名为 Willem Jacob Henri Berend Sandberg 的艺术家创作的艺术品,其标题中出现了 “梵高” 的名字,但它不是真正的梵高作品。

现在,在更改了设置 中的可搜索属性顺序之后,第一个结果是真正由文森特·梵高创作的一件艺术品

Information and image of the litograph "The Potato Eaters" by Vincent van Gogh


这种简单的更改如何影响搜索结果真是太神奇了。Meilisearch 非常适合开箱即用,但它允许您根据自己的需求调整结果的相关性,这对于为最终用户提供绝佳体验至关重要。

开源博物馆体验

演示源代码可在GitHub 上获得。随意玩一玩,向我展示您的实力!😁

我们能够访问这个非凡的目录真是太棒了!感谢 MoMA 的慷慨,您可以从世界任何地方探索博物馆。现在,感谢 Meilisearch,它距离我们只有 50 毫秒 🚀


照片由Robert ByeUnsplash 上拍摄