[Обновлено 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.vueounted (), чтобы загрузить случайного кота из 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.