СОЗДАЕМ упрощенный DURGER KING!!! | WebApp в телеграм!
Переглядів 56,059
День томуВсем привет, это долгожданное продолжение 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 - Подвожу итог
===================================================
@glory_academy Рік тому
Не все успел рассказать, но уже в видео рассказал, что скорее всего будет продолжение с крутым сайтом и ботом! Навалите лайков и видео не заставит себя ждать!🔥
@Katar1x Рік тому
жду)
@training9981 Рік тому
Недавно начал изучать js, пока смотрел твой видос, до конца понял некоторые моменты, спасибо. Продолжай в том же духе)
@user-vl3qu6bk8q Рік тому
жаль что можно навалить только 1 лайк)
@Samotvorec Рік тому
Как заказать бота?)
@glory_academy Рік тому
@@Samotvorec временно никак, занят, но вообще есть контакты в описании канала и описании видео
@margintrader7545 5 місяців тому
Спасибо, очень полезное видео!
@aimrichman Рік тому
Чел жду полноценного видео от тебя! С сайтом на хостинге и таким ботом, это классно!
@crugame Рік тому
Красавчик просто! Все четко рассказал!
@valarg5756 Рік тому
Спасибо большое
@user-mr5qm7cc5g Рік тому
Красавчик продолжай дальше !
@itifsmth3764 Рік тому
да уж, 6 объявлений переменных и 6 разных функций - мощно. Так не вдавался во все сложности, что аж про циклы и массивы забыл...
@Macaronena Рік тому
Всё это придумали программисты которым лень нажимать копировать вставить
@Landskrunn 8 місяців тому
@@Macaronena😂😂😂
@djinoselfish311 3 місяці тому
Я тоже угорел…остановил…и сидел вдуплял…В чем прикол…Аж с разбегу решил зайти коменты почитать ахахах.
@pushkaqwesdd Рік тому
Очень классно
@aliev_muslim Рік тому
Ты крут. Спасибо. Сейчас понял как делать web apps
@Oleg_57rus Рік тому
🤝🔥
@kondratjev Рік тому
В JS есть фаза всплытия и погружения. Можно повесить всего лишь 1 обработчик на контейнер с кнопками. При нажатии на каждую кнопку у нас будет срабатывать это событие. Если добавить свой data-* атрибут для каждой кнопки, то это поможет их различать. И на основе этого обрабатывать клик
@saitama-ll8jr Рік тому
Где-то читал про похожий механизм, который называется "Делегирование событий". Это одно и то же?
@serobrine 11 місяців тому
@@saitama-ll8jr да
@xmxustin Рік тому
Спасибо. Большое 🙏 Очень ждал, когда же кто-нибудь выложит внятное объяснение.
@spyxfamily7429 9 місяців тому
хорошее видео но я так и не понял как передать пейлоад на сайт то-есть мне нужно сформировать пейлоад на стороне python отдать этот пейлоад на сайт и отобразить переданную информацию как такое сделать? подскажите пожалуйста
@fliksudnone4760 Рік тому
Молодец! Даже я еще с web apps не разобрался...)
@steklokovzaz8157 10 місяців тому
Приветствую. Как сделать открытым канал в Вебверсии-чтоб открывался по ссылке сразу ?
@user-wr5rc5pp8r Рік тому
Синьор Вячеслав, это великолепно!!!
@glory_academy Рік тому
Спасибо!!
@samanwirst Рік тому
Что насчет валидации данных?
@evgeni596 Рік тому
крутой
@mateo1.1 9 місяців тому
10:48 - Развитие речевого аппарата программиста :) Camel - `cтильНаписанияJavaScript` Snake - "стиль_написания_python"
@Cheepatun Рік тому
Очень полезное видео!
@hozaeva_shorts Рік тому
А где файлы можно взять (handlers, keyboards, main)?
@glory_academy Рік тому
Нигде пока, но если вы не понимаете, что писать в этих файлах, то рановато вы приступили к WebApp Но я займусь скоро гитхабом, все выложу, в телеграмм канале можете за обновлениями следить
@kitayinua 3 дні тому
Если не сложно, можешь разжевать создание магазина с продажей цифровых товаров. Вывод ссылки после оплаты. Заранее спасибо, на канал подписался, думаю не мне одному эта тема будет актуальна.
@glory_academy 3 дні тому
Привет, а чего именно части не хватает? Мне кажется на канале хватает материала для создания магазина Постараюсь помочь)
@ibnkhaleed 25 днів тому
Спасибо за полезное видео. Слушай, а ведь в дургер-кинг боте там ведь всё так красиво, анимированно, ты не в курсе как делать такие крутые анимации?
@glory_academy 25 днів тому
Нанимать дизайнеров, которые нарисуют такое)
@ibnkhaleed 24 дні тому
@@glory_academyАхренеть )) Вот уж не додумался бы ))))
@user-kn2ou2pu3e Рік тому
Круто! Спасибо!
@Portemerte Рік тому
Отличное видео - все понятно.)) надо делать своё
@glory_academy Рік тому
Спасибо!
@user-jn1zw1yi3e Рік тому
А вот если я например администратор кафе и у меня через бота сделали заказ , где я могу увидеть что человек заказал ?
@glory_academy Рік тому
Человек оплачивает и вам приходит чек, так все платежные системы раьотают
@westlutsk Рік тому
@@glory_academy Гений)))))
@Redlyy Рік тому
Прикольно, молодец
@billyknife616 11 місяців тому
спасибо большое! Вопрос, а почему js а не flask ?
@glory_academy 11 місяців тому
Потому что в документации телеграм js)
@billyknife616 11 місяців тому
@@glory_academy ахах окей) но как я понимаю, нет никаких проблем использовать flask?
@glory_academy 11 місяців тому
@@billyknife616 подключить к боту нельзя будет, библиотека написана именно для js
@YNGPrenty Рік тому
Отличное видео, теперь осталось сделать самому но на React)
@glory_academy Рік тому
Спасибо! Это уже про веб разработку, так что удачи!
@YNGPrenty Рік тому
@IdeaSchool Интересно, почему sendData не работает через основную кнопку web_app😑😑
@glory_academy Рік тому
@@YNGPrenty пытался найти инфу… Даже на официальном сайте просто написано «sendData (только для Inline режима)» А почему? Не понятно
@YNGPrenty Рік тому
@@glory_academy Очень странное решение от телеги конечно, приходится использовать много чего лишнего чтобы через эту кнопку работало :(
@glory_academy Рік тому
@@YNGPrenty если писать бот на js то можно намного больше событий прописать на эту кнопку, вообще не использую inline режим
@merdanm.8428 4 місяці тому
Ваших команд нет в реестре botfather как их добавить, спасибо
@glory_academy 4 місяці тому
Не понятен вопрос, в ботфазер ничего нельзя добавить, он чисто для создания и редактирования ботов
@user-lh6xe3zi1t 9 місяців тому
веб-приложение в телеге на компе может открываться во весь экран монитора компа?
@glory_academy 9 місяців тому
Нет, только в мобильном формате
@user-lh6xe3zi1t 9 місяців тому
@@glory_academy ок .понятно
@user-lh6xe3zi1t 9 місяців тому
@@glory_academy Ещё один вопрос: у меня есть telegram-канал, хотелось бы узнать можно ли в публикациях (постами) под ними вставлять Inline кнопки, сохраняя при этом саму кнопку доступа к комментариям? Такой вопрос задаю, потому что часто вижу как в других telegram-каналах под постами вставляется in line кнопки с сердечками и с другими смайликами, но при этом нет кнопки “комментарии”. Как будто Telegram даёт выбор либо вставляете свои Inline кнопки, но при этом убираете комментарии, либо же наоборот.
@glory_academy 9 місяців тому
@@user-lh6xe3zi1t никогда так не делал, так что не знаю, знаю что посты с кнопками можно с помощью бота создавать
@user-lh6xe3zi1t 9 місяців тому
@@glory_academy 👌
@DaymonYESANDNO5 Рік тому
Подскажи пожалуйста размер картинки, а то на гите не нащёл кода
@glory_academy Рік тому
150x150 px
@DaymonYESANDNO5 Рік тому
@@glory_academy пасиб, а ты не планируешь записать видос, как у англоязычного чувака с использованием реакта Возможно, даже можно сделать, какую-нибудь серию роликов сначала с знакомством с js, потом react и потом уже все это вместе в тг бота Ну или детально сделать для курса, а просто показать тут?
@glory_academy Рік тому
@@DaymonYESANDNO5 в ближайшее время такое не планируется
@DaymonYESANDNO5 Рік тому
@@glory_academy понятненько)
@mxustin 9 місяців тому
Скажи пожалуйста, а обязательно, чтобы приложение было написано на JS?
@glory_academy 9 місяців тому
Библиотека есть только для js
@haks3r392 Рік тому
Откуда надпись и цена, если этого нет в html
@glory_academy Рік тому
это есть в видео, в конце, когда создаю бота
@JevLogin 9 місяців тому
Эта реализация уже больше не работает?
@glory_academy 9 місяців тому
Работает, в чем-то проблема возникла?
@JevLogin 9 місяців тому
@@glory_academy да делаю все в точности, уже миллион реализаций перепробовал.... Данные в телегу не приходят. Причем есть одна страница с которой все приходит, а больше ниоткуда 😂 при этом сам объект Telegram.WebApp существует. При использовании кнопок keyboard даже сообщение в телеге появляется, "Вы успешно передали данные боту кнопкой ".... " А где эти данные? 😂😂😂
@mo-mo9792 Рік тому
Норм. Развивайте тему пжлст
@abakar05 Рік тому
какую тему ? Ты о чем, да они тупо стали блогерами, контентом заняты и все. Завтра телеграм напишет статью про новый бот, так эти мамкины хакеры как муравьи накинутся на него и выпустат видео. На уникальное у них мозгов не хватит
@Anton-sj8iw Рік тому
Вопрос как несколько товаров передать боту с веба?
@glory_academy Рік тому
Базу данных добавлять
@user-re9ie7xh7p 9 місяців тому
ссылка на git не работает(
@glory_academy 9 місяців тому
Этого репа больше нет на гите (
@vkid21 10 місяців тому
ссылка на код не актуальна.
@glory_academy 9 місяців тому
Ксж да, случайно удалил реп
@it.9459 Рік тому
Это ужасно, честно говоря, говорю как человек который делает WebApps на aiogram.
@glory_academy Рік тому
Так может совет дашь, как человек, который делает WebApp
@it.9459 Рік тому
@@glory_academy завязать на aiohttp или fastapi? То, что ты сделал банальная копирка того, что уже есть на ютубе от других кодеров. Использовать тайп web_app_data - это ужас, кто это будет делать и как далеко это продвинет его разработку?)
@glory_academy Рік тому
@@it.9459 ну на ютубе я такого не видел, просто рассказал о том, что в интернете нашел, мне еще предстояло углубится в эту тему) Так что спасибо за наводку
@user-ib7tj3ln2c Рік тому
@@it.9459 А как ловить тогда web_app_data, если не через content_type? Еще какие-то способы есть?
@it.9459 Рік тому
@@user-ib7tj3ln2c обертка в aiohttp, обмен данными через post/get запросы, на том, что он показал далеко не уедешь
@deniskoshkarev3104 Рік тому
Извините конечно, но кто вообще так делает ... Сейчас все хотят рубить деньги, но пишут такой г*- код какие 6 фунцкций для каждой кнопки, это уровень 7 класса информатики...
@glory_academy Рік тому
Я не спец по js Как надо обрабатывать нажатия? Одинаковый id ставить нельзя… Как повесить одну функцию на 6 разных id?
@itifsmth3764 Рік тому
@@glory_academy цикл)
@glory_academy Рік тому
@@itifsmth3764 справедливо, буду подтягивать js для веба Спасибо)
@Macaronena Рік тому
Главное чтобы работало
@serobrine Рік тому
@@glory_academy присвоить им класс '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", ( ) => { }...
Ulbi TV
Переглядів 185 тис.
Суспільне Чернігів
Переглядів 220 тис.
Андрей Угланов
Переглядів 555 тис.
Марк Николаев
Переглядів 132 тис.
ИИШНИКИ | Ноосфера: ИИ, деньги, lowcode, мышление
Переглядів 3,4 тис.
Искусство Автоматизации
Переглядів 3 тис.
Фсоки
Переглядів 4 тис.
Фсоки
Переглядів 14 тис.
Суспільне Чернігів
Переглядів 220 тис.