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”时，将“海底总动员”显示在结果的顶部。

文件夹结构

在本指南中，我们将把前端代码与用于配置 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 都设置了相同的 displayed attributes。
它设置了 searchable attributes；只有 keywords 在 promoted-movies 索引中是可搜索的。
它将文档添加到我们的 Meilisearch 索引中。

为了优化索引速度，请始终在配置设置之后添加文档。

我们现在可以使用 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;