Agregar más datos a la información del perfil del usuario

Clase 20 de 32 • Curso de Firebase para Web 2017

Clase anteriorSiguiente clase

Andres Mauricio Shek Restrepo

student•

Creo que es mejor mandar el data.val() como argumento de entrada en la función llenarInformacion()

Andres Mauricio Shek Restrepo

student•

llenarUsuario(data.val())

function llenarUsuario(data){
	perfilNombre.innerHTML = data.nombre;
	perfilEmail.innerHTML = data.email;
	perfilTelefono.innerHTML = data.telefono;
	perfilDireccion.innerHTML = data.direccion.calle+" "+data.direccion.interior+" "+data.direccion.colonia+" CP: "+data.direccion.cp;

Carlos Jesús Fernández Salazar

student•

Si me parece más práctico 😄

Teofilo Rosales Gama

student•

soy el unico que le funciono a la primera?

Juan Miguel Rodríguez López

student•

No consigo que funcione, la consola me da este error:

Uncaught TypeError: Cannot read property 'calle' of undefined
    at llenarInformacion (perfil.js:36)
    at perfil.js:28
    at index.esm.js:4458
    at yt (index.esm.js:684)
    at t.raise (index.esm.js:9720)
    at t.raiseQueuedEventsMatchingPredicate_ (index.esm.js:9674)
    at t.raiseEventsForChangedPath (index.esm.js:9658)
    at t.onDataUpdate_ (index.esm.js:12760)
    at n.onDataPush_ (index.esm.js:12060)
    at n.onDataMessage_ (index.esm.js:12054)

Mi código está así:

var ref = firebase.database().ref('usuario');

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

var datosPerfil = document.getElementById("datosPerfil");
var formularioPerfil = document.getElementById("formularioPerfil");
var perfilNombre = document.getElementById("perfilNombre");
var perfilEmail = document.getElementById("perfilEmail");
var perfilTelefono = document.getElementById("perfilTelefono");
var perfilDireccion = document.getElementById("perfilDireccion");

var cancelForm = document.getElementById("cancelForm");
var nombreForm = document.getElementById("nombreForm");
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 btnEditar = document.getElementById("perfilEditar");

var usuario = {}

function leerInformacion(uid){
  ref.child(uid).on("value", function(data){
    var dat = data.val()
    llenarInformacion(dat.nombre, dat.email, dat.telefono, dat.direccion)
  })
}

function llenarInformacion(nombre, email, telefono, direccion){
  perfilNombre.innerHTML = nombre;
  perfilEmail.innerHTML = email;
  perfilTelefono.innerHTML = telefono;
  perfilDireccion.innerHTML = direccion.calle + ", " + direccion.interior + ", " +direccion.colonia + " " +direccion.cp;

}


firebase.auth().onAuthStateChanged(function(user){
  console.log(user)
  if (user) {
    console.log("tenemos usuario");
    leerInformacion(user.uid);
    mostrarLogout()
  }else{
    window.location.href = "index.html"
    console.log("no tenemos usuario");
    mostrarLogin()
  }
});


btnLogout.addEventListener("click", function(){
  firebase.auth().signOut();
})

function mostrarLogout(){
  console.log("mostrar Logout");
  btnLogout.style.display = "block";
  btnLogin.style.display = "none";
}

function mostrarLogin(){
  console.log("mostrar login");
  btnLogout.style.display = "none";
  btnLogin.style.display = "block";
}

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

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

function editarDatos(){
  event.preventDefault()
  var uid =firebase.auth().currentUser.uid
  console.log("editar datos")
  var obj = {
    nombre: nombreForm.value,
    email: emailForm.value,
    telefono: telefonoForm.value,
    direccion:{
      calle: calleForm.value,
      interior: interiorForm.value,
      colonia: coloniaForm.value,
      cp: cpForm.value
    }
  }
  ref.child(uid).update(obj)
}

Diego Forero

Team Platzi•

Prueba poner un console log de la variable dat luego que la defines en la función leerInformacion para que puedas ver que esta llegando, al parecer direccion no esta llegando y por eso no tiene la propiedad calle.

Oney Ortiz Roman

student•

¿Cómo puedo ocultar mis funciones de JavaScript (las qué se conectan a la base de datos) para los clientes?

Diego Forero

Team Platzi•

Tu código JavaScript es visible a cualquiera, puedes minificarlo para que sea más complejo pero no es posible como tal ocultarlo, por esto es que solo pones el api key que es un dato publico con el cual pueden consultar tu aplicación, no sirve para tratar de traer información de otra app.

Brian Bentancourt

student•

es mejor usar firebase desde un servidor en vez de que el cliente se conecte directamente?

Diego Forero

Team Platzi•

No entiendo tu pregunta, puedes ser más claro por favor.

Brian Bentancourt

student•

firebase se usa mas añadiendolo en el front o se usa también desde backend?

Eduardo Rahn

student•

Hay que tener cuidado con los datos que no existan en la BD ya que podriamos estar intentando leer cosas que aun no han sido seteadas (Telefono, Direccion)

function llenarUsuario(data){
	perfilNombre.innerHTML = data.nombre;
	perfilEmail.innerHTML = data.email;
	perfilTelefono.innerHTML = data.telefono;
	perfilDireccion.innerHTML = data.direccion.calle+" "+data.direccion.interior+" "+data.direccion.colonia+" CP: "+data.direccion.cp;

Uncaught TypeError: Cannot read property 'calle' of undefined
    at llenarInformacion (perfil.js:36)
    at perfil.js:28
    at index.esm.js:4458
    at yt (index.esm.js:684)
    at t.raise (index.esm.js:9720)
    at t.raiseQueuedEventsMatchingPredicate_ (index.esm.js:9674)
    at t.raiseEventsForChangedPath (index.esm.js:9658)
    at t.onDataUpdate_ (index.esm.js:12760)
    at n.onDataPush_ (index.esm.js:12060)
    at n.onDataMessage_ (index.esm.js:12054)

var ref = firebase.database().ref('usuario');

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

var datosPerfil = document.getElementById("datosPerfil");
var formularioPerfil = document.getElementById("formularioPerfil");
var perfilNombre = document.getElementById("perfilNombre");
var perfilEmail = document.getElementById("perfilEmail");
var perfilTelefono = document.getElementById("perfilTelefono");
var perfilDireccion = document.getElementById("perfilDireccion");

var cancelForm = document.getElementById("cancelForm");
var nombreForm = document.getElementById("nombreForm");
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 btnEditar = document.getElementById("perfilEditar");

var usuario = {}

function leerInformacion(uid){
  ref.child(uid).on("value", function(data){
    var dat = data.val()
    llenarInformacion(dat.nombre, dat.email, dat.telefono, dat.direccion)
  })
}

function llenarInformacion(nombre, email, telefono, direccion){
  perfilNombre.innerHTML = nombre;
  perfilEmail.innerHTML = email;
  perfilTelefono.innerHTML = telefono;
  perfilDireccion.innerHTML = direccion.calle + ", " + direccion.interior + ", " +direccion.colonia + " " +direccion.cp;

}


firebase.auth().onAuthStateChanged(function(user){
  console.log(user)
  if (user) {
    console.log("tenemos usuario");
    leerInformacion(user.uid);
    mostrarLogout()
  }else{
    window.location.href = "index.html"
    console.log("no tenemos usuario");
    mostrarLogin()
  }
});


btnLogout.addEventListener("click", function(){
  firebase.auth().signOut();
})

function mostrarLogout(){
  console.log("mostrar Logout");
  btnLogout.style.display = "block";
  btnLogin.style.display = "none";
}

function mostrarLogin(){
  console.log("mostrar login");
  btnLogout.style.display = "none";
  btnLogin.style.display = "block";
}

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

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

function editarDatos(){
  event.preventDefault()
  var uid =firebase.auth().currentUser.uid
  console.log("editar datos")
  var obj = {
    nombre: nombreForm.value,
    email: emailForm.value,
    telefono: telefonoForm.value,
    direccion:{
      calle: calleForm.value,
      interior: interiorForm.value,
      colonia: coloniaForm.value,
      cp: cpForm.value
    }
  }
  ref.child(uid).update(obj)
}

Agregar más datos a la información del perfil del usuario

Introducción a Firebase

Firebase: qué es

Documentación en Firebase para Web

Conectando un proyecto con Firebase

Consola de Firebase

Conexión manual desde la consola

Comprobación de la conexión

Conexión con firebase-tools

Conectar Firebase con otro proyecto en local

Authentication

Proveedores de autenticación

Autenticación con Google

Cierre sesión autenticación con Google

Autenticación con Facebook

Manejo de errores

Base de datos

Modelo no relacional, ¿cuándo usarlo?

Conectar la base de datos

Guardar información en la base de datos

Métodos para sobreescribir la base de datos

Leer un registro en Firebase Real Time

Agregar interacción al sitio web

Actualizar un registro en Firebase Real Time

Agregar más datos a la información del perfil del usuario

Reglas de seguridad

Tres niveles de seguridad de Firebase

Reglas de seguridad de Firebase

Reglas específicas para generar roles

Reglas adicionales para la indexación y validaciones

Roles

Roles de administrador

Aplicar reglas al proyecto

Storage

¿Qué es Storage?

Reto

Hosting

¿Qué es hosting?

Conclusiones del curso

Cloud Functions

Definición e Implementación de Cloud Functions