Подсмотрел у Никиты в блоге кнопочку фидбэка, которая модалку вызывает, и захотел себе такую же. Запилить кнопку, которая открывает модалку на 2,5 поля не так сложно, `yarn add` что-то там, все вместе слепить и готово. А вот как его получать — другой вопрос.

Фича была крутая, JAMstack тоже, но я уехал на Эгею, так что теперь это все только в истории гита. Может, когда-то и сюда прикручу, но как-то лень

Ввиду того, что я любитель Telegram и уже делал «уведомлялки» с его помощью, то я решил не придумывать что-то новое, а просто слать уведомления себе в Telegram, но для этого нужен сервер, какой-никакой, токены ж на клиент передавать не будешь (хотя некоторые так делают, но это не мой путь). Но есть но, у меня же Gatsby, JAMstack и вот это все модное, потому просто сделать сервер — это слишком.

Будем использовать SERVERLESS, модно же и стильно (да и просто, как оказалось). Я юзаю Netlify, потому пошел на страницу «Serverless Lambda functions on Netlify» и почитал что там и как делается, сей пост что-то вроде вольного пересказа в краткой форме.

Для начала надо бы среду разработки развернуть и все необходимые пакеты поставить:

yarn add netlify-lambda
yarn add node-fetch

Теперь правим build и develop скрипты:

"lambda": "netlify-lambda serve lambda",
"build": "yarn run clean && gatsby build && netlify-lambda build lambda",

Скрипт «build» на последнем шаге будет собирать все функции, которые лежат в директории «lambda», скрипт «lamda» будет запускать dev-сервер на 9000 порту. В «netlify.toml» в секцию «build» добавляем строчку `functions = «server»`, где «server» — директория, куда будут складываться уже собранные функции.

Складываем наши функции в директорию, которую мы описали (у меня — «lambda»), в моем случае был один файлик «feedback.js», соответственно после запуска dev-сервера я могу отправлять запросы к этой функции на «localhost:9000/feedback», а в prod-режиме (уже после деплоя на Netlify) на «/.netlify/functions/feedback».

Готово, у нас есть сконфигурированное окружение и файлик, куда надо писать код, я буду писать туда код по отправке сообщений от имени Telegram-бота, в сниппете используются переменные окружения, которые можно задать в админке сайта, в «Settings -> Build & deploy -> Environment».

import fetch from 'node-fetch';

const { TELEGRAM_BOT_TOKEN, TELEGRAM_USER_ID } = process.env;

exports.handler = async ({ body, httpMethod }) => {
  if (httpMethod !== 'POST') {
    return { statusCode: 405, body: 'Method Not Allowed' };
  }

  const { page, message, type } = JSON.parse(body);

  const text = encodeURI(`New blog feedback!\n\nPage: ${page}\nType: ${type}\nMessage: ${message}`);
  const url = `https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage`;
  const params = `chat_id=${TELEGRAM_USER_ID}&disable_web_page_preview=1&text=${text}`;

  return fetch(`${url}?${params}`)
    .then((response) => response.json())
    .then(() => ({ statusCode: 200, body: 'ok' }))
    .catch((error) => ({ statusCode: 422, body: String(error) }));
};

Запускаем локально, стучимся postman’ом, проверяем работу и деплоим на Netlify, не забывая, что prod и dev адреса функций различаются.

Готово, модная serverless система уведомлений на NodeJS для Telegram работает и пересылает нам фидбэки, можно писать пост в блог.