Как использовать API поиска Википедии, чтобы построить пользовательский интерфейс с Ramdajs

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

В этом руководстве мы построим интернет-интерфейс, используя API поиска публичного поиска Википедии вместе с некоторыми JavaScript + Ramdajs.

Начиная

Вот …| Github Link а также CodeSandbox Link Отказ Откройте свой терминал и выберите каталог, чтобы клонировать его.

git clone [https://github.com/yazeedb/ramda-wikipedia-search](https://github.com/yazeedb/ramda-wikipedia-search)
cd ramda-wikipedia-search
yarn install (or npm install)

Мастер Филиал имеет готовый проект, поэтому проверьте Начать ветвь, если вы хотите, чтобы код вместе.

Git Checkout. Начните

И начните проект!

Начнем NPM

Ваш браузер должен автоматически открывать localhost: 1234 Отказ

Получение входного значения

Вот начальное приложение.

Чтобы захватить ввод пользователя, так как они введите, наше вход Элемент нужен слушатель событий.

Ваш SRC/index.js Файл уже подключен и готов к работе. Вы заметите, что мы импортировали Bootstrap для стайлинга.

Давайте добавим слушателя фиктивного события, чтобы сделать вещи.

import 'bootstrap/dist/css/bootstrap.min.css';

const inputElement = document.querySelector('input');

inputElement.addEventListener('keyup', (event) => {
  console.log('value:', event.target.value);
});

Мы знаем event.target.value. стандартный способ получить доступ к значению ввода. Теперь он показывает значение.

Как Ramda может помочь нам добиться следующего?

• Хватает event.target.value.
• Обрезать вывод (ведущий пробел/пробел в полоску)
• По умолчанию для пустой строки, если неопределенный

Pathor Функция может фактически обрабатывать первую и третий пулевые точки. Требуется три параметра: по умолчанию, путь и данные.

Так что следующие делаются отлично

import { pathOr } from 'ramda';

const getInputValue = pathOr('', ['target', 'value']);

Если event.target.value это неопределенный Мы получим пустую строку обратно!

Рамда также имеет обрезать Функция, так что решает наш пробел.

import { pathOr, trim } from 'ramda';

const getInputValue = (event) => trim(pathOr('', ['target', 'value'], event));

Вместо того, чтобы вложить эти функции, давайте использовать трубка . См. Моя статья на трубе Если это новое для вас.

import { pathOr, pipe, trim } from 'ramda';

const getInputValue = pipe(
  pathOr('', ['target', 'value']),
  trim
);

Теперь у нас есть написанная функция, которая занимает событие Объект, хватает его target.value , по умолчанию для '' и обрезать его.

Красивый.

Я рекомендую хранить это в отдельном файле. Может быть, назовите это getinputvalue.js и используйте синтаксис экспорта по умолчанию.

Получение URL Wikipedia

По состоянию на данное письмо URL поиска API Wikipedia – https://en.wikipedia.org/w/api.php?origin=* Action=Opensearch&search=.

Для фактического поиска просто добавьте тему. Если вам нужны медведи, например, URL выглядит так:

https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search=bears

Мы хотели бы функцию, которая принимает тему и возвращает полный URL поиска Wikipedia. В качестве типов пользователей мы создаем URL-адрес от их ввода.

Рамда Concat Работает здесь.

import { concat } from 'ramda';

const getWikipediaSearchUrlFor = concat(
  'https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search='
);

Concat , верно его названию, объединяет строки и массивы. Это карман, поэтому предоставляющий URL, поскольку один аргумент возвращает функцию, ожидающую вторую строку. См. Моя статья о Carrying Если это новое!

Поместите этот код в модуль под названием geturl.js Отказ

Теперь давайте обновим index.js Отказ Импортируйте наши два новых модуля вместе с труба и Нажмите от Рамды.

import 'bootstrap/dist/css/bootstrap.min.css';
import { pipe, tap } from 'ramda';
import getInputValue from './getInputValue';
import getUrl from './getUrl';

const makeUrlFromInput = pipe(
  getInputValue,
  getUrl,
  tap(console.warn)
);

const inputElement = document.querySelector('input');

inputElement.addEventListener('keyup', makeUrlFromInput);

Этот новый код построил наш запрос URL от ввода пользователя и введя его через Нажмите Отказ

Проверьте это.

Сделать запрос AJAX

Следующим шагом отображает этот URL к запросу AJAX и собирает ответ JSON.

Заменить makeurlfrominput С новой функцией, searchandrenderresults Отказ

const searchAndRenderResults = pipe(
  getInputValue,
  getUrl,
  (url) =>
    fetch(url)
      .then((res) => res.json())
      .then(console.warn)
);

Не забудьте изменить свой мероприятие слушателя тоже!

inputElement.addEventListener('keyup', searchAndRenderResults);

Вот наш результат.

Сделать компонент результатов

Теперь, когда у нас есть JSON, давайте создадим компонент, который предвещает его.

Добавить Results.js к вашему каталогу.

Оглядываясь назад на нашу википедию поиск JSON Response. Обратите внимание на его форму. Это массив со следующими показателями:

1. Запрос (что вы искали)
2. Массив имен результатов
3. Массив резюме
4. Массив ссылок на результаты

Наш компонент может принять массив этой формы и вернуть красиво отформатированный список. Через деструктурирование массива ES6 мы можем использовать это как наша функция подписи.

Редактировать Results.js.

export default ([query, names, summaries, links]) => `
  
Searching for "${query}"
  

    ${names.map(
      (name, index) => `
        

          
            
${name}
          
          
${summaries[index]}
        
      `
    )}
  
`;

Пойдем шаг за шагом.

• Это функция, которая принимает массив наших ожидаемых элементов: Запрос , имена , Резюме и Ссылки Отказ
• Использование ES6 шаблон литералов Он возвращает HTML строку с заголовком и списком.
• Внутри
  Мы картам имена к
Теги, так один для каждого.
• Внутри этих Теги, указывающие на ссылку каждого результата. Каждая ссылка открывается на новой вкладке.
• Ниже ссылка является резюме абзаца.

Импортировать это в index.js и использовать это так:

// ...

import Results from './Results';

// ...

const searchAndRenderResults = pipe(
  getInputValue,
  getUrl,
  (url) =>
    fetch(url)
      .then((res) => res.json())
      .then(Results)
      .then(console.warn)
);

Это проходит Википедию JSON до Результаты и регистрирует результат. Вы должны видеть кучу HTML в вашей консоли devtools!

Все, что осталось, это сделать его до DOM. Простой оказывать Функция должна сделать трюк.

const render = (markup) => {
  const resultsElement = document.getElementById('results');

  resultsElement.innerHTML = markup;
};

Заменить Console.warn с оказывать функция.

const searchAndRenderResults = pipe(
  getInputValue,
  getUrl,
  (url) =>
    fetch(url)
      .then((res) => res.json())
      .then(Results)
      .then(render)
);

И проверить это!

Каждая ссылка должна открыться на новой вкладке.

Удаление этих странных запятых

Возможно, вы не заметили о нашем свежем интерфейсе.

У него есть дополнительные запятые! Почему??

Шаблонные литералы

Это все о том, как шаблонные литералы присоединяются к вещам. Если вы придерживаетесь массива, это присоединится к нему, используя TOSTRING () метод.

Посмотрите, как это присоединяется?

const joined = [1, 2, 3].toString();

console.log(joined);
// 1,2,3

console.log(typeof joined);
// string

Шаблонные литералы делают это, если вы помещаете массивы внутри них.

const nums = [1, 2, 3];
const msg = `My favorite nums are ${nums}`;

console.log(msg);
// My favorite nums are 1,2,3

Вы можете исправить это, присоединившись к массиву без запятых. Просто используйте пустую строку.

const nums = [1, 2, 3];
const msg = `My favorite nums are ${nums.join('')}`;

console.log(msg);
// My favorite nums are 123

Редактировать Results.js использовать присоединиться метод.

export default ([query, names, summaries, links]) => `
  
Searching for "${query}"
  

    ${names
      .map(
        (name, index) => `
        

          
            
${name}
          
          
${summaries[index]}
        
      `
      )
      .join('')}
  
`;

Теперь у вас намного чище чистящий.

Исправлять немного ошибки

Я нашел немного ошибки, зная это. Вы заметили это?

Опорожнение вход бросает эту ошибку.

Это потому, что мы отправляем запрос AJAX без поисковой темы. Проверьте URL на вашей сетевой вкладке.

Эта ссылка указывает на HTML-страницу по умолчанию. Мы не вернулись JSON, потому что мы не уточняли поисковую тему.

Чтобы предотвратить это, мы можем избежать отправки запроса, если вход пусто.

Нам нужна функция, которую ничего не делает Если вход пустые, а делает поиск Если он наполнен.

Давайте сначала создадим функцию под названием Поностринг Отказ Вы можете догадаться, что похоже.

const doNothing = () => {};

Это лучше известно как NOOP , но мне нравится Поностринг в контексте.

Далее удалить getinputvalue от вашего searchandrenderresults функция. Нам нужна более безопасность, прежде чем использовать его.

const searchAndRenderResults = pipe(
  getUrl,
  (url) =>
    fetch(url)
      .then((res) => res.json())
      .then(Results)
      .then(render)
);

Импорт IFELSE и ushumpy от Рамды.

import { ifElse, isEmpty, pipe, tap } from 'ramda';

Добавьте другую функцию, makeearchrequestifvalid Отказ

const makeSearchRequestIfValid = pipe(
  getInputValue,
  ifElse(isEmpty, doNothing, searchAndRenderResults)
);

Найдите минуту, чтобы поглотить это.

Если входное значение пусто, ничего не делай. Остальное, поиск и визуализация результатов.

Вы можете собрать эту информацию, просто читая функцию. Это выразительный.

Рамда ushumpy Функция работает с строками, массивами, объектами.

Это делает его идеальным, чтобы проверить наше входное значение.

IFELSE подходит здесь, потому что когда ushumpy Возвращает true, Поностринг бежит. В противном случае searchandrenderresults бежит.

Наконец, обновите свой обработчик событий.

inputElement.addEventListener('keyup', makeSearchRequestIfValid);

И проверьте результаты. Больше нет ошибок при очистке вход Действительно

Этот учебник был из мой Полностью бесплатно Курс на образовании. Функциональные шаблоны программирования с Ramdajs Действительно

Пожалуйста, рассмотрите возможность принимать/делиться этим, если вам понравилось этот контент.

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

Спасибо за чтение ❤️

Оригинал: “https://www.freecodecamp.org/news/how-to-build-wikipedias-api-search-with-ramdajs-b3c1a069d7af/”