¿Qué es Storage?

Clase 28 de 32 • Curso de Firebase para Web 2017

Ruben Eduardo Acosta Vela

student•

Compañeros, les comparto el código.

index.js

const ref = firebase.database().ref("usuario")
const imgref = firebase.storage().ref()
const refGuitarras = firebase.database().ref("guitarras")

const btnLogin = document.getElementById('login')
const btnLogout = document.getElementById('logout')
const btnPerfil = document.getElementById('perfil')

var usuario = {}

//*****************************************************
// escuchador de sesion
firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    btnLogin.style.display = "none"
    btnLogout.style.display = "inline-block"
    btnPerfil.style.display = "inline-block"
    }
  else{
    btnLogin.style.display = "inline-block"
    btnLogout.style.display = "none"
    btnPerfil.style.display = "none"
  }
})
//*****************************************************

btnLogin.addEventListener('click', () => {
  event.preventDefault()
  // var provider = new firebase.auth.GoogleAuthProvider()
  var provider = new firebase.auth.FacebookAuthProvider()

  // provider.addScope('https://www.googleapis.com/auth/contacts.readonly')
  provider.addScope('public_profile')

  firebase.auth().signInWithPopup(provider)
  .then((datosUser) => {
    usuario = {
      nombre: datosUser.user.displayName,
      email: datosUser.user.email,
      uid: datosUser.user.uid
    }
    console.log(usuario)
    addUser(usuario, usuario.uid)
  })
  .catch((err) => {
    console.log(err)
  })

})

btnLogout.addEventListener('click', function(){
    event.preventDefault()
    firebase.auth().signOut()
    console.log('logout success')
})


function addUser(usuario, uid) {
  ref.child(uid).update(usuario)
}

function leerGuitarras () {
  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('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
      )
  } )
}

function leerguitarrasVip () {
  refGuitarras.child('normal').on('child_added', (datos) => {
    console.log('normales', 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
      )
  } )
}

function crearElementoGuitarra(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 HTML
  const div = document.getElementById('div')
  div.innerHTML = html

  const guitarElement = div.firstChild
  var imgURL = ""
  imgref.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()

y en el index.html agregar:

      <section id="guitarrasContent">
      </section>
      <section id="guitarrasContentVip">
      </section>
      <div id="div"></div>

antes de comenzar el footer.

Andres Mauricio Shek Restrepo

student•

Gracias Byhako,
esta linea:

function leerguitarrasVip () {
  refGuitarras.child('normal').on('child_added', (datos) => {

debería ser:

function leerguitarrasVip () {
  refGuitarras.child('vip').on('child_added', (datos) => {

Verdad?

Ruben Eduardo Acosta Vela

student•

Nop, refGuitarras.child(‘vip’) se hace en la función leerGuitarras, si también lo hacemos en la función leerguitarrasVip, ¿En donde hace la referencia a las guitarras normales? Yo también pensé que eran al reves, pero Leo tiene así el código.

Nelson Eduardo Visbal Jensen

student•

No hay ejemplos de como subir la imagen desde código. Faltó esa parte.

Asael Arenas

student•

Es correcto, lo que se suben son las URLs de la imagen y el archivo como tal lo subio desde el administrador. Como entonces un usuario puede subir su imagen?

Jose Daniel Paiva

student•

“Storage es la herramienta que nos permite almacenar archivos más pesados como imágenes, videos, audios y documentos.”

Juan Carlos Sanchez Cordova

student•

Miguel no subieron el código para obtener las guitarras.

Brian Anthony Sandoval Juárez

student•

Error, ayuda?

Uncaught TypeError: Cannot read property 'insertBefore' of null

Diego Forero

Team Platzi•

Comparte tu código y el stack trace completo de tu error, un elemento esta llegando vacío o null y por esto no tiene la propiedad insertBefore.

Jesús Alberto Coronado

student•

Falto el upload files desde el código hacia el Firebase

const ref = firebase.database().ref("usuario")
const imgref = firebase.storage().ref()
const refGuitarras = firebase.database().ref("guitarras")

const btnLogin = document.getElementById('login')
const btnLogout = document.getElementById('logout')
const btnPerfil = document.getElementById('perfil')

var usuario = {}

//*****************************************************
// escuchador de sesion
firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    btnLogin.style.display = "none"
    btnLogout.style.display = "inline-block"
    btnPerfil.style.display = "inline-block"
    }
  else{
    btnLogin.style.display = "inline-block"
    btnLogout.style.display = "none"
    btnPerfil.style.display = "none"
  }
})
//*****************************************************

btnLogin.addEventListener('click', () => {
  event.preventDefault()
  // var provider = new firebase.auth.GoogleAuthProvider()
  var provider = new firebase.auth.FacebookAuthProvider()

  // provider.addScope('https://www.googleapis.com/auth/contacts.readonly')
  provider.addScope('public_profile')

  firebase.auth().signInWithPopup(provider)
  .then((datosUser) => {
    usuario = {
      nombre: datosUser.user.displayName,
      email: datosUser.user.email,
      uid: datosUser.user.uid
    }
    console.log(usuario)
    addUser(usuario, usuario.uid)
  })
  .catch((err) => {
    console.log(err)
  })

})

btnLogout.addEventListener('click', function(){
    event.preventDefault()
    firebase.auth().signOut()
    console.log('logout success')
})


function addUser(usuario, uid) {
  ref.child(uid).update(usuario)
}

function leerGuitarras () {
  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('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
      )
  } )
}

function leerguitarrasVip () {
  refGuitarras.child('normal').on('child_added', (datos) => {
    console.log('normales', 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
      )
  } )
}

function crearElementoGuitarra(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 HTML
  const div = document.getElementById('div')
  div.innerHTML = html

  const guitarElement = div.firstChild
  var imgURL = ""
  imgref.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()

¿Qué es Storage?

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