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
Дата обновления
14 июн. 2019 г., 09:01
Создайте полный, фулстек новостной агрегатор от начала до конца с Nuxt 2, Firestore и Vue Material. Заинтересованы в создании впечатляющих, практичных одностраничных + серверных приложений с Nuxt и Firestore? Это курс для вас!
- Создание полной ленты новостей / агрегатора с Nuxt 2, Firestore и Vue Material от первой строки кода до развертывания в Интернете
- Полная функциональность CRUD (создание, чтение, обновление, удаление) с новой базой данных NoSQL Firestore в реальном времени
- Комплексная работа с News API для динамического поиска заголовков новостей по всему миру (по категориям новостей, по странам, источникам новостей и тд.)
- Добавление функции поиска для запроса всех заголовков в соответствии с условиями поиска, датой и различными критериями
- Создание возможности для пользователей добавлять закладки в заголовки, чтобы добавлять их в свой личный канал
- Превращение заголовков живых новостей в отдельные страницы нашего приложения, на которых пользователи могут комментировать
- Широкий охват создания HTTP-запросов с помощью axios (модуль Nuxt, прокси, настройка заголовков)
- Встроенная выборка данных Nuxt с помощью методов asyncData и fetch
- Работа с плагинами Nuxt для включения сторонних библиотек в наше приложение Nuxt
- Внедрение комментариев / симпатий пользователей в новостных статьях
- Аутентификация с помощью веб-токенов JSON и управление сессиями с помощью файлов cookie и LocalStorage
- Аутентификация пользователя с помощью Firebase Auth REST API
- Подтверждение формы с Vuelidate для наших форм входа и регистрации
- Управление состоянием с Vuex, с помощью простых шаблонов
- Создание привлекательного, отзывчивого, многофункционального пользовательского интерфейса с библиотекой Vue Material
- Основные особенности Vue Router (по отношению к Nuxt)
- Создание функций промежуточного программного обеспечения Nuxt для проверки подлинности и защиты навигации
- Используйте фильтры Vue для форматирования значений даты / времени с помощью популярного пакета date-fns
- Тонны работы с ES6 / 7, особенно асинхронные / ожидающие функции
- Полезные инструменты браузера, такие как Vue / Nuxt Dev Tools
- Начальная загрузка новых проектов Nuxt 2 с помощью CLI create-nuxt-app
- Простое развертывание приложений с Heroku
- И больше!
Мы создадим ленту новостей в реальном времени под названием NuxtNews, где пользователи смогут видеть живые заголовки новостей по мере их публикации со всего мира, осуществлять поиск по ним с помощью поисковых запросов, по дате и критериям поиска, где пользователи могут выбирать заголовки по своей стране, по категории новостей, по источникам новостей, и заходить на эти заголовки как на отдельные страницы в нашем приложении. И когда пользователи проходят аутентификацию (используя JSON Web Tokens и Firebase Auth REST API), они будут отмечать заголовки, которые они хотят сохранить, и размещать в своих собственных персонализированных новостных лентах, комментировать статьи по своему выбору и оставлять комментарии и ставить лайки.
Это действительно полнофункциональное приложение, в котором вы узнаете множество концепций Nuxt / 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
Комментарии