СОЗДАЕМ упрощенный 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 - Подвожу итог
===================================================
Пікірлер: 124
Не все успел рассказать, но уже в видео рассказал, что скорее всего будет продолжение с крутым сайтом и ботом! Навалите лайков и видео не заставит себя ждать!🔥
@Katar1x
Жыл бұрын
жду)
@training9981
Жыл бұрын
Недавно начал изучать js, пока смотрел твой видос, до конца понял некоторые моменты, спасибо. Продолжай в том же духе)
@user-vl3qu6bk8q
Жыл бұрын
жаль что можно навалить только 1 лайк)
@Samotvorec
Жыл бұрын
Как заказать бота?)
@glory_academy
Жыл бұрын
@@Samotvorec временно никак, занят, но вообще есть контакты в описании канала и описании видео
Спасибо, очень полезное видео!
Красавчик просто! Все четко рассказал!
Чел жду полноценного видео от тебя! С сайтом на хостинге и таким ботом, это классно!
да уж, 6 объявлений переменных и 6 разных функций - мощно. Так не вдавался во все сложности, что аж про циклы и массивы забыл...
@Macaronena
Жыл бұрын
Всё это придумали программисты которым лень нажимать копировать вставить
@Landskrunn
9 ай бұрын
@@Macaronena😂😂😂
@djinoselfish311
4 ай бұрын
Я тоже угорел…остановил…и сидел вдуплял…В чем прикол…Аж с разбегу решил зайти коменты почитать ахахах.
Красавчик продолжай дальше !
Спасибо большое
Спасибо. Большое 🙏 Очень ждал, когда же кто-нибудь выложит внятное объяснение.
В JS есть фаза всплытия и погружения. Можно повесить всего лишь 1 обработчик на контейнер с кнопками. При нажатии на каждую кнопку у нас будет срабатывать это событие. Если добавить свой data-* атрибут для каждой кнопки, то это поможет их различать. И на основе этого обрабатывать клик
@saitama-ll8jr
Жыл бұрын
Где-то читал про похожий механизм, который называется "Делегирование событий". Это одно и то же?
@serobrine
Жыл бұрын
@@saitama-ll8jr да
Молодец! Даже я еще с web apps не разобрался...)
Ты крут. Спасибо. Сейчас понял как делать web apps
Очень классно
Приветствую. Как сделать открытым канал в Вебверсии-чтоб открывался по ссылке сразу ?
хорошее видео но я так и не понял как передать пейлоад на сайт то-есть мне нужно сформировать пейлоад на стороне python отдать этот пейлоад на сайт и отобразить переданную информацию как такое сделать? подскажите пожалуйста
Что насчет валидации данных?
🤝🔥
10:48 - Развитие речевого аппарата программиста :) Camel - `cтильНаписанияJavaScript` Snake - "стиль_написания_python"
крутой
Очень полезное видео!
Синьор Вячеслав, это великолепно!!!
@glory_academy
Жыл бұрын
Спасибо!!
Круто! Спасибо!
Очень жду полноценный webapp с базами данных
@glory_academy
11 күн бұрын
В мае будет анонс курса
А где файлы можно взять (handlers, keyboards, main)?
@glory_academy
Жыл бұрын
Нигде пока, но если вы не понимаете, что писать в этих файлах, то рановато вы приступили к WebApp Но я займусь скоро гитхабом, все выложу, в телеграмм канале можете за обновлениями следить
Если не сложно, можешь разжевать создание магазина с продажей цифровых товаров. Вывод ссылки после оплаты. Заранее спасибо, на канал подписался, думаю не мне одному эта тема будет актуальна.
@glory_academy
Ай бұрын
Привет, а чего именно части не хватает? Мне кажется на канале хватает материала для создания магазина Постараюсь помочь)
Прикольно, молодец
спасибо большое! Вопрос, а почему js а не flask ?
@glory_academy
Жыл бұрын
Потому что в документации телеграм js)
@billyknife616
Жыл бұрын
@@glory_academy ахах окей) но как я понимаю, нет никаких проблем использовать flask?
@glory_academy
Жыл бұрын
@@billyknife616 подключить к боту нельзя будет, библиотека написана именно для js
А вот если я например администратор кафе и у меня через бота сделали заказ , где я могу увидеть что человек заказал ?
@glory_academy
Жыл бұрын
Человек оплачивает и вам приходит чек, так все платежные системы раьотают
@westlutsk
Жыл бұрын
@@glory_academy Гений)))))
Скажи пожалуйста, а обязательно, чтобы приложение было написано на JS?
@glory_academy
10 ай бұрын
Библиотека есть только для js
что делать если в гите нету visit site, и бот в тг при нажатие меню выдает ошибку на сайт
@glory_academy
26 күн бұрын
Значит на каком-то этапе допустили ошибку
Ваших команд нет в реестре botfather как их добавить, спасибо
@glory_academy
5 ай бұрын
Не понятен вопрос, в ботфазер ничего нельзя добавить, он чисто для создания и редактирования ботов
Спасибо за полезное видео. Слушай, а ведь в дургер-кинг боте там ведь всё так красиво, анимированно, ты не в курсе как делать такие крутые анимации?
@glory_academy
Ай бұрын
Нанимать дизайнеров, которые нарисуют такое)
@ibnkhaleed
Ай бұрын
@@glory_academyАхренеть )) Вот уж не додумался бы ))))
Отличное видео - все понятно.)) надо делать своё
@glory_academy
Жыл бұрын
Спасибо!
Подскажи пожалуйста размер картинки, а то на гите не нащёл кода
@glory_academy
Жыл бұрын
150x150 px
@DaymonYESANDNO5
Жыл бұрын
@@glory_academy пасиб, а ты не планируешь записать видос, как у англоязычного чувака с использованием реакта Возможно, даже можно сделать, какую-нибудь серию роликов сначала с знакомством с js, потом react и потом уже все это вместе в тг бота Ну или детально сделать для курса, а просто показать тут?
@glory_academy
Жыл бұрын
@@DaymonYESANDNO5 в ближайшее время такое не планируется
@DaymonYESANDNO5
Жыл бұрын
@@glory_academy понятненько)
видео вышло давно, маловероятно, что мне ответят, но всё же. У меня такой вопрос, возможно ли так же, как и на 16:10 передать фото профиля? И если да, то как?
@glory_academy
Сағат бұрын
Фото передать нельзя, самый простой вариант Скачать, назвав user_id.png, где вместо user_id айдишник пользователя, а затем на сайте достать фото по айдишнику Все просто Для продвинутой системы сделать все тоже самое, но в добавок путь к картинке указать в БД
@Justudent
Сағат бұрын
@@glory_academy понятно, спасибо
веб-приложение в телеге на компе может открываться во весь экран монитора компа?
@glory_academy
10 ай бұрын
Нет, только в мобильном формате
@user-lh6xe3zi1t
10 ай бұрын
@@glory_academy ок .понятно
@user-lh6xe3zi1t
10 ай бұрын
@@glory_academy Ещё один вопрос: у меня есть telegram-канал, хотелось бы узнать можно ли в публикациях (постами) под ними вставлять Inline кнопки, сохраняя при этом саму кнопку доступа к комментариям? Такой вопрос задаю, потому что часто вижу как в других telegram-каналах под постами вставляется in line кнопки с сердечками и с другими смайликами, но при этом нет кнопки “комментарии”. Как будто Telegram даёт выбор либо вставляете свои Inline кнопки, но при этом убираете комментарии, либо же наоборот.
@glory_academy
10 ай бұрын
@@user-lh6xe3zi1t никогда так не делал, так что не знаю, знаю что посты с кнопками можно с помощью бота создавать
@user-lh6xe3zi1t
10 ай бұрын
@@glory_academy 👌
Отличное видео, теперь осталось сделать самому но на React)
@glory_academy
Жыл бұрын
Спасибо! Это уже про веб разработку, так что удачи!
@YNGPrenty
Жыл бұрын
@IdeaSchool Интересно, почему sendData не работает через основную кнопку web_app😑😑
@glory_academy
Жыл бұрын
@@YNGPrenty пытался найти инфу… Даже на официальном сайте просто написано «sendData (только для Inline режима)» А почему? Не понятно
@YNGPrenty
Жыл бұрын
@@glory_academy Очень странное решение от телеги конечно, приходится использовать много чего лишнего чтобы через эту кнопку работало :(
@glory_academy
Жыл бұрын
@@YNGPrenty если писать бот на js то можно намного больше событий прописать на эту кнопку, вообще не использую inline режим
спустя год полезгл
Откуда надпись и цена, если этого нет в html
@glory_academy
Жыл бұрын
это есть в видео, в конце, когда создаю бота
ещё проблема сбербот не отвечает...
@glory_academy
25 күн бұрын
Live работает, что с тестовым не знаю… можно попробовать в тех поддержку сбера написать
Вопрос как несколько товаров передать боту с веба?
@glory_academy
Жыл бұрын
Базу данных добавлять
Эта реализация уже больше не работает?
@glory_academy
10 ай бұрын
Работает, в чем-то проблема возникла?
@JevLogin
10 ай бұрын
@@glory_academy да делаю все в точности, уже миллион реализаций перепробовал.... Данные в телегу не приходят. Причем есть одна страница с которой все приходит, а больше ниоткуда 😂 при этом сам объект Telegram.WebApp существует. При использовании кнопок keyboard даже сообщение в телеге появляется, "Вы успешно передали данные боту кнопкой ".... " А где эти данные? 😂😂😂
Норм. Развивайте тему пжлст
@abakar05
Жыл бұрын
какую тему ? Ты о чем, да они тупо стали блогерами, контентом заняты и все. Завтра телеграм напишет статью про новый бот, так эти мамкины хакеры как муравьи накинутся на него и выпустат видео. На уникальное у них мозгов не хватит
ссылка на git не работает(
@glory_academy
10 ай бұрын
Этого репа больше нет на гите (
ссылка на код не актуальна.
@glory_academy
10 ай бұрын
Ксж да, случайно удалил реп
Это ужасно, честно говоря, говорю как человек который делает 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 запросы, на том, что он показал далеко не уедешь
Извините конечно, но кто вообще так делает ... Сейчас все хотят рубить деньги, но пишут такой г*- код какие 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 =>{действие по клику}); });
Рефакторинг: let btn1, btn2, btn3, btn4, btn5, btn6; btn1 = document.getElementById("btn1").addEventListener("click", ( ) => { }...