СОЗДАЕМ упрощенный DURGER KING!!! | WebApp в телеграм!
ฝัง
- เผยแพร่เมื่อ 11 มิ.ย. 2024
- Всем привет, это долгожданное продолжение 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 - Подвожу итог
===================================================
![Yoshi Rinrada - 'มาทำไม' [Official MV]](http://i.ytimg.com/vi/r41xbfRLkLs/mqdefault.jpg)
Не все успел рассказать, но уже в видео рассказал, что скорее всего будет продолжение с крутым сайтом и ботом!
Навалите лайков и видео не заставит себя ждать!🔥
жду)
Недавно начал изучать js, пока смотрел твой видос, до конца понял некоторые моменты, спасибо. Продолжай в том же духе)
жаль что можно навалить только 1 лайк)
Как заказать бота?)
@@Samotvorec временно никак, занят, но вообще есть контакты в описании канала и описании видео
Спасибо, очень полезное видео!
да уж, 6 объявлений переменных и 6 разных функций - мощно. Так не вдавался во все сложности, что аж про циклы и массивы забыл...
Всё это придумали программисты которым лень нажимать копировать вставить
@@Macaronena😂😂😂
Я тоже угорел…остановил…и сидел вдуплял…В чем прикол…Аж с разбегу решил зайти коменты почитать ахахах.
Чел жду полноценного видео от тебя! С сайтом на хостинге и таким ботом, это классно!
Красавчик просто! Все четко рассказал!
Красавчик продолжай дальше !
Спасибо большое
Очень классно
Молодец! Даже я еще с web apps не разобрался...)
Спасибо. Большое 🙏
Очень ждал, когда же кто-нибудь выложит внятное объяснение.
🤝🔥
хорошее видео
но я так и не понял как передать пейлоад на сайт
то-есть мне нужно сформировать пейлоад на стороне python
отдать этот пейлоад на сайт и отобразить переданную информацию
как такое сделать? подскажите пожалуйста
Приветствую. Как сделать открытым канал в Вебверсии-чтоб открывался по ссылке сразу ?
В JS есть фаза всплытия и погружения. Можно повесить всего лишь 1 обработчик на контейнер с кнопками. При нажатии на каждую кнопку у нас будет срабатывать это событие. Если добавить свой data-* атрибут для каждой кнопки, то это поможет их различать. И на основе этого обрабатывать клик
Где-то читал про похожий механизм, который называется "Делегирование событий". Это одно и то же?
@@saitama-ll8jr да
Ты крут. Спасибо. Сейчас понял как делать web apps
Что насчет валидации данных?
Очень полезное видео!
крутой
Круто! Спасибо!
Прикольно, молодец
Синьор Вячеслав, это великолепно!!!
Спасибо!!
Очень жду полноценный webapp с базами данных
В мае будет анонс курса
10:48 - Развитие речевого аппарата программиста :)
Camel - `cтильНаписанияJavaScript`
Snake - "стиль_написания_python"
А где файлы можно взять (handlers, keyboards, main)?
Нигде пока, но если вы не понимаете, что писать в этих файлах, то рановато вы приступили к WebApp
Но я займусь скоро гитхабом, все выложу, в телеграмм канале можете за обновлениями следить
Отличное видео - все понятно.)) надо делать своё
Спасибо!
Скажи пожалуйста, а обязательно, чтобы приложение было написано на JS?
Библиотека есть только для js
Спасибо за полезное видео. Слушай, а ведь в дургер-кинг боте там ведь всё так красиво, анимированно, ты не в курсе как делать такие крутые анимации?
Нанимать дизайнеров, которые нарисуют такое)
@@bugsandfeaturesАхренеть )) Вот уж не додумался бы ))))
Если не сложно, можешь разжевать создание магазина с продажей цифровых товаров. Вывод ссылки после оплаты. Заранее спасибо, на канал подписался, думаю не мне одному эта тема будет актуальна.
Привет, а чего именно части не хватает? Мне кажется на канале хватает материала для создания магазина
Постараюсь помочь)
спасибо большое! Вопрос, а почему js а не flask ?
Потому что в документации телеграм js)
@@bugsandfeatures ахах окей) но как я понимаю, нет никаких проблем использовать flask?
@@billyknife616 подключить к боту нельзя будет, библиотека написана именно для js
А вот если я например администратор кафе и у меня через бота сделали заказ , где я могу увидеть что человек заказал ?
Человек оплачивает и вам приходит чек, так все платежные системы раьотают
@@bugsandfeatures Гений)))))
Ваших команд нет в реестре botfather как их добавить, спасибо
Не понятен вопрос, в ботфазер ничего нельзя добавить, он чисто для создания и редактирования ботов
что делать если в гите нету visit site, и бот в тг при нажатие меню выдает ошибку на сайт
Значит на каком-то этапе допустили ошибку
Отличное видео, теперь осталось сделать самому но на React)
Спасибо!
Это уже про веб разработку, так что удачи!
@IdeaSchool Интересно, почему sendData не работает через основную кнопку web_app😑😑
@@YNGPrenty пытался найти инфу…
Даже на официальном сайте просто написано
«sendData (только для Inline режима)»
А почему? Не понятно
@@bugsandfeatures Очень странное решение от телеги конечно, приходится использовать много чего лишнего чтобы через эту кнопку работало :(
@@YNGPrenty если писать бот на js то можно намного больше событий прописать на эту кнопку, вообще не использую inline режим
Подскажи пожалуйста размер картинки, а то на гите не нащёл кода
150x150 px
@@bugsandfeatures пасиб, а ты не планируешь записать видос, как у англоязычного чувака с использованием реакта
Возможно, даже можно сделать, какую-нибудь серию роликов сначала с знакомством с js, потом react и потом уже все это вместе в тг бота
Ну или детально сделать для курса, а просто показать тут?
@@DaymonYESANDNO5 в ближайшее время такое не планируется
@@bugsandfeatures понятненько)
видео вышло давно, маловероятно, что мне ответят, но всё же.
У меня такой вопрос, возможно ли так же, как и на 16:10 передать фото профиля? И если да, то как?
Фото передать нельзя, самый простой вариант
Скачать, назвав user_id.png, где вместо user_id айдишник пользователя, а затем на сайте достать фото по айдишнику
Все просто
Для продвинутой системы сделать все тоже самое, но в добавок путь к картинке указать в БД
@@bugsandfeatures понятно, спасибо
веб-приложение в телеге на компе может открываться во весь экран монитора компа?
Нет, только в мобильном формате
@@bugsandfeatures ок .понятно
@@bugsandfeatures Ещё один вопрос: у меня есть telegram-канал, хотелось бы узнать можно ли в публикациях (постами) под ними вставлять Inline кнопки, сохраняя при этом саму кнопку доступа к комментариям? Такой вопрос задаю, потому что часто вижу как в других telegram-каналах под постами вставляется in line кнопки с сердечками и с другими смайликами, но при этом нет кнопки “комментарии”. Как будто Telegram даёт выбор либо вставляете свои Inline кнопки, но при этом убираете комментарии, либо же наоборот.
@@user-lh6xe3zi1t никогда так не делал, так что не знаю, знаю что посты с кнопками можно с помощью бота создавать
@@bugsandfeatures 👌
спустя год полезгл
Откуда надпись и цена, если этого нет в html
это есть в видео, в конце, когда создаю бота
Норм. Развивайте тему пжлст
какую тему ? Ты о чем, да они тупо стали блогерами, контентом заняты и все. Завтра телеграм напишет статью про новый бот, так эти мамкины хакеры как муравьи накинутся на него и выпустат видео. На уникальное у них мозгов не хватит
Эта реализация уже больше не работает?
Работает, в чем-то проблема возникла?
@@bugsandfeatures да делаю все в точности, уже миллион реализаций перепробовал.... Данные в телегу не приходят. Причем есть одна страница с которой все приходит, а больше ниоткуда 😂 при этом сам объект Telegram.WebApp существует. При использовании кнопок keyboard даже сообщение в телеге появляется, "Вы успешно передали данные боту кнопкой ".... "
А где эти данные? 😂😂😂
Вопрос как несколько товаров передать боту с веба?
Базу данных добавлять
ссылка на git не работает(
Этого репа больше нет на гите (
ещё проблема сбербот не отвечает...
Live работает, что с тестовым не знаю… можно попробовать в тех поддержку сбера написать
ссылка на код не актуальна.
Ксж да, случайно удалил реп
Это ужасно, честно говоря, говорю как человек который делает 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", ( ) => { }...