Сегодня многим приложениям требуется мгновенный поиск, чтобы помочь пользователям перемещаться по их приложениям и позволить им быстро и легко находить информацию, которую они ищут. Например, когда вы вводите текст в Google и на многих других сайтах, вы автоматически получаете предложения поиска по мере ввода. С помощью React Instant Search, инструмента, который мы создадим в этом руководстве, вы можете легко добавить возможности поиска в свое приложение!
React Instant Search сочетает в себе как React, популярную библиотеку JavaScript для создания пользовательских интерфейсов, так и Algolia, мощный API, который позволяет легко внедрять поисковую систему в ваши приложения, чтобы обеспечить пользователям возможность мгновенного поиска.
В этом руководстве вы узнаете, как создать базовое приложение React и использовать Algolia для добавления поиска в свое приложение.
Перед началом работы вам следует…
- Имейте некоторые знания React: если вы новичок в React или хотите освежиться, я бы посоветовал пройти это руководство, прежде чем вы начнете.
- Установите на вашем компьютере npm или yarn (или другой менеджер пакетов). В этом руководстве мы будем использовать npm, но подойдет любой менеджер пакетов!
- На компьютере установлена Node 8.10 или выше.
Шаг 1. Создайте приложение React
Facebook предоставляет модуль узла под названием create-response-app, который является стандартной версией приложения React. Мы будем использовать этот модуль для настройки нашего приложения для реагирования!
Для начала откройте терминал и выполните следующую команду, чтобы создать новое приложение:
npm init react-app <enter_app_name>
Если он успешно запустится, вы увидите список команд, которые сообщают вам, как использовать приложение, например npm start или npm run build. Если на начальном этапе возникнут ошибки, вы захотите проверить установку и разрешения узла.
Затем мы перейдем в каталог приложения и запустим приложение с помощью следующих команд:
cd <enter_app_name> npm start
Это должно автоматически открыть веб-страницу, которая направлена на http: // localhost: 3000 /. Если этого не произошло, перейдите прямо по этому URL-адресу.
Веб-страница должна выглядеть следующим образом:
Затем мы можем просмотреть файлы и компоненты, которые фактически составляют этот проект, перечислив компоненты каталога с помощью команды ls. Во вновь созданном каталоге проекта мы видим, что приложение create-react-app сгенерировало исходную структуру проекта и установило все транзитивные зависимости. Не закрывая терминал, мы можем использовать текстовый редактор, чтобы открыть важный файл src / App.js.
Этот код находится в JSX. JSX позволяет комбинировать синтаксис XML с JavaScript в React и помогает определить, как должен выглядеть пользовательский интерфейс в React. Вы можете поиграть с редактированием этого кода и увидеть изменения в реальном времени в браузере.
Другой важный файл - public / index.html. Единственное, что нам нужно изменить в этом файле, - это добавить таблицу стилей. Мы будем использовать базовую таблицу стилей Algolia, но не стесняйтесь использовать другие руководства по стилю. Добавьте эту строку кода в файл HTML, чтобы включить эту таблицу стилей:
В этом разделе мы настраиваем базовый проект React. Теперь перейдем к интеграции поиска в приложение!
Шаг 2. Подключите приложение React к Algolia
Первое, что нам нужно сделать, это установить React InstantSearch. Вернитесь к своему терминалу и еще раз перейдите в каталог своего приложения. Выполните следующую команду, чтобы установить функцию поиска.
npm install react-instantsearch-dom
Если это успешно установлено, вы должны увидеть это сообщение в своем терминале:
Из только что установленного пакета мы собираемся добавить компонент ‹InstantSearch›, который будет подключаться к Algolia и синхронизировать все его дочерние элементы (виджеты поиска) вместе.
Для этого нам нужно снова открыть файл App.js. Первое, что нам нужно сделать, это удалить ненужный контент в файле и просто сохранить фреймворк. Измените свой файл, чтобы он выглядел так:
Мы можем видеть, как эти изменения отражаются сейчас в нашем браузере, который теперь должен быть пустой страницей.
Затем мы импортируем компонент ‹Мгновенный поиск›, добавляем его к нашему основному методу и подключаем его к Algolia. Мы можем импортировать этот компонент, добавив эту строку кода вверху вашего файла App.js:
Чтобы подключиться к индексу, нам нужно предоставить идентификатор приложения Algolia, ключ API и имя индекса. Эти учетные данные можно найти на панели инструментов Algolia. В этом руководстве мы собираемся использовать уже настроенный индекс, который содержит данные электронной коммерции, аналогичные Best Buy. Этот индекс используется только для внешнего поиска, поэтому ключ API является общедоступным.
Учетные данные для этого индекса:
- appId: задержка
- searchKey: 3d9875e51fbd20c7754e65422f7ce5e1
- indexName: bestbuy
** Примечание: этот указатель предназначен только для учебных целей. Если вы хотите использовать эту настройку для своего собственного приложения, используйте свой индекс и просто замените эти значения своими учетными данными для индекса. Вы можете узнать больше о настройке индекса из моей предыдущей статьи Начало работы с Algolia.
После добавления этой информации в App.js ваш файл должен выглядеть примерно так:
Шаг 3. Добавьте отображение окна поиска
Затем мы добавим виджет «Поле поиска», интегрированный с Algolia, и для каждого ввода текста будет производиться запрос к серверам Algolia.
Первое, что нам нужно сделать, это импортировать компонент SearchBox:
Затем нам нужно добавить этот компонент в метод рендеринга. Более того, мы можем использовать атрибут translations, чтобы настроить текст, который мы хотим отображать в поле поиска.
Посмотрев на браузер, вы должны увидеть поле поиска как добавленный компонент пользовательского интерфейса!
Теперь, когда мы настроили отображение, нам действительно нужно сделать функцию поиска, чтобы она возвращала наиболее релевантные совпадения на основе заданного запроса.
Шаг 4. Запросите результаты поиска
Наш следующий шаг - запросить результаты поиска, и для этого мы добавим несколько строк кода в файл App.js. Для справки, в конце наш полный файл App.js будет выглядеть так:
Мы будем использовать Виджет совпадений, чтобы находить релевантные совпадения на основе запроса и отображать полученные результаты из Algolia. Подобно тому, как мы импортировали компоненты InstantSearch и SearchBox, мы также должны импортировать компонент Hits. Добавьте эту строку в начало файла App.js:
Первое, что нам нужно сделать, это явно указать функциональный компонент для контента, который будет содержать виджет совпадений и вызываться в методе рендеринга.
Давайте перейдем от внешнего метода рендеринга к внутренним вложенным компонентам.
В методе рендеринга мы собираемся вызвать компонент с именем Content в основном теге.
Функция компонента содержимого возвращает массив совпадений (заданный API Algolia) и принимает компонент hit, ответственный за единичное попадание.
Затем мы должны определить, что такое hitComponent. HitComponent принимает параметр попадания, который отвечает за хранение, доступ и рендеринг самих данных попадания внутри компонента.
Мы собираемся рассмотреть два разных типа данных обращения: имя и изображение каждого элемента в индексе. Начнем с изображения:
Этот фрагмент кода просто отображает изображение обращения. Вы можете проверить правильность отображения изображений, зайдя в браузер. После отправки такого запроса, как «ipad», приложение должно вернуть правильную коллекцию изображений.
Теперь переходим к поиску по названию предметов. Это немного отличается от простого поиска по изображениям, потому что нам нужно выяснить, релевантно ли попадание по поисковому запросу. Чтобы определить это, нам нужно использовать Highlight Widget.
Первый шаг - импорт виджета:
Подобно тому, как мы добавляли информацию об изображении в компонент Hit, мы можем использовать виджет Highlight, чтобы добавить новый тег, чтобы проверить, соответствует ли атрибут имени элемента поисковому запросу. Это выглядело бы примерно так:
Таким образом, теперь поиск может отображать результаты и выделять ту часть атрибута попадания, которая соответствует запросу. Подобно поиску изображений, мы можем проверить, работает ли этот поисковый запрос, выполнив поиск по запросу «Sony». В результате вы должны увидеть что-то вроде этого:
Теперь у вас есть мгновенный поиск в React
Ура! Мы создали мгновенный поиск менее чем за 15 минут! Благодаря этому руководству мы смогли создать базовое приложение React и добавить в него плавный и быстрый поиск с помощью Algolia. Для более сложных шагов вы можете продолжить развитие этого поиска, добавив дополнительные фильтры поиска или несколько страниц. Посмотрите документацию Algolia для получения дополнительных примеров и руководств.
