Создаем Telegram Mini App на Angular 17. С нуля до продакшн деплоя
Вставка
- Опубліковано 22 чер 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! мне очень нравится и интересен этот фреймворк. Жалко что так мало качественного контента и обучения этой технологии в Ру сегменте!
Спасибо! Очень хорошая подача материала.
Шикарный туториал, спасибо!
Спасибо за урок! На vue это гораздо легче, а про angular было интересно послушать и посмотреть)
То что и хотелось увидеть! Спасибо)
Контент топ, не ожидал настолько много полезности!
Крутой контент получился. Компактный и всё что надо знать "для начала" он содержит. И лёгкий для понимания deploy, и пример работы с документацией по api, и работу с новым Ангуляром. Особенно порадовали примеры отладки.
Прекрасно провел время, хренача тоже самое в VSCode и отлавливая ВНЕЗАПНО возникающие ошибки. Захотелось повторить с другими роликами.
😉Классная подача, Владилен.
Как раз думал о том, как это можно реализовать на Angular.
Ясность внесена, время сэкономлено. Респект и уважение.
Лайк за Angular!
лайк за лайк к ангуляру
I did not understand the Russian language, but you are a good teacher, my good friend
Thank you for this tutorial
Спасибо за видео! Было бы круто такой же подробный разбор и про VK Mini Apps 😊 а еще если на новом Angular 18 - вообще красота была бы 😅
Как только вышел свежий ангуляр, сразу подумал, что теперь нужно дождаться хорошего обзора от Владилена, и вот с утра такая новость! Лайк вперёд и спасибо за твой контент, сегодня вечером смотрю!
Годноту подвезли!
Angular наконец-то !!!
никогда не писал на angular. Но на первый взгляд он мне очень сильно напомнил blazor со всеми этими инъекциями и движком представлений. Лично сам пользуюсь react
Класс!!❤
Уже 17 Angular. С ума сойти как время летит!
Сделай пожалуйста видос по electron js, очень интересно было бы...👍👍👍
Полностью поддерживаю
спасибо ❤
Владилен, подскажи, когда планируется обновление курса по ангуляр? К своему стыду скажу, что скачал из инета твой старый курс несколько лет назад и прошел его. Но потом долгое время не разрабатывал на ангуляре, а сейчас вновь появилась необходимость в разработке на ангуляр, но я уже часть изученного забыл + новые фичи появились. Было бы здорово приобрести курс в прежнем формате, но с учетом нововведений платформы.
Ура ангуляр!
Привет, Владлен!
У вас полезные видео, и хороший контент.
Было бы интересно посмотреть на проекты в которых вы участвовали или сами разработали?
В браузере "Опаньки" - то случаем не оператива падает? у меня такая дичь была, два планки из 4 дохли.
Владилен, привет.
Я прошёл твой курс на джуна, сейчас прохожу на мидла.
Есть такой вопрос (не по курсу).
У меня на работе такая ситуация, что мне приходится брать на себя обязанности тимлида и у меня в команде уже 2 разраба кроме меня + скоро возможно придут ещё два.
И т.к. у меня нет вообще нет никакого опыта в управлении командой и организации командной разработки, мне приходится максимально быстро учиться этому.
Пока всё идёт хорошо, но приходится очень много перерабатывать.
Есть ли у тебя какие-нибудь материалы по тому, как быть тимлидом, как управлять командой, как взаимодействовать с сокомандниками?
И планируешь ли ты создать курс не только для джунов и мидлов, но и для будущих тимлидов?
Знаю, что ты был тимлидом, думаю тебе есть чем поделиться.
Коммуникативные навыки, навыки наставничество etc. нельзя просто так получить с курса=)
Читаю и жестко ору с этого коммента)
Здравствуйте подскажите может кто сталкивался устаовил 17 ангуляр, п новый синтаксис не работает, почему так может быть?
Приложения в телеграмм можно создовать с помощью Ангуляра!?
Заметил что подобные tg-боты переодически отлетают на VPS-Selectel неплохо было бы рассмотреть тематику балансировщиков.. что то вроде Network Load Balancer (целевых групп и обработчика) от yandex-cloud .. с точки зрения построения отказоустойчивого приложения.. Незнаю имеется ли данный функционал в Selectel. Спасибо
Как сделать, чтобы боковой свайп не закрывал miniapp приложение, а делал шаг назад в самом приложении?
Все таки интересно как заставить кнопку назад работать. Пробовал много вариантов, но не отрабатывает корректно
Блин, без стрикта больно смотреть. Реактивности мало (
Браво, Красавчик!
лайк за Ангуляр! но почему ушел с webstorm ?)
потому что оно лагает в последних релизах
Владилен, планируешь ли что-то по реакту. Спасибо
Будет большой курс для начинающего уровня. Если что то продвинутое, то только через Boosty: boosty.to/vladilen
По реакту материала и так выше крыши (культурно говоря). А вот Ангуляр - это дефицит...
@@user-kn8nl4lv5yсогласна на 100%
Видос понравился. Было интересно. Правда толком нихуя не понятно, но это потому что мой уровень не дотягивает до таких вещей. Я мог бы повторить, но шаг влево, шаг вправо уже тяжело. Я делаю сайты на заказ, в основном одностраничники. Понимаю html, css, js и основы php.
LOOKS LIKE KILLA!
Занимаюсь беком, хочу выучить html, css, было бы круто если бы ты выпустил курс по html, css
Они есть на канале
увидил, спасибо большое@@VladilenMinin
Интересно есть ли Viber mini apps или что-то подобное 🤔 Если есть, я уверен что Минин снимет про это видео😊
Сниму про все, что мне интересно. Но вибер не входит в этот список
@@VladilenMinin Жалко😭Я просто для примера мой список мессенджеров и соцсетей ограничен до telegram, vk, viber, whatsapp. Про остальные я только слышал, но никогда не пользовался
У WhatsApp есть API, но нет возможности выводить своё веб-приложение через WebView. Вам понадобиться аккаунт в Facebook и бизнес-аккаунт в WhatsApp. И это по-моему платная возможность. (но это не точно) 🙄😊
помогите с выбором, пожалуйста. что выбрать новичку, который только что выучил javascript? есть выбор пойти учить react, он легче чем ангуляр, но там в целом сложнее найти работу и конкуренция больше. либо же пойти учить typescript + angular, но он по словам многих намного сложнее, но и работу найти яко бы легче. vue js не уверен что понравится, может и попробую, но точно не сейчас.
ts, react/vue + nextjs
Ребят, подскажите где найти информацию по автоматизации переводов пользователям? Может вы кодер свяжетесь со мной в тг
А почему ангуляр? Мне кажется, во всяких плагинах для фигмы, телеграма и прочего, важно использовать легковесные решения, чтобы приложение открывалось быстрее. Поэтому я бы либо писал нативно либо воспользовался Svelte или Preact. Использовать ангуляр это прям забивать гвозди тяжелым телескопом.
За сколько создашь на заказ?
VSCode?) Серьезно?))) Почему? Сколько лет был предан WebStorm...
Думаю все дело в том что с подпиской на webstorm после санкций стало все намного сложнее, но я поддерживаю для ангуляре в особенности webstorm маст хэв)
@@sergeyf4256 а разве они не продрлжают дарить подписку россиянам?
Так а че не показал как по итогу то работает
Кнопка "назад" не отрабатывает, почему?
У меня тоже не получается сделать
95% ангуляра и 5% методики разработки мини приложения, хотя по названию вроде как акцент должен быть на другом. Надо было как-то баланс найти. А то пришлось смотреть на перемотке, чтобы должаться чего-то именно по боту и приложению.
Так и не заработала кнопка назад, открывается пустая страница, есть кто разобрался в чем проблема?
Видно что Владилен и сам не разобрался.😅 Там в последней части видео видно как быстро нажимает назад и там пусто. Я быстро потестил, если иметь свою кнопку для редиректа, то всё работает, а вот если через кнопку телеграма, то нет. Так что можно так выйти из ситуации. А вот чтобы прям кнопка телеграма заработала хз. Возмножно ChangeDetection некоректно работает, но нужно тестить, что не очень удобно 😢
У меня тоже не получается, пробовал разные решения. Такое ощущение что телеграмм не обновляет страницу, переходя по ней назад и поэтому не грузится компоненты
@@user-rr2sj4qc4p помогло в методе goBack() в product.component.ts заменить this.router.navigate(['/']); на history.back();
Там в логе выбивает ошибку "BackButton is not supported in version 6.0", как это пофиксить - хз
"Я построю свой лунапарк - с блэкджеком и девками!, хотя к чёрту девок"
как без девушек то)
@@VladilenMinin порой без них спокойнее, в компании друзей (мужчин).
Это не только моё наблюдение, зачастую идиллия в мужской компании нарушается за счёт появления в компании девушки, которая и создаёт хаос.
Чтобы не получать в свой адрес штрафы за дискриминацию равных прав женщин, у моряков появилась "примета"
"Женщина на корабле к беде" - если не верите, вспомните по Титаник, непотопляемый лайнер.
Или от чего погиб Александр Пушкин 🤗😏
Я ни на что не намекаю, это всё статистика, сука такая...
@@serenitiSeverпокажу своим коллегам мужчинам 😅😅😅
😅😂@@mariaangelova2118
лайк
О и тут ты)
Интересное видео, спасибо. Капец, как же Angular переусложнен даже в тех местах, где во Vue всё проще простого.
А почему исходный код за деньги?) Чего за хня такая?
😢я так понимаю это не для новичков контент?
Вообще не для новичков.
Сначала у меня не заработало отображение моего мини-приложения в ТГ, любой другой сайт отображается, а мой на 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
Как с вами связаться ?
В телеграмме в комментах