0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Когда-то создание веб-приложения для работы в реал-тайм было сложной задачей для разработчиков. С появлением<strong>Firebase</strong>всё изменилось. Сегодня каждый может начать разработку web-приложения, не особо заботясь о серверной части проекта.</p>
1
<p>Когда-то создание веб-приложения для работы в реал-тайм было сложной задачей для разработчиков. С появлением<strong>Firebase</strong>всё изменилось. Сегодня каждый может начать разработку web-приложения, не особо заботясь о серверной части проекта.</p>
2
<p>Итак, Firebase даёт нам ряд полезных инструментов: • сервис авторизации, • хранилище файлов, • хостинг; • базы данных.</p>
2
<p>Итак, Firebase даёт нам ряд полезных инструментов: • сервис авторизации, • хранилище файлов, • хостинг; • базы данных.</p>
3
<p>Всё это "богатство" позволяет в меньшей мере переживать о серверной составляющей. В результате клиентской части проекта мы можем уделить гораздо больше внимания. Что же, давайте посмотрим на процесс разработки несложного web-приложения, где можно будет просматривать, добавлять и удалять информацию о локациях со всего мира. Естественно, делая всё это в реальном времени. Вот что у нас получится:</p>
3
<p>Всё это "богатство" позволяет в меньшей мере переживать о серверной составляющей. В результате клиентской части проекта мы можем уделить гораздо больше внимания. Что же, давайте посмотрим на процесс разработки несложного web-приложения, где можно будет просматривать, добавлять и удалять информацию о локациях со всего мира. Естественно, делая всё это в реальном времени. Вот что у нас получится:</p>
4
<h2>Начнём</h2>
4
<h2>Начнём</h2>
5
<p>Прежде всего, следует сказать, что Node.js и NPM должны быть уже установлены. Далее устанавливаем vue-cli:</p>
5
<p>Прежде всего, следует сказать, что Node.js и NPM должны быть уже установлены. Далее устанавливаем vue-cli:</p>
6
<p>Теперь создаём новое приложение посредством Vue CLI и запускаем его:</p>
6
<p>Теперь создаём новое приложение посредством Vue CLI и запускаем его:</p>
7
$ vue init webpack fire-app $ cd fire-app $ npm run dev<p>В результате в вашем веб-браузере по адресу http://localhost:8080 должно будет открыться приложение.</p>
7
$ vue init webpack fire-app $ cd fire-app $ npm run dev<p>В результате в вашем веб-браузере по адресу http://localhost:8080 должно будет открыться приложение.</p>
8
<h2>Устанавливаем Firebase и VueFire</h2>
8
<h2>Устанавливаем Firebase и VueFire</h2>
9
<p>На текущем этапе у нас есть лишь стандартное приложение на Vue, поэтому для работы с online-базой данных придётся добавить немножко магии. Откроем Firebase и создадим новый бесплатный проект. Потом заходим в панель управления и нажимаем Add Firebase to your Web App. И копируем databaseURL и projectID - позже они понадобятся.</p>
9
<p>На текущем этапе у нас есть лишь стандартное приложение на Vue, поэтому для работы с online-базой данных придётся добавить немножко магии. Откроем Firebase и создадим новый бесплатный проект. Потом заходим в панель управления и нажимаем Add Firebase to your Web App. И копируем databaseURL и projectID - позже они понадобятся.</p>
10
<p>Далее устанавливаем Vuefire, что необходимо для добавления поддержки Firebase в проект:</p>
10
<p>Далее устанавливаем Vuefire, что необходимо для добавления поддержки Firebase в проект:</p>
11
$ npm install vuefire@next firebase -save<p>Теперь инициализируем Firestore, применяя данные, подготовленные заранее. Открываем main.js и добавляем пару строчек:</p>
11
$ npm install vuefire@next firebase -save<p>Теперь инициализируем Firestore, применяя данные, подготовленные заранее. Открываем main.js и добавляем пару строчек:</p>
12
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()<p>Что тут происходит: 1. Через firebase.initializeApp мы осуществляем инициализацию работы с БД Firestore. 2. Обозначаем её переменной db.</p>
12
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()<p>Что тут происходит: 1. Через firebase.initializeApp мы осуществляем инициализацию работы с БД Firestore. 2. Обозначаем её переменной db.</p>
13
<h2>Управляем данными посредством Firestore Console</h2>
13
<h2>Управляем данными посредством Firestore Console</h2>
14
<p>Firestore характеризуется интуитивно понятным интерфейсом для управления данными. В первую очередь, перейдём в Database → Cloud Firestore → Try Firestore Beta.</p>
14
<p>Firestore характеризуется интуитивно понятным интерфейсом для управления данными. В первую очередь, перейдём в Database → Cloud Firestore → Try Firestore Beta.</p>
15
<p>Система спросит у нас про настройки безопасности. Выберем Test Mode, чтобы обойти все ограничения.</p>
15
<p>Система спросит у нас про настройки безопасности. Выберем Test Mode, чтобы обойти все ограничения.</p>
16
<p>Теперь создадим новую коллекцию и назовём её locations.</p>
16
<p>Теперь создадим новую коллекцию и назовём её locations.</p>
17
<p>В коллекции создадим первый документ. Firestore автоматически сгенерирует индивидуальный ID для документов. Добавим поля name и image, а также переменную времени createdAt.</p>
17
<p>В коллекции создадим первый документ. Firestore автоматически сгенерирует индивидуальный ID для документов. Добавим поля name и image, а также переменную времени createdAt.</p>
18
<h2>Читаем Firestore Documents из Vue</h2>
18
<h2>Читаем Firestore Documents из Vue</h2>
19
<p>Итак, приступим к работе с Firestore из приложения. Открываем HelloWorld.vue - это основной файл приложения. Потом переходим к разделу <script> и вписываем пару строк:</p>
19
<p>Итак, приступим к работе с Firestore из приложения. Открываем HelloWorld.vue - это основной файл приложения. Потом переходим к разделу <script> и вписываем пару строк:</p>
20
import { db } from '../main' export default { name: 'HelloWorld', data () { return { locations: [] } }, firestore () { return { locations: db.collection('locations').orderBy('createdAt') } } }<p>За начальные свойства отвечает data (). А переменная locations создаётся как пустой массив. Метод firestore () создаст запрос к БД, вернув актуальные данные. Применяя orderBy('createdAt'), мы сообщим Firestore, что нужно вернуть данные, выполнив их сортировку по дате.</p>
20
import { db } from '../main' export default { name: 'HelloWorld', data () { return { locations: [] } }, firestore () { return { locations: db.collection('locations').orderBy('createdAt') } } }<p>За начальные свойства отвечает data (). А переменная locations создаётся как пустой массив. Метод firestore () создаст запрос к БД, вернув актуальные данные. Применяя orderBy('createdAt'), мы сообщим Firestore, что нужно вернуть данные, выполнив их сортировку по дате.</p>
21
<p>Далее перейдём к разделу <template> и воспользуемся циклом v-for, чтобы отобразить элементы массива:</p>
21
<p>Далее перейдём к разделу <template> и воспользуемся циклом v-for, чтобы отобразить элементы массива:</p>
22
<div> <article v-for="(location, idx) in locations" :key="idx"> <img :src="location.image"> <h1>{{ location.name }}</h1> </article> </div><p>Данные в массиве представляют собой стандартные JavaScript-объекты, поэтому мы можем привязать ссылки к атрибуту :src, чтобы отображать фотографии.</p>
22
<div> <article v-for="(location, idx) in locations" :key="idx"> <img :src="location.image"> <h1>{{ location.name }}</h1> </article> </div><p>Данные в массиве представляют собой стандартные JavaScript-объекты, поэтому мы можем привязать ссылки к атрибуту :src, чтобы отображать фотографии.</p>
23
<p>Также не стоит забывать, что всё происходит в реал-тайме. Вы можете зайти в консоль Firestore, а потом добавить новую запись и наблюдать, как она появится в вашем приложении.</p>
23
<p>Также не стоит забывать, что всё происходит в реал-тайме. Вы можете зайти в консоль Firestore, а потом добавить новую запись и наблюдать, как она появится в вашем приложении.</p>
24
<h2>Создаём новые документы из приложения</h2>
24
<h2>Создаём новые документы из приложения</h2>
25
<p>Теперь добавим будущим пользователям возможность создавать в приложении новые локации. Для этого создадим новые свойства name и image. Кроме того, добавим новый метод.</p>
25
<p>Теперь добавим будущим пользователям возможность создавать в приложении новые локации. Для этого создадим новые свойства name и image. Кроме того, добавим новый метод.</p>
26
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 }) } } }<p>Итак, метод addLocation принимает в качестве аргументов name и image. Что касается данных времени createdAt, то мы их получим посредством объекта JavaScript Date. Кроме того, воспользуемся новым методом для создания формы посредством v-on:submit. Обратите внимание, что для передачи аргумента в метод каждая строка ввода привязана через v-model.</p>
26
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 }) } } }<p>Итак, метод addLocation принимает в качестве аргументов name и image. Что касается данных времени createdAt, то мы их получим посредством объекта JavaScript Date. Кроме того, воспользуемся новым методом для создания формы посредством v-on:submit. Обратите внимание, что для передачи аргумента в метод каждая строка ввода привязана через v-model.</p>
27
<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><p>Теперь введём новые значения в форму и нажмём submit, в результате чего список сразу обновится. Кстати, чтобы наше приложение было максимально отзывчивым, Firestore производит компенсацию задержки (latency compensation).</p>
27
<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><p>Теперь введём новые значения в форму и нажмём submit, в результате чего список сразу обновится. Кстати, чтобы наше приложение было максимально отзывчивым, Firestore производит компенсацию задержки (latency compensation).</p>
28
<h2>Удаляем документы</h2>
28
<h2>Удаляем документы</h2>
29
<p>Теперь давайте добавим возможность удаления локаций. Создадим новый метод, принимающий ID документа и использующий delete() для удаления его из БД.</p>
29
<p>Теперь давайте добавим возможность удаления локаций. Создадим новый метод, принимающий ID документа и использующий delete() для удаления его из БД.</p>
30
methods: { addLocation (name, image) { const createdAt = new Date() db.collection('locations').add({ name, image, createdAt }) } deleteLocation (id) { // <-- новый метод db.collection('locations').doc(id).delete() } }<p>Привяжем новый метод к кнопке удаления для каждого элемента в списке внутри цикла v-for:</p>
30
methods: { addLocation (name, image) { const createdAt = new Date() db.collection('locations').add({ name, image, createdAt }) } deleteLocation (id) { // <-- новый метод db.collection('locations').doc(id).delete() } }<p>Привяжем новый метод к кнопке удаления для каждого элемента в списке внутри цикла v-for:</p>
31
<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><p>Осталось нажать на кнопку, и элемент пропадёт и из приложения, и из БД.</p>
31
<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><p>Осталось нажать на кнопку, и элемент пропадёт и из приложения, и из БД.</p>
32
<h2>Что в итоге?</h2>
32
<h2>Что в итоге?</h2>
33
<p>Итак, мы разобрали основы работы с Firebase и Vue.js, сделав это на примере простого web-приложения. Надеюсь, это было полезный урок, и вы получили представление о frontend-разработке.</p>
33
<p>Итак, мы разобрали основы работы с Firebase и Vue.js, сделав это на примере простого web-приложения. Надеюсь, это было полезный урок, и вы получили представление о frontend-разработке.</p>
34
<p><em>Источник - "<a>Full Stack Vue.js with Firestore</a>"</em></p>
34
<p><em>Источник - "<a>Full Stack Vue.js with Firestore</a>"</em></p>
35
35