Часть 1 — Настройка приложения
На днях я был в Твиттере и увидел забавный твит о том, что должно быть приложение вроде Tinder, но для фильмов. Вместо приложения для знакомств это будет для пар, которым трудно договориться о том, какие фильмы смотреть. Каждый будет проводить пальцем влево или вправо в зависимости от того, как они относятся к просмотру фильма. Затем они могут просмотреть матчи и найти подходящий фильм.
Я думаю, что это фантастическая идея и что-то, с чем я полностью согласен. Итак, в этой серии мы собираемся создать его с помощью VueJs, Vuetify, VueFire и Firebase. Поскольку это будет веб-приложение, вместо свайпов у нас будут кнопки большой палец вверх и вниз. Итак, давайте углубимся в это.
Настройка проекта Vue
Интерфейс командной строки Vue
Для создания нашего проекта мы будем использовать Vue CLI. Чтобы установить его, откройте терминал и выполните следующую команду:
npm install -g @vue/cli
Создание проекта Vue
Теперь, когда у нас установлен CLI, давайте создадим проект. Откройте терминал, перейдите в каталог по вашему выбору и выполните следующую команду:
vue create movie-night-picker
Затем выберите «Выбрать функции вручную» и выберите следующее:
- Вавилон
- Маршрутизатор
- Вьюекс
- Линтер Форматтер
Далее выберите следующие вопросы:
- Использовать режим истории для роутера? Да
- Выберите конфигурацию линтера/форматтера: ESLint + Prettier
- Выберите дополнительные функции lint: Lint при сохранении.
- Где вы предпочитаете размещать конфиг для Babel, PostCSS, ESLint и т.д.? В специальных файлах конфигурации
- Сохранить как пресет для будущих проектов? На ваше усмотрение. Я выбираю N.
Добавление Vuetify
После создания проекта перейдите в корневой каталог (cd movie-night-picker), выполните следующую команду и выберите пресет Default:
vue add vuetify
Добавление зависимостей проекта
Поскольку мы уже находимся в правильном каталоге, давайте установим зависимости проекта. В текущем терминале выполните следующее:
npm install vuexfire firebase axios
Настройка Firebase
Чтобы опубликовать наши функции, добавить пользователей в нашу базу данных и использовать аутентификацию, нам нужно настроить проект Firebase. Итак, перейдите на https://firebase.google.com/, создайте учетную запись и нажмите Перейти к консоли. Затем нажмите кнопку Добавить проект и назовите его как хотите. Щелкните другие параметры, выбрав значения по умолчанию.
пожарный магазин
Затем нажмите «Cloud Firestore» в меню слева.
Облако Firestore
Затем в верхней части экрана нажмите «Создать базу данных».
Поскольку мы будем внедрять аутентификацию, выберите «Запустить в рабочем режиме» и выберите расположение сервера по умолчанию.
Правила облачного хранилища Firestore
После того, как Firestore будет подготовлен, давайте настроим некоторые правила Firestore. Для этого щелкните вкладку правил в разделе Firestore.
Единственное правило, которое мы собираемся добавить, заключается в том, что пользователь аутентифицирован. Для этого выберите все и правила и замените их на это:
rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if request.auth != null; } } }
Это гарантирует, что пользователь войдет в систему, прежде чем он сможет что-либо читать или писать.
Предупреждение, что это позволит любому аутентифицированному пользователю читать и писать любые документы. Перед выпуском в рабочую среду я бы порекомендовал вам также создать правило на основе идентификатора пользователя. Пожалуйста, ознакомьтесь с их документами.
Добавление Firebase в Vue
Теперь на главной странице вашего проекта Firebase вы увидите значок сети. Нажмите на это, дайте вашему приложению псевдоним и нажмите кнопку регистрации.
Далее вам будет представлен некоторый код конфигурации. Внутри тегов ‹script› все копируется.
Вернувшись в проект Vue, внутри src/main.js добавьте следующий код:
import firebase from 'firebase/app' import 'firebase/firestore' import { firestorePlugin } from 'vuefire' Vue.use(firestorePlugin) //Paste in your firebase config we copied from the last step var firebaseConfig = { apiKey: '<your-api-key>', authDomain: '<your-auth-domain>', databaseURL: '<your-database-url>', projectId: '<your-cloud-firestore-project>', storageBucket: '<your-storage-bucket>', messagingSenderId: '<your-sender-id>', appId: '<your-app-id>', measurementId: '<your-measurement-id>' }; firebase.initializeApp(firebaseConfig); export const db = firebase.firestore(); // Export types that exists in Firestore // This is not always necessary, but it's used in other examples const { Timestamp, GeoPoint } = firebase.firestore export { Timestamp, GeoPoint }
Очистка проекта
Теперь, когда Firebase был добавлен в проект Vue, нам просто нужно сделать небольшую очистку проекта, прежде чем мы приступим к кодированию. Внутри src/App.vue мы возьмем ‹v-app-bar›, добавленный Vuetify, переместим его в отдельный компонент, удалим все внутри него и добавим h2 с названием нашего приложения.
Итак, внутри папки компонентов создайте новую папку с именем «ui». Затем создайте в этой папке файл с именем AppBar.vue. Скопируйте и вставьте панель приложения в этот файл и замените все в ‹v-app-bar› на h2 с названием «Movie Night Picker». Ваш файл должен выглядеть так:
Затем внутри App.vue импортируйте файл AppBar.vue, зарегистрируйте его как компонент и добавьте в шаблон. Затем удалите компонент HelloWorld и удалите его файл из папки src/components/HelloWorld.vue. Вам также придется удалить компонент HelloWorld, зарегистрированный в src/views/Home.vue.
После этого добавьте тег ‹v-container› внутри тега ‹v-main› в шаблоне App.vue. Затем добавьте тег ‹router-view› внутрь тега ‹v-container›. Тег v-container добавит некоторое поле по бокам нашей страницы, а тег router-view — это место, где будут отображаться компоненты нашего маршрутизатора.
Ваш файл App.vue должен выглядеть так:
Последнее, что мы можем сделать, это удалить файл About.vue, расположенный в src/views/About.vue. Это должно завершить очистку нашего проекта, и мы можем начать программировать функциональность нашего приложения.
Видеоурок
Вывод
Напомним, что мы создали наш проект Vue, добавили Vuetify, добавили Firebase и немного почистили. Теперь мы можем приступить к кодированию функциональности нашего Movie Night Picker. Во второй части мы сосредоточимся на настройке аутентификации с использованием Firebase Auth.