Нажмите здесь, чтобы опубликовать эту статью в LinkedIn »

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

База данных Firebase в реальном времени

База данных Firebase Realtime - это размещенная в облаке база данных NoSQL, которая позволяет хранить и синхронизировать данные между вашими пользователями в реальном времени. - Firebase

База данных Firebase в реальном времени невероятно мощна и устраняет весь процесс создания серверной части RESTFull для вашего приложения. Итак, давайте начнем добавлять его в наше приложение.

Настроить Firebase

Сначала вам нужно зарегистрироваться и запустить проект firebase. После того, как вы зарегистрируетесь в firebase, перейдите на панель управления и «добавьте проект».

‍

Добавить проект в свою учетную запись Firebase

После этого должна появиться кнопка быстрого доступа с надписью «Добавить Firebase в свое веб-приложение». Щелкните по нему, и вы должны увидеть некоторые детали конфигурации, которые выглядят следующим образом.

Эта конфигурация важна, но именно здесь наш процесс настройки будет отличаться от стандартной конфигурации веб-приложения.

‍

Настройте PWA с помощью Firebase

Вместо того, чтобы следовать документации веб-приложения для настройки firebase, мы будем следовать аналогичному процессу для настройки node.js, поскольку они используют импорт модулей и модули npm.

Для начала в родительском каталоге вашего веб-приложения установите firebase с помощью команды

npm install --save firebase

Затем в вашем файле точки входа для вашего проекта трафарета (для меня точкой входа является my-app.tsx из проекта ionic-pwa-toolkit) мы собираемся импортировать firebase и создать файл конфигурации для хранения нашей конфигурации.

** Важное примечание: импортируйте firebase с новыми операторами импорта TypeScript 2.7. Мне потребовалось время, чтобы понять.

import firebase from ‘firebase’

и не

import * as firebase from ‘firebase’

Теперь вы видите, что в этом коде я импортирую свою конфигурацию из файла config.js. Мы делаем это, потому что, как правило, рекомендуется разделять вашу конфигурацию, но также и для того, чтобы мы могли удалить наши детали конфигурации из системы управления версиями, чтобы мы могли сделать наше приложение с открытым исходным кодом.

Для этого в папке «helpers» вашего проекта создайте файл с именем config.ts и добавьте этот код (плюс сведения о конфигурации вашей базы данных firebase).

Теперь у нас должно быть все настроено, чтобы начать использовать firebase!

База данных в реальном времени

Теперь, когда все настроено, давайте добавим реальный пример кода. Я работал над образцом приложения, в котором есть доска объявлений, где люди могут голосовать за понравившуюся работу, и это отражает процесс голосования в новостях Reddit / Hacker News. Мы собираемся использовать это как образец, чтобы показать, что можно сделать.

Образец объявления о вакансии

А теперь не стоит ненавидеть мой дизайн, потому что я так и не научился рисовать. В нашем приложении со списком вакансий есть система голосования, которую мы хотим реализовать, где мы хотим слушать, когда другие люди голосуют за вакансии, и обновлять наши «баллы» для каждого списка вакансий. Для этого мы подключим наш слушатель firebase во время события жизненного цикла componentDidLoad нашего компонента трафарета.

Код прослушивает события firebase в задании и складывает количество положительных и отрицательных голосов по конкретному элементу.

Больше Firebase с PWA

Firebase - это очень мощный инструмент, который можно добавить в ваш проект трафарета, и я знаю, что действительно доволен своей реализацией.

Если вы хотите узнать больше об использовании других функций firebase или более подробно о том, как реализовать firebase с вашим следующим PWA, обязательно ознакомьтесь с моими курсами в разделе «Начать проект». В обоих курсах PWA мы рассмотрим, как внедрить firebase в ваше веб-приложение.

Первоначально опубликовано на www.pwatoday.com.