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

[@slavikkokoiev6723]

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

[@strelets]

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

[@maratfaizer]

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

[@Евгений-х1ш8у]

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

[@YoutubeFrogOfHell]

ngrok http 3000

[@kindDaddy]

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

[@МусхабЯ]

Спасибо!

[@helenit4365]

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

[@КонстантинЕгоров-ю8у]

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

[@falsetrue7910]

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

[@andrewlevitsky6270]

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

[@May-yw1kb]

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

[@hellohello4454]

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

[@andrewlevitsky6270]

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

[@МаксимБычковский-г4б]

@@andrewlevitsky6270 Нет

[@ЧубрикШпендик]

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

[@konstantinvoronin4687]

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

[@helloglobalme9689]

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

[@ЮрийДонников]

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

[@АлександрСтрелков-и2т]

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

[@FI4a]

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

[@KGZVER]

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

[@ТёмаКоролёв-к6ф]

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

[@usernnxn]

@@ТёмаКоролёв-к6ф что это за канал ? «русский»?

[@raijinhasarrived]

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

[@amir18n]

поддерживаю

[@da_progress2678]

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

[@Traineratwot]

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

[@R4mirez]

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

[@Кямран-и3в]

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

[@caH40yc]

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

[@KIREE-SENIOR]

Можешь подсказать, как сделать , чтобы в телеграм боте на python aiogram при нажатии на кнопку в сообщении в чат писалась команда?

[@crypto_cats]

Телеграм боты дружат с ngrok и я думаю это подходящее решение под урок и дебага

[@gkfldjdkk4556]

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

[@apsolution4722]

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

[@crypto_blocknote]

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

[@ilyamartynov2743]

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

[@shittywizzard5727]

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

[@ipa_stor]

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

[@slark5575]

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

[@Юрий-х8ш6и]

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

[@konstantinkuksov914]

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

[@МаксимКаськов-ч4п]

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

[@undefunden]

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

[@slava3553]

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

[@ТёмикГоловин-й8ц]

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

[@Senior_weekend_developer]

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

[@gordoner5693]

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

[@dromich]

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

[@Павел-ф9ш6р]

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

[@NikitaKachan-y5i]

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

[@Квантоваяопределенность]

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

[@Владислав-б7ф4я]

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

[@ArtyomManokhin]

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

[@DmitrySafarov]

Как всегда, обалденный контент👍

[@zaharovLucky]

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

[@mr.teemon]

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

[@mrakov]

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

[@egolege]

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

[@atmosphere_education]

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

[@dilmurodqodirjonov9940]

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

[@LionKingheh]

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

[@mikeempire]

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

[@Mirrasim]

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

[@ТёмикГоловин-й8ц]

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

[@daurenismagulov5654]

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

[@stream2364]

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

[@user-paint-alexandra]

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

[@СергейПетров-б4щ4ч]

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

[@vladislav_pikiner]

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

[@crashcrash8009]

Как всегда супер! Пришлось кстати.

[@Max-kc3mh]

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

[@unicoxr5tj417]

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

[@simonsavvinov7989]

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

[@Mr.Onelvlup]

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

[@Crptos_]

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

[@МаксимБычковский-г4б]

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

[@АлексейК-к9к]

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

[@РамильСабиров-л6м]

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

[@sasharudenko5446]

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

[@Fortsev]

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

[@РаисКасенов]

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

[@JuliiaTerekhova]

You are the best! Thanks for very usefull information!

[@ANGEL2024]

Бро спасибо огромное, реально помог, я хочу сделать свою тапалку приложения, ты очень помог,спасибо тебе огромное, рассказал всё на отлично)

[@hutoryanin]

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

[@ivkis3270]

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

[@vikodam]

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

[@drdev_blog]

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

[@technocoh]

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

[@anvarzaripboyev5730]

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

[@nikolaik624]

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

[@gozaltech]

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

[@creative-routine]

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

[@IzyLifeVlog]

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

[@Sokovizimalka]

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

[@tevi6667]

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

[@yuriiyakovenko9566]

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

[@dimasnytin]

Спасибо 👍

[@kol4an721]

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

[@pavelasafov]

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

[@АлексейЗайцев-о7ч]

Спасибо за видео, по поводу дебага, я для себя использую такой способ: - Поднимаю туннель через ngrok (Можно использовать аналоги) - Android смартфон (Включаем USB Debugging + Два долгих тапа по версии приложения Telegram в настройках самого приложения, включаем WebView debug) - Запускаю чат с WebApp - Подключаю смартфон к компу, запускаю Chrome (chrome://inspect/#devices) - Выбираю нужное устройство - Дебажу

[@trickymartian3477]

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

[@k0repan0ff]

Дебажить можно при помощи ngrok - должно помочь.

[@TheVitkuz]

Все очень понятно. Спасибо

[@laches1]

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

[@hennadiishavlo179]

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

[@pavelkostrov1465]

Лайк не глядя

[@nanodepo]

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

[@n1cksergeev]

HELPPP!!! на 20:40 в commit and push не удаётся отправить на githab. пишет select file to commit. хотя графа пустая и выбирать не из чего

[@ИванГринько-о5ь]

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

[@vkomanchy5364]

Не могу понять как дальше queryId юзать. Как идентифицировать что этот queryId связан с пользователем? Информацию о чате вообще не могу найти, хотя в документации указано что должен быть объект chat. Документация у Telegram вообще не понравилась, нихрена не понятно почему например нельзя использовать открытие по кнопке для общих чатов. Кроме имени пользователя и его username вообще ничего не доступно

[@ziloliddin]

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

[@dzianisantanouski1885]

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

[@iZhuravlev]

Как ты с фронта https смог достучаться до бековского http?

[@ИловМакс]

Мне кажется, или MongoDB уже не является связкой по умолчанию для стека с нодой, и все чаще применяется Postgres?

[@АйдарРашидов]

возможно дебажить локаль можно если иметь статичный ip

[@bekzoddeveloper5995]

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

[@DJBraT100]

Для локального тестирования веб приложения я запустил nginx под windows и выпустил свой ssl сертификат, так как web apps не хочет работать с http

[@viroff]

16:44 - если на такую команду для запуска netlify ругается при билде, нужно поменять её на CI= npm run build

[@feterson2557]

что значит CI?

[@viroff]

@@feterson2557 очевидно, continuous integration. Я к тому, что у меня в netlify сразу, с дефолтными настройками, как в видео, не завелось. Погуглил и понял, что команда для запуска должна быть именно такая, как я написал, тогда билд проходит.

[@begineras]

Агонь видос

[@newtems5479]

Для дебага можно использовать веб версию телеграмма, она не ругается на https

[@timhacks7822]

Почему то когда клонировал твой репозиторий к себе, поставил всё под себя, не отрабатывает кнопка "Сделать заказ", тоесть она просто не кликается. Что может быть не так?

[@Vengeful_One]

Почему-то с самого начала бот не реагирует на команды Nodemon висит в состоянии [nodemon] starting `node index.js` Код точно такой же, но почему то бот не реагирует на сообщения

[@alexeyfilippov42]

На телефоне такое же меню?

[@toSingularity]

⚡Для удобного дебага можно туннель сетевой через NGROK поднять. Изменения почти на лету будут подтягиваться, разве что хотрелоада нет)) Если нужны подробности, могу расписать алгоритм ниже🤓! Тимур, спасибо за классный контент!

[@n_ratkevich]

привет. Не мог бы ты расписать алгоритм ?