Часть 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.