In this blog you learn how to make a custom web app for your ESP controller .
The advantages of creating an online application that communicates with IoT devices include:
Increased usability: IoT devices can be more easily controlled and monitored by non-technical users thanks to a mobile app’s user-friendly UI.
Real-time tracking and control: A web tool enables remote surveillance and troubleshooting of IoT devices in real-time from any place with an internet link.
Centralized management: Users can setup and keep numerous IoT devices more easily by using a mobile app to control them from a single place.
Automation: Based on user preferences or sensing data, a web app can be used to handle chores like turning on and off lights or changing a room’s temperature.
Integration with other services: To offer more features and improve the user experience, a web app can connect with other online services, such as weather information.
A web app’s scalability makes it ideal for enterprise-level IoT installations because it can be scaled to manage a large number of users and devices.
Cost-effectiveness: A web app can eliminate the need for the creation of specialised devices and software, which can save money and effort.
Here is the steps of making your webapp
INSTALL VS CODE
Download LINK – https://code.visualstudio.com/download
Install Node.js link-https://nodejs.org/en
Make sure you have select this checkbox
INSTALL NODE JS EXTENSION
I have installed version so it is showing uninstall you have install it by the following steps.
Now Go-to >> File >> Open folder >>Create a new folder
Create a new folder >> click on select folder
Click on terminal >> New terminal
IN terminal type “firebase login” command an hit enter after that type “Y”.
A popup will appear and you need to select your google account and log in there your existinfirebase account . >> and click to allow
You will get this message
After successfully login , Type initialization command in terminal – “firebase init”.
After that type “Y” to Yes and enter
Use UP, Down Arrow Key to move and SPACE button to select , and Select these two options “Realtime Database” & “Hosting” then HIT >> Enter –
Choses your project by “Use an entering in Existing project” and hit >>ENTER
after that type “Y” and hit enter in both next options arrived .
Type N to this Rewrite option and automatic deploy options and hit enter.
After this Type a another command -“Firebase serve — only hosting” and hit enter >>
After this message congratulation your setup is completed and hosted locally .
Create a new folder in public folder >> and named it as “script”.
Under that Script folder Create an another new folder named “index.js” and “auth.js”.
Index.html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Anish IoT Firebase App</title>
<!-- update the version number as needed -->
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-database.js"></script>
<script>
// IMPORTANT!!!
// Replace with your app config object
const firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "your_roject.firebaseapp.com",
databaseURL: "https://your_project.asia-southeast1.firebasedatabase.app",
projectId: "Your_projrct_390",
storageBucket: "your-project-88f.appspot.com",
messagingSenderId: "55671205345",
appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
};
// Initialize firebase
firebase.initializeApp(firebaseConfig);
// Make auth and database references
const auth = firebase.auth();
const db = firebase.database();
</script>
<!-- include highchartsjs to build the charts-->
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- include to use bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- include to use jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="min-vh-100 d-flex flex-column justify-content-between">
<!--NAVBAR-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container d-flex justify-content-between">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
<strong>ESP Firebase App 🔥</strong>
</a>
</div>
<div class="navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" id="login-link">
<button id="loginBtn" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#login-modal">Login</button>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="logout-link" style="display: none;">
<button id="logoutBtn" class="btn btn-secondary navbar-btn" data-bs-toggle="modal" data-bs-target="#logout-modal">Logout</button>
</a>
</li>
</ul>
<span class="navbar-text" id="user-details" style="display: none;">
User details
</span>
</div>
</div>
</nav>
<!-- LOGIN MODAL -->
<div class="modal fade" id="login-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Login</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Insert your email and password to login.</p>
<form id="login-form">
<div class="mb-3">
<label for="inputEmail" class="form-label">Email address</label>
<input type="email" class="form-control" id="input-email">
</div>
<div class="mb-3">
<label for="inputPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="input-password">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>
</div>
<!-- LOGOUT MODAL -->
<div class="modal fade" id="logout-modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Logout</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Are you sure you want to logout?</p>
</div>
<div class="modal-footer">
<button id="logout" type="button" class="btn btn-primary" data-bs-dismiss="modal" aria-label="Close">Logout</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
</div>
</div>
</div>
</div>
<!-- PAGE CONTENT -->
<!-- Content if user is logged out -->
<div id="signedOutMessage" class="text-center" style="display: none;">You are logged out or user doesn't have permissions.</div>
<!-- Content if user is logged in -->
<div class="container mt-4 mb-4" id="dashboardSignedIn" style="display: none;">
<!--Container for buttons-->
<div class="row mb-3">
<!-- button 1-->
<div class="col-sm mb-3 text-center">
<div class="card">
<h5 class="card-header">GPIO 2</h5>
<div class="card-body">
<h5 class="card-title">Current state: <span id="btn1State"></span></h5>
<button id="btn1On" class="btn btn-lg btn-block btn-success">TURN ON</button>
<button id="btn1Off" class="btn btn-lg btn-block btn-outline-secondary">TURN OFF</button>
</div>
</div>
</div>
<!-- button 2-->
<div class="col-sm mb-3 text-center">
<div class="card">
<h5 class="card-header">GPIO 12</h5>
<div class="card-body">
<h5 class="card-title">Current state: <span id="btn2State"></span></h5>
<button id="btn2On" class="btn btn-lg btn-block btn-success">TURN ON</button>
<button id="btn2Off" class="btn btn-lg btn-block btn-outline-secondary">TURN OFF</button>
</div>
</div>
</div>
</div>
<!--Container for sliders-->
<div class="row mb-3">
<!-- Slider 1 -->
<div class="col-sm mb-3 text-center">
<div class="card">
<div class="card-header">
<h4>GPIO 13</h4>
</div>
<div class="card-body">
<h2 class="card-title" id="sld1Value"></h2>
<input id="sld1" type="range" min="0" max="100" style="width:100%;">
</div>
</div>
</div>
<!-- Slider 2 -->
<div class="col-sm mb-3 text-center">
<div class="card">
<div class="card-header">
<h4>GPIO 14</h4>
</div>
<div class="card-body">
<h2 class="card-title" id="sld2Value"></h2>
<input id="sld2" type="range" min="0" max="100" style="width:100%;">
</div>
</div>
</div>
</div>
<!-- Container for input message -->
<div class="row mb-3">
<div class="col-mb-3 text-center">
<!-- Input Message 1 -->
<div class="card">
<div class="card-header">
<h4>Input Message</h4>
</div>
<p id="input1Text" class="m-3 jus"></p>
<form>
<div class="form-group mb-3">
<input type="text" class="form-control" style="width: 100%;" id="input1">
</div>
</form>
</div>
</div>
</div>
<!-- Container for latest update -->
<div class="row mb-3">
<div class="col-mb-3 text-center">
<!-- Latest update -->
<div class="card">
<div class="card-header">
<h4>Latest Update</h4>
</div>
<p id="last-update" class="m-2 jus"></p>
</div>
</div>
</div>
<!--Container for cards (lastest readings)-->
<div class="row mb-3" id="readings-cards">
<!-- Temperature -->
<div class="col-sm mb-3 text-center">
<div class="card">
<div class="card-header">
<h5>Temperature</h5>
</div>
<div class="card-body">
<h2 class="card-title"><span id="temperature"></span> ºC</h2>
</div>
</div>
</div>
<!-- Humidity -->
<div class="col-sm mb-3 text-center">
<div class="card">
<div class="card-header">
<h5>Humidity</h5>
</div>
<div class="card-body">
<h2 class="card-title"><span id="humidity"></span> %</h2>
</div>
</div>
</div>
<!-- Pressure -->
<div class="col-sm mb-3 text-center">
<div class="card">
<div class="card-header">
<h5>Pressure</h5>
</div>
<div class="card-body">
<h2 class="card-title"><span id="pressure"></span> hPa</h2>
</div>
</div>
</div>
</div>
<!--Container for charts-->
<div class="row mb-3" id="charts-container">
<!-- Temperature Chart-->
<div class="col-sm mb-3 text-center">
<div class="card">
<h5 class="card-header">Temperature Chart</h5>
<div class="card-body">
<div id="chart-temperature" class="chart-container"></div>
</div>
</div>
</div>
<!-- Humidity Chart-->
<div class="col-sm mb-3 text-center">
<div class="card">
<h5 class="card-header">Humidity Chart</h5>
<div class="card-body">
<div id="chart-humidity" class="chart-container"></div>
</div>
</div>
</div>
<!-- Pressure Chart-->
<div class="col-sm mb-3 text-center">
<div class="card">
<h5 class="card-header">Pressure Chart</h5>
<div class="card-body">
<div id="chart-pressure" class="chart-container"></div>
</div>
</div>
</div>
</div>
<!--Container for buttons to handle data-->
<div class="row mb-3">
<div class="col-sm mb-3 text-center">
<button id="view-data-button" class="btn btn-primary btn-sm">View all data</button>
<button id="hide-data-button" class="btn btn-secondary btn-sm" style="display: none;" >Hide data</button>
<button id="delete-data-button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#delete-data-modal">Delete data</button>
</div>
</div>
<!--Container for table with logs of sensor readings-->
<div class="row mb-3" id="table-container">
<div class="col-mb-3 text-center">
<!-- Table with Sensor Readings -->
<div class="card">
<table class="table table-striped">
<thead>
<tr id="theader">
<th scope="col">Timestamp</th>
<th scope="col">Temp ºC</th>
<th scope="col">Hum %</th>
<th scope="col">Pres (hPa)</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
<!--Button to load more data-->
<button id="load-data" class="btn btn-lg btn-block btn-success">More results...</button>
</div>
</div>
</div>
<!-- Delete Data Modal -->
<div class="modal fade" id="delete-data-modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete Data</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete all data?</p>
</div>
<div class="modal-footer">
<button id="delete-data" type="button" class="btn btn-danger" data-bs-dismiss="modal" aria-label="Close">Delete</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<!--Footer-->
<div class="container footer navbar-fixed-bottom bg-light">
<footer class=" text-center text-lg-start">
<div class="text-center p-3">
Powered by:
<a class="text-dark" href="https://Elconics.com/">Random Nerd Tutorials</a>
</div>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script src="scripts/auth.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/charts-definition.js"></script>
</body>
</html>
Index.js Code
// DOM elements
const logoutNavElement = document.querySelector('#logout-link');
const loginNavElement = document.querySelector('#login-link');
const signedOutMessageElement = document.querySelector('#signedOutMessage');
const dashboardElement = document.querySelector("#dashboardSignedIn");
const userDetailsElement = document.querySelector('#user-details');
// MANAGE LOGIN/LOGOUT UI
const setupUI = (user) => {
if (user) {
//toggle UI elements
logoutNavElement.style.display = 'block';
loginNavElement.style.display = 'none';
signedOutMessageElement.style.display ='none';
dashboardElement.style.display = 'block';
userDetailsElement.style.display ='block';
userDetailsElement.innerHTML = user.email;
// get user UID to get data from database
var uid = user.uid;
console.log(uid);
// Database paths (with user UID)
var dbPathBtn1 = 'UsersData/' + uid.toString() + '/outputs/digital/2';
var dbPathBtn2 = 'UsersData/' + uid.toString() + '/outputs/digital/12';
var dbPathSlider1 = 'UsersData/' + uid.toString() + '/outputs/pwm/13';
var dbPathSlider2 = 'UsersData/' + uid.toString() + '/outputs/pwm/14';
var dbPathBmeTemp = 'UsersData/' + uid.toString() + '/sensor/Reading1';
var dbPathBmeHum = 'UsersData/' + uid.toString() + '/sensor/Reading1';
var dbPathBmePres = 'UsersData/' + uid.toString() + '/sensor/Reading1';
var dbPathInput1 = 'UsersData/' + uid.toString() + '/outputs/message';
//////// Button 1 - GPIO 2 ////////
var btn1State = document.getElementById('btn1State');
var dbBtn1 = firebase.database().ref().child(dbPathBtn1);
// Button 1 - GPIO 2 - Update state message on web page
dbBtn1.on('value', snap => {
if(snap.val()==1) {
btn1State.innerText = "ON";
}
else {
btn1State.innerText = "OFF";
}
});
// Button 1 - GPIO 2 - Update database upon button click
const btn1On = document.getElementById('btn1On');
const btn1Off = document.getElementById('btn1Off');
btn1On.onclick = () => {
firebase.database().ref().child(dbPathBtn1).set(1);
}
btn1Off.onclick = () => {
firebase.database().ref().child(dbPathBtn1).set(0);
}
//////// Button 2 - GPIO 12 ////////
var btn2State = document.getElementById('btn2State');
var dbBtn2 = firebase.database().ref().child(dbPathBtn2);
// Button 2 - GPIO 12 - Update state message on web page
dbBtn2.on('value', snap => {
if(snap.val()==1) {
btn2State.innerText = "ON";
}
else {
btn2State.innerText = "OFF";
}
});
// Button 2 - GPIO 12 - Update database upon button click
const btn2On = document.getElementById('btn2On');
const btn2Off = document.getElementById('btn2Off');
btn2On.onclick = () => {
firebase.database().ref().child(dbPathBtn2).set(1);
}
btn2Off.onclick = () => {
firebase.database().ref().child(dbPathBtn2).set(0);
}
//////// Sensor Readings - BME Temperature - Update web page with new values from database ////////
var dbBmeTemp = firebase.database().ref().child(dbPathBmeTemp);
const bmeTemp = document.getElementById('bmeTemp');
dbBmeTemp.on('value', snap => {
// Celsius degrees
bmeTemp.innerText = snap.val().toFixed(2) + " ºC";
// Fahrenheit degrees
//bmeTemp.innerText = snap.val().toFixed(2) + " ºF";
});
//////// Sensor Readings - BME Humidity - Update web page with new values from database ////////
var dbBmeHumi = firebase.database().ref().child(dbPathBmeHum);
const bmeHumi = document.getElementById('bmeHumi');
dbBmeHumi.on('value', snap => {
bmeHumi.innerText = snap.val().toFixed(2) + " %";
});
//////// Sensor Readings - BME Pressure - Update web page with new values from database ////////
var dbBmePres = firebase.database().ref().child(dbPathBmePres);
const bmePres = document.getElementById('bmePres');
dbBmePres.on('value', snap => {
bmePres.innerText = snap.val().toFixed(2) + " hPa";
});
//////// Slider 1 - GPIO 13 ////////
var sld1Value = document.getElementById('sld1Value');
var dbSld1 = firebase.database().ref().child(dbPathSlider1);
const sld1 = document.getElementById('sld1');
// Slider 1 - GPIO 13 - Update slider text value on web page
dbSld1.on('value', snap => {
sld1Value.innerText = snap.val() + " %";
sld1.value = snap.val();
});
// Slider 1 - GPIO 13 - Update database slider value
sld1.onchange = () => {
firebase.database().ref().child(dbPathSlider1).set(Number(sld1.value));
}
//////// Slider 2 - GPIO 14 ////////
var sld2Value = document.getElementById('sld2Value');
var dbSld2 = firebase.database().ref().child(dbPathSlider2);
const sld2 = document.getElementById('sld2');
// Slider 2 - GPIO 14 - Update slider text value on web page
dbSld2.on('value', snap => {
sld2Value.innerText = snap.val() + " %";
sld2.value = snap.val();
});
// Slider 2 - GPIO 14 - Update database slider value
sld2.onchange = () => {
firebase.database().ref().child(dbPathSlider2).set(Number(sld2.value));
}
//////// Input 1 - Message ////////
var dbInput1 = firebase.database().ref().child(dbPathInput1);
const input1 = document.getElementById('input1');
const input1Text = document.getElementById('input1Text');
// Input 1 - Update input text on web page
dbInput1.on('value', snap => {
input1Text.innerText = snap.val();
});
// Input 1 - Update database input 1 value
input1.onchange = () => {
firebase.database().ref().child(dbPathInput1).set(input1.value);
}
// if user is logged out
} else{
// toggle UI elements
logoutNavElement.style.display = 'none';
loginNavElement.style.display = 'block';
signedOutMessageElement.style.display ='block';
dashboardElement.style.display = 'none';
userDetailsElement.style.display ='none';
}
}
Auth.js code
// DOM elements
const logoutNavElement = document.querySelector('#logout-link');
const loginNavElement = document.querySelector('#login-link');
const signedOutMessageElement = document.querySelector('#signedOutMessage');
const dashboardElement = document.querySelector("#dashboardSignedIn");
const userDetailsElement = document.querySelector('#user-details');
// MANAGE LOGIN/LOGOUT UI
const setupUI = (user) => {
if (user) {
//toggle UI elements
logoutNavElement.style.display = 'block';
loginNavElement.style.display = 'none';
signedOutMessageElement.style.display ='none';
dashboardElement.style.display = 'block';
userDetailsElement.style.display ='block';
userDetailsElement.innerHTML = user.email;
// get user UID to get data from database
var uid = user.uid;
console.log(uid);
// Database paths (with user UID)
var dbPathBtn1 = 'UsersData/' + uid.toString() + '/outputs/digital/2';
var dbPathBtn2 = 'UsersData/' + uid.toString() + '/outputs/digital/12';
var dbPathSlider1 = 'UsersData/' + uid.toString() + '/outputs/pwm/13';
var dbPathSlider2 = 'UsersData/' + uid.toString() + '/outputs/pwm/14';
var dbPathBmeTemp = 'UsersData/' + uid.toString() + '/sensor/Reading1';
var dbPathBmeHum = 'UsersData/' + uid.toString() + '/sensor/Reading1';
var dbPathBmePres = 'UsersData/' + uid.toString() + '/sensor/Reading1';
var dbPathInput1 = 'UsersData/' + uid.toString() + '/outputs/message';
//////// Button 1 - GPIO 2 ////////
var btn1State = document.getElementById('btn1State');
var dbBtn1 = firebase.database().ref().child(dbPathBtn1);
// Button 1 - GPIO 2 - Update state message on web page
dbBtn1.on('value', snap => {
if(snap.val()==1) {
btn1State.innerText = "ON";
}
else {
btn1State.innerText = "OFF";
}
});
// Button 1 - GPIO 2 - Update database upon button click
const btn1On = document.getElementById('btn1On');
const btn1Off = document.getElementById('btn1Off');
btn1On.onclick = () => {
firebase.database().ref().child(dbPathBtn1).set(1);
}
btn1Off.onclick = () => {
firebase.database().ref().child(dbPathBtn1).set(0);
}
//////// Button 2 - GPIO 12 ////////
var btn2State = document.getElementById('btn2State');
var dbBtn2 = firebase.database().ref().child(dbPathBtn2);
// Button 2 - GPIO 12 - Update state message on web page
dbBtn2.on('value', snap => {
if(snap.val()==1) {
btn2State.innerText = "ON";
}
else {
btn2State.innerText = "OFF";
}
});
// Button 2 - GPIO 12 - Update database upon button click
const btn2On = document.getElementById('btn2On');
const btn2Off = document.getElementById('btn2Off');
btn2On.onclick = () => {
firebase.database().ref().child(dbPathBtn2).set(1);
}
btn2Off.onclick = () => {
firebase.database().ref().child(dbPathBtn2).set(0);
}
//////// Sensor Readings - BME Temperature - Update web page with new values from database ////////
var dbBmeTemp = firebase.database().ref().child(dbPathBmeTemp);
const bmeTemp = document.getElementById('bmeTemp');
dbBmeTemp.on('value', snap => {
// Celsius degrees
bmeTemp.innerText = snap.val().toFixed(2) + " ºC";
// Fahrenheit degrees
//bmeTemp.innerText = snap.val().toFixed(2) + " ºF";
});
//////// Sensor Readings - BME Humidity - Update web page with new values from database ////////
var dbBmeHumi = firebase.database().ref().child(dbPathBmeHum);
const bmeHumi = document.getElementById('bmeHumi');
dbBmeHumi.on('value', snap => {
bmeHumi.innerText = snap.val().toFixed(2) + " %";
});
//////// Sensor Readings - BME Pressure - Update web page with new values from database ////////
var dbBmePres = firebase.database().ref().child(dbPathBmePres);
const bmePres = document.getElementById('bmePres');
dbBmePres.on('value', snap => {
bmePres.innerText = snap.val().toFixed(2) + " hPa";
});
//////// Slider 1 - GPIO 13 ////////
var sld1Value = document.getElementById('sld1Value');
var dbSld1 = firebase.database().ref().child(dbPathSlider1);
const sld1 = document.getElementById('sld1');
// Slider 1 - GPIO 13 - Update slider text value on web page
dbSld1.on('value', snap => {
sld1Value.innerText = snap.val() + " %";
sld1.value = snap.val();
});
// Slider 1 - GPIO 13 - Update database slider value
sld1.onchange = () => {
firebase.database().ref().child(dbPathSlider1).set(Number(sld1.value));
}
//////// Slider 2 - GPIO 14 ////////
var sld2Value = document.getElementById('sld2Value');
var dbSld2 = firebase.database().ref().child(dbPathSlider2);
const sld2 = document.getElementById('sld2');
// Slider 2 - GPIO 14 - Update slider text value on web page
dbSld2.on('value', snap => {
sld2Value.innerText = snap.val() + " %";
sld2.value = snap.val();
});
// Slider 2 - GPIO 14 - Update database slider value
sld2.onchange = () => {
firebase.database().ref().child(dbPathSlider2).set(Number(sld2.value));
}
//////// Input 1 - Message ////////
var dbInput1 = firebase.database().ref().child(dbPathInput1);
const input1 = document.getElementById('input1');
const input1Text = document.getElementById('input1Text');
// Input 1 - Update input text on web page
dbInput1.on('value', snap => {
input1Text.innerText = snap.val();
});
// Input 1 - Update database input 1 value
input1.onchange = () => {
firebase.database().ref().child(dbPathInput1).set(input1.value);
}
// if user is logged out
} else{
// toggle UI elements
logoutNavElement.style.display = 'none';
loginNavElement.style.display = 'block';
signedOutMessageElement.style.display ='block';
dashboardElement.style.display = 'none';
userDetailsElement.style.display ='none';
}
}
Now go to Your Firebase account scroll down and copy that config section .
Copy that config keys and paste inside ” index.html “
Now in terminal type – “Firebase serve — only hosting” to publish web app again.
Now you see there is not any reading value
Publish to data
Now Copy this code and paster it to your esp32
This is working arduino code for Web App
// Data is sending in firebase Test project in json format
#include <Arduino.h>
#if defined(ESP32)
#include <WiFi.h>
#elif defined(ESP8266)
#include <ESP8266WiFi.h>
#endif
#include <Firebase_ESP_Client.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
// Provide the token generation process info.
#include "addons/TokenHelper.h"
// Provide the RTDB payload printing info and other helper functions.
#include "addons/RTDBHelper.h"
// Insert your network credentials
#define WIFI_SSID "Your ssid"
#define WIFI_PASSWORD "Password"
// Insert Firebase project API Key
#define API_KEY "XXXXXXXXXXXXXXXXXXXXX"
// Insert Authorized Username and Corresponding Password
#define USER_EMAIL "@YOUR EMAIL-ID"
#define USER_PASSWORD "YOUR PASSWORD"
// Insert RTDB URLefine the RTDB URL
#define DATABASE_URL "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/"
// Define Firebase objects
FirebaseData stream;
FirebaseData fbdo;
FirebaseAuth auth;
FirebaseConfig config;
// Variable to save USER UID
String uid;
// Variables to save database paths
String databasePath;
String tempPath;
String humPath;
String presPath;
String listenerPath;
float temperature;
float humidity;
float pressure;
// Timer variables (send new readings every other minute)
unsigned long sendDataPrevMillis = 0;
unsigned long timerDelay = 1200;
// Initialize WiFi
void initWiFi() {
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
Serial.print("Connecting to WiFi ..");
while (WiFi.status() != WL_CONNECTED) {
Serial.print('.');
delay(1000);
}
Serial.println(WiFi.localIP());
Serial.println();
}
// Write float values to the database
void sendFloat(String path, float value){
if (Firebase.RTDB.setFloat(&fbdo, path.c_str(), value)){
Serial.print("Writing value: ");
Serial.print (value);
Serial.print(" on the following path: ");
Serial.println(path);
Serial.println("PASSED");
Serial.println("PATH: " + fbdo.dataPath());
Serial.println("TYPE: " + fbdo.dataType());
}
else {
Serial.println("FAILED");
Serial.println("REASON: " + fbdo.errorReason());
}
}
// Callback function that runs on database changes
void streamCallback(FirebaseStream data){
Serial.printf("stream path, %s\nevent path, %s\ndata type, %s\nevent type, %s\n\n",
data.streamPath().c_str(),
data.dataPath().c_str(),
data.dataType().c_str(),
data.eventType().c_str());
printResult(data); //see addons/RTDBHelper.h
Serial.println();
//This is the size of stream payload received (current and max value)
//Max payload size is the payload size under the stream path since the stream connected
//and read once and will not update until stream reconnection takes place.
//This max value will be zero as no payload received in case of ESP8266 which
//BearSSL reserved Rx buffer size is less than the actual stream payload.
//Serial.printf("Received stream payload size: %d (Max. %d)\n\n", data.payloadLength(), data.maxPayloadLength());
}
void streamTimeoutCallback(bool timeout){
if (timeout)
Serial.println("stream timeout, resuming...\n");
if (!stream.httpConnected())
Serial.printf("error code: %d, reason: %s\n\n", stream.httpCode(), stream.errorReason().c_str());
}
void setup(){
Serial.begin(115200);
// Init BME sensor, OLED, and WiFi
initWiFi();
// Assign the api key (required)
config.api_key = API_KEY;
// Assign the user sign in credentials
auth.user.email = USER_EMAIL;
auth.user.password = USER_PASSWORD;
// Assign the RTDB URL (required)
config.database_url = DATABASE_URL;
Firebase.reconnectWiFi(true);
fbdo.setResponseSize(4096);
// Assign the callback function for the long running token generation task */
config.token_status_callback = tokenStatusCallback; //see addons/TokenHelper.h
// Assign the maximum retry of token generation
config.max_token_generation_retry = 5;
// Initialize the library with the Firebase authen and config
Firebase.begin(&config, &auth);
// Getting the user UID might take a few seconds
Serial.println("Getting User UID");
while ((auth.token.uid) == "") {
Serial.print('.');
delay(1000);
}
// Print user UID
uid = auth.token.uid.c_str();
Serial.print("User UID: ");
Serial.println(uid);
// Update database path with user UID
databasePath = "/UsersData/" + uid;
// Define database path for sensor readings
tempPath = databasePath + "/sensor/temperature"; // --> UsersData/<user_uid>/sensor/temperature
humPath = databasePath + "/sensor/humidity"; // --> UsersData/<user_uid>/sensor/humidity
presPath = databasePath + "/sensor/pressure"; // --> UsersData/<user_uid>/sensor/pressure
// Update database path for listening
listenerPath = databasePath + "/outputs/";
// Streaming (whenever data changes on a path)
// Begin stream on a database path --> UsersData/<user_uid>/outputs
if (!Firebase.RTDB.beginStream(&stream, listenerPath.c_str()))
Serial.printf("stream begin error, %s\n\n", stream.errorReason().c_str());
// Assign a calback function to run when it detects changes on the database
Firebase.RTDB.setStreamCallback(&stream, streamCallback, streamTimeoutCallback);
delay(2000);
}
void loop(){
// Send new readings to database
if (Firebase.ready() && (millis() - sendDataPrevMillis > timerDelay || sendDataPrevMillis == 0)){
sendDataPrevMillis = millis();
// Get latest sensor readings
temperature = random(1,100);
humidity = random(200,300);
pressure = random(300,400);
// Send readings to database:
sendFloat(tempPath, temperature);
sendFloat(humPath, humidity);
sendFloat(presPath, pressure);
}
}
Add your Firebase API and Database URL to this code .
your Local hosted webapp is now completed you can check all the slider is working and random readings .
Now host Your web app globally
Go to terminal type – “firebase deploy”
go to index.html and change the local address to global address.
Got to fire base hosting section and copy this webapp link
now change this to index.htm by adding “/Scripts/auth.js” and similarly for the index.js.
Deploy this webapp again with “firebase deploy” command and you are done .
congratulation your webapp is hosted successfully.
