Создаем Telegram Mini App на Angular 17. С нуля до продакшн деплоя
HTML-код
- Опубликовано: 13 июл 2024
- Облачный сервер для телеграм-приложения: slc.tl/52l7m
Текстовая инструкция: slc.tl/hz0rh
Исходный код: boosty.to/vladilen/posts/f20a...
Мой телеграм: t.me/js_by_vladilen
В честь выхода 17 версии Angular решил не откладывать и с удовольствием пошел знакомиться с новым синтаксисом фреймворка.
Приятно было написать Pet проект на столько, что решил сделать практичный урок для вас
Как основу взял Telegram Mini App. Сейчас из-за контеста в телеге тема популярна и я думаю важно понимать как устроены мини приложухи и как вы можете их сделать. Особенно, когда ваш профиль Frontend - одно удовольствие их разрабатывать и освежать своих ботов 🦄
Плюсом разобрал пошаговый деплой на VPS
Короче, полноценный пошаговый курс получился
Итого, в видео:
✨ Пошаговый алгоритм создания Telegram Mini App
✨ Туториал по Angular 17 с новым синтаксисом и фичами
✨ Настройка и деплой NodeJS приложения докером
Таймкоды:
00:00 - Настройка бота
10:25 - Инициализация Angular CLI
29:30 - Настройка Firebase
38:00 - Разработка на Angular 17
1:29:40 - Настройка Docker
1:33:10 - Деплой бота на VPS
Облачный сервер для телеграм-приложения: slc.tl/52l7m
Текстовая инструкция: slc.tl/hz0rh
Огонь! Думал, что освою видео в несколько приемов, но залип и просмотрел на одном дыхании.
Лайк за Angular!
лайк за лайк к ангуляру
Спасибо за новый ангуляр! Интересная тема, ещё не делала ничего в телеграмм 😃
Мне нравятся твои видео. С точки зрения быстрого ознакомления с новыми для меня технологиями - то, что нужно.
Описание звучит как лайк, спасибо за контент, пошел смотреть)
Побольше бы контента по Angular. Лайк поставил.
Крутой контент получился. Компактный и всё что надо знать "для начала" он содержит. И лёгкий для понимания deploy, и пример работы с документацией по api, и работу с новым Ангуляром. Особенно порадовали примеры отладки.
Прекрасно провел время, хренача тоже самое в VSCode и отлавливая ВНЕЗАПНО возникающие ошибки. Захотелось повторить с другими роликами.
То что и хотелось увидеть! Спасибо)
Шикарный туториал, спасибо!
Контент топ, не ожидал настолько много полезности!
Спасибо за урок! На vue это гораздо легче, а про angular было интересно послушать и посмотреть)
Спасибо за контент по Angular! мне очень нравится и интересен этот фреймворк. Жалко что так мало качественного контента и обучения этой технологии в Ру сегменте!
Спасибо! Очень хорошая подача материала.
😉Классная подача, Владилен.
Как раз думал о том, как это можно реализовать на Angular.
Ясность внесена, время сэкономлено. Респект и уважение.
C++ и Java. Друзья заставили писать фронт. Спасибо тебе за то что ты есть. Спас.
Как только вышел свежий ангуляр, сразу подумал, что теперь нужно дождаться хорошего обзора от Владилена, и вот с утра такая новость! Лайк вперёд и спасибо за твой контент, сегодня вечером смотрю!
Годноту подвезли!
Класс!!❤
Angular наконец-то !!!
I did not understand the Russian language, but you are a good teacher, my good friend
Thank you for this tutorial
Use auto generated subtitles, it's good
Спасибо за видео! Было бы круто такой же подробный разбор и про VK Mini Apps 😊 а еще если на новом Angular 18 - вообще красота была бы 😅
спасибо ❤
Ура ангуляр!
никогда не писал на angular. Но на первый взгляд он мне очень сильно напомнил blazor со всеми этими инъекциями и движком представлений. Лично сам пользуюсь react
Владилен, подскажи, когда планируется обновление курса по ангуляр? К своему стыду скажу, что скачал из инета твой старый курс несколько лет назад и прошел его. Но потом долгое время не разрабатывал на ангуляре, а сейчас вновь появилась необходимость в разработке на ангуляр, но я уже часть изученного забыл + новые фичи появились. Было бы здорово приобрести курс в прежнем формате, но с учетом нововведений платформы.
Уже 17 Angular. С ума сойти как время летит!
В браузере "Опаньки" - то случаем не оператива падает? у меня такая дичь была, два планки из 4 дохли.
Сделай пожалуйста видос по electron js, очень интересно было бы...👍👍👍
Полностью поддерживаю
Привет, Владлен!
У вас полезные видео, и хороший контент.
Было бы интересно посмотреть на проекты в которых вы участвовали или сами разработали?
Владилен, привет.
Я прошёл твой курс на джуна, сейчас прохожу на мидла.
Есть такой вопрос (не по курсу).
У меня на работе такая ситуация, что мне приходится брать на себя обязанности тимлида и у меня в команде уже 2 разраба кроме меня + скоро возможно придут ещё два.
И т.к. у меня нет вообще нет никакого опыта в управлении командой и организации командной разработки, мне приходится максимально быстро учиться этому.
Пока всё идёт хорошо, но приходится очень много перерабатывать.
Есть ли у тебя какие-нибудь материалы по тому, как быть тимлидом, как управлять командой, как взаимодействовать с сокомандниками?
И планируешь ли ты создать курс не только для джунов и мидлов, но и для будущих тимлидов?
Знаю, что ты был тимлидом, думаю тебе есть чем поделиться.
Коммуникативные навыки, навыки наставничество etc. нельзя просто так получить с курса=)
Читаю и жестко ору с этого коммента)
Заметил что подобные tg-боты переодически отлетают на VPS-Selectel неплохо было бы рассмотреть тематику балансировщиков.. что то вроде Network Load Balancer (целевых групп и обработчика) от yandex-cloud .. с точки зрения построения отказоустойчивого приложения.. Незнаю имеется ли данный функционал в Selectel. Спасибо
Браво, Красавчик!
Приложения в телеграмм можно создовать с помощью Ангуляра!?
Здравствуйте подскажите может кто сталкивался устаовил 17 ангуляр, п новый синтаксис не работает, почему так может быть?
Видос понравился. Было интересно. Правда толком нихуя не понятно, но это потому что мой уровень не дотягивает до таких вещей. Я мог бы повторить, но шаг влево, шаг вправо уже тяжело. Я делаю сайты на заказ, в основном одностраничники. Понимаю html, css, js и основы php.
Все таки интересно как заставить кнопку назад работать. Пробовал много вариантов, но не отрабатывает корректно
помогите с выбором, пожалуйста. что выбрать новичку, который только что выучил javascript? есть выбор пойти учить react, он легче чем ангуляр, но там в целом сложнее найти работу и конкуренция больше. либо же пойти учить typescript + angular, но он по словам многих намного сложнее, но и работу найти яко бы легче. vue js не уверен что понравится, может и попробую, но точно не сейчас.
ts, react/vue + nextjs
лайк за Ангуляр! но почему ушел с webstorm ?)
потому что оно лагает в последних релизах
Как сделать, чтобы боковой свайп не закрывал miniapp приложение, а делал шаг назад в самом приложении?
Владилен, планируешь ли что-то по реакту. Спасибо
Будет большой курс для начинающего уровня. Если что то продвинутое, то только через Boosty: boosty.to/vladilen
По реакту материала и так выше крыши (культурно говоря). А вот Ангуляр - это дефицит...
@@user-san-chousсогласна на 100%
А почему ангуляр? Мне кажется, во всяких плагинах для фигмы, телеграма и прочего, важно использовать легковесные решения, чтобы приложение открывалось быстрее. Поэтому я бы либо писал нативно либо воспользовался Svelte или Preact. Использовать ангуляр это прям забивать гвозди тяжелым телескопом.
Ребят, подскажите где найти информацию по автоматизации переводов пользователям? Может вы кодер свяжетесь со мной в тг
Интересно есть ли Viber mini apps или что-то подобное 🤔 Если есть, я уверен что Минин снимет про это видео😊
Сниму про все, что мне интересно. Но вибер не входит в этот список
@@VladilenMinin Жалко😭Я просто для примера мой список мессенджеров и соцсетей ограничен до telegram, vk, viber, whatsapp. Про остальные я только слышал, но никогда не пользовался
У WhatsApp есть API, но нет возможности выводить своё веб-приложение через WebView. Вам понадобиться аккаунт в Facebook и бизнес-аккаунт в WhatsApp. И это по-моему платная возможность. (но это не точно) 🙄😊
Занимаюсь беком, хочу выучить html, css, было бы круто если бы ты выпустил курс по html, css
Они есть на канале
увидил, спасибо большое@@VladilenMinin
Блин, без стрикта больно смотреть. Реактивности мало (
а что бот с локал хостом приложения нельзя запустить ?
За сколько создашь на заказ?
LOOKS LIKE KILLA!
VSCode?) Серьезно?))) Почему? Сколько лет был предан WebStorm...
Думаю все дело в том что с подпиской на webstorm после санкций стало все намного сложнее, но я поддерживаю для ангуляре в особенности webstorm маст хэв)
@@sergeyf4256 а разве они не продрлжают дарить подписку россиянам?
лайк
О и тут ты)
Так а че не показал как по итогу то работает
95% ангуляра и 5% методики разработки мини приложения, хотя по названию вроде как акцент должен быть на другом. Надо было как-то баланс найти. А то пришлось смотреть на перемотке, чтобы должаться чего-то именно по боту и приложению.
ну вообще конечно makefile когда у тебя есть npm с кастом скриптами, эт странно. Пчему бы не использовать готовые 3х строчные гитхаб вокфлоу чтобы билдить и заливать свои образы - не понять. Как поднять https - ngrock быстро, а для остальных фришный домен есть на куче сайтов, белый ип дают с тачкой, а letsencrypt + certbot уже давно база. Ну и ручками ставить для демо кшн ок, но научишь маслят плохому. так и будут делать потом, хоть бы ансиблем катнул, да и какие пароли к тачке, ну блин(
Интересное видео, спасибо. Капец, как же Angular переусложнен даже в тех местах, где во Vue всё проще простого.
Кнопка "назад" не отрабатывает, почему?
У меня тоже не получается сделать
"Я построю свой лунапарк - с блэкджеком и девками!, хотя к чёрту девок"
как без девушек то)
@@VladilenMinin порой без них спокойнее, в компании друзей (мужчин).
Это не только моё наблюдение, зачастую идиллия в мужской компании нарушается за счёт появления в компании девушки, которая и создаёт хаос.
Чтобы не получать в свой адрес штрафы за дискриминацию равных прав женщин, у моряков появилась "примета"
"Женщина на корабле к беде" - если не верите, вспомните по Титаник, непотопляемый лайнер.
Или от чего погиб Александр Пушкин 🤗😏
Я ни на что не намекаю, это всё статистика, сука такая...
@@serenitiSeverпокажу своим коллегам мужчинам 😅😅😅
😅😂@@mariaangelova2118
Так и не заработала кнопка назад, открывается пустая страница, есть кто разобрался в чем проблема?
Видно что Владилен и сам не разобрался.😅 Там в последней части видео видно как быстро нажимает назад и там пусто. Я быстро потестил, если иметь свою кнопку для редиректа, то всё работает, а вот если через кнопку телеграма, то нет. Так что можно так выйти из ситуации. А вот чтобы прям кнопка телеграма заработала хз. Возмножно ChangeDetection некоректно работает, но нужно тестить, что не очень удобно 😢
У меня тоже не получается, пробовал разные решения. Такое ощущение что телеграмм не обновляет страницу, переходя по ней назад и поэтому не грузится компоненты
@@user-rr2sj4qc4p помогло в методе goBack() в product.component.ts заменить this.router.navigate(['/']); на history.back();
Там в логе выбивает ошибку "BackButton is not supported in version 6.0", как это пофиксить - хз
А почему исходный код за деньги?) Чего за хня такая?
😢я так понимаю это не для новичков контент?
Вообще не для новичков.
Сначала у меня не заработало отображение моего мини-приложения в ТГ, любой другой сайт отображается, а мой на Firebase - нет (просто в браузере работает). Предполагаю что надо что-то подкрутить в Firebase чтобы оно отдавало контент не только браузеру, но не знаю что.
Потом посыпались ошибки компиляции. Не знаю что это: версия ES, версия TS, подкрученный линтер?
В общем, повторить проект у меня не получилось, остаётся только смотреть ролик как развлекалочку....
Вообще, ощущение что Владилену наскучило обучать: качество подачи катастрофически просело по сравнению с тем что было раньше. В закладках лежит ещё Реакт-2024, не знаю стоит ли смотреть.
Видио 4года ппц
Ангуляры неакткальны могут стать
Чувак, тебя уже давно никто не воспринимает
Ого, только хотел написать в комменте почему не используешь сигналы, оказывается используешь! Ой хорош! А как тебе новый синтаксис? @if(), @for(), @switch(). Ну красиво же! Делай пожалуйста больше контента по Ангуляр. По NGRX, по Nx.
Мне он куда больше нравится, чем раньше эти *ngIf и прочее
Хочешь голосовать за контент - тогда гоу на бусти)
У меня не запускается код по команде npm start сыпет ошибки. Уже два часа бьюсь и не могу исправить. Сначала писал что отсутствует папка с модулями, но каким-то чудным способом мне удалось ее установить, но main.js все равно не запускается. Подскажите что делать?
npm start
> node@1.0.0 start /Users/myname/Documents/my-project
> node main.js
node:internal/modules/esm/resolve:841
throw new ERR_MODULE_NOT_FOUND(packageName, fileURLToPath(base), null);
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'telegraf' imported from /Users/myname/Documents/my-project/main.js
at packageResolve (node:internal/modules/esm/resolve:841:9)
at moduleResolve (node:internal/modules/esm/resolve:914:18)
at defaultResolve (node:internal/modules/esm/resolve:1119:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:541:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:510:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
at ModuleJob._link (node:internal/modules/esm/module_job:126:49) {
code: 'ERR_MODULE_NOT_FOUND'
}
Node.js v22.3.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node@1.0.0 start: `node main.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/myname/.npm/_logs/2024-06-12T14_19_27_996Z-debug.log
Как с вами связаться ?
В телеграмме в комментах