Создаем Telegram Mini App на Angular 17. С нуля до продакшн деплоя
Вставка
- Опубліковано 8 чер 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. Лайк поставил.
Спасибо за контент по Angular! мне очень нравится и интересен этот фреймворк. Жалко что так мало качественного контента и обучения этой технологии в Ру сегменте!
Шикарный туториал, спасибо!
То что и хотелось увидеть! Спасибо)
Контент топ, не ожидал настолько много полезности!
Спасибо! Очень хорошая подача материала.
Крутой контент получился. Компактный и всё что надо знать "для начала" он содержит. И лёгкий для понимания deploy, и пример работы с документацией по api, и работу с новым Ангуляром. Особенно порадовали примеры отладки.
Прекрасно провел время, хренача тоже самое в VSCode и отлавливая ВНЕЗАПНО возникающие ошибки. Захотелось повторить с другими роликами.
😉Классная подача, Владилен.
Как раз думал о том, как это можно реализовать на Angular.
Ясность внесена, время сэкономлено. Респект и уважение.
Спасибо за урок! На vue это гораздо легче, а про angular было интересно послушать и посмотреть)
Как только вышел свежий ангуляр, сразу подумал, что теперь нужно дождаться хорошего обзора от Владилена, и вот с утра такая новость! Лайк вперёд и спасибо за твой контент, сегодня вечером смотрю!
Владилен, подскажи, когда планируется обновление курса по ангуляр? К своему стыду скажу, что скачал из инета твой старый курс несколько лет назад и прошел его. Но потом долгое время не разрабатывал на ангуляре, а сейчас вновь появилась необходимость в разработке на ангуляр, но я уже часть изученного забыл + новые фичи появились. Было бы здорово приобрести курс в прежнем формате, но с учетом нововведений платформы.
Годноту подвезли!
Angular наконец-то !!!
Класс!!❤
Сделай пожалуйста видос по electron js, очень интересно было бы...👍👍👍
Полностью поддерживаю
никогда не писал на angular. Но на первый взгляд он мне очень сильно напомнил blazor со всеми этими инъекциями и движком представлений. Лично сам пользуюсь react
Уже 17 Angular. С ума сойти как время летит!
Ура ангуляр!
В браузере "Опаньки" - то случаем не оператива падает? у меня такая дичь была, два планки из 4 дохли.
спасибо ❤
Здравствуйте подскажите может кто сталкивался устаовил 17 ангуляр, п новый синтаксис не работает, почему так может быть?
Как сделать, чтобы боковой свайп не закрывал miniapp приложение, а делал шаг назад в самом приложении?
Приложения в телеграмм можно создовать с помощью Ангуляра!?
Привет, Владлен!
У вас полезные видео, и хороший контент.
Было бы интересно посмотреть на проекты в которых вы участвовали или сами разработали?
Заметил что подобные tg-боты переодически отлетают на VPS-Selectel неплохо было бы рассмотреть тематику балансировщиков.. что то вроде Network Load Balancer (целевых групп и обработчика) от yandex-cloud .. с точки зрения построения отказоустойчивого приложения.. Незнаю имеется ли данный функционал в Selectel. Спасибо
Владилен, привет.
Я прошёл твой курс на джуна, сейчас прохожу на мидла.
Есть такой вопрос (не по курсу).
У меня на работе такая ситуация, что мне приходится брать на себя обязанности тимлида и у меня в команде уже 2 разраба кроме меня + скоро возможно придут ещё два.
И т.к. у меня нет вообще нет никакого опыта в управлении командой и организации командной разработки, мне приходится максимально быстро учиться этому.
Пока всё идёт хорошо, но приходится очень много перерабатывать.
Есть ли у тебя какие-нибудь материалы по тому, как быть тимлидом, как управлять командой, как взаимодействовать с сокомандниками?
И планируешь ли ты создать курс не только для джунов и мидлов, но и для будущих тимлидов?
Знаю, что ты был тимлидом, думаю тебе есть чем поделиться.
Коммуникативные навыки, навыки наставничество etc. нельзя просто так получить с курса=)
Читаю и жестко ору с этого коммента)
Все таки интересно как заставить кнопку назад работать. Пробовал много вариантов, но не отрабатывает корректно
помогите с выбором, пожалуйста. что выбрать новичку, который только что выучил javascript? есть выбор пойти учить react, он легче чем ангуляр, но там в целом сложнее найти работу и конкуренция больше. либо же пойти учить typescript + angular, но он по словам многих намного сложнее, но и работу найти яко бы легче. vue js не уверен что понравится, может и попробую, но точно не сейчас.
ts, react/vue + nextjs
Ребят, подскажите где найти информацию по автоматизации переводов пользователям? Может вы кодер свяжетесь со мной в тг
Браво, Красавчик!
лайк за Ангуляр! но почему ушел с webstorm ?)
потому что оно лагает в последних релизах
Владилен, планируешь ли что-то по реакту. Спасибо
Будет большой курс для начинающего уровня. Если что то продвинутое, то только через Boosty: boosty.to/vladilen
По реакту материала и так выше крыши (культурно говоря). А вот Ангуляр - это дефицит...
@@user-kn8nl4lv5yсогласна на 100%
Блин, без стрикта больно смотреть. Реактивности мало (
А почему ангуляр? Мне кажется, во всяких плагинах для фигмы, телеграма и прочего, важно использовать легковесные решения, чтобы приложение открывалось быстрее. Поэтому я бы либо писал нативно либо воспользовался Svelte или Preact. Использовать ангуляр это прям забивать гвозди тяжелым телескопом.
Интересно есть ли Viber mini apps или что-то подобное 🤔 Если есть, я уверен что Минин снимет про это видео😊
Сниму про все, что мне интересно. Но вибер не входит в этот список
@@VladilenMinin Жалко😭Я просто для примера мой список мессенджеров и соцсетей ограничен до telegram, vk, viber, whatsapp. Про остальные я только слышал, но никогда не пользовался
У WhatsApp есть API, но нет возможности выводить своё веб-приложение через WebView. Вам понадобиться аккаунт в Facebook и бизнес-аккаунт в WhatsApp. И это по-моему платная возможность. (но это не точно) 🙄😊
Видос понравился. Было интересно. Правда толком нихуя не понятно, но это потому что мой уровень не дотягивает до таких вещей. Я мог бы повторить, но шаг влево, шаг вправо уже тяжело. Я делаю сайты на заказ, в основном одностраничники. Понимаю html, css, js и основы php.
LOOKS LIKE KILLA!
За сколько создашь на заказ?
Занимаюсь беком, хочу выучить html, css, было бы круто если бы ты выпустил курс по html, css
Они есть на канале
увидил, спасибо большое@@VladilenMinin
VSCode?) Серьезно?))) Почему? Сколько лет был предан WebStorm...
Думаю все дело в том что с подпиской на webstorm после санкций стало все намного сложнее, но я поддерживаю для ангуляре в особенности webstorm маст хэв)
@@sergeyf4256 а разве они не продрлжают дарить подписку россиянам?
Кнопка "назад" не отрабатывает, почему?
У меня тоже не получается сделать
Так а че не показал как по итогу то работает
лайк
О и тут ты)
"Я построю свой лунапарк - с блэкджеком и девками!, хотя к чёрту девок"
как без девушек то)
@@VladilenMinin порой без них спокойнее, в компании друзей (мужчин).
Это не только моё наблюдение, зачастую идиллия в мужской компании нарушается за счёт появления в компании девушки, которая и создаёт хаос.
Чтобы не получать в свой адрес штрафы за дискриминацию равных прав женщин, у моряков появилась "примета"
"Женщина на корабле к беде" - если не верите, вспомните по Титаник, непотопляемый лайнер.
Или от чего погиб Александр Пушкин 🤗😏
Я ни на что не намекаю, это всё статистика, сука такая...
@@serenitiSeverпокажу своим коллегам мужчинам 😅😅😅
😅😂@@mariaangelova2118
95% ангуляра и 5% методики разработки мини приложения, хотя по названию вроде как акцент должен быть на другом. Надо было как-то баланс найти. А то пришлось смотреть на перемотке, чтобы должаться чего-то именно по боту и приложению.
Интересное видео, спасибо. Капец, как же Angular переусложнен даже в тех местах, где во Vue всё проще простого.
Так и не заработала кнопка назад, открывается пустая страница, есть кто разобрался в чем проблема?
Видно что Владилен и сам не разобрался.😅 Там в последней части видео видно как быстро нажимает назад и там пусто. Я быстро потестил, если иметь свою кнопку для редиректа, то всё работает, а вот если через кнопку телеграма, то нет. Так что можно так выйти из ситуации. А вот чтобы прям кнопка телеграма заработала хз. Возмножно 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 и прочее
Хочешь голосовать за контент - тогда гоу на бусти)
Как с вами связаться ?
В телеграмме в комментах