Создание простого веб-приложения с Vue и Firebase

Перевод статьи «Full Stack Vue.js with Firestore»

Лет 10 назад создание веб-приложения, работающего в реальном времени, было непосильной задачей для многих программистов. Теперь же с появлением Firebase любой может начать разработку своего приложения, не беспокоясь о серверной части проекта.

Firebase предоставляет разработчикам следующие инструменты:

сервис авторизации,
базы данных,
хранилище файлов,
хостинг.

Всё это создано для того, чтобы меньше беспокоиться о серверной составляющей и больше внимания уделять клиентской части проекта.

В этой статье показан процесс разработки простого веб-приложения, в котором можно в реальном времени просматривать, добавлять и удалять данные о локациях со всего света.

Принимаемся за работу

Прим. перев. Данный материал предполагает, что Node.js и NPM уже установлены в системе.

Для начала понадобится установить vue-cli следующей командой:

$ npm install -g vue-cli

Создайте новое приложение с помощью Vue CLI и сразу запустим его:

$ vue init webpack fire-app
$ cd fire-app
$ npm run dev

В браузере по адресу http://localhost:8080 должно открыться приложение.

Установка Firebase и VueFire

На данном этапе есть только стандартное приложение на Vue, и для работы с онлайн базой данных в него надо добавить немного магии. Для этого следует открыть Firebase и создать новый бесплатный проект. Зайдите в панель управления и нажмите на Add Firebase to your Web App. Скопируйте databaseURL и projectID, они понадобятся позже.

Следующим шагом будет установка Vuefire, который добавит поддержку Firebase в проект. Для это воспользуйтесь следующей командой:

$ npm install vuefire@next firebase --save

Теперь требуется инициализировать Firestore, используя подготовленные заранее данные. Откройте main.js и добавьте следующие строчки:

import VueFire from 'vuefire'
import firebase from 'firebase/app'
import 'firebase/firestore'
Vue.use(VueFire)
firebase.initializeApp({
 projectId: 'YOUR_PROJECT_ID', 
 databaseURL: 'YOUR_DB_URL'
})
export const db = firebase.firestore()

Через firebase.initializeApp инициализируем работу с базой данных Firestore.
Обозначим её переменной db.

Управление данными через Firestore Console

Firestore предоставляет интуитивно понятный интерфейс для визуализации и управления данными. Для начала работы перейдите в Database → Cloud Firestore → Try Firestore Beta.

На этапе создания базы данных система спросит про настройки безопасности. Выберите Test Mode для обхода всех ограничений.

Теперь создайте новую коллекцию и назовите её locations.

Создайте первый документ в коллекции. Firestore автоматически генерирует индивидуальный ID для документов. Добавьте поля name, image и переменную времени createdAt.

Чтение Firestore Documents из Vue

Начнем работу с Firestore из приложения. Откройте HelloWorld.vue, оно является основным файлом приложения.

Перейдите к разделу <script> и впишите следующие строки:

import { db } from '../main'
export default {
 name: 'HelloWorld',
 data () {
   return {
     locations: []
   }
 },
 firestore () {
   return {
     locations: db.collection('locations').orderBy('createdAt')
   }
 }
}

data () отвечает за начальные свойства. Переменная locations будет создана как пустой массив.

firestore () создаст запрос к базе данных и вернёт актуальные данные. Используя orderBy('createdAt'), сообщим Firestore о том, что надо вернуть данные отсортированными по дате.

Теперь перейдите к разделу <template> и воспользуйтесь циклом v-for для отображения элементов массива:

<div>
 <article v-for="(location, idx) in locations" :key="idx">
  <img :src="location.image">
  <h1>{{ location.name }}</h1>
 </article>
</div>

Данные в массиве это обычные JavaScript объекты, поэтому можно привязать ссылки к атрибуту :src для отображения фотографий.

Не забывайте, что все это происходит в реальном времени. Попробуйте зайти в консоль Firestore и добавить новую запись, а затем наблюдайте, как она появится в приложении.

Создание новых документов из приложения

Добавьте пользователям возможность создавать новые локации в приложении.

Создайте новые свойства name и image, а также methods.

export default {
 name: 'HelloWorld',
 data () {
   return {
     locations: [],
     name: '',      // <-- новое свойство
     image: ''      // <-- новое свойство
   }
 },
 firestore () {
   return {
     locations: db.collection('locations').orderBy('createdAt')
   }
 },
 methods: {
   addLocation (name, image) {      // <-- новый метод
     const createdAt = new Date()
     db.collection('locations').add({ name, image, createdAt })
   }
 }
}

Метод addLocation принимает name и image как аргументы, а данные времени для createdAt получим при помощи объекта JavaScript Date.

Воспользуйтесь новым методом для создания формы с помощью v-on:submit. Каждая строка ввода привязана через v-model для передачи аргумента в метод.

<form @submit="addLocation(name, image)">
<input v-model="name" placeholder="Location Name">
<input v-model="image" placeholder="Location Image URL">
<button type="submit">Add New Location</button>
</form>

Введите новые значения в форму, нажмите submit, и список тут же обновится. Firestore производит latency compensation (компенсацию задержки), чтобы приложение было максимально отзывчивым.

Удаление документов

Теперь добавьте возможность удаления локаций. Для этого создайте новый метод, который принимает ID документа и использует delete() для удаления его из базы данных.

methods: {
 addLocation (name, image) {      
     const createdAt = new Date()
     db.collection('locations').add({ name, image, createdAt })
   }
   deleteLocation (id) {   // <-- новый метод
     db.collection('locations').doc(id).delete()
   }
 }

Привяжите новый метод к кнопке удаления для каждого элемента в списке внутри цикла v-for:

<article v-for="(location, idx) in locations" :key="idx">
 <img :src="location.image">
 <h1>{{ location.name }}</h1>
 <button @click="deleteLocation(location.id)"> // <-- новая кнопка
  Delete
 </button>
</article>

Попробуйте нажать на кнопку. Элемент пропадёт как из приложения, так и из базы данных.