Quiero mostrar 'blogs' de mi base de datos en mi página web. Ya incluyo los paquetes firebase-app y firebase-database , pero aún no reconoce initializeApp .
Muestra:
Error de referencia no capturado: initializeApp no está definido
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-database.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h2> hello world </h2> <!-- the functions you need from the SDKs you need--> <!-- Import the functions you need from the SsDKs you need--> <script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-database.js"></script> <script> // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: "AIzaSyDwq-CA3Fm1oYj3jLnPeeczNb9xXrKYtbo", authDomain: "firebasic-a87d7.firebaseapp.com", databaseURL: "https://firebasic-a87d7-default-rtdb.asia-southeast1.firebasedatabase.app", projectId: "firebasic-a87d7", storageBucket: "firebasic-a87d7.appspot.com", messagingSenderId: "701224819501", appId: "1:701224819501:web:69eedfd3468db6f3f511a4", measurementId: "G-WVEYYLK2VJ" }; // Initialize Firebase const app = initializeApp(firebaseConfig); const db = firebase.database(); const blogRef = db.ref(blogs).on('value',handleSuccess,handleError); function handleSuccess(items){ console.log(items); } function handleError(error){ console.log(error); } </script> </body> </html>initializeApp / firebase.initializeApp están disponibles cuando se ha cargado firebase-app.js .
Más bien use v9 , que aún se puede configurar a través de CDN:
<body> <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services --> <script type="module"> import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.1.2/firebase-app.js' import { auth } from 'https://www.gstatic.com/firebasejs/9.1.2/firebase-auth.js' import { database } from 'https://www.gstatic.com/firebasejs/9.1.2/firebase-database.js' </script> </body>O v8 con carga diferida:
<script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script> <script defer src="./init-firebase.js"></script> Archivo init-firebase.js :
var firebaseConfig = { ... }; firebase.initializeApp( firebaseConfig );Firebase agregará un objeto global en su ventana, firebase que contiene el método initializeApp, por lo que debe acceder a él a través del objeto firebase pero no puede llamar a initializeApp directamente
Por cierto, su configuración tiene una `firebase/URL de base de datos no válida
considere ver este video para tener una introducción sobre FB DB Comience con Firebase en la web
Asegúrese de cambiar las credenciales de su aplicación y base de datos en Firebase, porque ahora son públicas y todos las vieron.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h2> hello world </h2> <!-- the functions you need from the SDKs you need--> <!-- Import the functions you need from the SsDKs you need--> <script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-database.js"></script> <script defer async> console.log(firebase); // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: "AIzaSyDwq-CA3Fm1oYj3jLnPeeczNb9xXrKYtbo", authDomain: "firebasic-a87d7.firebaseapp.com", databaseURL: "https://firebasic-a87d7-default-rtdb.asia-southeast1.firebasedatabase.app", projectId: "firebasic-a87d7", storageBucket: "firebasic-a87d7.appspot.com", messagingSenderId: "701224819501", appId: "1:701224819501:web:69eedfd3468db6f3f511a4", measurementId: "G-WVEYYLK2VJ" }; // Initialize Firebase const app = firebase.initializeApp(firebaseConfig); const db = firebase.database(); const blogRef = db.ref(blogs).on('value', handleSuccess, handleError); function handleSuccess(items) { console.log(items); } function handleError(error) { console.log(error); } </script> </body> </html>