По мере появления на рынке новых технологий заказчики предъявляют более подробные и уточненные требования, помимо конкуренции, которая повышает уровень результатов. У каждой услуги теперь есть онлайн-версия, например, поиск жилья, найма кого-то, знакомства с кем-то, здравоохранение, покупки и бесконечный список. Поэтому все больше и больше людей ищут такие услуги, потому что они проще и понятнее.
Таким образом, поисковое слово стоит здесь с ударением, потому что ключ и цель здесь — максимально упростить работу пользователя при поиске этих услуг. С точки зрения ИТ, старые известные приложения должны получать HTTP-запросы к серверной части для запроса результатов, когда пользователи выполняют поиск в вашем интерфейсе. В этом нет никаких проблем в зависимости от контекста, но представьте, что у вас есть платформа, на которой пользователи могут искать списки, с кучей фильтров, представьте, что каждое изменение в фильтре отправляет запрос на серверную часть. Это может перегрузить ваш сервер, также учитывая, что у вас достаточно масштабируемости, чтобы поддерживать эту конфигурацию, запросы определенно будут занимать больше времени, чем система текстового поиска.
Еще до того, как представить ElasticSearch, давайте сравним здесь две разные конфигурации платформы листинга, описав ее в потоке:
- Пользователь меняет фильтр -> запрос к бэкэнду -> бэкэнд ищет в базе данных -> бэкэнд отправляет ответ
- Пользователь меняет фильтр -> Запрос GraphQL / Запрос к текстовой поисковой системе / Ответ во внешнем интерфейсе
Какой из этих двух вариантов, по вашему мнению, потребует меньше времени для запроса информации с большей производительностью? Текстовый поиск занял бы меньше времени, и я не говорю, что с сегодняшнего дня мы должны выдрать из нашей архитектуры бэкенд и базы данных, но вместе с этим мы можем использовать текстовый движок.
Например, у нас может быть наш бэкэнд и база данных SQL для сохранения важной информации приложения, и мы будем синхронизировать информацию между нашей базой данных и поисковой системой, и поисковая система будет отвечать за запрос почти всей информации для пользователи. Так работают многие приложения типа Airbnb, Booking.
Что такое эластичный поиск
Elasticsearch — это распределенная поисковая и аналитическая система с открытым исходным кодом для всех типов данных, включая текстовые, числовые, геопространственные, структурированные и неструктурированные. Elasticsearch построен на базе Apache Lucene и может быстрее запрашивать данные.
По сути, мы можем сказать, что ElasticSearch работает примерно как база данных NoSQL, хранит JSON в коллекциях и выполняет запросы для извлечения этих данных с помощью многих доступных методов запросов, позволяя пользователю выполнять агрегирование, преобразования, которые с точки зрения SQL, или даже код, было бы крайне сложно и менее эффективно.
Вернемся к гибридной инфраструктуре с базой данных. Представьте, что у вас есть приложение для поиска цен в супермаркетах. Все цены хранятся в базе данных, затем у вас есть кластер ElasticSearch, который синхронизирует информацию в реальном времени с вашей БД. Теперь ваш интерфейс/сервер готов запрашивать данные непосредственно из кластера.
Что такое Кибана
Kibana — это бесплатный и открытый пользовательский интерфейс, который позволяет вам визуализировать данные Elasticsearch и перемещаться по Elastic Stack. Делайте что угодно, от отслеживания загрузки запросов до понимания того, как запросы проходят через ваши приложения.
Подводя итог, можно сказать, что это графический интерфейс, в котором вы можете визуализировать данные из ElasticSearch, создавать информационные панели, анализировать и выполнять запросы.
Что мы будем делать сегодня?
Сегодня мы создадим простое приложение, в котором пользователи смогут запрашивать информацию обо всех странах мира и получать о них информацию. Мы создадим интерфейс в React, который будет использовать библиотеку ReactiveSearch для подключения к ElasticSearch и получения данных.
Для запуска ElasticSearch и Kibana мы будем использовать Docker, потому что это ТРЕНД, и его проще запускать в любой ОС, которая у вас есть. Не волнуйтесь, если вы этого не знаете, это новая возможность учиться, и я также пришлю все необходимые команды, так что давайте перейдем непосредственно к этому.
Настройка контейнеров Docker для ElasticSearch и Kibana
Чтобы развернуть контейнеры, мы будем использовать Docker-Compose, инструмент докеров, используемый для запуска нескольких контейнеров, определенных в одном файле yaml. Здесь хорошо то, что у нас только один файл, мы создадим два необходимых контейнера. Итак, прежде всего создайте файл с именем docker-compose.yml в любом каталоге, который вы хотите, и вставьте в него следующее содержимое.
# ./docker-compose.yml
version: '3'
services:
elasticsearch:
image: docker.elastic.co/elasticsearch/elasticsearch:6.3.2
environment:
- cluster.name=docker-cluster
- bootstrap.memory_lock=true
- "ES_JAVA_OPTS=-Xms512m -Xmx512m"
ulimits:
memlock:
soft: -1
hard: -1
ports:
- "9200:9200"
kibana:
image: docker.elastic.co/kibana/kibana:6.3.2
ports:
- "5601:5601"
Как видно из содержимого файла, у нас будет два сервиса, elasticsearch и kibana, и вы могли бы спросить, почему docker-compose? Поскольку контейнеры Docker имеют сетевые конфигурации BRIDGE, HOST, NONE, если вы используете docker-compose, он автоматически создаст сеть, в которой контейнеры могут взаимодействовать друг с другом, и поскольку конфигурация двух контейнеров по умолчанию является мостом, мы можем получить доступ их с хоста использовали сопоставленные порты.
Итак, имея этот файл в том же каталоге, где находится этот файл, выполните следующую команду, чтобы запустить контейнеры.
docker-compose up -d
Это запустит контейнеры в отдельном режиме (параллельный компьютерный поток).
Массивный! Теперь у нас есть среда разработки с ElasticSearch и Kibana, я могу получить доступ к ним обоим в вашем браузере.
Протестируйте доступ ElasticSearch к http://localhost:9200
Протестируйте доступ Kibana к http://localhost:5601
Теперь, когда наши контейнеры запущены и работают, нам нужно вставить некоторые данные в ElasticSearch, просто загрузите этот файл, содержащий набор стран, и сохраните его в каталоге по вашему выбору.
https://showerio-public.s3.amazonaws.com/countries.txt
После сохранения вы можете сделать HTTP-запрос к контейнеру ElasticSearch, чтобы добавить все содержимое этого файла. Итак, выполните следующую команду там, где вы сохранили файл:
curl -H 'Content-Type: application/x-ndjson' -XPOST 'localhost:9200/countries/doc/_bulk?pretty' --data-binary @countries.txt
После этого все данные должны быть сохранены в ElasticSearch, а теперь давайте запросим эти данные с помощью Kibana.
Запрос данных в ElasticSearch из Kibana
Чтобы запросить данные в Kibana, перейдите к этому в своем браузере (http://localhost:5601) и на боковой панели перейдите в Инструменты разработчика.
Введите в консоли следующее:
GET countries/_search
Вы сможете проверить все доступные данные из всех стран мира.
Есть несколько параметров, которые мы можем использовать для запроса данных, для простоты мы не будем на них сегодня останавливаться. Теперь, когда у нас все настроено на стороне ElasticSearch, давайте перейдем к внешнему интерфейсу.
Создание React-приложения
Все давайте создадим приложение React с очень простым пользовательским интерфейсом, которое будет использовать библиотеку ReactiveSearch, библиотеку, используемую для создания абстракции между запросом данных с помощью React в ElasticSearch. на эту задачу, а не тратить много времени на создание части запроса или GraphQl. Кроме того, хорошая часть заключается в том, что эти компоненты широко настраиваются, а это означает, что эта библиотека может выполнять как самые простые требования, так и более подробные.
Не беспокойтесь также, если вы не знаете React, мы передадим вам все команды, чтобы вы могли его правильно запустить.
Итак, в каталоге по вашему выбору, на вашем компьютере установлены пакеты NPM и create-react-app npm. Если у вас его нет, установите его:
npm install -g create-react-app
После этого вы можете начать новый реактивный проект с помощью команды:
create-react-app my-awesome-search && cd my-awesome-search
Наконец, установите пакет ReactiveSearch:
npm install @appbaseio/reactivesearch
Теперь мы готовы перейти к коду нашего приложения React. В папке src откройте файл App.js и отредактируйте его, вставив следующее содержимое.
import React, { Component } from "react";
import {
ReactiveBase,
} from "@appbaseio/reactivesearch";
import "./App.css";
import SingleList from "@appbaseio/reactivesearch/lib/components/list/SingleList";
import ReactiveList from "@appbaseio/reactivesearch/lib/components/result/ReactiveList";
import ResultList from "@appbaseio/reactivesearch/lib/components/result/ResultList";
class App extends Component {
render() {
return (
<div className="main-container">
<ReactiveBase
app="countries"
url="http://localhost:9200"
theme={{
colors: {
primaryColor: "#41ABF5"
}
}}
>
<div className="filters-search-container">
<div className="search-container">
<SingleList
size={300}
componentId="CountrySensor"
dataField="region.keyword"
title="Countries"
/>
</div>
</div>
<div className="result-map-container">
<ReactiveList
componentId="SearchResult"
dataField="name"
pagination
size={10}
react={{
and: ['CountrySensor'],
}}
render={({ data }) => (
<ReactiveList.ResultListWrapper>
{data.map(item => (
<ResultList key={item._id}>
<ResultList.Image src={item.flag} />
<ResultList.Content>
<ResultList.Title>
<div
className="book-title"
dangerouslySetInnerHTML={{
__html: item.name,
}}
/>
</ResultList.Title>
<ResultList.Description>
<div className="flex column justify-space-between">
<div>
<div>
Native Name: {' '}
<span className="authors-list">
{item.nativeName}
</span>
</div>
</div>
<div>
<div>
Capital:
<span className="authors-list">
{item.capital}
</span>
</div>
</div>
<span className="pub-year">
Region {item.region}
</span>
</div>
</ResultList.Description>
</ResultList.Content>
</ResultList>
))}
</ReactiveList.ResultListWrapper>
)}
/>
</div>
</ReactiveBase>
</div>
);
}
}
export default App;
Объясняя некоторые моменты этого компонента, первым компонентом в рендеринге будет компонент ReactBase, который является основным компонентом для подключения к вашему ElasticSearch.
<ReactiveBase
app="countries"
url="http://localhost:9200"
theme={{
colors: {
primaryColor: "#41ABF5"
}
}}
>
Вам просто нужно передать URL-адрес ElasticSearch, так как мы используем локальный док-контейнер, это будет localhost: 9200 и имя коллекции, которую мы назвали странами.
После этого вы можете запустить приложение React с помощью:
npm run
Вы должны увидеть такую страницу на http://localhost:3000/:
Существует окно поиска с разными континентами для фильтрации следующих стран, и самое интересное здесь то, что ReactiveBase имеет множество различных компонентов для применения этих фильтров, и, как мы видим, нам нужно беспокоиться только о стороне React. вещи и пользовательский интерфейс. Мне не нужно было настраивать запросы с помощью ElasticSearch, что расширяет возможности разработчиков, предоставляя пользователю лучший пользовательский интерфейс.
Как мы видим, изменения с использованием ElasticSearch делают пользовательский интерфейс более плавным и быстрым.
ElasticSearch пришел, чтобы внести множество изменений и улучшить работу поисковых систем, поскольку новые подробные требования исходят от пользователей / клиентов, системы должны расти и масштабироваться в этой пропорции, что является увеличением производительности, которое предоставляет ElasticSearch.
Вы также можете заглянуть в мой профиль на GitHub, чтобы узнать больше об альтернативах:
