DEV Community: Stanislav Karol

electron-forge настройка paths в tsconfig

Stanislav Karol — Sun, 08 May 2022 14:55:24 +0000

Недавно я посмотрел библиотеку Electron и вслед за ним я стал смотреть, какие есть способы написать на нём приложение, используя react. Из этого списка я остановился на electron-forge. Как поставить ещё typescript в свой проект описано на electron-forge (пока идёт перечисление ссылок, проблем нет, всё идёт прозрачно и понятно, верно?). У меня была проблема- не заводились ссылочные пути в tsconfig. Вот как её решил.
У меня такая структура каталогов:

В каталоге client находятся скрипты, касающиеся реакт-приложения: компоненты, роутер, и т.п. И вот хотелось бы делать импорт компоненты не так: import Logo from '../../../components/Logo", а по-красивее: import Logo from '@clients/components/Logo".
Первый шаг - настроить tsconfig:

"baseUrl": "./",
"paths": {
      "@/*": [
        "src/*"
      ],
      "@client/*": [
        "src/client/*"
      ]
},

За ним следует второй шаг- настроить webpack, чтобы он тоже понимал эти пути. Это делается в двух файлах:
webpack.main.config.js

const path = require('path');

function srcPaths(src) {
  return path.join(__dirname, src);
}

module.exports = {
  /**
   * This is the main entry point for your application, it's the first file
   * that runs in the main process.
   */
  entry: './src/index.ts',
  // Put your normal webpack config below here
  module: {
    rules: require('./webpack.rules'),
  },
  resolve: {
    alias: {
      '@': srcPaths('src'),
      '@client': srcPaths('src/client'),
    },
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
  },
};

webpack.renderer.config.js
Необходимо добавить точно такую же настройку:

  resolve: {
    alias: {
      '@': srcPaths('src'),
      '@client': srcPaths('src/client'),
    },
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
  },

Ну вот на этом всё: цель достигнута, сокращённые названия путей работают, как хотелось бы.
Буду рад, если кому-то пригодится эта заметка.

Написал парсер сайта на Node.js

Stanislav Karol — Sat, 08 Jan 2022 09:24:59 +0000

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

В цикле от 1 января по 31 декабря (включая 29 февраля)
Сформировать список ссылок для первых COUNT_REQUEST дней
Запросить праздники для первых COUNT_REQUEST дней
Запомнить праздники
Подождать DELAY_REQUEST секунд (ведь у меня цель не задосить сайт, а парсить)
Счётчик цикла увеличить на COUNT_REQUEST
После выхода из цикла записать считанные праздники в JSON.

Перейдём к реализации на JS

Первый и шестой пункт цикла:

const COUNT_REQUEST = 2;
const DELAY_REQUEST = 20000;

/**
 * Прибавить в дате countDays дней
 * @param {Date} date
 * @param {number} countDays
 * @returns {Date}
 */
export function addDay(date, countDays = 1) {
  const newDate = new Date(date);
  return new Date(newDate.setDate(newDate.getDate() + countDays));
}


const startDate = new Date("2020-01-01");
const endDate = new Date("2020-12-31");

let loop = new Date(startDate);
while (loop <= endDate) {
  loop = addDay(loop, COUNT_REQUEST);
  await delay(DELAY_REQUEST);
}

2. Сформировать список ссылок для первых COUNT_REQUEST дней

/**
 * @typedef {Object} UrlData
 * @property {Date} date - Запрашиваемый день
 * @property {string} url - Ссылка
 */

/**
 * Получить массив ссылок для countDays дней
 * @param {Date} startDate С какой даты начинать делать ссылки
 * @param {number} countDays Сколько ссылок спрашивать
 * @param {Date} endDate За какую дату не заходить
 * @returns {UrlData}
 */
export function getUrls(startDate, countDays, endDate) {
  //--- Текст функции
  return urls;
}

3. Запросить праздники для первых COUNT_REQUEST дней

Для этого понадобятся два пакета node-fetch и node-html-parser.
Для реализации использовал фичу из 16 версии nodejs AbortController . Хотя и не полностью как в статье сделал,- setTimeout у меня по старинке запускается.

import fetch from "node-fetch";
import { parse } from "node-html-parser";

/**
 * Запрос списка праздников
 * @param {string} url
 * @param {Date} date
 * @returns {String[]}
 */
export async function getHolydays(url, date) {
  // Для отмены фетча
  const cancelFetch = new AbortController();
  // Промис запроса к сайту
  const promise = fetch(url, {
    timeout: REQUEST_TIMEOUT,
    signal: cancelFetch.signal,
  });
  // Время ожидания
  const timeout = setTimeout(() => {
    cancelFetch.abort();
  }, WAIT_REQUEST_TIMEOUT);
  try {
    const response = await promise;
    // Получить текст HTML
    const htmlContent = await response.text();
    // Получить структуру DOM
    const root = parse(htmlContent);
    // Массив праздников: DOM-элементы
    const source = root.querySelectorAll(".holydays >span");
    // Массив праздников: текст
    const holidays = source.map((element) => element.textContent);
    return { holidays, day: date.getDate(), month: 1 + date.getMonth() };
  } catch (e) {
    console.log("FetchError :>> ", date);
    return null;
  } finally {
    clearTimeout(timeout);
  }
}

// Получить список праздников из массива ссылок
    const promisesOfHolidays = await Promise.all(
      urlsData.map(async (ud) => await getHolydays(ud.url, ud.date))
    );

4. Запомнить праздники

Результат собирается в массив

let holidayData = [];
///
const promisesOfHolidays = await Promise.all(
    urlsData.map(async (ud) => await getHolydays(ud.url, ud.date))
    );
holidayData = [
      ...holidayData,
      ...promisesOfHolidays.filter((r) => r !== null),
    ];

5. Подождать DELAY_REQUEST секунд

Использую @stanislavkarol/delay

7. После выхода из цикла записать считанные праздники в JSON.

import fs from "fs";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

if (!fs.existsSync(`${__dirname}/../json`)) {
  fs.mkdirSync(`${__dirname}/../json`);
}

fs.writeFile(
  `${__dirname}/../json/holidays.json`,
  JSON.stringify(holidayData),
  (err) => {
    if (err) throw err;
    console.log("Data written to file");
  }
);

Всё вместе, в рабочем виде, на гитхаб.

Socket.io или игра в дурака

Stanislav Karol — Mon, 03 Jan 2022 11:00:22 +0000

Всякий раз, когда я что-то новое узнаю, мне хочется для закрепления материала написать какой-нибудь более или менее полезный проект. Вот где-то год назад я узнал как сделать сокет на веб-сервере, сделанном на nestjs. Как видно из заголовка, я для реализации своих планов и хотелок сделал игру в дурака, а точнее- в подкидного дурака. Просто потому что обычный чат все делают, это не интересно и пусть уж лучше будет лежать не особо активная игра, чем не особо активный чат.
Поскольку серверная часть игры держится на NodeJS, то есть риск при большом количестве игроков и одновременных игр повесить сервер и тeм самым растерять этих самых игроков (ха-ха, большое количество игроков на проекте с одним человеком, который следит за моими проектами). Поэтому основная часть сделана на PostgreSQL, а бэкенд просто делает авторизацию, организовывает игровой чат и вызывает функции базы данных.
К клиентской части у меня было меньше энтузиазма, чем к серверной, может поэтому игра выглядит так, как будто пришла прямиком из ... сказал бы из 90х, но в 90х не было реакта и игры были сделаны на коленках и паскале.
В этой игре игрок играет не с ботом, а с каким-то другим человеком и с этим партнёром по игре можно даже общаться в чате.
Сейчас для регистрации можно использовать какие-нибудь несуществующие адреса, например test@test.com, но кто знает, может в будущем будет приходить оповещение по почте или напоминание о пароле. Так что какую почту использовать- решать Вам.
Причём из-за того, что я не стал вкладываться в поддержку этого всего у меня серверная часть развёрнута на Heroku, а клиентская на vercel. Вот, кстати, адрес этой самой игры: https://card-game-fool.vercel.app/

Исходники клиента и сервера можно взять у меня на гитхабе.

NestJS: Получить текущего пользователя когда не подключён AuthGuard

Stanislav Karol — Sat, 17 Jul 2021 18:01:51 +0000

Я хочу, чтобы GET-запрос работал для всех пользователей: авторизованных и анонимных. Но мне бы хотелось, чтобы ответ авторизованному пользователю ещё дополнялся некоей дополнительной информацией. Например, заметку может получить анонимный пользователь, а зарегистрированный пользователь ещё получит информацию о статусе этой заметке: Она в избранном, автор у пользователя в друзьях и т.п.
На момент написания этой заметки у NestJS для этого функционала нет настроек. Но их можно написать самому. Я предлагаю на мой взгляд простое решение.
Сперва вводная часть: Авторизация у меня проходит при помощи jwt, поэтому в проекте обязательно должны быть сделаны рекомендованные шаги (переписывать их сюда я не стал). Вот только AuthGuard (по ссылке это класс JwtAuthGuard) должен быть другим. В поставленной задаче нам не нужно выбрасывать ошибку, так что если пользователь не авторизован, то вместо его id, email или что там у Вас в токене зашифровано, можно вернуть null.
Вот реализация этого:
jwt.guard.ts

import { Injectable } from '@nestjs/common';
import { AuthGuard } from '@nestjs/passport';

@Injectable()
export class JwtAuthGuard extends AuthGuard('jwt') {}

/**
 * Неавторизованные пользователи могут воспользоваться службой.
 * При этом user будет равен null
 */
@Injectable()
export class AllowNullUserGuard extends AuthGuard('jwt') {
  handleRequest(err, user) {
    // Если пользователь на авторизован, то user = null
    return user || null;
  }
}

JwtAuthGuard - это обычный guard, который следит за тем, чтобы неавторизованный пользователь не прошёл.
AllowNullUserGuard - это кастомный guard, который не будет выбрасывать ошибку, если пользователь не авторизовался, а будет выдавать null. Использование его в деле может быть например таким:

  @Get(':slug')
  @UseGuards(AllowNullUserGuard)
  async getSingleArticle(
    @Param('slug') slug: string,
    @User() currentUser: UserEntity | null,
  ) {
    return currentUser;
  }

Здесь используется декоратор @User :

import { createParamDecorator, ExecutionContext } from '@nestjs/common';

import { ExpressRequest } from '@app/types/expressRequest.interface';

export const User = createParamDecorator((data: any, ctx: ExecutionContext) => {
  const request = ctx.switchToHttp().getRequest<ExpressRequest>();
  if (!request.user) return null;

  if (data) {
    return request.user[data];
  }
  return request.user;
});

Загрузка изображений в cloudinary- модуль для NestJS

Stanislav Karol — Sat, 10 Jul 2021 15:21:16 +0000

В работе над проектом потребовалось сделать загрузку картинок. Когда я писал "Кулинарную книгу", то использовал сервис Сloudinary. Но там был express, как дела обстоят в Nest? Готового модуля нет, но зато есть документация по модулям: Стартовая страница как написать свой модуль.
Постараюсь по шагам описать свои действия как написал модуль.

Подготовка настроек

Ну, конечно, сперва нужно в недоступном для случайных зрителей месте сохранить параметры доступа к сервису. Вот что в файле .env:

CLOUDINARY_CLOUD_NAME=cloudinaryCloudName
CLOUDINARY_API_KEY=1029384756
CLOUDINARY_API_SECRET=secrectapi

Написание провайдера

Модуль будет хранится в каталоге src/cloudinary .

Для модуля необходим провайдер. В моём случае всё, что нужно от провайдера- это получение вышенаписанных параметров и передача их сервису. Чуть далее, мы узнаем как такой провайдер можно создать, поэтому пишем вот такой файл src/cloudinary/cloudinary.provider.ts:

import { Provider } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';

export const cloudinaryProvider: Provider = {
  provide: 'CLOUDINARY_MODULE_OPTIONS',
  inject: [ConfigService],
  useFactory: async (configService: ConfigService) => {
    return {
      cloudinaryCloudName: configService.get<string>('CLOUDINARY_CLOUD_NAME'),
      cloudinaryApiKey: configService.get<string>('CLOUDINARY_API_KEY'),
      cloudinaryApiSecret: configService.get<string>('CLOUDINARY_API_SECRET'),
    };
  },
};

Содержимое из этого файла должно попасть в сервис, который будет отвечать за загрузку файлов.
Начало этого сервиса будет таким:
src/cloudinary/cloudinary.service.ts

import { HttpException, HttpStatus, Inject, Injectable } from '@nestjs/common';
import { UploadApiErrorResponse, UploadApiResponse, v2 } from 'cloudinary';

import { CloudinarySettings } from './types/types';


@Injectable()
export class CloudinaryService {
  constructor(@Inject('CLOUDINARY_MODULE_OPTIONS') options: CloudinarySettings) {
    this.cloudinary = v2;
    this.cloudinary.config({
      cloud_name: options.cloudinaryCloudName,
      api_key: options.cloudinaryApiKey,
      api_secret: options.cloudinaryApiSecret,
    });
  }
}

CloudinarySettings из src/cloudinary/types/types.ts описывает известные нам опции, которые приходят от провайдера:

export type CloudinarySettings = {
  cloudinaryCloudName: string;
  cloudinaryApiKey: string;
  cloudinaryApiSecret: string;
};

И как говорит документация cloudinary для загрузки используется объект поток (Stream), но через upload приходят файлы в виде буфера. Вопросом о переводе буфера в поток будет заниматься пакет buffer-to-stream, который нужно будет поставить. Естественно нужно поставить ещё пакет cloudinary и в dev-зависимость пакет @types/buffer-to-stream.
А дальше дело за малым: Написать метод, который будет загружать картинки в облако. У меня для тэгов к изображениям используется тип TypeUpload:

export type TypeUpload = 'avatar' | 'content';

В нём я в тэгах обозначаю, что за картинки загружены: аватар или содержимое. Вот этот сервис, который загружает картинки: src/cloudinary/cloudinary.service.ts

import { HttpException, HttpStatus, Inject, Injectable } from '@nestjs/common';
import { UploadApiErrorResponse, UploadApiResponse, v2 } from 'cloudinary';
import toStream = require('buffer-to-stream');

import { CloudinarySettings, TypeUpload } from './types/types';
import { CLOUDINARY_MODULE_OPTIONS } from './cloudinary.constants';
import { TAG_BASE_NAME } from './constants/tagFiles';

@Injectable()
export class CloudinaryService {
  constructor(@Inject(CLOUDINARY_MODULE_OPTIONS) options: CloudinarySettings) {
    v2.config({
      cloud_name: options.cloudinaryCloudName,
      api_key: options.cloudinaryApiKey,
      api_secret: options.cloudinaryApiSecret,
    });
  }

  /**
   * Метод загрузки изображений
   */
  async uploadImage({
    file,
    type = 'avatar',
  }: {
    file: Express.Multer.File;
    type: TypeUpload;
  }): Promise<UploadApiResponse> {
    // Загрузка картинки в облако
    const uploadResponse = await this.uploadFile(file);
    if (this.isUploadApiErrorResponse(uploadResponse)) {
      throw new HttpException(
        'Upload avatar error',
        HttpStatus.UNPROCESSABLE_ENTITY,
      );
    }
    // После загрузки картинки назначить ей тэг:
    const tag = `${TAG_BASE_NAME}_${type}`;
    const { public_id } = uploadResponse;
    await v2.uploader.add_tag(tag, [public_id]);
    return uploadResponse;
  }

  /**
   * Загрузка файла в сервис cloudinary
   */
  private async uploadFile(
    file: Express.Multer.File,
  ): Promise<UploadApiResponse | UploadApiErrorResponse> {
    if (!file) {
      throw new HttpException(
        'File not present!',
        HttpStatus.UNPROCESSABLE_ENTITY,
      );
    }
    return new Promise((resolve, reject) => {
      const upload = v2.uploader.upload_stream((error, result) => {
        if (error) return reject(error);
        resolve(result);
      });
      // Буфер в виде потока отправить в функцию upload
      toStream(file.buffer).pipe(upload);
    });
  }

  /**
   * Проверка результата загрузки на наличие ошибок
   * Т.е. - проверка типа: Это UploadApiErrorResponse ?
   */
  private isUploadApiErrorResponse(
    response: UploadApiErrorResponse | UploadApiResponse,
  ): response is UploadApiErrorResponse {
    return (<UploadApiErrorResponse>response).http_code !== undefined;
  }
}

Ну и модуль, который который всё сводит в единую сущность:

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';

import { cloudinaryProvider } from './cloudinary.provider';
import { CloudinaryService } from './cloudinary.service';

@Module({
  imports: [ConfigModule],
  providers: [CloudinaryService, cloudinaryProvider],
  exports: [CloudinaryService],
})
export class CloudinaryModule {}

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

Вставить запись в PostgeSQL, если таковой нет в таблице

Stanislav Karol — Sun, 04 Jul 2021 13:45:04 +0000

Необходимо сделать такую возможность: Вставить уникальную запись в таблицу бд postgresql и вернуть id этой записи (даже если такая запись есть).
Например речь идёт о таблице tags:

CREATE TABLE "tags" (
"id" uuid NOT NULL DEFAULT uuid_generate_v4(),
"name" character varying NOT NULL,
CONSTRAINT "UQ_d90243459a697eadb8ad56e9092" UNIQUE ("name"),
CONSTRAINT "PK_e7dc17249a1148a1970748eda99" PRIMARY KEY ("id")
)

Здесь соблюдается главное требование: записи должны быть уникальными.
Но задача состоит из двух шагов:

Если такого тэга нет, то вставить название тэга,
Вернуть id тэга по имени,- этот тэг будет или новый или старый.

Как это сделать одним запросом я не подскажу, но как сделать из двух, - пожалуйста (мне в этом помогла документация ):

INSERT INTO tags (name) 
SELECT 'Новость'
WHERE
    NOT EXISTS (
        SELECT id FROM tags WHERE name = 'Новость'
    )
-- RETURNING id -- Если второй шаг необязателен, то можно так сделать
;
select id from tags WHERE name = 'Новость';

На правах ЖЖ, для себя, чтобы не забыть.

Отправка писем в NestJS используя nodemailer. Публикация скриптов.

Stanislav Karol — Sat, 03 Jul 2021 11:49:19 +0000

Мне понадобилось отправить сообщение по почте о подтверждении регистрации на сайте. На текущий момент проверенное, хорошо зарекомендовавшее себя решение это Nodemailer. В роли бек-сервера у меня NestJS. Для NestJS есть модуль Nest JS Mailer, вот с ним и решил работать. Сперва установим пакеты @nestjs-modules/mailer, nodemailer и в dev-зависимость будет не лишним поставить @types/nodemailer . В качестве сервера почты я решил воспользоваться услугами яндекс.

Установка модуля

После того, как получена учётная запись от яндекса, записал в файл .env такие переменные:
MAIL_TRANSPORT строка подключения к smtp-серверу для отправки почты (см. https://nodemailer.com/smtp/)
MAIL_FROM_NAME от чьего имени будет приходить почта.

Пример:

MAIL_TRANSPORT=smtps://useYandex@yandex.ru:password@smtp.yandex.ru
MAIL_FROM_NAME=WebWork

Написал в файле src/configs/mail.config.ts формирование настройки почтовой службы:

import { ConfigService } from '@nestjs/config';
import { EjsAdapter } from '@nestjs-modules/mailer/dist/adapters/ejs.adapter';

export const getMailConfig = async (
  configService: ConfigService,
): Promise<any> => {
  const transport = configService.get<string>('MAIL_TRANSPORT');
  const mailFromName = configService.get<string>('MAIL_FROM_NAME');
  const mailFromAddress = transport.split(':')[1].split('//')[1];

  return {
    transport,
    defaults: {
      from: `"${mailFromName}" <${mailFromAddress}>`,
    },
    template: {
      adapter: new EjsAdapter(),
      options: {
        strict: false,
      },
    },
  };
};

Что я здесь задаю: defaults.from - задаётся имя/адрес отправителя, template - у меня было больше практики с ejs, поэтому выбран такой формат для шаблонов писем.
Завершающий шаг установки - подключение модуля почты в приложение:

import { MailerModule } from '@nestjs-modules/mailer';

@Module({
  imports: [

    MailerModule.forRootAsync({
      imports: [ConfigModule],
      inject: [ConfigService],
      useFactory: getMailConfig,
    }),

  ],
})

Отправка почты

У меня уже есть шаблон почты в файле confirmReg.ejs:

<main>
  Доброго дня, <%= locals.username %>!<br />
  От Вас поступила регистрация на сайте post-life.<br />
  Для окончания регистрации пройдите пожалуйста по
  <a href="<%= urlConfirmAddress %><%= id %>">ссылке</a> .
</main>

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

import { MailerService } from '@nestjs-modules/mailer';

@Injectable()
export class UserService {
  constructor(
    // помимо всего прочего подключение сервиса отправки
    private readonly mailerService: MailerService,
  ) {}
///
}

  async sendConfirmMail(user: UserEntity) {
    const urlConfirmAddress = this.configService.get<string>(
      'URL_CONFIRM_ADDRESS',
    );
    // Отправка почты
    return await this.mailerService
      .sendMail({
        to: user.email,
        subject: 'Подтверждение регистрации',
        template: join(__dirname, '/../templates', 'confirmReg'),
        context: {
          id: user.id,
          username: user.username,
          urlConfirmAddress,
        },
      })
      .catch((e) => {
        throw new HttpException(
          `Ошибка работы почты: ${JSON.stringify(e)}`,
          HttpStatus.UNPROCESSABLE_ENTITY,
        );
      });
  }

Публикация скриптов

Описываемый проект после публикации и проверки отправки почты выдал ошибку о том, что не может найти файл confirmReg.ejs . Почему шаблоны писем потерялись? - Компилятор из TS в JS "не заметил" файлы с раcширением ejs и после билда проекта каталог src/templates не оказался в папке назначения dist . Мои поиски решения привели меня вот на эту страницу . Суть того, что можно оттуда вынести: у NestJS есть свои опции настройки для typescript и в них можно указать файлы, которые ts должен скопировать "как есть" в каталог назначения. Теперь nest-cli.json стал таким:

{
  "collection": "@nestjs/schematics",
  "sourceRoot": "src",
  "compilerOptions": {
    "assets": [
      "**/*.ejs"
    ],
    "watchAssets": true
  }
}

Ссылка на проект : https://github.com/SLKarol/post-life

Задача для программистов

Stanislav Karol — Sat, 26 Jun 2021 11:54:38 +0000

Есть интересная задача среднего уровня для прокачивания навыков: Написать приложение RealWorld. Проект описан на гитхабе. Суть его в том, чтобы написать свой блог, включая авторизацию. На этом сайте можно найти спецификацию api, стили к отрисовке содержимого. Ну и конечно же многочисленные примеры реализации на чём только можно реализовывать.
Так что если у Вас есть желание что-то написать-потренироваться, но не т идеи, то вот одна из них.

Telegram bot. Добавим интерактивности

Stanislav Karol — Wed, 19 May 2021 08:28:11 +0000

В этой заметке я писал о том, как по команде бота выдаётся случайное фото, а если добавить параметр к команде, то будет целенаправленный выбор темы.
У меня в том боте, который я неспешно сейчас пишу, есть нечто подобное: по команде выбирается случайный канал и из него достаются картинки. Если указали канал, то выбор идёт из указанного. До какого-то момента это меня устраивало, пока список каналов не стал подходить к 10. И тогда я задумал сделать такую возможность: дать пользователю выбрать канал по нажатию на кнопку.

Вот примерно как это сделано у меня.
Не важно, что вы используете в качестве библиотеки обращения к api, важно понимание этого самого api. Мы будем работать с методом sendMessage

    this.bot.sendMessage(chatId, "Выберите канал:", {
      reply_markup: {
        resize_keyboard: true,
        inline_keyboard: [
          [{ text: "Случайно", callback_data: "random" }],
          [{ text: "Спорт", callback_data: "sport" }],
          [{ text: "Кино", callback_data: "cinema" }],
          [{ text: "Музыка", callback_data: "music" }],
        ],
      },
    });

Результат:

Здесь у нас каждый массив с объектом- это строка с кнопкой. Можно и по-другому сделать, например так:

    this.bot.sendMessage(chatId, "Выберите канал:", {
      reply_markup: {
        resize_keyboard: true,
        inline_keyboard: [
          [{ text: "Случайно", callback_data: "random" }],
          [
            { text: "Спорт", callback_data: "sport" },
            { text: "Кино", callback_data: "cinema" },
            { text: "Музыка", callback_data: "music" },
          ],
        ],
      },
    });

Осталось добавить обработчик нажатия на кнопку. В библиотеке node-telegram-bot-api можно это сделать используя функцию on - первый параметр задаёт событие бота, на которое реагировать, второй параметр- обработчик этого события.

// После инициализации бота, задать обработчик 
   this.bot.on("callback_query", this.callbackQuery); 
// обработчик нажатия на кнопки
  callbackQuery = async (callbackQuery) => {
    const msg = callbackQuery.message;
    // Спрятать клавиатуру (оптимально)
    // await this.removeHisKeyboard(callbackQuery);
    // См. ниже пояснения
    await this.bot.answerCallbackQuery(callbackQuery.id);
    const { data = "" } = callbackQuery;
    //..
  };
  /**
   * Удалить вывод клавиатуры
   */
  removeHisKeyboard = (callbackQuery) => {
    const messageText = callbackQuery.message.text;
    const messageId = callbackQuery.message.message_id;
    return this.bot
      .editMessageText(messageText, {
        message_id: messageId,
        chat_id: callbackQuery.from.id,
        reply_markup: {
          inline_keyboard: [],
        },
      })      
  };

Про callbackQuery написано в документации по api - там же объясняется, почему нужно вызывать answerCallbackQuery . Функция removeHisKeyboard здесь может и не нужна, но если Вы хотите скрыть клавиатуру, после того, как сделан выбор, то можно ей воспользоваться. Здесь бот редактирует своё сообщение с интерактивным выбором,- он просто очищает inline_keyboard.

Телеграм-бот на NodeJS. Автоматическая рассылка.

Stanislav Karol — Sun, 04 Apr 2021 15:46:12 +0000

В этой заметке напишу о том, как я научил бота делать автоматическую еженедельную рассылку. Задача перед ботом такая: Каждую пятницу он бодро должен собрать некий материал, поднимающий настроение и сделать рассылку всем своим подписчикам.
Поэтому задачу можно разделить на три больших блока:

Один раз в неделю собрать информацию
Собрать всех подписчиков
Разослать этим подписчикам информацию.

С первым пунктом на первый взгляд проблем нет: Делаем запрос к некоему сборщику (который никак не связан с ботом), он должен вернуть массив или объект записей для новой рассылки. Проблема в другом: когда и как запускать этот сборщик.
Можно решать задачу "в лоб" - поставить setInterval или setTimeout и вызывать некую веб-службу, может даже обращаться к api-методу. Но здесь есть очевидный минус: При обновлении скриптов или перезапуска сервера или как в случае с некими популярными хостингами, использующими serverless computing наше приложение после бездействия выключится и таймеры с интервалами исчезнут.
Поэтому первый пункт я советую делать не на уровне NodeJS, а на уровне сервера и помогут нам в этом знания настройки cron'a. Если не знаете, как настраивать, то спросите примеры у гуру или на каком-нибудь другом ресурсе.
Если Ваш бот развёрнут на AWS, то можно написать к примеру такую конфигурацию в файле serverless.yml :

  # Каждый день в шесть утра запустить рассылку
  sendMail:
    handler: handler.sendMail
    events:
      - http:
          path: sendMail
          method: post
          cors: true
      # Запускать эту функцию каждый день в 6 утра (время местное у сервера)
      - schedule: cron(0 6 * * ? *)

Здесь говорится о том, что у нас уже есть POST-метод sendMail на нашем сервере и мы хотим его запускать каждый день в шесть утра.
У меня бот развёрнут на heroku и там нет этих возможностей, зато справка heroku говорит, что можно воспользоваться GitHub Actions. В проекте на гитхабе создал каталог .github/workflows , в нём файл manualPOST.yml

name: Cron for friday mailing
on:
  schedule:
    - cron: "0 6 * * 5"
jobs:
  cron:
    runs-on: ubuntu-latest
    steps:
      - name: Call friday sheduler
        run: curl -X POST https://telegram-bot.herokuapp.com/api/sendMail

Здесь говорится, что каждую пятницу, в шесть утра, будет вызываться https://telegram-bot.herokuapp.com/api/sendMail , который отвечает за рассылку.
Мой бот находится не по адресу telegram-bot.herokuapp.com , этот адрес я привёл для примера.
Сейчас текст sendMail приводить не буду, позже, возможно в комментах, дам ссылку на гитхаб. В написании этой функции нужно учитывать особенности serverless functions и помнить, что срок их жизни весьма недолгий. Поэтому у меня там запускаются несколько задач в промисах: сбор подписчиков и сбор материала. Затем, когда Promise.all вернёт мне результаты, запускаю другую службу- рассылки адресатам данных. Таким образом сохраняются требования системы о том, что службы сами по себе работают недолго.

Второй и третий шаги рассылки можно позже подсмотреть в гитхабовских проектах.

Телеграм-бот на NodeJS. Создание справки

Stanislav Karol — Fri, 02 Apr 2021 11:06:03 +0000

В этой заметке я расскажу о том, как сделал справку по командам бота, показанную на скриншоте.
Когда программист будет знать, какие команды понимает его бот, то он может задать команды используя бота BotFather для того, чтобы задать эти команды. Задаём ему команду /help, чтобы увидеть список команд, далее видим /setcoomands, запустив её, выбираем своего бота и далее заводим эти команды.

Я вижу такие минусы в этом способе:

Этот способ задаёт команды для авто подстановки, но не даёт возможность задать содержимое команды /help (да и новый бот не знает такую команду)
Когда изменится текст/список команд, то придётся снова его вводить.

Тогда предлагаю такой способ: Завести команды в программе, используя метод setMyCommands. И сразу же, не отходя далеко, напишем команду /help.

Сперва нам нужно задать константу, в которой будут команды бота:



const COMMANDS = [
  {
    command: "friday",
    description: "Показать пятничную подборку",
  },
  {
    command: "video",
    description: "Найти и показать видеоконтент",
  },
  {
    command: "subscribe",
    description:
      "Подписаться на пятничную подборку (рассылка выходит по пятницам)",
  },
  {
    command: "unsubscribe",
    description: "Отписаться от рассылки",
  },
  {
    command: "help",
    description: "Показать справку",
  },
  {
    command: "quit",
    description: "Отписаться от рассылки, выйти из чата",
  },
];

module.exports = COMMANDS;

Затем, после инициализации бота (об этом я писал в предыдущих заметках) , сделайте такую команду:



// Импортировать массив
const COMMANDS = require("../const/commands");
// Задать команды боту
bot.setMyCommands(COMMANDS);

Пару слов о содержимом этого массива. Это не произвольный массив объектов, эти объекты должны соответствовать типу BotCommand:
command это название команды,
description - её описание.

Второй шаг- научить бота эти команды показывать по команде help.
Для этого нужно составить текст вывода по этой команде, основываясь на массиве COMMANDS. Я так сделал:



const getHelp = () => {
  let helpText = `Телеграм-бот, созданный для развлечения, а не для работы.\n*Доступные команды:*\n`;
  helpText += COMMANDS.map(
    (command) => `*/${command.command}* ${command.description}`
  ).join(`\n`);
  return helpText;
};


bot.command("audio", (ctx) => {
  return ctx.replyWithMarkdown(getHelp());
});

Сейчас я не использую библиотеку telegraf, о которой я ранее писал, я использую node-telegram-bot-api текст функции у меня выглядит по-другому, вот её полный текст:



const TelegramBot = require("node-telegram-bot-api");

const COMMANDS = require("../const/commands");

/**
 * Генератор содержимого команды help
 * @param {string|number} chatId
 * @param {TelegramBot} bot
 */
const help = (chatId, bot) => {
  let helpText = `Телеграм-бот, созданный для развлечения, а не для работы.\n*Доступные команды:*\n`;
  helpText += COMMANDS.map(
    (command) => `*/${command.command}* ${command.description}`
  ).join(`\n`);
  return bot.sendMessage(chatId, helpText, {
    parse_mode: "Markdown",
  });
};

module.exports = help;

Что ещё можно сделать по оформлению справки? - Можно для массива COMMANDS сделать немного другое наполнение, например такое:



const COMMANDS = [
  {
    command: "friday",
    description: "Показать пятничную подборку",
    hint: true,    
  },
  {
    command: "video",
    description: "Найти и показать видеоконтент",
    hint: true,
    help: true,
  },
  {
    command: "subscribe",
    description:
      "Подписаться на пятничную подборку (рассылка выходит по пятницам)",
  },
///

Добавить два поля: hint и help. И если значение в них true то выводить содержимое соответственно в подсказке командной строки или в окне справки. Для этого нам пригодятся методы массива filter и map или можно обойтись одним методом - reduce.

P.S.
В дальнейших заметках я буду приводить примеры используя только "node-telegram-bot-api" - мне эта библиотека показалась более удобной, чем telegraf.

Запрос к api с тайм-аутом

Stanislav Karol — Fri, 05 Mar 2021 11:51:27 +0000

Задача, которую я встретил, может иметь цель не только проверки теоретической подготовки, но есть в ней и практическая ценность.

Есть функция api, которая обращается к адресу и возвращает строку,- токен. Её сигнатуру (контракт) можно описать так:

type Api=(url: string) => Promise<string>;

В задаче нужно обратиться к двум адресам и сравнить строки, если совпадают, то вывести в консоль строку.
Если не совпадают - вывести в консоль строку 'Unauthorized'.
Если один из сервисов не ответил - вывести в консоль строку 'Forbidden'
Если один из сервисов отвечает больше 10 секунд - вывести в консоль строку 'Timeout'.

Для решения этой задачи нам понадобятся два метода работы с промисами: race и all .
И вот для чего нам это нужно.
Определим функцию, которая будет ожидать заданное количество миллисекунд. Эта функция будет выполнять роль таймера- если прошло 10 секунд, то выдать ошибку.

function wait(ms = 10000) {
  // Вернуть промис, возвращающий через 10 секунд ошибку:
  // Запуск функции reject c параметром "Timeout"
  return new Promise((resolve, reject) => {
    setTimeout(reject, ms, "Timeout");
  });
}

Далее определим промис для запроса токена:

const request1 = api("oauth-url");

А теперь напишем промис, который будет опрашивать токен с тайм-аутом ожидания:

const promise1 = Promise.race([wait(), request1]);

Вот на этой строке и держится всё решение. Первый элемент массива- это функция-таймер, которая выбрасывает исключение, второй элемент- это запрос токена. Если запрос будет успешным, то промис вернёт его результат; если продлится больше 10 секунд, то сработает исключение с параметром "Timeout".
Эта строка и есть краеугольный камень решения, который имеет практическую ценность. В чём она: Можно ограничить тайм-аут у fetch'a (возможно в практике у Вас такое было: запрос к апи мог длиться больше двух минут и пора бы уже прекращать ожидание ответа).

Аналогично подготовим второй промис:

const request2 = api("ldap-url");
const promise2 = Promise.race([wait(), request2]);

Для выполнения этой части задания "Если один из сервисов не ответил..." нам пригодится Promise.all, который выбрасывает ошибку, если один из сервисов не ответит:

Promise.all([promise1, promise2]).then(
  ([s1, s2]) => {
    const re = s1 === s2 ? s1 : "Unauthorized";
    console.log(re);
  },
  (err) => {
    console.error(err);
  }
);

Что выше написано: Если строки равны, то вывести первую строку, иначе вывести Unauthorized. Если же какой-то из запросов api будет с ошибкой, то в консоль будет выведена ошибка.

Задача почти готова. Но что-то не хватает. Когда мы посмотрим на текст программы, мы не увидим где задаётся ответ в виде строки "Forbidden". У нас есть вывод в консоль ошибки:

  (err) => {
    console.error(err);
  }

И этот вывод может показать строку "Timeout", но если запрос к api будет ошибочным, то мы получим объект Error. Поэтому давайте промис запроса перепишем:

const promise1 = Promise.race([wait(), request1])
  .then((res1) => res1)
  .catch((e) => {
    throw e === "Timeout" ? "Timeout" : "Forbidden";
  });

Итак, мы подошли к решению. Вот его полный текст:

function wait(ms = 10000) {
  // Вернуть промис, возвращающий через 10 секунд ошибку:
  // Запуск функции reject c параметром "Timeout"
  return new Promise((resolve, reject) => {
    setTimeout(reject, ms, "Timeout");
  });
}

const request1 = api("oauth-url");
const promise1 = Promise.race([wait(), request1])
  .then((res1) => res1)
  .catch((e) => {
    throw e === "Timeout" ? "Timeout" : "Forbidden";
  });

const request2 = api("ldap-url");
const promise2 = Promise.race([wait(), request2])
  .then((res2) => res2)
  .catch((e) => {
    throw e === "Timeout" ? "Timeout" : "Forbidden";
  });

Promise.all([promise1, promise2]).then(
  ([s1, s2]) => {
    const re = s1 === s2 ? s1 : "Unauthorized";
    console.log(re);
  },
  (err) => {
    console.error(err);
  }
);