Etiqueta: html

Vamos a consulta una colección de firebase (Cloud Firestore) desde javascript.

Lo primero que necesitamos es los datos de configuración que nos lo va a proporciona el mismo firebase, entramos en https://console.firebase.google.com/ seleccionamos el proyecto, a continuación pinchamos en rulina de la izquierda (ver la imagen)

Una vez dentro de la configuración bajamos hasta el apartado «Firebase SDK snippet» copiamos el código javascript y nos lo llevamos a nuestra fichero html.

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxx.firebaseapp.com",
    databaseURL: "https://xxxxxxxxxxxx.firebaseio.com",
    projectId: "xxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxx.appspot.com",
    messagingSenderId: "xxxxxxxxxxxx",
    appId: "1:xxxxxxxxxxxx:web:xxxxxxxxxxxx",
    measurementId: "G-xxxxxxxxxxxx"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

En el siguiente código vamos a iniciar la conexión a partir de la configuración que hemos obtenido ante desde firebase.

firebase.initializeApp(config);
var db = firebase.firestore();

Ya estaríamos conectado, para realizar una consulta de datos sería con la propiedad «collection»

db.collection("coches").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
           console.log("Id",doc.id);
           console.log("Datos",doc.data());
        });
    });

Mostraremos por consola el «Id» y los «Datos» de nuestra tabla «coches»

Si queremos ordenar el listado por un campos, habría que añadir «orderBy».

db.collection("coches").orderBy("fechaPublicacion", "desc").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
           console.log("Id",doc.id);
           console.log("Datos",doc.data());
        });
    });

Nos arrojara el listado de coches ordenado por «fechaPublicacion».

El código javascript (yo lo he incorporado en un fichero html) completo quedaría así:

<script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
        apiKey: "xxxxxxxxxxxxxxxxxxxx",
        authDomain: "xxxxxxxxxxxx.firebaseapp.com",
        databaseURL: "https://xxxxxxxxxxxx.firebaseio.com",
        projectId: "xxxxxxxxxxxx",
        storageBucket: "xxxxxxxxxxxx.appspot.com",
        messagingSenderId: "xxxxxxxxxxxx",
        appId: "1:xxxxxxxxxxxx:web:xxxxxxxxxxxx",
        measurementId: "G-xxxxxxxxxxxx"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();

    firebase.initializeApp(config);
    var db = firebase.firestore();

    db.collection("coches").orderBy("fechaPublicacion", "desc").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            console.log("Id", doc.id);
            console.log("Datos", doc.data());
        });
    });

</script>

Si queremos hacer una consulta para filtrar los resultados sería añadiendo «where» :

db.collection("coches").where("diesel", "==", "si")
.get().then(function (querySnapshot) {
    querySnapshot.forEach(function (doc) {
           console.log("Id", doc.id);
           console.log("Datos", doc.data());
    });
});

Para recuperar un solo documento por su id:

 db.collection("coches").doc("5LMBbOG8vHWAEKb77wBv")
    .get().then(function (doc) {
            var coche = doc.data();
            console.log("Coche", coche);
    }).catch(function (error) {
            console.log("Error", error);
    });