Web app TELEGRAM Бот на node js и React. Интернет магазин и форма обратной связи в телеграмм боте

  Переглядів 188,809

Ulbi TV

Ulbi TV

День тому

В этом ролике мы разработаем telegram bot (телеграм бота) на javascript (node js). Веб приложение (web app telegram) мы напишем на react и встроим его в бота на node js. Также сделаем деплой бота на облачный сервер.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Вводный ролик про tg ботов на node.js - • Telegram БОТ на JavaSc...
Ссылки на исходный код из урока - t.me/ulbi_tv/109
Статья с инструкцией: slc.tl/di1k4
Гибкие облачные серверы от 10 рублей в день: slc.tl/f4b8h
Таймкоды:
00:00 ➝ Введение и теория.
02:30 ➝ Начало разработки. Создаем telegram бота и инициализируем react проект.
06:40 ➝ Работа с различными видами кнопок
11:50 ➝ Создание своего web app telegram
15:00 ➝ Деплой статики web app на netlify
26:20 ➝ Создаем интернет магазин и форму обратной связи
38:00 ➝ Дорабатываем telegram интернет магазин
44:30 ➝ Настраиваем сервер (backend)
49:30 ➝ Деплой backend на облачный сервер. pm2
01:09:99 ➝ Итоги. Время ставить лайки и писать комменты :)
Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv

КОМЕНТАРІ: 292
@slavikkokoiev6723
@slavikkokoiev6723 Рік тому
Сколько не смотрю твои ролики, каждый раз меня поражает то как ты к ним готовишься, мало кто понимает какой это труд,... спасибо тебе!
@helloglobalme9689
@helloglobalme9689 Рік тому
Смотрю постоянно твои ролики. Очень структурированная речь. Нравится твоя подача материала. Реально полезные ролики выпускаешь. Спасибо тебе большое, что тратишь свое личное время и делишься бесценным опытом.
@falsetrue7910
@falsetrue7910 Рік тому
Удивительно, почти полтора года делал телеграм ботов, но про эту фишку не знал. Надо опробовать, как обычно, спасибо за видос!
@user-vk1id6md6o
@user-vk1id6md6o Рік тому
Ещё урок не смотрел, но уже знаю что будет пушка 🚀
@shittywizzard5727
@shittywizzard5727 Рік тому
Шикардос, Тимур! Как всегда, лучший!
@strelets
@strelets Рік тому
Для дебага бота или бекенда юзаю ngrok, в одну команду пробрасывается локальный порт и создается паблик линк, очень удобно. Спасибо за видео, как раз нужно было скрестить бота с формочкой но не хотелось пилить сбор данных на боте, и тут такая напоминалка с отличным разбором 🙏
@maratfaizer
@maratfaizer Рік тому
работает - спасибо большое!)
@user-fb1rf2cy7i
@user-fb1rf2cy7i 9 місяців тому
по подробнее бы как это настроить)
@YoutubeFrogOfHell
@YoutubeFrogOfHell 8 місяців тому
ngrok http 3000
@kindDaddy
@kindDaddy 13 днів тому
в vscode из коробки есть проброс портов - шикарно работает, нужна только учетка в githab
@prizm_tema
@prizm_tema Рік тому
Спасибо за новость о такой шикарной опции! И за подробные разъяснения по ее применению.
@user-dq9pl8me3o
@user-dq9pl8me3o Рік тому
Я человек простой - вижу ролик от Улби, ставлю лайк не глядя. Посмотрю как дорасту.
@FI4a
@FI4a Рік тому
Огонь 🔥 спасибо что ты у нас есть 😊 очень полезно
@user-ww6nn2jw2p
@user-ww6nn2jw2p Рік тому
Отдельный лайк за текстовую версию ❤
@helenit4365
@helenit4365 Рік тому
Я простой человек, вижу Ульби урок и тоже ставлю лайк! Спасибо за знания!😀
@konstantinkuksov914
@konstantinkuksov914 Рік тому
Как обычно годнота от Тимура подъехала! Спасибо тебе огромное)
@mr.teemon
@mr.teemon 10 місяців тому
Спасибо, Тимур! Не останавливайся пожалуйста 🙏
@user-paint-alexandra
@user-paint-alexandra Рік тому
Спасибо, полезный ролик. Понятно, интересно изложено. Особенно даже не само приложение, а выкладка его на сервер и работа с netlify.
@vladislav_pikiner
@vladislav_pikiner Рік тому
Тимур, спасибо тебе за канал и контент. часто возвращаюсь что-то уточнить как в энциклопедию)
@gordoner5693
@gordoner5693 Рік тому
Как всегда все качественно и понятно
@egolege
@egolege Рік тому
Отличный ролик! Спасибо! Хорошая возможность делать интеграции с telegram!
@konstantinvoronin4687
@konstantinvoronin4687 Рік тому
Класс! Теперь я смогу реализовать все свои самые сочные и влажные фантазии в телеграм боте! Пасиба! node js, react js, telegram API
@user-gi3sh6ul2j
@user-gi3sh6ul2j Рік тому
Спасибо. Было интересно) Я все же начал делать на telegraf, тк хотелось на nestjs сделать и не нашел других библиотек, кроме как на telegraf. Было бы здорово сделать серию роликов про ci/cd для фронтеров, а то всегда боль какая-то с этим разворачиванием, поиском норм хостеров, чтобы и ноду и постгрю можно было не дорого развернуть, и как выбираешь тот или иной хостинг, про создание простеньких пайплайнов и тп. И еще бы было здорово касаться тестирования хоть немного, это очень важная тема, которую надо всегда держать в голове и как можно скорей внедрять в разарботку, отдалдка та же в ноде не всегда тривиальная задача в vs code, а для отладки бота еще предстоит разбираться. В целом круто, так держать!
@ipa_stor
@ipa_stor Рік тому
Пора открывать магазин🤣, спасибо Тимур!
@unicoxr5tj417
@unicoxr5tj417 Рік тому
я человек простой: вижу Улби-урок и ставлю лайк
@user-cp5cc7sq3s
@user-cp5cc7sq3s Рік тому
Лайк можно ставить неглядя. Супер контент. Спасибо
@user-gu4tq6by1t
@user-gu4tq6by1t Рік тому
Спасибо что создаешь такой крутой контент, очень простой и понятный материал
@user-ve8ux5yy7y
@user-ve8ux5yy7y Рік тому
Офигенно. Спасибо большое. Сам я три дня голову себе ломал над отдельными вопросами.
@slark5575
@slark5575 Рік тому
Как всегда на высоте брат!!!
@andrewlevitsky6270
@andrewlevitsky6270 Рік тому
Тимур, сделай пожалуйста хоть одно видео про себя. Как прошел путь с учителя математики до программиста, с какими трудностями сталкивался, в каком возрасте и т д. Думаю это многим на этом канале было бы очень интересно! Спасибо P.S. друзья, поддержите лайком чтобы автор увидел комментарий )
@May-yw1kb
@May-yw1kb Рік тому
Полностью поддерживаю!
@hellohello4454
@hellohello4454 Рік тому
он учился в МГУ, не был учителем, только в качестве подработки. Начал изучать серьезно в 20 лет, в 21 устроился на первую работу. Сейчас ему 23.
@andrewlevitsky6270
@andrewlevitsky6270 Рік тому
@@hellohello4454 красавчик вообще! Как за такое короткое время смог столько всего усвоить интересно, может математический склад ума благодаря такому образованию поспособствовал.
@user-pt5vc1uy9o
@user-pt5vc1uy9o Рік тому
@@andrewlevitsky6270 Нет
@user-pc4rn3ev5m
@user-pc4rn3ev5m Рік тому
@@hellohello4454 а на кого он учился/учится? Он ведь не самоучка, он реально на высоком уровне шарит
@simonsavvinov7989
@simonsavvinov7989 Рік тому
Самый годный материал и подача на Ютюбе👍
@zaharovLucky
@zaharovLucky Рік тому
Просто пушка Тимур👍
@gkfldjdkk4556
@gkfldjdkk4556 Рік тому
Я сейчас делаю бота на телеграм для работы, очень крутые новые фичи, как раз то что нужно, спасибо!
@dilmurodqodirjonov9940
@dilmurodqodirjonov9940 Рік тому
I love your videos😍😍😍 Огромное спасибо 😇
@LionKingheh
@LionKingheh Рік тому
Спасибо за интересный проект!
@atmosphere_education
@atmosphere_education Рік тому
ура, новый видос у Тимура, лайк
@user-qx8ol8dc9l
@user-qx8ol8dc9l 11 місяців тому
Раньше на освоения 1 часа видео от Ulbi я тратил 3 часа, сейчас 30 минут (с перемотками, так-как все понятно). Круто.
@user-qv4sm1eb7i
@user-qv4sm1eb7i Рік тому
Ульби, я уже не ждал, когда в=будет видос с нодой. Как только стану биг бой девелопером, подпишусь на патреон)
@209alex
@209alex Рік тому
ты лучший. всегда в тему
@apsolution4722
@apsolution4722 Рік тому
Оу, пару минут назад)) Смотрим свеженькое
@Mr.Onelvlup
@Mr.Onelvlup Рік тому
искал и нашел! четкий ролик! спасибо, автор!
@nikolaik624
@nikolaik624 Рік тому
Очень крутая информация, спасибо!
@user-ht4es2nw7k
@user-ht4es2nw7k Рік тому
Спасибо за контент!
@ilyamartynov2743
@ilyamartynov2743 Рік тому
Красавчик, я только только сам по api все сделал. Вышел бы твой ролик неделю назад))
@Fortsev
@Fortsev Рік тому
Отличное видео! Спасибо!) Как раз то, что искал
@dromich
@dromich Рік тому
Глазам не верю, как раз хотел поковыряться в этой новой фишке телеграмм API. Огромное спасибо за контент как всегда ТОП
@user-zs9qk8se9y
@user-zs9qk8se9y Рік тому
Спасибо за старания. Лайк
@user-fd1qs5gk8y
@user-fd1qs5gk8y 17 днів тому
Отличный материал! Спасибо большое!
@Senior_weekend_developer
@Senior_weekend_developer Рік тому
Пока не посмотрел, но уверен, что контент как всегда крут! Лайк заранее)) Только зря на 00:59 светанул свой номер телефона - надеюсь, он у тебя не основной.
@user-pg6sg1hu7x
@user-pg6sg1hu7x Рік тому
я человек простой, вижу урок ульби ставлю лайк
@KGZVER
@KGZVER Рік тому
Жду видео про то, как максимально правильно заливать сайт на сервак. То есть сборка проекта через докер, настройки nginx, купленного сервака, домена, сертификата безопасности и разворачивания проекта на всем этом. Будет уникальный контент, на ютубе не нашел похожее.
@user-wl2xp8yo6x
@user-wl2xp8yo6x Рік тому
Такое есть, русскоязычный канал от а до я показывал. Покупал сервак, домен, настраивал сервак, ssl, nginx, nodejs бекенд приложение опубликовал + react front. Крч там все есть, правда по просмотрам очень мало. Почему то ютуб такие полезные видео никак не рекомендует :(
@usernnxn
@usernnxn Рік тому
@@user-wl2xp8yo6x что это за канал ? «русский»?
@raijinhasarrived
@raijinhasarrived Рік тому
@@usernnxn подвисну на тебе пока человек ответит
@amir18n
@amir18n Рік тому
поддерживаю
@da_progress2678
@da_progress2678 Рік тому
Поддерживаю, где такой контент видели?)
@hutoryanin
@hutoryanin Рік тому
Здравствуй Тимур, благодарю за подробный рассказ о новшествах в api телеги. *Л. а. й. к.* и *Р. е. с. п. е. к. т.*
@technocoh
@technocoh 3 місяці тому
Просто офигенно, я в шоке)))
@trickymartian3477
@trickymartian3477 25 днів тому
Контент как обычно пушка)
@user-of8lf7yj8o
@user-of8lf7yj8o Рік тому
Вааау, наконец магазины в тг будут выглядеть нормально, а не кучей инлайн ссылок
@iznu3
@iznu3 9 місяців тому
Спасибо! Лайк!
@bekzoddeveloper5995
@bekzoddeveloper5995 Рік тому
Спасибо! Очень полезно!
@user-yb3gf6js5s
@user-yb3gf6js5s Рік тому
Ульби могуч! Ничего не скажешь.
@tevi6667
@tevi6667 Рік тому
Лайкос большой сначала =)
@Max-kc3mh
@Max-kc3mh Рік тому
Редкий канал на русском с годной информацией. Спасибо, познавательно.
@vikodam
@vikodam Рік тому
Тимур, мы все тебя любим😀❤
@mrakov
@mrakov Рік тому
Ждал ролик с 1 дня патча телеги)
@Traineratwot
@Traineratwot Рік тому
Для дебага на локальной машине можно использовать ngrok он даст временный домен и останется только прокинуть нужный порт на роутере. Сам с телеграмом не пробывал но должено сработать
@R4mirez
@R4mirez Рік тому
тоже хотел ngrok посоветовать. с ботом на пайтоне все работает
@user-ks3sj6st1s
@user-ks3sj6st1s Рік тому
Поддерживаю, хороший совет, тоже хотел сказать про ngrok
@caH40yc
@caH40yc Рік тому
жаль, что сразу не полез в комментарии, пришлось воспользоваться яндексом )) единственное в реакте в package.json изменить порт на 80 "start": "set port=80 && react-scripts start"
@meowmyacivh
@meowmyacivh Рік тому
Для локального дебага прокидываем порт в интернет через ngrok, ссылку которую дает ngrok даем боту, всё, получился локальный дебаг :)
@user-jp6mx5sj2r
@user-jp6mx5sj2r Рік тому
Для бота https нужен)
@slava3553
@slava3553 Рік тому
Ngrok раздаёт небезопасное https соединение, подвязать к телеге можно, но нужно будет передавать в заголовках пропуск авторизации в нжрке
@pavelasafov
@pavelasafov 2 місяці тому
Спасибо большое! Хорошее видео!
@anvarzaripboyev5730
@anvarzaripboyev5730 10 місяців тому
Очень полезное видео для всех!
@dzianisantanouski1885
@dzianisantanouski1885 Рік тому
Суппер, спасибо! 🖖
@dimasnytin
@dimasnytin Рік тому
Спасибо 👍
@begineras
@begineras Рік тому
Агонь видос
@daurenismagulov5654
@daurenismagulov5654 Рік тому
То что нужно было, спасибо за контент. Было бы хорошо если бы сделал ещё урок про PERN в связке с JWT аутентификацией
@stream2364
@stream2364 Рік тому
У него есть интернет магазин небольшой с этим стэком
@drdev_blog
@drdev_blog 5 днів тому
Очень хочется услышать обновленное углубленное занятие по телеграм ботам мини апсам! 🙄
@sasharudenko5446
@sasharudenko5446 Рік тому
где-то на 35й минуте слышал крики джунов ) видимо от скорости подачи контента ))
@pavelkostrov1465
@pavelkostrov1465 Рік тому
Лайк не глядя
@liiiisd
@liiiisd Рік тому
Агонь!👍
@Orel_-_
@Orel_-_ 10 місяців тому
Огонь 💥
@ziloliddin
@ziloliddin 11 місяців тому
четко, до мелочей показал
@Kolesnick777
@Kolesnick777 Рік тому
всё очень круто, отличная подача материала. Но настолько быстро что мне как начинающему допустим очень сложно понимать всё не успеваю за тобой 😊
@user-pt5vc1uy9o
@user-pt5vc1uy9o Рік тому
Да, надо на видео реально скорость замедлять через настройки
@Mirrasim
@Mirrasim Рік тому
опа контент подъехал
@PacoOfficial
@PacoOfficial Рік тому
круто!
@lechiffre4850
@lechiffre4850 Рік тому
Просто нонсенс!!!
@mikeempire
@mikeempire Рік тому
Вау, ты очень крут! И ты засветил номер свой)
@Mirrasim
@Mirrasim Рік тому
хахах норм это тестовый акк
@user-of8lf7yj8o
@user-of8lf7yj8o Рік тому
Блин😥, только не звони туда ладно🤫
@yuriiyakovenko9566
@yuriiyakovenko9566 9 місяців тому
Красавчик , я так понимаю что бот синхронизируется с определенной вебстраницей и берет данные от туда после чего показывает как браузер , после манипуляций с браузером телеграм принимает данные от сайта и выводит в рабочую область . Хороший ход со стороны ТГ , если так дальше пойдёт то весь СНГ онлайн рынок перейдет в ТГ.
@nadyashaymardanova6000
@nadyashaymardanova6000 11 місяців тому
Очень интересно
@welcomeBack1337
@welcomeBack1337 9 місяців тому
Лучший!
@vladislavivanchikov6622
@vladislavivanchikov6622 Рік тому
Тимур тупо топ !
@user-pc9bl7uf1l
@user-pc9bl7uf1l Рік тому
супер!
@user-wz8oy9gn6z
@user-wz8oy9gn6z 6 місяців тому
Привет, большое спасибо за то, что ты делаешь, хотелось бы в подобных роликах немного по подробнее и как-то по медленнее пусть ролик и затянется минут на 20. Просто постоянно нить то и дело теряется.
@nariman951
@nariman951 Рік тому
Крутой
@user-tw9hm8sq3v
@user-tw9hm8sq3v Рік тому
Можно использовать Ngrok для отладки бота, очень удобно.
@Khazanalexey
@Khazanalexey Рік тому
Спасибо
@astkh4381
@astkh4381 Рік тому
Спасибо за видео.Мог бы ты сделать видео как заливаться на VPS приложение на express + psql
@webstack-frontend1697
@webstack-frontend1697 Рік тому
Классное видео
@oleg.frolov
@oleg.frolov Рік тому
Очень круто. Повторили бы на Пайтон)
@utkirkurbanov8241
@utkirkurbanov8241 Рік тому
Awesome video 😊
@Sokovizimalka
@Sokovizimalka Рік тому
По поводу запуска локально. Никто не мешает в кнопку запихать url, который потом в hosts перенаправить на localhost. Но тогда надо где-то нарыть валидных сертификатов под указанный url, иначе web app не запустится (можно с прода взять, если есть живой прод с доменом). Либо использовать test enviroment телеги, в доках об этом написано. Тогда можно будет использовать http и пихать в кнопку прямо 127.0.0.1. Либо использовать ngrok, он ваш локальный порт делает доступным через свои серверы, дает общедоступный адрес с https. В таком случае в кнопку пихать адрес, выданный ngrok'ом, а запросы будут приходить на localhost, или куда скажете.
@creative-routine8371
@creative-routine8371 Рік тому
Блин, я тебе лаки не глядя ставлю
@maf1ozrex249
@maf1ozrex249 20 днів тому
легенда
@ivkis3270
@ivkis3270 Рік тому
вопрос: есть функция sendData(), которая позволяет отправить сообщение из WebApp на сервер к боту. А есть ли аналогичный способ отправить данные в web app с сервера? Что-то в роде sendDataToWebApp(). Или через бота отправить данные в web app не получится и лучше сделать http сервер, откуда web app будет подтягивать данные?
@kroda
@kroda Рік тому
спасибо
@tolyankent7982
@tolyankent7982 Рік тому
огромное спасибо за контент! если с телеги даже на локалку сообщения прилетают, получается нода коннектится к сервакам node-telegram-bot-api и всё общение через их сервера проходит?
@hennadiishavlo179
@hennadiishavlo179 Рік тому
Тимур когда курс можно будет приобрести снова?)
@user-fq4fn3cj4f
@user-fq4fn3cj4f Рік тому
Спасибо за урок, очень информативно. Может кто нибудь подсказать как добавить несколько кнопок для различных ссылок? Или пока есть возможность добавить только одну кнопку?
@user-kp7hk8vp5e
@user-kp7hk8vp5e Рік тому
Бест оф зе бест!!!
@laches1
@laches1 Рік тому
есть вопрос не совсем по теме но все же. Я разрабатываю сайт на react который может подписываться на события в блокчейне, и хочу чтобы еще бот телеграмма выкладывал в чат эти события. Каким способом можно их так сказать "подружить". Возможно ли запускать одновременно приложение на react и бота телеграм
🔥 Україна виходить у ФІНАЛ ЄВРОБАЧЕННЯ-2024! Реакція alyona alyona та Jerry Heil #eurovision2024
00:10
Євробачення Україна | Eurovision Ukraine official
Переглядів 83 тис.
Вам не нужен useEffect: Часть 2
11:04
Dev Surge
Переглядів 230
CI CD наглядные примеры
22:08
Ulbi TV
Переглядів 262 тис.
Web App Telegram Bot (React + Telegram Bot) + Bot Revolution
1:31:16
The Cymond
Переглядів 68 тис.
Как часто вы чистите свой телефон
0:33
KINO KAIF
Переглядів 2,4 млн
САМЫЙ дешевый ПК с OZON на RTX 4070
16:16
Мой Компьютер
Переглядів 83 тис.
The PA042 SAMSUNG S24 Ultra phone cage turns your phone into a pro camera!
0:24