Тёмный

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

Ulbi TV
Подписаться 299 тыс.
Просмотров 198 тыс.
50% 1

В этом ролике мы разработаем 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

Наука

Опубликовано:

 

2 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 298   
@slavikkokoiev6723
@slavikkokoiev6723 Год назад
Сколько не смотрю твои ролики, каждый раз меня поражает то как ты к ним готовишься, мало кто понимает какой это труд,... спасибо тебе!
@strelets
@strelets Год назад
Для дебага бота или бекенда юзаю ngrok, в одну команду пробрасывается локальный порт и создается паблик линк, очень удобно. Спасибо за видео, как раз нужно было скрестить бота с формочкой но не хотелось пилить сбор данных на боте, и тут такая напоминалка с отличным разбором 🙏
@maratfaizer
@maratfaizer Год назад
работает - спасибо большое!)
@user-fb1rf2cy7i
@user-fb1rf2cy7i 10 месяцев назад
по подробнее бы как это настроить)
@YoutubeFrogOfHell
@YoutubeFrogOfHell 9 месяцев назад
ngrok http 3000
@kindDaddy
@kindDaddy Месяц назад
в vscode из коробки есть проброс портов - шикарно работает, нужна только учетка в githab
@helloglobalme9689
@helloglobalme9689 Год назад
Смотрю постоянно твои ролики. Очень структурированная речь. Нравится твоя подача материала. Реально полезные ролики выпускаешь. Спасибо тебе большое, что тратишь свое личное время и делишься бесценным опытом.
@user-vk1id6md6o
@user-vk1id6md6o Год назад
Ещё урок не смотрел, но уже знаю что будет пушка 🚀
@prizm_tema
@prizm_tema Год назад
Спасибо за новость о такой шикарной опции! И за подробные разъяснения по ее применению.
@falsetrue7910
@falsetrue7910 Год назад
Удивительно, почти полтора года делал телеграм ботов, но про эту фишку не знал. Надо опробовать, как обычно, спасибо за видос!
@shittywizzard5727
@shittywizzard5727 Год назад
Шикардос, Тимур! Как всегда, лучший!
@user-dq9pl8me3o
@user-dq9pl8me3o Год назад
Я человек простой - вижу ролик от Улби, ставлю лайк не глядя. Посмотрю как дорасту.
@FI4a
@FI4a Год назад
Огонь 🔥 спасибо что ты у нас есть 😊 очень полезно
@helenit4365
@helenit4365 Год назад
Я простой человек, вижу Ульби урок и тоже ставлю лайк! Спасибо за знания!😀
@konstantinkuksov914
@konstantinkuksov914 Год назад
Как обычно годнота от Тимура подъехала! Спасибо тебе огромное)
@user-ww6nn2jw2p
@user-ww6nn2jw2p Год назад
Отдельный лайк за текстовую версию ❤
@user-gi3sh6ul2j
@user-gi3sh6ul2j Год назад
Спасибо. Было интересно) Я все же начал делать на telegraf, тк хотелось на nestjs сделать и не нашел других библиотек, кроме как на telegraf. Было бы здорово сделать серию роликов про ci/cd для фронтеров, а то всегда боль какая-то с этим разворачиванием, поиском норм хостеров, чтобы и ноду и постгрю можно было не дорого развернуть, и как выбираешь тот или иной хостинг, про создание простеньких пайплайнов и тп. И еще бы было здорово касаться тестирования хоть немного, это очень важная тема, которую надо всегда держать в голове и как можно скорей внедрять в разарботку, отдалдка та же в ноде не всегда тривиальная задача в vs code, а для отладки бота еще предстоит разбираться. В целом круто, так держать!
@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 а на кого он учился/учится? Он ведь не самоучка, он реально на высоком уровне шарит
@mr.teemon
@mr.teemon 11 месяцев назад
Спасибо, Тимур! Не останавливайся пожалуйста 🙏
@user-cp5cc7sq3s
@user-cp5cc7sq3s Год назад
Лайк можно ставить неглядя. Супер контент. Спасибо
@user-paint-alexandra
@user-paint-alexandra Год назад
Спасибо, полезный ролик. Понятно, интересно изложено. Особенно даже не само приложение, а выкладка его на сервер и работа с netlify.
@vladislav_pikiner
@vladislav_pikiner Год назад
Тимур, спасибо тебе за канал и контент. часто возвращаюсь что-то уточнить как в энциклопедию)
@konstantinvoronin4687
@konstantinvoronin4687 Год назад
Класс! Теперь я смогу реализовать все свои самые сочные и влажные фантазии в телеграм боте! Пасиба! node js, react js, telegram API
@apsolution4722
@apsolution4722 Год назад
Оу, пару минут назад)) Смотрим свеженькое
@Fortsev
@Fortsev Год назад
Отличное видео! Спасибо!) Как раз то, что искал
@ipa_stor
@ipa_stor Год назад
Пора открывать магазин🤣, спасибо Тимур!
@egolege
@egolege Год назад
Отличный ролик! Спасибо! Хорошая возможность делать интеграции с telegram!
@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 Год назад
Поддерживаю, где такой контент видели?)
@user-ve8ux5yy7y
@user-ve8ux5yy7y Год назад
Офигенно. Спасибо большое. Сам я три дня голову себе ломал над отдельными вопросами.
@gordoner5693
@gordoner5693 Год назад
Как всегда все качественно и понятно
@slark5575
@slark5575 Год назад
Как всегда на высоте брат!!!
@dilmurodqodirjonov9940
@dilmurodqodirjonov9940 Год назад
I love your videos😍😍😍 Огромное спасибо 😇
@Senior_weekend_developer
@Senior_weekend_developer Год назад
Пока не посмотрел, но уверен, что контент как всегда крут! Лайк заранее)) Только зря на 00:59 светанул свой номер телефона - надеюсь, он у тебя не основной.
@user-gu4tq6by1t
@user-gu4tq6by1t Год назад
Спасибо что создаешь такой крутой контент, очень простой и понятный материал
@user-qv4sm1eb7i
@user-qv4sm1eb7i Год назад
Ульби, я уже не ждал, когда в=будет видос с нодой. Как только стану биг бой девелопером, подпишусь на патреон)
@user-qx8ol8dc9l
@user-qx8ol8dc9l Год назад
Раньше на освоения 1 часа видео от Ulbi я тратил 3 часа, сейчас 30 минут (с перемотками, так-как все понятно). Круто.
@ilyamartynov2743
@ilyamartynov2743 Год назад
Красавчик, я только только сам по api все сделал. Вышел бы твой ролик неделю назад))
@gkfldjdkk4556
@gkfldjdkk4556 Год назад
Я сейчас делаю бота на телеграм для работы, очень крутые новые фичи, как раз то что нужно, спасибо!
@simonsavvinov7989
@simonsavvinov7989 Год назад
Самый годный материал и подача на Ютюбе👍
@atmosphere_education
@atmosphere_education Год назад
ура, новый видос у Тимура, лайк
@LionKingheh
@LionKingheh Год назад
Спасибо за интересный проект!
@Mr.Onelvlup
@Mr.Onelvlup Год назад
искал и нашел! четкий ролик! спасибо, автор!
@zaharovLucky
@zaharovLucky Год назад
Просто пушка Тимур👍
@dromich
@dromich Год назад
Глазам не верю, как раз хотел поковыряться в этой новой фишке телеграмм API. Огромное спасибо за контент как всегда ТОП
@209alex
@209alex Год назад
ты лучший. всегда в тему
@user-pg6sg1hu7x
@user-pg6sg1hu7x Год назад
я человек простой, вижу урок ульби ставлю лайк
@nikolaik624
@nikolaik624 Год назад
Очень крутая информация, спасибо!
@user-fd1qs5gk8y
@user-fd1qs5gk8y Месяц назад
Отличный материал! Спасибо большое!
@user-yb3gf6js5s
@user-yb3gf6js5s Год назад
Ульби могуч! Ничего не скажешь.
@user-of8lf7yj8o
@user-of8lf7yj8o Год назад
Вааау, наконец магазины в тг будут выглядеть нормально, а не кучей инлайн ссылок
@meowmyacivh
@meowmyacivh Год назад
Для локального дебага прокидываем порт в интернет через ngrok, ссылку которую дает ngrok даем боту, всё, получился локальный дебаг :)
@user-jp6mx5sj2r
@user-jp6mx5sj2r Год назад
Для бота https нужен)
@slava3553
@slava3553 Год назад
Ngrok раздаёт небезопасное https соединение, подвязать к телеге можно, но нужно будет передавать в заголовках пропуск авторизации в нжрке
@trickymartian3477
@trickymartian3477 Месяц назад
Контент как обычно пушка)
@hutoryanin
@hutoryanin Год назад
Здравствуй Тимур, благодарю за подробный рассказ о новшествах в api телеги. *Л. а. й. к.* и *Р. е. с. п. е. к. т.*
@Traineratwot
@Traineratwot Год назад
Для дебага на локальной машине можно использовать ngrok он даст временный домен и останется только прокинуть нужный порт на роутере. Сам с телеграмом не пробывал но должено сработать
@R4mirez
@R4mirez Год назад
тоже хотел ngrok посоветовать. с ботом на пайтоне все работает
@user-ks3sj6st1s
@user-ks3sj6st1s Год назад
Поддерживаю, хороший совет, тоже хотел сказать про ngrok
@caH40yc
@caH40yc Год назад
жаль, что сразу не полез в комментарии, пришлось воспользоваться яндексом )) единственное в реакте в package.json изменить порт на 80 "start": "set port=80 && react-scripts start"
@mrakov
@mrakov Год назад
Ждал ролик с 1 дня патча телеги)
@user-ht4es2nw7k
@user-ht4es2nw7k Год назад
Спасибо за контент!
@user-zs9qk8se9y
@user-zs9qk8se9y Год назад
Спасибо за старания. Лайк
@daurenismagulov5654
@daurenismagulov5654 Год назад
То что нужно было, спасибо за контент. Было бы хорошо если бы сделал ещё урок про PERN в связке с JWT аутентификацией
@stream2364
@stream2364 Год назад
У него есть интернет магазин небольшой с этим стэком
@TheVitkuz
@TheVitkuz 9 дней назад
Все очень понятно. Спасибо
@Max-kc3mh
@Max-kc3mh Год назад
Редкий канал на русском с годной информацией. Спасибо, познавательно.
@technocoh
@technocoh 4 месяца назад
Просто офигенно, я в шоке)))
@anvarzaripboyev5730
@anvarzaripboyev5730 11 месяцев назад
Очень полезное видео для всех!
@tevi6667
@tevi6667 Год назад
Лайкос большой сначала =)
@vikodam
@vikodam Год назад
Тимур, мы все тебя любим😀❤
@ivkis3270
@ivkis3270 Год назад
вопрос: есть функция sendData(), которая позволяет отправить сообщение из WebApp на сервер к боту. А есть ли аналогичный способ отправить данные в web app с сервера? Что-то в роде sendDataToWebApp(). Или через бота отправить данные в web app не получится и лучше сделать http сервер, откуда web app будет подтягивать данные?
@Ddddddddyu
@Ddddddddyu 7 дней назад
Всё понятно. Спасибо. На какой минуте шифруете токен от тг бота? Или шифрования нет? У меня гитхаб ругнулся на то что я шифр не захэшировал
@pavelasafov
@pavelasafov 2 месяца назад
Спасибо большое! Хорошее видео!
@hennadiishavlo179
@hennadiishavlo179 Год назад
Тимур когда курс можно будет приобрести снова?)
@bekzoddeveloper5995
@bekzoddeveloper5995 Год назад
Спасибо! Очень полезно!
@laches1
@laches1 Год назад
есть вопрос не совсем по теме но все же. Я разрабатываю сайт на react который может подписываться на события в блокчейне, и хочу чтобы еще бот телеграмма выкладывал в чат эти события. Каким способом можно их так сказать "подружить". Возможно ли запускать одновременно приложение на react и бота телеграм
@sasharudenko5446
@sasharudenko5446 Год назад
где-то на 35й минуте слышал крики джунов ) видимо от скорости подачи контента ))
@drdev_blog
@drdev_blog Месяц назад
Очень хочется услышать обновленное углубленное занятие по телеграм ботам мини апсам! 🙄
@mikeempire
@mikeempire Год назад
Вау, ты очень крут! И ты засветил номер свой)
@Mirrasim
@Mirrasim Год назад
хахах норм это тестовый акк
@user-of8lf7yj8o
@user-of8lf7yj8o Год назад
Блин😥, только не звони туда ладно🤫
@Kolesnick777
@Kolesnick777 Год назад
всё очень круто, отличная подача материала. Но настолько быстро что мне как начинающему допустим очень сложно понимать всё не успеваю за тобой 😊
@user-pt5vc1uy9o
@user-pt5vc1uy9o Год назад
Да, надо на видео реально скорость замедлять через настройки
@tolyankent7982
@tolyankent7982 Год назад
огромное спасибо за контент! если с телеги даже на локалку сообщения прилетают, получается нода коннектится к сервакам node-telegram-bot-api и всё общение через их сервера проходит?
@begineras
@begineras Год назад
Агонь видос
@unicoxr5tj417
@unicoxr5tj417 Год назад
я человек простой: вижу Улби-урок и ставлю лайк
@dzianisantanouski1885
@dzianisantanouski1885 Год назад
Суппер, спасибо! 🖖
@pavelkostrov1465
@pavelkostrov1465 Год назад
Лайк не глядя
@gozaltech
@gozaltech Год назад
Можно использовать ngrok для отладки локального приложения.
@astkh4381
@astkh4381 Год назад
Спасибо за видео.Мог бы ты сделать видео как заливаться на VPS приложение на express + psql
@ziloliddin
@ziloliddin Год назад
четко, до мелочей показал
@kol4an721
@kol4an721 Год назад
ребят, подскажите что делать, если все сделал по инструкции с официальной статьи из телеграма, а новых полей в window не появилось? я пробовал просто вставлять скрипт из официальной инструкции, пробовал копирвать сам скрипт и создавать новый js файл для него, а потом подключать, вообше ничего не происходит, кроме того, что ошибка появляется, что поля Telegram в объекте window не существует..
@user-fq4fn3cj4f
@user-fq4fn3cj4f Год назад
Спасибо за урок, очень информативно. Может кто нибудь подсказать как добавить несколько кнопок для различных ссылок? Или пока есть возможность добавить только одну кнопку?
@maksymdudyk1718
@maksymdudyk1718 Год назад
Спасибо большое! А на Гитхабе есть етот код? А то видео очень бьістрое и в отдельньіх моментах незможно воссоздать?
@user-tw9hm8sq3v
@user-tw9hm8sq3v Год назад
Можно использовать Ngrok для отладки бота, очень удобно.
@liiiisd
@liiiisd Год назад
Агонь!👍
@Orel_-_
@Orel_-_ 11 месяцев назад
Огонь 💥
@Sokovizimalka
@Sokovizimalka Год назад
По поводу запуска локально. Никто не мешает в кнопку запихать url, который потом в hosts перенаправить на localhost. Но тогда надо где-то нарыть валидных сертификатов под указанный url, иначе web app не запустится (можно с прода взять, если есть живой прод с доменом). Либо использовать test enviroment телеги, в доках об этом написано. Тогда можно будет использовать http и пихать в кнопку прямо 127.0.0.1. Либо использовать ngrok, он ваш локальный порт делает доступным через свои серверы, дает общедоступный адрес с https. В таком случае в кнопку пихать адрес, выданный ngrok'ом, а запросы будут приходить на localhost, или куда скажете.
@yuriiyakovenko9566
@yuriiyakovenko9566 10 месяцев назад
Красавчик , я так понимаю что бот синхронизируется с определенной вебстраницей и берет данные от туда после чего показывает как браузер , после манипуляций с браузером телеграм принимает данные от сайта и выводит в рабочую область . Хороший ход со стороны ТГ , если так дальше пойдёт то весь СНГ онлайн рынок перейдет в ТГ.
@mukamumaa4284
@mukamumaa4284 Год назад
Здравствуйте, очень увлекаюсь вашими видео есть небольшой опыт во фронтенд если у вас ваш курс, если да то можно пожалуйста приобрести🙏 Спасиьо за труд!!!
@kinowatch_001
@kinowatch_001 Год назад
а можно встраивать видеоплеер в web app и чтоб работала кнопка полноэкранного режима на плеере?
@PacoOfficial
@PacoOfficial Год назад
круто!
@outofrange9100
@outofrange9100 Год назад
Можно ли вместо selectel хостинга использовать netlify для бэкенда?
@vladislavivanchikov6622
@vladislavivanchikov6622 Год назад
Тимур тупо топ !
@pavelokun
@pavelokun Год назад
Привет! Планируешь добавить видео с добавлением Telegram Payments к такому сайту?
@oleg.frolov
@oleg.frolov Год назад
Очень круто. Повторили бы на Пайтон)
@Mirrasim
@Mirrasim Год назад
опа контент подъехал
@Differentperspective1
@Differentperspective1 Год назад
А можно использовать другие языки? Точнее Golang можно использовать?
@user-wz8oy9gn6z
@user-wz8oy9gn6z 6 месяцев назад
Привет, большое спасибо за то, что ты делаешь, хотелось бы в подобных роликах немного по подробнее и как-то по медленнее пусть ролик и затянется минут на 20. Просто постоянно нить то и дело теряется.
@dimasnytin
@dimasnytin Год назад
Спасибо 👍
@creative-routine8371
@creative-routine8371 Год назад
Блин, я тебе лаки не глядя ставлю
@user-vm9sk8vl2j
@user-vm9sk8vl2j Год назад
Доброго дня суток! Хочу сделать конструктор чат ботов (vk bot). На фронте я использую react и редактор диаграмм reactflow, бек на nodejs, express и mongoDB. Все приложение находится на одном сервере, проксируется с помощью nginx. Для самого чат бота я использую модуль VK-IO, авторизация с помощью passport js. Теперь у меня вопрос: например в конструкторе создаем бота и загружаем сценарий в базу данных, как потом его запустить. Затем возникает другая проблема: как запустить несколько ботов, так как боты создаются разными пользователями и у каждого свой токен. Что бы вы посоветовали?
@webstack-frontend1697
@webstack-frontend1697 Год назад
Классное видео
Далее
Мой странный компьютер 2024
18:33
Плохие и хорошие видеокарты
1:00
Power up all cell phones.
0:17
Просмотров 49 млн