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

Рет қаралды 193,632

Күн бұрын

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

Пікірлер: 295

@slavikkokoiev6723 Жыл бұрын

Сколько не смотрю твои ролики, каждый раз меня поражает то как ты к ним готовишься, мало кто понимает какой это труд,... спасибо тебе!

@strelets Жыл бұрын

Для дебага бота или бекенда юзаю ngrok, в одну команду пробрасывается локальный порт и создается паблик линк, очень удобно. Спасибо за видео, как раз нужно было скрестить бота с формочкой но не хотелось пилить сбор данных на боте, и тут такая напоминалка с отличным разбором 🙏

@maratfaizer Жыл бұрын

работает - спасибо большое!)

@user-fb1rf2cy7i 10 ай бұрын

по подробнее бы как это настроить)

@YoutubeFrogOfHell 9 ай бұрын

ngrok http 3000

@kindDaddy 28 күн бұрын

в vscode из коробки есть проброс портов - шикарно работает, нужна только учетка в githab

@helloglobalme9689 Жыл бұрын

Смотрю постоянно твои ролики. Очень структурированная речь. Нравится твоя подача материала. Реально полезные ролики выпускаешь. Спасибо тебе большое, что тратишь свое личное время и делишься бесценным опытом.

@falsetrue7910 Жыл бұрын

Удивительно, почти полтора года делал телеграм ботов, но про эту фишку не знал. Надо опробовать, как обычно, спасибо за видос!

@user-vk1id6md6o Жыл бұрын

Ещё урок не смотрел, но уже знаю что будет пушка 🚀

@prizm_tema Жыл бұрын

Спасибо за новость о такой шикарной опции! И за подробные разъяснения по ее применению.

@shittywizzard5727 Жыл бұрын

Шикардос, Тимур! Как всегда, лучший!

@user-dq9pl8me3o Жыл бұрын

Я человек простой - вижу ролик от Улби, ставлю лайк не глядя. Посмотрю как дорасту.

@user-ww6nn2jw2p Жыл бұрын

Отдельный лайк за текстовую версию ❤

@andrewlevitsky6270 Жыл бұрын

Тимур, сделай пожалуйста хоть одно видео про себя. Как прошел путь с учителя математики до программиста, с какими трудностями сталкивался, в каком возрасте и т д. Думаю это многим на этом канале было бы очень интересно! Спасибо P.S. друзья, поддержите лайком чтобы автор увидел комментарий )

@May-yw1kb Жыл бұрын

Полностью поддерживаю!

@hellohello4454 Жыл бұрын

он учился в МГУ, не был учителем, только в качестве подработки. Начал изучать серьезно в 20 лет, в 21 устроился на первую работу. Сейчас ему 23.

@andrewlevitsky6270 Жыл бұрын

@@hellohello4454 красавчик вообще! Как за такое короткое время смог столько всего усвоить интересно, может математический склад ума благодаря такому образованию поспособствовал.

@user-pt5vc1uy9o Жыл бұрын

@@andrewlevitsky6270 Нет

@user-pc4rn3ev5m Жыл бұрын

@@hellohello4454 а на кого он учился/учится? Он ведь не самоучка, он реально на высоком уровне шарит

@user-gi3sh6ul2j Жыл бұрын

Спасибо. Было интересно) Я все же начал делать на telegraf, тк хотелось на nestjs сделать и не нашел других библиотек, кроме как на telegraf. Было бы здорово сделать серию роликов про ci/cd для фронтеров, а то всегда боль какая-то с этим разворачиванием, поиском норм хостеров, чтобы и ноду и постгрю можно было не дорого развернуть, и как выбираешь тот или иной хостинг, про создание простеньких пайплайнов и тп. И еще бы было здорово касаться тестирования хоть немного, это очень важная тема, которую надо всегда держать в голове и как можно скорей внедрять в разарботку, отдалдка та же в ноде не всегда тривиальная задача в vs code, а для отладки бота еще предстоит разбираться. В целом круто, так держать!

@FI4a Жыл бұрын

Огонь 🔥 спасибо что ты у нас есть 😊 очень полезно

@konstantinkuksov914 Жыл бұрын

Как обычно годнота от Тимура подъехала! Спасибо тебе огромное)

@helenit4365 Жыл бұрын

Я простой человек, вижу Ульби урок и тоже ставлю лайк! Спасибо за знания!😀

@mr.teemon 11 ай бұрын

Спасибо, Тимур! Не останавливайся пожалуйста 🙏

@user-paint-alexandra Жыл бұрын

Спасибо, полезный ролик. Понятно, интересно изложено. Особенно даже не само приложение, а выкладка его на сервер и работа с netlify.

@konstantinvoronin4687 Жыл бұрын

Класс! Теперь я смогу реализовать все свои самые сочные и влажные фантазии в телеграм боте! Пасиба! node js, react js, telegram API

@ipa_stor Жыл бұрын

Пора открывать магазин🤣, спасибо Тимур!

@user-cp5cc7sq3s Жыл бұрын

Лайк можно ставить неглядя. Супер контент. Спасибо

@vladislav_pikiner Жыл бұрын

Тимур, спасибо тебе за канал и контент. часто возвращаюсь что-то уточнить как в энциклопедию)

@user-ve8ux5yy7y Жыл бұрын

Офигенно. Спасибо большое. Сам я три дня голову себе ломал над отдельными вопросами.

@gordoner5693 Жыл бұрын

Как всегда все качественно и понятно

@Senior_weekend_developer Жыл бұрын

Пока не посмотрел, но уверен, что контент как всегда крут! Лайк заранее)) Только зря на 00:59 светанул свой номер телефона - надеюсь, он у тебя не основной.

@apsolution4722 Жыл бұрын

Оу, пару минут назад)) Смотрим свеженькое

@user-qv4sm1eb7i Жыл бұрын

Ульби, я уже не ждал, когда в=будет видос с нодой. Как только стану биг бой девелопером, подпишусь на патреон)

@slark5575 Жыл бұрын

Как всегда на высоте брат!!!

@unicoxr5tj417 Жыл бұрын

я человек простой: вижу Улби-урок и ставлю лайк

@egolege Жыл бұрын

Отличный ролик! Спасибо! Хорошая возможность делать интеграции с telegram!

@gkfldjdkk4556 Жыл бұрын

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

@user-qx8ol8dc9l Жыл бұрын

Раньше на освоения 1 часа видео от Ulbi я тратил 3 часа, сейчас 30 минут (с перемотками, так-как все понятно). Круто.

@Fortsev Жыл бұрын

Отличное видео! Спасибо!) Как раз то, что искал

@ilyamartynov2743 Жыл бұрын

Красавчик, я только только сам по api все сделал. Вышел бы твой ролик неделю назад))

@LionKingheh Жыл бұрын

Спасибо за интересный проект!

@dilmurodqodirjonov9940 Жыл бұрын

I love your videos😍😍😍 Огромное спасибо 😇

@user-gu4tq6by1t Жыл бұрын

Спасибо что создаешь такой крутой контент, очень простой и понятный материал

@KGZVER Жыл бұрын

Жду видео про то, как максимально правильно заливать сайт на сервак. То есть сборка проекта через докер, настройки nginx, купленного сервака, домена, сертификата безопасности и разворачивания проекта на всем этом. Будет уникальный контент, на ютубе не нашел похожее.

@user-wl2xp8yo6x Жыл бұрын

Такое есть, русскоязычный канал от а до я показывал. Покупал сервак, домен, настраивал сервак, ssl, nginx, nodejs бекенд приложение опубликовал + react front. Крч там все есть, правда по просмотрам очень мало. Почему то ютуб такие полезные видео никак не рекомендует :(

@usernnxn Жыл бұрын

@@user-wl2xp8yo6x что это за канал ? «русский»?

@raijinhasarrived Жыл бұрын

@@usernnxn подвисну на тебе пока человек ответит

@amir18n Жыл бұрын

поддерживаю

@da_progress2678 Жыл бұрын

Поддерживаю, где такой контент видели?)

@dromich Жыл бұрын

Глазам не верю, как раз хотел поковыряться в этой новой фишке телеграмм API. Огромное спасибо за контент как всегда ТОП

@user-fd1qs5gk8y Ай бұрын

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

@209alex Жыл бұрын

ты лучший. всегда в тему

@user-pg6sg1hu7x Жыл бұрын

я человек простой, вижу урок ульби ставлю лайк

@simonsavvinov7989 Жыл бұрын

Самый годный материал и подача на Ютюбе👍

@Mr.Onelvlup Жыл бұрын

искал и нашел! четкий ролик! спасибо, автор!

@zaharovLucky Жыл бұрын

Просто пушка Тимур👍

@user-of8lf7yj8o Жыл бұрын

Вааау, наконец магазины в тг будут выглядеть нормально, а не кучей инлайн ссылок

@mrakov Жыл бұрын

Ждал ролик с 1 дня патча телеги)

@atmosphere_education Жыл бұрын

ура, новый видос у Тимура, лайк

@user-ht4es2nw7k Жыл бұрын

Спасибо за контент!

@meowmyacivh Жыл бұрын

Для локального дебага прокидываем порт в интернет через ngrok, ссылку которую дает ngrok даем боту, всё, получился локальный дебаг :)

@user-jp6mx5sj2r Жыл бұрын

Для бота https нужен)

@slava3553 Жыл бұрын

Ngrok раздаёт небезопасное https соединение, подвязать к телеге можно, но нужно будет передавать в заголовках пропуск авторизации в нжрке

@user-yb3gf6js5s Жыл бұрын

Ульби могуч! Ничего не скажешь.

@nikolaik624 Жыл бұрын

Очень крутая информация, спасибо!

@daurenismagulov5654 Жыл бұрын

То что нужно было, спасибо за контент. Было бы хорошо если бы сделал ещё урок про PERN в связке с JWT аутентификацией

@stream2364 Жыл бұрын

У него есть интернет магазин небольшой с этим стэком

@user-zs9qk8se9y Жыл бұрын

Спасибо за старания. Лайк

@hutoryanin Жыл бұрын

Здравствуй Тимур, благодарю за подробный рассказ о новшествах в api телеги. *Л. а. й. к.* и *Р. е. с. п. е. к. т.*

@Traineratwot Жыл бұрын

Для дебага на локальной машине можно использовать ngrok он даст временный домен и останется только прокинуть нужный порт на роутере. Сам с телеграмом не пробывал но должено сработать

@R4mirez Жыл бұрын

тоже хотел ngrok посоветовать. с ботом на пайтоне все работает

@user-ks3sj6st1s Жыл бұрын

Поддерживаю, хороший совет, тоже хотел сказать про ngrok

@caH40yc Жыл бұрын

жаль, что сразу не полез в комментарии, пришлось воспользоваться яндексом )) единственное в реакте в package.json изменить порт на 80 "start": "set port=80 && react-scripts start"

@Kolesnick777 Жыл бұрын

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

@user-pt5vc1uy9o Жыл бұрын

Да, надо на видео реально скорость замедлять через настройки

@sasharudenko5446 Жыл бұрын

где-то на 35й минуте слышал крики джунов ) видимо от скорости подачи контента ))

@Max-kc3mh Жыл бұрын

Редкий канал на русском с годной информацией. Спасибо, познавательно.

@mikeempire Жыл бұрын

Вау, ты очень крут! И ты засветил номер свой)

@Mirrasim Жыл бұрын

хахах норм это тестовый акк

@user-of8lf7yj8o Жыл бұрын

Блин😥, только не звони туда ладно🤫

@vikodam Жыл бұрын

Тимур, мы все тебя любим😀❤

@anvarzaripboyev5730 10 ай бұрын

Очень полезное видео для всех!

@technocoh 4 ай бұрын

Просто офигенно, я в шоке)))

@bekzoddeveloper5995 Жыл бұрын

Спасибо! Очень полезно!

@yuriiyakovenko9566 9 ай бұрын

Красавчик , я так понимаю что бот синхронизируется с определенной вебстраницей и берет данные от туда после чего показывает как браузер , после манипуляций с браузером телеграм принимает данные от сайта и выводит в рабочую область . Хороший ход со стороны ТГ , если так дальше пойдёт то весь СНГ онлайн рынок перейдет в ТГ.

@dimasnytin Жыл бұрын

Спасибо 👍

@pavelasafov 2 ай бұрын

Спасибо большое! Хорошее видео!

@user-wz8oy9gn6z 6 ай бұрын

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

@trickymartian3477 Ай бұрын

Контент как обычно пушка)

@drdev_blog 20 күн бұрын

Очень хочется услышать обновленное углубленное занятие по телеграм ботам мини апсам! 🙄

@Sokovizimalka Жыл бұрын

По поводу запуска локально. Никто не мешает в кнопку запихать url, который потом в hosts перенаправить на localhost. Но тогда надо где-то нарыть валидных сертификатов под указанный url, иначе web app не запустится (можно с прода взять, если есть живой прод с доменом). Либо использовать test enviroment телеги, в доках об этом написано. Тогда можно будет использовать http и пихать в кнопку прямо 127.0.0.1. Либо использовать ngrok, он ваш локальный порт делает доступным через свои серверы, дает общедоступный адрес с https. В таком случае в кнопку пихать адрес, выданный ngrok'ом, а запросы будут приходить на localhost, или куда скажете.

@tevi6667 Жыл бұрын

Лайкос большой сначала =)

@astkh4381 Жыл бұрын

Спасибо за видео.Мог бы ты сделать видео как заливаться на VPS приложение на express + psql

@ivkis3270 Жыл бұрын

вопрос: есть функция sendData(), которая позволяет отправить сообщение из WebApp на сервер к боту. А есть ли аналогичный способ отправить данные в web app с сервера? Что-то в роде sendDataToWebApp(). Или через бота отправить данные в web app не получится и лучше сделать http сервер, откуда web app будет подтягивать данные?

@user-tw9hm8sq3v Жыл бұрын

Можно использовать Ngrok для отладки бота, очень удобно.

@hennadiishavlo179 Жыл бұрын

Тимур когда курс можно будет приобрести снова?)

@oleg.frolov Жыл бұрын

Очень круто. Повторили бы на Пайтон)

@laches1 Жыл бұрын

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

@ziloliddin 11 ай бұрын

четко, до мелочей показал

@creative-routine8371 Жыл бұрын

Блин, я тебе лаки не глядя ставлю

@Khazanalexey Жыл бұрын

Спасибо

@PacoOfficial Жыл бұрын

круто!

@pavelkostrov1465 Жыл бұрын

Лайк не глядя

@mortydollar7592 Жыл бұрын

Нашёл способ как тестировать и/или отлаживать telegram web apps с пк Go to Settings > Advanced > Experimental settings > Enable webview inspection. Right click in the WebView and choose Inspect. Нашёл это в доке по данной технологии

@gozaltech Жыл бұрын

Можно использовать ngrok для отладки локального приложения.

@tolyankent7982 Жыл бұрын

огромное спасибо за контент! если с телеги даже на локалку сообщения прилетают, получается нода коннектится к сервакам node-telegram-bot-api и всё общение через их сервера проходит?

@mukamumaa4284 Жыл бұрын

Здравствуйте, очень увлекаюсь вашими видео есть небольшой опыт во фронтенд если у вас ваш курс, если да то можно пожалуйста приобрести🙏 Спасиьо за труд!!!

@dzianisantanouski1885 Жыл бұрын

Суппер, спасибо! 🖖

@Dmitry-cb7wl 2 ай бұрын

Из-за упрощения совсем упустили важный момент: безопасность общения с бэком. Сейчас может любой слать запросы на эндпоинты бэка. Нужен какой-то токен дополнительный, особенно если вы товары будете с него получать (которые в ролике захардкодили в массив). Бэк будет отвечать всем желающим? Это очень важдый момент, хотя бы в двух словах надо было упомянуть концепцию этого момента. А то вообще оторвано от реальности.

@kroda Жыл бұрын

спасибо

@begineras Жыл бұрын

Агонь видос

@user-fq4fn3cj4f Жыл бұрын

Спасибо за урок, очень информативно. Может кто нибудь подсказать как добавить несколько кнопок для различных ссылок? Или пока есть возможность добавить только одну кнопку?

@nadyashaymardanova6000 Жыл бұрын

Очень интересно

@nariman951 Жыл бұрын

Крутой

@user-vm9sk8vl2j Жыл бұрын

Доброго дня суток! Хочу сделать конструктор чат ботов (vk bot). На фронте я использую react и редактор диаграмм reactflow, бек на nodejs, express и mongoDB. Все приложение находится на одном сервере, проксируется с помощью nginx. Для самого чат бота я использую модуль VK-IO, авторизация с помощью passport js. Теперь у меня вопрос: например в конструкторе создаем бота и загружаем сценарий в базу данных, как потом его запустить. Затем возникает другая проблема: как запустить несколько ботов, так как боты создаются разными пользователями и у каждого свой токен. Что бы вы посоветовали?

@Mirrasim Жыл бұрын

опа контент подъехал

@iznu3 9 ай бұрын

Спасибо! Лайк!

@Oleg_57rus Жыл бұрын

Привет 💯💣

@pavelokun Жыл бұрын

Привет! Планируешь добавить видео с добавлением Telegram Payments к такому сайту?

@vladislavivanchikov6622 Жыл бұрын

Тимур тупо топ !

@kol4an721 Жыл бұрын

ребят, подскажите что делать, если все сделал по инструкции с официальной статьи из телеграма, а новых полей в window не появилось? я пробовал просто вставлять скрипт из официальной инструкции, пробовал копирвать сам скрипт и создавать новый js файл для него, а потом подключать, вообше ничего не происходит, кроме того, что ошибка появляется, что поля Telegram в объекте window не существует..