Resumen - Curso de Firebase para Web

Espero que mis anotaciones te sean de mucha ayuda. 😄

Consola de Firebase

https://console.firebase.google.com/

Conexión manual desde la consola

• Agrega el script a tu código.
• Firebase recomienda que no se inserte el script completo si hay funcionalidades que no se usen, sino, que se usen los scripts por funcionalidad. Ej. URL/firebase-app.js
• En la consola de firebase, navega hacia “Autenticación” y en la sección “Dominios autorizados”, ingresa la URL del sitio o “localhost” si quieres probar en local.
• Es necesario que tu página web esté en un ambiente de servidor local, para esto puedes usar una extensión de Google Chrome “web server for chrome”. Simplemente seleccionas la carpeta de tu proyecto y te devuelve la URL a tu servidor local.

Comprobación de la conexión

• Para comprobar, en el directorio de tu proyecto crea un archivo “index.js” que contenga “console.log(firebase);” y enlazalo en tu “index.html” justo luego del script de firebase.
• Luego compruebas todos los metodos que muestra en la consola del navegador.

Conexión con firebase-tools

• Esta es la manera más adecuada de hacer la conexión.
• Para que esto funcione debes tener el script de inicialización del proyecto en los archivos .html
• Para iniciar, debes ingresar a la terminal y descargar los archivos de firebase-tools por npm, ejecutando: “sudo npm install -g firebase-tools”
• Una vez instalados los archivos, debes hacer login desde la consola con “firebase login”, conectará con tu cuenta de Google.
• Es momento de iniciar Firebase, con el apuntador en el directorio de tu proyecto!! “Firebase init”.
• Con la barra espaciadora puedes seleccionar las caracteristicas que quieres configurar en tu proyecto, para iniciar, selecciona “database” y “hosting”.
• Luego te muestra tu lista de proyectos para que puedas seleccionar el proyecto al que quieres asociar tu directorio o puedes crear un nuevo proyecto.
• Luego en la consola de firebase inicia el servidor local con “firebase serve”.

Autenticación con Google

• Script para iniciar sesión con Google

var btnLogin = document.getElementById("btnLogin");

// Para verificar si hay usuario activo
firebase.auth().onAuthStateChanged(function(user){
    console.log(user)
    if (user ) {
        console.log("tenemos usuario")
    }else{
        console.log("no tenemos usuario")
    }
});

//Para iniciar sesion con google permitiendo obtener solo los contactos

btnLogin.addEventListener("click", function(){
    var provider = new firebase.auth.GoogleAuthProvider();
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    firebase.auth().signInWithPopup(provider)
    .then(function(datosUsuario){
        console.log(datosUsuario)
    }).catch(function(err){
        console.log(err)
    })
})

Cierre de sesión autenticación con Google

• Script para iniciar sesion y cerrar sesión cambiando el boton segun la sesion.

var btnLogin = document.getElementById("btnLogin");
var btnLogout = document.getElementById("btnLogout");


//Acciones de acuerdo a la sesion

firebase.auth().onAuthStateChanged(function(user){
    console.log(user)
    if (user ) {
        console.log("tenemos usuario");
        mostrarCerrar();
    }else{
        console.log("no tenemos usuario");
        mostrarIniciar();
    }
});

//Inicio de sesion
btnLogin.addEventListener("click", function(){
    //event.preventDefault();  evita que se recargue la pagvar provider = new firebase.auth.GoogleAuthProvider();
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    firebase.auth().signInWithPopup(provider)
    .then(function(datosUsuario){
        console.log(datosUsuario)
    }).catch(function(err){
        console.log(err)
    })
});

//Cierre de sesion
btnLogout.addEventListener("click", function(){
    //event.preventDefault();  evita que se recargue la pag
    firebase.auth().signOut().then(function(){
        alert("se ha cerrado la sesion")
    })
})

//Funciones para mostrar y ocultar botonesfunctionmostrarCerrar(){
    btnLogin.style.display="none";
    btnLogout.style.display="block";
}

functionmostrarIniciar(){
    btnLogout.style.display="none";
    btnLogin.style.display="block";
}

Autenticación con Facebook

• Al querer habilitar el inicio de sesión con Facebook, necesitarás un “App ID” y un “App Secret”. Para conseguir esto debes ingresar a developers.facebook.com y crear una nueva aplicación.
• Debes seleccionar “Inicio de sesión con Facebook” y en el menú izquierdo, en configuración básica, encontrarás tu “App ID” y “App Secret” pegalo en Firebase y copia el enlace para OAuth que te dará.
• Otra vez en facebook, en la parte inferior-izquierda estará otro botón de configuración de tu Inicio de sesión con Facebook y encontrarás el campo en el cual debes pegar la URL OAuth para luego guardar los cambios y proseguir a habilitar el inicio de sesión en código.
• En el código casi no hay cambios, el inicio de sesión es similar, sólo se debe cambiar el “addScope” y el “provider”. El inicio de sesión con facebook sería algo así:

var fbIn = document.getElementById("fbIn");

//Inicio de sesión Facebook
fbIn.addEventListener("click", function(){
    //event.preventDefault();  evita que se recargue la pagvar provider = new firebase.auth.FacebookAuthProvider();
    provider.addScope('public_profile');
    firebase.auth().signInWithPopup(provider)
    .then(function(datosUsuario){
        console.log(datosUsuario)
    }).catch(function(err){
        console.log(err)
    })
});

• Ejemplo de código completo con ambos inicios de sesión

var GoogleIn = document.getElementById("GoogleIn");
var fbIn = document.getElementById("fbIn");
var btnLogout = document.getElementById("btnLogout");


firebase.auth().onAuthStateChanged(function(user){
    if (user ) {
        console.log(user + " ha iniciado sesión");
        mostrarCerrar();
    }else{
        console.log("No hay sesión");
        mostrarIniciar();
    }
});

//Inicio de sesión Google
GoogleIn.addEventListener("click", function(){
    //event.preventDefault();  evita que se recargue la pagvar provider = new firebase.auth.GoogleAuthProvider();
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    firebase.auth().signInWithPopup(provider)
    .then(function(datosUsuario){
        console.log(datosUsuario)
    }).catch(function(err){
        console.log(err)
    })
});

//Inicio de sesión Facebook
fbIn.addEventListener("click", function(){
    //event.preventDefault();  evita que se recargue la pagvar provider = new firebase.auth.FacebookAuthProvider();
    provider.addScope('public_profile');
    firebase.auth().signInWithPopup(provider)
    .then(function(datosUsuario){
        console.log(datosUsuario)
    }).catch(function(err){
        console.log(err)
    })
});

//Cierre de sesión
btnLogout.addEventListener("click", function(){
    //event.preventDefault();  evita que se recargue la pag
    firebase.auth().signOut().then(function(){
        alert("se ha cerrado la sesion")
    })
});

//Funciones para mostrar y ocultar botones según sesiónfunctionmostrarCerrar(){
    fbIn.style.display="none";
    GoogleIn.style.display="none";
    btnLogout.style.display="block";
};

functionmostrarIniciar(){
    btnLogout.style.display="none";
    fbIn.style.display="block";
    GoogleIn.style.display="block";
};

Conectar la base de datos

• La base de datos y la autenticación están separadas en Firebase.
• En Firebase tenemos que ir a la sección “base de datos” y crear una nueva. Por ahora trabajarémos con la “Realtime” y seleccionas “Base de datos de prueba”. Esto hará que no tenga reglas de seguridad y puedas leer y escribir sobre la base de datos sin problemas.
• En código nos toca hacer la referencia a la base de datos creando las siguientes variables:

varref = firebase.database().ref("usuario");
var usuario = {}

• Posteriormente la función con la que enviarémos los datos a la base de datos:

//Agregar usuario
function addUsuario(usuario, uid){
    ref.child(uid).update(usuario)
}

• Y En este caso, añadirémos esta función al evento que desencadena el inicio de sesión de facebook, de esta manera:

//Inicio de sesión Facebook
fbIn.addEventListener("click", function(){
    //event.preventDefault();  evita que se recargue la pagvar provider = new firebase.auth.FacebookAuthProvider();
    provider.addScope('public_profile');
    firebase.auth().signInWithPopup(provider)
    .then(function(datosUsuario){
        console.log(datosUsuario);
        usuario = {
            nombre: datosUsuario.user.displayName,
            email: datosUsuario.user.email,
            uid: datosUsuario.user.uid
        }
        addUsuario(usuario, usuario.uid);
    }).catch(function(err){
        console.log(err)
    })
});

Guardar información en la base de datos

• Existen varios métodos para enviar información a la base de datos:
• push
• update

var refTest = firebase.database().ref("test");

El método PUSH sirve para agregar un nodo nuevo.

//Subida PUSH
btnPush.addEventListener("click", function(){
    var objeto = {
        curso: "firebase",
        profesor: "angel",
        contenidos: {
            primero: "autenticacion"
        }
    }
    refTest.push(objeto).then(function(){
        alert("Subida exitosa")
    }).catch(function(){
        alert("Tuvimos un error");
        console.log(err);
    })
})

El método UPDATE actualiza la información del nodo al que hacemos referencia. Si no existe, lo crea.

//Subida UPDATE
btnUpdate.addEventListener("click", function(){
    var objeto2 = {
        curso:"desarrollo web",
        profesor:"Leonidas",
        contenidos: {
            primero: "formularios"
        }
    }
    refTest.child("-LI99bMOE4Z4dLW_2MhS").update(objeto2).then(function(){
        alert("Actualizacion exitosa")
    }).catch(function(){
        alert("Error en actualizacion");
        console.log(err);
    })
})

• set
• remove

El método SET sobreescribe la información del nodo, es decir, borra todo y escribe lo nuevo.

//Subida UPDATE
btnUpdate.addEventListener("click", function(){
    var objeto2 = {
        curso:"desarrollo web",
        profesor:"Leonidas",
        contenidos: {
            primero: "formularios"
        }
    }
    refTest.child("-LI99bMOE4Z4dLW_2MhS").update(objeto2).then(function(){
        alert("Actualizacion exitosa")
    }).catch(function(){
        alert("Error en actualizacion");
        console.log(err);
    })
})

El método REMOVE elimina la información del nodo

//Subida SET
btnSet.addEventListener("click", function(){
    var objeto3 = {
        curso: "Responsive",
        profesor: "Leonidas",
        contenidos: {
            primero: "media-query"
        }
    }
    refTest.set(objeto3).then(function(){
        alert("Funciono el comando Set")
    }).catch(function(){
        alert("Error haciendo Set");
        console.log(err);
    })
})

Leer un registro en Firebase Real Time

• Para leer la información de la base de datos tenemos dos métodos
• On = Nos permite escuchar siempre la base de datos.
• Once = Solo escucha una vez y luego deja de escuchar.
• Ejemplo válido para ambos comandos:

var perfilNombre = document.getElementById("perfilNombre");
var perfilEmail = document.getElementById("perfilEmail");

leerInfo();

functionleerInfo(){
    ref.child("n75iJt0D6BRvWKLOy8cPhxIZwqm2").on('value', function(data){
        console.log(data.val());
        llenarInfo(data.val().nombre, data.val().email)
    })
}

functionllenarInfo(nombre, email){
    perfilNombre.innerHTML = nombre;
    perfilEmail.innerHTML = email;
}

Actualizar un registro en Firebase Real Time

• Ejemplo actualizando la informacion de un usuario en la BD desde un formulario

var nombreForm = document.getElementById("nombreForm");
var emailForm = document.getElementById("emailForm");
var telefonoForm = document.getElementById("telefonoForm");
var calleForm = document.getElementById("calleForm");
var interiorForm = document.getElementById("interiorForm");
var coloniaForm = document.getElementById("coloniaForm");
var cpForm = document.getElementById("cpForm");

functioneditarDatos(){
    var obj = {
        nombre: nombreForm.value,
        email: emailForm.value,
        telefono: telefonoForm.value,
        direccion: {
            calle: calleForm.value,
            interior: interiorForm.value,
            colonia: coloniaForm.value,
            cp: cpForm.value
        }
    }
    console.log(obj)
    ref.child(firebase.auth().currentUser.uid).update(obj);
}

• Estado actual del archivo “Perfil.js”

var btnLogout = document.getElementById("btnLogout");

var ref = firebase.database().ref("usuario");
var usuario = {};

var datosPerfil = document.getElementById("datosPerfil");
var formularioPerfil = document.getElementById("formularioPerfil");
var cancelForm = document.getElementById("cancelForm");
var nombreForm = document.getElementById("nombreForm");
var emailForm = document.getElementById("emailForm");
var telefonoForm = document.getElementById("telefonoForm");
var calleForm = document.getElementById("calleForm");
var interiorForm = document.getElementById("interiorForm");
var coloniaForm = document.getElementById("coloniaForm");
var cpForm = document.getElementById("cpForm");

var perfilNombre = document.getElementById("perfilNombre");
var perfilEmail = document.getElementById("perfilEmail");

var perfilEditar = document.getElementById("perfilEditar");

functionleerInfo(userId){
    ref.child(userId).on('value', function(data){
        console.log(data.val());
        llenarInfo(data.val().nombre, data.val().email)
    })
}

functionllenarInfo(nombre, email){
    perfilNombre.innerHTML = nombre;
    perfilEmail.innerHTML = email;
}

firebase.auth().onAuthStateChanged(function(user){
    if (user ) {
        console.log(user.email + " ha iniciado sesión");
        leerInfo(user.uid);
    }else{
        window.location.href="index.html";
        console.log("No hay sesión");
    }
});

//Cierre de sesión
btnLogout.addEventListener("click", function(){
    //event.preventDefault();  evita que se recargue la pag
    firebase.auth().signOut().then(function(){
        alert("se ha cerrado la sesion")
    })
})

perfilEditar.addEventListener("click", function(){
    datosPerfil.style.display = "none";
    formularioPerfil.style.display = "block";
})

cancelForm.addEventListener("click", function(){
    formularioPerfil.style.display = "none";
    datosPerfil.style.display = "block";
})

functioneditarDatos(){
    var obj = {
        nombre: nombreForm.value,
        email: emailForm.value,
        telefono: telefonoForm.value,
        direccion: {
            calle: calleForm.value,
            interior: interiorForm.value,
            colonia: coloniaForm.value,
            cp: cpForm.value
        }
    }
    console.log(obj)
    ref.child(firebase.auth().currentUser.uid).update(obj).then(function(){
        formularioPerfil.style.display = "none";
        datosPerfil.style.display = "block";
    })
    nombreForm.innerHTML = "";
}

Reglas de seguridad de Firebase

{
  /*-- Visit https://firebase.google.com/docs/database/ ---*/
  "rules": { 
    "usuario":{
      "$uid":{
        ".read": "$uid == auth.uid"".write": "$uid == auth.uid"
      }
    }
  }
}

• En el ejemplo anterior “rules” hace referencia a la base de datos entera. Dentro de la base de datos, apuntamos al nodo “usuario”, dentro de “usuario” definimos que “$uid” (cualquier uid y lo que este dentro) puede leerse y escribirse cuando ese mismo “$uid” coincida con el “uid.auth” (es decir, con el uid autenticado en la sesión actual). Esto quiere decir que cada usuario solo podrá modificar su propia información dentro del nodo “usuario” de la Base de datos.

Reglas adicionales

{
  "rules": {
    "usuario":{
      ".read": true,
      "$uid":{
        ".read": false;
      }
    }
  }
}

• En este ejemplo, cualquiera puede leer toda la información en el nodo “usuario”, menos el “$uid”, sea cual sea. ¡FALSO!
• Todo lo que está en usuario puede leerse, incluso las “$uid” por cuestión de jerarquía, las reglas inferiores deben obedecer las reglas superiores.

{
  "rules": {
    "usuario":{
      "$uid":{
        ".read": false,
          "write": 'root.child('admin').hasChild(auth.uid)'
      }
    },
    "admin": {
      
    },
    ".records": {
      	".indexOn": "tiempo",
        ".validate": 'newData.val().contains('1')',
      	".validate": 'newData.val().isString()'
    }
  }
}

• Desglosando este ejemplo:

"rules": {
    "usuario":{
      "$uid":{
        ".read": false,
          "write": 'root.child('admin').hasChild(auth.uid)'
      }
    },

• Esto quiere decir que ningún “usuario” puede leer pero con la escritura es diferente.
• root = Raiz de la base de datos
• child(‘admin’) = El hijo llamado admin
• hasChild(auth.uid) = tiene un hijo (que tiene el uid que esta autenticado en la sesion actual)
• Por tanto: Únicamente pueden escribir los usuarios que tengan su uid registrado en el nodo admin.

".records": {
	".indexOn": "tiempo",
}

• .indexOn nos permite organizar los elementos dentro de “records” usando como referencia el nodo llamada “tiempo”.

".records": {
	".validate": 'newData.val().contains('1')',
	".validate": 'newData.val().isString()'
}

• .validate nos sirve para validar información.
• newData.val().contains([algo]) = el valor de los nuevos datos que ingresen, contiene lo que sea que especifiques en “algo”.
• newData.val().isString() = el valor de los nuevos datos que ingresen debe ser cadena de texto.

Roles

• En este ejemplo se suben dos tipos de guitarras, VIP y NORMAL. Se valida el tipo de guitarra y se envia a su respectivo nodo en la base de datos.

var ref = firebase.database().ref("usuario");
var refGuitarras = firebase.database().ref("guitarras");

var nombre = document.getElementById("nombre");
var precio = document.getElementById("precio");
var descripcion = document.getElementById("descripcion");
var tipo = document.getElementById("tipo");
var img = document.getElementById("img");

firebase.auth().onAuthStateChanged(function(user){
    if (user) {
        console.log("Conectado")
    }else{
        window.location.href="index.html"
    }
})

functionnuevaGuitarra(){
    event.preventDefault();
    var obj = {
        nombre: nombre.value,
        descripcion: descripcion.value,
        tipo: tipo.value,
        precio: precio.value
    }
    console.log(obj);
    if(tipo.value=="normal"){
        console.log(tipo.value);
        subirGuitarra(obj, tipo.value);
    }elseif(tipo.value=="vip"){
        console.log(tipo.value);
        subirGuitarra(obj, tipo.value);
    }else{
        alert("El tipo debe ser normal o vip")
    }
}

functionsubirGuitarra(guitarra, tipo){
    refGuitarras.child(tipo).push(guitarra);
    console.log("Subida exitosa");
}

• Pero lo más importante son las reglas, donde nos aseguramos de que sólamente los administradores que estén autenticados en la sesión actual son los que pueden hacer cambios en el nodo de guitarras y el mismo nodo de admins.

{
  "rules": {
    "usuario":{
      "$uid":{
        ".read": "$uid === auth.uid",
      	".write": "$uid === auth.uid"
      }
    },
    "admin": {
      ".write": "root.child('admin').hasChild(auth.uid)",
      ".read": "root.child('admin').hasChild(auth.uid)"
    },
    "guitarras": {
      ".write": "root.child('admin').hasChild(auth.uid)",
      ".read": "root.child('admin').hasChild(auth.uid)"
    }
  }
}

Practicando mas reglas

var refGuitarras = firebase.database().ref("guitarras");

functionleerGuitarras(){
    refGuitarras.child("normal").on("value", function(guitarras){
        console.log(guitarras.val())
    })
}

functionleerGuitarrasVip(){
    refGuitarras.child("vip").on("value", function(guitarras){
        console.log(guitarras.val())
    })
}

leerGuitarras();
leerGuitarrasVip();

• Esta vez agregamos nuevas reglas al .js para segmentar y mostrar la información que queremos. Esto está complementado con las reglas.

"admin": {
      ".write": "root.child('admin').hasChild(auth.uid)",
      ".read": "root.child('admin').hasChild(auth.uid)"
    },
    "guitarras": {
      ".write": "root.child('admin').hasChild(auth.uid)",
      ".read": "root.child('admin').hasChild(auth.uid)",
	  "normal": {
        ".read": true
      },
      "vip": {
        ".read": "root.child('vip').hasChild(auth.uid)"

      }

• Acá en las reglas se muestra como, a pesar de que las guitarras solo se muestran a los “admins”, tambien se muestran todas las “normales” y las “vips” solo se mostrarán a los “admins” y a los “vips”

Storage

• Es necesario agregar el script para correr storage.
• Esta es la manera correcta de obtener la URL de un fichero subido a storage.

var refImg = firebase.storage().ref();

refImg.child("invie-classic.png").getDownloadURL().then(function(url){
    console.log(url);
})

• Siguiendo los lineamientos del curso, entre algunas modificaciones, el index.js quedará de esta manera, ideal para leer un rato y practicar.

var GoogleIn = document.getElementById("GoogleIn");
var fbIn = document.getElementById("fbIn");
var btnLogout = document.getElementById("btnLogout");

var ref = firebase.database().ref("usuario");
var refGuitarras = firebase.database().ref("guitarras");
var usuario = {};

var refImg = firebase.storage().ref();

firebase.auth().onAuthStateChanged(function(user){
    if (user ) {
        console.log(user.email + " ha iniciado sesión");
        mostrarCerrar();
    }else{
        console.log("No hay sesión");
        mostrarIniciar();
    }
});

//Inicio de sesión Google
GoogleIn.addEventListener("click", function(){
    //event.preventDefault();  evita que se recargue la pagvar provider = new firebase.auth.GoogleAuthProvider();
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    firebase.auth().signInWithPopup(provider)
    .then(function(datosUsuario){
        console.log(datosUsuario);
        usuario = {
            nombre: datosUsuario.user.displayName,
            email: datosUsuario.user.email,
            uid: datosUsuario.user.uid
        }
        addUsuario(usuario, usuario.uid);
    }).catch(function(err){
        console.log(err)
    })
});

//Inicio de sesión Facebook
fbIn.addEventListener("click", function(){
    //event.preventDefault();  evita que se recargue la pagvar provider = new firebase.auth.FacebookAuthProvider();
    provider.addScope('public_profile');
    firebase.auth().signInWithPopup(provider)
    .then(function(datosUsuario){
        console.log(datosUsuario);
        usuario = {
            nombre: datosUsuario.user.displayName,
            email: datosUsuario.user.email,
            uid: datosUsuario.user.uid
        }
        addUsuario(usuario, usuario.uid);
    }).catch(function(err){
        console.log(err)
    })
});

//Cierre de sesión
btnLogout.addEventListener("click", function(){
    //event.preventDefault();  evita que se recargue la pag
    firebase.auth().signOut().then(function(){
        alert("se ha cerrado la sesion")
    })
})

//Funciones para mostrar y ocultar botones según sesiónfunctionmostrarCerrar(){
    fbIn.style.display="none";
    GoogleIn.style.display="none";
    btnLogout.style.display="block";
}

functionmostrarIniciar(){
    btnLogout.style.display="none";
    fbIn.style.display="block";
    GoogleIn.style.display="block";
}

//Agregar usuariofunctionaddUsuario(usuario, uid){
    ref.child(uid).update(usuario)
}

functionleerGuitarras () {
    refGuitarras.child('normal').on('child_added', (datos) => {
      console.log('normal', datos.val())
      const guitar = datos.val()
      const nombreGui = datos.val().nombre
      const contenedorElementos = document.getElementById('guitarrasContent')
      console.log(datos.key, guitar.nombre, guitar.precio, guitar.descripcion, guitar.metadata)
      contenedorElementos.insertBefore(
        crearElementoGuitarra(datos.key, guitar.nombre, guitar.precio, guitar.descripcion, guitar.img),
          contenedorElementos.firsChild
        )
    } )
  }
  
  functionleerguitarrasVip () {
    refGuitarras.child('vip').on('child_added', (datos) => {
      console.log('vip', datos.val())
      const guitar = datos.val()
      const nombreGui = datos.val().nombre
      const contenedorElementos = document.getElementById('guitarrasContentVip')
      console.log(datos.key, guitar.nombre, guitar.precio, guitar.descripcion, guitar.metadata)
      contenedorElementos.insertBefore(
        crearElementoGuitarra(datos.key, guitar.nombre, guitar.precio, guitar.descripcion, guitar.img),
          contenedorElementos.firstChild
        )
    } )
  }
  
  functioncrearElementoGuitarra(key, nombre, precio, descripcion, img) {
    const uid = firebase.auth().currentUser.uid
  
    const html = 
        '<article class="guitarra contenedor">' +
          '<img class="derecha" src="" alt="Guitarra Invie Acustica" width="150"/>' +
          '<div class="contenedor-guitarra-a">' +
            '<h3 class="title-b"></h3>' +
            '<ol>' +
              '<li class="precio-b"></li>' +
              '<li class="descripcion-b"></li>' +
            '</ol>' +
          '</div>' +
          '<button type="button" onclick="comprar('+'`'+key+'`'+')">Comprar</button>'+
        '</article>'// Create the DOM element from the HTMLconst div = document.createElement('div')
    div.innerHTML = html
  
    const guitarElement = div.firstChild
    var imgURL = ""
    refImg.child(img).getDownloadURL().then((url) => {
      imgURL = url
    }).then(() => {
      guitarElement.getElementsByClassName('title-b')[0].innerText = nombre
      guitarElement.getElementsByClassName('precio-b')[0].innerText = precio
      guitarElement.getElementsByClassName('descripcion-b')[0].innerText = descripcion
      guitarElement.getElementsByClassName('derecha')[0].src = imgURL
    })
    return guitarElement
  }
  
  leerGuitarras()
  leerguitarrasVip()

Hosting

• Para iniciar, en la cónsola, debemos irnos al directorio del proyecto y ejecutar el comando “firebase deploy” para que firebase prepare todo y al final, te dé la URL de firebase.
• Recuerda que desde la cónsola puedes agregar tu dominio personalizado y que Firebase te proporciona un certificado SSL ¡de forma gratuita!