使用 React InstantSearch 实现推广搜索结果
了解如何使用 React InstantSearch Hooks 和 Meilisearch 显示推广的结果。
今天,我们将学习如何通过将给定文档置于搜索结果顶部来推广结果。这可以用于电子商务中,以提高特色产品的知名度,或在应用内搜索中优先考虑用户特定的内容。我们将使用 Node.js 和 React 来实现推广文档。
需要在 Meilisearch 引擎内部推广文档吗? 提供您的反馈!
本教程将使用示例电影数据集。我们的目标是在输入“funny”、“children”或“fish”时,将“海底总动员”显示在结果的顶部。
文件夹结构
在本指南中,我们将前端代码与用于配置 Meilisearch 的后端代码分开。
我们将使用以下文件夹结构来组织我们的项目
my-app/ ├─ node_modules/ ├─ data/ <-- Backend code goes there │ ├─ setup.js │ ├─ movies.json │ ├─ promoted-movies.json ├─ src/ <-- React code will go there │ ├─ App.jsx │ ├─ main.js │ ├─ ... ├─ package.json
首先,为我们的应用程序创建一个目录(例如 my-app
),或使用现有的目录。在我们的应用程序目录中,让我们为后端代码创建一个 data
文件夹。
下载 JSON 数据集并将它们存储在我们新的 data
文件夹中。在此处下载数据集
电影 (“下载”)
推广的电影 (“下载”)
好的。让我们开始编码!
Meilisearch 设置
首先,我们需要启动一个 Meilisearch 实例。您可以通过遵循本地安装指南中的说明或在 Meilisearch Cloud 上创建一个帐户来实现。我们将编写一个设置脚本来配置我们的 Meilisearch 实例并种子数据。
此设置脚本使用 JavaScript SDK,但您可以使用任何 Meilisearch SDK。
在本教程中,我们使用 Node 18。让我们安装 JavaScript SDK
npm install meilisearch
然后,让我们创建一个 setup.js
文件
// data/setup.js import { MeiliSearch } from 'meilisearch' // Load the datasets import movies from './movies.json' assert { type: 'json' } import promotedMovies from './promoted_movies.json' assert { type: 'json' } // Load credentials from environment const credentials = { host: 'your Meilisearch host', apiKey: 'your Meilisearch Admin API key' } // Configuration const INDEX_NAME = 'movies' const PROMOTED_INDEX_NAME = `promoted-${INDEX_NAME}` const searchableAttributes = ['title', 'overview', 'genre', 'release_date'] const displayedAttributes = ['id', 'title', 'overview', 'genre', 'poster', 'release_date'] const setup = async () => { console.log('🚀 Seeding your Meilisearch instance') const client = new MeiliSearch(credentials) // Adding searchable attributes to movies index client.index(INDEX_NAME).updateSearchableAttributes(searchableAttributes) // In the promoted movies index, only `keywords` is searchable client.index(PROMOTED_INDEX_NAME).updateSearchableAttributes(['keywords']) // Both indexes have the same visible attributes // `keywords` is hidden in the promoted movies index client .index(INDEX_NAME) .updateDisplayedAttributes(displayedAttributes) client .index(PROMOTED_INDEX_NAME) .updateDisplayedAttributes(displayedAttributes) // Adding documents await client.index(INDEX_NAME).addDocuments(movies) await client.index(PROMOTED_INDEX_NAME).addDocuments(promotedMovies) // Wait for tasks completion await watchTasks(client, INDEX_NAME) await watchTasks(client, PROMOTED_INDEX_NAME) } // Helper to watch tasks const watchTasks = (client, uid) { console.log(`Watching tasks on index ${uid}`) const tasks = await client.index(uid).getTasks() console.log(`${uid} index: waiting for tasks`) await client.index(uid).waitForTasks(tasks) console.log(`${uid} index: tasks finished`) } await setup()
此脚本创建我们的两个索引。让我们回顾一下它做了什么
- 它为
movies
和promoted-movies
设置相同的显示属性。 - 它设置可搜索属性;在
promoted-movies
索引中,只有keywords
是可搜索的。 - 它将文档添加到我们的 Meilisearch 索引中。
为了 [优化索引速度](/blog/best-practices-for-faster-indexing/,请在配置设置之后始终添加文档。
我们现在可以使用 Node.js 运行该脚本
node setup.js
我们的 Meilisearch 实例现在已配置和种子。🥳 现在是时候使用 React 实现推广的结果了!
显示推广的结果
首先,我们将导航回应用程序的根目录(例如,my-app)。我们将使用 Vite 在此文件夹中创建 React 应用程序。
npm create vite@latest . --template react
如果 CLI 要求删除当前目录中的现有文件,请回答“否”。
然后,让我们安装其他依赖项,以便将 InstantSearch 与 Meilisearch 集成
npm install @meilisearch/instant-meilisearch react-instantsearch-hooks-web
让我们编辑我们的 App 组件以显示搜索结果。我们希望推广的结果显示在其余结果之前。让我们用我们自己的代码替换 App.jsx
样板代码
// src/App.jsx import { instantMeiliSearch } from '@meilisearch/instant-meilisearch' import { InstantSearch, SearchBox, Hits, Index } from 'react-instantsearch-hooks-web'; const MEILI_HOST = 'your Meilisearch host' const MEILI_SEARCH_KEY = 'your Meilisearch Search API key' const meilisearchClient = instantMeiliSearch(MEILI_HOST, MEILI_SEARCH_KEY) const App = () => ( <div> <h1>Hello React</h1> <InstantSearch searchClient={meilisearchClient}> <SearchBox /> <h2>Results</h2> <Index indexName='promoted-movies'> <Hits /> </Index> <h2>More results</h2> <Index indexName='movies'> <Hits /> </Index> </InstantSearch> </div> ); export default App;
我们现在可以使用 npm run dev
运行开发服务器。在浏览器中,我们的应用程序应显示如下内容
在其他结果之前显示推广的结果
恭喜。我们已成功地在其余结果之前显示了我们的推广结果。🎉
遇到困难?请随时在我们的 Discord 社区中寻求帮助。
进一步发展
本教程探讨了实现推广结果的一种方法。另一种技术是在后端实现文档置顶,使用 Meilisearch SDK 之一。这种方法的好处是允许在单个响应中合并结果(就像它们来自单个索引一样)。
两种技术都可以实现类似的结果。我们还计划将推广的文档集成到 Meilisearch 引擎中。在之前的链接中提供您的反馈,以帮助我们优先处理它。
如需了解更多 Meilisearch 的信息,您可以订阅我们的新闻简报。您可以通过查看 路线图 并参与我们的 产品讨论来了解更多关于我们产品的信息。
如有其他任何问题,请加入我们在 Discord 上的开发者社区。
我会在那里见到您。