СОЗДАЕМ упрощенный DURGER KING!!! | WebApp в телеграм!
Vložit
- čas přidán 25. 07. 2024
- Всем привет, это долгожданное продолжение WebApp в телеграм! Я наконец-то разобрался и вот рассказываю вам о том, как законнектить сайт и телеграм бота!
Код из видео: github.com/bugsandfeatures/We...
===================================================
ℹ️ Наш TELEGRAM канал t.me/ideaschoo1
ℹ️ GitHub github.com/bugsandfeatures
===================================================
⏱ Главы ⏱
00:00 - Начало
00:27 - Создаем и настраиваем бота
04:09 - Начинаем верстать сайт
05:12 - Рассказываю про устройство сайта
07:09 - Пишем JS
13:54 - Отправляем сайт на GitHub Pages
15:33 - Исправляем ошибку
16:00 - Пишем бота (aiogram)
19:37 - Смотрим на результат
20:25 - Подвожу итог
===================================================
Не все успел рассказать, но уже в видео рассказал, что скорее всего будет продолжение с крутым сайтом и ботом!
Навалите лайков и видео не заставит себя ждать!🔥
жду)
Недавно начал изучать js, пока смотрел твой видос, до конца понял некоторые моменты, спасибо. Продолжай в том же духе)
жаль что можно навалить только 1 лайк)
Как заказать бота?)
@@Samotvorec временно никак, занят, но вообще есть контакты в описании канала и описании видео
Чел жду полноценного видео от тебя! С сайтом на хостинге и таким ботом, это классно!
Спасибо, очень полезное видео!
Красавчик просто! Все четко рассказал!
Красавчик продолжай дальше !
Спасибо большое
да уж, 6 объявлений переменных и 6 разных функций - мощно. Так не вдавался во все сложности, что аж про циклы и массивы забыл...
Всё это придумали программисты которым лень нажимать копировать вставить
@@Macaronena😂😂😂
Я тоже угорел…остановил…и сидел вдуплял…В чем прикол…Аж с разбегу решил зайти коменты почитать ахахах.
Зашёл спросить, а если кнопок будет 20? Или 30? Тоже на каждую свой обработчик?
Я, конечно, понимаю правило "take it easy, stupid", но тут как то уж слишком изи все😂
Прочитал сначала: создаём Druger King😂
Очень классно
Очень полезное видео!
Молодец! Даже я еще с web apps не разобрался...)
Спасибо. Большое 🙏
Очень ждал, когда же кто-нибудь выложит внятное объяснение.
В JS есть фаза всплытия и погружения. Можно повесить всего лишь 1 обработчик на контейнер с кнопками. При нажатии на каждую кнопку у нас будет срабатывать это событие. Если добавить свой data-* атрибут для каждой кнопки, то это поможет их различать. И на основе этого обрабатывать клик
Где-то читал про похожий механизм, который называется "Делегирование событий". Это одно и то же?
@@saitama-ll8jr да
Ты крут. Спасибо. Сейчас понял как делать web apps
🤝🔥
Круто! Спасибо!
Приветствую. Как сделать открытым канал в Вебверсии-чтоб открывался по ссылке сразу ?
крутой
Что насчет валидации данных?
хорошее видео
но я так и не понял как передать пейлоад на сайт
то-есть мне нужно сформировать пейлоад на стороне python
отдать этот пейлоад на сайт и отобразить переданную информацию
как такое сделать? подскажите пожалуйста
Синьор Вячеслав, это великолепно!!!
Спасибо!!
Прикольно, молодец
Отличное видео - все понятно.)) надо делать своё
Спасибо!
А где файлы можно взять (handlers, keyboards, main)?
Нигде пока, но если вы не понимаете, что писать в этих файлах, то рановато вы приступили к WebApp
Но я займусь скоро гитхабом, все выложу, в телеграмм канале можете за обновлениями следить
Очень жду полноценный webapp с базами данных
В мае будет анонс курса
10:48 - Развитие речевого аппарата программиста :)
Camel - `cтильНаписанияJavaScript`
Snake - "стиль_написания_python"
А можно ли как-то написать такое приложение для телеграм на котлин, и сверстать естественно тоже с помощью xml либо андроидовского jetpack compose?
да, конечно) просто xml потом нужно будет преобразовывать в html, так что не уверен, что это хорошая идея, но можно попробовать
Спасибо за полезное видео. Слушай, а ведь в дургер-кинг боте там ведь всё так красиво, анимированно, ты не в курсе как делать такие крутые анимации?
Нанимать дизайнеров, которые нарисуют такое)
@@bugsandfeaturesАхренеть )) Вот уж не додумался бы ))))
Отличное видео, теперь осталось сделать самому но на React)
Спасибо!
Это уже про веб разработку, так что удачи!
@IdeaSchool Интересно, почему sendData не работает через основную кнопку web_app😑😑
@@YNGPrenty пытался найти инфу…
Даже на официальном сайте просто написано
«sendData (только для Inline режима)»
А почему? Не понятно
@@bugsandfeatures Очень странное решение от телеги конечно, приходится использовать много чего лишнего чтобы через эту кнопку работало :(
@@YNGPrenty если писать бот на js то можно намного больше событий прописать на эту кнопку, вообще не использую inline режим
Если не сложно, можешь разжевать создание магазина с продажей цифровых товаров. Вывод ссылки после оплаты. Заранее спасибо, на канал подписался, думаю не мне одному эта тема будет актуальна.
Привет, а чего именно части не хватает? Мне кажется на канале хватает материала для создания магазина
Постараюсь помочь)
А вот если я например администратор кафе и у меня через бота сделали заказ , где я могу увидеть что человек заказал ?
Человек оплачивает и вам приходит чек, так все платежные системы раьотают
@@bugsandfeatures Гений)))))
спасибо большое! Вопрос, а почему js а не flask ?
Потому что в документации телеграм js)
@@bugsandfeatures ахах окей) но как я понимаю, нет никаких проблем использовать flask?
@@billyknife616 подключить к боту нельзя будет, библиотека написана именно для js
Скажи пожалуйста, а обязательно, чтобы приложение было написано на JS?
Библиотека есть только для js
Ваших команд нет в реестре botfather как их добавить, спасибо
Не понятен вопрос, в ботфазер ничего нельзя добавить, он чисто для создания и редактирования ботов
что делать если в гите нету visit site, и бот в тг при нажатие меню выдает ошибку на сайт
Значит на каком-то этапе допустили ошибку
Подскажи пожалуйста размер картинки, а то на гите не нащёл кода
150x150 px
@@bugsandfeatures пасиб, а ты не планируешь записать видос, как у англоязычного чувака с использованием реакта
Возможно, даже можно сделать, какую-нибудь серию роликов сначала с знакомством с js, потом react и потом уже все это вместе в тг бота
Ну или детально сделать для курса, а просто показать тут?
@@DaymonYESANDNO5 в ближайшее время такое не планируется
@@bugsandfeatures понятненько)
видео вышло давно, маловероятно, что мне ответят, но всё же.
У меня такой вопрос, возможно ли так же, как и на 16:10 передать фото профиля? И если да, то как?
Фото передать нельзя, самый простой вариант
Скачать, назвав user_id.png, где вместо user_id айдишник пользователя, а затем на сайте достать фото по айдишнику
Все просто
Для продвинутой системы сделать все тоже самое, но в добавок путь к картинке указать в БД
@@bugsandfeatures понятно, спасибо
ещё проблема сбербот не отвечает...
Live работает, что с тестовым не знаю… можно попробовать в тех поддержку сбера написать
спустя год полезгл
хотелось бы подробнее узнать с точки зрения кодинга на python
Будет, там просто очень много вариантов как это реализовать, на целый курс по бекенду можно собрать материала)
@@bugsandfeatures сейчас как раз мне поставили задачу на работе, интегрировать app в телеграм бот. Перерыл почти весь интернет, нашел не так много инфы, но чат GPT предложил вариант, подключить fast api и черезнего передать шаблоны, а потом в бот передать сайт.
Откуда надпись и цена, если этого нет в html
это есть в видео, в конце, когда создаю бота
веб-приложение в телеге на компе может открываться во весь экран монитора компа?
Нет, только в мобильном формате
@@bugsandfeatures ок .понятно
@@bugsandfeatures Ещё один вопрос: у меня есть telegram-канал, хотелось бы узнать можно ли в публикациях (постами) под ними вставлять Inline кнопки, сохраняя при этом саму кнопку доступа к комментариям? Такой вопрос задаю, потому что часто вижу как в других telegram-каналах под постами вставляется in line кнопки с сердечками и с другими смайликами, но при этом нет кнопки “комментарии”. Как будто Telegram даёт выбор либо вставляете свои Inline кнопки, но при этом убираете комментарии, либо же наоборот.
@@user-lh6xe3zi1t никогда так не делал, так что не знаю, знаю что посты с кнопками можно с помощью бота создавать
@@bugsandfeatures 👌
Норм. Развивайте тему пжлст
какую тему ? Ты о чем, да они тупо стали блогерами, контентом заняты и все. Завтра телеграм напишет статью про новый бот, так эти мамкины хакеры как муравьи накинутся на него и выпустат видео. На уникальное у них мозгов не хватит
Привет, у меня нету галочки и поэтому нету сайта в pages, что делать ?
о какой галочки речь?
Эта реализация уже больше не работает?
Работает, в чем-то проблема возникла?
@@bugsandfeatures да делаю все в точности, уже миллион реализаций перепробовал.... Данные в телегу не приходят. Причем есть одна страница с которой все приходит, а больше ниоткуда 😂 при этом сам объект Telegram.WebApp существует. При использовании кнопок keyboard даже сообщение в телеге появляется, "Вы успешно передали данные боту кнопкой ".... "
А где эти данные? 😂😂😂
4:45 это в какой программе ты пишешь?
sublime text
@@bugsandfeatures а есть ли видео как создать веб приложение в тг кликер?
ссылка на git не работает(
Этого репа больше нет на гите (
ссылка на код не актуальна.
Ксж да, случайно удалил реп
Вопрос как несколько товаров передать боту с веба?
Базу данных добавлять
Бро я хочу сделать свою игру с монеткой но ничего в этом не понимаю смотрел твое видео и ничего не понял
Значит надо начать с чего попроще)
Это ужасно, честно говоря, говорю как человек который делает WebApps на aiogram.
Так может совет дашь, как человек, который делает WebApp
@@bugsandfeatures завязать на aiohttp или fastapi? То, что ты сделал банальная копирка того, что уже есть на ютубе от других кодеров.
Использовать тайп web_app_data - это ужас, кто это будет делать и как далеко это продвинет его разработку?)
@@it.9459 ну на ютубе я такого не видел, просто рассказал о том, что в интернете нашел, мне еще предстояло углубится в эту тему)
Так что спасибо за наводку
@@it.9459 А как ловить тогда web_app_data, если не через content_type? Еще какие-то способы есть?
@@user-ib7tj3ln2c обертка в aiohttp, обмен данными через post/get запросы, на том, что он показал далеко не уедешь
Извините конечно, но кто вообще так делает ...
Сейчас все хотят рубить деньги, но пишут такой г*- код
какие 6 фунцкций для каждой кнопки, это уровень 7 класса информатики...
Я не спец по js
Как надо обрабатывать нажатия? Одинаковый id ставить нельзя…
Как повесить одну функцию на 6 разных id?
@@bugsandfeatures цикл)
@@itifsmth3764 справедливо, буду подтягивать js для веба
Спасибо)
Главное чтобы работало
@@bugsandfeatures присвоить им класс 'example_btn', затем
buttons = document.querySelectorAll(".example_btn");
buttons.forEach(el => {
el.addEventListener('click', event =>{действие по клику});
});
С одной стороны интересно и наглядно, с другой стороны для начинающего вебаппера совершенно бесполезное видео. Ощущение сложилось, что направили не по тому следу и для чего-то годного нужно будет пользоваться совершенно другими способами методами и организацией скриптов.
Сейчас полностью соглашусь, но видео делалось когда материала по этой теме вообще не было, так что получилось, что получилось)
Сейчас опыта много, может руки дойдут до обновления материала
Рефакторинг:
let btn1, btn2, btn3, btn4, btn5, btn6;
btn1 = document.getElementById("btn1").addEventListener("click", ( ) => { }...