Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Termina en:

02D

18H

18M

29S

9

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 鈥淎utenticaci贸n鈥 y en la secci贸n 鈥淒ominios autorizados鈥, ingresa la URL del sitio o 鈥渓ocalhost鈥 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 鈥渨eb 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 鈥渋ndex.js鈥 que contenga 鈥渃onsole.log(firebase);鈥 y enlazalo en tu 鈥渋ndex.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: 鈥渟udo npm install -g firebase-tools鈥
  • Una vez instalados los archivos, debes hacer login desde la consola con 鈥渇irebase login鈥, conectar谩 con tu cuenta de Google.
  • Es momento de iniciar Firebase, con el apuntador en el directorio de tu proyecto!! 鈥淔irebase init鈥.
  • Con la barra espaciadora puedes seleccionar las caracteristicas que quieres configurar en tu proyecto, para iniciar, selecciona 鈥渄atabase鈥 y 鈥渉osting鈥.
  • 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 鈥渇irebase 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 鈥淎pp ID鈥 y un 鈥淎pp Secret鈥. Para conseguir esto debes ingresar a developers.facebook.com y crear una nueva aplicaci贸n.
  • Debes seleccionar 鈥淚nicio de sesi贸n con Facebook鈥 y en el men煤 izquierdo, en configuraci贸n b谩sica, encontrar谩s tu 鈥淎pp ID鈥 y 鈥淎pp 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 鈥渁ddScope鈥 y el 鈥減rovider鈥. 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 鈥渂ase de datos鈥 y crear una nueva. Por ahora trabajar茅mos con la 鈥淩ealtime鈥 y seleccionas 鈥淏ase 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 鈥淧erfil.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 鈥渞ules鈥 hace referencia a la base de datos entera. Dentro de la base de datos, apuntamos al nodo 鈥渦suario鈥, dentro de 鈥渦suario鈥 definimos que 鈥$uid鈥 (cualquier uid y lo que este dentro) puede leerse y escribirse cuando ese mismo 鈥$uid鈥 coincida con el 鈥渦id.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 鈥渦suario鈥 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 鈥渦suario鈥, 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 鈥渦suario鈥 puede leer pero con la escritura es diferente.
  • root = Raiz de la base de datos
  • child(鈥榓dmin鈥) = 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 鈥渞ecords鈥 usando como referencia el nodo llamada 鈥渢iempo鈥.
".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 鈥渁lgo鈥.
  • 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 鈥渁dmins鈥, tambien se muestran todas las 鈥渘ormales鈥 y las 鈥渧ips鈥 solo se mostrar谩n a los 鈥渁dmins鈥 y a los 鈥渧ips鈥

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 鈥渇irebase 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!
Escribe tu comentario
+ 2