Conectar la base de datos

Clase 14 de 32 • Curso de Firebase para Web 2017

Julio Camacho

student•

alguien me podria proporcionar el archivo perfil.html mi navegador no lo quiere descargar, solo se queda cargando pero no se descarga

Oscar Barajas Tavares

Team Platzi•

Hola @Jccsisc,

Podrías indicarme cual es tu navegador y versión. De igual manera te dejo el código del archivo.

<!DOCTYPE html>
<html>
  <head>
    <title>Tu perfil</title>
    <meta charset="utf-8"/>
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Allerta' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/invie.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
  </head>
  <body class="precios">
    <header id="header" class="header background"> <!-- header -->
      <div class="contenedor">
        <figure class="logotipo"> <!-- logotipo -->
          <img src="images/invie.png" width="186" height="60" alt="Invie logotipo"/>
        </figure>
        <span class="burguer-button icon-menu" id="burguer-button"></span>
        <nav class="menu" id="menu"> <!-- menu -->
          <ul>
            <li>
              <a href="index.html">Home</a>
            </li>
            <li>
              <a href="" id="logout">Cerrar sesión</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <section class="tabla datosPerfil" id="datosPerfil">
      <div class="contenedor">
        <h1>Tu Perfil</h1>
        <label for="perfilNombre">Nombre</label>
        <h3 id="perfilNombre"></h3>
        <label for="perfilEmail">Email</label>
        <h3 id="perfilEmail"></h3>
        <label for="perfilTelefono">Teléfono</label>
        <h3 id="perfilTelefono"></h3>
        <label for="perfilDireccion">Direccion</label>
        <h3 id="perfilDireccion"></h3>
        <button id="perfilEditar">Editar</button>
      </div>
    </section>
    <section class="formularioPerfil" onsubmit="editarDatos()" id="formularioPerfil" style="display:none">

      <div class="contenedor">
        <h2>Edita tu información</h2>
        <form action="" name="formPerfil">
          <div>
            <label for="nombreForm">Nombre:</label>
            <input type="text" id="nombreForm" required>
          </div>
          <div>
            <label for="emailForm">Email:</label>
            <input type="text" id="emailForm" required>
          </div>
          <div>
            <label for="telefonoForm">Teléfono:</label>
            <input type="text" id="telefonoForm" required>
          </div>
          <div>
            dirección
          </div>
          <div>
            <label for="calleForm">calle:</label>
            <input type="text" id="calleForm" required>
          </div>
          <div>
            <label for="interiorForm">Num. Int.:</label>
            <input type="text" id="interiorForm" required>
          </div>
          <div>
            <label for="coloniaForm">colonia:</label>
            <input type="text" id="coloniaForm" required>
          </div>
          <div>
            <label for="cpForm">Código postal:</label>
            <input type="text" id="cpForm" required>
          </div>
          <button type="button" id="cancelForm">cancelar</button>
          <button type="submit">Guardar</button>
        </form>
      </div>
    </section>
    <footer class="footer">
      <div class="contenedor">
        <div class="contacto">
          <img src="images/invie-white.png" alt="logotipo blanco"/>
          <a href="tel:+573024456678"><strong>Telefono</strong> <span>3024456678</span></a>
          <a href="/cdn-cgi/l/email-protection#f89b97968c999b8c97b891968e919dd69b9795"><strong>E-mail</strong> <span><span class="__cf_email__" data-cfemail="4f2c20213b2e2c3b200f262139262a612c2022">[email&#160;protected]</span></span></a>
        </div>
        <form class="formulario">
          <div class="col1">
            <label for="nombre">Nombre</label>
            <input type="text" required id="nombre" name="nombre"/>
            <label for="email">E-mail</label>
            <input type="email" required id="email" name="email"/>
            <div class="sexo">
              <label for="mujer">
                <input type="radio" id="mujer" checked name="sexo" value="mujer"> mujer
              </label>
              <label for="hombre">
                <input type="radio" id="hombre" name="sexo" value="hombre"> hombre
              </label>
            </div>
            <div class="intereses">
              <label for="cotizacion">
                <input type="checkbox" checked id="cotizacion" name="intereses" value="cotizacion"> Cotización
              </label>
              <label for="reclamos">
                <input type="checkbox" id="reclamos" name="intereses" value="reclamos"> Reclamos
              </label>
              <label for="comentarios">
                <input type="checkbox" id="comentarios" name="intereses" value="comantarios"> Comentarios
              </label>
              <label for="otros">
                <input type="checkbox" id="otros" name="intereses" value="otros"> Otros
              </label>
            </div>
          </div>
          <div class="col2">
            <label for="comentarios">Comentarios</label>
            <textarea name="comantarios" id="comentarios" cols="30" rows="7"></textarea>
            <input type="submit" value="Enviar" class="button"/>
          </div>
        </form>
      </div>
    </footer>
    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/blazy/1.5.4/blazy.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.13.0/firebase.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "AIzaSyCVp-WOuN1Aa_mfpszBdXyUKIXAOcUv9qM",
        authDomain: "platzi-935dd.firebaseapp.com",
        databaseURL: "https://platzi-935dd.firebaseio.com",
        projectId: "platzi-935dd",
        storageBucket: "platzi-935dd.appspot.com",
        messagingSenderId: "696101076636"
      };
      firebase.initializeApp(config);
    </script>
    <script src="js/perfil.js"></script>
    <script>
      var consulta = window.matchMedia('(max-width: 500px)');
      consulta.addListener(mediaQuery);

      var $burguerButton = document.getElementById('burguer-button');
      var $menu = document.getElementById('menu');
      function toggleMenu(){
        $menu.classList.toggle('active')
      };

      function mediaQuery() {
        if (consulta.matches) {
          // si se cumple hagamos esto
          // console.log('se cumplió la condicion');
          $burguerButton.addEventListener('touchstart', toggleMenu);
        } else {
          $burguerButton.removeEventListener('touchstart', toggleMenu);
          // si no se cumple hagamos esto
          // console.log('no se cumplió la condicion');
        }
      }
      mediaQuery();

      // lazy loading
      var bLazy = new Blazy({
          selector: 'img'
      });
      // $burguerButton.addEventListener('touchstart', toggleMenu);

      // function toggleMenu(){
      //   $menu.classList.toggle('active')
      // };
    </script>
  </body>
</html>

Julio Camacho

student•

ah muchas gracias @gndx, lo abrí desde edge y lo copié. Pues uso chrome Versión 67.0.3396.99 (Build oficial)
pero al parecer ya se está actualizando.

Conectar 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