0

estoy haciendo una pagina web en la que utilizo booststrap y firebase. Total que tengo el formulario para recoger los datos del usuario para posteriormente enviarselo a firebase para que lo agrege a la base de datos.

He buscado informacion de porque no funciona (no se suben los datos a la base de datos), pero no he encontrado nada el codigo del html es el siguiente:

    <html>
        <meta charset="UTF-8">
        <head>

            <title>Casco cines</title>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
            <link rel="stylesheet" href="rectk_complicaciones.css" type="text/css" />
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>



        </head>



        <body>



           <nav class="navbar navbar-expand-lg navbar-light bg-light">
           <a class="navbar-brand" href="Index.html">Casco cines</a>

           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">

              <span class="navbar-toggler-icon"></span>

           </button>

           <div class="collapse navbar-collapse" id="navbarTogglerDemo02">


                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">

                  <a class="nav-link" href="Top.html">Top <span class="sr-only">(current)</span></a>

                </li>
                <li class="nav-item active">

                    <a class="nav-link" href="categoria.html">Categoria <span class="sr-only">(current)</span></a>

                </li>
                <li class="nav-item active">

                    <a class="nav-link" href="at_cliente.html">Atención al cliente <span class="sr-only">(current)</span></a>

                </li>

                </ul>


                <form class="form-inline my-2 my-lg-0">


                  <a class="navbar-brand" href="login.html">Log in</a>




                </form>


            </div>


        </nav>




        <div>  
           <!-- aca va un espacio -->
           </br>




        </div>
            <div id="SignIn">

                <div class="container">
                    <div id="SignIn-row" class="row justify-content-center align-items-center">
                        <div id="SignIn-column" class="col-md-6">
                            <div class="SignIn-box col-md-12">


                                <form id="SignIn-form" class="form" action="" method="post">
                                    <h3 class="text-center text-info text-dark ">Sign In</h3>


                                    <div class="form-group">
                                        <label for="name" class="text-info text-dark">Name:</label><br>
                                        <input type="text" name="name" id="name" class="form-control">
                                    </div>

                                    <div class="form-group">
                                        <label for="surname" class="text-info text-dark">Surname:</label><br>
                                        <input type="text" name="surname" id="surname" class="form-control">
                                    </div>

                                    <div class="form-group">
                                        <label for="email" class="text-info text-dark">Email:</label><br>
                                        <input type="text" name="email" id="email" class="form-control">
                                    </div>

                                    <div class="form-group">
                                        <label for="inputPassword" class="text-info text-dark">Password:</label><br>
                                        <input type="password" class="form-control" id="inputPassword">
                                    </div>

                                    <div class="form-group">
                                        <label for="repeatpassword" class="text-info text-dark">Repeat Password:</label><br>
                                        <input type="password" class="form-control" id="repeatpassword">
                                    </div>

                                    <div class=" text-center form-group ">


                                        <button type="button" id="end-pls" onClick="aux()" class="btn btn-danger">Registrate</button>

                                       <!-- <script src="https://www.gstatic.com/firebasejs/5.7.2/firebase.js"></script> -->
                                        <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
                                        <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-firestore.js"></script>
                                        <script>   // Initialize Firebase


                                          var config = {
                                            apiKey: "XXXXXXXXXXX",
                                            authDomain: "xxxxxxxxx",
                                            databaseURL: "xxxxxxxxxxx",
                                            projectId: "xxxxxxxx",
                                            storageBucket: "xxxxxx-xxxxxx.appspot.com",
                                            messagingSenderId: "xxxxxx"
                                          };
                                          firebase.initializeApp(config);

                                          var db= firebase.firestore();



                                         const btn = document.getElementById("end-pls");

                                         btn.addEventListener('click',e=>{

                                         const name = document.getElementById("name").value;
                                         const surname = document.getElementById("surname").value;
                                         const pass=document.getElementById("pass");
                                         const email = document.getElementById("email");




                                          db.collection("Usuarios").add({
                                                name: name,
                                                surname:surname,
                                                pass: pass,
                                                email:email
                                            })
                                            .then(function(docRef) {
                                                console.log("Document written with ID: ", docRef.id);
                                            })
                                            .catch(function(error) {
                                                console.error("Error adding document: ", error);
                                            });

                                             });




                                        </script>
                                    </div>





                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>




        </body>

    </html>

En firestone tengo las siguientes reglas:

    service cloud.firestore {
      match /databases/{database}/documents {
        match /{document=**} {
          allow read, write;
        }
      }
    }

Y por ultimo, en los datos tengo en la coleccion "Usuarios", en documento "0" (pero mi idea es que se creen de forma automatica por eso intento usar collection(..).add) y la coleccion seria :email,name,pas,surname.

Muchas gracias por adelantado a toda la ayuda.

8
  • Por que utilizas Firestore en vez de Realtime Database si solo es una web? el 30 dic. 2018 a las 19:14
  • Sinceramente no se cual es la diferencia entre uno u otro, lo elegi al azar. cual es la diferencia ?
    – k1k4ss0
    el 30 dic. 2018 a las 19:17
  • las diferencias: firebase.google.com/docs/database/rtdb-vs-firestore el 30 dic. 2018 a las 19:19
  • Primero que nada, nunca pongas tu ApiKey ni el dominio de tu aplicación en internet... y segundo es que firestore esta optimizado para aplicaciones para dispositivos móviles y tal vez es mas fácil de almacenar porque el modelo es basado en documentos, pero para la web realmente es mejor y mas simple trabajar con JSON y este es el modelo de Realtime. el 30 dic. 2018 a las 19:21
  • 1
    Esto quiere decir que si has trabajado con JSON realmente vas a saber como almacenar en RTDB, dejando eso de lado no observo nada inusual por lo que no debería funcionar tu aplicación, también observo que en email y password no estas utilizando .value. el 30 dic. 2018 a las 19:27

1 respuesta 1

2

Vale, comenté arriba lo de que no publiques tus credenciales en Internet justo por lo que acabo de hacer, pero solo es para ayudar, pasando des eso, utilice tu app para almacenar un documento y parece que todo salio bien.

Para identificar el problema

Deberías hacer un console.log(err) en la función callback para saber que está pasando, personalmente no pude depurar este error, pero logre tener exito al almacenar y leer el documento, utilizando la misma configuración que dispones, esto quiere decir que si funciona. Mi opinión personal es que hay un error en algún dato del documento que quieres introducir, pude observar que en tu código estas utilizando los valores de los campos del formulario y tanto pass y email no estas pidiendo el valor ya que no utilizas .value en ambos.

Mi codigo:

var config = {
  apiKey: "XXXXXXXXXXXXXXXXXXXXXXXX",
  authDomain: "XXXXXXX.firebaseapp.com",
  databaseURL: "https://XXXXXXXX.firebaseio.com",
  projectId: "XXXXX-XXXXX",
  storageBucket: "XXXXXX.appspot.com",
  messagingSenderId: "XXXXXXXXX"
};
firebase.initializeApp(config);

 var db= firebase.firestore();

const btn1 = document.getElementById("send-pls");
const btn2 = document.getElementById("get-pls"):

btn1.addEventListener('click',e => {
 db.collection("users").doc("SF").set({
    name: "San Francisco", state: "CA", country: "USA",
    capital: false, 
    population: 860000 
    }).catch(function(err){
        console.log(err)
    });


});

//EL ENVIÓ FUE EXITOSO

btn2.addEventListener('click',e => {
 db.collection("users").doc("SF").get().then(function(doc) {
    if (doc.exists) {
        console.log("Document data:", doc.data());
    } else {
        // doc.data() will be undefined in this case
        console.log("No such document!");
    }
}).catch(function(error) {
    console.log("Error getting document:", error);
});


});


//LA RESPUESTA:

Document data: {capital: false, country: "USA", name: "San Francisco", population: 860000, state: "CA"}

En conclusión:

Tu configuración esta bien hecha, el problema puede estar en el tipo de datos que estas mandando, mira en la documentación Tipos de datos y notaras que no admite elementos html y al enviar document.getElementById("email") etas mandando esto: <input id="email"> en lugar del valor del input.

Espero sea de ayuda, saludos.

1
  • Muchas gracias funciono!!, ahora cambio lo que me recomendaste.
    – k1k4ss0
    el 31 dic. 2018 a las 13:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.