Рубрики
Без рубрики

Строительство GitHub Reppo Explorer с реагированием и эластиком

Используя реактивы поиска, чтобы построить GitHub Refo Explorer с Reaction и Elasticsearch.

Автор оригинала: Divyanshu.

Первоначально опубликовано на 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 Окончательное предварительное просмотр приложения

Полезные ссылки

  1. Gitxplore приложение Демо , CodeSandbox и исходный код
  2. Реактивный поиск Github Repo.
  3. Реактивный поиск документы

Надеюсь, вам понравилась эта история. Если у вас есть мысли или предложения, пожалуйста, дайте мне знать и не забудьте звездить Реактивный поиск репо ⭐.