Как делать интерактивные знаки в Телеграм

Сегодня будем делать бота — это отличное (и быстрое) занятие, которое развивает уставший мозг и даёт возможность отправить друзьям ссылочку со словами «Смотри, это моё».

Для работы понадобятся

• Редактор кода, чтобы писать код. Если не знаете, какой выбрать — мы уже рассказывали. Если не умеете писать код, то вот инструкция, как его написать и запустить.
• Node.js любой версии, выше 0.12. Нужно, чтобы библиотека для ботов заработала. Как установить Node.js.
• Консоль. Или встроенный в систему вариант, или какой-нибудь другой.
• VPN. Возможно, но не факт, потому что Телеграм работает не везде.

Шаг 1. Регистрируем бота

Придумываем название и имя боту. Название — то, как он будет подписан в списке контактов. Имя — строка, по которой его можно будет найти. Обратите внимание, что имя должно оканчиваться на bot . В ответ мы получим токен — длинную последовательность символов, которая пригодится нам в будущем. Мы назвали бота echoKeksBot , но вам придётся придумать другое название, потому что это уже занято. Извините.

Как запустить снегопад в телеграм

Шаг 2. Создаём проект

Создаем папку в любом месте и открываем её в консоли. Там пишем npm init -y — эта команда создаст файл package.json , который выглядит примерно так:

Теперь установим node-telegram-bot-api — это библиотека для создания телеграм-ботов на Node.js. Введём команду:

npm install —save —save-exact node-telegram-bot-api

Создадим пустой файл index.js и напишем там самого простого бота, который будет отвечать на любое сообщение:

bot.on(‘message’, (msg) => < const chatId = msg.chat.id; bot.sendMessage(chatId, ‘Привет, Друг!’); >);

Шаг 3. Запускаем бота

Тут всё просто, в консоли пишем node index.js , заходим к нашему боту в телеграм и начинаем с ним общаться. Не закрывайте консоль — бот работает только на вашем компьютере, и без консоли он не станет отвечать.

Как видим, бот успешно отвечает. Но бот-повторяха — не интересно, усложним задачу. Пусть бот присылает нам картинку.

Шаг 4. Отсылаем картинку

Добавим картинку с Кексом в папку с проектом. Для отправки изображения используем метод .sendPhoto() — передадим в него id чата и путь до картинки. Получится такой код:

bot.on(‘message’, (msg) => < const chatId = msg.chat.id; bot.sendPhoto(chatId, ‘keks.png’); >);

Запускаем бота, проверяем, работает:

Шаг 5. Добавим клавиатуру. И пёсика

Добавим фотографию милого пёсика в корень проекта. Теперь там две картинки.

Создадим конфигурацию для клавиатуры в боте, пусть у нас будет 3 кнопки: «Хочу кота», «Хочу пёсика» и «Пойти учиться».

// Конфиг клавиатуры const keyboard = [ [ < text: ‘Хочу кота’, // текст на кнопке callback_data: ‘moreKeks’ // данные для обработчика событий >], [ < text: ‘Хочу песика’, callback_data: ‘morePes’ >], [ < text: ‘Хочу проходить курсы’, url: ‘https://htmlacademy.ru/courses’ //внешняя ссылка >] ];

На нажатия первых двух кнопок мы ответим соответствующим сообщением в Телеграме, а последняя уведёт на внешний ресурс.

Чтобы отличить первые 2 кнопки, воспользуемся полем callback_data , где будем передавать тип кнопки. Для обработки нажатий добавим слушателя на событие callback_query , и в зависимости от значения query.data отправим нужную картинку к пользователю.

// Обработчик нажатий на клавиатуру bot.on(‘callback_query’, (query) => < const chatId = query.message.chat.id; let img = »; if (query.data === ‘moreKeks’) < // если кот img = ‘keks.png’; >if (query.data === ‘morePes’) < // если пёс img = ‘pes.png’; >if (img) < bot.sendPhoto(chatId, img, < // прикрутим клаву reply_markup: < inline_keyboard: keyboard >>); > else < bot.sendMessage(chatId, ‘Непонятно, давай попробуем ещё раз?’, < // прикрутим клаву reply_markup: < inline_keyboard: keyboard >>); > >);

Не забудем про возможные ошибки и предложим пользователю попробовать снова, если он ввёл что-то не то. Перезапустим бота и проверим — всё работает. Главное — не закрывать консоль, иначе бот перестанет отвечать.

Полный файл с кодом: index.js.

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Случайное число из диапазона

Допустим, вам зачем-то нужно целое случайное число от min до max . Вот сниппет, который поможет:

function getRandomInRange(min, max)

1. Math.random () генерирует случайное число между 0 и 1. Например, нам выпало число 0.54 .
2. (max — min + 1): определяет количество возможных значений в заданном диапазоне. 10 — 0 + 1 = 11 . Это значит, что у нас есть 11 возможных значений (0, 1, 2, . 10).
3. Math.random () * (max — min + 1): умножает случайное число на количество возможных значений: 0.54 * 11 = 5.94 .
4. Math.floor (): округляет число вниз до ближайшего целого. Так, Math.floor(5.94) = 5 .
5. . + min: смещает диапазон так, чтобы минимальное значение соответствовало min . Но в нашем примере, так как min = 0 , это не изменит результат. Пример: 5 + 0 = 5 .
6. Итак, в нашем примере получилось случайное число 5 из диапазона от 0 до 10.

Чтобы протестировать, запустите:

console.log(getRandomInRange(1, 10)); // Тест

• 7 сентября 2023

В чём разница между var и let

Если вы недавно пишете на JavaScript, то наверняка задавались вопросом, чем отличаются var и let , и что выбрать в каждом случае. Объясняем.

var и let — это просто два способа объявить переменную. Вот так:

var x = 10; let y = 20;

Переменная, объявленная через var , доступна только внутри «своей» функции, или глобально, если она была объявлена вне функции.

function myFunction() < var z = 30; console.log(z); // 30 >myFunction(); console.log(z); // ReferenceError

Это может создавать неожиданные ситуации. Допустим, вы создаёте цикл в функции и хотите, чтобы переменная i осталась в этой функции. Если вы используете var , эта переменная «утечёт» за пределы цикла и будет доступна во всей функции.

Переменные, объявленные с помощью let доступны только в пределах блока кода, в котором они были объявлены.

if (true) < let a = 40; console.log(a); // 40 >console.log(a); // ReferenceError

В JavaScript блок кода — это участок кода, заключённый в фигурные скобки <> . Это может быть цикл, код в условном операторе или что-нибудь ещё.

if (true) < let blockScoped = «Я виден только здесь»; console.log(blockScoped); // «Я виден только здесь» >// здесь переменная blockScoped недоступна console.log(blockScoped); // ReferenceError

Если переменная j объявлена в цикле с let , она останется только в этом цикле, и попытка обратиться к ней за его пределами вызовет ошибку.

• 30 августа 2023

Быстрый гайд по if, else, else if в JavaScript

Допустим, вы собираетесь идти на прогулку. Если на улице солнечно, вы возьмёте с собой солнечные очки.

Это можно описать с помощью оператора if .

let weather = «sunny»; if (weather === «sunny»)

А если погода не солнечная, а, скажем, дождливая, вы возьмете зонт.

Этот сценарий можно описать с помощью if-else .

let weather = «rainy»; if (weather === «sunny») < console.log(«Возьму солнечные очки»); >else

Условный оператор if-else if-else

Теперь представим, что у вас есть несколько вариантов транспорта для дороги на работу: машина, велосипед, общественный транспорт. Выбор будет зависеть от различных условий, например, погоды и времени суток. Логично, что в дождь безопаснее ехать на автобусе, а в хорошую погоду можно прокатиться на машине или велосипеде, если утро и пробки. То есть схема такая:

И всё это очень легко описывается кодом:

let weather = «sunny»; let time = «morning»; if (weather === «rainy») < // если дождь, то только так console.log(«Еду на автобусе»); >else if (time === «morning») < // если не дождь и утро console.log(«Еду на велике мимо пробок»); >else < // если второе не дождь и не утро console.log(«Еду на машине»); >

Ветвление только может показаться сложным, но вообще оно очень логичное, если понять, какие действия после каких условий выполняются. Разберитесь один раз и поймёте на всю жизнь, 100%.

• 30 августа 2023

Как исправить ошибки SyntaxError в JavaScript

Ошибки SyntaxError появляются, если разработчик нарушил правила синтаксиса JavaScript, например, пропустил закрывающую скобку или точку с запятой. Давайте посмотрим, что означает каждая ошибка и в чём может быть проблема.

Ошибка TypeError: что это и как её исправить

Ошибки TypeError появляются, когда разработчики пытаются выполнить операцию с неправильным типом данных. Давайте разберём несколько примеров: почему появилась ошибка и как её исправить.

3 способа объявить функцию в JavaScript

Функции в JavaScript можно объявить тремя способами: через декларативное объявление, функциональное выражение или с помощью стрелок. Звучит сложно, но на самом деле всё совсем не так.

Как сделать простой слайдер на HTML и JavaScript

Вы сверстали сайт и сделали его красивым с помощью CSS. Осталось добавить интерактива, и можно добавлять проект в портфолио.

«Оживить» на сайте можно что угодно: меню, модальные окна, корзину, пагинацию… В этой статье мы разберём слайдер — посмотрим, как его сделать на чистом JavaScript. Слайдер пригодится для раздела с отзывами, фотографиями сотрудников, изображениями товаров или чего-нибудь ещё — всё зависит только от вашей фантазии и проекта.

☝ Мы покажем лишь один из возможных вариантов. Это не эталонное решение, да в разработке и не бывает единственно верного способа решить задачу. Но код точно работает, поэтому можете скопировать его в свой проект.

Полезные команды для работы с Node.js

Перед тем как рассматривать полезные команды при работе с Node.js, её необходимо установить.

Команды помогают узнать версию Node.js,

node -h — показывает список всех доступных команд Node.js.

node -v , node —version — показывает установленную версию Node.js.

npm -h — показывает список всех доступных команд пакетного менеджера npm .

npm -v , npm —version — показывает установленную версию npm .

Команда npm update npm -g позволяет обновить версию npm .

npm list —depth=0 показывает список установленных пакетов.

Команда npm outdated —depth=0 покажет список установленных пакетов, которые требуют обновления. Если все пакеты обновлены, список будет пустым.

npm install package — позволяет установить любой пакет по его имени. Если при этом к команде добавить префикс -g пакет будет установлен глобально на весь компьютер.

Команда npm i package является укороченной альтернативой предыдущей команды.

npm uninstall package — удаляет установленный пакет по имени.

Команда npm list package — покажет версию установленного пакета, а команда npm view package version — последнюю версию пакета, которая существует.

Для работы с пакетным менеджером также пригодится файл package.json , который должен лежать в директории, с которой происходит работа в консоли.

Он содержит различные мета-данные, например, имя проекта, версия, описания и автор. Также он содержит список зависимостей, которые будут установлены, если вызвать из этой папки команду npm install .

Кроме этого он ещё имеет скрипты, которые вызывают другие команды консоли. Например, для этого файла вызов команды npm start вызовет запуск задачи Grunt с именем dev . А команда npm run build вызовет скрипт build , который запустит задачу в Grunt с именем build .

Во время работы часто возникает необходимость установить некоторые пакеты. Если установить пакет с префиксом —save , то он автоматически запишется в package.json в раздел dependencies . Такая же команда с префиксом —save-dev запишет пакет в раздел devDependencies .

nvm (илиNode Version Manager) — утилита, которая позволяет быстро менять версии Node.js.

Чтобы её установить, достаточно запустить скрипт

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash

Теперь можно установить последнюю версию Node.js, например, 5.0 с помощью команды nvm install 5.0 . Чтобы начать использовать её, введите команду nvm use 5.0 . Таким образом, можно быстро переключаться между версиями, например, для тестирования.

Как составлять регулярные выражения

Регулярное выражение — это последовательность символов (селекторов). Оно используется для поиска и обработки строк, слов, чисел и других текстовых данных.

Регулярные выражения выручают при решении разных задач. Например, с их помощью легко искать и менять строки в коде. Но чаще всего регулярные выражения используют для валидации форм. Давайте посмотрим, как это делать.

Проверка типа интерфейса в TypeScript

Проверка типов интерфейса — одна из ключевых возможностей TypeScript. Она помогает убедиться, что объект или класс содержат необходимый набор свойств и методов, указанных в интерфейсе. Благодаря проверке типов вы можете писать более надёжный код, ведь часть ошибок будет найдена ещё на этапе компиляции.

Источник: htmlacademy.ru

Телеграм бот кнопки. Как сделать кнопку в телеграм

Я подключил одно реле, а к нему подключил лампу. Теперь нажимая на кнопку Вкл у нас включается лампа, а нажав на ВЫКЛ выключается. Согласитесь, что это намного удобнее, и кнопки всегда на экране. Здесь ещё выведены кнопки таймера, но об этом чуть позже.

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

Эти две кнопки отвечают за включение и выключение реле. Переключение происходит достаточно быстро, практически без задержек.

Про оставшиеся кнопки таймера я расскажу позже, когда буду объяснять код скетча. Там есть некоторые трудности. Это таймер на включения на 1, 2 и до минут, но вы сами можете устанавливать любое время.

Теперь рассмотрим код скетча. Я взял свой пример о подключении реле. Про то как подключать реле или как устанавливать библиотеки и что такое токен, я рассказывать не буду. Если не понимаете о чём я, то посмотрите вот это видео.
Единственное отличие в коде – это то что я подключил реле к выводу D5 платы ESP.

В SETUP тоже нет ничего интересного. Стандартный набор подключения к WIFI сети. Ну кроме вот этой строчки.
Я правда не совсем понял, за что она отвечает. Это мой перевод комментариев. Если хотите, можете сами потестить разные значения. По умолчанию здесь стояла цифра 60. Мне показалось, что значение 20 мне больше подходят. Но особой разницы я не видел.

Весь основной код вывода приветствия и кнопок расположен вот в этом кусочке кода.
Это отвечает за включение и выключения реле от кнопок. Это стандартный код как в Ардуино. Если приходит значение ON то включить реле, а если OFF то выключить.

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

Эти строчки кода отвечают за определение вашего имени, и если оно будет не определено, то будет написано Гость. Имя вставляется в текст приветствия.
Ну вот мы и подошли к кнопкам. За вывод кнопок отвечает вот этот код. Это json. Параметры команды такие. Описание и действие. В первой части – это текст который будет выведен на кнопке, а второй это действие.
Здесь я вывел на экран 6 кнопок.
Первая кнопка отвечает за переход по адресу на вэб страницу.
В первой части написано Перейти на мой канал, а во второй части URL канала.

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

Теперь про таймер.
Здесь выведено 3 кнопки, но вы можете сделать сколько угодно.
Я сделал таймер на включение через 1, 2, и 10 минут. Дальше будет показано как это работает при нажатии первой и второй кнопки. 10 минут я ждать не стал.
Давайте рассмотрим код.
Первую. Часть мы рассматривать не будем, да и со второй тоже всё понятно. Самое интересное вот в этом коде.

При получении текста из кнопки таймера – этот текст обрабатывается функцией replace.
Будет заменено слово TIME на пустоту. Если проще сказать, то просто удалится слово TIME а останется только цифра. Это 1, 2, или 10. Но так как мы передаём текст, нам его надо перевести в числовой формат. Вот это и сделаем.
Если реле уже было включено, то выключаем его.
Напомню, что это всё сказано для реле которые управляются низким сигналом. Если у вас управление происходит высоким уровнем, то везде HIGH надо заменить на LOW.
Здесь из полученной цифры создаём минуты. Это получается умножением на 1000 и умножением на 60. Затем прибавляем время из функции millis и записываем в переменную.
Ну вот вроде со всем разобрались. Теперь давайте смотреть что получилось. По ходу я буду иногда вставлять свои комментарии.
Открываем бот и видим приветственную надпись со ссылкой вывести кнопки на экран. Нажимаем и видим кнопки.
Нажимаем на первую кнопку и переходим на мой канал.

Здесь на экране выведены записи с трёх источников. С телефона, с компьютера и с камеры. Так, что если где-то что-то не состыковывается, то извиняйте. А календарь с часами я вывел для того чтобы отсчитывать время таймера.

Просто нажимаем включить и выключить и видим что лампочка загорается и гаснет. Отклик происходит почти мгновенно.

А теперь посмотрим как работает таймер на включение лампы. Я нажал на 1 минуту. Здесь показано время запуска таймера, а затем будет показано время срабатывания.

Питоном по телеграму! Пишем пять простых Telegram-ботов на Python

В этой статье мы реали­зуем прос­той, но край­не полез­ный про­ект на Python — бота для Telegram. Боты — это неболь­шие скрип­ты, которые могут вза­имо­дей­ство­вать с API, что­бы получать сооб­щения от поль­зовате­ля и отправ­лять информа­цию в раз­ные чаты и каналы.

Python для новичков

Ес­ли ты сов­сем не ори­енти­руешь­ся в Python, то отличным началом будет проч­тение трех ввод­ных ста­тей, которые я пуб­ликовал в «Хакере» этим летом, либо посеще­ние кур­са «Python для нович­ков», который я нач­ну вес­ти для читате­лей «Хакера» уже сов­сем ско­ро — 30 нояб­ря.

• Python с абсо­лют­ного нуля. Учим­ся кодить без скуч­ных кни­жек
• Python с абсо­лют­ного нуля. Учим­ся работать со стро­ками, фай­лами и интерне­том
• Python с абсо­лют­ного нуля. Работа­ем с ОС, изу­чаем регуляр­ные выраже­ния и фун­кции

Что­бы соз­дать бота, нам нуж­но дать ему наз­вание, адрес и получить токен — стро­ку, которая будет однознач­но иден­тифици­ровать нашего бота для сер­веров Telegram. Зай­дем в Telegram под сво­им акка­унтом и откро­ем «отца всех ботов», BotFather.

Жмем кноп­ку «Запус­тить» (или отпра­вим / start ), в ответ BotFather приш­лет нам спи­сок дос­тупных команд:

• / newbot — соз­дать нового бота;
• / mybots — редак­тировать ваших ботов;
• / setname — сме­нить имя бота;
• / setdescription — изме­нить опи­сание бота;
• / setabouttext — изме­нить информа­цию о боте;
• / setuserpic — изме­нить фото ава­тар­ки бота;
• / setcommands — изме­нить спи­сок команд бота;
• / deletebot — уда­лить бота.

От­пра­вим бате‑боту коман­ду / newbot , что­бы соз­дать нового бота. В ответ он поп­росит ввес­ти имя будуще­го бота, его мож­но писать на рус­ском. Пос­ле вво­да име­ни нуж­но будет отпра­вить адрес бота, при­чем он дол­жен закан­чивать­ся на сло­во bot. Нап­ример, xakepbot или xakep_bot . Если адрес будет уже кем‑то занят, BotFather нач­нет изви­нять­ся и про­сить при­думать что‑нибудь дру­гое.

Ког­да мы наконец най­дем сво­бод­ный и кра­сивый адрес для нашего бота, в ответ получим сооб­щение, в котором пос­ле фра­зы Use this token to access the HTTP API будет написа­на стро­ка из букв и цифр — это и есть необ­ходимый нам токен. Сох­раним ее где‑нибудь на сво­ем компь­юте­ре, что­бы потом исполь­зовать в скрип­те бота.

Для вза­имо­дей­ствия с Telegram API есть нес­коль­ко готовых модулей. Самый прос­той из них — Telebot. Что­бы уста­новить его, набери

pip install pytelegrambotapi

В Linux, воз­можно, понадо­бит­ся написать pip3 вмес­то pip , что­бы ука­зать, что мы хотим работать с треть­ей вер­сией Python.

Эхо-бот

Для начала реали­зуем так называ­емо­го эхо‑бота. Он будет получать от поль­зовате­ля тек­сто­вое сооб­щение и воз­вра­щать его.

Источник: xakep.ru