Web app TELEGRAM Бот на node js и React. Интернет магазин и форма обратной связи в телеграмм боте
HTML-код
- Опубликовано: 19 май 2024
- В этом ролике мы разработаем 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 
Наука
Для дебага бота или бекенда юзаю ngrok, в одну команду пробрасывается локальный порт и создается паблик линк, очень удобно.
Спасибо за видео, как раз нужно было скрестить бота с формочкой но не хотелось пилить сбор данных на боте, и тут такая напоминалка с отличным разбором 🙏
работает - спасибо большое!)
по подробнее бы как это настроить)
ngrok http 3000
в vscode из коробки есть проброс портов - шикарно работает, нужна только учетка в githab
Сколько не смотрю твои ролики, каждый раз меня поражает то как ты к ним готовишься, мало кто понимает какой это труд,... спасибо тебе!
Удивительно, почти полтора года делал телеграм ботов, но про эту фишку не знал. Надо опробовать, как обычно, спасибо за видос!
Смотрю постоянно твои ролики. Очень структурированная речь.
Нравится твоя подача материала. Реально полезные ролики выпускаешь.
Спасибо тебе большое, что тратишь свое личное время и делишься бесценным опытом.
Спасибо за новость о такой шикарной опции! И за подробные разъяснения по ее применению.
Ещё урок не смотрел, но уже знаю что будет пушка 🚀
Тимур, сделай пожалуйста хоть одно видео про себя. Как прошел путь с учителя математики до программиста, с какими трудностями сталкивался, в каком возрасте и т д. Думаю это многим на этом канале было бы очень интересно! Спасибо
P.S. друзья, поддержите лайком чтобы автор увидел комментарий )
Полностью поддерживаю!
он учился в МГУ, не был учителем, только в качестве подработки. Начал изучать серьезно в 20 лет, в 21 устроился на первую работу. Сейчас ему 23.
@@hellohello4454 красавчик вообще! Как за такое короткое время смог столько всего усвоить интересно, может математический склад ума благодаря такому образованию поспособствовал.
@@andrewlevitsky6270 Нет
@@hellohello4454 а на кого он учился/учится? Он ведь не самоучка, он реально на высоком уровне шарит
Я человек простой - вижу ролик от Улби, ставлю лайк не глядя. Посмотрю как дорасту.
Спасибо. Было интересно) Я все же начал делать на telegraf, тк хотелось на nestjs сделать и не нашел других библиотек, кроме как на telegraf. Было бы здорово сделать серию роликов про ci/cd для фронтеров, а то всегда боль какая-то с этим разворачиванием, поиском норм хостеров, чтобы и ноду и постгрю можно было не дорого развернуть, и как выбираешь тот или иной хостинг, про создание простеньких пайплайнов и тп. И еще бы было здорово касаться тестирования хоть немного, это очень важная тема, которую надо всегда держать в голове и как можно скорей внедрять в разарботку, отдалдка та же в ноде не всегда тривиальная задача в vs code, а для отладки бота еще предстоит разбираться. В целом круто, так держать!
Отдельный лайк за текстовую версию ❤
Огонь 🔥 спасибо что ты у нас есть 😊 очень полезно
Шикардос, Тимур! Как всегда, лучший!
Спасибо, Тимур! Не останавливайся пожалуйста 🙏
Спасибо, полезный ролик. Понятно, интересно изложено. Особенно даже не само приложение, а выкладка его на сервер и работа с netlify.
Я простой человек, вижу Ульби урок и тоже ставлю лайк! Спасибо за знания!😀
Жду видео про то, как максимально правильно заливать сайт на сервак. То есть сборка проекта через докер, настройки nginx, купленного сервака, домена, сертификата безопасности и разворачивания проекта на всем этом.
Будет уникальный контент, на ютубе не нашел похожее.
Такое есть, русскоязычный канал от а до я показывал. Покупал сервак, домен, настраивал сервак, ssl, nginx, nodejs бекенд приложение опубликовал + react front. Крч там все есть, правда по просмотрам очень мало. Почему то ютуб такие полезные видео никак не рекомендует :(
@@user-wl2xp8yo6x что это за канал ? «русский»?
@@usernnxn подвисну на тебе пока человек ответит
поддерживаю
Поддерживаю, где такой контент видели?)
Как обычно годнота от Тимура подъехала! Спасибо тебе огромное)
Класс! Теперь я смогу реализовать все свои самые сочные и влажные фантазии в телеграм боте! Пасиба!
node js, react js, telegram API
Отличный ролик! Спасибо!
Хорошая возможность делать интеграции с telegram!
Раньше на освоения 1 часа видео от Ulbi я тратил 3 часа, сейчас 30 минут (с перемотками, так-как все понятно). Круто.
Офигенно. Спасибо большое. Сам я три дня голову себе ломал над отдельными вопросами.
Я сейчас делаю бота на телеграм для работы, очень крутые новые фичи, как раз то что нужно, спасибо!
Пора открывать магазин🤣, спасибо Тимур!
Тимур, спасибо тебе за канал и контент. часто возвращаюсь что-то уточнить как в энциклопедию)
Красавчик, я только только сам по api все сделал. Вышел бы твой ролик неделю назад))
Ульби, я уже не ждал, когда в=будет видос с нодой. Как только стану биг бой девелопером, подпишусь на патреон)
Для локального дебага прокидываем порт в интернет через ngrok, ссылку которую дает ngrok даем боту, всё, получился локальный дебаг :)
Для бота https нужен)
Ngrok раздаёт небезопасное https соединение, подвязать к телеге можно, но нужно будет передавать в заголовках пропуск авторизации в нжрке
Лайк можно ставить неглядя. Супер контент. Спасибо
Как всегда все качественно и понятно
я человек простой: вижу Улби-урок и ставлю лайк
Спасибо что создаешь такой крутой контент, очень простой и понятный материал
Для дебага на локальной машине можно использовать ngrok он даст временный домен и останется только прокинуть нужный порт на роутере. Сам с телеграмом не пробывал но должено сработать
тоже хотел ngrok посоветовать. с ботом на пайтоне все работает
Поддерживаю, хороший совет, тоже хотел сказать про ngrok
жаль, что сразу не полез в комментарии, пришлось воспользоваться яндексом )) единственное в реакте в package.json изменить порт на 80 "start": "set port=80 && react-scripts start"
Глазам не верю, как раз хотел поковыряться в этой новой фишке телеграмм API. Огромное спасибо за контент как всегда ТОП
Пока не посмотрел, но уверен, что контент как всегда крут! Лайк заранее)) Только зря на 00:59 светанул свой номер телефона - надеюсь, он у тебя не основной.
Как всегда на высоте брат!!!
Отличный материал! Спасибо большое!
I love your videos😍😍😍 Огромное спасибо 😇
я человек простой, вижу урок ульби ставлю лайк
Оу, пару минут назад)) Смотрим свеженькое
искал и нашел! четкий ролик! спасибо, автор!
Самый годный материал и подача на Ютюбе👍
ты лучший. всегда в тему
Ждал ролик с 1 дня патча телеги)
Спасибо за интересный проект!
ура, новый видос у Тимура, лайк
Здравствуй Тимур, благодарю за подробный рассказ о новшествах в api телеги.
*Л. а. й. к.*
и
*Р. е. с. п. е. к. т.*
Просто пушка Тимур👍
Отличное видео! Спасибо!) Как раз то, что искал
Очень крутая информация, спасибо!
Вааау, наконец магазины в тг будут выглядеть нормально, а не кучей инлайн ссылок
Спасибо за контент!
То что нужно было, спасибо за контент. Было бы хорошо если бы сделал ещё урок про PERN в связке с JWT аутентификацией
У него есть интернет магазин небольшой с этим стэком
Очень хочется услышать обновленное углубленное занятие по телеграм ботам мини апсам! 🙄
Спасибо за старания. Лайк
Ульби могуч! Ничего не скажешь.
Редкий канал на русском с годной информацией. Спасибо, познавательно.
Просто офигенно, я в шоке)))
Контент как обычно пушка)
Тимур, мы все тебя любим😀❤
всё очень круто, отличная подача материала. Но настолько быстро что мне как начинающему допустим очень сложно понимать всё не успеваю за тобой
😊
Да, надо на видео реально скорость замедлять через настройки
Спасибо! Лайк!
Вау, ты очень крут! И ты засветил номер свой)
хахах норм это тестовый акк
Блин😥, только не звони туда ладно🤫
Лайкос большой сначала =)
Спасибо большое! Хорошее видео!
где-то на 35й минуте слышал крики джунов ) видимо от скорости подачи контента ))
Спасибо! Очень полезно!
Спасибо 👍
Спасибо за видео.Мог бы ты сделать видео как заливаться на VPS приложение на express + psql
Привет, большое спасибо за то, что ты делаешь, хотелось бы в подобных роликах немного по подробнее и как-то по медленнее пусть ролик и затянется минут на 20. Просто постоянно нить то и дело теряется.
Очень полезное видео для всех!
Агонь видос
Красавчик , я так понимаю что бот синхронизируется с определенной вебстраницей и берет данные от туда после чего показывает как браузер , после манипуляций с браузером телеграм принимает данные от сайта и выводит в рабочую область . Хороший ход со стороны ТГ , если так дальше пойдёт то весь СНГ онлайн рынок перейдет в ТГ.
По поводу запуска локально. Никто не мешает в кнопку запихать url, который потом в hosts перенаправить на localhost. Но тогда надо где-то нарыть валидных сертификатов под указанный url, иначе web app не запустится (можно с прода взять, если есть живой прод с доменом). Либо использовать test enviroment телеги, в доках об этом написано. Тогда можно будет использовать http и пихать в кнопку прямо 127.0.0.1. Либо использовать ngrok, он ваш локальный порт делает доступным через свои серверы, дает общедоступный адрес с https. В таком случае в кнопку пихать адрес, выданный ngrok'ом, а запросы будут приходить на localhost, или куда скажете.
Можно использовать Ngrok для отладки бота, очень удобно.
Очень круто. Повторили бы на Пайтон)
Лайк не глядя
Суппер, спасибо! 🖖
опа контент подъехал
четко, до мелочей показал
Тимур когда курс можно будет приобрести снова?)
Агонь!👍
Блин, я тебе лаки не глядя ставлю
вопрос: есть функция sendData(), которая позволяет отправить сообщение из WebApp на сервер к боту. А есть ли аналогичный способ отправить данные в web app с сервера? Что-то в роде sendDataToWebApp(). Или через бота отправить данные в web app не получится и лучше сделать http сервер, откуда web app будет подтягивать данные?
Огонь 💥
круто!
огромное спасибо за контент!
если с телеги даже на локалку сообщения прилетают, получается нода коннектится к сервакам node-telegram-bot-api
и всё общение через их сервера проходит?
Спасибо
Нашёл способ как тестировать и/или отлаживать telegram web apps с пк
Go to Settings > Advanced > Experimental settings > Enable webview inspection.
Right click in the WebView and choose Inspect.
Нашёл это в доке по данной технологии
есть вопрос не совсем по теме но все же. Я разрабатываю сайт на react который может подписываться на события в блокчейне, и хочу чтобы еще бот телеграмма выкладывал в чат эти события. Каким способом можно их так сказать "подружить". Возможно ли запускать одновременно приложение на react и бота телеграм
Здравствуйте, очень увлекаюсь вашими видео есть небольшой опыт во фронтенд если у вас ваш курс, если да то можно пожалуйста приобрести🙏 Спасиьо за труд!!!
Крутой
Тимур тупо топ !
Просто нонсенс!!!
супер!
Спасибо за урок, очень информативно. Может кто нибудь подсказать как добавить несколько кнопок для различных ссылок? Или пока есть возможность добавить только одну кнопку?
Очень интересно
Можно использовать ngrok для отладки локального приложения.
спасибо
Из-за упрощения совсем упустили важный момент: безопасность общения с бэком. Сейчас может любой слать запросы на эндпоинты бэка. Нужен какой-то токен дополнительный, особенно если вы товары будете с него получать (которые в ролике захардкодили в массив). Бэк будет отвечать всем желающим? Это очень важдый момент, хотя бы в двух словах надо было упомянуть концепцию этого момента. А то вообще оторвано от реальности.
Лучший!