Создаем Telegram Mini App на Angular 17. С нуля до продакшн деплоя

Подписаться 308 тыс.

Просмотров 46 тыс.

50% 1

Облачный сервер для телеграм-приложения: 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

Опубликовано:

28 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 96

@VladilenMinin 5 месяцев назад

Облачный сервер для телеграм-приложения: slc.tl/52l7m Текстовая инструкция: slc.tl/hz0rh

@maratgumerov4375 5 месяцев назад

Огонь! Думал, что освою видео в несколько приемов, но залип и просмотрел на одном дыхании.

@dinliri472 5 месяцев назад

Мне нравятся твои видео. С точки зрения быстрого ознакомления с новыми для меня технологиями - то, что нужно.

@MrRiseful 5 месяцев назад

Лайк за Angular!

@VladilenMinin 5 месяцев назад

лайк за лайк к ангуляру

@klaudianext6118 5 месяцев назад

Спасибо за новый ангуляр! Интересная тема, ещё не делала ничего в телеграмм 😃

@CrazyPrawn 4 месяца назад

Спасибо! Очень хорошая подача материала.

@sergeyf4256 4 месяца назад

Описание звучит как лайк, спасибо за контент, пошел смотреть)

@user-iy7rm7dt8x 4 месяца назад

Побольше бы контента по Angular. Лайк поставил.

@Ruslan93Nazarov 4 месяца назад

Спасибо за контент по Angular! мне очень нравится и интересен этот фреймворк. Жалко что так мало качественного контента и обучения этой технологии в Ру сегменте!

@YakushevEV 5 месяцев назад

Крутой контент получился. Компактный и всё что надо знать "для начала" он содержит. И лёгкий для понимания deploy, и пример работы с документацией по api, и работу с новым Ангуляром. Особенно порадовали примеры отладки. Прекрасно провел время, хренача тоже самое в VSCode и отлавливая ВНЕЗАПНО возникающие ошибки. Захотелось повторить с другими роликами.

@omit_code_bugs 4 месяца назад

Шикарный туториал, спасибо!

@johnd1431 5 месяцев назад

То что и хотелось увидеть! Спасибо)

@Bukwau 5 месяцев назад

Спасибо за урок! На vue это гораздо легче, а про angular было интересно послушать и посмотреть)

@tuku_mann 5 месяцев назад

Контент топ, не ожидал настолько много полезности!

@serenitiSever 5 месяцев назад

😉Классная подача, Владилен. Как раз думал о том, как это можно реализовать на Angular. Ясность внесена, время сэкономлено. Респект и уважение.

@user-zz3yh1ko6y 5 месяцев назад

Годноту подвезли!

@user-wr3dz2op1t 5 месяцев назад

Angular наконец-то !!!

@alexl7345 2 месяца назад

Владилен, подскажи, когда планируется обновление курса по ангуляр? К своему стыду скажу, что скачал из инета твой старый курс несколько лет назад и прошел его. Но потом долгое время не разрабатывал на ангуляре, а сейчас вновь появилась необходимость в разработке на ангуляр, но я уже часть изученного забыл + новые фичи появились. Было бы здорово приобрести курс в прежнем формате, но с учетом нововведений платформы.

@user-tc1rz4mh3o 5 месяцев назад

Как только вышел свежий ангуляр, сразу подумал, что теперь нужно дождаться хорошего обзора от Владилена, и вот с утра такая новость! Лайк вперёд и спасибо за твой контент, сегодня вечером смотрю!

@RubikElevator 5 месяцев назад

Класс!!❤

@riyazvagapov1449 5 месяцев назад

никогда не писал на angular. Но на первый взгляд он мне очень сильно напомнил blazor со всеми этими инъекциями и движком представлений. Лично сам пользуюсь react

@roma_fek 5 месяцев назад

Ура ангуляр!

@user-em1pb4qc4w 5 месяцев назад

спасибо ❤

@krakanosh 3 месяца назад

Сделай пожалуйста видос по electron js, очень интересно было бы...👍👍👍

@nik55580 3 месяца назад

Полностью поддерживаю

@konstantinov_it 5 месяцев назад

Уже 17 Angular. С ума сойти как время летит!

@igorbond2823 4 месяца назад

В браузере "Опаньки" - то случаем не оператива падает? у меня такая дичь была, два планки из 4 дохли.

@user-eu8kf1xb9h 5 месяцев назад

Владилен, привет. Я прошёл твой курс на джуна, сейчас прохожу на мидла. Есть такой вопрос (не по курсу). У меня на работе такая ситуация, что мне приходится брать на себя обязанности тимлида и у меня в команде уже 2 разраба кроме меня + скоро возможно придут ещё два. И т.к. у меня нет вообще нет никакого опыта в управлении командой и организации командной разработки, мне приходится максимально быстро учиться этому. Пока всё идёт хорошо, но приходится очень много перерабатывать. Есть ли у тебя какие-нибудь материалы по тому, как быть тимлидом, как управлять командой, как взаимодействовать с сокомандниками? И планируешь ли ты создать курс не только для джунов и мидлов, но и для будущих тимлидов? Знаю, что ты был тимлидом, думаю тебе есть чем поделиться.

@SONCE-DEV 5 месяцев назад

Коммуникативные навыки, навыки наставничество etc. нельзя просто так получить с курса=)

@user-dr8bp1ln2x 4 месяца назад

Читаю и жестко ору с этого коммента)

@evgenfadeev9157 5 месяцев назад

Заметил что подобные tg-боты переодически отлетают на VPS-Selectel неплохо было бы рассмотреть тематику балансировщиков.. что то вроде Network Load Balancer (целевых групп и обработчика) от yandex-cloud .. с точки зрения построения отказоустойчивого приложения.. Незнаю имеется ли данный функционал в Selectel. Спасибо

@frontend_coder 5 месяцев назад

Приложения в телеграмм можно создовать с помощью Ангуляра!?

@skarabei2303 5 месяцев назад

Браво, Красавчик!

@anzor3219 Месяц назад

лайк за Ангуляр! но почему ушел с webstorm ?)

@dmitryavdoshin9539 25 дней назад

потому что оно лагает в последних релизах

@tim.wonderer 5 месяцев назад

Владилен, планируешь ли что-то по реакту. Спасибо

@VladilenMinin 5 месяцев назад

Будет большой курс для начинающего уровня. Если что то продвинутое, то только через Boosty: boosty.to/vladilen

@user-kn8nl4lv5y 5 месяцев назад

По реакту материала и так выше крыши (культурно говоря). А вот Ангуляр - это дефицит...

@mariaangelova2118 5 месяцев назад

@@user-kn8nl4lv5yсогласна на 100%

@user-ed8eb6cx7o 3 месяца назад

Здравствуйте подскажите может кто сталкивался устаовил 17 ангуляр, п новый синтаксис не работает, почему так может быть?

@user-rr2sj4qc4p Месяц назад

Все таки интересно как заставить кнопку назад работать. Пробовал много вариантов, но не отрабатывает корректно

@ArgumentX1 2 месяца назад

Как сделать, чтобы боковой свайп не закрывал miniapp приложение, а делал шаг назад в самом приложении?

@mansur_terla 5 месяцев назад

Привет, Владлен! У вас полезные видео, и хороший контент. Было бы интересно посмотреть на проекты в которых вы участвовали или сами разработали?

@user-qc8ic8tb3x 5 месяцев назад

А почему ангуляр? Мне кажется, во всяких плагинах для фигмы, телеграма и прочего, важно использовать легковесные решения, чтобы приложение открывалось быстрее. Поэтому я бы либо писал нативно либо воспользовался Svelte или Preact. Использовать ангуляр это прям забивать гвозди тяжелым телескопом.

@artofit 5 месяцев назад

LOOKS LIKE KILLA!

@VladVeninTV 5 месяцев назад

Интересно есть ли Viber mini apps или что-то подобное 🤔 Если есть, я уверен что Минин снимет про это видео😊

@VladilenMinin 5 месяцев назад

Сниму про все, что мне интересно. Но вибер не входит в этот список

@VladVeninTV 5 месяцев назад

@@VladilenMinin Жалко😭Я просто для примера мой список мессенджеров и соцсетей ограничен до telegram, vk, viber, whatsapp. Про остальные я только слышал, но никогда не пользовался

@serenitiSever 5 месяцев назад

У WhatsApp есть API, но нет возможности выводить своё веб-приложение через WebView. Вам понадобиться аккаунт в Facebook и бизнес-аккаунт в WhatsApp. И это по-моему платная возможность. (но это не точно) 🙄😊

@elevaalex1225 5 месяцев назад

Видос понравился. Было интересно. Правда толком нихуя не понятно, но это потому что мой уровень не дотягивает до таких вещей. Я мог бы повторить, но шаг влево, шаг вправо уже тяжело. Я делаю сайты на заказ, в основном одностраничники. Понимаю html, css, js и основы php.

@winterofhell 5 месяцев назад

помогите с выбором, пожалуйста. что выбрать новичку, который только что выучил javascript? есть выбор пойти учить react, он легче чем ангуляр, но там в целом сложнее найти работу и конкуренция больше. либо же пойти учить typescript + angular, но он по словам многих намного сложнее, но и работу найти яко бы легче. vue js не уверен что понравится, может и попробую, но точно не сейчас.

@mstrgrave 4 месяца назад

ts, react/vue + nextjs

@TAXIENJOYER Месяц назад

Ребят, подскажите где найти информацию по автоматизации переводов пользователям? Может вы кодер свяжетесь со мной в тг

@jmksm 5 месяцев назад

Блин, без стрикта больно смотреть. Реактивности мало (

@BREDOVOSTI Месяц назад

За сколько создашь на заказ?

@ZenithDreamscape 5 месяцев назад

Занимаюсь беком, хочу выучить html, css, было бы круто если бы ты выпустил курс по html, css

@VladilenMinin 5 месяцев назад

Они есть на канале

@ZenithDreamscape 5 месяцев назад

увидил, спасибо большое@@VladilenMinin

@user-em1pb4qc4w 5 месяцев назад

VSCode?) Серьезно?))) Почему? Сколько лет был предан WebStorm...

@sergeyf4256 4 месяца назад

Думаю все дело в том что с подпиской на webstorm после санкций стало все намного сложнее, но я поддерживаю для ангуляре в особенности webstorm маст хэв)

@user-uw9xp8en3v 4 месяца назад

@@sergeyf4256 а разве они не продрлжают дарить подписку россиянам?

@1311avenue_ 3 месяца назад

Так а че не показал как по итогу то работает

@mariaangelova2118 5 месяцев назад

Кнопка "назад" не отрабатывает, почему?

@user-rr2sj4qc4p Месяц назад

У меня тоже не получается сделать

@Dmitry-cb7wl 2 месяца назад

95% ангуляра и 5% методики разработки мини приложения, хотя по названию вроде как акцент должен быть на другом. Надо было как-то баланс найти. А то пришлось смотреть на перемотке, чтобы должаться чего-то именно по боту и приложению.

@yurass97 3 месяца назад

Так и не заработала кнопка назад, открывается пустая страница, есть кто разобрался в чем проблема?

@user-lu3ew4dk6j 2 месяца назад

Видно что Владилен и сам не разобрался.😅 Там в последней части видео видно как быстро нажимает назад и там пусто. Я быстро потестил, если иметь свою кнопку для редиректа, то всё работает, а вот если через кнопку телеграма, то нет. Так что можно так выйти из ситуации. А вот чтобы прям кнопка телеграма заработала хз. Возмножно ChangeDetection некоректно работает, но нужно тестить, что не очень удобно 😢

@user-rr2sj4qc4p Месяц назад

У меня тоже не получается, пробовал разные решения. Такое ощущение что телеграмм не обновляет страницу, переходя по ней назад и поэтому не грузится компоненты

@PashokRibakov Месяц назад

@@user-rr2sj4qc4p помогло в методе goBack() в product.component.ts заменить this.router.navigate(['/']); на history.back();

@artemz9054 5 месяцев назад

Интересное видео, спасибо. Капец, как же Angular переусложнен даже в тех местах, где во Vue всё проще простого.

@freetime7742 5 месяцев назад

"Я построю свой лунапарк - с блэкджеком и девками!, хотя к чёрту девок"

@VladilenMinin 5 месяцев назад

как без девушек то)

@serenitiSever 5 месяцев назад

@@VladilenMinin порой без них спокойнее, в компании друзей (мужчин). Это не только моё наблюдение, зачастую идиллия в мужской компании нарушается за счёт появления в компании девушки, которая и создаёт хаос. Чтобы не получать в свой адрес штрафы за дискриминацию равных прав женщин, у моряков появилась "примета" "Женщина на корабле к беде" - если не верите, вспомните по Титаник, непотопляемый лайнер. Или от чего погиб Александр Пушкин 🤗😏 Я ни на что не намекаю, это всё статистика, сука такая...

@mariaangelova2118 5 месяцев назад

@@serenitiSeverпокажу своим коллегам мужчинам 😅😅😅

@serenitiSever 5 месяцев назад

😅😂@@mariaangelova2118

@ilnurryazhapov9377 5 месяцев назад

лайк

@tim.wonderer 5 месяцев назад

О и тут ты)

@AlenaRisk. 5 месяцев назад

😢я так понимаю это не для новичков контент?

@rudolfsikorsky7900 4 месяца назад

Вообще не для новичков. Сначала у меня не заработало отображение моего мини-приложения в ТГ, любой другой сайт отображается, а мой на Firebase - нет (просто в браузере работает). Предполагаю что надо что-то подкрутить в Firebase чтобы оно отдавало контент не только браузеру, но не знаю что. Потом посыпались ошибки компиляции. Не знаю что это: версия ES, версия TS, подкрученный линтер? В общем, повторить проект у меня не получилось, остаётся только смотреть ролик как развлекалочку.... Вообще, ощущение что Владилену наскучило обучать: качество подачи катастрофически просело по сравнению с тем что было раньше. В закладках лежит ещё Реакт-2024, не знаю стоит ли смотреть.

@user-dr8bp1ln2x 4 месяца назад

А почему исходный код за деньги?) Чего за хня такая?

@bannnnnn Месяц назад

Видио 4года ппц

@user-dl7vt1ub1k 3 месяца назад

Ангуляры неакткальны могут стать

@povdata 4 месяца назад

Чувак, тебя уже давно никто не воспринимает

@Maratreason 5 месяцев назад

Ого, только хотел написать в комменте почему не используешь сигналы, оказывается используешь! Ой хорош! А как тебе новый синтаксис? @if(), @for(), @switch(). Ну красиво же! Делай пожалуйста больше контента по Ангуляр. По NGRX, по Nx.

@VladilenMinin 5 месяцев назад

Мне он куда больше нравится, чем раньше эти *ngIf и прочее Хочешь голосовать за контент - тогда гоу на бусти)