ESP8266 WEMOS D1 Mini Firebase Retrieve data to HTML Java Script
- Setup your realtime database using firebase in firebase website
- Get API key or secret key from your realtime database and put detail inside file
index.js:
(function(){
// Initialize firebase
const config = {
apiKey: "Your project API Key From Firebase"
authDomain: "your-project.firebaseapp.com",
databaseURL: "https://your-project.firebaseio.com",
//projectId: "your-project",
storageBucket: "your-project.appspot.com",
//messagingSenderId: "716575067735",
//appId: "1:716575067735:web:7d7b6a0c18ecc31e"
};- Set your realtime database to test mode read this https://firebase.google.com/docs/rules/basics
- Change your Tag database ex: DHT11 is my example
[+] your-project.firebaseapp.com
|_ [+] DHT11
my script is:
firebase.initializeApp(config);
const preObject = document.getElementById("DHT11");
const dbRefObject = firebase.database().ref().child("DHT11");
dbRefObject.on("value", snap => {
preObject.innerText =JSON.stringify(snap.val(), null, 3);
});- Open
index.htmland change your tag (step 4) ex:DH11 to your realtime database
<body>
<pre id='DHT11'></pre>
<script src="index.js"></script>
</body>- Run and enjoy.