Видеокурс "Фреймворк Nuxt.js. Руководство по FullStack-разработке"
4970
1434
0
1434

Видеокурс "Фреймворк Nuxt.js. Руководство по FullStack-разработке"

  • Цена:
    4970

    ПОДРОБНОЕ ОПИСАНИЕ

    Автор(ы): Владилен Минин - Webformyself

    Nuxt.js — это фреймворк высокого уровня, который создан с целью улучшения библиотеки Vue.js. Nuxt — это удобный инструмент, который позволяет быстро и относительно легко создавать действительно сложные приложения. Это основа для более простого создания сложных приложений Vue, не предназначенная для других фреймворков. Он позволяет создавать готовые к работе веб-приложения и призван упростить разработку универсальных и одностраничных сервисов. Nuxt обеспечивает отличную файловую структуру, улучшает роутинг, обеспечивает рендеринг на стороне сервера и позволяет создавать универсальные сервисы.  Вы можете сделать все это самостоятельно, но такой подход всегда требует времени, и иногда для него необходимы действительно хорошие навыки.


    Фреймворк Nuxt.js. Руководство по FullStack-разработке. (Владилен Минин)
    • Блок №1. Введение

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

    • Урок №1. Введение

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

    • Урок №2. Что потребуется

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

    • Блок №2. Nuxt.js. Теория

    Данный блок посвящен теории фреймворка Nuxt.js. В нем вы познакомитесь с Nuxt.js и узнаете про то, что такое Server Side Rendering с JavaScript-фреймворками. В блоке вы узнаете про все основные возможности в Nuxt.js, которые расширяют Vue.js новым, более удобным функционалом.

    • Урок №1. Что такое Nuxt.js

    SSR (Server Side Rendering) - основная «фишка» Nuxt.js, про которую вы узнаете в этом видео.

    • Урок №2. Обзор приложения

    С помощью инструмента Create-nuxt-app вы увидите генерацию нового проекта, где далее будет разобраны все файлы и папки, за что они отвечают.

    • Урок №3. Создание разметки приложения

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

    • Урок №4. Статические роуты

    В ролике вы увидите, как создаются статические роуты.

    • Урок №5. Динамические роуты и валидация

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

    • Урок №6. Ссылки и обработка ошибок

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

    • Урок №7. Как работают Layouts

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

    • Урок №8. Что такое модули

    Модули – это дополняющие функционалом сущности в Nuxt.js. На примере модуля Axios вы увидите, как они работают.

    • Урок №9. Async Data

    Технология SSR усложняет разработку, так как необходимо рендерить контент и на сервере, и на клиенте. Метод AsyncData, возвращающий Promise позволяет крайне удобно загружать контент на сервере.

    • Урок №10. Async Data на практике

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

    • Урок №11. Работа с Vuex

    Nuxt.js по умолчанию включает в себя модуль Vuex и работает с ним особым образом, который и показан в ролике.

    • Урок №12. Метод Fetch

    Помимо методов AsyncData есть метод Fetch, с помощью которого на серверной стороне можно заполнять стейт еще до загрузки клиента.

    • Урок №13. Middleware и защита роутов

    Вы увидите, как с помощью Middleware реализовывать защиту роутов, например от неавторизованных пользователей.

    • Урок №14. NuxtServerInit

    Nuxt добавляет удобный функционал в Vuex: новый Action, который вызывается один раз и только на сервере, который позволяет инициализировать приложение.

    • Блок №3. Front-End. Создание блога

    В данном блоке вы увидите, как создается клиентская часть для будущего приложения. В блоке будет создана только основная часть блога, без панели администратора и с использованием UI-фреймворка Element-UI.

    • Урок №1. Создание проекта

    Вы увидите, как создается проект.

    • Урок №2. Настройка проекта

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

    • Урок №3. Создание Layout

    В этом видео показано как создавать и настраивать общую структуру страницы.

    • Урок №4. Главная страница

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

    • Урок №5. Компонент пост

    В этом видео показано как создается компонент отдельного поста.

    • Урок №6. Страница детального отображения

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

    • Урок №7. Обработка ошибки роутов

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

    • Урок №8. Список комментариев

    Вы увидите, как формируются компоненты комментария и выводится список, состоящий из тестовых данных.

    • Урок №9. Форма добавления комментариев

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

    • Урок №10. Валидация и логика для добавления комментария

    Вы увидите, как настроить валидацию для формы с помощью Element-UI.

    • Урок №11. Анимация при изменении страниц

    В видео показано, как добавлять анимацию на переход роутов.

    • Блок №4. Front-End. Панель администратора

    В блоке вы увидите, как создается клиентская часть для панели администратора, где будет возможность создавать новые посты, редактировать существующие, смотреть статистику, добавлять новых пользователей. В блоке будут реализованы такие элементы, как: загрузка картинок, валидация форм, защита роутов и создание контента постов в формате HTML и MD.

    • Урок №1. Создание структуры страниц

    Вы увидите, как задать Layout для админки, который существенно отличается от основной разметки блога.

    • Урок №2. Меню навигации

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

    • Урок №3. Страница логина

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

    • Урок №4. Создание авторизации с Vuex

    Вся авторизация в приложении будет работать через Vuex и в этом видео будет создана база, для последующей интеграции.

    • Урок №5. Завершение сессии

    В уроке будет создан Middleware, который будет защищать страницы админки от неавторизованных пользователей.

    • Урок №6. Страница детального отображения

    Для того чтобы завершить сессию в уроке будет создана страница, выполняющая данную логику.

    • Урок №7. Обработка ошибок

    Вы увидите, как создать общую шину для обработки всех ошибок приложения через Vuex и последующий вывод ошибок в UI через плагины Element-UI.

    • Урок №8. Добавление пользователей

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

    • Урок №9. Список постов. Часть №1

    В ролике будет создана страница с Data Table, которая будет показывать список уже существующих постов с краткой информацией по комментариям, датой и количеством просмотров.

    • Урок №10. Список постов. Часть №2

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

    • Урок №11. Редактирование поста

    В ролике будет реализована форма, с помощью которой можно будет редактировать уже существующий пост.

    • Урок №12. Создание поста

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

    • Урок №13. Предпросмотр текста в MD и HTML

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

    • Урок №14. Загрузка файла

    Вы увидите, как подключить и настроить компонент загрузки файлов из Element-UI.

    • Блок №5. Back-End

    В этом блоке будет показана реализация серверной части для приложения. Вы увидите, как создается масштабируемая, гибкая архитектура бекенда для будущего блога. Будут разобраны такие элементы, как: работа с базами данных, защита ключей, разделенные роуты от публичного API и  закрытого API, авторизация через JWT-токен, загрузка файлов и многое другое.

    • Урок №1. Декомпозиция файлов

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

    • Урок №2. Создание объекта конфигурации

    Любое приложение требует конфигурации и в этом видео вы увидите, как создается такой объект для Node.js и как подключать разный тип конфига в зависимости от типа сборки: продакш или девелопмент.

    • Урок №3. Подключение MongoDB

    В уроке вы увидите, как подключить и настроить MongoDB к приложению.

    • Урок №4. Роуты, контроллеры, модели

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

    • Урок №5. Авторизация пользователя

    Вы увидите, как создать логику для логина пользователя в систему с помощью JWT Token.

    • Урок №6. Создание пользователя

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

    • Урок №7. Настройка Passport

    Вы увидите, как подключить и настроить библиотеку Passport.js и ее стратегию по работе с JWT Token.

    • Урок №8. Функционал постов

    Начиная с данного ролика, вы увидите, как создаются все эндпоинты для создания, редактирования, удаления постов.

    • Урок №9. Роуты постов

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

    • Урок №10. Загрузка картинки

    В ролике будет создан Middleware позволяющий Express обрабатывать загрузку картинок на сервер.

    • Урок №11. Контроллер постов

    В ролике вы увидите создание всей логики по получению, удалению, редактированию и созданию постов.

    • Урок №12. Функционал комментариев

    В этом видео будет создано все для комментариев: модель, роуты и контроллер.

    • Урок №13. Исправление ошибки

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

    • Блок №6. Интеграция

    На этот момент в приложении уже будет две реализованные части: Front-End и Back-End, которые необходимо связать, что и является интеграцией. В блоке вы увидите, как интегрировать все существующие страницы в админке и основном блоге, как сделать авторизацию и поддерживать сессию.

    • Урок №1. Создание пользователя

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

    • Урок №2. Логин и обработка ошибок

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

    • Урок №3. Обработка 401 ошибки

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

    • Урок №4. Добавление токена к запросам

    Для поддержания сессии необходимо к каждому запросу добавлять JWT-токен, что и будет реализовано в этом видео.

    • Урок №5. Поддержание сессии с токеном

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

    • Урок №6. Создание поста

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

    • Урок №7. Загрузка, редактирование и удаление постов

    Вы увидите, как интегрировать остальной функционал по постам в панели администратора.

    • Урок №8. Вывод постов в блоге

    Начиная с этого видео будет производиться интеграция основного блога с сервером.

    • Урок №9. Добавление комментариев

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

    • Блок №7. Аналитика и графики

    В блоке вы увидите, как реализовать страницу в панели администратора, отвечающую за аналитику внутри блога. Будет показана реализация двух графиков, демонстрирующих аналитику по количеству просмотров и количеству комментариев у постов приложения. Разработка будет вестись как на стороне клиента, так и на серверной части.

    • Урок №1. Настройка и установка графиков

    В видео показано, как подключить плагин для Vue.js, который позволит создавать красивые графики.

    • Урок №2. Формирование данных на сервере

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

    • Урок №3. Создание компонента графика

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

    • Блок №8. Последние штрихи

    Данный блок покажет вам некоторые моменты, которые улучшат приложение, например: создание общего фильтра для отображения даты и времени, исправление консольных предупреждений, добавление Title для каждой страницы, использование ENV-переменных. В конце блока вы увидите, как превратить весь блог в PWA-приложение с офлайн доступом и Service Workers.

    • Урок №1. Исправление Warning в консоли

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

    • Урок №2. Фильтр отображения даты

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

    • Урок №3. Название страниц

    Вы увидите задание названий страниц - Title, в том числе и для SEO-оптимизации. Также вы увидите использование переменных окружения через Nuxt.config.

    • Урок №4. Создание PWA из приложения

    Nuxt.js позволяет делать из любого приложения PWA благодаря удобному модулю, который будет подключен в этом ролике.

    • Блок №9. Деплой приложения

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

    • Урок №1. Защита ключей

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

    • Урок №2. Настройка и установка Heroku

    Для деплоя будет использована система Heroku, которую необходимо для начала установить и настроить, что и будет показано в этом ролике.

    • Урок №3. Настройка приложения

    Перед деплоем необходимо настроить приложение, добавить специальные скрипты, настроить системные переменные.

    • Урок №4. Деплой приложения

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

    • Бонус №1. SEO

    Автор: Владилен Минин

    Этот бонусный курс расскажет вам про удобные инструменты, которые есть в Nuxt.js для внутренней оптимизации под SEO вашего приложения. Будут разобраны темы: добавление мета тегов, генерация Robots.txt и Sitemap.xml, а также добавление редиректов. Вы увидите, как добавлять и оптимизировать ваши страницы для внутренней SEO-оптимизации на примере Meta-тегов и узнаете, какие особенности есть при этом. Вы узнаете про дополнительные инструменты, позволяющие генерировать файлы Robots.txt и Sitemap.xml. Для SEO важны 301 и 302 редиректы, которые легко можно настроить в Nuxt.js с использованием дополнительного модуля.

    • Бонус №2. Премиум курс «NodeJS. Основы»

    Автор: Владилен Минин

    NodeJS – это платформа, которая позволяет писать на языке JavaScript в любом месте, а не только в браузере, и которая добавляет большое количество возможностей языку, такие как: работа с файлами, создание веб серверов и т.д. В результате данного курса вы увидите пошаговое создание приложения на NodeJS, которое будет показывать погоду в любом введенном городе планеты. В процессе создания приложения вы познакомитесь со всеми основными аспектами работы с NodeJS: модульность, NPM, работа с сервером и сторонним API (включая Async Await), создание своего веб-сервера на Express.js, использование языка шаблонизации Ejs, рендеринг веб-страниц, обработка Get и Post запросов и многое другое.

    • Бонус №3. Премиум курс «MongoDB»

    Автор: Владилен Минин

    MongoDB - база данных, которая может работать в приложениях, написанных на платформе Node.js. В данном курсе мы рассмотрим базовые навыки, которые вам потребуются для изучения данной технологии: как установить MongoDB на компьютер и запускать ее как фоновый сервис в системе, для того, чтобы она была доступна.  Также мы увидим несколько консольных команд, которые позволять вам проверять содержимое базы данных. В этом бонусе вы познакомитесь с инструментом Mongoose, который удобно позволяет работать с схемами и моделями в рамках MongoDB.

    • Бонус №4. Премиум курс «WebPack 4+»

    Автор: Владилен Минин

    В данном курсе вы познакомитесь с последней версией технологии WebPack. Это технология для веб-разработки, с помощью которой вы можете собирать весь ваш проект и максимально оптимизировать все составляющие. Вы одновременно можете получить возможность модульности для JavaScript файлов с ES6-синтаксисом, компилировать любой тип файлов, например TypeScript, CoffeScript, Sass, Less, Ecmascript6 и т.д.  В данном бонусе создается приложение, в котором будут показана реализация всех базовых и часто используемых задач при современной веб разработке: модульность, компиляция препроцессоров, компиляция TypeScript, работа с React jsx, Babel, локальный сервер для разработки, работа с любым типом файлов и два режима сборки проекта.


  • Фреймворк Nuxt.js. Руководство по FullStack-разработке. (Владилен Минин)

ПОХОЖИЕ ТОВАРЫ