如何使用 Meilisearch 將相關搜尋功能加入您的 Strapi 應用程式
透過這份（幾乎）無需程式碼的教學課程，使用 MeiliSearch 搜尋您的 Strapi 集合
本指南適用於 Strapi v3。如果您使用的是 Strapi v4，請查看這篇文章
隨著網路的發展，越來越多的工具可用來為我們處理複雜的工作。當您只需點擊幾下即可產生 CRUD API 時，為何還要從頭開始建立？當有簡單且有效的解決方案存在時，為何還要費力處理困難的搜尋操作和查詢？
也許我們對新技術感到畏懼，或者擔心在不成功的工具上浪費時間。或者，更有可能的是，我們甚至可能不知道有簡單的解決方案存在。
Meilisearch 的運作方式
本教學課程將以盡可能少的步驟向您展示如何使用 Strapi 和 Meilisearch 來建立基於搜尋的 Web 應用程式。首先，讓我們熟悉一下我們的工具！
介紹我們的工具
Strapi
Strapi 是一個無頭 CMS。它提供了一種快速建立後端的方法，我們可以在其中新增和儲存資料。然後，這些資料會透過 REST API 提供，而無需編寫任何程式碼或設定我們的資料庫。
Meilisearch
Meilisearch 是一個快速、開源的搜尋引擎，易於使用和部署。Meilisearch 的目標是以非常少的步驟且無需任何設定，立即建立相關的搜尋體驗。
需求
為了能夠遵循本教學課程，您需要以下項目
- 開啟終端機或命令提示字元
- Node.js >= 10.16 和 <= 14：這使得可以在瀏覽器外部執行 JS
- 您可以使用命令
node --version檢查活動版本 - 如果您的 Node 版本超出此範圍，我們建議您安裝 nvm 並使用它來存取 Node 14
- 您可以使用命令
- NPM 和 NPX >= 6.x（與 Node.js 一起安裝）：套件管理器，可協助您存取和使用 JS 程式庫
步驟
為我們的應用程式建立目錄
我們不希望我們的應用程式到處都是！讓我們建立一個目錄，我們將在其中新增應用程式的每個部分。
mkdir my-app cd my-app
如果您未使用基於 UNIX 的作業系統，請遵循本指南來建立目錄。
使用 Strapi 建立後端
在本節中，我們將使用 Strapi 建立和執行後端。
我們的第一步是產生 Strapi 應用程式。前往您開啟的終端機視窗並執行以下命令
npx create-strapi-app@3.5.4 back --quickstart
使用 npx，我們執行特定版本的套件，而無需全域安裝它。請注意，本指南可能不適用於其他版本。
此命令會在名為 back 的新目錄中建立 Strapi 應用程式，並開啟管理儀表板。建立帳戶或登入，以便您具有存取權。
如果您隨時遺失此頁面，只需在瀏覽器中前往 https://127.0.0.1:1337/admin
建立帳戶後，您應該會重新導向至 Strapi 的管理儀表板。我們將在此設定我們的後端 API。
我們的下一步是建立新的集合類型 — 在此案例中，它將是一個餐廳集合。完成 Strapi 快速入門指南的步驟 3 以繼續。
管理儀表板登陸頁面
完成Strapi 快速入門指南的步驟 3後，在 集合類型下應該會出現一個名為 餐廳的新集合。如果我們點擊它，我們可以發現仍然沒有餐廳。讓我們新增一些！
餐廳集合登陸頁面
點擊儀表板右上角的 + 新增餐廳。現在讓我們逐一新增三間餐廳
- 名稱：
The Butter Biscotte。描述：關於奶油的一切，與健康無關。 - 名稱：
The Slimy Snail描述：美食是由大蒜和奶油製成。 - 名稱：
The Smell of Blue描述：藍紋起司沒有過期，而是您如何食用。搭配一點奶油和滿滿的幸福。
在「餐廳」集合中建立一個項目。
對於每間餐廳，您都需要按一下 儲存，然後按一下 發佈。新增三間餐廳後，您應該會看到以下頁面
餐廳的主頁，展示我們新增的餐廳
我們的 Strapi 後端現在已啟動並執行！Strapi 會自動為我們的 餐廳集合建立 REST API。請查看 Strapi 的文件以了解所有可用的API 端點。
接下來，是時候將 Meilisearch 加入組合了。
啟動並開始使用 Meilisearch
想要避免本機安裝嗎？請使用我們的 Meilisearch 雲端 14 天免費試用或我們的 在 DigitalOcean 上的一鍵安裝，然後繼續下一節。
如果您走到這一步，您應該已經有一個開啟的終端機視窗在執行 Strapi。如果沒有或您不小心關閉了它，請遵循本指南，前往我們建立的 .../my-app/back 目錄，並執行命令 npm run develop 以重新啟動 Strapi。
讓我們花點時間開啟第二個終端機視窗，然後移至 my-app 目錄。此視窗將用於執行 Meilisearch。
在 my-app 內，建立一個名為 meilisearch-binary 的新目錄。
mkdir meilisearch-binary cd meilisearch-binary
建立並移至我們將執行 Meilisearch 的目錄
執行以下命令，在目前目錄中下載 Meilisearch。如果 cURL 對您不起作用，請考慮嘗試其他許多方法下載並安裝 Meilisearch。
# Install Meilisearch curl -L https://install.meilisearch.com | sh
下載並安裝 Meilisearch
我們現在在目錄中有 meilisearch 二進位檔。讓我們執行它！
# Launch Meilisearch ./meilisearch
啟動 Meilisearch
您應該會看到一大段文字（包括一些 ASCII 藝術），確認 Meilisearch 已啟動並執行。
正在執行 Meilisearch
尋找標題為 Server listening on 的行。這讓我們知道 Meilisearch 在哪裡提供服務。找到它之後，在您的瀏覽器中開啟這個地址。
您應該會到達一個沒有太多內容可看的網頁。
沒有索引的 Meilisearch Web 介面
這是 Meilisearch 的Web 介面。在我們將一些資料新增至我們的 Meilisearch 執行個體之前，它將保持空白。
您說資料？恰巧我們已經在 Strapi 應用程式中有一些資料了！是時候將這兩者連線起來，並開始使用 Meilisearch 搜尋我們的資料了。
連線 Strapi 和 Meilisearch
為了將 Meilisearch 外掛程式新增至 Strapi，我們需要結束 Strapi 應用程式。前往執行 Strapi 的終端機視窗（請確定不是執行 Meilisearch 的視窗！），然後按下 control + c 以終止程序。
完成後，移至 back 目錄內並安裝外掛程式。
cd back npm install strapi-plugin-meilisearch
安裝完成後，我們必須重建 Strapi 應用程式，才能在開發模式下再次啟動它，因為這樣可以更方便地進行配置。
npm run build npm run develop
此時，我們的 Strapi 應用程式應該會再次在預設位址上執行：https://127.0.0.1:1337/admin/。在瀏覽器中造訪該網址，您應該會看到管理員登入頁面；輸入和之前相同的憑證即可。
連線後，您應該會在畫面左側看到一個新的 Plugin（外掛）：Meilisearch！讓我們點擊它。
進入 Meilisearch 外掛頁面後，我們可以看見資訊分成兩個部分
- Meilisearch 憑證
- Strapi 集合
Strapi 管理儀表板的 Meilisearch 外掛頁面
首先，我們需要新增 Meilisearch 實例的憑證，以便 Strapi 知道將資料傳送到哪裡。
您可能還記得先前的步驟，Meilisearch 預設在 https://127.0.0.1:7700 上執行。將此位址新增到 Meilisearch Host 欄位，然後點擊 Add（新增），將您的 Meilisearch 實例連線到 Strapi。
將憑證新增至 Meilisearch。
請注意，我們將
Meilisearch Api Key留空，因為我們在啟動 Meilisearch 時沒有使用主金鑰。
太棒了！現在該將您的 Strapi 集合新增至 Meilisearch 了。
嘗試點擊 restaurant 旁的核取方塊，並觀察 Meilisearch 如何立即開始處理您的資料。因為我們只有三個文件，索引編製時間幾乎不存在。
將餐廳新增至 Meilisearch
現在我們可以回到我們的 Meilisearch 主機位址：https://127.0.0.1:7700。重新整理後，您應該會發現該頁面不像之前那麼空了。
Meilisearch 的示範頁面
我們成功了！嘗試輸入「butter」並查看結果。
前端介面
使用 instant-meilisearch，您可以立即在 React、Vue 或 Angular 中實作前端搜尋介面。
這是一個互動式的 程式碼沙箱（在 React 中），您可以在其中感受不同元件的功能。您不會破壞任何東西，所以請隨意試用！
結論
我希望這篇文章能為您帶來愉快的 Strapi 的新 Meilisearch 外掛入門體驗。然而，這僅僅是個開始！
如果您有任何疑問，請加入我們的 Discord。如果您喜歡 Meilisearch，在 GitHub 上點個星星對我們來說意義重大。如需更多資訊，請參閱我們的
如何將 AI 驅動的搜尋功能新增至 React 應用程式
使用 Meilisearch 的 AI 驅動搜尋功能建立 React 電影搜尋和推薦應用程式。
使用 Blazity 建立您的 Next.js Shopify 商店前台
學習使用 Next.js 和 Blazity 商業入門套件建立 Shopify 商店前台。
