Первоначально опубликовано на FreeCodeCamp.
Elasticsearch один из самых популярных Полнотекстовый поиск Двигатели, которые позволяют быстро искать огромные объемы данных, а Реагировать возможно Лучшая библиотека Для строительства пользовательских интерфейсов. За последние несколько месяцев я был соавтором библиотеки с открытым исходным кодом, Реактивный поиск , который обеспечивает реагирование компонентов для Elasticsearch и упрощает процесс построения поискового интерфейса пользователя (UI).
Это приложение, которое я буду строить в этой истории:
Проверьте приложение на CodeSandbox.
Краткая идея Elasticsearch
Elasticsearch – это NoSQL База данных, которая может искать по большому количеству данных за короткое время. Выполняет Полнотекстовый поиск На данные, которые хранятся в виде документов (таких как объекты), изучав все слова в каждом документе.
Вот что Elasticsearch Docs сказать:
Elasticsearch – это высокомасштабный полный текстовый поиск с открытым исходным кодом. Это позволяет быстро и проанализировать большие объемы данных и анализировать большие объемы данных.
Даже если вы никогда не использовали Elasticsearch, прежде чем вы сможете уметь следовать с этой историей, и построить свой собственный поиск по ElaSticsearchipearge, используя реагирование и реакцию поиска. 😃.
Что такое реактивный поиск?
Реактивный поиск Это библиотека компонентов jog ui для Elasticsearch. Для поиска данных в Elasticsearch вам нужно написать Запросы Отказ Тогда вам нужно будет отформатировать и отображать данные JSON в вашем интерфейсе. Реактивы поиска упрощает весь процесс, поскольку вам не нужно беспокоиться о написании этих запросов. Это облегчает сосредоточиться на создании пользовательского интерфейса.
Вот пример, который генерирует интерфейс поиска UI с определенными предложениями категории:
Компонент, представленный из вышеуказанного кода
Это, скорее всего, сделало нас 100+ линий без библиотеки, а знание Elasticsearch Query DSL построить запрос.
В этом посте я буду использовать разные компоненты из библиотеки для создания окончательного UI.
Вы должны попробовать Окончательное приложение прежде чем мы глубоко погружение. Вот …| CodeSandbox Link для того же.
Установка вещей
Прежде чем мы начнем строить пользовательский интерфейс, нам понадобится DataSet, содержащий репозитории GitHub в Elasticsearch. Реактивные поиски работает с любым индексом Elasticsearch, и вы можете легко Используйте его с вашим собственным набором данных Отказ
Для краткости вы можете использовать Мой набор данных или клонировать его для себя, следуя эта ссылка и нажав на Клонировать это приложение кнопка. Это позволит вам сделать копию набора данных в качестве собственного приложения.
Github Repo. набор данных
После ввода имени приложения процесс клонирования должен начать импортировать 26K + REPOS на свою учетную запись.
Все REPOS структурированы в следующем формате:
{ "name": "freeCodeCamp", "owner": "freeCodeCamp", "fullname": "freeCodeCamp~freeCodeCamp", "description": "The [https://freeCodeCamp.org](https://freeCodeCamp.org) open source codebase and curriculum. Learn to code and help nonprofits.", "avatar": "[https://avatars0.githubusercontent.com/u/9892522?v=4](https://avatars0.githubusercontent.com/u/9892522?v=4)", "url": "[https://github.com/freeCodeCamp/freeCodeCamp](https://github.com/freeCodeCamp/freeCodeCamp)", "pushed": "2017-12-24T05:44:03Z", "created": "2014-12-24T17:49:19Z", "size": 31474, "stars": 291526, "forks": 13211, "topics": [ "careers", "certification", "community", "curriculum", "d3", "education", "javascript", "learn-to-code", "math", "nodejs", "nonprofits", "programming", "react", "teachers" ], "language": "JavaScript", "watchers": 8462 }
- Мы будем использовать Create-React-App настроить проект. Вы можете установить приложение Create-React-App, выполнив следующую команду в вашем терминале:
npm install -g create-react-app
- После того, как он установлен, вы можете создать новый проект, запустив:
create-react-app gitxplore
- После того, как проект установлен, вы можете изменить в каталог проекта и установить реактивный поиск зависимости:
cd gitxplore npm install @appbaseio/reactivesearch
- Вы также можете добавить CDN Fontawesome CDN, который мы будем использовать для некоторых значков, вставляя следующие строки в
/public/index.html
доТег заканчивается:
Дайвинг в код
Я буду следовать простому каталогу для приложения. Вот важные файлы:
src ├── App.css // App styles ├── App.js // App container ├── components │ ├── Header.js // Header component │ ├── Results.js // Results component │ ├── SearchFilters.js // Filters component │ └── Topic.js // rendered by Results ├── index.css // styles ├── index.js // ReactDOM render └── theme.js // colors and fonts public └── index.html
Вот ссылка на Окончательный репо Если вы хотите ссылаться на что-нибудь в любой момент.
1. Добавление стилей
Я написал адаптивные стили для приложения, которое вы можете скопировать в ваше приложение. Просто увоните свой любимый текстовый редактор и скопируйте стили на /src/index.css
от здесь и /src/app.csss
от здесь соответственно.
Теперь создайте файл /src/theme.js
Где мы добавим цвета и шрифты для нашего приложения:
const theme = { typography: { fontFamily: 'Raleway, Helvetica, sans-serif', }, colors: { primaryColor: '#008000', titleColor: 'white' }, secondaryColor: 'mediumseagreen', }; export default theme;
2. Добавление первого реактивного поиска компонента
Все компоненты реактивных исследований обернуты вокруг компонента контейнера Реактивация которые предоставляют данные от Elasticsearch для детей в реактивных компонентах.
Мы будем использовать это в /src/app.js
:
import React, { Component } from 'react'; import { ReactiveBase } from '@appbaseio/reactivesearch'; import theme from './theme'; import './App.css'; class App extends Component { render() { return (); } } export default App;
Для приложение
и учетные данные
Опора, вы можете использовать те, которые я здесь предоставил. Если вы квалифицировали набор данных в своем собственном приложении ранее, вы можете получить их из Страница учетных данных приложения Отказ Если вы уже знакомы с Elasticsearch, вы можете вместо этого пройти URL
Опора в обращение к Ваш собственный elasticsearch кластер URL Отказ
Получение учетных данных приложения из AppBase.io приборная панель Отказ Просто скопируйте ключ API только для чтения
Кроме того, вы также можете скопировать свое приложение учетные данные
от Приложение приборной панели Отказ Наведите курсор на карту вашего приложения и нажмите Скопировать чтение учетных данных Отказ
Альтернатива вышеуказанной ссылке: скопируйте учетные данные чтения из Приложение приборной панели
После добавления этого вы бы увидим базовый макет:
После добавления первого реактивного поиска компонента
3. Добавление DataSearch
Компонент DataSearch
Далее я добавлю DataSearch Компонент для поиска по репозиториям. Он создает компонент поиска UI и позволяет легко поискать по одному или нескольким полям. Обновлено оказывать
Функция в /src/app.js
будет выглядеть так:
// importing DataSearch here import { ReactiveBase, DataSearch } from '@appbaseio/reactivesearch'; ...// Adding the DataSearch here ...
DataSearch
Компонент идет внутри Реактивация
Компонент и получает все необходимые данные от него, поэтому нам не нужно писать elasticsearch queres. Окружение Div
s Добавить немного классное значение
Свойства для стилизации. Они просто добавляют макет в приложение. Вы можете пройти все стили на /src/app.csss
который мы создали ранее. Возможно, вы заметили, что мы прошли некоторые реквизиты DataSearch
составная часть.
Вот как они работают:
componentiD
: Уникальный идентификатор строки, который мы будем использовать позже, чтобы подключить два различных компонента реактивных исследований.FilterLabel
: строковое значение, которое будет отображаться в меню фильтров позже.datafield
: Массив струн, содержащих elasticsearch полей, на котором должен выполняться поиск. Вы можете проверить DataSet И увидите, что эти поля также соответствует названию столбца. Все поля указаны здесь соответствует структуре данных, напримерИмя
относится к названию репо,Описание
Относится к его описанию, но есть поле с.raw
Добавлено здесь,name.raw
который является Multi-field изИмя
поле. Elasticsearch может индексировать те же данные по-разному для разных целей, которые мы можем использовать, чтобы получить лучшие результаты поиска.Зажигатель
: Устанавливает значение заполнителя в поле ввода.AutoSuggest
: установкаложь
Значение для принципов вызывает обновление результатов немедленно в результатах.Окоркировка
: Устанавливает положение 🔍 значок.UrlParams
: этологический
Который говорит компонент сохранить сеанс поиска в URL-адресе браузера, поэтому мы можем поделиться URL для определенного поискового запроса. Например, проверьте эта ссылка Чтобы увидеть все результаты, связанные с «Реагированием».классное значение
: ДобавляетКласс
для стилизации с использованием CSS.Innerclass
: ДобавляетКласс
Разные разделы компонента для стилизации с использованием CSS. Здесь я добавилКласс
квход
коробка для стилизации. Подробное описание можно найти в Документы Отказ
С этим наше приложение должно получить рабочую строку поиска:
Добавление компонента DataSearch
4. Добавление представления результатов
Далее мы добавим Результаты
Компонент в /src/components/results.js
и импортировать его в /src/app.js
Отказ
Вот как вы можете написать Результаты
составная часть:
import React from 'react'; import { SelectedFilters, ReactiveList } from '@appbaseio/reactivesearch'; const onResultStats = (results, time) => ({results} results found in {time}ms); const onData = (data) => ({data.owner}/{data.name}); const Results = () => (); export default Results;
Я импортировал два новых компонента из реактивных исследований, ВыбранныеFilters
и Реактивист
Отказ ВыбранныеFilters сделает фильтры для наших компонентов реактивных исследований в одном месте:
ВыбранныеFilters отображают съемные фильтры
Реактивист оказывает результаты поиска. Вот как работает его реквизит:
datafield
: приказывает результаты, используяИмя
поле здесь.Ондата
: принимает функцию, которая возвращает Jsx Отказ Функция передается каждый результат индивидуально. Здесь мы создаем базовый пользовательский интерфейс, который мы модифицируем позже.onresultstats
: похоже наОндата
Но для статистики результата. Функция передается количествоРезультаты
найдено ивремя
взятый.реагировать
:реагировать
опоры рассказываетРеактивист
слушать изменения, сделанныеКатегорияsearch
Компонент, мы предоставилиcomponentiD
изКатегорияsearch
Компонент здесь называетсярепо
Отказ Позже мы добавим больше компонентов здесь.Пагинация
: aлогический
который сообщает реактивелю разделить результаты на страницы, каждая страница, содержащая количество результатов, указанных вРазмер
пропры
Теперь мы можем Импорт
и использовать Результаты
Компонент в /src/app.js
Отказ Просто добавьте его внутри Div
с Результаты-контейнер
класс.
... import Results from './components/Results'; ... render() { return( ...... ) }
С помощью этого компонента базовая версия нашего поиска UI должна начинаться вместе:
Добавление компонента результатов
5. Добавление компонента заголовка
Давайте создадим Заголовок
Компонент в /src/components/header.js
Что мы будем использовать для рендеринга больше поисковых фильтров.
Вот как создать простой Заголовок
составная часть:
Я переместил код навигации в от
/src/app.js
здесь. Заголовок
Компонент имеет метод, который переключается Видимый
В Государство
Отказ Мы используем это, чтобы добавить Класс
Что заставит его занять весь размер экрана на мобильном макете. Я также добавил кнопку переключения, которая вызывает Тупичности метод.
Это также делает другой компонент под названием SearchFilters
и передает все реквизиты от родителя Приложение
составная часть. Давайте создадим этот компонент, чтобы увидеть вещи в действии.
Создать новый файл /src/components/searchfilters.js
:
import React from 'react'; const SearchFilters = () => (Search filters go here!); export default SearchFilters;
Далее я обновилю Приложение
Компонент для использования Заголовок
Компонент, который мы создали только сейчас.
6. Обновление компонентов приложений и темы обработки в штате
Мы добавим Государство
Переменная в Приложение
Компонент называется steantopics
Которые были бы массивом выбранных в настоящее время темы в приложении.
Затем мы будем использовать steantopics
и передать их в Заголовок
и Результаты
составные части:
Обновление компонента приложений
Соборки
Метод будет установлен в зависимости от того, какие темы не передаются на него, которые мы перейдем к Заголовок
составная часть. toggletopic
Метод удалит тему из Государство
в steantopics
Если он уже присутствует и добавьте тему, если она нет.
Мы передадим toggletopic
Метод для Результаты
составная часть:
Это начинает собираться вместе, ура!
7. Добавление большего количества фильтров
Давайте добавим больше фильтров на пользовательский интерфейс в /src/components/searchfilters.js
Отказ Я буду использовать три новых компонента из реактивных исследований здесь, Multidropdownlist
, SingledropDownrange
и Rangeslider
Отказ Компоненты используются аналогичным образом, когда мы использовали DataSearch
компонент раньше.
Вот код:
SearchFilters
Компонент, который мы создали выше, принимают три реквизита от Заголовок
Компонент, steantopics
, Соборки
и Видимый
Отказ Видимый
опоры просто используется для добавления классное значение
для стайлинга.
Первый компонент, который мы использовали здесь, это Multidropdownlist
который оказывает раскрывающийся компонент, чтобы выбрать несколько вариантов. Первый Multidropdownlist
имеет datafield
language.raw
Отказ Это заполнит себя всем языками, доступными в наборе данных репозитории.
Язык Мульти выпадающий список
Мы использовали другой Multidropdownlist
Чтобы сделать список тем:
Вот как здесь работает реквизит:
componentiD
: Похоже на предыдущие компоненты реактивных поисков, это уникальный идентификатор, который позже мы связываемся вРезультаты
Компонент, который мы создали, чтобы получить результаты поиска.datafield
: отображает компонент кTopics.Raw
поле в elasticsearch.Зажигатель
: Устанавливает значение заполнителя, когда ничего не выбрана.Название
: Добавляет заголовок для компонента в пользовательском интерфейсе.FilterLabel
: Устанавливает метку компонентов в съемных фильтрах («ВыбранныеFilters», которые мы использовали в результатах
Компонент).Размер
: говорит компонент оказать максимум1000
предметы в списке.QueryFormat
: При установке'и'
Как мы использовали здесь, он дает результаты, которые соответствует всем выбранным тегам (точно так же, какпересечение
). DefaultSelected .: Устанавливает выбранные элементы в компоненте. Здесь мы проезжаемsteantopics
которые мы хранили вГосударство
на/src/app.js
ОтказonvalueChange
: Является ли функция, которая будет называться компонентом, когда мы внесем изменение ее стоимости. Здесь мы называемСоборки
Функция, которую мы получили в реквизитах. Следовательно, всякий раз, когда мы выбираем или отмените выделите значение в компоненте, он обновил быsteantopics
ВГосударство
главногоПриложение
составная часть.
Темы Multi раскрывающийся список компонентов
Следующий компонент по реактивам, который мы использовали здесь SingledropDownrange
Отказ Он использует новый опорой под названием данные
Отказ
Вот как это работает:
данные
опоры принимает массив объектов с Начать
и конец
значения и показывают указанный этикетка
в раскрывающемся списке. Это сопоставлено на толкнул
поле в наборе данных, который является Тип даты в elasticsearch Отказ Один круточный способ указать диапазон дат в elasticsearch, использует сейчас
ключевое слово. сейчас
относится к текущему времени, сейчас-1м
Относится до за месяц до того, как сейчас-6м
до шести месяцев до и сейчас-1y
до года до сейчас
Отказ
Оттолкнул SingledropDownrange составная часть
Я использовал другой SingledropDownrange
Компонент для Создано
поле в наборе данных.
Здесь я указал год диапазона в DateTime для разных лет:
Компонент SingledropDownrange для созданного поля
Третий компонент, который я использовал это Rangeslider
который делает ползунок UI. Я использовал Rangeslider
Компоненты, один для звезды
поле, а другой для вилки
Отказ
Два основных реквизита, что этот компонент представляет собой Диапазон
и Rangelabels
:
Диапазон
: опоры определяет диапазон данных с помощьюНачать
иконец
значение.Rangelabels
: ropp берет на этикетки, чтобы показать ниже слайдера.Showhistogram
: этологический
опору, который показывает гистограмму с распределением данных. Здесь я установил это наложь
Так как он не нужен.
Rangeslider Компоненты для полей звезд и вил
Теперь нам просто нужно подключить эти фильтры к Результаты
составная часть. Мы просто должны обновить одну строку в Реактивист
оказывается Результаты
Компонент, чтобы включить componentiD
с этих компонентов.
Обновите реагировать
опоры в Реактивист
что мы визуали в Результаты
составная часть:
const Results = () => ();
Это должно сделать ваши результаты обновления для всех фильтров 😃
После подключения фильтров в рективелей
8. Обновление представления результатов
До сих пор мы видели только базовую версию результатов. Как окончательный кусок этого приложения, давайте добавим немного талания к результатам ✌️
Мы будем использовать другой компонент внутри нашего Результаты
Компоненты для визуализации разных тем.
Темы компонента для рендеринга этих маленьких парней
Вот как вы можете создать свой собственный на /src/Компоненты/Тема
Отказ Не стесняйтесь добавить свой собственный вкус 😉
Добавление темы компонента
Этот компонент оказывает его дети
и добавляет обработчик щелчка, чтобы переключить темы, которые обновляют steantopics
Внутри главных Приложение
Состояние компонента.
Далее нам просто нужно обновить наши Результаты
Компонент в /src/components/results.js
:
Добавление какого-либо талания к результатам 😄
Я обновил Ондата
Функция для оказания более подробных результатов. Вы также заметите новую SortOptions
опоры в Реактивист
Отказ Этот опоры принимает массив объектов, которые отображают раскрывающееся меню, чтобы выбрать, как вы хотите отсортировать результаты. Каждый объект содержит этикетка
Для отображения элемента списка A datafield
Чтобы сортировать результаты и A сортирование
ключ, который может быть либо ASC
(по возрастанию) или Desc
(по убыванию).
Вот и все, ваш очень собственный репозиториер GitHub должен быть вжин!
Gitxplore Окончательное предварительное просмотр приложения
Полезные ссылки
- Gitxplore приложение Демо , CodeSandbox и исходный код
- Реактивный поиск Github Repo.
- Реактивный поиск документы
Надеюсь, вам понравилась эта история. Если у вас есть мысли или предложения, пожалуйста, дайте мне знать и не забудьте звездить Реактивный поиск репо ⭐.