Также оставлю инструкцию в видео-формате ↴
В этой статье я расскажу, как работать с API Instagram* через платформу Chatium.
Бывают ситуации, когда необходимо автоматически получить нужную информацию: количество подписчиков, Reels, постов. Чтобы это сделать, человеку нужно много времени и сил на парсинг сайта. Можно это избежать, если использовать готовые API, где уже собрана вся информация, и остается только лишь работа с ним. Как раз Chatium предоставляет сервер с API на JavaScript, чтобы работать с ним напрямую.
Мы будем использовать API из хаба RapidApi, где их собрано очень много. В Chatium реализована библиотека для работы с API этого сервиса.
Копируем шаблон
Шаблон можно скопировать по ссылке https://chatium.com/instagram-api.
Перейдя по ссылке, нас перекинет на страницу с кодом и страничкой html. Чтобы его скопировать, нужно нажать на Fork, а потом сохранить код.
И так вы получите собственную версию кода, в которой можно самому работать с API.
Я же напишу этот скрипт с нуля, чтобы показать, как он работает.
Создаем начальный экран
Чтобы создать новый скрипт, нужно в своем аккаунте Chatium
- Открыть раздел IDE.
Откроется страница с шаблонами, нам нужно выбрать
- Добавить файл Серверный TypeScript
- Создаем файл .tsx
У нас откроется страница, в которой мы можем писать серверный код. Чтобы сделать начальную страницу, как в шаблоне, нужно стереть все и начать HTML-верстку.
Мы задали функцию экрана «app.html('/', async(ctx, rec)..», это позволит вывести на нем страницу HTML, в нем пока только выводится заголовок «Timur page»
Таким образом, начальная страница будет выглядеть вот так:
Теперь нужно добавить поле ввода аккаунта Instagram*, для этого в коде мы
- Задаем тэг формы «<form></form>», в котором мы сделаем поле ввода и кнопку
- Внутри тэга задаем поле ввода : «<input type="text"/>» - и кнопку: «<button type="submit">Search</button>».
Видим, что выглядит страница не очень симпатично. Чтобы исправить это, можно ее немного "причесать".
Редактируем дизайн
Чтобы привести страницу в красивый вид, воспользуемся фреймворком Bootstrap. Его мы будем использовать, что быстро изменять внешний вид элементов страницы.
Чтобы подключить Bootstrap, нужно задать блок, где мы включим этот инструментарий:
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"/>
</head>
Теперь, чтобы изменить вид страницы, весь текст отвечающий за ее элементы, мы завернем в блок «<div class="container mt-3>"» Этот контейнер показывает, что все элементы немного отступают от верхней границы страницы.
Далее раскрасим элементы поля ввода и кнопки, выглядеть это будет так:
Дизайн страницы уже выглядит симпатично. Займемся теперь динамической частью кода.
Выводим запрос
Так как этот скрипт должен выдавать нам информацию с аккаунта, нам нужно реализовать ее вывод. Для начала вспомним, что функция экрана принимает параметр «rec», он принимает введенные нами значения.
Зададим константу q, которая будет хранить значение, введенное в поле ввода:
- «const q = rec.query?.q»
И в характеристики поля ввода включим «value={q} name="q"», после чего выведем значение q:
Подключаем API
Теперь, когда мы поняли, как выводить информацию на экран, пора подключать внешний API, чтобы выводить уже информацию из Instagram*. Импортируем в код библиотеку Chatium'ную библиотеку, которая позволит брать API из RapidAPI:
- «import {rapidApiGet} from '@rapidApi/sdk'»
И чтобы мы смогли вывести информацию из Instagram*, на странице с API необходимо найти адреса методов получения того, что нам нужно.
Для примера найдем методы для:
- Полной информации по аккаунту: https://instagram-scraper-api2.p.rapidapi.com/v1/info
- Информации о подписках: https://instagram-scraper-api2.p.rapidapi.com/v1/following
Чтобы в коде реализовать вывод информации, эти ссылки нужно вставить как параметры в соответствующие функции:
- «const response = await radApiGet('https../info', {username_or_id_or_url: q})»
- «const followingResponse = await radApiGet('https../following', {username_or_id_or_url: q})»
И теперь мы можем вывести нужную информацию. Пока что выведем ее в виде JSON-строк, чтобы проверить, что все работает:
Как видим, нам выдало информацию о подписках в виде строк, однако такой вид информации сложен для восприятия, поэтому сделаем список подписок в виде строчек таблицы.
Выводим ответ
Вместо тэга pre, который выводит строки JSON, учитывая отступы, мы воспользуемся тэгом table, чтобы вывести информацию в табличном виде.
Внутри этого тэга мы будем перебирать все подписки по порядку и выводить их, в коде это будет выглядеть так:
Последний столбец таблицы мы сделали в виде гиперссылки в тексте. При ее нажатии, нам будет выдавать ту же информацию уже по аккаунту в подписке.
Итак, после того, как мы проверили работу с API Instagram*, самое время попробовать самому!
*принадлежит корпорации Meta, признанной в России экстремистской организацией