Guardar información en la base de datos

Clase 15 de 32 • Curso de Firebase para Web 2017

Carlos Jesús Fernández Salazar

student•

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("[nodo referencia]").update(objeto2).then(function(){
        alert("Actualizacion exitosa")
    }).catch(function(){
        alert("Error en actualizacion");
        console.log(err);
    })
})

Marco Leandro Gomez Salas

student•

Como hizo para editar los 3 botones al mismo tiempo?

Diego Forero

Team Platzi•

Con ctrl + click se crean los cursores nuevos para escribir lo mismo.

Juan Castro

teacher•

Muchos editores de código como Sublime Text, Atom y VSCode te permiten hacerlo.
Tambien puedes seleccionar la misma palabra y poder editar todos al tiempo automáticamente, trata con Ctrl/Cmd + D.

Gerardo Nava Pereda

student•

Push
Update
Set
Delete

Julian Dumitrel

student•

Cuidado con declarar las variables del eventListener, no duplicar el nombre de la variable del objeto, como me pasó a mi,

// Eventos de control  // 

// BOTON 'PUSH'
btnPush.addEventListener("click",function(){
    
    var objeto = {
        curso: "Sociales",
        profesor: "Arturo Hernado",
        contenidos: {
            obligatorio: "Algebra lineal",
            opcional: "Social de guerra"
        }
    }
    refTest.push(objeto).then(function(){
        alert('Se subió correctamente!')
    }).catch(function(err){
        console.log(err)
        alert('Error al subir objeto')
    })
})

// BOTON 'UPDATE'
btnUpdate.addEventListener("click", function(){
    
    var objeto = {
        curso: "Pocajobnta",
        profesor: "Seasñap",
        contenidos: {
            obligatorio: "Pescado",
            opcional: "Comida"
        }
    }
    refTest.child("-LLQ5lT5q5yavd_EGUGL").update(objeto).then(function(){
        alert("Se modificó correctamente!")
    }).catch(function(err){ 
        console.log(err)
        alert("Error al modificar")
    })
})

LA SOLUCIÓN:

// Eventos de control  // 

// BOTON 'PUSH'
btnPush.addEventListener("click",function(){
    
    var objetoParaPush = {
        curso: "Sociales",
        profesor: "Arturo Hernado",
        contenidos: {
            obligatorio: "Algebra lineal",
            opcional: "Social de guerra"
        }
    }
    refTest.push(objetoParaPush).then(function(){
        alert('Se subió correctamente!')
    }).catch(function(err){
        console.log(err)
        alert('Error al subir objeto')
    })
})

// BOTON 'UPDATE'
btnUpdate.addEventListener("click", function(){
    
    var objetoUpdate = {
        curso: "Pocajobnta",
        profesor: "Seasñap",
        contenidos: {
            obligatorio: "Pescado",
            opcional: "Comida"
        }
    }
    refTest.child("-LLQ5lT5q5yavd_EGUGL").update(objetoUpdate).then(function(){
        alert("Se modificó correctamente!")
    }).catch(function(err){ 
        console.log(err)
        alert("Error al modificar")
    })
})

Un saludo a todos y feliz aprendizaje!

Alvise Leal

student•

Podrías utilizar let en lugar de var al momento de declarar tus variables, así solo existirán para ese bloque (función).

De esta forma puedes mantener la sintaxis sin tener que ponerle nombres superdescriptivos a las variables 😉

Carlos Raez

student•

Hola estoy con React con el metodo de Firebase de Usuario y contraseña
como guardo el nombre dentro de displayName de el objeto user…?? y como hago que la tabla de usuarios que creo con el metodo .push se haga con el uid…que crea?? para que este igual que si el metodo de autentificacion sea el de Google o Facebook. … para luego poder trabajar dentro de la aplicacion con ello.
Gracias

import React, { Component } from 'react';
import './landing.css'
import logoMovil from '../../pictures/lgg.png';
import IniciaSesion from '../components/inicaSesion.js'
import Registrate from '../components/registrate.js'
import  firebase from 'firebase'
import {  Redirect } from "react-router-dom";



class Landing extends Component {
  constructor() {
     super()
     this.state = {
            nombre: '',
            email : '',
            contraseña : '',
            login: false
     }
     this.ref =  firebase.database().ref('usuarios')
  }

  componentDidMount = () => {
 firebase.auth().onAuthStateChanged( (user) => {
      if (user) {
        console.log('tenemos usuario dentro');
      }
      else {
        console.log('No hay ningun usuario, Logueate si quieres entrar a la Aplicacion');
      }
    });

  }



 handleInput = (e) => {
    const { id , value } = e.target
    this.setState({
     [id]: value
   })
   console.log(this.state.nombre ,this.state.email)
 }

 handleSubmitLogin = (event) => {
   const that = this
    event.preventDefault();
     firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.contraseña)
    .then(function (datosUsuario) {
     that.setState({
       login: true
     })
     console.log('se ha logueado un usuario');
    })
    .catch(error => alert(`Error ${error.code}: ${error.message}`));

 }


 handleSignup = (event) => {
    if (this.state.contraseña.length < 6) {
      alert('Tu contraseña tiene que tener minimo 6 caracteres')
    }
    let emailUsuario = this.state.email;
    let pasword =  this.state.contraseña;
    event.preventDefault()
    firebase.auth().createUserWithEmailAndPassword(emailUsuario,pasword)
    .then( (datosUsuario)  => {
      const nuevoUsuario = {
        nombre : datosUsuario.user.displayName,
        email:  datosUsuario.user.email,
        uid: datosUsuario.user.uid
      }
      this.ref.push(nuevoUsuario)
      alert('Se ha registrado un nuevo usuario')



    })
    .catch(function(error) {
    if (error.code === 'auth/email-already-in-use') {
      alert('El Email que intentas poner esta siendo utilizado')
    }
    if (error.code === 'auth/invalid-email') {
      alert('Tiene que usar una direccion de correo Válida')
    }

    console.log(error);

     });

  }

  render() {
    if(this.state.login) {
      return   <Redirect to="/Dashboard" />
    }
    else {
    return (
      <div className="container">
         <div id="App" className="row pt-5">
           <div className="col md-4">
             <img src={logoMovil} className="App-logo" alt="logo" />
           </div>
           <div className="col md-6">
           <div className="card">
             <div className="card-header">
               <h4>CRM ASCENSORES</h4>
             </div>
             <IniciaSesion handleSubmitLogin={this.handleSubmitLogin} handleInput={this.handleInput} />
             <Registrate handleSignup={this.handleSignup} handleInput={this.handleInput}/>
           </div>
           </div>
         </div>
      </div>
    );
  }
 }
}

export default Landing;

Miguel Angel Luna Nájera

teacher•

Con el siguiente método:

firebase.auth().currentUser.updateProfile({
   displayName: "Angel Luna"
});

Las restricciones que tiene es que sólo puedes modificar lo que incluye el objeto User, no puedes agregar nuevos elementos.

La parte de ponerle el nombre a nuestro nodo está en las clases que siguen.

Carlos Raez

student•

Hola tengo una duda… si por ejemplo quiero que cuando hemos creado el objeto en la clave contenidos que hemos creado un objeto dentro de otro objeto se cree con un nodo nuevo…¿ que puedo hacer?

var objeto = {
curso: “firebase”,
profesor: “angel”,
contenidos: {// aqui quiero que contenidos sea un nodo nuevo!!
primero: “autenticacion”
}
}

Miguel Angel Luna Nájera

teacher•

Hola, con un nodo nuevo te refieres a que tenga un uid por cada objeto creado dentro de “contenidos”?

Carlos Raez

student•

Si correcto esa es la duda que tengo…
porque quiero hacer esto
objeto1 = {
nombre:‘pepe’,
apellido:‘juanito’,
amigos: [{nombre:alfredo apellido:Rober } , { nombre:Marcos apellido:Rober } ]
}
y claro al array amigos me gustaria guardalo . y aprender a leerlo.
Muchas gracias!!1

Manuel Humberto Cañon Macias

student•

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

El método UPDATE actualiza la información del nodo al que hacemos referencia. Sin sobre escribirla dependiendo la referencia. Si no existe el nombre del nodo o alguna propiedad de este, lo crea.

//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);
    })
})

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

// Eventos de control  // 

// BOTON 'PUSH'
btnPush.addEventListener("click",function(){
    
    var objeto = {
        curso: "Sociales",
        profesor: "Arturo Hernado",
        contenidos: {
            obligatorio: "Algebra lineal",
            opcional: "Social de guerra"
        }
    }
    refTest.push(objeto).then(function(){
        alert('Se subió correctamente!')
    }).catch(function(err){
        console.log(err)
        alert('Error al subir objeto')
    })
})

// BOTON 'UPDATE'
btnUpdate.addEventListener("click", function(){
    
    var objeto = {
        curso: "Pocajobnta",
        profesor: "Seasñap",
        contenidos: {
            obligatorio: "Pescado",
            opcional: "Comida"
        }
    }
    refTest.child("-LLQ5lT5q5yavd_EGUGL").update(objeto).then(function(){
        alert("Se modificó correctamente!")
    }).catch(function(err){ 
        console.log(err)
        alert("Error al modificar")
    })
})

// Eventos de control  // 

// BOTON 'PUSH'
btnPush.addEventListener("click",function(){
    
    var objetoParaPush = {
        curso: "Sociales",
        profesor: "Arturo Hernado",
        contenidos: {
            obligatorio: "Algebra lineal",
            opcional: "Social de guerra"
        }
    }
    refTest.push(objetoParaPush).then(function(){
        alert('Se subió correctamente!')
    }).catch(function(err){
        console.log(err)
        alert('Error al subir objeto')
    })
})

// BOTON 'UPDATE'
btnUpdate.addEventListener("click", function(){
    
    var objetoUpdate = {
        curso: "Pocajobnta",
        profesor: "Seasñap",
        contenidos: {
            obligatorio: "Pescado",
            opcional: "Comida"
        }
    }
    refTest.child("-LLQ5lT5q5yavd_EGUGL").update(objetoUpdate).then(function(){
        alert("Se modificó correctamente!")
    }).catch(function(err){ 
        console.log(err)
        alert("Error al modificar")
    })
})

import React, { Component } from 'react';
import './landing.css'
import logoMovil from '../../pictures/lgg.png';
import IniciaSesion from '../components/inicaSesion.js'
import Registrate from '../components/registrate.js'
import  firebase from 'firebase'
import {  Redirect } from "react-router-dom";



class Landing extends Component {
  constructor() {
     super()
     this.state = {
            nombre: '',
            email : '',
            contraseña : '',
            login: false
     }
     this.ref =  firebase.database().ref('usuarios')
  }

  componentDidMount = () => {
 firebase.auth().onAuthStateChanged( (user) => {
      if (user) {
        console.log('tenemos usuario dentro');
      }
      else {
        console.log('No hay ningun usuario, Logueate si quieres entrar a la Aplicacion');
      }
    });

  }



 handleInput = (e) => {
    const { id , value } = e.target
    this.setState({
     [id]: value
   })
   console.log(this.state.nombre ,this.state.email)
 }

 handleSubmitLogin = (event) => {
   const that = this
    event.preventDefault();
     firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.contraseña)
    .then(function (datosUsuario) {
     that.setState({
       login: true
     })
     console.log('se ha logueado un usuario');
    })
    .catch(error => alert(`Error ${error.code}: ${error.message}`));

 }


 handleSignup = (event) => {
    if (this.state.contraseña.length < 6) {
      alert('Tu contraseña tiene que tener minimo 6 caracteres')
    }
    let emailUsuario = this.state.email;
    let pasword =  this.state.contraseña;
    event.preventDefault()
    firebase.auth().createUserWithEmailAndPassword(emailUsuario,pasword)
    .then( (datosUsuario)  => {
      const nuevoUsuario = {
        nombre : datosUsuario.user.displayName,
        email:  datosUsuario.user.email,
        uid: datosUsuario.user.uid
      }
      this.ref.push(nuevoUsuario)
      alert('Se ha registrado un nuevo usuario')



    })
    .catch(function(error) {
    if (error.code === 'auth/email-already-in-use') {
      alert('El Email que intentas poner esta siendo utilizado')
    }
    if (error.code === 'auth/invalid-email') {
      alert('Tiene que usar una direccion de correo Válida')
    }

    console.log(error);

     });

  }

  render() {
    if(this.state.login) {
      return   <Redirect to="/Dashboard" />
    }
    else {
    return (
      <div className="container">
         <div id="App" className="row pt-5">
           <div className="col md-4">
             <img src={logoMovil} className="App-logo" alt="logo" />
           </div>
           <div className="col md-6">
           <div className="card">
             <div className="card-header">
               <h4>CRM ASCENSORES</h4>
             </div>
             <IniciaSesion handleSubmitLogin={this.handleSubmitLogin} handleInput={this.handleInput} />
             <Registrate handleSignup={this.handleSignup} handleInput={this.handleInput}/>
           </div>
           </div>
         </div>
      </div>
    );
  }
 }
}

export default Landing;

Guardar información en la base de datos

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