Следуйте этому руководству, чтобы использовать Firebase JavaScript SDK в своем веб-приложении или в качестве клиента для доступа конечных пользователей, например, в настольном приложении Node.js или в приложении IoT.
Шаг 1. Создайте проект Firebase и зарегистрируйте свое приложение.
Прежде чем вы сможете добавить Firebase в свое приложение JavaScript, вам необходимо создать проект Firebase и зарегистрировать свое приложение в этом проекте. Когда вы регистрируете свое приложение в Firebase, вы получаете объект конфигурации Firebase, который вы будете использовать для подключения своего приложения к ресурсам проекта Firebase.
Посетите страницу Understand Firebase Projects , чтобы узнать больше о проектах Firebase и рекомендациях по добавлению приложений в проекты.
Если у вас еще нет проекта JavaScript и вы просто хотите попробовать продукт Firebase, вы можете загрузить один из наших кратких примеров .
Шаг 2. Установите SDK и инициализируйте Firebase.
На этой странице описаны инструкции по настройке модульного API Firebase JS SDK, в котором используется формат модуля JavaScript .
В этом рабочем процессе используется npm и требуются сборщики модулей или инструменты платформы JavaScript, поскольку модульный API оптимизирован для работы со сборщиками модулей для устранения неиспользуемого кода (сотрясения дерева) и уменьшения размера SDK.
Установите Firebase с помощью npm:
npm install firebase
Инициализируйте Firebase в своем приложении и создайте объект Firebase App:
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.
Шаг 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 предназначен для работы со сборщиками модулей для удаления любого неиспользуемого кода (tree-shaking). Мы настоятельно рекомендуем использовать этот подход для рабочих приложений. Такие инструменты, как Angular CLI , Next.js , Vue CLI или приложение Create React , автоматически обрабатывают объединение модулей для библиотек, установленных через npm и импортированных в вашу кодовую базу.
См. наше руководство Использование сборщиков модулей с Firebase для получения дополнительной информации.
Доступные сервисы Firebase для Интернета
Теперь, когда вы настроены на использование Firebase, вы можете начать добавлять и использовать любую из следующих доступных служб Firebase в своем веб-приложении.
Следующие команды показывают, как импортировать библиотеки Firebase, установленные локально с помощью npm
. Альтернативные варианты импорта смотрите в документации по доступным библиотекам .
Следующие шаги
Узнайте о Firebase:
Ознакомьтесь с примерами приложений Firebase .
Получите практический опыт работы с Firebase Web Codelab .
Исследуйте открытый исходный код на GitHub .
Просмотрите поддерживаемые среды для Firebase JavaScript SDK.
Ускорьте разработку с помощью дополнительных поддерживаемых Firebase библиотек с открытым исходным кодом, таких как AngularFire , RxFire и FirebaseUI для Интернета .
Подготовьтесь к запуску вашего приложения:
- Настройте оповещения о бюджете для своего проекта в Google Cloud Console.
- Следите за панелью управления «Использование и выставление счетов» в консоли Firebase, чтобы получить общую картину использования вашего проекта в нескольких сервисах Firebase.
- Ознакомьтесь с контрольным списком запуска Firebase .