Adicionar o Firebase ao projeto JavaScript

Siga este guia para usar o SDK do Firebase para JavaScript no app da Web ou como um cliente para acesso do usuário final. Por exemplo, em um aplicativo IoT ou Node.js para computadores.

Etapa 1: criar um projeto do Firebase e registrar o app

Antes de adicionar o Firebase ao app em JavaScript, crie um projeto do Firebase e registre o app nesse projeto. Ao registrar o app no Firebase, você receberá um objeto de configuração do Firebase que será usado para conectar o app aos recursos do projeto do Firebase.

Acesse Noções básicas sobre projetos do Firebase para saber mais sobre os projetos do Firebase e as práticas recomendadas para adicionar apps aos projetos.

Se você ainda não tiver um projeto JavaScript e quiser apenas testar um produto do Firebase, faça o download de uma das nossas amostras introdutórias.

Etapa 2: instalar o SDK e inicializar o Firebase

Nesta página, descrevemos as instruções de configuração da versão 9 do SDK do Firebase para JavaScript, que usa um formato de módulo JavaScript.

Esse fluxo de trabalho usa NPM e requer bundlers de módulo ou ferramentas de framework do JavaScript porque o SDK v9 é otimizado para funcionar com bundlers de módulo para eliminar código não utilizado (tree shaking) e diminuir o tamanho do SDK.

1. Instale o Firebase usando npm:

   npm install firebase

2. Inicialize o Firebase no app e crie um objeto do app Firebase:

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

   Um app Firebase é um objeto semelhante a um contêiner que armazena configurações comuns e compartilha a autenticação nos serviços do Firebase. Depois de inicializar um objeto de app Firebase no código, é possível adicionar e começar a usar os serviços do Firebase.

Etapa 3: acessar o Firebase no app

Os serviços do Firebase (como Cloud Firestore, Authentication, Realtime Database, Configuração remota, entre outros) estão disponíveis para importação em subpacotes individuais.

O exemplo abaixo mostra como o SDK do Cloud Firestore Lite poderia ser utilizado para recuperar uma lista de dados.

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;
}

Etapa 4: usar um bundler de módulo (webpack/rollup) para redução de tamanho

O SDK da Web do Firebase foi projetado para funcionar com bundlers de módulo para remover qualquer código não utilizado (tree shaking). É altamente recomendável usar essa abordagem para apps de produção. Ferramentas como Angular CLI, Next.js, Vue CLI ou Create React App processam automaticamente o agrupamento de módulos para bibliotecas instaladas por NPM e importadas para a base de código.

Consulte nosso guia Como usar os bundlers de módulos com o Firebase para mais informações.

Serviços do Firebase disponíveis na Web

Agora que está tudo pronto para usar o Firebase, comece a adicionar e usar qualquer um dos seguintes serviços disponíveis no app da Web.

Próximas etapas

Saiba mais sobre o Firebase:

• Explore os apps de amostra do Firebase.

• Aprenda a usar o Firebase Web Codelab na prática.

• Explore o código aberto no GitHub.

• Revise os ambientes suportados do SDK do Firebase para JavaScript.

• Acelere seu desenvolvimento com outras bibliotecas de código aberto do Firebase, como o AngularFire, RxFire e FirebaseUI for web.

• Prepare-se para lançar seu aplicativo:

  • Configure alertas de orçamento para o projeto no Console do Google Cloud.
  • Monitore o painel Uso e faturamento no Console do Firebase para ter uma visão geral do uso do projeto em vários serviços do Firebase.
  • Consulte a lista de verificação de lançamento do Firebase.