This project showcases real-time data display from Firebase in an HTML webpage. It comprises two essential files:
- index.html: This HTML file is responsible for rendering the sensor data on the webpage.
- app.js: This JavaScript file configures Firebase and updates the sensor data displayed in the HTML.
To run this project successfully, you need to set up a Firebase project and configure it with your Firebase credentials. Follow these detailed steps:
- Create a Firebase Project:
- Visit the Firebase Console.
- Create a new project or use an existing one.
Goto this link https://console.firebase.google.com/
- Configure Firebase:
- In your Firebase project, navigate to Project Settings.
- Under the "General" tab, find your Firebase configuration object.
In the app.js file, replace the placeholder Firebase configuration object with your actual Firebase configuration. This includes your API key, authentication domain, database URL, and other necessary details.
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
databaseURL: "YOUR_DATABASE_URL",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID",
measurementId: "YOUR_MEASUREMENT_ID"
};- Include Firebase SDK:
- In the
index.htmlfile, include the Firebase SDK scripts. This project utilizes Firebase Realtime Database, so ensure to includefirebase-app.jsandfirebase-database.jsscripts.
- In the
<!-- Firebase SDK -->
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-database.js"></script>This project assumes the Firebase Realtime Database is structured as follows:
tuesday-class-acf4f
│
└── Sensor
├── sensor1
│ ├── data: value
│ └── timestamp: value
└── sensor2
├── data: value
└── timestamp: value
- Initializing Firebase:
app.jsinitializes Firebase with the provided configuration. - Database Reference: It obtains references to two nodes in the database:
Sensor/sensor1andSensor/sensor2. - Updating Sensor Data: Two functions,
updateSensor1Data()andupdateSensor2Data(), are responsible for updating the HTML with real-time sensor data. - Listening for Changes: The script listens for changes to the sensor data using Firebase's
on()method and updates the HTML accordingly.
To view real-time sensor data, simply open the index.html file in a web browser.
- index.html: HTML file for sensor data display.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Firebase Data Display</title>
</head>
<body>
<h1>Sensor Datas</h1>
<div id="sensor1Data"></div>
<div id="sensor2Data"></div>
<!-- Firebase SDK -->
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-database.js"></script>
<script src="app.js"></script>
</body>
</html>- app.js: JavaScript file for Firebase configuration and data update logic.
// Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "tuesday-cxxxxxxxxx.firebaseapp.com",
databaseURL: "https://tuesday-cxxxxxxxxxxxxxxxxxxxx.firebaseio.com",
projectId: "tuesday-cXxxxxxxxxxxxxxx",
storageBucket: "tuesday-cxxxxxxxxxxxx.appspot.com",
messagingSenderId: "373xxxxxxxxxx",
appId: "1:3734Xxxxxxxxxxx:web:6a715a4xxxxxxxxxxx",
measurementId: "G-6RDxxxxxxxxx"
};
// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
console.log("Firebase initialized:", app);
// Get a reference to the database
const db = firebase.database();
console.log("Database reference:", db);
// Get a reference to the database nodes
const sensor1Ref = db.ref('Sensor');
const sensor2Ref = db.ref('Sensor');
// Function to update sensor 1 data in HTML
function updateSensor1Data(data) {
document.getElementById('sensor1Data').innerHTML = "<p><strong>Sensor 1 Data:</strong> " + JSON.stringify(data) + "</p>";
}
// Function to update sensor 2 data in HTML
function updateSensor2Data(data) {
document.getElementById('sensor2Data').innerHTML = "<p><strong>Sensor 2 Data:</strong> " + JSON.stringify(data) + "</p>";
}
// Listen for changes to sensor 1 data
sensor1Ref.on('value', (snapshot) => {
const data = snapshot.val();
console.log("Sensor 1 Data:", data);
updateSensor1Data(data);
});
// Listen for changes to sensor 2 data
sensor2Ref.on('value', (snapshot) => {
const data = snapshot.val();
console.log("Sensor 2 Data:", data);
updateSensor2Data(data);
});