Soy nuevo en Firebase Hosting y JS (usualmente desarrollo en Flutter). Quisiera hacer algo que creo es fácil pero realmente no he encontrado la forma. Lo que necesito hacer es consultar mi base de datos desde una interfaz web. Para tal efecto, creé en Firebase Realtime Database una base como la siguiente:
{
"contactos" : {
"-MGcSVviK2nxd52KNtZ" : {
"email" : "[email protected]",
"fecha" : 1599480318009,
"nombre" : "David R",
},
"-RTcnLta8ud8Dw168oLS" : {
"email" : "[email protected]",
"fecha" : 1599486127716,
"nombre" : "Roger H",
}
}
}
Después instalé las Firebase Tools desde mi línea de comandos en VS Code con npm install -g firebase-tools
y después hice el proceso de login en Firebase con firebase init
hasta obtener el aviso de "Successfull Configuration" en la Web. El index.html que se creó automáticamente fue el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
<!-- update the version number as needed -->
<script defer src="/__/firebase/8.2.1/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/8.2.1/firebase-auth.js"></script>
<script defer src="/__/firebase/8.2.1/firebase-database.js"></script>
<script defer src="/__/firebase/8.2.1/firebase-firestore.js"></script>
<script defer src="/__/firebase/8.2.1/firebase-functions.js"></script>
<script defer src="/__/firebase/8.2.1/firebase-messaging.js"></script>
<script defer src="/__/firebase/8.2.1/firebase-storage.js"></script>
<script defer src="/__/firebase/8.2.1/firebase-analytics.js"></script>
<script defer src="/__/firebase/8.2.1/firebase-remote-config.js"></script>
<script defer src="/__/firebase/8.2.1/firebase-performance.js"></script>
<!--
initialize the SDK after all desired features are loaded, set useEmulator to false
to avoid connecting the SDK to running emulators.
-->
<script defer src="/__/firebase/init.js?useEmulator=true"></script>
<style media="screen">
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
@media (max-width: 600px) {
body, #message { margin-top: 0; background: white; box-shadow: none; }
body { border-top: 16px solid #ffa100; }
}
</style>
</head>
<body>
<div id="message">
<h2>Welcome</h2>
<h1>Firebase Hosting Setup Complete</h1>
<p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
<a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
</div>
<p id="load">Firebase SDK Loading…</p>
<script>
document.addEventListener('DOMContentLoaded', function() {
const loadEl = document.querySelector('#load');
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
// // The Firebase SDK is initialized and available here!
//
// firebase.auth().onAuthStateChanged(user => { });
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
// firebase.firestore().doc('/foo/bar').get().then(() => { });
// firebase.functions().httpsCallable('yourFunction')().then(() => { });
// firebase.messaging().requestPermission().then(() => { });
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
// firebase.analytics(); // call to activate
// firebase.analytics().logEvent('tutorial_completed');
// firebase.performance(); // call to activate
//
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
try {
let app = firebase.app();
let features = [
'auth',
'database',
'firestore',
'functions',
'messaging',
'storage',
'analytics',
'remoteConfig',
'performance',
].filter(feature => typeof app[feature] === 'function');
loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
} catch (e) {
console.error(e);
loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
}
});
</script>
</body>
</html>
Con esto, lo que quisiera lograr es que cuando consulte una URL como...
https://defaultname.web.app/-MGcSVviK2nxd52KNtZ
o
https://defaultname.web.app/contactos?id=-MGcSVviK2nxd52KNtZ
cualquier persona pueda leer el contenido de ese documento, en este caso:
Email [email protected]
Fecha 1599480318009
Nombre David R
1. Cómo puedo consultar y desplegar los resultados de Firebase en mi index.html?
2. En caso que para lograr el objetivo requiera usar JS, cómo sería el procedimiento paso a paso? Por favor tener en cuenta que nunca he instalado un servidor en JS o algo por el estilo y no sé cómo hacer el link entre index.html y el JS