Автор(ы): Виктор Гавриленко
В данное время фреймворки занимают ключевую роль в разработке различных проектов, как простых, так и сложных. Потому как они значительно упрощают и ускоряют процесс разработки, а также избавляют программиста от стандартной рутинной работы, например создание точки входа на сайт, создание ЧПУ, механизма валидации входных параметров, шаблонизатора и механизма отображения информации на экран, организация работы с базой данных, и т. д.
В первой части курса Laravel+Angular. Создание CRM-системы будет заложена основа всего проекта, а именно механизм по сохранению и редактированию данных на стороне сервера. Весь функционал будет построен на базе фреймворка Laravel и это будет готовое REST API для обработки запросов, подготовки данных и формирования специализированных ответов. Будет написано отдельное веб-приложение – панель администратора, которая будет позволять редактировать роли, привилегии и самих пользователей.
Во второй части видеокурса Laravel+Angular. Создание CRM-системы будет создано клиентское приложение на фреймворке Angular, которое будет общаться с серверным приложением посредством REST API. Клиентское приложение будет отвечать за визуальное отображение данных, вывод на экран специальных форм по добавлению информации и отправку полученных данных в Back-End-приложение.
По итогу – работа в портфолио!
Повторяя по шагам за автором курса, вы пройдете все этапы создания современного Full-Stack-приложения в виде одностраничного приложения (Single Page Application): функциональной CRM-системы по управлению клиентами, лидами и задачами.
В первой части курса будет заложена основа всего проекта, а именно механизм по сохранению и редактированию данных на стороне сервера.
Весь функционал будет построен на базе фреймворка Laravel и это будет готовое REST API для обработки запросов, подготовки данных и формирования специализированных ответов.
Будет написано отдельное веб-приложение – панель администратора, которая будет позволять редактировать роли, привилегии и самих пользователей.
Структура Back-End-приложения будет построена по модульному принципу. Весь функционал будет разделен на отдельные модули, каждый из которых будет выполнять определенную задачу во всей системе в целом.
Модуль — это практически самостоятельная единица, в структуре которой будут определены все необходимые составляющие – контроллеры, модели, классы валидации запросов, миграции и прочее.
Большое внимание отведено авторизации пользователей и построению системы ролей и привилегий – это очень важно, ведь в проекте будет работать несколько различных пользователей.
В первом вводном уроке курса будут кратко рассмотрены основные организационные моменты и общая структура будущего проекта. Из данного урока Вы узнаете, какие знания, программное обеспечение и инструменты вам понадобятся для успешного прохождения курса.
Из этого урока вы узнаете, как установить фреймворк Laravel и другие дополнительные пакеты, которые необходимы для разработки будущего проекта, будут показаны особенности загрузки компонента Laravel Pasport. Также в видео будет проведен обзор общей структуры папок фреймворка и рассказано назначение каждой из них.
С этого урока начинается непосредственная работа с кодом проекта. Вы узнаете, как на фреймворке Laravel реализовать модульную структуру, для чего это нужно и какие преимущества получит проект после ее внедрения. Как правило, модуль – это не один файл, но определенный набор файлов и каталогов, которые объединяются общей программной принадлежностью или выполняемой задачей. Поэтому создавать подобные вещи вручную довольно утомительная задача. И, чтобы облегчить этот процесс, в проекте будет создана консольная команда, которая после запуска будет формировать в нужной директории полную структуру будущего модуля.
В этом уроке продолжается разработка консольной команды по созданию каркаса будущего модуля. Вы узнаете, что такое «стабы» и как на их основе создать заготовки под будущие контроллеры, модели или любые другие элементы фреймворка Laravel. Таким образом, по итогам текущего урока, будет реализована готовая консольная команда, которая при запуске создает новый модуль, а значит необходимый набор файлов и папок.
Параметры маршрута фреймворка Laravel по умолчанию располагаются в нескольких файлах, в директории routes. Но данная механика для модульной структуры не совсем подходит, ведь в каждом модуле свои собственные маршруты, которые находятся далеко за пределами указанной директории.
В этом видео будет добавлен специальный сервис-провайдер, который при загрузке фреймворка будет обходить все доступные модули и считывать их параметры маршрутов.
Основная часть проекта – это API, доступ к которому разрешен только для зарегистрированных пользователей. Поэтому в этом видео будет создан первый модуль проекта по аутентификации пользователей как через API, так и через веб-страницу. Из этого урока вы узнаете, как разделяются запросы и данные в одном модуле для запросов по API и через веб.
Аутентификация для веб-проекта требует наличия специальный формы, которая будет открыта для всеобщего посещения и куда можно будет добавить данные и отправить на сервер. Поэтому в этом уроке будет создан общий каркас для публичных страниц проекта и шаблон для отображения указанной выше формы.
Следующий шаг — это определение функционала механизма проверки введенных данных в форму аутентификации и последующий логин пользователя в системе. Вы узнаете, как задать кастомную модель по обработке пользователя в качестве основной модели аутентификации пользователей и где располагается стандартная механика авторизации пользователя во фреймворке Laravel.
В этом видео будет описано API для обработки запроса авторизации пользователя. Из этого урока вы узнаете, как вернуть JSON ответ при возникающих ошибках валидации, как стандартизировать все ответы при обработке запросов, а также, как происходит процесс залогинивания пользователя в Laravel Pasport.
Панель администратора — это неотъемлемая часть любого сайта, именно она предоставляет инструменты по настройке и редактированию контента.
В этом уроке будет создан отдельный модуль по отображению указанного раздела проекта, в котором будет формироваться основной шаблон и реализовано разделение блоков страниц на структурные составляющие.
Главная страница — это точка входа в проект, так как именно с нее начинается работа с сайтом. В этом видео будет выведена главная страница панели администратора, а также добавлен функционал определения локализации исходя из параметров URL-адреса
В текущих двух уроках будет реализован модуль по работе с меню проекта. Меню потребуется как для панели администратора, так и для публичной части, которая будет формироваться фреймворком Angular.
Модуль будет состоять из двух принципиально разных частей. Первая — это обработка и вывод многоуровневого меню в боковой колонке панели администратора. Вторая — возврат элементов меню в качестве ответа на запрос с Front-End-приложения в зависимости от прав пользователя (будет добавлено в следующих уроках).
Из этого урока вы узнаете, как работать с многоуровневым меню и как разделить пункты меню по принадлежности – админка, Fron-End.
В текущих двух уроках будет реализован модуль по работе с меню проекта. Меню потребуется как для панели администратора, так и для публичной части, которая будет формироваться фреймворком Angular.
Модуль будет состоять из двух принципиально разных частей. Первая — это обработка и вывод многоуровневого меню в боковой колонке панели администратора. Вторая — возврат элементов меню в качестве ответа на запрос с Front-End-приложения в зависимости от прав пользователя (будет добавлено в следующих уроках).
Из этого урока вы узнаете, как работать с многоуровневым меню и как разделить пункты меню по принадлежности – админка, Fron-End.
Модуль прав и привилегий пользователей который будет реализован в ходе четырех уроков будет состоять из двух подмодулей — модуль по работе с ролями и модуля по работе с привилегиями.
По итогу будет заложена функциональность создания и редактирования ролей и привилегий в админ-панели, механика по проверке наличия прав для пользователей, которая будет использоваться в других модулях, а также механизм разделения пунктов меню по правам, что позволит возвращать по API только ссылки, которые доступны авторизированному пользователю.
Модуль прав и привилегий пользователей который будет реализован в ходе четырех уроков будет состоять из двух подмодулей — модуль по работе с ролями и модуля по работе с привилегиями.
По итогу будет заложена функциональность создания и редактирования ролей и привилегий в админ-панели, механика по проверке наличия прав для пользователей, которая будет использоваться в других модулях, а также механизм разделения пунктов меню по правам, что позволит возвращать по API только ссылки, которые доступны авторизированному пользователю.
Модуль прав и привилегий пользователей который будет реализован в ходе четырех уроков будет состоять из двух подмодулей — модуль по работе с ролями и модуля по работе с привилегиями.
По итогу будет заложена функциональность создания и редактирования ролей и привилегий в админ-панели, механика по проверке наличия прав для пользователей, которая будет использоваться в других модулях, а также механизм разделения пунктов меню по правам, что позволит возвращать по API только ссылки, которые доступны авторизированному пользователю.
Модуль прав и привилегий пользователей который будет реализован в ходе четырех уроков будет состоять из двух подмодулей — модуль по работе с ролями и модуля по работе с привилегиями.
По итогу будет заложена функциональность создания и редактирования ролей и привилегий в админ-панели, механика по проверке наличия прав для пользователей, которая будет использоваться в других модулях, а также механизм разделения пунктов меню по правам, что позволит возвращать по API только ссылки, которые доступны авторизированному пользователю.
В прошлых уроках был создан модуль по обработке пользователей, но его функциональность была не полная, так как работа в основном сводилась к описанию методов и свойств модели. Поэтому в текущем уроке будут реализованы четыре основные операции CRUD в этом модуле, для запросов по API.
Разрабатываемая CRM-система будет использоваться для обработки лидов. Одним из важнейших параметров лида является источник, то есть откуда пришел этот лид. Поэтому в текущем видео будет реализован модуль и вместе с ним функциональность API по созданию, редактированию и удалению источников лидов проекта.
В следующих пяти уроках будет показана реализация двух ключевых модулей проекта: модуля лидов и модуля комментариев. Два указанных модуля будут работать в паре и обеспечивать добавление и редактирование информации по лиду. Для каждого из модулей будет реализовано API, то есть набор методов, которые будут обрабатывать запросы из клиентской части.
По итогу будут реализованы следующие механики: получение списка лидов в зависимости от статуса, сохранение нового лида, проверка существования лида, обновление лида, добавление комментариев к лиду, создание системных комментариев, получение списка архивных лидов, определение лида как качественного и получение истории комментариев лида.
В следующих пяти уроках будет показана реализация двух ключевых модулей проекта: модуля лидов и модуля комментариев. Два указанных модуля будут работать в паре и обеспечивать добавление и редактирование информации по лиду. Для каждого из модулей будет реализовано API, то есть набор методов, которые будут обрабатывать запросы из клиентской части.
По итогу будут реализованы следующие механики: получение списка лидов в зависимости от статуса, сохранение нового лида, проверка существования лида, обновление лида, добавление комментариев к лиду, создание системных комментариев, получение списка архивных лидов, определение лида как качественного и получение истории комментариев лида.
В следующих пяти уроках будет показана реализация двух ключевых модулей проекта: модуля лидов и модуля комментариев. Два указанных модуля будут работать в паре и обеспечивать добавление и редактирование информации по лиду. Для каждого из модулей будет реализовано API, то есть набор методов, которые будут обрабатывать запросы из клиентской части.
По итогу будут реализованы следующие механики: получение списка лидов в зависимости от статуса, сохранение нового лида, проверка существования лида, обновление лида, добавление комментариев к лиду, создание системных комментариев, получение списка архивных лидов, определение лида как качественного и получение истории комментариев лида.
В следующих пяти уроках будет показана реализация двух ключевых модулей проекта: модуля лидов и модуля комментариев. Два указанных модуля будут работать в паре и обеспечивать добавление и редактирование информации по лиду. Для каждого из модулей будет реализовано API, то есть набор методов, которые будут обрабатывать запросы из клиентской части.
По итогу будут реализованы следующие механики: получение списка лидов в зависимости от статуса, сохранение нового лида, проверка существования лида, обновление лида, добавление комментариев к лиду, создание системных комментариев, получение списка архивных лидов, определение лида как качественного и получение истории комментариев лида.
В следующих пяти уроках будет показана реализация двух ключевых модулей проекта: модуля лидов и модуля комментариев. Два указанных модуля будут работать в паре и обеспечивать добавление и редактирование информации по лиду. Для каждого из модулей будет реализовано API, то есть набор методов, которые будут обрабатывать запросы из клиентской части.
По итогу будут реализованы следующие механики: получение списка лидов в зависимости от статуса, сохранение нового лида, проверка существования лида, обновление лида, добавление комментариев к лиду, создание системных комментариев, получение списка архивных лидов, определение лида как качественного и получение истории комментариев лида.
Для коммерческих проектов довольно важную роль играет аналитика, так как именно она позволяет проанализировать работу и показать, где нужно ввести коррективы. Поэтому в текущих трех уроках будет реализован модуль аналитики лидов, то есть набор методов API, которые будут возвращать список завершенных лидов по каждому менеджеру, с подсчетом некоторых ключевых параметров. Также будет добавлена возможность генерации таблицы формата Excel для более удобного просмотра и анализа данных.
Для коммерческих проектов довольно важную роль играет аналитика, так как именно она позволяет проанализировать работу и показать, где нужно ввести коррективы. Поэтому в текущих трех уроках будет реализован модуль аналитики лидов, то есть набор методов API, которые будут возвращать список завершенных лидов по каждому менеджеру, с подсчетом некоторых ключевых параметров. Также будет добавлена возможность генерации таблицы формата Excel для более удобного просмотра и анализа данных.
Для коммерческих проектов довольно важную роль играет аналитика, так как именно она позволяет проанализировать работу и показать, где нужно ввести коррективы. Поэтому в текущих трех уроках будет реализован модуль аналитики лидов, то есть набор методов API, которые будут возвращать список завершенных лидов по каждому менеджеру, с подсчетом некоторых ключевых параметров. Также будет добавлена возможность генерации таблицы формата Excel для более удобного просмотра и анализа данных.
Модуль тасков (задач) и их комментариев по своей работе очень похож на модуль лидов, поэтому в текущем уроке будет рассмотрены эти два модуля и показаны особенности их работы.
В текущем видео в административную панель сайта будет добавлен очередной раздел по созданию и редактированию пользователей.
В последнем уроке текущей части курса будут подведены итоги по проделанной работе и внесены определенные правки в механизм обработки исключений. Работа с API предусматривает возврат ошибок в определенном формате.
Во второй части курса будет создано клиентское приложение на фреймворке Angular, которое будет общаться с серверным приложением посредством REST API.
Клиентское приложение будет отвечать за визуальное отображение данных, вывод на экран специальных форм по добавлению информации и отправку полученных данных в Back-End-приложение.
В первых уроках второй части будет создан каркас — главный компонент, который будет выступать в роли макета и вмещать в себя вывод основного содержимого: навигации, хедера и контента.
Будет построена система авторизации пользователя и механизмы передачи информации о том, что пользователь авторизирован в запросах к серверу. Мы рассмотрим два способа авторизации пользователя: дефолтный (по умолчанию) и кастомный (написанный вручную).
Будут кратко рассмотрены основные организационные моменты и общая структура будущего проекта.
Вы узнаете, какие знания, программное обеспечение и инструменты понадобятся для успешного похождения второй части курса. Будет выполнена установка фреймворка Angular, кратко будут рассмотрены структура и назначение его элементов, а также установка библиотеки, которая будет отвечать за визуальную часть приложения — Angular Material.
Будет определена основная структурная схема взаимодействия и вывода на экран содержимого компонентов. Будет создан условный родительский компонент, внутри которого будут располагаться необходимые дочерние элементы: навигация, контент и т.д.
Первый в списке дочерних компонентов, который будет отображаться в основном макете проекта — компонент навигационного меню. Он будет последовательно реализован в первых трех уроках.
Меню, которое состоит всего лишь из нескольких ссылок, не такое простое, как кажется на первый взгляд. Ведь данные о ссылках хранятся в Back-End-приложении и доступ к ним разрешается только для авторизированных пользователей. А значит, помимо вывода ссылок на экран, необходимо определить модели принимаемых данных с сервера и описать код по отправке запросов и обработке ответов.
Первый в списке дочерних компонентов, который будет отображаться в основном макете проекта — компонент навигационного меню. Он будет последовательно реализован в первых трех уроках.
Меню, которое состоит всего лишь из нескольких ссылок, не такое простое, как кажется на первый взгляд. Ведь данные о ссылках хранятся в Back-End-приложении и доступ к ним разрешается только для авторизированных пользователей. А значит, помимо вывода ссылок на экран, необходимо определить модели принимаемых данных с сервера и описать код по отправке запросов и обработке ответов.
Первый в списке дочерних компонентов, который будет отображаться в основном макете проекта — компонент навигационного меню. Он будет последовательно реализован в первых трех уроках.
Меню, которое состоит всего лишь из нескольких ссылок, не такое простое, как кажется на первый взгляд. Ведь данные о ссылках хранятся в Back-End-приложении и доступ к ним разрешается только для авторизированных пользователей. А значит, помимо вывода ссылок на экран, необходимо определить модели принимаемых данных с сервера и описать код по отправке запросов и обработке ответов.
При работе Fron-End-приложения постоянно будут отправляться различные запросы к Back-End-приложению, которые могут быть относительно долгими по времени.
В уроке будет показано формирование прелоадера, который будет показываться на экране при отправке любого запроса на сервер.
По итогам текущего урока вы научитесь перехватывать запросы, используя классы Interceptors.
В текущем уроке будет определен маршрутизатор проекта, будет создан специальный класс (guard) для защиты закрытых маршрутов и разработан компонент для будущей системы аутентификации.
Вы узнаете, как защищать маршруты от всеобщего доступа, что такое гарды и с каким данными они работают.
Здесь мы реализуем вывод на экран формы авторизации пользователей. При этом будет создан шаблон компонента, форма вместе с определенными правилами валидации, сервис по отправке данных на сервер, а также механика отправки запроса и обработки ответа. Также вы узнаете, где и в каком виде можно хранить информацию о авторизированном пользователе.
Здесь мы реализуем вывод на экран формы авторизации пользователей. При этом будет создан шаблон компонента, форма вместе с определенными правилами валидации, сервис по отправке данных на сервер, а также механика отправки запроса и обработки ответа. Также вы узнаете, где и в каком виде можно хранить информацию о авторизированном пользователе.
В уроке будет описан функционал передачи токена пользователя в каждом запросе к серверу, тем самым будет полностью завершена система авторизации пользователей в проекте. Вы узнаете, как модифицировать запрос и добавить необходимые заголовки.
Система авторизации, которая была описана ранее в предыдущих уроках, в Back-End-приложении использует написанный нами контроллер модуля Auth. Это некий кастомный метод, который был описан с абсолютного нуля. В текущем видео я хотел бы показать возможность использования стандартного метода обработки запросов, который идет в комплекте с пакетом Laravel Pasport.
В последующих четырех уроках будет реализована форма создания лида или задачи. Одна форма будет использоваться для формирования одной из двух сущностей в зависимости от режима работы, управляемого простым чекбоксом.
При этом будут созданы модели для лидов и задач, а также для вспомогательных элементов, таких как пользователи, источники и подразделения. Будет описан метод кастомной валидации группы из двух полей формы и механизм отправки данных на сервер.
Вы узнаете, как сформировать собственную валидацию для нескольких полей и закрепите умение по работе с формами.
В последующих четырех уроках будет реализована форма создания лида или задачи. Одна форма будет использоваться для формирования одной из двух сущностей в зависимости от режима работы, управляемого простым чекбоксом.
При этом будут созданы модели для лидов и задач, а также для вспомогательных элементов, таких как пользователи, источники и подразделения. Будет описан метод кастомной валидации группы из двух полей формы и механизм отправки данных на сервер.
Вы узнаете, как сформировать собственную валидацию для нескольких полей и закрепите умение по работе с формами.
В последующих четырех уроках будет реализована форма создания лида или задачи. Одна форма будет использоваться для формирования одной из двух сущностей в зависимости от режима работы, управляемого простым чекбоксом.
При этом будут созданы модели для лидов и задач, а также для вспомогательных элементов, таких как пользователи, источники и подразделения. Будет описан метод кастомной валидации группы из двух полей формы и механизм отправки данных на сервер.
Вы узнаете, как сформировать собственную валидацию для нескольких полей и закрепите умение по работе с формами.
В последующих четырех уроках будет реализована форма создания лида или задачи. Одна форма будет использоваться для формирования одной из двух сущностей в зависимости от режима работы, управляемого простым чекбоксом.
При этом будут созданы модели для лидов и задач, а также для вспомогательных элементов, таких как пользователи, источники и подразделения. Будет описан метод кастомной валидации группы из двух полей формы и механизм отправки данных на сервер.
Вы узнаете, как сформировать собственную валидацию для нескольких полей и закрепите умение по работе с формами.
В уроке будет создан компонент для отображения списка добавленных в базу данных лидов. При этом будем описан механизм отправки запроса на сервер, получения ответа и сохранения полученных лидов в публичные свойства компонента. Также будет сформирован каркас будущего шаблона компонента.
Так как компонент по отображению лидов был сформирован в предыдущем уроке, то последующие три урока будут направлены на отображение лидов в колонках, которые соответствуют их статусу. Причем в каждой колонке, а значит и в каждом статусе, формат отображения данных лида будет немного отличаться.
К примеру, во второй колонке будет добавлено время, показывающее насколько часов устарел лид со времени его создания, в третьей коленке особым цветом будут выделяться успешные лиды и т.д. Помимо этого для каждой колонки будут предусмотрены отдельные элементы фильтрации.
Так как компонент по отображению лидов был сформирован в предыдущем уроке, то последующие три урока будут направлены на отображение лидов в колонках, которые соответствуют их статусу. Причем в каждой колонке, а значит и в каждом статусе, формат отображения данных лида будет немного отличаться.
К примеру, во второй колонке будет добавлено время, показывающее насколько часов устарел лид со времени его создания, в третьей коленке особым цветом будут выделяться успешные лиды и т.д. Помимо этого для каждой колонки будут предусмотрены отдельные элементы фильтрации.
Так как компонент по отображению лидов был сформирован в предыдущем уроке, то последующие три урока будут направлены на отображение лидов в колонках, которые соответствуют их статусу. Причем в каждой колонке, а значит и в каждом статусе, формат отображения данных лида будет немного отличаться.
К примеру, во второй колонке будет добавлено время, показывающее насколько часов устарел лид со времени его создания, в третьей коленке особым цветом будут выделяться успешные лиды и т.д. Помимо этого для каждой колонки будут предусмотрены отдельные элементы фильтрации.
Когда лиды успешно показываются на странице, пришло время приступить к функционалу их редактирования. Форма по редактированию лида будет открываться в попапе, а значит при его открытии, необходимо подгружать дополнительные отсутствующие данные: комментарии, источники, подразделения и т.д.
Помимо этого, не достаточно просто изменить данные по лиду, так как когда меняется статус лида необходимо сразу же переместить его в соответствующую колонку.
Если лиду назначается статус «Завершено», то после закрытия попапа редактирования нужно показать другой попап, в котором будет открыта форма определения успешности лида.
Когда лиды успешно показываются на странице, пришло время приступить к функционалу их редактирования. Форма по редактированию лида будет открываться в попапе, а значит при его открытии, необходимо подгружать дополнительные отсутствующие данные: комментарии, источники, подразделения и т.д.
Помимо этого, не достаточно просто изменить данные по лиду, так как когда меняется статус лида необходимо сразу же переместить его в соответствующую колонку.
Если лиду назначается статус «Завершено», то после закрытия попапа редактирования нужно показать другой попап, в котором будет открыта форма определения успешности лида.
Когда лиды успешно показываются на странице, пришло время приступить к функционалу их редактирования. Форма по редактированию лида будет открываться в попапе, а значит при его открытии, необходимо подгружать дополнительные отсутствующие данные: комментарии, источники, подразделения и т.д.
Помимо этого, не достаточно просто изменить данные по лиду, так как когда меняется статус лида необходимо сразу же переместить его в соответствующую колонку.
Если лиду назначается статус «Завершено», то после закрытия попапа редактирования нужно показать другой попап, в котором будет открыта форма определения успешности лида.
В этом уроке будет добавлена возможность создания лида непосредственно из страницы Dashboard. Добавление лидов, как и редактирование, будет производиться в отдельном попапе с последующим добавлением в соответствующую колонку.
В текущем уроке будет описан механизм по получению и отображению лидов, которые находится в архиве. При этом лиды будут показываться не в полном объеме, а порционно, используя постраничную навигацию.
В этом уроке будет описан функционал по отображению детальной информации лида, в попапе, на странице архива лидов.
Последний урок по лидам — это компонент страницы аналитики. Вся аналитика строится на специальном запросе в базу данных, который отправляется Back-End-приложением. Все, что остается реализовать в этом уроке – это вывести данные и сформировать ссылку для скачивания таблицы Excel с детальной информацией по лидам.
Компонент отображения и редактирования информации по задачам по своему принципу работы примерно такой же, как и ранее реализованный компонент лидов. В этом видео будут кратко рассмотрены основные нюансы и отличия уже на готовом рабочем коде.
В данном уроке будет реализован компонент по созданию и редактированию пользователей проекта.
В этом уроке будут подведены основные итоги по всему курсу и внесены некоторые правки по коду.