Создание инструмента анализа тенденций с помощью API FeedRika

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

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

Вы можете увидеть диаграмму из Google Trends, которая показывает, насколько популярен термин в публичном пространстве, но отражает только объем поиска. Это не дает вам представления о том, являются ли настроения вокруг него положительными или отрицательными. Итак, давайте создадим инструмент, который просматривает новости, чтобы увидеть, пишут ли о теме положительно или нет, и отображать аналогичный график.

Вот общие шаги, которые мы предпримем для создания этого инструмента:

1. Выберите тему для поиска от пользователя
2. Получить новостные статьи из Feedrika, соответствующие теме
3. Просмотрите возвращенные статьи и извлеките оценку тональности для каждой статьи
4. Поместите эти оценки на диаграмму для визуального отображения
5. Проведите математические расчеты, чтобы получить дополнительную статистику по теме, например среднее настроение, общее количество положительных/отрицательных отзывов и т. д.
6. Покажите исходные новостные статьи пользователю, чтобы он мог изучить тему более подробно.

Прежде чем мы начнем

Давайте получим ключ API с веб-сайта Feedrika, чтобы мы могли получать новостные статьи для работы.
Зайдите на сайт Fedrika.com и зарегистрируйте аккаунт.

После регистрации вы найдете свой ключ API на странице своего профиляfeedrika.com/profile, а также свой кредитный баланс и журнал запросов, показывающий, какие запросы вы сделали.

Выбор платформы

Мы могли бы создать этот инструмент только на HTML, CSS и Javascript, но он предполагает использование закрытого ключа API, и не рекомендуется передавать его открыто через Интернет, поэтому давайте воспользуемся node и express, чтобы скрыть ключ API на сервере. сторона как переменная среды и сохраните ее конфиденциальность.

Я собираюсь адаптировать это руководство для абсолютных новичков, поэтому, если вы уже знакомы с node и express, смело переходите к более интересным частям.

Настраивать:

1. Нода и Экспресс

Убедитесь, что у вас установлена ​​среда выполнения Node. Если нет, вы можете получить его здесь.

Создайте каталог для этого проекта на своем локальном компьютере и перемещайтесь по нему.

Запустите: npm init -y в терминале, чтобы инициализировать проект узла с настройками по умолчанию.

Запустите: npm i express, чтобы установить экспресс-фреймворк.
Express — это простой веб-сервер, который позволит нам обслуживать страницы и маршруты API внутри нашего приложения. Его легко настроить и он широко используется, поэтому найти помощь в Интернете и устранить неполадки не составит труда.

Откройте папку в VSCode или вашей любимой IDE и загляните внутрь.

У вас должна быть папка node_modules, файл package.json и файл package-lock.json.

2. Создание нашего первого маршрута

Давайте создадим индексную страницу, на которой будут приветствовать пользователей нашего приложения
Создайте новый файл «welcome.html» в корне вашего проекта. Для начала заполните его, указав только основную информацию

    
This is my news trends app!

 

Давайте настроим наш первый маршрут и вернем эту страницу Welcome.html, когда кто-то откроет приложение

Создайте файл index.js в корне вашего приложения и импортируйте экспресс-фреймворк.

// Import the express framework
express = require("express");

// tell node that we are creating an express app
const app = express();

// define the port that the server will run on
const port = 3000;

// define the route for the index page
app.get("/", (req, res) => {
 res.sendFile(__dirname   "/welcome.html");
});

// Start the server and tell the app to listen for incoming connections on the port
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

Давайте проверим наш прогресс.
Из терминала запустите узел index.js. Вы должны увидеть подтверждающее сообщение о том, что сервер работает

Нажмите ссылку в терминале или вставьте ее в браузер, чтобы подтвердить, что вы видите страницу приветствия

3. Переменные среды

Давайте настроим переменную среды для сохранения нашего ключа API.
Создайте новый файл «.env» в корне вашего проекта.
Скопируйте и вставьте сюда свой ключ API со страницы профиля Feedrika

Давайте также добавим файл «.gitignore», чтобы случайно не загрузить этот закрытый ключ в Интернет

Теперь немного по хозяйству

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

Откройте файл package.json и добавьте эти строки в объект скрипта

"start": "node index.js",
"dev": "nodemon index.js -w"

Мы используем nodemon с флагом «-w», чтобы отслеживать изменения в нашей корневой папке и перезапускать сервер.

Теперь мы можем запустить наш сервер с помощью команды npm run dev, и он автоматически отслеживает изменения и перезапускает сервер для нас.

Если вы получите сообщение об ошибке, связанное с нераспознаванием узла nodemon, запустите его, чтобы установить его глобально, и повторите попытку:
npm я nodemon -g

Хорошо, настройка завершена, давайте перейдем к созданию нашего приложения!

Давайте обновим страницу приветствия и добавим поле поиска для поиска тем

    

        
News trends
        
Search for a topic to get started
        

            Search
        
    

Настройка таблиц стилей

Создайте «общедоступную» папку в корне вашего проекта, в которой будут размещаться наши клиентские файлы JavaScript, CSS и изображений.
Добавьте файл «styles.css» в общую папку и добавьте несколько основных стилей для страницы приветствия

styles.css:

/* Import the Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

#container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* SEARCH FORM */

.search-form input {
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.search-form button {
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #313131;
    cursor: pointer;
    color: #fff;
}

Теперь нам нужно указать, как обслуживать эти статические файлы, поэтому откройте index.js и добавьте следующую строку:
app.use(express.static("public"));

Вы сразу увидите изменения, обновите страницу в браузере и подтвердите действие

Большой! Давайте теперь расскажем, как обрабатывать отправку этой формы.

Если вы заметили, что форма отправляется в конечную точку «/search», давайте настроим этот маршрут и обработаем отправку формы

Откройте файл index.js и добавьте эти строки

// define the route for the /search endpoint
app.get("/search", (req, res) => {
  // get the query string from the request
  let query = req.query.topic;
  // send the query string back as the response
  res.send(query);
});

Давайте проверим: зайдите в браузер, введите поисковый запрос в поле и нажмите «Отправить»
Вы должны увидеть ответ от сервера, в котором указан ваш поисковый запрос, например

Хорошая работа!

Теперь, когда у нас есть рабочий маршрут поиска, давайте подключим API FeedRika и будем получать новости по этой теме.

Скоро выйдет часть 2. Получение данных