Meilisearch：一片空白的畫布

大家好！如你們有些人可能知道的，我最近加入了 Meilisearch 擔任開發人員倡導者。我的工作之一是透過回答問題來幫助社群，因此過去幾個月我的首要任務是了解 Meilisearch。我認為學習新軟體的最佳方式是像任何開發人員一樣使用它：建立東西。因此，我著手製作一個演示。

Meilisearch x MoMA

第一步是找到我喜歡使用的好資料集。在多次嘗試馴服一些非結構化資料集失敗後，我偶然發現了現代藝術博物館 (MoMA) 的儲存庫。真是幸運的發現！他們有兩個資料集：藝術家和藝術品。我決定選擇藝術品資料集，因為它包含每件藝術品的所有基本資訊：標題、藝術家、尺寸、媒材，甚至是藝術家的傳記。但最棒的是它以 JSON 格式提供！無需轉換、無需還原 MongoDB 轉儲、無需抓取：Meilisearch 準備好了 😀

我使用 Meilisearch JavaScript 來建立索引、新增文件並自訂設定。對於前端，我決定使用 Instant Meilisearch，並結合 Vue InstantSearch，如meilisearch-vue 儲存庫中所述。我有點懶，所以如果我找到一個可以輕鬆提供良好結果的工具，我就會使用它！幸運的是，InstantSearch 提供了所有前端工具，可以隨意自訂搜尋環境，因此您只需幾行程式碼即可體驗 Meilisearch 的強大功能及其隨打即搜功能。最後，我嘗試新增一些像樣的樣式，但這不是我的強項 😅 我預先為視覺設計道歉！

您可以在 這裡查看結果。

解決問題

因此，我找到了一個資料集，將其索引到 Meilisearch 實例中，並為搜尋設定了前端。一切都完成了，對嗎？不完全是；現在是時候反覆運算並讓搜尋結果感覺良好了。

我很幸運地找到了一個結構化的 JSON 資料集，它可以輕鬆地與 Meilisearch 協同工作。儘管如此，我還是必須做一些小的更改才能更好地顯示結果。由於 Meilisearch 的自動醒目提示不適用於儲存在陣列中的查詢結果，因此我必須在新增它們之前將陣列值轉換為字串。

我也想讓使用者依日期排序結果。由於日期欄位沒有標準格式，我必須檢索年份並將其儲存在新的 `sortByDate` 欄位中。然後又出現了另一個問題：Meilisearch 不支援在查詢時排序（至少目前還不支援）！為了規避這個問題並實作此功能，我使用自訂排名規則 desc(DateToSortBy) 和 asc(DateToSortBy) 建立了另外兩個索引。每次您在下拉式選單中變更排序選項時，Meilisearch 實際上是在完全不同的索引中搜尋，但它速度如此之快，以至於人眼無法察覺到變化 🤯

您可以在這裡看到排序的作用

🧐 您可能已經注意到我說 Meilisearch 尚未支援查詢時排序—那是因為它是我們公開路線圖上最受歡迎的功能之一，而且現在正在考慮中 🥳 因此，如果您尚未執行此操作，請查看 Meilisearch 的路線圖，並為您最喜歡的功能投票或提交您自己的想法！👉 更新說明：查詢時排序已在 Meilisearch v0.22 中發佈。

建立此演示中最具挑戰性的部分是使用 138,151 份文件的未知資料集，因為大量的文件使我們難以了解不同欄位的可能值和長度。我首先希望使用者能夠依據 `medium`（例如，「照片」或「繪畫」）來篩選結果。直到我意識到某些藝術品的 `medium` 欄位長達數行！例如，以這個為例

「H（第 IX 卷）：封面正面有 Kliun 的平版印刷手稿文字；Terent'ev 的 1 幅平版印刷插圖；平版印刷手稿文字。L（第 XIII 卷）：封面正面有 Kirill Zdanevich 的平版印刷插圖和手稿設計；平版印刷手稿和打字文字。M（第 XIV 卷）：封面正面有 Kirill Zdanevich 的平版印刷手稿設計和插圖；平版印刷手稿和打字文字。P（第 XVII 卷）：封面正面有 Goncharova 的平版印刷手稿設計；以及 Mikhail Pustynin 和 Olga Olesha-Suok 的平版印刷手稿文字」

您可以想像將其作為切面篩選器嗎？對使用者介面來說不太好吧…

接近完美

製作此演示中最簡單的部分是設定 Meilisearch。一旦我決定要顯示和可搜尋的屬性，其餘的就輕而易舉了。除了上面提到的醒目提示和排序問題外，我最後修改的是屬性排名順序。預設情況下，屬性排名順序會根據第一個索引文件中屬性出現的順序自動產生。就我而言，第一個屬性是 `title`，這表示 `title` 欄位中具有匹配查詢詞的藝術品在結果清單中名列前茅。這提供了不錯的結果，但我很確定我可以做得更好。

我不僅要考慮哪些屬性對於這個特定資料集最重要；我還必須思考哪些類型的查詢更有可能被提出。如果使用者使用其標題查詢特定藝術品，他將獲得相關結果，因為使用的詞不太可能在許多其他欄位中找到。但是，如果使用者查詢一位著名藝術家的姓名，則很有可能在藝術品標題中找到該姓名，例如作為致敬。所以我決定將 `artist` 放在可搜尋屬性清單的最上方。在我進行變更之前，當搜尋「梵谷」時，您會在最先出現的結果中發現以下內容

如您所見，這是一件由藝術家威廉·雅各布·亨利·貝倫德·桑德伯格創作的藝術品，標題中出現了「梵谷」的名字，但它並非真正的梵谷作品。

現在，在更改了設定中可搜尋屬性的順序後，第一個結果確實是文森·梵谷創作的藝術品。

像這樣一個簡單的更改就能影響搜尋結果，真是太神奇了。Meilisearch 開箱即用就具有高度相關性，但它也讓您可以根據自己的需求調整搜尋結果的相關性，這對於為終端使用者提供絕佳體驗至關重要。

開源博物館體驗

演示原始碼可在GitHub上取得。歡迎隨意玩玩，並讓我看看你能做出什麼！😁

我們能夠存取這個非凡的目錄，是不是很酷？感謝 MoMA 的慷慨，您可以從世界任何地方探索博物館。現在，感謝 Meilisearch，它僅在 50 毫秒之外 🚀

---

照片由 Robert Bye 在 Unsplash 上提供