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.
