Pomazkov JS
Pomazkov JS
  • 32
  • 639 489
Курс по Grammy JS: вся БАЗА | как писать телеграм-ботов на JS
⭐ BOOSTY: boosty.to/pomazkovjs
⭐ Поддержать донатом: boosty.to/pomazkovjs/single-payment/donation/500599/
⭐ Интенсив по JS: pomazkovjs-hangman.ru/
✅ Текстовая версия ролика: slc.tl/sy40z
✅ Сервер Selectel: slc.tl/qtz71
В этом видео мы разберем все основные механизмы библиотеки Grammy JS:
- стартовый набор файлов бота и общую структуру
- слушатели событий от пользователя
- объект Context: контекст обновления
- работу с двумя видами клавиатуры
и многое другое.
Приятного просмотра!
Ссылки по GrammyJS:
* Обработка ошибок - grammy.dev/guide/errors
* Фильтры bot.on - grammy.dev/guide/filter-queries
* Context (ctx) - grammy.dev/guide/context
* parse_mode: “HTML” - core.telegram.org/bots/api#html-style
* “MarkdownV2” - core.telegram.org/bots/api#markdownv2-style
* Настройка login / pay методов - deno.land/x/grammy@v1.21.1/mod.ts?s=InlineKeyboard#method_login_0
* СОЦ. СЕТИ:
👀 Instagram - pomazkov.js
🚀 Telegram - t.me/pomazkovjs
Тайм-коды:
00:00 Интро
01:18 Получаем токен для телеграм бота
02:21 Создаем проект
05:24 Стартовый код бота
08:30 Запуск бота с nodemon
09:31 Порядок слушателей в grammy (важно)
11:09 Обработка ошибок в grammy js
13:35 Обработка сообщений от пользователя
14:03 bot.command - команды
15:25 Одинаковая реакция на несколько команд
16:16 Как сделать меню команд у бота (bot.api.setMyCommands)
17:49 Ограничения работы с командами
20:09 bot.on - фильтрация по типу сообщения
24:48 bot.filter - свои кастомные фильтры
27:43 bot.hears - ответ на конкретные сообщения
29:06 Регулярные выражения
30:08 Еще раз про важность расположения слушателей
31:17 Объект Context (контекст обновления)
33:04 Как узнать свой id в телеграм
34:34 Подробнее про ctx.reply
35:09 Ответ на конкретное сообщение
35:54 Форматирование сообщений телеграм бота
38:25 disable_web_page_preview
38:50 ctx.react - отправка реакций на сообщения
39:35 Клавиатуры у бота и их ограничения
40:09 Custom Keyboard
41:09 .text() - добавление кнопки к клавиатуре
41:01 .row() - разбивка кнопок по рядам
42:40 .resized() - почему кнопки растягиваются в тг боте
43:15 Как реагировать на нажатия по кнопкам
43:58 oneTime() - одноразовая клавиатура
44:31 Убираем клавиатуру вручную
45:13 Keyboard.from() - клавиатура из массива строк
46:33 Запрашиваем локацию, номер телефона и опрос у пользователя
48:28 Добавляем команды в меню
49:06 .placeholder() - изменение текста в инпуте
49:45 Реакция на контакт или локацию
50:47 Inline Keyboard
53:06 Обработка нажатий на инлайн клавиатуру
57:48 Задание на самостоятельную работу
1:00:02 .row() и .url() в инлайн клавиатуре
1:01:40 Плагины в grammy js
1:02:00 hydrate - редактирование сообщений и бесшовное меню
1:09:42 Деплой бота на удаленный сервер
1:10:15 Загружаем бота на GitHub
1:12:00 Настраиваем сервер
1:18:33 Запуск бота на сервере
1:19:36 Заключение
#javascript #курс #grammyjs #фронтенд #телеграмботы
Переглядів: 19 830

Відео

Полный разбор THIS в JavaScript за 26 минут | this в стрелочных функциях, call bind apply, Window
Переглядів 25 тис.5 місяців тому
⭐ BOOSTY - задача с собеса по THIS, конспекты-шпаргалки и другие материалы: boosty.to/pomazkovjs ⭐ Поддержать донатом: boosty.to/pomazkovjs/single-payment/donation/500599/ Этот ролик - полный гайд по this в JS. Из него вы узнаете про: - this в глобальной области видимости (объекты Window и Global) - this в обычных функциях - this в функциях-конструкторах - особенности this в стрелочных функциях...
Пишем Бота для ОБУЧЕНИЯ и подготовки к СОБЕСЕДОВАНИЮ | telegram bot: Node.js + grammY
Переглядів 9 тис.7 місяців тому
Интенсив "Игра на чистом JS: с нуля до деплоя": pomazkovjs-hangman.ru/ ⭐ Поддержать донатом: boosty.to/pomazkovjs/single-payment/donation/500599/ ➡️ questions.json: t.me/pomazkovjs/139 ➡️ Текстовая версия: slc.tl/mcc1a ➡️ Облачный сервер для телеграм-бота: slc.tl/qrazf Документация grammY: grammy.dev/ random-js: www.npmjs.com/package/random-js Итоговый код: github.com/arseniypom/intreview-bot К...
Игра на JS, пэт-проекты, результаты и планы на канал | JavaScript практика для начинающих
Переглядів 7 тис.10 місяців тому
* ИНТЕНСИВ "Игра на чистом JS: с нуля до деплоя": pomazkovjs-hangman.ru/ В этом ролике я расскажу вам, над чем работал на протяжении нескольких последних месяцев - интенсив по разработке игры на чистом JS. Спойлерить здесь не буду, посмотрите сами, ведь помимо этого вы узнаете: - Что за игру мы разработаем в интенсиве - В чем преимущество этого короткого, но очень полезного курса - Как мне приш...
ФУНКЦИИ в JavaScript НА ПРАКТИКЕ | виды функций, стрелочные функции, параметры, аргументы, return
Переглядів 39 тис.10 місяців тому
* ИНТЕНСИВ "Игра на чистом JS: с нуля до деплоя": pomazkovjs-hangman.ru/ ⭐ Поддержать донатом: boosty.to/pomazkovjs/single-payment/donation/500599/ ➡️ Полный бесплатный курс по циклам в JS: ua-cam.com/video/jwrPJ55OZ4k/v-deo.html ➡️ Замыкания в JS: ua-cam.com/video/mI6Jcfsgma4/v-deo.html В этом ролике мы подробно обсудим функции в JS, а точнее я расскажу: - Что такое функция в JS простыми слова...
Циклы FOR, WHILE в JS: ПОЛНЫЙ КУРС с примерами и задачами | javascript циклы для начинающих
Переглядів 21 тис.11 місяців тому
* ИНТЕНСИВ "Игра на чистом JS: с нуля до деплоя": pomazkovjs-hangman.ru/ ⭐ Поддержать донатом: boosty.to/pomazkovjs/single-payment/donation/500599/ Решения задач из видео: t.me/pomazkovjs/115 В этом ролике поговорим про следующее: - Что такое циклы в JavaScript - Цикл FOR, WHILE, DO..WHILE - Циклы для обхода массивов и объектов FOR..OF, FOR..IN Всё подробно разберем, а также потренируемся на за...
var, let, const: ПОЛНЫЙ КУРС [2023] | Объявление переменных в JS
Переглядів 14 тис.Рік тому
* ИНТЕНСИВ "Игра на чистом JS: с нуля до деплоя": pomazkovjs-hangman.ru/ ⭐ Поддержать донатом: boosty.to/pomazkovjs/single-payment/donation/500599/ - Чем опасно ключевое слово VAR? - Что такое область видимости и какие бывают области видимости? - Почему всегда, когда есть возможность, лучше использовать CONST вместо LET? - Какие ошибки допускают начинающие разработчики в работе с переменными? В...
Универсальный СТАРТОВЫЙ ШАБЛОН для твоих пэт-проектов с JS, SASS и Vite [2023]
Переглядів 21 тис.Рік тому
Универсальный СТАРТОВЫЙ ШАБЛОН для твоих пэт-проектов с JS, SASS и Vite [2023]
React для НОВИЧКОВ [2023]: первый проект на React JS | Как запустить приложение на React?
Переглядів 38 тис.Рік тому
React для НОВИЧКОВ [2023]: первый проект на React JS | Как запустить приложение на React?
ЗАМЫКАНИЯ В JS за 15 минут: ОТ и ДО | Что такое лексическое окружение и как связано с замыканием?
Переглядів 73 тис.Рік тому
ЗАМЫКАНИЯ В JS за 15 минут: ОТ и ДО | Что такое лексическое окружение и как связано с замыканием?
Что должен знать JUNIOR Фронтенд Разработчик? ROADMAP: как стать фронтенд разработчиком в 2023
Переглядів 239 тис.Рік тому
Что должен знать JUNIOR Фронтенд Разработчик? ROADMAP: как стать фронтенд разработчиком в 2023
Что такое ФРОНТЕНД? На Чем Пишут Фронтенд? HTML / CSS / JavaScript (JS)
Переглядів 25 тис.Рік тому
Что такое ФРОНТЕНД? На Чем Пишут Фронтенд? HTML / CSS / JavaScript (JS)
ФРОНТЕНД: С ЧЕГО НАЧАТЬ? Выучить HTML или выучить JS?
Переглядів 19 тис.Рік тому
ФРОНТЕНД: С ЧЕГО НАЧАТЬ? Выучить HTML или выучить JS?
Что такое ВЕБ-РАЗРАБОТКА? Веб-Программирование С НУЛЯ: Фронтенд / Бэкенд / Верстка / SEO оптимизация
Переглядів 9 тис.Рік тому
Что такое ВЕБ-РАЗРАБОТКА? Веб-Программирование С НУЛЯ: Фронтенд / Бэкенд / Верстка / SEO оптимизация

КОМЕНТАРІ

  • @user-gk9zm6ug2i
    @user-gk9zm6ug2i 11 годин тому

    Самое крутое объяснение! Спасибо!!

  • @mir_vokrug_yt
    @mir_vokrug_yt 20 годин тому

    было полезно, спасибо

  • @elenaizmaylova9331
    @elenaizmaylova9331 День тому

    Арсений, здравствуй) Хочу присоединиться к тонне ранее выраженных тебе благодарностей в комментариях, но и также не согласиться с тобой. Надеюсь, ты ответишь мне и если я не права, скажешь почему. Дело в том, что тему окружения я очень долго не могла понять и копала во всех возможных направлениях, чтобы разобраться с ней. И вот что я выяснила: окружение - это доступная из текущей области видимости структура данных, в которой хранятся связи между идентификаторами и переменными из всех внешних областей видимости. И оно может быть как лексическим, так и динамическим. Так вот лексическое окружение, создается как раз не во время вызова функции, а во время ее объявления. То есть компилятор читая и анализируя код первый раз устанавливает связь между переменными и их идентификаторами. Чтобы было наглядней, приведу пример: let value = 2; function showValue() { console.log("Value from showValue: " + value); } function wrapper() { let value = 3; console.log("Value from wrapper: " + value); showValue(); } wrapper(); Повторюсь, когда движок прочитывает и анализирует код в первый раз, он устанавливает связь между переменными и их идентификаторами. Так работает именно лексическое окружение. В динамическом окружении эта связь устанавливается в момент вызова функции. И когда компилятор дошёл до переменной value внутри функции showValue, он не находит внутри функции объявления этой переменной, поэтому он поднимается в родительскую область видимости, находит там нужную переменную и устанавливает с ней зависимость. Всё, это зависимость установлена навсегда, и пофигу откуда мы теперь эту функцию будем вызывать. Поэтому в консоли мы получим значения 3 и 2. Если бы в js было динамическое окружение, тогда было бы важным именно откуда функция вызывается, и в консоли мы бы получили 3 и 3. Так вот всем вышесказанным я хотела сказать, что в замыканиях участвует не лексическое окружение, а область видимости! Именно область видимости создается во время вызова функции, а после того, как вызов был завершен, сборщик мусора удаляет ссылку на эту область, так как на нее больше никто не ссылается, но если на нее будет что-то ссылаться, то эта область видимости удалена не будет, что и происходит в случае с замыканием: на область видимости верхней функции ссылается функция, которую мы из нее вернули) Поэтому у нас есть доступ к переменным, созданным внутри функции. На этом всё)) Если же я не права, пожалуйста, скажи почему)

  • @Fosterushka
    @Fosterushka День тому

    узбекский плов :D #challenge

  • @user-uc6xu3nr3r
    @user-uc6xu3nr3r 2 дні тому

    Мне про лазанью в следующий раз интересно узнать.

  • @orlon5912
    @orlon5912 2 дні тому

    Крутой подход, очень приятно смотреть, так держать Бро

  • @miss_adventure_
    @miss_adventure_ 2 дні тому

    Большое спасибо! Одно из немногих видео, где я не то что не ускоряла а сделала скорость 0,75х 😄действительно фраза «как читает интерпретатор» что то поменяла в моей голове)

  • @neonscandy9272
    @neonscandy9272 2 дні тому

    COOL

  • @user-oh7wn8ol5r
    @user-oh7wn8ol5r 2 дні тому

    Не смог обойти вот это: DeprecationWarning: The `punycode` module is deprecated. 🤔

  • @surayakupov2544
    @surayakupov2544 3 дні тому

    Изучил html и css, потом начал искать что еще нужно для верстки сайти, понял что еще надо js

    • @pomazkovjs
      @pomazkovjs 3 дні тому

      У меня на канале есть дорожная карта по изучению фронтенда, советую посмотреть. Станет гораздо яснее, куда двигаться 🙂

  • @user-qp3df2cx9q
    @user-qp3df2cx9q 3 дні тому

    loh

  • @jamesscreen
    @jamesscreen 4 дні тому

    Да-а-а. Кодишь 8 часов на работе, а то и задержаться придется, конечно с перерывами, и вечером у тебя остается 2 часа на пет-проекты (не пойти уделить время семье, детям, просто отдохнуть от компа или выйти на улицу, а пет-проекты, Карл!)

  • @user-bq3vv2sq2b
    @user-bq3vv2sq2b 4 дні тому

    Для верстки обязательно изучать фигму или подобные ей платформы?

    • @pomazkovjs
      @pomazkovjs 3 дні тому

      Фигма - это инструмент для дизайнера, который создает макет будущего сайта, а разработчику достаточно уметь «читать» этот макет в фигме (посмотреть там все расстояния, цвета, экспортировать картинки и тд)

  • @user-bq3vv2sq2b
    @user-bq3vv2sq2b 4 дні тому

    Сколько уйдет часов на изучение CSS ?(+-)

  • @the_barnab9485
    @the_barnab9485 5 днів тому

    Видео показалось мне полезным. Поэтому я, как наставлял Автор, прожал Like и пишу об этом в комментариях..

  • @strogalev
    @strogalev 5 днів тому

    11:08 в глобальном лексическом окружении добавляется counter (видимо из прошлого примера) и также на 11:29 добавляетс counter2 12:04 разве в этот момент не создаются в глобальном лексическом окружении переменные increment: function и log: function?

  • @strogalev
    @strogalev 5 днів тому

    Привет ) спасибо за прекрасную подачу, графика супер!

  • @alexvolter6949
    @alexvolter6949 5 днів тому

    Полезная инфа, спасибо👌

  • @frozenplay1417
    @frozenplay1417 6 днів тому

    2 - 6 =8

  • @MARYUSSA
    @MARYUSSA 6 днів тому

    лайкос

  • @AlexSkaeg
    @AlexSkaeg 7 днів тому

    Спасибо,очень хорошо объяснено что куда и зачем. ))

  • @user-ce3kt7pq9x
    @user-ce3kt7pq9x 7 днів тому

    Видео о лексическом окружении, а кто о нем не знает? только те кто соваем не изучал js, простая тема. Суть замыкание в том, что LE сохраняется после выполнения функции. А почему? Не объяснил. Зачем безымянная функция внутри счетчика тоже не объяснил. Информация не по теме.

  • @user-rx1lf5pp5u
    @user-rx1lf5pp5u 7 днів тому

    Было очень полезно и вовремя

  • @user-bs3rp9cg9t
    @user-bs3rp9cg9t 7 днів тому

    Базара нет! От души родной как понятно и четко объяснил ❤

  • @artfromheart3329
    @artfromheart3329 8 днів тому

    Отличное видео! Спасибо!

  • @alexanderkirillov1276
    @alexanderkirillov1276 9 днів тому

    абра кадабра

  • @O_Shpak
    @O_Shpak 9 днів тому

    Я редко пишу коменты но тут неудержалась я сегодня посмотрела ролик про замыкания это шедевр, и смотрю ролики этого автора дальше очень редко кто может так обьяснить 🙏спасибо

  • @helenali5107
    @helenali5107 9 днів тому

    Вы очень хорошо объясняете. Видео про плагины будет очень полезным

  • @user-hm5dz5yj4n
    @user-hm5dz5yj4n 9 днів тому

    было полезно

  • @user-hm5dz5yj4n
    @user-hm5dz5yj4n 9 днів тому

    отличное и наглядное обяснение. жду новые видео про глубокое копирование. пожалуйста.

  • @user-hm5dz5yj4n
    @user-hm5dz5yj4n 9 днів тому

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

  • @user-hm5dz5yj4n
    @user-hm5dz5yj4n 9 днів тому

    Отдельное видео по call, apply, bind пожалуйста.

  • @user-hm5dz5yj4n
    @user-hm5dz5yj4n 9 днів тому

    Отличное обяснение. Хотелось бы еще уроков пожалуйста. хорошая подача. приятный голос. не теряйте настроя и вдохновения!

  • @user-rc4vu6ee5u
    @user-rc4vu6ee5u 9 днів тому

    Очень полезный материал, спасибо!

  • @sasha-quimby
    @sasha-quimby 9 днів тому

    Это отличное объяснение. Я вообще практически никогда не пишу комменты, но тут прям хочется поддержать молодой канал и поблагодарить. Чел, ты топ))

  • @fufjdhjdmrjfffudyxhjfdkkdd2233
    @fufjdhjdmrjfffudyxhjfdkkdd2233 9 днів тому

    Вы как тот самый учитель по истории в средней школе. Крутая подача красивые глаза и женат🦭✨

  • @nafisgarifullin7199
    @nafisgarifullin7199 10 днів тому

    Все очень понятно и без воды. Спасибо за информацию

  • @user-uc6xu3nr3r
    @user-uc6xu3nr3r 10 днів тому

    Получается данные в локальном лексическом окружении сохраняются даже после завершения функции... Они останутся в памяти пока не завершится вся программа? Можно как-то очистить это локальное окружение, чтобы не занимать ресурсы? Не знаю насколько это нужно в практике, пока вопрос теоретический

  • @NekoRooru
    @NekoRooru 10 днів тому

    спасибо за видео. было полезно. сохранила себе в закладки, чтобы ещё к нему вернуться

  • @user-jr9xk8zc8l
    @user-jr9xk8zc8l 11 днів тому

    Спасибо!

  • @mehman.jafari
    @mehman.jafari 11 днів тому

    Крутой видеоролик, жду ещё по React думаю очень скоро будет видео по React🔥🔥🔥

  • @kostyapopkov8036
    @kostyapopkov8036 12 днів тому

    Дуже круто і доступно) Підписка + like) Буду дивитись твої відео) Продовжуй в тому ж дусі)

  • @NikitaNemtsov
    @NikitaNemtsov 12 днів тому

    спасибо

  • @user-uu2wd2hz4y
    @user-uu2wd2hz4y 13 днів тому

    Молодец, хорошо излагаешь мысли.

  • @getRECTaPPs
    @getRECTaPPs 13 днів тому

    Спасибо!

  • @survarium8841
    @survarium8841 13 днів тому

    Спасибо!

  • @glebgleb-me2fi
    @glebgleb-me2fi 14 днів тому

    🤘

  • @MsDimons123
    @MsDimons123 15 днів тому

    Мои заметки которые я в итоге сделал для запоминания: - Функция запускается в контексте обьекта где он находится - У стрелочный функций нет своего this. Если мы ссылаемся на this такой функции, то оно берется из внешней ближайшей функции. Тоесть оно ищет эту внешнюю функцию, и спрашивает - что у тебя там есть в обьекте в котором ты находишься? - new создает новый обьект и в нем уже запускает функцию

  • @MsDimons123
    @MsDimons123 15 днів тому

    Круто, спасибо!

  • @user-jr9xk8zc8l
    @user-jr9xk8zc8l 15 днів тому

    Вау :)