Free Firebase Hosting and Realtime Database

2212.i101.038.S.m004.c13.web hosting icons isometric.jpg

Firebase free secure (https) hosting and realtime database, (Spark Plan) offer ~ 10GB free.

after this project you can send data from text box using button and get it to a label from the database using easy steps and codding.

ready to start ?

Open Firebase Link to Create a Project

https://firebase.google.com/

click on Go to console then click Create a project

Create a Project

step 1 of 3 - type your project name

step 2 of 3 - enable google analytics if needed

step 3 of 3 - create project

Build a Realtime Database

click on real-time database from build menu

create database

setup data base

choose test mode

ready to start hosting steps

Add Html App to the Project and Hosting

from project overview add web app

register your app

copy the SDK data and save it you will need it on coding

from bulid menu select (hosting) then get started

Coding

Open visual studio code and make a new folder not file.

new file name index.html and project.js don't change the file name to avoid a bug "error on codes"

past the SDK data on java file as the attached image , you saved it while add app steps

HTML Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Project1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://www.gstatic.com/firebasejs/7.6.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.2/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js"></script>
    <script type="module" defer="" src="project.js"></script>
</head>


<body>
    <h1>Project1 Firebase Realtime Database</h1>
    <div>
        <div>
            <label> the current value : </label>
            <label id="value"> value </label>
            <button type="submit" id="data_get"> send </button>
            <br><br>
        </div>


        <input  id="data_input_text" name="fname" >
        <button type="button" id="datainput_send"> send </button>


    </div>
</body>


<footer>
    <p>Best Regards</p>
</footer>
</html>

JAVA CODE



var firebaseConfig = {
    apiKey: "copy paste SDK",
    authDomain: "copy paste SDK",
    databaseURL: "copy paste SDK",
    projectId: "copy paste SDK",
    storageBucket: "copy paste SDK",
    messagingSenderId: "copy paste SDK",
    appId: "copy paste SDK",
    measurementId: "copy paste SDK"
};

firebase.initializeApp(firebaseConfig);
console.log(firebase);
const get_button = document.getElementById('data_get');
get_button.addEventListener("click", getData);

function getData() {
 const dbRef = firebase.database().ref();
  dbRef.child("sensor1").child("read_data").child("read").on('value', (snapshot) => {
    if (snapshot.exists()) {
      console.log(snapshot.val());
      var cornumber = snapshot.val();
      document.getElementById("value").innerText= cornumber ;  } else { console.log("No data available"); }
  })}

const buttonn = document.getElementById("datainput_send");
buttonn.addEventListener("click", send_data);

function send_data() {
    var data_input = document.getElementById("data_input_text").value;    var data_input_number = Number(data_input);
    firebase.database().ref("/sensor1").child("read_data").update({
        read: data_input_number,
    }, (error) => {
        if (error) { alert(error) // The write failed...  
        } else { alert("data sent to firebase") // Data saved successfully!
     }
    });
}

CMD Step to Start Firebase Deploy

install node.js program from the link https://nodejs.org/en

open Command Propmt and past

npm install -g firebase-tools

after finished the installation past the below to login to your google account

firebase login

select the project name id and type alias

 firebase use --add

then type

firebase init

press y for ready confirm then select realtime database and hosting using space from keyboard and press enter

write the directory you will use to make the hosting after you receive + Firebase initialization complete text

past the files on the hosting directory and now you are ready for deploy using

firebase Deploy

you will receive the hosting URL after finish

Best Regards

Testing

test your website from the link you get from firebase deploy and Firebase realtime database

for modification you can use firebase serve.