Sunday 16 April 2017

design free dynamic website using Google firebase


In this small tutorial we will be covering almost all topics related dynamic web application and in each chapter we will be developing many web apps using firebase.

Firebase is a free(for limited access) framework by Google. Official link Firebase Link
There are basically two main types of website - static and dynamic. A static site is one that is usually written in plain HTML and what is in the code of the page is what is displayed to the user. A dynamic site is one that is written using a server-side scripting language such as PHP, ASP, JSP, or Coldfusion.

Chapter 1:Firebase installation setup.

Click on Add project and fill the details. 
Now after this click on Add Firebase to your web app . 




Copy and paste the script to your web page. If you have not created one then use below code and create new file with html extension like mypage.html .By the these all are basic things which you should know already.
<!DOCTYPE html> 
<html lang="en"> 
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title>Document</title> </head> 
<body> 
//Paste your firebase script just above closing body tag. 
</body> 
</html>
<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase-app.js">
<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase-auth.js">
<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase-database.js">
<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase-messaging.js">
Don't forget to paste above CDN just before your firebase script.

Now It is very important to set your firebase database as shown in above snapshot.

Now its time to code your web page

Inside your body tag above your firebase script make one header tag. 
<h id="text">Here we will show data from firebsae database<h>
Now inside firebase script tag we will try to set data for h tag using id="text". 
var text = document.getElementById('text');
var dbRef = firebase.database().ref().child('text');
dbRef.on('value',snap => text.innerText = snap.val());