Segui questa guida per utilizzare l'SDK JavaScript Firebase nella tua app Web o come client per l'accesso degli utenti finali, ad esempio, in un desktop Node.js o in un'applicazione IoT.
Passaggio 1 : crea un progetto Firebase e registra la tua app
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 Comprendere i progetti Firebase per saperne di più sui progetti Firebase e sulle best practice per l'aggiunta di app ai progetti.
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 2 : installa l'SDK e inizializza Firebase
Questa pagina descrive le istruzioni di configurazione per la versione 9 di Firebase JS SDK, che utilizza un formato modulo JavaScript .
Questo flusso di lavoro utilizza npm e richiede i bundle di moduli o gli strumenti del framework JavaScript perché l'SDK v9 è ottimizzato per funzionare con i bundle di moduli per eliminare il codice inutilizzato (tree-shaking) e ridurre le dimensioni dell'SDK.
Installa Firebase usando npm:
npm install firebase
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 archivia la configurazione comune e condivide l'autenticazione tra i servizi Firebase. Dopo aver inizializzato un oggetto dell'app Firebase nel codice, puoi aggiungere e iniziare a utilizzare i servizi Firebase.
Passaggio 3 : accedi a Firebase nella tua app
I servizi Firebase (come Cloud Firestore, Authentication, Realtime Database, Remote Config e altri) 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; }
Passaggio 4 : utilizzare un bundler di moduli (webpack/rollup) per la riduzione delle dimensioni
Firebase Web SDK è progettato per funzionare con i bundle di moduli per rimuovere qualsiasi codice inutilizzato (scuotimento dell'albero). Consigliamo vivamente di usare questo approccio per le app di produzione. Strumenti come Angular CLI , Next.js , Vue CLI o Create React App gestiscono automaticamente il raggruppamento dei moduli per le librerie installate tramite npm e importate nella codebase.
Consulta la nostra guida Utilizzo dei bundle di moduli 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.
I seguenti comandi mostrano come importare le librerie Firebase installate localmente con npm
. Per opzioni di importazione alternative, vedere la documentazione delle librerie disponibili .
Prossimi passi
Ulteriori informazioni su Firebase:
Esplora app Firebase di esempio .
Ottieni un'esperienza pratica con Firebase Web Codelab .
Esplora il codice open source in GitHub .
Esamina gli ambienti supportati per l'SDK JavaScript di Firebase.
Accelera il tuo sviluppo con librerie open source aggiuntive mantenute da Firebase, come AngularFire , RxFire e FirebaseUI per il web .
Preparati ad avviare la tua app:
- Imposta avvisi di budget per il tuo progetto in Google Cloud Console.
- Monitora il dashboard di utilizzo e fatturazione nella console Firebase per avere un quadro generale dell'utilizzo del tuo progetto su più servizi Firebase.
- Esamina l'elenco di controllo per l'avvio di Firebase .