Это видео недоступно.
Сожалеем об этом.
Создаем Telegram Mini App на Angular 17. С нуля до продакшн деплоя
HTML-код
- Опубликовано: 14 авг 2024
- Облачный сервер для телеграм-приложения: slc.tl/52l7m
Текстовая инструкция: slc.tl/hz0rh
Исходный код: boosty.to/vlad...
Мой телеграм: t.me/js_by_vla...
В честь выхода 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.
Ясность внесена, время сэкономлено. Респект и уважение.
Спасибо за видео! Было бы круто такой же подробный разбор и про VK Mini Apps 😊 а еще если на новом Angular 18 - вообще красота была бы 😅
Спасибо за контент по Angular! мне очень нравится и интересен этот фреймворк. Жалко что так мало качественного контента и обучения этой технологии в Ру сегменте!
Мне нравятся твои видео. С точки зрения быстрого ознакомления с новыми для меня технологиями - то, что нужно.
Спасибо за новый ангуляр! Интересная тема, ещё не делала ничего в телеграмм 😃
C++ и Java. Друзья заставили писать фронт. Спасибо тебе за то что ты есть. Спас.
Описание звучит как лайк, спасибо за контент, пошел смотреть)
Контент топ, не ожидал настолько много полезности!
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
Angular наконец-то !!!
Сделай пожалуйста видос по electron js, очень интересно было бы...👍👍👍
Полностью поддерживаю
То что и хотелось увидеть! Спасибо)
Шикарный туториал, спасибо!
Спасибо! Очень хорошая подача материала.
Ура ангуляр!
Владилен, подскажи, когда планируется обновление курса по ангуляр? К своему стыду скажу, что скачал из инета твой старый курс несколько лет назад и прошел его. Но потом долгое время не разрабатывал на ангуляре, а сейчас вновь появилась необходимость в разработке на ангуляр, но я уже часть изученного забыл + новые фичи появились. Было бы здорово приобрести курс в прежнем формате, но с учетом нововведений платформы.
никогда не писал на angular. Но на первый взгляд он мне очень сильно напомнил blazor со всеми этими инъекциями и движком представлений. Лично сам пользуюсь react
Годноту подвезли!
Добрый день)
Момент с SSL не понял. Когда деплоишь приложение на firebase, он автоматом дает доступ через защищенное соединение? Самостоятельно не нужно подписывать сертификаты?
разобрался. Да, Firebase автоматически предоставляет защищённое соединение. Круто 👍
Уже 17 Angular. С ума сойти как время летит!
Класс!!❤
Здравствуйте подскажите может кто сталкивался устаовил 17 ангуляр, п новый синтаксис не работает, почему так может быть?
Как сделать, чтобы боковой свайп не закрывал miniapp приложение, а делал шаг назад в самом приложении?
В браузере "Опаньки" - то случаем не оператива падает? у меня такая дичь была, два планки из 4 дохли.
помогите с выбором, пожалуйста. что выбрать новичку, который только что выучил javascript? есть выбор пойти учить react, он легче чем ангуляр, но там в целом сложнее найти работу и конкуренция больше. либо же пойти учить typescript + angular, но он по словам многих намного сложнее, но и работу найти яко бы легче. vue js не уверен что понравится, может и попробую, но точно не сейчас.
ts, react/vue + nextjs
Все таки интересно как заставить кнопку назад работать. Пробовал много вариантов, но не отрабатывает корректно
https моя боль - запиши инструкцию плиз
Блин, без стрикта больно смотреть. Реактивности мало (
а что бот с локал хостом приложения нельзя запустить ?
Заметил что подобные tg-боты переодически отлетают на VPS-Selectel неплохо было бы рассмотреть тематику балансировщиков.. что то вроде Network Load Balancer (целевых групп и обработчика) от yandex-cloud .. с точки зрения построения отказоустойчивого приложения.. Незнаю имеется ли данный функционал в Selectel. Спасибо
Владилен, привет.
Я прошёл твой курс на джуна, сейчас прохожу на мидла.
Есть такой вопрос (не по курсу).
У меня на работе такая ситуация, что мне приходится брать на себя обязанности тимлида и у меня в команде уже 2 разраба кроме меня + скоро возможно придут ещё два.
И т.к. у меня нет вообще нет никакого опыта в управлении командой и организации командной разработки, мне приходится максимально быстро учиться этому.
Пока всё идёт хорошо, но приходится очень много перерабатывать.
Есть ли у тебя какие-нибудь материалы по тому, как быть тимлидом, как управлять командой, как взаимодействовать с сокомандниками?
И планируешь ли ты создать курс не только для джунов и мидлов, но и для будущих тимлидов?
Знаю, что ты был тимлидом, думаю тебе есть чем поделиться.
Коммуникативные навыки, навыки наставничество etc. нельзя просто так получить с курса=)
Читаю и жестко ору с этого коммента)
спасибо ❤
А почему ангуляр? Мне кажется, во всяких плагинах для фигмы, телеграма и прочего, важно использовать легковесные решения, чтобы приложение открывалось быстрее. Поэтому я бы либо писал нативно либо воспользовался Svelte или Preact. Использовать ангуляр это прям забивать гвозди тяжелым телескопом.
Приложения в телеграмм можно создовать с помощью Ангуляра!?
VSCode?) Серьезно?))) Почему? Сколько лет был предан WebStorm...
Думаю все дело в том что с подпиской на webstorm после санкций стало все намного сложнее, но я поддерживаю для ангуляре в особенности webstorm маст хэв)
@@sergeyf4256 а разве они не продрлжают дарить подписку россиянам?
Владилен, планируешь ли что-то по реакту. Спасибо
Будет большой курс для начинающего уровня. Если что то продвинутое, то только через Boosty: boosty.to/vladilen
По реакту материала и так выше крыши (культурно говоря). А вот Ангуляр - это дефицит...
@@user-san-chousсогласна на 100%
Занимаюсь беком, хочу выучить html, css, было бы круто если бы ты выпустил курс по html, css
Они есть на канале
увидил, спасибо большое@@VladilenMinin
лайк за Ангуляр! но почему ушел с webstorm ?)
потому что оно лагает в последних релизах
Браво, Красавчик!
Интересно есть ли Viber mini apps или что-то подобное 🤔 Если есть, я уверен что Минин снимет про это видео😊
Сниму про все, что мне интересно. Но вибер не входит в этот список
@@VladilenMinin Жалко😭Я просто для примера мой список мессенджеров и соцсетей ограничен до telegram, vk, viber, whatsapp. Про остальные я только слышал, но никогда не пользовался
У WhatsApp есть API, но нет возможности выводить своё веб-приложение через WebView. Вам понадобиться аккаунт в Facebook и бизнес-аккаунт в WhatsApp. И это по-моему платная возможность. (но это не точно) 🙄😊
Видос понравился. Было интересно. Правда толком нихуя не понятно, но это потому что мой уровень не дотягивает до таких вещей. Я мог бы повторить, но шаг влево, шаг вправо уже тяжело. Я делаю сайты на заказ, в основном одностраничники. Понимаю html, css, js и основы php.
ngrok пробросит локальный хост в большой интернет без деплоя + решит проблему SSL
Привет, Владлен!
У вас полезные видео, и хороший контент.
Было бы интересно посмотреть на проекты в которых вы участвовали или сами разработали?
Ребят, подскажите где найти информацию по автоматизации переводов пользователям? Может вы кодер свяжетесь со мной в тг
Привет, нашел ?
Кнопка "назад" не отрабатывает, почему?
У меня тоже не получается сделать
ну вообще конечно makefile когда у тебя есть npm с кастом скриптами, эт странно. Пчему бы не использовать готовые 3х строчные гитхаб вокфлоу чтобы билдить и заливать свои образы - не понять. Как поднять https - ngrock быстро, а для остальных фришный домен есть на куче сайтов, белый ип дают с тачкой, а letsencrypt + certbot уже давно база. Ну и ручками ставить для демо кшн ок, но научишь маслят плохому. так и будут делать потом, хоть бы ансиблем катнул, да и какие пароли к тачке, ну блин(
Так а че не показал как по итогу то работает
LOOKS LIKE KILLA!
95% ангуляра и 5% методики разработки мини приложения, хотя по названию вроде как акцент должен быть на другом. Надо было как-то баланс найти. А то пришлось смотреть на перемотке, чтобы должаться чего-то именно по боту и приложению.
За сколько создашь на заказ?
Так и не заработала кнопка назад, открывается пустая страница, есть кто разобрался в чем проблема?
Видно что Владилен и сам не разобрался.😅 Там в последней части видео видно как быстро нажимает назад и там пусто. Я быстро потестил, если иметь свою кнопку для редиректа, то всё работает, а вот если через кнопку телеграма, то нет. Так что можно так выйти из ситуации. А вот чтобы прям кнопка телеграма заработала хз. Возмножно ChangeDetection некоректно работает, но нужно тестить, что не очень удобно 😢
У меня тоже не получается, пробовал разные решения. Такое ощущение что телеграмм не обновляет страницу, переходя по ней назад и поэтому не грузится компоненты
@@user-rr2sj4qc4p помогло в методе goBack() в product.component.ts заменить this.router.navigate(['/']); на history.back();
Там в логе выбивает ошибку "BackButton is not supported in version 6.0", как это пофиксить - хз
лайк
О и тут ты)
У меня не запускается код по команде 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
"Я построю свой лунапарк - с блэкджеком и девками!, хотя к чёрту девок"
как без девушек то)
@@VladilenMinin порой без них спокойнее, в компании друзей (мужчин).
Это не только моё наблюдение, зачастую идиллия в мужской компании нарушается за счёт появления в компании девушки, которая и создаёт хаос.
Чтобы не получать в свой адрес штрафы за дискриминацию равных прав женщин, у моряков появилась "примета"
"Женщина на корабле к беде" - если не верите, вспомните по Титаник, непотопляемый лайнер.
Или от чего погиб Александр Пушкин 🤗😏
Я ни на что не намекаю, это всё статистика, сука такая...
@@serenitiSeverпокажу своим коллегам мужчинам 😅😅😅
😅😂@@mariaangelova2118
😢я так понимаю это не для новичков контент?
Вообще не для новичков.
Сначала у меня не заработало отображение моего мини-приложения в ТГ, любой другой сайт отображается, а мой на Firebase - нет (просто в браузере работает). Предполагаю что надо что-то подкрутить в Firebase чтобы оно отдавало контент не только браузеру, но не знаю что.
Потом посыпались ошибки компиляции. Не знаю что это: версия ES, версия TS, подкрученный линтер?
В общем, повторить проект у меня не получилось, остаётся только смотреть ролик как развлекалочку....
Вообще, ощущение что Владилену наскучило обучать: качество подачи катастрофически просело по сравнению с тем что было раньше. В закладках лежит ещё Реакт-2024, не знаю стоит ли смотреть.
Видио 4года ппц
Ангуляры неакткальны могут стать
Ого, только хотел написать в комменте почему не используешь сигналы, оказывается используешь! Ой хорош! А как тебе новый синтаксис? @if(), @for(), @switch(). Ну красиво же! Делай пожалуйста больше контента по Ангуляр. По NGRX, по Nx.
Мне он куда больше нравится, чем раньше эти *ngIf и прочее
Хочешь голосовать за контент - тогда гоу на бусти)
А почему исходный код за деньги?) Чего за хня такая?
Чувак, тебя уже давно никто не воспринимает
Как с вами связаться ?
В телеграмме в комментах