APIBLAZE: UI для поиска элементов API

APIBLAZE – это инструмент для изучения спецификаций API: поиск ключевого слова, фильтра для объектов, свойств или конечных точек и сразу же см. Описания и примеры кода. APIBLAZE поможет вам ответить на конкретный вопрос о молнии API быстро. Вы можете попробовать здесь: apiblaze.admantium.com. .

Когда пользователь выбирает API, показана страница поиска элементов API. На этой странице пользователи могут искать и посмотреть различные элементы спецификации API: его объекты, свойства и конечные точки. Этот пост блога является отправной точкой для реализации этой страницы. Он объясняет компоненты, и подробно описываются поиск, выделение и представление объектов API. Свойства и конечные точки будут объяснены в следующей статье.

Эта статья изначально появилась в мой блог .

Компоненты страницы поиска элементов API

Как только пользователь выбирает API, он хочет исследовать, страница Apieleementsearch оказывается. Эта страница состоит из следующих компонентов:

Строка поиска для объектов, свойств и конечных точек
Группа радиопередачи для фильтрации панели поиска
всплывающий раздел, который отображает результаты поиска
Раздел, который оказывает описание текущего выбранного результата
Раздел, который оказывает представление кода в текущем выбранном результате

Давайте начнем кодировать эти компоненты один за другим.

Панель поиска

Стерна поиска похожа на панель поиска API SPUS: он принимает любое ключевое слово, вызывает бэкэнду к поиску текущего входного значения и обновит общее состояние с результатами поиска.

import { Component } from 'spac'
import SearchApiElementsAction from '../actions/SearchApiElementsAction.js'

export default class ApiElementsSearchBarComponent extends Component {
  render = () => {
    return `
      
    `
  }

  handleKeyUp (e) {
    switch (e.keyCode) {
      case 40: // Arrow down
        e.preventDefault()
        const searchResultDom = document.querySelector('div.search-result')
        searchResultDom && searchResultDom.focus({ preventScroll: false })
        break
      default:
        this.updateState({ apiElementsSearchQuery: e.target.value })
        break
    }
  }

  triggerSearch (keyword) {
    new SearchApiElementsAction().run(keyword, json =>
      this.updateState({ apiElementsSearchResult: json })
    )
  }
}

В результате всплывающее окно

Всплывание результата также похоже на The The One для спецификаций поиска API: он показывает список всех результатов поиска, отображаемых из общего состояния. И у него также есть одни и те же интерфейсы пользовательского интерфейса, которое навигация с клавишами со стрелками.

Представление конечно отличается. При поиске API в следующей структуре данных поставляется бэкэнда:

[
  {
    name: 'Pod',
    containingObject: 'io.k8s.api.core.v1.Pod',
    type: 'object',
    description:
      'Pod is a `collection` of "containers" that can run on a host. This resource is created by clients and scheduled onto hosts.',
    score: 5
  }
  //...
]

Эта структура отображается следующим способом:

_renderSearchResults() {
  Object.entries(apiElementsSearchResult).forEach((value, key) => {
    const [i, object] = value
    const { name, containingObject, description } = object

    var html = `
      
        
          ${containingObject}
        
        
          ${icons.endpoint}
          ${name}
        
        ${description}`
    html = html.concat(``)
    this.addDom('#api-search-results', html)
  })
}

В целом, пользователю будет показан следующий макет:

Элемент API Описание

Всякий раз, когда выбран элемент в списке результатов поиска – нажав на него или нажав Enter, когда выбран элемент – он будет отображаться в описании и в примере кода.

Описание представляет собой простой компонент: он принимает значения из текущих выбранных элементов и отображает представление HTML.

_renderObject(details) {
  const { name, containingObject, description } = details

  return `
    ${name}
    
    ${icons['object']}
    ${containingObject}
    
    ${this.format(description)}
  `
}

Рендеринг примера кода

Окончательный компонент оказывает всестороннее представление пример кода. Для объекта внутренние данные выглядят так:

{
  name: "Pod",
  // ...
  properties: {
    apiVersion: {
      _type: "string",
      _description: "\"APIVersion\" 'defines' the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value, and may reject unrecognized values. More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#resources"
      },
    kind: {
      _type: "string",
      _description: "Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated. In CamelCase. More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#types-kinds"
    }
  }
}

На основании этой структуры создается примерное представление кода. Реализация составляет около 100 строк кода – слишком утомительно, чтобы пройти, поэтому я просто наброску общих шагах:

Преобразовать структуру данных JSON в хорошо отформатированное строковое представление
Дезинфицировать строковое представление, например Удаление дополнительных пробелов, конвертация цитат
Сделайте пару каждого ключа в строку кода, добавив номер строки
Форматировать значение Value, например рендеринг откровение как <Код> представления

Это приводит к следующему макету:

Обзор: Требования проекта APIBLAZE

Проектируя и внедряя страницу поиска элементов API с помощью строки поиска, всплывающим окном, описанию и примеру кода, мы продвигаемся к выполнению всех требований. Давайте посмотрим на текущий статус:

Элементы отображения API

✅ dis01 – показать объекты описание
✅ dis02 – Когда выбран объект: показать всю свою модель данных
⏸ dis03 – при выборе свойства: Шоу в каких объектах это используется
⏸ dis04 – когда выбран конечная точка: Показать его объект запроса и ответа

Как видите, необходимо завершено еще два требования. Свойства будут представлять не пример кода, а список объектов, в которых они ссылаются. И конечные точки будут представлены совершенно разными: на получение HTTP-метода, описание, модель данных запроса и модель данных данных.

Вывод

Эта статья объяснила, как реализовать страницу поиска элементов API. Я объяснил, как страница структурирована в разных компонентах: панель поиска, модификатор поиска и появление результатов влево, а также выбранные элементы описания и представления кода влево. Подробнее о реализации компоненты, а также о обработке внутренней спецификации API для HTML, были обсуждены. Следующая статья расширяет страницу поиска элементов API с представлением свойств и конечных точек.

Оригинал: “https://dev.to/admantium/apiblaze-ui-for-searching-api-elements-33h4”