Основная часть курса
ЦЕЛИ И ЗАДАЧИ БЛОКА
- Данный блок является вступительным, и здесь мы будем рассматривать лишь теоретическую составляющую данного курса.
- Вы узнаете про необходимое программное обеспечение для прохождения курса, про основные технологии и другие важные для погружения в тему вопросы.
- Далее мы рассмотрим уже более детально архитектуру приложения, базовые понятия, основные сущности и принципы взаимодействия элементов на наглядных диаграммах.
- Урок 1. Введение
Данный урок является вводным, и здесь вы узнаете план на текущий курс: какие технологии мы будем применять, как и что вы будете делать.
В данном уроке вы на диаграммах узнаете, что такое REST API. Вы узнаете, чем отличается такой сервер от остальных.
- Урок 3. Архитектура приложения
В данном уроке на диаграмме мы рассмотрим архитектуру будущего приложения и узнаем, из каких модулей оно будет состоять, и как они будут взаимодействовать между собой.
Самый сложный элемент на сервере будет авторизация и регистрация в системе, поэтому мы отдельно рассмотрим, как будет построена авторизация, и как она будет взаимодействовать с клиентом.
В данном уроке мы также на диаграмме рассмотрим, какие модели и какие поля у каждой модели приложения нужно будет реализовать.
В данном уроке вы узнаете про модели, которые мы будем использовать в приложении.
В данном уроке вы узнаете об всех необходимых программах, которые потребуются для прохождения курса.
В данном уроке мы рассмотрим уже готовую рабочую систему для того, чтобы лучше понимать, что именно мы будем разрабатывать.
- Блок 2. Начало разработки
ЦЕЛИ И ЗАДАЧИ БЛОКА
- Мы приступим к пошаговой разработке нашего приложения и сделаем базовую конфигурацию сервера.
- Начнем с настройки Express на Node.js и дальше в процессе секции настроим базу данных MongoDB, парсинг данных от пользователя, создание моделей с помощью Mongoose и определение всех необходимых API-роутов.
- Урок 1. Настройка рабочего окружения
В этом уроке начнется разработка приложения, и мы начнем с настройки текстового редактора и консоли.
В этом уроке мы создадим простой Node.js сервер и проверим как он работает.
- Урок 3. Настройка запуска приложения
В данном уроке мы создадим вспомогательные скрипты, которые впоследствии упростят работу с приложением: запуском, сборкой, установкой модулей.
- Урок 4. Создание роутов авторизации
В данном уроке мы создадим первые роуты, которые будут предназначены для входа в систему и регистрацию.
- Урок 5. Создание всех роутов
В данном уроке мы создадим шаблон всех остальных роутов для работы API.
- Урок 6. Парсинг данных пользователя
В этом уроке мы проверим как сервер читает данные, которые пользователь отправляет и подключим несколько вспомогательных пакетов для работы сервера.
- Урок 7. Подключение утилит
В данном уроке мы подключим еще несколько пакетов, которые сделают работу с сервером более комфортную. Например, пакет для логирования всех входящих запросов на сервер.
В данном уроке мы создадим все модели для дальнейшей работы с MongoDB.
- Урок 9. Подключение MongoDB
В этом уроке мы подключим удаленную базу данных используя сервис JSON Web Token.
- Блок 3. Авторизация. Сервер
ЦЕЛИ И ЗАДАЧИ БЛОКА
- В данной секции мы будем заниматься разработкой только части авторизации на сервере.
- Вы узнаете основные принципы защиты данных пользователя, например, шифрование пароля, основные http-статусы для правильной работы REST API.
- После этого мы разберем систему работы клиент-серверного приложения с помощью JSON Web Token, разберем способы генерации токена и его обработки с помощью библиотеки Passport.js и его стратегии passport-jwt.
- Урок 1. Начало создание регистрации
В данном уроке мы начнем создавать логику регистрации в системе. Начнем с того, что обработаем клиентский запрос и сохраним данные пользователя в базе данных.
- Урок 2. Проверка существующего email
В данном уроке мы поговорим про http-статусы и реализуем проверку для регистрации. Если данные пользователя уже есть в системе, мы будем выдавать ошибку.
- Урок 3. Создание пользователя
В данном уроке мы закончим логику регистрации и у нас будет полностью рабочий первый роут на сервере.
В данном уроке мы реализуем логику входа в систему. Будем разбирать методы генерации токена, сравнение зашифрованных паролей и время жизни сессии.
- Урок 5. Защита роутов с Passport.js
В данном уроке мы разберем как настроить Passport.js для работы с jwt стратегией.
- Урок 6. Универсальная обработка ошибок
В данном уроке мы создадим простую функцию, которая в дальнейшем позволит универсально обрабатывать серверные ошибки.
ЦЕЛИ И ЗАДАЧИ БЛОКА
- Приступим к разработке роутов и контроллеров для всех сущностей в приложении: позиций, категорий и заказов.
- Вы научитесь использовать систему async await для работы с асинхронными запросами к MongoDB для более лаконичного кода, и узнаете, как совмещать разные асинхронные запросы и манипулировать данными в базе данных.
- Также мы разберем способы разных фильтраций и опций, которые позволяют оптимизировать работу с базой данных, и вы узнаете, как правильно работать с файлами и картинками на сервере.
- Урок 1. Получение всех позиций
В данном уроке мы создадим логику, которая позволит по запросу получать список всех позиций из базы данных.
- Урок 2. Функционал позиций
В данном уроке мы реализуем весь оставшийся функционал для позиций: удаление, изменение и создание.
- Урок 3. Получение и удаление категорий
В этом уроке мы реализуем функционал для получения и удаления категорий на сервере.
- Урок 4. Конфигурация загрузки файлов
В данном уроке мы создадим универсальную утилиту-конфигурацию, которая позволит загружать картинки на сервер. Для этого будет использоваться пакет Multer.
- Урок 5. Создание категорий
В этом уроке мы закончим функционал по созданию категорий с загрузкой картинок и их изменению.
- Урок 6. Функционал заказов
В данном уроке мы реализуем все необходимые роуты для работы с заказами.
- Блок 5. Авторизация. Клиент
ЦЕЛИ И ЗАДАЧИ БЛОКА
- В этой части курса мы приступим к разработке клиента на фреймворке Angular 6.
- Данный блок посвящен только блоку авторизации, но в нее будут входить большое количество элементов: создание layout, валидация форм, интерсепторы и перехваты http-запросов, защита роутов и прочее.
- Урок 1. Генерация приложения
Начиная с этого урока, мы начнем разрабатывать клиентскую часть приложения и в данном уроке сгенерируем новый проект с помощью Angular CLI.
- Урок 2. Настройка запуска
В данном уроке мы настроим проект таким образом, чтоб один скрипт запускал и клиентскую часть, и серверную.
В этом уроке мы подключим CSS-тему для проекта.
В данном уроке вы узнаете, как будет взаимодействовать сервер и клиент и выясните, что такое прокси. Далее мы настроим прокси для клиентской стороны.
- Урок 5. Создание роутинга
В данном уроке мы начнем делать клиента и начнем с создания разных страниц и систем роутинга.
- Урок 6. Layout авторизации
В этом уроке сделаем первый layout для системы, который будет содержать в себе шаблон для страниц авторизации.
В этом уроке мы проинициализируем форму для логина с разными сообщениями об ошибках и валидациями.
- Урок 8. Сервис авторизации
В этом уроке мы создадим сервис для авторизации, который будет работать с сервером, работать с токеном и поддерживать авторизацию.
- Урок 9. Страница регистрации
В данном уроке показана реализация страницы регистрации в системе.
- Урок 10. Защита роутов с guard
В этом уроке мы реализуем новый класс, который позволит защищать страницы от неавторизованных пользователей.
- Урок 11. Токен interceptor
В данном уроке вы узнаете, как создать класс interceptor который будет перехватывать любой запрос и модифицировать его так, как мы зададим, например, задавать токен к хедеру в одном месте.
В данном уроке с помощью библиотеки Materialize мы будем визуально отображать ошибки.
- Блок 6. Категории и позиции
ЦЕЛИ И ЗАДАЧИ БЛОКА
- Данный блок посвящен двум самым сложным страницам приложения: категориям и позициям.
- Мы разработаем сложные страницы, в которых совмещены логики по созданию или редактированию элементов.
- Мы реализуем динамическую загрузку изображений на сервер и правильную обработку user flow для динамической и асинхронной работы.
- Урок 1. Создание site layout (макета сайта)
В этом уроке мы создадим новый layout приложения, который будет содержать в себе контент всей системы.
- Урок 2. Добавление страниц
В этом уроке мы добавим необходимые страницы для категорий и позиций, сгенерированные с помощью Angular CLI.
- Урок 3. Страница категорий
В данном уроке мы создадим страницу для вывода всех категорий.
- Урок 4. Реализация flow вывода элементов
В данном уроке мы разберем метод, который будет использоваться во всем приложении, как максимально эффективно выводить список элементов. Сюда включается количество кода, отображение процесса загрузки с помощью лоадера и отображение условия, если элементов нет.
- Урок 5. Добавление и редактирование категорий. Часть 1
В этом уроке мы займемся разработкой страницы добавления и редактирования категорий, где будем реализовывать форму для либо создания, либо редактирования категории.
- Урок 6. Добавление и редактирование категорий. Часть 2
В этом уроке мы закончим разработку страницы добавления и редактирования категорий, где будем реализовывать форму либо для создания, либо для редактирования категории.
- Урок 7. Загрузка картинок
В данном уроке вы узнаете, каким методом можно загружать картинки на сервер через JavaScript, показывать превью и отправлять AJAX-запрос.
- Урок 8. Удаление категории
В этом уроке мы реализуем функционал по удалению уже существующей категории.
- Урок 9. Добавление и редактирование позиций. Часть 1
В данном уроке мы приступим к следующему блоку страницы категорий, и будем разрабатывать форму с модальным окном для создания новых позиций или редактирования старых, с валидацией на стороне клиента.
- Урок 10. Добавление и редактирование позиций. Часть 2
В данном уроке мы закончим блок страницы категорий с позициями.
- Блок 7. Добавление заказа
ЦЕЛИ И ЗАДАЧИ БЛОКА
- Этот блок посвящен одной секции приложения, в которой пользователь сможет добавлять новый заказ в приложение.
- Данная страница будет также являться достаточно сложной, потому что нужно будет реализовать общую область видимости временных наборов данных для двух страниц. Будем разбирать, как это реализуется.
- После этого вас ждут еще некоторые манипуляции с данными для корректного визуального отображения.
- Урок 1. Создание структуры страницы
В данном уроке мы приступим к новой странице заказов, и сделаем основную структуру страницы с внутренним роутингом.
- Урок 2. Модальное окно заказа и навигация
В данном уроке мы создадим модальное окно для добавления заказа и поговорим, как корректно обрабатывать текущий url-адрес для управления «хлебными крошками» в навигации.
- Урок 3. Вывод списка продукции
В данном уроке мы выведем таблицу, в которой будут перечислена продукция, относящаяся к выбранной категории.
В данном уроке мы будем обрабатывать список элементов, которые пользователь добавил к заказу, и будем вычислять общую сумму заказа, защитим отображение от дублирования и подготовим набор данных для отправки на сервер.
- Урок 5. Сохранение заказа
В этом уроке мы реализуем сервис, который на основе данных, собранных в прошлом уроке, будет отправлять запрос на сервер и создавать новый заказ.
ЦЕЛИ И ЗАДАЧИ БЛОКА
- Этот раздел курса рассказывает про одну страницу в приложении, которая позволит просматривать совершенные заказы внутри приложения.
- В данной странице мы рассмотрим такие новые элементы и их реализацию: пагинацию, фильтры и использование плагинов по выбору даты из библиотеки Materialize CSS.
- Урок 1. Создание разметки
В данном уроке мы создадим базовую разметку страницы истории и декомпозируем все на отдельные компоненты.
- Урок 2. Загрузка элементов и пагинация
В данном уроке мы реализуем загрузку всех заказов из базы данных с системой пагинации.
- Урок 3. Отображение заказов
В данном уроке мы создадим модальное окно, которое позволит просматривать, что входило в заказ.
- Урок 4. Разработка фильтра
В этом уроке мы разработаем фильтр, который позволит в дальнейшем управлять списком заказов по условию.
- Блок 9. Страница аналитики
ЦЕЛИ И ЗАДАЧИ БЛОКА
- В данном блоке мы совместим разработку клиентской части и серверной и будем их делать параллельно.
- Мы разработаем последние 2 страницы приложения, которые будут совмещать в себе аналитику по тем данным, которые мы создавали до этого.
- Будут рассмотрены новые элементы и их взаимодействие. Например, графики с библиотекой Chart.js и некоторые плагины из Material Design.
- Урок 1. Вычисление данных аналитики
В этом уроке мы начнем разрабатывать последние страницы системы, и начнем с серверной части, где продумаем логику по вычислению данных для страницы обзора.
- Урок 2. Создание страницы обзора
В данном уроке мы разработаем визуальную часть страницы обзора, где покажем аналитику по заказам.
- Урок 3. Вычисление данных для графиков
В этом уроке мы снова перейдем на серверную разработку и вычислим все необходимые данные для отрисовки графиков по выручке и количеству заказов.
- Урок 4. Подготовка страницы аналитики
В данном уроке мы со стороны клиента подготовим все необходимое для отрисовки графиков на странице аналитики.
- Урок 5. Отрисовка графиков
В данном уроке мы создадим графики по заказам и выручке использую библиотеку Chart.js.
- Блок 10. Запуск приложения на Heroku
ЦЕЛИ И ЗАДАЧИ БЛОКА
- В данном блоке мы уже не будем разрабатывать приложение, однако рассмотрим очень важную тему – развертывание (deploy) нашего fullstack-приложения на удаленный хостинг.
- В качестве хостинга мы выберем бесплатный сервис Heroku, на примере которого мы реализуем данную задачу.
- Урок 1. Подготовка Frontend
В данном уроке мы поговорим, каким образом собирается проект на Angular 6.
- Урок 2. Подготовка сервера
В этом уроке мы добавим необходимые конфигурации на сервер для дальнейшего запуска приложения на серверах Heroku.
- Урок 3. Защита конфигурации
В этом уроке вы узнаете, как на платформе Node.js правильно защитить конфигурацию сервера при заливке проекта в систему контроля версий и использовать разный набор ключей для разработки и продакшн режима.
- Урок 4. Создание проекта в Heroku
В этом уроке мы установим Heroku CLI на компьютер и создадим новый проект.
- Урок 5. Подготовка скриптов и деплой
В данном уроке мы добавим несколько скриптов в файл package.json для системы Heroku чтобы дальше собирать проект в автоматическом режиме.
- Урок 6. Решение проблемы входа в Heroku
В уроке рассматривается очень редкая ошибка, которая может у вас возникнуть при работе на системе Windows с Heroku CLI. Рассматриваем несколько вариантов решения данной проблемы.
В этом уроке мы окончательно запустим приложение на удаленном бесплатном хостинге.
Бонусная часть курса
В бонусных курсах вы найдете ВСЮ необходимую и достаточную теоретическую базу для успешного овладения FullStack-разработкой с полного нуля, включая основы JavaScript, Node.js, Angular, MongoDB и другие современные технологии сайтостроения.
- Бонус 1. Премиум курс по JavaScript
Это теоретический курс, в котором мы от простого к сложному изучим основы языка JavaScript. Просмотрев данный курс, вы изучите: синтаксис языка JavaScript, научитесь работать с переменными, манипулировать различными типами данных, узнаете, что такое выражения, инструкции, функции, объекты, массивы. Научитесь работать со строками, датой и временем, вести математические расчеты. И, конечно же, научитесь выбирать элементы HTML-страниц при помощи JavaScript, что позволит добавлять либо изменять содержимое выбранных элементов. То есть осуществлять взаимодействие скрипта с HTML-страницей сайта.
- Бонус 2. Премиум курсу по EcmaScript 6
Данный курс по ES6 предназначен для тех, кто хочет следовать современным трендам веб-разработки. Речь идет о новой спецификации языка JavaScript – ES6 (EcmaScript 6). Данная спецификация привнесла большое количество нововведений в язык, которые мы с вами подробно будем рассматривать в этом курсе. Мы начнем с настройки окружения с помощью Webpack, для того, чтобы компилировать язык в старую спецификацию ES5, для того, чтобы люди, работающие в старых бразуерах, могли пользоваться тем функционалом, что мы напишем. Ну а если вы работаете в современных браузерах, то у вас все будет поддерживаться нативно. После мы разберем все функции, которые нам привнес ES6, начиная от переменных и классов, и заканчивая промисами и генераторами. Также мы разберем, как преобразуются некоторые фичи ES6 в ES5, и реализуем несколько из них, чтобы понимать, как оно работает.
- Бонус 3. Премиум курс по Node.js
Данный курс предназначен для тех, кто уже знаком с основами JavaScript, но никогда не работал с такой платформой как NodeJS. Курс будет полезен тем, кто хочет повторить и научиться работать с серверным JavaScript. В курсе мы будем изучать NodeJS с самых основ: от установки данного инструмента на компьютер до создания собственного веб-сервера. Вы узнаете, как работать с пакетным менеджером NPM, узнаете про модульность JavaScript конструкций, про файл package.json, работу с файлами через JavaScript и многое другое. Все темы будут разобраны на практике и вы увидите, как реализовывать тот или иной функционал.
- Бонус 4. Премиум курс по MongoDB
MongoDB – это база данных, которая может работать в приложениях, написанных на платформе Node.js. В данном курсе мы изучим базовые навыки, которые вам потребуются для изучения данной технологии – мы подробно рассмотрим, как установить MongoDB на компьютер и запускать ее как фоновый сервис в системе для того, чтобы она была доступна. Также мы изучим несколько консольных команд, которые позволят вам проверять содержимое базы данных. В этом бонусном курсе мы также рассмотрим инструмент Mongoose, который удобно позволяет работать со схемами и моделями в рамках MongoDB.
- Бонус 5. Премиум курс по Git и Github
В данном курсе мы рассмотрим работу с системой контроля версий Git. Узнаем, как ею пользоваться и как использовать этот инструмент для командной разработки. Git – это популярная система контроля версий и совместной разработки проектов с открытым исходным кодом. С помощью Git вы можете отслеживать изменения в исходном коде своих проектов, возвращать предыдущие версии в случае критических ошибок, а также делиться своим кодом со всеми желающими и принимать от них исправления. Контроль версий позволяет вам посмотреть изменения на любом этапе разработки, а также вернуться к любому моменту. Но это не совсем так. Изменения сохраняются в виде коммитов. По-русски – фиксация. Вы делаете начальный коммит, чтобы сохранить начальное состояние проекта, а затем тоже самое делаете для каждого изменения. Это работает как снимки состояния. Git – это мощная и сложная распределенная система контроля версий. Понимание всех возможностей Git открывает для разработчика новые горизонты в управлении исходным кодом. Плюсы Git становятся очевидны, когда работаешь над большим проектом, который уже частично готов, а часть функционала еще дорабатывается. Git очень удобен при командной работе, где каждый разработчик делает свою часть работы, каждый в своей ветке, а при объединении их работы ветки сливаются в одну и получается готовый проект.
- Бонус 6. Премиум курс по TypeScript
В данном курсе будем рассмотрен такой язык программирования как TypeScript. TypeScript – язык программирования, разработанный компанией Microsoft для того, чтобы вести более комфортную веб разработку на языке JavaScript. Typescript по своей сути просто абстрактная обертка над языком JavaScript, которая вводит специальные возможности, с помощью которых можно вести более комфортную разработку. TypeScript включает в себя полную спецификацию EcmaScript 6 – новые возможности, например, стрелочные функции, классы, генераторы и многое другое. Самое основное преимущество языка – ввод в язык строгой типизации, с помощью которой на этапе разработки можно избежать большого количества ошибок и упростить разработку. TypeScript вводит такие понятия как интерфейсы, енумы, нэймспейсы, абстрактные классы, сложные типы, генерики и многие другие возможности, которые будут рассмотрены в данном курсе.
- Бонус 7. Премиум курс по RxJS
Это очень мощная библиотека, которая пропагандирует реактивный подход программирования и позволяет крайне комфортно работать с асинхронными операциями. А так как весь JavaScript работает с событиями и асинхронными операциями, то применение данной библиотеки позволяет очень сильно оптимизировать приложение и упростить код. RxJS стала настолько популярной, что вполне вероятно, что она будет включена в спецификацию языка, то есть станет его нативной частью. В данном курсе мы будем разбирать все примеры, используя последний синтаксис JavaScript - ES6. В процессе изучения курса мы затронем все основополагающие моменты, которые присутствуют в библиотеке – начиная от способов создания стрима и заканчивая обработкой данных, ошибок и дочерних классов. Результатом прохождения данного курса будет мини-приложение, которое будет делать асинхронные запросы к удаленному API серверу социальной сети «ВКонтакте». На его примере мы рассмотрим, как можно применить некоторые функции библиотеки на реальном приложении и как они сильно упрощают понимание и написание кода.
- Бонус 8. Фундаментальный видеокурс «Angular 4 с Нуля до Профи. Полное руководство для современной веб-разработки»
Это новейший всеобъемлющий курс от издательства WebForMyself, который отдельно продается на нашем сайте по цене 6470 рублей. Все покупатели курса «FullStack-Мастер. Разработка CRM-системы на Node.js, Express, Angular 6» получают этот видеокурс абсолютно БЕСПЛАТНО! Angular — это относительно новый и один из наиболее перспективных JavaScript-фреймворков с открытым исходным кодом. А создателем его является мировой лидер в инновациях и стандартах веб-разработки – компания Google. Прежде всего, он нацелен на разработку SPA-решений (Single Page Application) – одностраничных браузерных приложений на основе MVC-шаблона, а также упрощение тестирования и разработки. Несмотря на многообразие и обширную функциональность фреймворка, он достаточно прост в изучении и имеет не высокий порог входа в плане предъявляемых требований к начальным знаниям по его освоению – по сравнению со многими подобными решениями. Angular состоит из модулей. Из набора необходимых модулей и строится наше полностью готовое приложение, которое мы с полного нуля будем разрабатывать в обучающем курсе. В структуре Angular также присутствуют и компоненты. Компоненты отвечают за внешний вид и за взаимодействие с пользователем. Компоненты – это часть пользовательского интерфейса, они представляют основные «строительные блоки» приложения Angular. Идея компонентов состоит в том, чтобы разделить пользовательские интерфейсы на составные части. Angular предоставляет такую функциональность, как двустороннее связывание, позволяющее динамически изменять данные в одном месте интерфейса при изменении данных модели в другом. Так же в Angular присутствуют шаблоны, маршрутизация и так далее. Данный курс содержит в себе более 30 часов обучающих материалов, которые последовательно и очень подробно научат вас самым актуальным технологиям на текущий момент и которые будут актуальными ближайшие несколько лет. Курс полностью охватывает весь набор знаний по данной технологии… Практике предшествует 12 теоретических блоков (а это ни много ни мало 80 видеоуроков! ), где максимально подробно разобраны и систематизированы в виде пошаговой целостной системы все тонкости фреймворка на различных примерах. Помимо самой технологии в курс входит 6 бонусных курсов, которые позволят более детально понять материал и снизят порог вхождения для старта освоения. Мы начнем с самых основ (в виде Node.js и 6 бонусных курсов для понимания современной инфраструктуры) и закончим созданием с нуля полностью рабочего реактивного приложения-сервиса «Домашняя бухгалтерия», где вы увидите все шаги по его созданию.
- Бонус 9. Запуск на VPS с доменом
В данном бонусном блоке мы рассмотрим, как сделать развертывание (deploy) Fullstack-приложения уже на любой хостинг, который вы сможете приобрести. Начиная с покупки сервера, вы увидите все шаги, которые потребуется совершить для того, чтобы запустить приложение удаленно и подключить к нему домен так, чтоб система работала как отдельный обычный сайт.
3D - моделирование (319)
Бизнес и заработок (416)
Графика и видео (449)
Графический дизайн (93)
Дети и их родители (84)
Духовные практики (20)
Женщина и мужчина (37)
Здоровье и спорт (192)
Инвестиции и финансы (290)
Иностранные языки (28)
Компьютер и программы (103)
Личностный рост (110)
Маркетинг и реклама (143)
Музыка и звука (21)
Программирование (92)
Работа и карьера (19)
Создание сайтов и блогов (296)
Строительство и ремонт (116)
Хобби и увлечения (158)
Разные курсы (1)
