Google 致力于为黑人社区推动种族平等。查看具体举措。
Questa pagina è stata tradotta dall'API Cloud Translation.
Switch to English

Aggiungi Firebase al tuo progetto JavaScript

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

Prerequisiti

  • Installa il tuo editor o IDE preferito.

  • Accedi a Firebase utilizzando il tuo account Google.

Se non disponi già di un progetto JavaScript e desideri semplicemente provare un prodotto Firebase, puoi scaricare uno dei nostri esempi di avvio rapido .

Passaggio 1 : crea un progetto Firebase

Prima di poter aggiungere Firebase alla tua app JavaScript, devi creare un progetto Firebase per connetterti alla tua app.

Visita Comprendere i progetti Firebase per ulteriori informazioni sui progetti Firebase e sulle best practice per l'aggiunta di app ai progetti.

Passaggio 2 : registra la tua app con Firebase

Dopo aver creato un progetto Firebase, puoi aggiungervi la tua app web.

Visita Comprendere i progetti Firebase per saperne di più sulle best practice e sulle considerazioni per l'aggiunta di app a un progetto Firebase.

  1. Al centro della pagina della panoramica del progetto della console Firebase , fai clic sull'icona Web ( ) per avviare il flusso di lavoro di configurazione.

    Se hai già aggiunto un'app al tuo progetto Firebase, fai clic su Aggiungi app per visualizzare le opzioni della piattaforma.

  2. Inserisci il nickname della tua app.
    Questo soprannome è un identificatore di convenienza interno ed è visibile solo a te nella console Firebase.

  3. (Facoltativo) Configura Firebase Hosting per la tua app web.

    • Puoi configurare Firebase Hosting ora o successivamente . Puoi anche collegare la tua app Web Firebase a un sito di hosting in qualsiasi momento nelle impostazioni del progetto .

    • Se scegli di configurare l'hosting adesso, seleziona un sito dall'elenco a discesa da collegare alla tua app Web Firebase.

      • Questo elenco mostra il sito di hosting predefinito del tuo progetto e tutti gli altri siti che hai impostato nel tuo progetto.

      • Qualsiasi sito che hai già collegato a un'app Web Firebase non è disponibile per ulteriori collegamenti. Ogni sito di hosting può essere collegato solo a una singola app Web Firebase.

  4. Fare clic su Registra app .

Passaggio 3 : aggiungi gli SDK Firebase e inizializza Firebase

Firebase fornisce librerie JavaScript per la maggior parte dei prodotti Firebase, inclusi Remote Config, FCM e altri. Puoi aggiungere qualsiasi libreria disponibile alla tua app.

Il modo in cui aggiungi gli SDK Firebase alla tua app web dipende dal fatto che tu abbia scelto di utilizzare Firebase Hosting per la tua app, quale strumento stai utilizzando con la tua app (come un bundler di moduli) o se stai configurando un Node.js app. Per ulteriore assistenza sulla scelta tra queste alternative, vedi Modi per aggiungere gli SDK Web alla tua app .

Se sei interessato a provare il nuovo Beta SDK ottimizzato per lo sviluppo di app modulari, seleziona l'opzione per la versione 9 (Beta). Tieni presente che non ci sono obblighi di supporto tecnico in una versione beta.

Con npm

Puoi configurare l'importazione parziale dell'SDK Firebase JavaScript e caricare solo i prodotti Firebase di cui hai bisogno. Se stai utilizzando un bundler (come Browserify o webpack), puoi import singoli prodotti Firebase quando ne hai bisogno.

  1. Installa Firebase JavaScript SDK:

    1. Se non hai già un file package.json , creane uno eseguendo il seguente comando dalla radice del tuo progetto JavaScript:

      npm init

    2. Installa il pacchetto firebase npm e salvalo nel tuo file package.json eseguendo:

      npm install --save firebase

  2. Per includere solo prodotti Firebase specifici (come Autenticazione e Cloud Firestore), import moduli Firebase:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// import * as firebase from "firebase/app"

// If you enabled Analytics in your project, add the Firebase SDK for Analytics
import "firebase/analytics";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

  3. Inizializza Firebase nella tua app:

    // TODO: Replace the following with your app's Firebase project configuration
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Dal CDN

Puoi configurare l'importazione parziale dell'SDK Firebase JavaScript e caricare solo i prodotti Firebase di cui hai bisogno. Firebase archivia ciascuna libreria dell'SDK JavaScript Firebase sulla nostra CDN (rete di distribuzione dei contenuti) globale.

  1. Per includere solo prodotti Firebase specifici (ad esempio, Authentication e Cloud Firestore), aggiungi i seguenti script in fondo al tag <body> , ma prima di utilizzare qualsiasi servizio Firebase:

    <body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-firestore.js"></script>
</body>


  2. Inizializza Firebase nella tua app:

    <body>
  <!-- Previously loaded Firebase SDKs -->

  <script>
    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    var firebaseConfig = {
      // ...
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
</body>

Dagli URL di hosting

Quando utilizzi Firebase Hosting, puoi configurare la tua app per caricare dinamicamente le librerie Firebase JavaScript SDK da URL riservati. Ulteriori informazioni sull'aggiunta di SDK tramite URL di hosting riservati .

Con questa opzione di configurazione, dopo la distribuzione su Firebase , la tua app estrae automaticamente l'oggetto di configurazione Firebase dal progetto Firebase in cui hai distribuito. Puoi distribuire la stessa base di codice a più progetti Firebase, ma non devi tenere traccia della configurazione Firebase che stai utilizzando per firebase.initializeApp() .

Questa opzione di configurazione funziona anche per testare la tua app web in locale .

  1. Per includere solo prodotti Firebase specifici (ad esempio, Analytics, Authentication o Cloud Firestore), aggiungi i seguenti script in fondo al tag <body> , ma prima di utilizzare qualsiasi servizio Firebase:

    <body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="/__/firebase/8.4.1/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="/__/firebase/8.4.1/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/8.4.1/firebase-auth.js"></script>
  <script src="/__/firebase/8.4.1/firebase-firestore.js"></script>
</body>


  2. Inizializza Firebase nella tua app (non è necessario includere l'oggetto di configurazione Firebase quando utilizzi URL di hosting riservati):

    <body>
  <!-- Previously loaded Firebase SDKs -->

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>
</body>

App Node.js.

  1. Installa Firebase JavaScript SDK:

    1. Se non hai già un file package.json , creane uno eseguendo il seguente comando dalla radice del tuo progetto JavaScript:

      npm init

    2. Installa il pacchetto firebase npm e salvalo nel tuo file package.json eseguendo:

      npm install --save firebase

  2. Utilizza una delle seguenti opzioni per utilizzare il modulo Firebase nella tua app:

    • Puoi require moduli da qualsiasi file JavaScript

      Per includere solo prodotti Firebase specifici (come Autenticazione e Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
var firebase = require("firebase/app");

// Add the Firebase products that you want to use
require("firebase/auth");
require("firebase/firestore");


    • È possibile utilizzare ES2015 per import moduli

      Per includere solo prodotti Firebase specifici (come Autenticazione e Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import firebase from "firebase/app";

// Add the Firebase services that you want to use
import "firebase/auth";
import "firebase/firestore";

  3. Inizializza Firebase nella tua app:

    // TODO: Replace the following with your app's Firebase project configuration
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Informazioni sull'oggetto di configurazione Firebase

Per inizializzare Firebase nella tua app, devi fornire la configurazione del progetto Firebase della tua app. Puoi ottenere il tuo oggetto di configurazione Firebase in qualsiasi momento.

  • Se utilizzi URL di hosting riservati , la configurazione di Firebase viene automaticamente estratta dal tuo progetto Firebase, quindi non è necessario fornire esplicitamente l'oggetto di configurazione nel codice.

  • Si sconsiglia di modificare manualmente l'oggetto di configurazione, in particolare le seguenti "opzioni Firebase" apiKey : apiKey , projectId e appID . Se inizializzi la tua app con valori non validi o mancanti per queste "opzioni Firebase" obbligatorie, gli utenti della tua app potrebbero riscontrare seri problemi.

  • Se hai abilitato Google Analytics nel tuo progetto Firebase, il tuo oggetto di configurazione contiene il campo measurementId . Ulteriori informazioni su questo campo nella pagina introduttiva di Analytics .

Ecco il formato di un oggetto di configurazione con tutti i servizi abilitati (questi valori vengono popolati automaticamente):

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Ecco un oggetto di configurazione con valori di esempio :

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

Passaggio 4 : (facoltativo) installa la CLI e distribuisci su Firebase Hosting

Se hai collegato la tua app Web Firebase a un sito di hosting Firebase, puoi distribuire il contenuto e la configurazione del tuo sito ora (quando configuri la tua app web) o in qualsiasi momento successivo.

Per eseguire il deployment su Firebase, utilizzerai la Firebase CLI, uno strumento da riga di comando.

  1. Visita la documentazione della CLI di Firebase per scoprire come installare la CLI o aggiornarla alla sua versione più recente .

  2. Inizializza il tuo progetto Firebase. Esegui il seguente comando dalla radice della directory dell'app locale:

    firebase init

  3. Distribuisci i tuoi contenuti e la configurazione di hosting su Firebase Hosting.

    Sito di hosting predefinito

    Per impostazione predefinita, ogni progetto ha Firebase sottodomini gratuiti sul web.app e firebaseapp.com domini ( PROJECT_ID .web.app e PROJECT_ID .firebaseapp.com ).

    1. Distribuisci sul tuo sito. Esegui il seguente comando dalla directory principale della tua app:

      firebase deploy

    2. Visualizza il tuo sito in uno dei tuoi siti predefiniti:

      • PROJECT_ID .web.app
      • PROJECT_ID .firebaseapp.com

    Sito di hosting non predefinito

    I progetti Firebase supportano più siti (questi sono considerati i tuoi siti non predefiniti ). È possibile aggiungere altri siti al progetto durante il flusso di lavoro di configurazione dell'app Web della console o dalla pagina Hosting della console.

    1. Aggiungi il tuo sito al tuo file firebase.json (che è stato creato durante firebase init ).

      Tieni presente che questa configurazione firebase.json presuppone che tu abbia repository separati per ciascuno dei tuoi siti.

      {
  "hosting": {
    "site": "SITE_ID",
    "public": "public",

    // ...
  }
}

    2. Distribuisci sul tuo sito. Esegui il seguente comando dalla directory principale della tua app:

      firebase deploy --only hosting:SITE_ID

    3. Visualizza il tuo sito in:

      • SITE_ID .web.app
      • SITE_ID .firebaseapp.com

Passaggio 5 : accedi a Firebase nella tua app

L'SDK Firebase JavaScript supporta i seguenti prodotti Firebase. Ogni prodotto è opzionale ed è possibile accedervi come mostrato.

Scopri i metodi disponibili nella documentazione di riferimento di Firebase JavaScript .

Prodotto Firebase Spazio dei nomi (v8 e versioni precedenti) ragnatela Node.js
Analytics firebase.analytics()
Autenticazione firebase.auth()
Cloud Firestore firebase.firestore()
Cloud Functions per Firebase Client SDK firebase.functions()
Messaggistica cloud firebase.messaging()
Archiviazione nel cloud firebase.storage()
Monitoraggio delle prestazioni (versione beta ) firebase.performance()
Database in tempo reale firebase.database()
Remote Config (versione beta ) firebase.remoteConfig()

Librerie disponibili

Prossimi passi

Informazioni su Firebase:

Aggiungi i servizi Firebase alla tua app: