СОЗДАЕМ упрощенный DURGER KING!!! | WebApp в телеграм!

Всем привет, это долгожданное продолжение WebApp в телеграм! Я наконец-то разобрался и вот рассказываю вам о том, как законнектить сайт и телеграм бота!
Код из видео: github.com/ideahold/Web_App
===================================================
ℹ️ Наш TELEGRAM канал t.me/ideaschoo1
ℹ️ GitHub github.com/ideahold
===================================================
⏱ Главы ⏱
00:00 - Начало
00:27 - Создаем и настраиваем бота
04:09 - Начинаем верстать сайт
05:12 - Рассказываю про устройство сайта
07:09 - Пишем JS
13:54 - Отправляем сайт на GitHub Pages
15:33 - Исправляем ошибку
16:00 - Пишем бота (aiogram)
19:37 - Смотрим на результат
20:25 - Подвожу итог
===================================================

[@bugsandfeatures]

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

[@Katar1x]

жду)

[@training9981]

Недавно начал изучать js, пока смотрел твой видос, до конца понял некоторые моменты, спасибо. Продолжай в том же духе)

[@user-vl3qu6bk8q]

жаль что можно навалить только 1 лайк)

[@Samotvorec]

Как заказать бота?)

[@bugsandfeatures]

@@Samotvorec временно никак, занят, но вообще есть контакты в описании канала и описании видео

[@margintrader7545]

Спасибо, очень полезное видео!

[@aimrichman]

Чел жду полноценного видео от тебя! С сайтом на хостинге и таким ботом, это классно!

[@crugame]

Красавчик просто! Все четко рассказал!

[@valarg5756]

Спасибо большое

[@fliksudnone4760]

Молодец! Даже я еще с web apps не разобрался...)

[@user-mr5qm7cc5g]

Красавчик продолжай дальше !

[@xmxustin]

Спасибо. Большое 🙏 Очень ждал, когда же кто-нибудь выложит внятное объяснение.

[@Cheepatun]

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

[@aliev_muslim]

Ты крут. Спасибо. Сейчас понял как делать web apps

[@itifsmth3764]

да уж, 6 объявлений переменных и 6 разных функций - мощно. Так не вдавался во все сложности, что аж про циклы и массивы забыл...

[@Macaronena]

Всё это придумали программисты которым лень нажимать копировать вставить

[@Landskrunn]

​@@Macaronena😂😂😂

[@djinoselfish311]

Я тоже угорел…остановил…и сидел вдуплял…В чем прикол…Аж с разбегу решил зайти коменты почитать ахахах.

[@Dendrar]

Очень классно

[@Oleg_57rus]

🤝🔥

[@kondratjev]

В JS есть фаза всплытия и погружения. Можно повесить всего лишь 1 обработчик на контейнер с кнопками. При нажатии на каждую кнопку у нас будет срабатывать это событие. Если добавить свой data-* атрибут для каждой кнопки, то это поможет их различать. И на основе этого обрабатывать клик

[@saitama-ll8jr]

Где-то читал про похожий механизм, который называется "Делегирование событий". Это одно и то же?

[@serobrine]

​@@saitama-ll8jr да

[@user-kn2ou2pu3e]

Круто! Спасибо!

[@user-wr5rc5pp8r]

Синьор Вячеслав, это великолепно!!!

[@bugsandfeatures]

Спасибо!!

[@Redlyy]

Прикольно, молодец

[@evgeni596]

крутой

[@Portemerte]

Отличное видео - все понятно.)) надо делать своё

[@bugsandfeatures]

Спасибо!

[@mateo1.1]

10:48 - Развитие речевого аппарата программиста :) Camel - `cтильНаписанияJavaScript` Snake - "стиль_написания_python"

[@nvwrist]

Очень жду полноценный webapp с базами данных

[@bugsandfeatures]

В мае будет анонс курса

[@YNGPrenty]

Отличное видео, теперь осталось сделать самому но на React)

[@bugsandfeatures]

Спасибо! Это уже про веб разработку, так что удачи!

[@YNGPrenty]

@IdeaSchool Интересно, почему sendData не работает через основную кнопку web_app😑😑

[@bugsandfeatures]

@@YNGPrenty пытался найти инфу… Даже на официальном сайте просто написано «sendData (только для Inline режима)» А почему? Не понятно

[@YNGPrenty]

@@bugsandfeatures Очень странное решение от телеги конечно, приходится использовать много чего лишнего чтобы через эту кнопку работало :(

[@bugsandfeatures]

@@YNGPrenty если писать бот на js то можно намного больше событий прописать на эту кнопку, вообще не использую inline режим

[@steklokovzaz8157]

Приветствую. Как сделать открытым канал в Вебверсии-чтоб открывался по ссылке сразу ?

[@ibnkhaleed]

Спасибо за полезное видео. Слушай, а ведь в дургер-кинг боте там ведь всё так красиво, анимированно, ты не в курсе как делать такие крутые анимации?

[@bugsandfeatures]

Нанимать дизайнеров, которые нарисуют такое)

[@ibnkhaleed]

@@bugsandfeaturesАхренеть )) Вот уж не додумался бы ))))

[@spyxfamily7429]

хорошее видео но я так и не понял как передать пейлоад на сайт то-есть мне нужно сформировать пейлоад на стороне python отдать этот пейлоад на сайт и отобразить переданную информацию как такое сделать? подскажите пожалуйста

[@samanwirst]

Что насчет валидации данных?

[@kitayinua]

Если не сложно, можешь разжевать создание магазина с продажей цифровых товаров. Вывод ссылки после оплаты. Заранее спасибо, на канал подписался, думаю не мне одному эта тема будет актуальна.

[@bugsandfeatures]

Привет, а чего именно части не хватает? Мне кажется на канале хватает материала для создания магазина Постараюсь помочь)

[@billyknife616]

спасибо большое! Вопрос, а почему js а не flask ?

[@bugsandfeatures]

Потому что в документации телеграм js)

[@billyknife616]

@@bugsandfeatures ахах окей) но как я понимаю, нет никаких проблем использовать flask?

[@bugsandfeatures]

@@billyknife616 подключить к боту нельзя будет, библиотека написана именно для js

[@hozaeva_shorts]

А где файлы можно взять (handlers, keyboards, main)?

[@bugsandfeatures]

Нигде пока, но если вы не понимаете, что писать в этих файлах, то рановато вы приступили к WebApp Но я займусь скоро гитхабом, все выложу, в телеграмм канале можете за обновлениями следить

[@to5116]

хотелось бы подробнее узнать с точки зрения кодинга на python

[@bugsandfeatures]

Будет, там просто очень много вариантов как это реализовать, на целый курс по бекенду можно собрать материала)

[@to5116]

@@bugsandfeatures сейчас как раз мне поставили задачу на работе, интегрировать app в телеграм бот. Перерыл почти весь интернет, нашел не так много инфы, но чат GPT предложил вариант, подключить fast api и черезнего передать шаблоны, а потом в бот передать сайт.

[@mo-mo9792]

Норм. Развивайте тему пжлст

[@abakar05]

какую тему ? Ты о чем, да они тупо стали блогерами, контентом заняты и все. Завтра телеграм напишет статью про новый бот, так эти мамкины хакеры как муравьи накинутся на него и выпустат видео. На уникальное у них мозгов не хватит

[@mxustin]

Скажи пожалуйста, а обязательно, чтобы приложение было написано на JS?

[@bugsandfeatures]

Библиотека есть только для js

[@ch-df9ri]

спустя год полезгл

[@DaymonYESANDNO5]

Подскажи пожалуйста размер картинки, а то на гите не нащёл кода

[@bugsandfeatures]

150x150 px

[@DaymonYESANDNO5]

@@bugsandfeatures пасиб, а ты не планируешь записать видос, как у англоязычного чувака с использованием реакта Возможно, даже можно сделать, какую-нибудь серию роликов сначала с знакомством с js, потом react и потом уже все это вместе в тг бота Ну или детально сделать для курса, а просто показать тут?

[@bugsandfeatures]

@@DaymonYESANDNO5 в ближайшее время такое не планируется

[@DaymonYESANDNO5]

@@bugsandfeatures понятненько)

[@user-jn1zw1yi3e]

А вот если я например администратор кафе и у меня через бота сделали заказ , где я могу увидеть что человек заказал ?

[@bugsandfeatures]

Человек оплачивает и вам приходит чек, так все платежные системы раьотают

[@westlutsk]

@@bugsandfeatures Гений)))))

[@Justudent]

видео вышло давно, маловероятно, что мне ответят, но всё же. У меня такой вопрос, возможно ли так же, как и на 16:10 передать фото профиля? И если да, то как?

[@bugsandfeatures]

Фото передать нельзя, самый простой вариант Скачать, назвав user_id.png, где вместо user_id айдишник пользователя, а затем на сайте достать фото по айдишнику Все просто Для продвинутой системы сделать все тоже самое, но в добавок путь к картинке указать в БД

[@Justudent]

@@bugsandfeatures понятно, спасибо

[@merdanm.8428]

Ваших команд нет в реестре botfather как их добавить, спасибо

[@bugsandfeatures]

Не понятен вопрос, в ботфазер ничего нельзя добавить, он чисто для создания и редактирования ботов

[@autdzen]

что делать если в гите нету visit site, и бот в тг при нажатие меню выдает ошибку на сайт

[@bugsandfeatures]

Значит на каком-то этапе допустили ошибку

[@user-lh6xe3zi1t]

веб-приложение в телеге на компе может открываться во весь экран монитора компа?

[@bugsandfeatures]

Нет, только в мобильном формате

[@user-lh6xe3zi1t]

@@bugsandfeatures ок .понятно

[@user-lh6xe3zi1t]

@@bugsandfeatures Ещё один вопрос: у меня есть telegram-канал, хотелось бы узнать можно ли в публикациях (постами) под ними вставлять Inline кнопки, сохраняя при этом саму кнопку доступа к комментариям? Такой вопрос задаю, потому что часто вижу как в других telegram-каналах под постами вставляется in line кнопки с сердечками и с другими смайликами, но при этом нет кнопки “комментарии”. Как будто Telegram даёт выбор либо вставляете свои Inline кнопки, но при этом убираете комментарии, либо же наоборот.

[@bugsandfeatures]

@@user-lh6xe3zi1t никогда так не делал, так что не знаю, знаю что посты с кнопками можно с помощью бота создавать

[@user-lh6xe3zi1t]

@@bugsandfeatures 👌

[@haks3r392]

Откуда надпись и цена, если этого нет в html

[@bugsandfeatures]

это есть в видео, в конце, когда создаю бота

[@autdzen]

ещё проблема сбербот не отвечает...

[@bugsandfeatures]

Live работает, что с тестовым не знаю… можно попробовать в тех поддержку сбера написать

[@Anton-sj8iw]

Вопрос как несколько товаров передать боту с веба?

[@bugsandfeatures]

Базу данных добавлять

[@JevLogin]

Эта реализация уже больше не работает?

[@bugsandfeatures]

Работает, в чем-то проблема возникла?

[@JevLogin]

@@bugsandfeatures да делаю все в точности, уже миллион реализаций перепробовал.... Данные в телегу не приходят. Причем есть одна страница с которой все приходит, а больше ниоткуда 😂 при этом сам объект Telegram.WebApp существует. При использовании кнопок keyboard даже сообщение в телеге появляется, "Вы успешно передали данные боту кнопкой ".... " А где эти данные? 😂😂😂

[@user-re9ie7xh7p]

ссылка на git не работает(

[@bugsandfeatures]

Этого репа больше нет на гите (

[@vkid21]

ссылка на код не актуальна.

[@bugsandfeatures]

Ксж да, случайно удалил реп

[@it.9459]

Это ужасно, честно говоря, говорю как человек который делает WebApps на aiogram.

[@bugsandfeatures]

Так может совет дашь, как человек, который делает WebApp

[@it.9459]

@@bugsandfeatures завязать на aiohttp или fastapi? То, что ты сделал банальная копирка того, что уже есть на ютубе от других кодеров. Использовать тайп web_app_data - это ужас, кто это будет делать и как далеко это продвинет его разработку?)

[@bugsandfeatures]

@@it.9459 ну на ютубе я такого не видел, просто рассказал о том, что в интернете нашел, мне еще предстояло углубится в эту тему) Так что спасибо за наводку

[@user-ib7tj3ln2c]

@@it.9459 А как ловить тогда web_app_data, если не через content_type? Еще какие-то способы есть?

[@it.9459]

@@user-ib7tj3ln2c обертка в aiohttp, обмен данными через post/get запросы, на том, что он показал далеко не уедешь

[@deniskoshkarev3104]

Извините конечно, но кто вообще так делает ... Сейчас все хотят рубить деньги, но пишут такой г*- код какие 6 фунцкций для каждой кнопки, это уровень 7 класса информатики...

[@bugsandfeatures]

Я не спец по js Как надо обрабатывать нажатия? Одинаковый id ставить нельзя… Как повесить одну функцию на 6 разных id?

[@itifsmth3764]

@@bugsandfeatures цикл)

[@bugsandfeatures]

@@itifsmth3764 справедливо, буду подтягивать js для веба Спасибо)

[@Macaronena]

Главное чтобы работало

[@serobrine]

@@bugsandfeatures присвоить им класс 'example_btn', затем buttons = document.querySelectorAll(".example_btn"); buttons.forEach(el => { el.addEventListener('click', event =>{действие по клику}); });

[@avinadevil6097]

Рефакторинг: let btn1, btn2, btn3, btn4, btn5, btn6; btn1 = document.getElementById("btn1").addEventListener("click", ( ) => { }...