СОВРЕМЕННЫЕ JAVASCRIPT ПРИЛОЖЕНИЯ

Frontend приложение "Планировщик"
на 2 реализациях: React и Angular

- Полный цикл работы приложения frontend + backend
- Вызовы RESTful сервисов с помощью реактивного кода
- Пользователи и безопасность с помощью OAuth2
- Сервер авторизации KeyCloak
- Асинхронные вызова микросервисов Spring Cloud
- Языки разработки: Java (backend) и TypeScript (frontend)

 
ЗАВЕРШЕНИЕ ФУНКЦИОНАЛА РАЗРАБОТКИ
Комплект fullstack web

Данный курс является логическим завершением всей цепочки fullstack web, который вы можете пройти с нуля (или выборочно отдельные темы, которые не знаете, например OAuth2)

Если вы проходили все последовательно с первого курса и до текущего - то сейчас пришла пора завершить весь цикл разработки и связать все с одно целое:
- backend
- frontend
- RESTful сервисы
- безопасность OAuth2
- микросервисы Spring Cloud

В текущем курсе вы пройдете frontend технологии:

React

Самый популярный веб фреймворк для создания веб приложений (frontend). Использует язык TypeScript и множество готовых библиотек. Будете вызывать RESTful сервисы с защитой OAuth2

Angular

Реализация на еще одном популярном фреймворке. Предоставляет готовые решения для создания как небольших, так и крупных веб приложений. Отличие от React - многое доступно "из коробки"

TypeScript

Язык разработки, основанный на Java Script, но более строгий и типизированный. Будете изучать сразу по ходу создания приложения на практике. Слишком сложные структуры использовать не будем, чтобы не запутаться

Bootstrap

Разметка страницы, создание responsive дизайна, использование сеточной системы и готовых селекторов CSS. Используется во всех веб приложениях, где требуется мобильная верстка.

RxJS

Реактивный стиль создания кода, который поддерживается в Angular сразу "из коробки" - асинхронные вызовы, уменьшение кода.

Git/GitHub

Хранение версий кода/проекта в локальном и удаленном репозиториях, связывание со средой IntelliJ IDEA Ultimate

Мобильная верстка

Любое веб приложение должно уметь открываться на мобильных устройствах и корректно отображаться (компоненты, разметка)

SSL/HTTPS

Шифрование канала для безопасной передачи данных, применяется в любом крупном веб приложении.

ВСЕ НЕОБХОДИМОЕ ДЛЯ НОВИЧКОВ

СОВРЕМЕННЫЕ ТЕХНОЛОГИИ В ОДНОМ ПРОЕКТЕ

В данный момент - весь пакет курсов fullstack web (включая и текущий frontend) - это наиболее полные материалы на русском языке, которым трудно найти аналоги интернете.

Это отмечают все ученики.

Все современные технологии собраны в одном месте. С этими знаниями вам будет легче устроиться в крупную компанию.

 

ФРЕЙМВОРК

Что такое React?

Скорее всего вы слышали об этом фреймворке, на котором можно создавать любые типы приложения (веб, мобайл, десктоп)

Он создан компанией Facebook и использует язык TypeScript (тоже изучите).

Вы будете использовать React для создания приложения "Планировщик", который вызывает RESTful микросервисы с защитой OAuth2 (access token и пр.)

 

ФРЕЙМВОРК

Что такое Angular?

Еще один популярный фреймворк на основе Java Script, который нравится новичкам, потому что в нем многое уже доступно "из коробки" и не надо ничего подключать.

Пользуется большой популярностью и периодически обгоняет React в трендах.

Но если React также активно используют и для мобильных приложений, то Angular в основном только в веб.

Вы можете пройти обе технологии

Если вам нужен только например React - сможете пройти блок React. Либо только Angular.

А можете и то и другое, потому что знание обеих технологий будет выгодно вас отличать на рынке труда.

TypeScript/JavaScript

Частый вопрос от учеников

В React и Angular используется язык TypeScript, который легко можно выучить, если знаете Java. TypeScript основывается на старом популярном языке Java Script, но добавляет в него возможности ООП и многое другое. 

Если вы не знаете JavaScript - ничего страшного, самое главное, чтобы вы знали хотя бы Java. А остальное уже пройдете в данном курсе.

Главное у вас есть знания ООП и опыт разработки проектов.

Также вы научитесь создавать реактивный код, который сможет вызывать RESTful сервисы асинхронно (параллельно).

 

НАЧАЛЬНАЯ ПОДГОТОВКА

КАКИЕ ЗНАНИЯ ВАМ НУЖНЫ ДЛЯ ДАННОГО КУРСА?

Напоминаю, если вы не проходили всю цепочку fullstack web и сразу хотите стартовать с этого курса, то у вас должны быть предварительные знания:

1

Основы разработки на Java (ООП и пр.) + БД

Без знаний ООП и проф. кода вы не сможете создавать и разбирать код, который работает на backend (и соединяется с PostgreSQL)

2

RESTful и микросервисы на Spring Cloud

Чтобы правильно организовать RESTful сервисы и разбить их на части - будем использовать микросервисы.

3

Безопасность и пользователи на OAuth2/KeyCloak

Это нужно знать, чтобы защитить RESTful сервисы от неавторизованных запросов и отправлять данные только разрешенным пользователям

Здесь вы будете создавать только frontend

Частый вопрос от учеников

Если вы хотите пройти ТОЛЬКО этот курс и не проходили предыдущие из комплекта fullstack web - то вам придется самостоятельно разбирать исходные коды:
- RESTful сервисы на SpringBoot
- микросервиные модули на Spring Cloud + Gateway
- код на Java (и по желанию - на Kotlin) для backend сервера
- сервер авторизации KeyCloak - как он работает и его настройки
- механизмы работы

Подразумевается, что вы это уже все знаете, раз дошли до этого шага. Иначе советую вернуться и проходить все с нуля, чтобы не оставалось пробелов.

Вы получаете готовые проекты в IntelliJ IDEA, которые нужно будет разбирать самостоятельно (для этого там указаны подробные комментарии)

ИСХОДНИКИ

Готовые проекты для вызова из frontend

В текущем курсе вы разработаете проект frontend на 2-х фреймворках (React/Angular).

Этот проект будет использовать все предыдущие наработки (RESTful сервисы, OAuth2 и пр.)

Т.е. в текущем курсе вы с нуля будете разрабатывать только frontend, а все остальное уже получит в готовом виде (проходили в прошлых курсах fullstack web)

Исходные коды и проекты

Все исходные коды (проекты) будут доступны на каждом шаге. Сможете просто их открывать и запускать.

Но лучше самому с нуля набивать весь код и команды, чтобы лучше запомнить.

  • Готовые запросы
  • Решения и проекты
  • Дампы данных
  • Все необходимое
 

ВИДЕО ПРОЕКТА

КАКОЕ ПРОЕК РЕАЛИЗУЕТЕ НА ANGULAR И REACT?

Основной функционал приложения - работа с задачами, создание категорий, поиск и многое другое.

Вы будете заходить под своей учетной записью и видеть только свои задачи.

Для этого нужно будет создавать свою учетную запись и подтверждать ее через почту (как в реальных приложениях).

Полный функционал можно посмотреть на демо-видео.

Полный рабочий функционал приложения, который можно использовать для себя

Сможете кастомизировать и изменять внешний вид по своему усмотрению

Анимации и JS-переходы для более плавной работы UI (повышение удобства)

Связь пользователей и приложения через OAuth2 и KeyCloak

Применение access token и refresh token для авторизации запросов на RESTful backend

Защита приложения через CSRF, XSS, CORS и различные настройки Spring Security

Цикл активации и регистрации пользователя (ссылка из письма, сброс пароля)

Безопасный обмен данными между JS приложением и Resource Server

Мобильная верстка приложения для работы со смартфонов

Защита RESTful запросов от мошенников

1

Все запросы из Angular/React будут работать с OAuth2

Перед тем, как делать запрос - нужно будет сначала получить access token, чтобы с ним уже обращаться к backend

2

Защита от анонимных запросов

Без обмена данными с KeyCloak - JS приложение не сможете выполнять запросы

3

Авторизация пользователя

Обязательно требуется войти под своим аккаунтом, чтобы получить access token - только после этого будут выполняться запросы

Сброс пароля, активация пользователя

1

Работа с почтой

Все действия с пользователем будете выполнять с уведомлением: активация, сброс пароля, регистрация и любые другие действия.

2

Spring Mail + React/Angular

Для работы с почтовым API - используется готовая библиотека Spring Mail, которая имеет гибкие настройки и многое другое.

3

Функционал KeyCloak

Многие функции будете просто напрямую вызывать из сервера KeyCloak

 

ВОПРОСЫ ЧИТАТЕЛЕЙ

Можете отправить любой вопрос, если не нашли тут ответ

Доступ к материалам и поддержке - неограничен. Можете изучать и возвращаться к урокам в любое время.

Да, сможете изучать на любом компьютере, независимо от операционной системы. Можно даже смотреть видео на мобильных устройствах, но сам код придется создавать на компьютере/ноутбуке.

Примерно 2-4 недели, если тратить каждый день по 3-4 часа. Но опять же, все зависит от вас, насколько быстро "схватываете".

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

Все исходные коды есть, по каждому уроку можно будет открывать в IntelliJ IDEA. Но я рекомендую все равно набирать весь код вручную, чтобы лучше запомнить его.

Да. Периодически выходят различные дополнения, связанные с решением недочетов или ошибок, обновляется исходный код. Вся информация будет приходить вам на email.

Да, особенно если покупаете по акции со скидкой - многие так делают. Изучение курса можете начинать в любое время. Вопросы сможете задавать также в любое время.

Если оплачиваете онлайн платежом (картой или электронного кошелька) или через банк - то конвертация происходит автоматически по курсу вашего банка.

Если оплачиваете наличными (через банкомат или терминал) - нужно выполнить конвертацию самостоятельно. Подробная инструкция находится в способах оплаты.

Вам нужно выбрать комплект курса, нажать кнопку покупки и ввести свои данные. На последнем шаге вы сможете выбрать любой удобный способ оплаты, в том числе из Украины.

Да, в течение 3 дней после покупки.

ВОПРОСЫ ПРИ ОБУЧЕНИИ

ГДЕ МОЖНО ЗАДАВАТЬ ВОПРОСЫ?

При прохождении курсов вы сможете в любое время задавать вопросы в группе или лично ментору.

Об авторе

Создатель и преподаватель JavaBegin

Тимур Батыршинов, 36 лет: основатель обучающего центра «JavaBegin». Главный тренер.

За 10 лет обучил более 63000 человек (онлайн и оффлайн).

Опыт разработки — более 16 лет.

Автор более 50 курсов по разным направлениям Java: основы, веб, Android, Spring, Angular и многие другие.

В данный момент занимаюсь обучением и консалтингом.


Telegram

 

ЦЕНЫ И КОМПЛЕКТЫ

Курс выходит 31 июля, поэтому сейчас действует скидка

React реализация

5000 р
2500 р

Исходные коды для React

Поддержка по вопросам

Уроки для React

Осталось: 50 44

Angular реализация

5000 р
2500 р

Исходные коды для Angular

Поддержка по вопросам

Уроки для Angular

Осталось: 50 48

Обе реализации

10000 р
4000 р

Все исходные коды

Поддержка по вопросам

Все уроки

Осталось: 50 41

После оплаты в течение 24-х часов (обычно быстрее) получаете информацию на почту с подробным описанием

Личный кабинет для прохождения всех курсов (платных и бесплатных)

Бесплатные уроки
Поддержка по вопросам
Обновленные и актуальные материалы

ДЛЯ НОВИЧКОВ

Если вы новичок в нашем проекте - можете ознакомиться с бесплатными материалами

Telegram
Служба поддержки

© Copyright 2022 
Все права защищены