Как добавить Firebase в ваш проект Javascript

Руководство по использованию и внедрению Firebase Javascript SDK в ваши веб-приложения.

По мере того, как я углубляюсь в создание собственных веб-приложений и проектов, Firebase много раз становился одной из лучших серверных служб для использования. Он предоставляет разработчикам множество инструментов и услуг, которые помогают им разрабатывать качественные приложения, расширять пользовательскую базу и получать прибыль. Firebase построена на базе инфраструктуры Google и относится к категории программ баз данных NoSQL, которые хранят данные в документах, подобных JSON.

Предпосылки

1. Убедитесь, что у вас установлен предпочитаемый вами редактор кода или IDE.
2. Войдите в Firebase, используя свою учетную запись Google.

Если у вас еще нет проекта JavaScript, но вы все еще хотите опробовать продукт Firebase, вам повезло. Firebase позволяет вам легко протестировать их продукт, и вы можете загрузить один из их образцов для быстрого запуска!

1. Создайте проект Firebase.

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

1. В консоли Firebase нажмите Добавить проект, затем выберите или введите Название проекта.
2. Если вы создаете новый проект, вы можете изменить идентификатор проекта. Firebase автоматически присваивает уникальный идентификатор вашему проекту Firebase. После того, как Firebase предоставит ресурсы для вашего проекта Firebase, вы не сможете изменить свой идентификатор проекта.
3. Нажмите Продолжить.
4. (Необязательно) Вы можете настроить Google Analytics для своего проекта, используя любой из следующих продуктов Firebase:

• Firebase Crashlytics
• Прогнозы Firebase
• Обмен сообщениями Firebase Cloud
• Обмен сообщениями Firebase в приложении
• Удаленная настройка Firebase
• Тестирование Firebase A / B

При появлении запроса выберите использование существующей учетной записи Google Analytics или создание новой учетной записи. Если вы решили создать новую учетную запись, выберите Местоположение для отчетов Analytics, затем примите настройки совместного использования данных и условия Google Analytics для своего проекта.

Вы всегда можете настроить Google Analytics позже во вкладке Интеграция в настройках вашего проекта.

5. Нажмите Создать проект, и Firebase автоматически предоставит ресурсы для вашего проекта Firebase. Когда процесс завершится, вы попадете на страницу обзора вашего проекта Firebase в консоли Firebase.

2. Зарегистрируйте свое приложение в Firebase.

Создав проект Firebase, вы можете добавить в него свое веб-приложение.

1. В центре страницы обзора проекта консоли Firebase нажмите значок Интернет (‹/›), чтобы начать настройку.
2. Введите название вашего приложения. Это имя является внутренним идентификатором и видно только вам в консоли Firebase.
3. (Необязательно) Настройте хостинг Firebase для своего веб-приложения. Вы можете настроить это позже, если хотите. Вы также можете связать свое веб-приложение Firebase с сайтом хостинга в любое время в Настройках проекта. Хостинг Firebase не необходим для использования продуктов Firebase в своем веб-приложении.
4. Нажмите Зарегистрировать приложение.

3. Добавьте SDK Firebase и инициализируйте Firebase.

Firebase предоставляет библиотеки JavaScript для большинства продуктов Firebase, включая Remote Config, FCM и другие. Вы можете добавить в свое приложение любую из доступных библиотек.

То, как вы добавляете SDK Firebase в свое веб-приложение, зависит от того, используете ли вы хостинг Firebase для своего приложения или нет, какие инструменты вы используете в своем приложении (например, сборщик модулей) или настраиваете ли вы Node.js приложение. Дополнительные сведения о выборе между этими альтернативами см. В разделе Способы добавления веб-SDK в ваше приложение.

В рамках этого блога я расскажу, как добавить Firebase с помощью npm:

1. Установите Firebase JavaScript SDK:

• Если у вас еще нет package.json файла, создайте его, выполнив следующую команду из корня вашего проекта JavaScript:

npm init

• Установите пакет firebase npm и сохраните его в свой package.json файл, запустив:

npm install --save firebase

2. Чтобы включить только определенные продукты Firebase (например, Authentication и Cloud Firestore), import модули Firebase:

// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// import * as firebase from "firebase/app"

// If you enabled Analytics in your project, add the Firebase SDK for Analytics
import "firebase/analytics";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

3. Инициализируйте Firebase в своем приложении:

// TODO: Replace the following with your app's Firebase project configuration
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Настройка приложения Firebase может немного сбить с толку, если вы этого не делали раньше.

Чтобы инициализировать Firebase в своем приложении, вам необходимо предоставить конфигурацию проекта Firebase вашего приложения. Вы можете получить свой объект конфигурации Firebase в любое время.

Вот формат объекта конфигурации со всеми необходимыми службами:

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Вот объект конфигурации со значениями example:

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

5. Узнайте больше перед началом работы

Если вы хотите узнать больше о Firebase, ниже приведены несколько полезных ссылок:

• Изучите образцы приложений Firebase.
• Получите практический опыт работы с Firebase Web Codelab.
• Изучите открытый исходный код в GitHub.
• Просмотрите поддерживаемые среды для Firebase JavaScript SDK.
• Ускорьте разработку с помощью дополнительных поддерживаемых Firebase библиотек с открытым исходным кодом, таких как AngularFire, RxFire и FirebaseUI для Интернета.
• Подготовьтесь к запуску вашего приложения:

Настройте бюджетные оповещения для своего проекта в Google Cloud Console.

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

Просмотрите Контрольный список запуска Firebase.

6. Добавление Firebase в уже существующее приложение

Если вы хотите добавить в свое приложение уже существующую службу Firebase, вот несколько полезных ссылок:

• Разместите свое приложение на Firebase Hosting.
• Настройте поток аутентификации пользователя с помощью Аутентификации.
• Храните данные, например информацию о пользователях, в Cloud Firestore или Realtime Database.
• Храните файлы, такие как фото и видео, в Cloud Storage.
• Узнайте о проблемах с производительностью вашего приложения с помощью Performance Monitoring.
• Триггерный бэкэнд-код, работающий в защищенной среде с Облачными функциями.
• Отправляйте уведомления с помощью Cloud Messaging.

Надеюсь, вы нашли этот блог полезным, если вы пытаетесь внедрить и использовать Firebase в своих проектах. Если вам нужна дополнительная информация или вы застряли, у Google есть замечательная и подробная документация по Firebase здесь: https://firebase.google.com/docs