Прогресивна веб-програма з Vue JS, Webpack & Material Design [Частина 2]

[Оновлено 30.10.2017]

Ця стаття є частиною серії, яка має на меті створити основну, але повну прогресивну веб-програму з VueJs, Webpack & Material Design, поетапно та з нуля. Якщо ви ще цього не прочитали, ви можете знайти тут початкову частину.

Джерело коду доступне в цьому сховищі GitHub: https://github.com/charlesBochet/vueJSPwa

У частині 1 ми дізналися, як створити програму для однієї сторінки за допомогою VueJS, Webpack та MDL. Ми вже виконали перші вимоги нашого контрольного списку PWA:

Цей другий підручник зосереджений на наданні швидких та свіжих даних для нашої програми CropChat. Ми збираємося:

  • Налаштування нової бази даних Firebase;
  • Підключіть наш додаток Vue до Firebase з Vuefire;
  • Опублікуйте та завантажте фотографії з Firebase.
CropChat зі свіжими даними

[ЧАСТЬ 2] PWA в реальному часі з Firebase

Firebase - це база даних NoSQL в реальному часі, розроблена Google. Він розміщений у хмарі, тому вам не потрібно нічого встановлювати на свій сервер.

Дані синхронізуються для всіх клієнтів у режимі реального часу. Це робить Firebase ідеальним інструментом для створення чату: він забезпечує простий спосіб оновлювати подачу повідомлень. Плюс це безкоштовно.

Щоб дізнатися більше про Firebase, перейдіть на офіційну сторінку.

Давайте розпочнемо.

Налаштування вогневої бази

Перш за все, перейдіть до консолі Firebase, зареєструйтесь та створіть новий проект:

Нам також потрібно змінити правила бази даних:

Примітка. Це робить вашу базу даних читаною та доступною для запису всіма, лише корисно для прототипування.

Додати пакет Firebase до Cropchat:

npm встановити firebase - зберегти

Тоді нам потрібно встановити з'єднання Firebase. Створіть сервіс src / service / firebase.js, що містить такий код:

Поверніться до консолі Firebase та виберіть вкладку «Аутентифікація». Клацніть на кнопку «WEB SETUP», щоб отримати інформацію про базу даних.

Зараз ми підключені до нашої бази даних.

Vuefire: відпустіть потужність Firebase + VueJS

Налаштування VueFire

Ми будемо використовувати VueFire, пакет вузлів, створений для загортання гаків вогневої бази у додатку vueJS.

Додайте VueFire до проекту:

npm встановити vuefire --save

Імпортуйте VueFire в наш src / main.js:

Імпортуйте службу Firebase в src / main.js:

Ми щойно створили гачок між нашими додатками кішками та кішками вузла firebase. Vuefire буде синхронізувати нас. Ми додаємо .orderByChild ('created_at'), щоб найновіша кішка була на вершині каналу.

Опублікувати кота

Ми можемо почати надсилати дані на нашу базу даних firebase. Додати форму src / компоненти / PostView.vue:

Додайте Vue-ресурс, щоб мати HTTP-клієнт для нашого додатка та аналізатор xml:

npm встановити vue-resource --save
npm встановити xml-парсер --save

Імпортуйте Vue-ресурс у наш src / main.js:

Оновіть функцію PostView.vue (() для завантаження випадкової кішки з CatAPI (це, до речі, чудове зображення для котів). Ця функція запускається, коли встановлений компонент PostView:

Нарешті, додайте функцію postCat () до методів PostView.vue, які підштовхнуть це зображення до екземпляру Firebase:

Це воно! Перегляньте свою програму, натисніть кнопку «Плюс», щоб отримати доступ до перегляду публікацій:

Знімок екрана з подання

І натисніть кнопку "Опублікувати кішку". На інформаційній панелі Firebase ви побачите новий запис:

Відобразити список котів

Ми майже готові. У нас ще є певна робота над переглядом дому для відображення зображень котів, які ми зберігаємо у Firebase. Оновіть шаблон HomeView.vue:

Не забудьте видалити наш файл статичних даних data.js та рядок імпорту в HomeView.vue.

Ось і ми:

Домашній вигляд тепер синхронізований на Firebase

Футерморе, це синхронізовано. Відкрийте другу вкладку з додатком, опублікуйте кота та побачите, що відбувається за чарами:

Синхронізований

Оновіть подання деталей

Додати лодаш:

npm встановити lodash --save

І оновіть DetailView.vue:

Висновки

Сподіваюся, я переконав вас у можливостях Firebase та VueJS покращити ваш додаток за допомогою швидких та свіжих даних. Щоб скоротити довгу історію:

  • Vuefire пропонує швидкий спосіб інтегрувати базу даних Firebase у додаток VueJS;
  • Firebase - це дуже потужний інструмент для створення даних у реальному часі в додатку та переконайтеся, що ваші користувачі завжди мають свіжі та актуальні дані.

Ми перевірили нову точку в нашому контрольному списку вимог PWA:

Ще не зроблено! У частині ІІІ ми дізнаємось, як змусити наш додаток Cropchat працювати в режимі офлайн завдяки сервісним працівникам.