udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
Создание новостной ленты с Nuxt 2 и Firestore
Build a News Feed with Nuxt 2 and Firestore
★5 (всего оценок - 4)
Продолжительность
2 ч 44 мин
Категория
VueКоличество уроков
37 Видео
Дата добавления
14 июн. 2019 г., 09:01
Язык
Английский
Дата выхода
8 апр. 2019 г., 11:52
Дата обновления
29 апр. 2026 г., 03:33
Хотите научиться создавать полноценные динамические веб‑приложения на Nuxt 2 и Firestore? В этом курсе вы шаг за шагом создадите современный новостной агрегатор с реальным функционалом, работающим в режиме реального времени. Идеально подходит разработчикам, стремящимся освоить фулстек‑подход во Vue‑экосистеме.
Что вы создадите в этом курсе
Вместе мы разработаем новостную платформу NuxtNews — удобную, гибкую и высокопроизводительную ленту, где пользователи смогут просматривать свежие новости со всего мира, искать и фильтровать заголовки, взаимодействовать с публикациями и сохранять понравившиеся материалы.
Основные возможности создаваемого приложения
- Живая лента новостей с динамической загрузкой свежих заголовков.
- Поиск по ключевым словам, датам, категориям, странам и источникам.
- Отдельные страницы для каждого заголовка с комментариями и лайками.
- Система закладок для личной новостной подборки пользователей.
- Полная аутентификация с JWT и Firebase Auth REST API.
Практические навыки, которые вы освоите
Курс охватывает как фронтенд‑, так и бэкенд‑аспекты разработки. Пройдя его, вы сможете уверенно создавать собственные проекты на Nuxt с интеграцией внешних API и баз данных.
Работа с Nuxt 2 и Vue
- Использование методов asyncData и fetch для предварительной выборки данных.
- Добавление сторонних библиотек через плагины Nuxt.
- Организация маршрутизации и внедрение middleware.
- Работа с Vuex: управление состоянием на основе простых и удобных шаблонов.
- Применение фильтров Vue для форматирования дат и времени.
Интеграция Firestore и работа с данными
- Реализация полной CRUD‑логики с использованием Firestore.
- Создание и обновление данных в реальном времени.
- Работа со структурой NoSQL и оптимизация запросов.
Использование внешних API и HTTP‑запросов
- Глубокая работа с axios: прокси, собственные заголовки, модули.
- Интеграция и настройка News API для получения актуальных заголовков.
Аутентификация и безопасность
- Настройка JWT‑авторизации и управление пользовательскими сессиями.
- Использование куки и LocalStorage для чтения и сохранения токенов.
- Форма входа и регистрации с валидацией через Vuelidate.
Создание интерфейса
- Построение адаптивного UI с помощью библиотеки Vue Material.
- Проработка UX живой новостной ленты и интерактивных элементов.
Дополнительные инструменты и практики, которые вы изучите
- Инструменты разработки: Vue DevTools и Nuxt DevTools.
- Работа с CLI create-nuxt-app для быстрого старта проектов.
- Развертывание готового приложения на Heroku.
- Активная работа с ES6/ES7 и async/await.
Почему этот курс стоит пройти
Это не просто теоретический разбор Nuxt и Firestore — у вас на руках останется полностью рабочее, мощное приложение, которое можно расширять, улучшать и использовать как портфолио. Если вы хотите глубоко погрузиться в экосистему Vue и научиться создавать реальные продукты — этот курс станет отличной отправной точкой.
Готовы начать?
Присоединяйтесь и создайте собственный новостной агрегатор, освоив профессиональные инструменты современного веб‑разработчика!
- Урок 1.00:01:59Required Tools
- Урок 2.00:01:52Create Project with create-nuxt-app
- Урок 3.00:03:37Integrate Vue Material with App
- Урок 4.00:03:23Generate Vue Material Theme (App Color Scheme)
- Урок 5.00:04:57Get API Key from NewsAPI, asyncData to Fetch Top Headlines
- Урок 6.00:01:47Proxy Axios Requests with Nuxt Proxy Module
- Урок 7.00:04:28Style Headlines with Card Components
- Урок 8.00:02:15Preventing Errors - Changing 'to' to '$router.push' for Route Changes
- Урок 9.00:03:07Add Login / Register Pages, Create Navbar
- Урок 10.00:04:31Create Vuex Store, Use fetch to Put Headlines in Store
- Урок 11.00:07:47Select Headlines by News Category
- Урок 12.00:05:38Select Headlines by Country
- Урок 13.00:06:33Register New Users with Firebase REST API
- Урок 14.00:03:12Disable Form upon Registration, Redirect Home upon Successful Auth
- Урок 15.00:02:11Add Navigation Guards using Middleware
- Урок 16.00:05:20Form Validation with Vuelidate
- Урок 17.00:03:13Create Avatar upon Register and Display User Data in Navbar
- Урок 18.00:04:14Setup Firestore as a Plugin, Add User Data to Firestore Database
- Урок 19.00:04:31Add Login Form / Functionality, Query Logged In User Data from Firestore
- Урок 20.00:10:44Manage User Sessions with Cookies / Local Storage, Create Logout Functionality
- Урок 21.00:07:17Create Ability to Bookmark Headlines, Add Bookmarks to User's Feed
- Урок 22.00:02:25Add Listener .onSnapshot to Personal Feed
- Урок 23.00:02:29Add Markup for Empty State in Personal Feed
- Урок 24.00:02:58Delete Headlines from Personal Feed
- Урок 25.00:04:37Create Individual Headline Page, Slugify Headline Titles
- Урок 26.00:07:46Save and Display Individual Headlines
- Урок 27.00:07:02Add Ability to Send Comments
- Урок 28.00:05:02Fetch Comments with Headline, Display Comments
- Урок 29.00:05:56Like Comments and Order Comments by Like Count
- Урок 30.00:02:50Get Headlines by News Source
- Урок 31.00:07:15Query Headlines by Search Terms, Date, and Criteria
- Урок 32.00:03:35Use Date-Fns and Vue Filters to Format Headline / Comment Dates
- Урок 33.00:03:00Use CSS Transitions upon Route Change
- Урок 34.00:03:41Add Default Image to Headlines without Media
- Урок 35.00:06:58Removing Nuxt Store Warning; Migrating from Nuxt 2 to Latest Version
- Урок 36.00:06:16Seamless App Deployment with Heroku
- Урок 37.00:00:30Bonus Lecture
Автор - udemy
Комментарии