0

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&hellip;</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

1 respuesta 1

1

Veo que tienes ya instanciado la librería de firebase en tu host. Siguiendo la documentación oficial debes primero instanciar tu base de datos de firebase con el siguiente comando:

var database = firebase.database();

de esta manera tomas la instancia de la base de datos de firebase. Según entiendo para tu progama necesitas consultar los datos una sola vez y no escuchar en tiempo real, en ese caso y siguiendo los ejemplos de la documentación:

var url = new URL(window.location.href);
var userId = url.searchParams.get("id");

return database.ref('contactos/'+userId).once('value').then((snapshot) => {
    var email = snapshot.val().email;
    // . . . 
});

De esta manera estas primero leyendo tu URL, ya que contiene el parámetro que estas buscando, una vez encontrado, haces una referencia a tu base de datos al id que leíste de tu url. Se utiliza la función once() para cargar los datos una sola vez, en caso que quieras detectar cambios, utiliza la función on(). Si encuentra el valor y todo fue correcto almacena en snapshot los datos, dentro de esta función asignamos los datos que queremos leer, aquí puedes llamar alguna función para mandar estos datos para mostrar en pantalla. Te recomiendo darle un vistazo a la documentación oficial, créeme que es de gran ayuda.

2
  • Gracias @redsalas. Donde pongo esos comandos... en mi index.html? Se ve como si fuera un código de JavaScript, hago un archivo con extensión JS? Debo instalar un servidor de JS? Cómo lo hago?
    – David L
    el 8 ene. 2021 a las 19:56
  • No amigo, debes ingresar ese código bien sea dentro de una etiqueta <script></script> o en algún archivo .js que hayas creado.
    – RedSalas
    el 11 ene. 2021 a las 14:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.