Создаем 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

КОМЕНТАРІ • 97

  • @VladilenMinin
    @VladilenMinin  6 місяців тому +7

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

  • @maratgumerov4375
    @maratgumerov4375 6 місяців тому +1

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

  • @dinliri472
    @dinliri472 5 місяців тому

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

  • @klaudianext6118
    @klaudianext6118 6 місяців тому +1

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

  • @MrRiseful
    @MrRiseful 6 місяців тому +31

    Лайк за Angular!

    • @VladilenMinin
      @VladilenMinin  6 місяців тому +16

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

  • @sergeyf4256
    @sergeyf4256 5 місяців тому

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

  • @user-iy7rm7dt8x
    @user-iy7rm7dt8x 5 місяців тому +3

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

  • @Ruslan93Nazarov
    @Ruslan93Nazarov 4 місяці тому

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

  • @omit_code_bugs
    @omit_code_bugs 5 місяців тому

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

  • @johnd1431
    @johnd1431 6 місяців тому

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

  • @tuku_mann
    @tuku_mann 5 місяців тому

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

  • @CrazyPrawn
    @CrazyPrawn 4 місяці тому

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

  • @YakushevEV
    @YakushevEV 6 місяців тому +1

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

  • @serenitiSever
    @serenitiSever 6 місяців тому +5

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

  • @Bukwau
    @Bukwau 5 місяців тому

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

  • @user-tc1rz4mh3o
    @user-tc1rz4mh3o 6 місяців тому +3

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

  • @alexl7345
    @alexl7345 3 місяці тому +1

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

  • @user-zz3yh1ko6y
    @user-zz3yh1ko6y 6 місяців тому +2

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

  • @user-wr3dz2op1t
    @user-wr3dz2op1t 6 місяців тому +3

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

  • @RubikElevator
    @RubikElevator 6 місяців тому +2

    Класс!!❤

  • @krakanosh
    @krakanosh 4 місяці тому +4

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

    • @nik55580
      @nik55580 4 місяці тому

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

  • @riyazvagapov1449
    @riyazvagapov1449 6 місяців тому

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

  • @konstantinov_it
    @konstantinov_it 6 місяців тому

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

  • @roma_fek
    @roma_fek 6 місяців тому +4

    Ура ангуляр!

  • @igorbond2823
    @igorbond2823 5 місяців тому

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

  • @user-em1pb4qc4w
    @user-em1pb4qc4w 6 місяців тому +1

    спасибо ❤

  • @user-ed8eb6cx7o
    @user-ed8eb6cx7o 3 місяці тому

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

  • @ArgumentX1
    @ArgumentX1 2 місяці тому

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

  • @frontend_coder
    @frontend_coder 6 місяців тому

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

  • @mansur_terla
    @mansur_terla 6 місяців тому

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

  • @evgenfadeev9157
    @evgenfadeev9157 5 місяців тому

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

  • @user-eu8kf1xb9h
    @user-eu8kf1xb9h 6 місяців тому

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

    • @SONCE-DEV
      @SONCE-DEV 5 місяців тому

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

    • @user-dr8bp1ln2x
      @user-dr8bp1ln2x 4 місяці тому +1

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

  • @user-rr2sj4qc4p
    @user-rr2sj4qc4p 2 місяці тому

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

  • @winterofhell
    @winterofhell 5 місяців тому +1

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

    • @mstrgrave
      @mstrgrave 4 місяці тому +1

      ts, react/vue + nextjs

  • @TAXIENJOYER
    @TAXIENJOYER Місяць тому

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

  • @skarabei2303
    @skarabei2303 6 місяців тому +1

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

  • @anzor3219
    @anzor3219 Місяць тому

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

    • @dmitryavdoshin9539
      @dmitryavdoshin9539 Місяць тому

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

  • @tim.wonderer
    @tim.wonderer 6 місяців тому +2

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

    • @VladilenMinin
      @VladilenMinin  6 місяців тому +4

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

    • @user-kn8nl4lv5y
      @user-kn8nl4lv5y 6 місяців тому +3

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

    • @mariaangelova2118
      @mariaangelova2118 6 місяців тому

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

  • @jmksm
    @jmksm 6 місяців тому +3

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

  • @user-qc8ic8tb3x
    @user-qc8ic8tb3x 5 місяців тому

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

  • @VladVeninTV
    @VladVeninTV 6 місяців тому +1

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

    • @VladilenMinin
      @VladilenMinin  6 місяців тому +2

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

    • @VladVeninTV
      @VladVeninTV 6 місяців тому

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

    • @serenitiSever
      @serenitiSever 6 місяців тому

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

  • @elevaalex1225
    @elevaalex1225 6 місяців тому

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

  • @artofit
    @artofit 6 місяців тому +1

    LOOKS LIKE KILLA!

  • @BREDOVOSTI
    @BREDOVOSTI Місяць тому

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

  • @ZenithDreamscape
    @ZenithDreamscape 6 місяців тому

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

    • @VladilenMinin
      @VladilenMinin  6 місяців тому +1

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

    • @ZenithDreamscape
      @ZenithDreamscape 6 місяців тому

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

  • @user-em1pb4qc4w
    @user-em1pb4qc4w 6 місяців тому +9

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

    • @sergeyf4256
      @sergeyf4256 5 місяців тому

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

    • @user-uw9xp8en3v
      @user-uw9xp8en3v 4 місяці тому

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

  • @mariaangelova2118
    @mariaangelova2118 6 місяців тому

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

    • @user-rr2sj4qc4p
      @user-rr2sj4qc4p 2 місяці тому

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

  • @1311avenue_
    @1311avenue_ 3 місяці тому

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

  • @ilnurryazhapov9377
    @ilnurryazhapov9377 6 місяців тому +3

    лайк

  • @freetime7742
    @freetime7742 6 місяців тому +1

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

    • @VladilenMinin
      @VladilenMinin  6 місяців тому

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

    • @serenitiSever
      @serenitiSever 6 місяців тому

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

    • @mariaangelova2118
      @mariaangelova2118 6 місяців тому

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

    • @serenitiSever
      @serenitiSever 6 місяців тому

      😅😂​@@mariaangelova2118

  • @Dmitry-cb7wl
    @Dmitry-cb7wl 3 місяці тому

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

  • @artemz9054
    @artemz9054 6 місяців тому

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

  • @yurass97
    @yurass97 3 місяці тому

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

    • @user-lu3ew4dk6j
      @user-lu3ew4dk6j 3 місяці тому

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

    • @user-rr2sj4qc4p
      @user-rr2sj4qc4p 2 місяці тому

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

    • @PashokRibakov
      @PashokRibakov Місяць тому

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

    • @user-sm1rq4fo8g
      @user-sm1rq4fo8g 6 днів тому

      Там в логе выбивает ошибку "BackButton is not supported in version 6.0", как это пофиксить - хз

  • @user-dr8bp1ln2x
    @user-dr8bp1ln2x 4 місяці тому

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

  • @AlenaRisk.
    @AlenaRisk. 5 місяців тому +1

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

    • @rudolfsikorsky7900
      @rudolfsikorsky7900 5 місяців тому +1

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

  • @user-dl7vt1ub1k
    @user-dl7vt1ub1k 3 місяці тому

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

  • @bannnnnn
    @bannnnnn Місяць тому

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

  • @povdata
    @povdata 4 місяці тому +1

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

  • @Maratreason
    @Maratreason 6 місяців тому +2

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

    • @VladilenMinin
      @VladilenMinin  6 місяців тому +2

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

  • @bonnaz.market
    @bonnaz.market Місяць тому

    Как с вами связаться ?

    • @VladilenMinin
      @VladilenMinin  Місяць тому

      В телеграмме в комментах