O Google tem o compromisso de promover a igualdade racial para as comunidades negras. Saiba como.

Adicione o Firebase ao seu projeto JavaScript

Siga este guia para usar o Firebase JavaScript SDK em seu aplicativo da web ou como um cliente para acesso do usuário final, por exemplo, em um desktop Node.js ou aplicativo IoT.

Etapa 1 : crie um projeto do Firebase e registre seu aplicativo

Antes de adicionar o Firebase ao seu aplicativo JavaScript, você precisa criar um projeto do Firebase e registrar seu aplicativo nesse projeto. Ao registrar seu aplicativo no Firebase, você receberá um objeto de configuração do Firebase que usará para conectar seu aplicativo aos recursos do projeto Firebase.

Acesse Entenda os projetos do Firebase para saber mais sobre os projetos do Firebase e as práticas recomendadas para adicionar aplicativos a projetos.

Se você ainda não tem um projeto JavaScript e deseja apenas experimentar um produto Firebase, pode fazer o download de um de nossos exemplos de início rápido .

Etapa 2 : instale o SDK e inicialize o Firebase

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

Este fluxo de trabalho usa npm e requer bundlers de módulo ou ferramentas de estrutura JavaScript porque o SDK v9 é otimizado para trabalhar com bundlers de módulo para eliminar código não utilizado (tremor de árvore) e diminuir o tamanho do SDK.

  1. Instale o Firebase usando npm:

    npm install firebase
  2. Inicialize o Firebase em seu aplicativo e crie um objeto Firebase App:

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

    Um aplicativo do Firebase é um objeto semelhante a um contêiner que armazena configurações comuns e compartilha a autenticação entre os serviços do Firebase. Depois de inicializar um objeto Firebase App em seu código, você pode adicionar e começar a usar os serviços Firebase.

Etapa 3 : Acesse o Firebase em seu aplicativo

Os serviços do Firebase (como Cloud Firestore, Authentication, Realtime Database, Remote Config e mais) estão disponíveis para importação em subpacotes individuais.

O exemplo abaixo mostra como você pode usar o Cloud Firestore Lite SDK 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;
}

Passo 4 : Use um bundler de módulo (webpack/Rollup) para redução de tamanho

O Firebase Web SDK foi projetado para funcionar com bundlers de módulo para remover qualquer código não utilizado (tree-shaking). Recomendamos usar essa abordagem para aplicativos de produção. Ferramentas como Angular CLI , Next.js , Vue CLI ou Create React App lidam automaticamente com o agrupamento de módulos para bibliotecas instaladas por meio do npm e importadas para sua base de código.

Consulte nosso guia Usando bundlers de módulo com Firebase para obter mais informações.

Serviços disponíveis do Firebase para web

Agora que você está configurado para usar o Firebase, pode começar a adicionar e usar qualquer um dos seguintes serviços disponíveis do Firebase em seu aplicativo da web.

Os comandos a seguir mostram como importar bibliotecas do Firebase instaladas localmente com npm . Para opções alternativas de importação, consulte a documentação das bibliotecas disponíveis .

Próximos passos

Conheça o Firebase: