Espero que mis anotaciones te sean de mucha ayuda. 😄
https://console.firebase.google.com/
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)
})
})
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";
}
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)
})
});
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";
};
varref = firebase.database().ref("usuario");
var usuario = {}
//Agregar usuario
function addUsuario(usuario, uid){
ref.child(uid).update(usuario)
}
//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)
})
});
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);
})
})
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);
})
})
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;
}
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);
}
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 = "";
}
{
/*-- Visit https://firebase.google.com/docs/database/ ---*/
"rules": {
"usuario":{
"$uid":{
".read": "$uid == auth.uid"".write": "$uid == auth.uid"
}
}
}
}
{
"rules": {
"usuario":{
".read": true,
"$uid":{
".read": false;
}
}
}
}
{
"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()'
}
}
}
"rules": {
"usuario":{
"$uid":{
".read": false,
"write": 'root.child('admin').hasChild(auth.uid)'
}
},
".records": {
".indexOn": "tiempo",
}
".records": {
".validate": 'newData.val().contains('1')',
".validate": 'newData.val().isString()'
}
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");
}
{
"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)"
}
}
}
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();
"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)"
}
var refImg = firebase.storage().ref();
refImg.child("invie-classic.png").getDownloadURL().then(function(url){
console.log(url);
})
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()