Динамические веб-страницы с большим количеством контента обычно сложны для навигации пользователей в поисках конкретных данных. На таких сайтах используется поиск на сайте (также называемый внутренним поиском), который использует строку поиска для возврата результатов поискового запроса, сделанного пользователем. Эта простая реализация обеспечивает релевантный контент, соответствующий потребностям пользователей, экономя время и усилия, затрачиваемые на поиск данных.
- Цели
- Что такое поиск на сайте?
- Почему и когда мы это используем?
- Вот 5 преимуществ добавления функции поиска на сайте
- Что такое Meilisearch?
- Почему вы должны использовать Meilisearch?
- Что такое Strapi CMS?
- Использование Meilisearch в веб-приложении Movies в качестве примера использования
- Настройка фронтенда и Strapi
- Подключение коллекции Strapi
- Установка Meilisearch
- Получение данных из Meilisearch
- Интеграция поисковой функциональности в наше приложение
- Заключение
Цели
В этом руководстве читатели узнают, что такое поиск на сайте, когда его следует использовать, как создать веб-приложение, реализующее функцию поиска с помощью CMS, и каковы его преимущества.
Что такое поиск на сайте?
Как следует из названия, поиск на сайте – это функция поиска на сайте. Он использует строку поиска, в которую пользователь вводит поисковый запрос. На основе запроса в строке поиска данные сайта фильтруются, чтобы предоставить информацию, соответствующую запросу.
Почему и когда мы это используем?
Поисковые системы, такие как Google, располагают огромным количеством информации. Чтобы предоставить релевантные результаты для того, что нужно пользователю, они используют строки поиска для сбора поискового запроса и отображения популярных и связанных с ним результатов. Эту функцию также приятно иметь в качестве качества для веб-приложений, чтобы обеспечить простоту использования для посетителей сайта.
Вот 5 преимуществ добавления функции поиска на сайте
-
Сайты, созданные с функцией поиска на сайте, имеют более высокий коэффициент конверсии. Коэффициент конверсии – это процент пользователей, получивших желаемый результат. Это отношение общего числа посетителей сайта к числу тех, кто смог достичь желаемого результата. С помощью функции поиска пользователи могут быстро получить релевантные результаты и удовлетворить себя, посетив веб-приложение.
-
Сайты с функцией поиска на сайте имеют лучший пользовательский опыт. Пользователи могут легко ориентироваться, искать и извлекать нужную информацию. Независимо от того, насколько хороши функции и информация, предлагаемые сайтом, если пользователи не могут найти их на сайте, это будет пустой тратой времени. Для повышения удобства пользования сайтом необходима функция создания поисковых запросов и просмотра соответствующих результатов поиска.
-
Поиск на сайте снижает количество неудовлетворенных посетителей. Когда посетители заходят на ваши веб-страницы, они в основном хотят быстро найти нужную информацию. Если на вашем сайте плохо работает функция поиска, вы рискуете потерять посетителей сайта и получить разочарованных пользователей, которые с меньшей вероятностью вернутся на ваш сайт.
-
Сайты электронной коммерции, представляющие различные категории, могут использовать функцию поиска на сайте для предоставления информации о товарах и услугах, схожих с поисковым запросом пользователя. Эти рекомендации могут предложить пользователям похожие продукты, которые могут их заинтересовать.
-
Поиск на сайте может улучшить SEO сайта. Хорошая функциональность поиска и отличный пользовательский опыт обеспечивают релевантные результаты поиска. Когда ваш сайт занимает хорошие позиции в поисковых запросах посетителей, это улучшает SEO вашего сайта и повышает его рейтинг в поисковых системах.
Что такое Meilisearch?
Meilisearch – это поисковая система с открытым исходным кодом, которая может быть легко интегрирована в веб-приложения для работы с функциями поиска. Meilisearch Strapi Plugin – это поисковый плагин, который может быть подключен к Strapi CMS для фильтрации информации о магазине и предоставления релевантных/связанных результатов по поисковому запросу, введенному в поле поиска.
Почему вы должны использовать Meilisearch?
-
Его легко настроить: Meilisearch легко вписывается в ваше приложение. С помощью нескольких шагов эта функция поиска может быть интегрирована в ваше приложение.
-
Гибкость: Meilisearch легко обновляется, отражая изменения в источнике данных, например, когда добавляются новые данные или изменяется уже существующая информация.
-
Он быстрый и устойчивый к опечаткам: Meilisearch предлагает быстрые результаты поиска и имеет функцию учета ошибок, допущенных пользователями. Даже если пользователь допустил ошибку в поисковом запросе, он все равно получит релевантные результаты.
-
Безопасность данных: Данные, связанные с Meilisearch, надежно защищены и могут быть доступны только при наличии правильных учетных данных API.
Что такое Strapi CMS?
Strapi – это безголовая система управления контентом с открытым исходным кодом, разработанная с использованием Javascript-фреймворка Node.js. Strapi предоставляет пользователям возможности для хранения, манипулирования и управления контентом в рабочих процессах приложений. Она проста и удобна в использовании. Strapi предоставляет пользователям административную панель, где они могут контролировать и управлять своим контентом.
Использование Meilisearch в веб-приложении Movies в качестве примера использования
Настройка фронтенда и Strapi
Чтобы быстро продолжить этот учебник, вам нужно получить начальный код веб-приложения для фильмов. Фронтенд можно найти в репозитории GitHub. Вы также можете получить стартовый шаблон Strapi с некоторыми коллекциями фильмов из следующего репозитория.
Если вы запустите стартовый код front-end в терминале с помощью команды npm run dev, вы получите результат, подобный изображению ниже:
Стартовый код состоит из четырех компонентов: Movies.js, Nav.js, List.js и Card.js. Компонент Movies.js рендерит компоненты Nav и List. Компоненты Nav содержат строку поиска, которую мы свяжем с плагином meilisearch позже в этом руководстве. Компонент List будет возвращать данные из коллекций Strapi в виде карточек. Эти карточки будут содержать изображение, название фильма и жанр.
Подключение коллекции Strapi
Чтобы подключить приложение к коллекции Strapi CMS, нам нужно будет получить данные из Strapi, просмотреть их и вернуть карточки с соответствующими деталями. Но перед этим обратите внимание, что мы должны будем возвращать только результаты, соответствующие запросу в строке поиска, и возвращать всю коллекцию только в том случае, если поисковый ввод пуст. Для этого нам потребуется установить meilisearch и интегрировать функциональность поиска.
Установка Meilisearch
Чтобы использовать Meilisearch локально, мы загрузим и запустим его экземпляр. Его можно загрузить с сайта Meilisearch. Затем мы установим плагин Strapi-meilisearch в клонированное стартовое репо Strapi с помощью следующей команды CLI:
npm install strapi-plugin-meilisearch
После этого мы запускаем npm run develop, чтобы пересобрать наше приложение Strapi с новым плагином meilisearch. Откройте URL-адрес localhost в браузере и войдите в систему. Вы будете направлены на приборную панель Strapi:
Нажмите на опцию meilisearch в левой навигационной панели и на вкладке “Настройки” введите URL-адрес экземпляра meilisearch.
Наконец, добавьте коллекцию фильмов в meilisearch в окне “Коллекции”:
Таким образом, если мы запустим наш экземпляр meilisearch, мы получим коллекции Strapi.
Получение данных из Meilisearch
Чтобы вернуть коллекцию Strapi в наше приложение, нам нужно установить meilisearch js с помощью следующей команды в CLI:
npm install meilisearch
Далее мы добавим импорт для этой зависимости в Movies.js:
import { React, useEffect, useState } from "react";
import MeiliSearch from "meilisearch";
const Movies = () => {
const [collection, setCollection] = useState([]);
useEffect(() => {
const fetchData = async () => {
const client = new MeiliSearch({
host: 'http://127.0.0.1:7700',
})
const index = await client.getIndex('moviesapp');
const movies = await index.search('*');
setCollection(movies.hits);
};
fetchData();
}, []);
//....
Приведенный выше код возвращает все фильмы из нашей Strapi CMS, полученные через экземпляр meilisearch. Чтобы отобразить наши Cards, мы передаем collection в качестве prop компоненту List, отображаем его и возвращаем данные:
<List collection={collection}/>
Затем в List.js:
// we pass the collection prop to the Cards component to render it
const List = ({collection}) => {
return (
<div className="w-full flex justify-center">
<div className=" w-5/6 px-6 pt-24 grid grid-cols-3 gap-2">
<Cards collection={collection} />
</div>
</div>
);
};
Наконец, мы можем просмотреть коллекцию collection в Cards.js:
const Cards = ({collection}) => {
return (
<>
{collection && collection.map((movie) => (
console.log(movie.image.url),
<div className=" text-white" key={movie.id}>
<Image
className=" rounded-md"
src={`http://localhost:1337${movie.image.url}`}
height="300px"
width="200px"
alt="image here"
/>
<h2 className=" font-semibold">{movie.moviename}</h2>
<h3 className=" opacity-50">{movie.genre}</h3>
</div>
))}
</>
);
};
После этого, когда мы запустим наш код, мы получим результат, подобный изображенному ниже:
Интеграция поисковой функциональности в наше приложение
Нам нужно будет возвращать только результаты, связанные с поисковым запросом в поле ввода для функции поиска. Мы просто передадим входные данные поиска из компонента Nav в компонент Movies и добавим их в функцию fetchData.
В Movies.js мы создадим функцию, которая будет возвращать значение поля поиска:
const [input, setInput] = useState("");
// use effect block
const pull_data =(dat)=>{
setInput(dat)
}
Затем мы передадим функцию pull_data компоненту Nav:
<Nav func={pull_data}/>
В Nav.js мы передадим значение из поля ввода в этот реквизит:
const Nav = ({func}) => {
const [input, setInput] = useState("");
func(input)
const handleInputChange = (e) => {
setInput(e.target.value);
};
//....
После этого останется добавить input в функцию fetchData в Movies.js:
const index = await client.getIndex('moviesapp');
const movies = await index.search(input);
setCollection(movies.hits);
};
fetchData();
}, [input]);
Теперь мы можем ввести поисковый запрос и получить только результаты, связанные с ключевыми словами поиска.
Заключение
Мы подошли к концу этого урока. В этом уроке мы узнали о поиске на сайте и его преимуществах. Мы также интегрировали функцию поиска в приложение для просмотра фильмов с помощью Meilisearch. С помощью функции Meilisearch мы можем искать в коллекции фильмов как по названию фильма, так и по жанру. Она также легко отражает изменения в коллекции Strapi, например, удаление или добавление новой записи.