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

Adicione o Firebase ao seu projeto JavaScript

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

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

Etapa 1 : criar um projeto do Firebase e registrar 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 do Firebase.

Acesse Entender 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 tiver um projeto JavaScript e quiser apenas experimentar um produto Firebase, faça o download de um de nossos exemplos de início rápido .

Etapa 2 : instalar o SDK e inicializar 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 .

Esse fluxo de trabalho usa npm e requer empacotadores de módulo ou ferramentas de estrutura JavaScript porque o SDK v9 é otimizado para trabalhar com empacotadores de módulo para eliminar código não utilizado (agitação 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 nos serviços do Firebase. Depois de inicializar um objeto de aplicativo do Firebase em seu código, você pode adicionar e começar a usar os serviços do Firebase.

Etapa 3 : acessar o Firebase em seu aplicativo

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

O exemplo abaixo mostra como você pode usar o SDK do Cloud Firestore Lite 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 : Use um empacotador de módulos (webpack/Rollup) para redução de tamanho

O SDK da Web do Firebase foi projetado para funcionar com empacotadores de módulos para remover qualquer código não utilizado (agitação de árvore). É altamente recomendável 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 Como usar empacotadores de módulos com o 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

Saiba mais sobre o Firebase: