Добавьте Firebase в свой проект JavaScript

Следуйте этому руководству, чтобы использовать Firebase JavaScript SDK в своем веб-приложении или в качестве клиента для доступа конечных пользователей, например, на рабочем столе Node.js или в приложении IoT.

Шаг 1. Создайте проект Firebase и зарегистрируйте свое приложение.

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

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

  1. В консоли Firebase нажмите «Добавить проект» .

    • Чтобы добавить ресурсы Firebase в существующий проект Google Cloud , введите название его проекта или выберите его из раскрывающегося меню.

    • Чтобы создать новый проект, введите желаемое имя проекта. Вы также можете при желании изменить идентификатор проекта, отображаемый под названием проекта.

  2. При появлении запроса прочтите и примите условия Firebase .

  3. Нажмите Продолжить .

  4. (Необязательно) Настройте Google Analytics для своего проекта, что позволит вам оптимально использовать любой из следующих продуктов Firebase:

    Либо выберите существующую учетную запись Google Analytics , либо создайте новую учетную запись.

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

  5. Нажмите «Создать проект» (или «Добавить Firebase» , если вы используете существующий проект Google Cloud ).

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

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

  1. В центре страницы обзора проекта консоли Firebase щелкните значок Интернета ( ), чтобы запустить рабочий процесс установки.

    Если вы уже добавили приложение в свой проект Firebase, нажмите «Добавить приложение» , чтобы отобразить параметры платформы.

  2. Введите псевдоним вашего приложения.
    Этот псевдоним является внутренним удобным идентификатором и виден только вам в консоли Firebase.

  3. Нажмите Зарегистрировать приложение .

  4. Следуйте инструкциям на экране, чтобы добавить и инициализировать Firebase SDK в своем приложении.

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

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

Шаг 2. Установите SDK и инициализируйте Firebase.

На этой странице описаны инструкции по настройке модульного API Firebase JS SDK, который использует формат модуля JavaScript .

В этом рабочем процессе используется npm и требуются сборщики модулей или инструменты платформы JavaScript, поскольку модульный API оптимизирован для работы с сборщиками модулей , чтобы исключить неиспользуемый код (встряхивание дерева) и уменьшить размер SDK.

  1. Установите Firebase с помощью npm:

    npm install firebase
  2. Инициализируйте Firebase в своем приложении и создайте объект приложения Firebase:

    import { initializeApp } from 'firebase/app';
    
    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
      //...
    };
    
    const app = initializeApp(firebaseConfig);

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

    Если ваше приложение включает динамические функции, основанные на рендеринге на стороне сервера (SSR), вам потребуется предпринять некоторые дополнительные шаги, чтобы гарантировать, что ваша конфигурация сохраняется на всех этапах рендеринга на сервере и на клиенте. В логике вашего сервера внедрите интерфейс FirebaseServerApp , чтобы оптимизировать управление сеансами вашего приложения с помощью сервисных работников .

Шаг 3. Получите доступ к Firebase в своем приложении.

Сервисы Firebase (такие как Cloud Firestore , Authentication , Realtime Database , Remote Config и т. д.) доступны для импорта в рамках отдельных подпакетов.

В приведенном ниже примере показано, как вы можете использовать Cloud Firestore Lite SDK для получения списка данных.

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

Шаг 4. Используйте сборщик модулей (webpack/rollup) для уменьшения размера.

Firebase Web SDK предназначен для работы с сборщиками модулей для удаления любого неиспользуемого кода (встряхивания дерева). Мы настоятельно рекомендуем использовать этот подход для рабочих приложений. Такие инструменты, как Angular CLI , Next.js , Vue CLI или Create React App , автоматически обрабатывают объединение модулей для библиотек, установленных через npm и импортированных в вашу кодовую базу.

Дополнительную информацию см. в нашем руководстве «Использование сборщиков модулей с Firebase» .

Доступные сервисы Firebase для Интернета

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

Следующие команды показывают, как импортировать библиотеки Firebase, установленные локально, с помощью npm . Альтернативные варианты импорта см. в документации доступных библиотек .

Следующие шаги

Узнайте больше о Firebase:

,

Следуйте этому руководству, чтобы использовать Firebase JavaScript SDK в своем веб-приложении или в качестве клиента для доступа конечных пользователей, например, на рабочем столе Node.js или в приложении IoT.

Шаг 1. Создайте проект Firebase и зарегистрируйте свое приложение.

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

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

  1. В консоли Firebase нажмите «Добавить проект» .

    • Чтобы добавить ресурсы Firebase в существующий проект Google Cloud , введите название его проекта или выберите его из раскрывающегося меню.

    • Чтобы создать новый проект, введите желаемое имя проекта. Вы также можете при желании изменить идентификатор проекта, отображаемый под названием проекта.

  2. При появлении запроса прочтите и примите условия Firebase .

  3. Нажмите Продолжить .

  4. (Необязательно) Настройте Google Analytics для своего проекта, что позволит вам оптимально использовать любой из следующих продуктов Firebase:

    Либо выберите существующую учетную запись Google Analytics , либо создайте новую учетную запись.

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

  5. Нажмите «Создать проект» (или «Добавить Firebase» , если вы используете существующий проект Google Cloud ).

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

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

  1. В центре страницы обзора проекта консоли Firebase щелкните значок Интернета ( ), чтобы запустить рабочий процесс установки.

    Если вы уже добавили приложение в свой проект Firebase, нажмите «Добавить приложение» , чтобы отобразить параметры платформы.

  2. Введите псевдоним вашего приложения.
    Этот псевдоним является внутренним удобным идентификатором и виден только вам в консоли Firebase.

  3. Нажмите Зарегистрировать приложение .

  4. Следуйте инструкциям на экране, чтобы добавить и инициализировать Firebase SDK в своем приложении.

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

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

Шаг 2. Установите SDK и инициализируйте Firebase.

На этой странице описаны инструкции по настройке модульного API Firebase JS SDK, который использует формат модуля JavaScript .

В этом рабочем процессе используется npm и требуются сборщики модулей или инструменты платформы JavaScript, поскольку модульный API оптимизирован для работы с сборщиками модулей , чтобы исключить неиспользуемый код (встряхивание дерева) и уменьшить размер SDK.

  1. Установите Firebase с помощью npm:

    npm install firebase
  2. Инициализируйте Firebase в своем приложении и создайте объект приложения Firebase:

    import { initializeApp } from 'firebase/app';
    
    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
      //...
    };
    
    const app = initializeApp(firebaseConfig);

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

    Если ваше приложение включает динамические функции, основанные на рендеринге на стороне сервера (SSR), вам потребуется предпринять некоторые дополнительные шаги, чтобы гарантировать, что ваша конфигурация сохраняется на всех этапах рендеринга на сервере и на клиенте. В логике вашего сервера внедрите интерфейс FirebaseServerApp , чтобы оптимизировать управление сеансами вашего приложения с помощью сервисных работников .

Шаг 3. Получите доступ к Firebase в своем приложении.

Сервисы Firebase (такие как Cloud Firestore , Authentication , Realtime Database , Remote Config и т. д.) доступны для импорта в рамках отдельных подпакетов.

В приведенном ниже примере показано, как вы можете использовать Cloud Firestore Lite SDK для получения списка данных.

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

Шаг 4. Используйте сборщик модулей (webpack/rollup) для уменьшения размера.

Firebase Web SDK предназначен для работы с сборщиками модулей для удаления любого неиспользуемого кода (встряхивания дерева). Мы настоятельно рекомендуем использовать этот подход для рабочих приложений. Такие инструменты, как Angular CLI , Next.js , Vue CLI или Create React App , автоматически обрабатывают объединение модулей для библиотек, установленных через npm и импортированных в вашу кодовую базу.

Дополнительную информацию см. в нашем руководстве «Использование сборщиков модулей с Firebase» .

Доступные сервисы Firebase для Интернета

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

Следующие команды показывают, как импортировать библиотеки Firebase, установленные локально, с помощью npm . Альтернативные варианты импорта см. в документации доступных библиотек .

Следующие шаги

Узнайте больше о Firebase: