Skip to content

Instantly share code, notes, and snippets.

@tayadehritik

tayadehritik/firebase.html

Last active March 4, 2018 11:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tayadehritik/a4181d0bd2ba889adbdb0a611cda534b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tayadehritik/a4181d0bd2ba889adbdb0a611cda534b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
firebase.html
<!--Line 163 pasun explanation read kara better samjel.Next line 22-->
<html>
<head>
<title>title</title>
<!--Ikde fonts ani Jquery Bootstrap Firebase load karat ahe aaplya file mdhe.-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Bungee' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Flamenco' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Black Ops One' rel='stylesheet'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src='https://cdn.firebase.com/js/client/2.4.0/firebase.js'></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-messaging.js"></script>
<!--Till ith paryant.-->
<style>
/*Itha CSS Lihat aahot design ani sagde HTML elements(button , mssgbox) kashe disayla pahije tyacha sath.*/
body{
/*applya webpage chya body mdhe Bungge(font ahe) to sagde kade use hoil*/
font-family: 'Bungee';
padding: 10px;
}
.msg{
/*just message cha color un stuff*/
margin: 10px 0;
padding: 10px;
width: 400px;
background-color: #FFc82A;
overflow: auto;
}
.j{
/*Itha fakt mssg sathi aapan vegda font use kelay ani fontsize change kelay .*/
font-family: 'Roboto Slab';
font-size: 17px;
}
#text{
/*text element chya properties*/
margin: 5px 0px;
}
#post{
/*post element chya properties*/
padding: 0.5em 1em;
background-color: #50b1ff;
border: none;
color:#FFF;
}
</style>
</head>
<body>
<script>
// Initialize Firebase
// Ikde aaplya firebase valya account sobaat aapan link karat aahot so aapan tyatla database anni authentication use karun shaku.
var config = {
apiKey: "*******************",//apikey hidden thevto karan te private aste.
authDomain: "fir-example-ef56e.firebaseapp.com",
databaseURL: "https://fir-example-ef56e.firebaseio.com",//ha applya database cha url ahe ha url use karun aapan database mdhe message push karu.
projectId: "fir-example-ef56e",
storageBucket: "fir-example-ef56e.appspot.com",
messagingSenderId: "529395661675"
};
firebase.initializeApp(config);
//Ikde Firebase Initialization sampel
</script>
<script type="text/javascript">
//Ha main part ahe document ready ky karto ki sagda html wala page load jhala ki to ya function madhla execute karna start karto.
$(document).ready(function(){
var myFireBase = new Firebase("https://fir-example-ef56e.firebaseio.com/message");//ha aapla database cha url
var username = null;//initially aapan username null thevu until user login nhi karat
$("#button1").hide();//button1 post sathicha ahe te pn hidden rahil login paryanta.
$("#mssg").hide();//mssg ha textarea ahe jitha apan mssg lihto to pn hidden rahil
$("#results").hide();//ha div ahe jitha aaple messages display hotat he pn hidden rahil until login
var provider = new firebase.auth.GoogleAuthProvider();//he google mdhna login karat ahe mhnun tyacha kadna permission ghaysathi ahe.
$("#log1").click(function(){
//log1 login cha button ahe te hidden nhi rahnar aani jevha te click hoel he function execute hote.
firebase.auth().signInWithPopup(provider).then(function(result){
//ikde aapan user la authenticate karat ahot. user redirect hoil google accounts chya page var login sathi
var token = result.credential.accessToken;//login jhalyvar aaplyale token bhetto tyachya account cha
var user = result.user;//user chi info aste te apan user variable mdhe store karat ahot.
console.log(user);//not important
username = user.displayName;//itha aapna username variable jo varti declare kela hota tyat user cha google display name takat ahot.
$("#log1").html("Logged in as "+user.displayName);//mg aapan button var je display hote login wala te change karat so tikde user cha nav disel.
$("#button1").show();//aani mg sagde hidden buttons display karu karan user logged in ahe aata to message taku shakto
$("#mssg").show();
$("#results").show();
}).catch(function(error){
//not important jar khi error aala login process mdhe ta hai itha logs store hotat
var errorcode = error.code;
var email = error.email;
});
});
//atta sagde button disat ahat mg user messagde type karel aani to display hoil
$("#button1").click(function(){
//button1 post sathi ahhe. te click kelyavar ha function execute hoto
var tex = $("#mssg").val();//itha aapan textarea jitha actual message type kelay to ghetoy ani tex variable mdhe store karat ahe.
var len = tex.length; //mg tya message chi length check karto i guess hi line khi useful nhi karan mi usech nhi kelay hai.
if(tex!=0){
//itha to check karto ki message blank nasel tar pudhcha execute kar
myFireBase.push({name:username, text:tex});//message database mdhe push hoto(store hoto).
$("#mssg").val(" ");//ani mg textarea blank karun dyaycha karan user la navin mssg type karaycha asel.
}
else{
//jar khich type nasel kela aani user ni post cha button click kela tar hai hote.
alert("Enter something");
}
});
//ha listener ahe ha function program suru jhalya jhhalya execute hoot rahto
function startListening(){
//pudhcha function constantly jevha pn konta navin message database mdhe add jhala tar execute hote.
myFireBase.on('child_added', function(snapshot) {
//ha function fakt database mdhna messages gheto aani tya textarea var push karat rahto
var msg = snapshot.val();
//itha aapan database cha snapshot ghet aahot(basic database use karayssathi)
var msgTextElement = document.createElement("p");//itha aapan ek <p></p> element create karat aahot actual mssg sath.
msgTextElement.textContent = msg.text;//tya <p></p> element mdhe aapan database mdhla message takat ahot.
var msgUser = document.createElement("b");//<b>element karat ahot bold jo username hold karel.
msgUser.textContent=msg.name;//tya element mdhe actual database mdhna username takat ahot.
var msgElement = document.createElement("div");//itha ek div element ahe yala purna messagge samja yaat te username anin message paste hoel
msgElement.appendChild(msgUser);//itha appan varchya div mdhe username paste karat ahot
var br = document.createElement("br");//breake line create karat aahot so username ani message mdhe ek line space asel
msgTextElement.appendChild(br);//itha aapan te breakline paste karat ahot varchya div la.
msgElement.appendChild(msgTextElement);//itha aapan varchya div la mssg paste karat aahot
msgElement.className = "msg";//aani mg tya div la CSS msg cha class lavat so tyacha color size change hoil.
msgTextElement.className = "j";//ani message la j CSS class lavat aahot so tyacha font-family ani size change hoil.
document.getElementById("results").appendChild(msgElement);//ani finally ha purrn div message ani username jyat ahe to HTML mdhlya result div la paste hoto assa partek vedes koni mssg takla ta purrn database sathi hota.
});
}
startListening();//program chya start lach hai fucntion call hota.
});
</script>
<!--Ha text area itha aapan aapla message type karu.-->
<textarea class="form-control" id = "mssg" rows="5" maxlength="150" style="width:600px;font-family:'Roboto Slab';" placeholder="Message"></textarea>
<br>
<!--he login cha button ahe jyacha id log1 ahe jo aapan CSS part mdhe use karto tyachya properties change karaysathi.-->
<button id="log1" class="btn btn-danger">Login with Google</button>
<!--he Post cha button ahe jyacha id button1 ahe .-->
<button id="button1" class="btn btn-primary">Post</button>
<!--Results div just area ahe jithe aaple messages eka mage ek push hoot rahtil.-->
<div id="results">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment