Google 致力于为黑人社区推动种族平等。查看具体举措。

Aggiungi Firebase al tuo progetto JavaScript

Segui questa guida per utilizzare l'SDK JavaScript di Firebase nella tua app Web o come client per l'accesso dell'utente finale, ad esempio, in un'applicazione desktop o IoT Node.js.

Passo 1: Creare un progetto Firebase e registrare la vostra applicazione

Prima di poter aggiungere Firebase alla tua app JavaScript, devi creare un progetto Firebase e registrare la tua app con quel progetto. Quando registri la tua app con Firebase, otterrai un oggetto di configurazione Firebase che utilizzerai per connettere la tua app con le risorse del tuo progetto Firebase.

Visita Capire Firebase Progetti per imparare di più su progetti Firebase e best practice per l'aggiunta di applicazioni per i progetti.

Se non si dispone già di un progetto di JavaScript e vogliono solo provare un prodotto Firebase, è possibile scaricare uno dei nostri esempi rapidi .

Fase 2: installare l'SDK e inizializzare Firebase

Questa pagina descrive le istruzioni di configurazione per la versione 9 del Firebase JS SDK, che utilizza un modulo JavaScript formato.

Questo flusso di lavoro utilizzi NPM e richiede fardellatrici modulo o JavaScript utensili quadro perché l'SDK v9 è ottimizzato per lavorare con fardellatrici modulo per eliminare codice inutilizzato (albero-agitando) e dimensione diminuzione SDK.

  1. Installa Firebase usando npm:

    npm install firebase

  2. Inizializza Firebase nella tua app e crea un oggetto App Firebase:

    import { initializeApp } from 'firebase/app';

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

const app = initializeApp(firebaseConfig);

    Un'app Firebase è un oggetto simile a un contenitore che memorizza la configurazione comune e condivide l'autenticazione tra i servizi Firebase. Dopo aver inizializzato un oggetto App Firebase nel codice, puoi aggiungere e iniziare a utilizzare i servizi Firebase.

Fase 3: L'accesso Firebase nella tua app

I servizi Firebase (come Cloud Firestore, Authentication, Realtime Database, Remote Config e altro) sono disponibili per l'importazione all'interno di singoli sottopacchetti.

L'esempio seguente mostra come utilizzare l'SDK Cloud Firestore Lite per recuperare un elenco di dati.

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

Fase 4: Utilizzare un modulo bundler (webpack / Rollup) per la riduzione della dimensione

Firebase Web SDK è progettato per funzionare con bundle di moduli per rimuovere qualsiasi codice inutilizzato (tree-shaking). Consigliamo vivamente di utilizzare questo approccio per le app di produzione. Strumenti come l' angolare CLI , Next.js , Vue CLI , o Creare Reagire App gestisce automaticamente modulo bundling per le librerie installate attraverso NPM e importati nella vostra base di codice.

Vedi la nostra guida Uso di fardellatrici modulo con Firebase per ulteriori informazioni.

Servizi Firebase disponibili per il Web

Ora che sei configurato per utilizzare Firebase, puoi iniziare ad aggiungere e utilizzare uno dei seguenti servizi Firebase disponibili nella tua app web.

Prossimi passi

Informazioni su Firebase: