2023年7月20日

使用 React InstantSearch 实现推广搜索结果

了解如何使用 React InstantSearch Hooks 和 Meilisearch 显示推广结果。

Laurent Cazanove开发者体验工程师StriftCodes

Implementing promoted search results with React InstantSearch

今天，我们将学习如何通过将指定文档固定在搜索结果顶部来推广结果。这可用于电子商务中，以提高特色产品的可见性，或在应用内搜索中优先显示用户特定内容。我们将使用 Node.js 和 React 来实现推广文档。

需要在 Meilisearch 引擎内部使用推广文档吗？提供您的反馈！

本教程将使用电影样本数据集。我们的目标是，当输入“funny”、“children”或“fish”时，让“海底总动员”（Finding Nemo）显示在结果顶部。

文件夹结构

在本指南中，我们将把前端代码与用于配置 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 云上创建帐户。我们将编写一个设置脚本来配置我们的 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 设置了相同的显示属性。
它设置了可搜索属性；只有 keywords 在 promoted-movies 索引中可搜索。
它将文档添加到我们的 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;