Создайте свою собственную поисковую систему новостей с помощью Algolia

В наши дни в мире так много новостей, и это здорово, но особенно трудно найти те истории, которые мне действительно небезразличны. Чтобы решить эту проблему, мы собираемся искать новостные статьи в 30 000 источников с помощью NewsApi, используя API поиска Algolia и полнофункциональный веб-сайт, который вы можете развернуть и фактически использовать для просмотра множества новостей. найти качественный интересующий контент.

Начало работы с настройкой вашей среды

Хорошие новости для вас: настройка очень проста и занимает не более 10 минут.

Вот что вам понадобится:

  1. Зарегистрируйтесь в Algolia и запишите ApplicationId и API Key.
  2. Зарегистрируйтесь в NewsApi и обратите внимание на его API-ключ: https://newsapi.org/docs/get-started
  3. Найдите себе текстовый редактор. В этом уроке я буду использовать VS Code.
  4. Обязательно установлен узел

Я основал это руководство на базовом приложении Брэндона Морелли, и он отлично справляется с объяснением основ. Если вы готовы приступить к поиску новостей, вы можете пропустить мою ветку baseApp из GitHub, и мы сможем начать с нее. Взгляните вокруг и посмотрите, какие файлы у нас есть, я не буду вдаваться в подробности. *

Если вы используете мою ветку baseApp, не забудьте раскомментировать строку 142 в .gitignore, прежде чем вводить секреты клиента из Algolia и NewsApi.

Если вас особенно интересует конечный продукт, вытащите мою главную ветку и запустите npm install, затем node server.js, чтобы протестировать работающее приложение!

* Если вы решили загрузить baseApp, не забудьте перейти на ветку baseApp после извлечения с помощью команды git checkout baseApp, иначе вы будете в главной ветке.

Структура проекта

К этому моменту структура вашего проекта должна выглядеть следующим образом

Больше всего нас интересуют файлы server.js и index.ejs. Сначала мы не будем много играть с файлом index.ejs, но давайте сначала посмотрим, как должно выглядеть базовое приложение.

В терминале в каталоге вашего приложения

/Users/.../news-app выполните npm install, чтобы убедиться, что у вас есть все пакеты, определенные в нашем pacjage.json файле. Файл package.json просто определяет наш проект и модули, которые нужно установить, чтобы наш проект работал успешно.

После завершения давайте запустим наше базовое приложение с помощью команды node server.js. Вы должны увидеть что-то вроде этого изображения ниже

Если вы введете что-нибудь в нашу изящно выглядящую панель поиска, ничего не должно произойти. Заглянем под капот. У нас есть 20 строк кода, работающего за кулисами,

В строках 1–3 мы просто определяем const для использования. Это все шаблонный код для экспресс-приложения. Когда мы нажимаем localhost: 3000, наш браузер указывает на функцию app.get и обслуживает страницу index в нашей папке views /. Фрагмент app.post обрабатывает все, что обслуживается со стороны клиента (см. Снимок экрана выше). В нашем случае это будет то, что мы вводим в строку поиска.

Вот разбивка на const, let и var, поскольку я использую их на протяжении всего урока. Чтобы узнать больше, прочтите эту информативную статью.

  • const - идентификатор нельзя переназначить
  • let - Сигнал о том, что переменная может быть переназначена (циклы / обмен значениями)
  • var - область действия функции или объявленная вне какой-либо функции; это глобально.

Так что введите все, что вы хотите, на панели, и в нашем терминале мы увидим, что то, что вы «искали», было напечатано.

Поток здесь - панель поиска (из index.ejs), отправка будет получена из app.post и распечатана req uest.body.search. Если вы проследите за тегами в файле index.ejs, то увидите, что там есть тег body, а конкретный тег, который мы ищем, - это поиск в строке 13.

Разобрав части проекта, мы готовы получить некоторые данные.

Получите данные из NewsAPI

В этом разделе мы собираемся…

  • Узнать об индексировании
  • Запросить NewsApi
  • Создание индексов в Algolia
  • Запрос индексов

Прежде чем мы перейдем к коду, позвольте мне объяснить, насколько важна Algolia и что необходимо для поиска. У наших друзей из Algolia на сайте есть масса ресурсов, например, это действительно полезное руководство по индексации. Они сделали всю тяжелую работу, чтобы мы могли плавно и плавно перейти к использованию их API!

Краткое описание индексирования

У каждого внутри ящик со случайными предметами. Теперь, в этом ящике, вы знаете, что у вас там фломастер, и вы хотите его достать. Но в этом загроможденном ящике трудно найти фломастер, поэтому для его поиска требуется немного дополнительных усилий.

Если в этом случае вы каким-то образом организовали ящик, например, поместив фломастер ближе к передней части, вы потратите меньше времени на поиск какого-либо предмета в этом ящике. Этот акт организации информации называется индексированием; вы знаете, что вам нужно знать содержимое этого ящика, но вам просто не нужно прямо сейчас знать, что у вас есть один фломастер спереди, колода карт сзади и т. д., но когда вам нужно знать где находится фломастер или колода карт, вы сможете легко найти эти предметы и тратить меньше времени на поиски.

Tl; dr- Индексирование = оптимизация поиска информации.

Давайте подключимся к NewsApi, чтобы получить данные, с которыми мы хотим работать.

Использовать API довольно просто. Мы собираемся запросить конечную точку с категорией в США, которую можно найти здесь. Категории: технологии, бизнес, развлечения, здоровье, наука и спорт.

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

Это выглядит немного круто, но потерпите меня. Внутри синтаксического сахарного вуду javascript мы

  1. Итерации по каждому тегу в нашем массиве

2. Определение индекса с помощью текущего тега.

3. Запрашиваем новостную карту с нашими параметрами:
- Один из семи указанных тегов
- Язык: английский
- Страна: США
- Размер страницы 100 для других статей для поиска против

4. Затем добавляем в наш индекс ответ от NewsApi
. С этим ответом мы добавляем эти объекты в индекс со всеми статьями.

Если бы мы постоянно включали и выключали наше приложение (как это происходит в процессе разработки), мы неизбежно создаем множество объектов в наших индексах, что может привести к устаревшим новостным статьям. Чтобы исправить это, мы очищаем наши индексы в Algolia прямо перед построением нового индекса.

Следовательно, мы должны изменить порядок операций на тот, который вы видите ниже:

Вам может быть интересно, почему у меня есть let clearIndexes и clearIndexes() функция. Короче говоря, мы объявляем переменную функцию два раза, а затем используем их позже. В строках 18–24 фрагмента мы используем обе эти переменные функции. Чтобы узнать больше об объявлении функции javascript, см. Здесь.

Когда мы запускаем node server.js, то, что я только что объяснил, происходит прямо перед тем, как мы видим Example app listening on port 3000! в терминале.

Запросить наши данные в Algolia

Теперь мы почти закончили весь проект. Еще две важные вещи.

  1. Нам действительно нужно использовать API Algolia для поиска запроса.
  2. Показать указанный поисковый запрос

Записка

Прежде чем я перейду к этим двум, я решил сделать этот пост более интересным:

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

Чтобы решить эту проблему, мы просим нашего пользователя сначала ввести одну из семи категорий в кавычках после запроса:

Searching

Поскольку все, что мы только что рассмотрели, происходит в фоновом режиме, прежде чем мы увидим наш пользовательский интерфейс на localhost: 3000, давайте поговорим о реальном поиске с помощью Algolia.

Этот фрагмент ниже отвечает за ввод данных пользователем searchItem, и у нас есть четыре атрибута, которые нам нужны для получения

  • Заголовок
  • Автор
  • URL
  • Содержание

В нашем случае «Спортивный» баскетбол - это весь наш запрос. Нам нужно отделить Спорт от Баскетбол и обрабатывать их отдельно, поскольку Спорт - это индекс, который нас интересует при поиске по ключевому слову Баскетбол для. Это подводит нас к предпоследнему фрагменту кода ниже:

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

На этом этапе, если вы посмотрите только на server.js без пользовательского интерфейса, вы закончите! Но поскольку у нас есть интерфейс, мы можем закончить и отобразить возвращенный объект из Algolia.

Отображение результата поиска

EJS - это встроенный шаблон Javascript; по сути, еще один язык шаблонов. Здесь мы переходим к нашему index.ejs файлу и хотим отображать статьи, если что-то нам вернули.

Эта строка ниже является важной строкой, которая отправляет всю работу, которую мы только что сделали, для использования во внешнем интерфейсе:

По сути, это означает, что нужно отправить ответ (res) и отобразить наш интерфейс (index.ejs) с этой информацией (article: content).

К этому моменту у нас есть данные для нашего внешнего интерфейса. Лучший способ быстро отформатировать ответ - это поместить все это в таблицу и отобразить каждый столбец. Мы никогда не знаем, насколько большой будет эта таблица, поэтому мы создаем часть таблицы и бросаем неизвестные части в цикл for для динамического создания:

Элементы <% и %> - это код шаблона, смешанный с HTML. В шаблоне мы можем получить доступ к данным через строку рендеринга в нашем app.post (статьи):

  • Если есть объект статей, создайте таблицу в центре экрана.
  • Мы хотим, чтобы наш пользовательский интерфейс выглядел чистым и незагроможденным перед вводом поиска.
  • Следующий бит (строка 9) действительно хорош - мы можем добавить простой цикл for
  • Мы получаем доступ к нашему контенту с помощью синтаксиса, который вы видите в строках 11–13, из-за способа формирования нашего ответа JSON.

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

Итак, вы в деле. Мы можем просмотреть данные с помощью нашего запроса из более ранней версии "Sports" Basketball.

Ваш следующий поисковый проект

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

Затем попробуйте включить автозаполнение Algolia для поиска. Чтобы помочь вам начать работу, ознакомьтесь с публикацией Майка Свифта об автозаполнении и firebase!