Создание веб-приложения с помощью Vue.js, Vuetify и Firebase

В январе мы уже делились подборкой видеоуроков по основам JavaScript-фреймворка Vue.js. Теперь предлагаем попробовать свои силы в создании реального проекта, в котором интерфейс реализован с помощью Vuetify, а за бэкенд отвечает Firebase. Реализуемое веб-приложение поможет пользователям изучить немецкий язык.

Содержание курса

1.  Установка и основа приложения
   В первом видео курса автор рассказывает более подробно о том, что именно он будет реализовывать, какие необходимые инструменты требуется установить, а также как создать проект и базовые элементы будущего веб-приложения: Header, Footer и основы страниц.
2. User Authentication #1
   Тема видеоурока — аутентификация пользователей. Рассматривается создание формы входа и страницы личного кабинета, а также базовая функциональность: получение введённых данных из формы и сохранение входа после перезагрузки страницы.
3. User Authentication #2
   В видео автор завершает работу над аутентификацией пользователей, добавляя функциональность. Теперь веб-приложение может обрабатывать ошибки валидации с помощью правил и отображать их пользователю, выходить из учётной записи пользователя через кнопку «Выйти» и защищаться от несанкционированного входа.
4. Books List
   В центре внимания — адаптивный пользовательский интерфейс с выводом списка книг. В каждом элементе списка есть заголовок, описание, картинка, рейтинг, кнопка «Открыть» и уровень сложности. Также реализован поиск книг и фильтр по уровню сложности.
5. Book Details Page
   Список создали, что дальше? А дальше нужно создать страницы, открывающиеся при нажатии на кнопку «Открыть» в элементе списка. На этой странице будет отображаться подробная информация по книге и список упражнений.
6. Main Page (страница изучения языка)
   В этом уроке автор приступает к одной из самых важных частей приложения — страницы с контентом для изучения немецкого языка. Чтобы выводить на страницу видео с YouTube, в проекте используется пакет Vue YouTube Embed. Под роликом располагается оригинальный текст для изучения, в котором под специальными кнопками скрыты подсказки. Также есть вариант размещения текста в две колонки, где слева — оригинальный текст, справа — перевод. Над текстом размещён ползунок для изменения размера шрифта, а под текстом — карточки с отдельными словами.
7. Migrate Books to Firebase Firestore
   Для размещения информации о книгах в дальнейшем будет использоваться база данных Firebase Cloud Firestore. Из видео вы узнаете, как создать и настроить базу данных FireStore, а также внедрить FireStore в существующий проект.
8. Add Book to User Profile #1
   После того, как вся работа с данными стала проходить через Firestore, нужно реализовать функцию добавления книг в профиль пользователя. Для этого при нажатии на кнопку «Скачать» книга появляется в персональной базе данных пользователя, а он, в свою очередь, видит уведомление об успешном добавлении книги.
9. Add Book to User Profile #2
   Базовое добавление книг реализовано, поэтому можно приступить к следующей части профиля — странице изучения языка. В видеоуроке автор реализовывает запись в FireStore информацию о начале и конце прохождения упражнения, а также систему рейтинга уроков.
10. Change User Data in Profile
    Тема видео — функциональность личного кабинета. В окно регистрации нового пользователя добавится новое поле — имя. Затем автор реализовывает возможность смены электронной почты, имени и пароля.
11. Learn Words #1
    В этом уроке автор дорабатывает функциональность слов для запоминания. Теперь пользователь может добавлять слово к себе в личный кабинет, а при попытке повторного добавления выскакивает ошибка.
12. Event Bus
    Централизованная шина событий (Event Bus) даёт возможность компонентам отслеживать события. Шина является глобальной, поэтому к ней можно получить доступ из любого места веб-приложения, минуя иерархию компонентов. В видео автор переписал некоторые части кода так, чтобы задействовать Event Bus вместо обычной связи между компонентами родитель — потомок.
13. Learn Words #2. Секция изучения слов
    Ранее автор курса реализовал функцию добавления слов в профиль пользователя. В этом видео продолжается доработка функциональности, и следующей на очереди стала секция изучения слов, расположенная в личном кабинете. В неё автор добавил: список слов для запоминания, функцию озвучивания слова с помощью Window.speechSynthesis, отображение перевода и исключение слова из списка. При удалении слово вновь появится в списке через определённое время, пока пользователь его не заучит.
14. Firestore Security Rules
    В предыдущих видео вопрос безопасности базы данных Firestore не рассматривался. В этом уроке автор подробно рассказывает о Firestore Security Rules — правилах доступа к базе. Вы узнаете о том, как писать собственные правила, тестировать их, а также внедрить в существующий проект.
15. Advanced Route Guard
    В этом видео продолжается настройка безопасности данных веб-приложения. Чтобы при переходе по ссылкам не сбрасывалась аутентификация пользователя, необходимо связать маршруты (routes) и Firebase Authentication.
16. Home Page & Profile Books
    Тема урока — создание стартовой страницы и вывод в профиле пользовательских книг. Для стартовой страницы автор использовал модифицированный шаблон из Vuetify. Внизу страницы предстоит реализовать секцию случайных книг. А страница с пользовательскими книгами будет создана на основе списка книг, созданного в 4 уроке.
17. Firebase Hosting
    Последнее видео курса, на котором автор разбирает тарифные планы на хостинге Firebase и показывает, как запустить на нём своё веб-приложение.

А какое веб-приложение вы хотели бы реализовать на связке Firebase + Vue.js? Делитесь своими идеями в комментариях.

Смотрите также:
Создание простого веб-приложения с Vue и Firebase
Русскоязычный видеокурс «Vue.js для начинающих»