Los siguientes son algunos pasos simples para conectar nuestra página web estática con Firebase.
Implementación paso a paso:
Paso 1: Primero, vamos a crear un proyecto en Firebase para conectar nuestra página web estática. Visite la página de Firebase para configurar su proyecto. Visite el sitio web y haga clic en el botón On Add Project como se muestra a continuación.
Paso 2: Asigne un nombre a su proyecto y haga clic en el botón Continuar .
Paso 3: Ahora haga clic en el botón Continuar .
Paso 4: Ahora elija Cuenta predeterminada para Firebase y haga clic en el botón Crear proyecto .
Paso 5: ahora su proyecto está creado y ahora está listo para comenzar.
Paso 6: Ahora haga clic en el tercer ícono que es el botón Web (</>) .
Paso 7: Asigne un apodo a su proyecto web y haga clic en el botón Registrar aplicación .
Paso 8: Ahora verás la configuración de tu App así. Copie este código en algún lugar, ya que lo usaremos más adelante.
Paso 9: Haga clic en Realtime Database como se muestra a continuación.
Paso 10: Ahora haga clic en el botón Crear base de datos .
Paso 11: Ahora haga clic en Modo de prueba y luego haga clic en el botón Habilitar .
Paso 12: activa el almacenamiento de Firebase. Haga clic en el botón Almacenamiento a la izquierda y haga clic en Comenzar.
Después de eso, aparecerá este cuadro. Haga clic en Siguiente.
Luego haga clic en Listo.
Configuración del proyecto:
Ahora cree un archivo HTML y copie el código de secuencia de comandos que copió en el Paso 8 . El siguiente archivo es solo una muestra para que entienda cómo configurar su proyecto.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Collecting Data</title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity= "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </head> <body class="container" style="margin-top: 50px; width: 50%; height:auto;"> <h2 class="text-primary" style= "margin-left: 15px; margin-bottom: 10px"> Hey There,Help Us In Collecting Data </h2> <form class="container" id="contactForm"> <div class="card"> <div class="card-body"> <div class="form-group"> <label for="exampleFormControlInput1"> Enter Your Name </label> <input type="text" class="form-control" id="name" placeholder="Enter your name"> </div> <div class="form-group"> <label for="exampleFormControlInput1"> Email address </label> <input type="email" class="form-control" id="email" placeholder="name@example.com"> </div> </div> <button type="submit" class="btn btn-primary" style="margin-left: 15px; margin-top: 10px"> Submit </button> </div> </form> <script src= "https://www.gstatic.com/firebasejs/3.7.4/firebase.js"> </script> <script> var firebaseConfig = { apiKey: "Use Your Api Key Here", authDomain: "Use Your authDomain Here", databaseURL: "Use Your databaseURL Here", projectId: "Use Your projectId Here", storageBucket: "Use Your storageBucket Here", messagingSenderId: "Use Your messagingSenderId Here", appId: "Use Your appId Here" }; firebase.initializeApp(firebaseConfig); var messagesRef = firebase.database() .ref('Collected Data'); document.getElementById('contactForm') .addEventListener('submit', submitForm); function submitForm(e) { e.preventDefault(); // Get values var name = getInputVal('name'); var email = getInputVal('email'); saveMessage(name, email); document.getElementById('contactForm').reset(); } // Function to get get form values function getInputVal(id) { return document.getElementById(id).value; } // Save message to firebase function saveMessage(name, email) { var newMessageRef = messagesRef.push(); newMessageRef.set({ name: name, email: email, }); } </script> </body> </html>
Producción:
Ingresando algunos valores de muestra de Nombre y dirección de correo electrónico en el formulario dado como se muestra a continuación.
Después de hacer clic en el botón Enviar , los datos se almacenan en la base de datos en tiempo real como se muestra a continuación.