API для чайников: как подключить любой сервис к сайту

Клиент просит: «Сделайте, чтобы заявки с сайта приходили в Telegram». Или: «Хочу, чтобы прайс-лист подтягивался из Google-таблицы». За обоими запросами стоит одно слово — API. Разберём, что это такое и как с ним работать.

Что такое API простыми словами

API (Application Programming Interface) — это набор правил, по которым программы общаются друг с другом.

Аналогия: вы в ресторане. Вы (клиент) не идёте на кухню сами — вы говорите официанту (API), что хотите. Официант передаёт заказ повару (серверу), получает готовое блюдо и приносит вам. Вам не нужно знать, как работает кухня. Вам нужен только официант и меню.

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

Заказ — это HTTP-запрос. Вы говорите: «Дайте мне список товаров» (GET-запрос) или «Добавьте нового клиента» (POST-запрос).

Блюдо — это ответ сервера. Обычно в формате JSON — структурированные данные, которые ваш сайт может обработать и показать пользователю.

Виды API: REST и GraphQL

REST API — стандарт для 90% веб-сервисов. Работает через обычные HTTP-запросы:

GET /api/products — получить список товаров
POST /api/orders — создать заказ
PUT /api/products/123 — обновить товар
DELETE /api/products/123 — удалить товар

Каждый ресурс имеет свой URL (эндпоинт). Данные передаются в формате JSON.

GraphQL — альтернатива REST от Facebook. Отличие: вы сами указываете, какие именно поля вам нужны. Вместо 5 запросов к разным эндпоинтам — один запрос с описанием нужных данных. Используется в сложных приложениях (GitHub API, Shopify).

Для большинства задач достаточно REST API. С него и начнём.

Что такое API-ключ и зачем он нужен

API-ключ — это пароль для доступа к сервису. Сервер должен понимать, кто отправляет запрос, и ограничивать доступ.

Как получить:

Регистрируетесь в сервисе (Google Cloud, Telegram, и т.д.)
Создаёте проект или приложение
Получаете уникальный ключ — строку вида AIzaSyD3k...x8Q

Правила безопасности:

Никогда не публикуйте ключ в открытом коде на GitHub
Храните ключи в переменных окружения (.env-файл)
Ограничивайте ключ по IP или домену, если сервис это позволяет

Где взять API-ключ: конкретные сервисы

Для каждого сервиса процесс получения ключа немного отличается. Вот пошаговые инструкции для самых популярных:

Google (Sheets, Maps, YouTube, Translate):

Перейдите в Google Cloud Console
Создайте проект (или выберите существующий)
Перейдите в «APIs & Services» → «Library» → включите нужный API (например, Google Sheets API)
Перейдите в «Credentials» → «Create Credentials» → «API Key»
Скопируйте ключ. Рекомендуется ограничить его: «Restrict key» → укажите разрешённые домены или IP

Telegram Bot API:

Откройте Telegram, найдите бота @BotFather
Отправьте команду /newbot
Укажите имя и username для бота
BotFather пришлёт токен вида 7123456789:AAH... — это и есть ваш API-ключ

Яндекс (Карты, Метрика, Переводчик):

Перейдите в Кабинет разработчика Яндекса
Создайте приложение, выберите нужный API
Получите ключ в настройках приложения

VK API:

Перейдите на dev.vk.com
Создайте standalone-приложение
В настройках приложения найдите «Сервисный ключ доступа» — он используется для серверных запросов

У большинства сервисов процесс одинаковый: регистрация → создание проекта/приложения → раздел API/Credentials → генерация ключа. Если в документации сервиса написано «Bearer Token» — это тот же API-ключ, просто передаётся в заголовке Authorization: Bearer ваш_токен.

Как открыть API любой страницы сайта

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

WordPress: у любого сайта на WordPress есть встроенный REST API. Добавьте /wp-json/wp/v2/posts к адресу сайта — получите список постов в формате JSON. Пример:

# Получить последние посты любого WordPress-сайта
curl "https://example.com/wp-json/wp/v2/posts?per_page=5"

# Получить список страниц
curl "https://example.com/wp-json/wp/v2/pages"

# Получить информацию о сайте
curl "https://example.com/wp-json/"

Тильда: у Тильды нет публичного API для чтения страниц. Но есть API для получения данных проекта и экспорта страниц — доступен в платных тарифах. Ключ берётся в настройках аккаунта → API.

Любой сайт через DevTools: откройте сайт в Chrome → F12 → вкладка Network → перезагрузите страницу. Вы увидите все запросы, которые сайт делает. Фильтруйте по Fetch/XHR — это и есть API-запросы. Часто можно увидеть URL эндпоинтов и структуру данных.

Что означает «api» перед названием сайта: некоторые сервисы размещают API на отдельном субдомене. Например, api.telegram.org, api.github.com, api.vk.com. Это просто адрес, куда отправляются запросы — отдельно от основного сайта.

Пример 1: Данные из Google Sheets на сайт

Задача: у клиента прайс-лист в Google-таблице. Нужно показать эти данные на сайте автоматически.

Шаг 1. Откройте Google Cloud Console, создайте проект и включите Google Sheets API.

Шаг 2. Создайте API-ключ в разделе Credentials.

Шаг 3. Сделайте таблицу публичной (Файл → Поделиться → Все, у кого есть ссылка).

Шаг 4. Код на JavaScript:

const SHEET_ID = 'ваш_id_таблицы';
const API_KEY = 'ваш_api_ключ';
const RANGE = 'Лист1!A1:C20';

async function loadPrices() {
  const url = `https://sheets.googleapis.com/v4/spreadsheets/${SHEET_ID}/values/${RANGE}?key=${API_KEY}`;

  const response = await fetch(url);
  const data = await response.json();

  // data.values — массив строк таблицы
  // data.values[0] — заголовки: ["Услуга", "Цена", "Срок"]
  // data.values[1] — первая строка данных

  const rows = data.values.slice(1); // убираем заголовки
  const table = document.getElementById('price-table');

  rows.forEach(row => {
    table.innerHTML += `
      <tr>
        <td>${row[0]}</td>
        <td>${row[1]}</td>
        <td>${row[2]}</td>
      </tr>`;
  });
}

loadPrices();

ID таблицы — это длинная строка из URL между /d/ и /edit. Теперь клиент обновляет цены в привычной Google-таблице, а на сайте они появляются автоматически.

Пример 2: Google Apps Script — форматируем заявки из Тильды

Задача: Тильда отправляет заявки в Google-таблицу через стандартную интеграцию. Данные попадают на «Лист1» в сыром виде — всё в одну строку, неудобно читать. Нужно автоматически форматировать заявки на втором листе в удобный вид.

Этот способ не требует сервера, API-ключей и программиста на стороне — всё работает внутри самой Google-таблицы через встроенный редактор скриптов.

Шаг 1. Откройте таблицу, куда Тильда сбрасывает заявки. Перейдите в «Расширения» → «Apps Script».

Шаг 2. Вставьте скрипт:

function onEdit(e) {
  formatNewLead();
}

function formatNewLead() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var raw = ss.getSheetByName('Лист1');       // сырые данные от Тильды
  var formatted = ss.getSheetByName('Заявки'); // красивый лист

  if (!formatted) {
    formatted = ss.insertSheet('Заявки');
    formatted.appendRow(['Дата', 'Имя', 'Телефон', 'Email', 'Сообщение', 'Страница']);
    formatted.getRange('1:1').setFontWeight('bold');
  }

  var lastRaw = raw.getLastRow();
  var lastFormatted = formatted.getLastRow();

  // обрабатываем только новые строки
  for (var i = lastFormatted; i <= lastRaw; i++) {
    var row = raw.getRange(i, 1, 1, raw.getLastColumn()).getValues()[0];

    // Тильда шлёт данные в определённом порядке — адаптируйте индексы
    var date = Utilities.formatDate(new Date(), 'Europe/Moscow', 'dd.MM.yyyy HH:mm');
    var name = row[0] || '';
    var phone = row[1] || '';
    var email = row[2] || '';
    var message = row[3] || '';
    var page = row[4] || '';

    // форматируем телефон
    phone = phone.toString().replace(/[^\d+]/g, '');

    formatted.appendRow([date, name, phone, email, message, page]);
  }

  // автоширина колонок
  formatted.autoResizeColumns(1, 6);
}

Шаг 3. Настройте триггер: в Apps Script → «Триггеры» (значок часов) → «Добавить триггер» → выберите функцию formatNewLead, событие «При изменении таблицы». Теперь каждая новая заявка автоматически появится на листе «Заявки» в читаемом виде.

Что можно добавить: уведомление на email при новой заявке (MailApp.sendEmail()), подсветку строк по статусу, автоматический подсчёт конверсии по дням.

Пример 3: Свой скрипт обработки заявок

Задача: форма на сайте отправляет данные на ваш сервер. Скрипт принимает заявку, валидирует, сохраняет и рассылает уведомления — в Telegram, на email, в CRM. Полный контроль без зависимости от сторонних сервисов.

PHP-вариант (подходит для любого хостинга):

<!-- Форма на сайте -->
<form id="lead-form" method="POST" action="/api/lead.php">
  <input type="text" name="name" placeholder="Имя" required>
  <input type="tel" name="phone" placeholder="Телефон" required>
  <input type="email" name="email" placeholder="Email">
  <textarea name="message" placeholder="Сообщение"></textarea>
  <button type="submit">Отправить</button>
</form>

<?php
// api/lead.php — обработчик заявки

// 1. Принимаем данные
$name    = htmlspecialchars(trim($_POST['name'] ?? ''));
$phone   = preg_replace('/[^\d+]/', '', $_POST['phone'] ?? '');
$email   = filter_var($_POST['email'] ?? '', FILTER_VALIDATE_EMAIL);
$message = htmlspecialchars(trim($_POST['message'] ?? ''));

// 2. Валидация
if (empty($name) || empty($phone)) {
    http_response_code(400);
    echo json_encode(['error' => 'Имя и телефон обязательны']);
    exit;
}

// 3. Сохраняем в файл (или БД)
$lead = [
    'date'    => date('Y-m-d H:i:s'),
    'name'    => $name,
    'phone'   => $phone,
    'email'   => $email,
    'message' => $message,
    'ip'      => $_SERVER['REMOTE_ADDR'],
    'page'    => $_SERVER['HTTP_REFERER'] ?? '',
];
file_put_contents('leads.json', json_encode($lead) . "\n", FILE_APPEND);

// 4. Отправляем в Telegram
$botToken = getenv('TG_BOT_TOKEN');
$chatId   = getenv('TG_CHAT_ID');
$text     = "Новая заявка!\nИмя: {$name}\nТел: {$phone}\nEmail: {$email}\n{$message}";

file_get_contents("https://api.telegram.org/bot{$botToken}/sendMessage?" . http_build_query([
    'chat_id'    => $chatId,
    'text'       => $text,
    'parse_mode' => 'HTML',
]));

// 5. Отправляем на email
mail('manager@company.ru', "Заявка с сайта от {$name}", $text);

// 6. Ответ клиенту
echo json_encode(['success' => true]);
?>

Этот скрипт делает всё сам: валидация → сохранение → Telegram → email. Никаких сторонних сервисов. Работает на любом PHP-хостинге. Для продакшена добавьте: защиту от спама (honeypot-поле или reCAPTCHA), CSRF-токен и запись в базу данных вместо файла.

Пример 4: Отправка заявки в Telegram через JavaScript

Задача: при заполнении формы на сайте отправлять уведомление в Telegram-чат.

Шаг 1. Создайте бота через @BotFather в Telegram. Команда /newbot. Сохраните токен.

Шаг 2. Узнайте ваш chat_id через бота @getmyid_bot.

Шаг 3. Добавьте бота в нужный чат и отправьте ему любое сообщение.

Шаг 4. Код обработчика формы:

const BOT_TOKEN = 'ваш_токен_бота';
const CHAT_ID = 'ваш_chat_id';

document.getElementById('contact-form')
  .addEventListener('submit', async (e) => {
    e.preventDefault();

    const name = document.getElementById('name').value;
    const phone = document.getElementById('phone').value;
    const message = `Новая заявка!\nИмя: ${name}\nТелефон: ${phone}`;

    const url = `https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`;

    await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        chat_id: CHAT_ID,
        text: message,
        parse_mode: 'HTML'
      })
    });

    alert('Заявка отправлена!');
  });

Важно: в продакшене токен бота нельзя оставлять в клиентском JavaScript — его увидит любой через DevTools. Оберните отправку в серверный эндпоинт (Node.js, PHP) или используйте serverless-функцию.

Инструменты для тестирования API

Прежде чем писать код, проверьте запрос вручную:

Postman — графический инструмент для отправки HTTP-запросов. Подставляете URL, заголовки, тело запроса — видите ответ. Удобно для отладки и изучения API.

curl — команда в терминале. Быстро проверить эндпоинт:

curl "https://api.telegram.org/bot<TOKEN>/getMe"

Вкладка Network в DevTools — отслеживайте запросы, которые ваш сайт отправляет в реальном времени. Статус 200 — запрос прошёл, 401 — проблема с авторизацией, 404 — неверный URL.