[Обновлено 30.10.2017]
Эта статья является частью серии, целью которой является создание базового, но полного прогрессивного веб-приложения с использованием VueJ, Webpack и Material Design, шаг за шагом и с нуля. Если вы еще не читали, то можете найти начальную часть здесь.
Источник кода доступен в этом репозитории GitHub: https://github.com/charlesBochet/vueJSPwa
В Части 1 мы узнали, как создать одностраничное приложение с VueJS, Webpack и MDL. Мы уже выполнили первые требования нашего контрольного списка PWA:
Это второе руководство посвящено предоставлению быстрых и свежих данных для нашего приложения CropChat. Мы собираемся:
- Настроить новую базу данных Firebase;
- Подключите наше приложение Vue к Firebase с помощью Vuefire;
- Публикуйте и загружайте изображения из Firebase.
[ЧАСТЬ 2] PWA в реальном времени с Firebase
Firebase - это база данных реального времени NoSQL, разработанная Google. Он размещен в облаке, поэтому вам не нужно ничего устанавливать на свой сервер.
Данные синхронизируются между всеми клиентами в режиме реального времени. Это делает Firebase идеальным инструментом для создания чата: он предоставляет простой способ поддерживать ленту сообщений в актуальном состоянии. К тому же это бесплатно.
Чтобы узнать больше о Firebase, посетите официальную страницу.
Давайте начнем.
Настроить firebase
Первым делом зайдите в Firebase Console, зарегистрируйтесь и создайте новый проект:
Также нам нужно изменить правила базы данных:
Примечание: это делает вашу базу данных доступной для чтения и записи для всех, что подходит только для прототипирования.
Добавьте пакет Firebase в Cropchat:
npm install firebase --save
Затем нам нужно установить соединение Firebase. Создайте службу src/service/firebase.js
, содержащую следующий код:
Вернитесь в консоль Firebase и выберите вкладку «Аутентификация». Нажмите кнопку «WEB SETUP», чтобы получить информацию о базе данных.
Теперь мы подключены к нашей базе данных.
Vuefire: раскрыть всю мощь Firebase + VueJS
Настроить VueFire
Мы будем использовать VueFire, пакет узлов, созданный для обертывания хуков firebase в приложении vueJS.
Добавьте VueFire в проект:
npm install vuefire --save
Импортируйте VueFire в наш src/main.js
:
Импортируйте службу firebase в src/main.js
:
Мы только что создали перехватчик между опорой нашего приложения cats
и узлом firebase cats
. Vuefire будет синхронизировать их для нас. Мы добавляем .orderByChild('created_at')
, чтобы в верхней части ленты была самая новая кошка.
Опубликовать кота
Мы можем начать отправку данных в нашу базу данных firebase. Добавьте форму src/components/PostView.vue
:
Добавьте Vue-ресурс, чтобы иметь HTTP-клиент для нашего приложения и парсер xml:
npm install vue-resource --save npm install xml-parser --save
Импортируем Vue-ресурс в наш src/main.js
:
Обновите функцию PostView.vue
ounted (), чтобы загрузить случайного кота из CatAPI (это, кстати, отличное место для поиска картинок котов). Эта функция запускается при монтировании компонента PostView:
Наконец, добавьте функцию postCat () к PostView.vue
методам, которые будут отправлять это изображение в экземпляр Firebase:
Вот и все! Просмотрите свое приложение, нажмите кнопку «Плюс», чтобы получить доступ к просмотру сообщений:
И нажмите кнопку «Опубликовать кота». Вы должны увидеть новую запись на панели управления Firebase:
Показать список кошек
Мы почти закончили. Нам все еще нужно поработать в Home View, чтобы отобразить изображения кошек, которые мы сохранили в Firebase. Обновите шаблон HomeView.vue
:
Не забудьте удалить наш статический файл данных data.js и строку импорта в HomeView.vue
.
Вот так:
Кроме того, это горячая синхронизация. Откройте вторую вкладку с приложением, опубликуйте кота и посмотрите, как происходит волшебство:
Обновите подробный вид
Добавить lodash:
npm install lodash --save
И обновите DetailView.vue:
Выводы
Надеюсь, я убедил вас в возможностях Firebase и VueJS по улучшению вашего приложения с помощью быстрых и свежих данных. Короче говоря:
- Vuefire предлагает быстрый способ интеграции базы данных Firebase в ваше приложение VueJS;
- Firebase - это очень мощный инструмент для создания данных в реальном времени в приложении и обеспечения того, чтобы у ваших пользователей всегда были свежие и актуальные данные.
Мы проверили новый пункт в нашем контрольном списке требований к PWA:
Еще не сделано! В Части III мы узнаем, как заставить наше приложение Cropchat работать в автономном режиме благодаря Service Workers.