+ 15
How to use Firebase on SoloLearn?
19 Antworten
+ 31
(1)
Firebase setup:
once you created am account you will be given an access script (accessible via AUTHENTICATION->WEB SETUP in the Firebase console)
it looks like this:
<script src="https://www.gstatic.com/firebasejs/3.7.5/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "yourApiKey",
authDomain: "yourAuthDomain.firebaseapp.com",
databaseURL: "https://yourUrl.firebaseio.com",
projectId: "yourProjectId",
storageBucket: "yourStorageBucket.appspot.com",
messagingSenderId: "someNumber"
};
firebase.initializeApp(config);
</script>
this configures your access point to the database
the last line before the </script> initializes the database with your supplied parameters
+ 22
nice explanation :)@Burey
+ 16
last time this question was asked i made a chat to demonstrate it....
https://code.sololearn.com/WtFXsv7tdPW0/?ref=app
some references:
https://firebase.google.com/docs/samples/#web
https://firebase.google.com/docs/reference/?nav=true
+ 13
(2)
Setting to read/write anonymously:
first, to write anonymously to the database you must change somesettongs in the Firebase console and database rules
Authentication -> SIGN-IN METHOD
click Anonymous (last on the list) and enable
Database -> RULES
{
"rules":{
".read":true,
".write":true
}
}
this will allow to read and write anonymously without a need to first authenticate with the database
+ 13
(3)
How will the data look like:
imagine we want to create a messaging service and we want to save messages.
we will save the messages in a specific structure:
every post will be saved in a branch of a posts tree with unique id for each post (firebase assigns those ids)
posts:{
someId1:{
author:"Burey",
body:"welcome to Burey-Chat!!!",
createTime:1483743673728
},
someId2:{......},
}
+ 11
(4)
Lets connect to the database and write/read something:
1) get a reference to posts branch in the database:
postsRef = firebase.database().ref("posts");
2) create a listener that will activate each time data is added to the database (new post added)
postsRef.on("value", getMessages, onError);
as you can see passed 3 parameters to on() method
"value" defines on which type of event
getMessages is a function (we will define it right away)
onError is also a function.
types of event:
"value": fires every time posts branch is changed (child added,removed,updated)
"child_added": fires only when a new child to posts branch added
"child_removed": fires when a child is deleted
to write data we simply use push to the postsRef:
postsRef.push({
author: "Burey",
body: "Test Message",
createTime: firebase.database.ServerValue.TIMESTAMP
});
the create time is taken from the server, otherwise you can mix up times from different regions
so use firebase.database.ServerValue.TIMESTAMP and not your own local time
+ 10
anything specific?
+ 10
(5)
Reading data:
first lets define the functions to handle the on() event
function onError(err){
console.log("error occured:"+err);
}
each call to on returns a snapshot which is the current data at the firebase server, the snapshot is received by tbe function we use as the second parameter to on
we need to iterate on the snapshot and extract the data
let's save the data into local posts array
function getMessages(snapshot){
posts=[];
snapshot.forEach(function(child){
posts.push({
author:child.val().author,
body:child.val().body,
createTime:child.val().createTime
});
});
// you got all the data inside the posts array, do something with it (refresh the user interface)
}
+ 9
go ahead @S Vengat
you welcome @Abdur
+ 8
I wanna try something using firebase
+ 7
oh didn't see xD
no prob :]
+ 5
@Burey I know, but I can't understand such a complicated code. I just need someone explain
+ 5
@Burey reading..
+ 5
@Burey how we add data?
+ 5
@Burey I got it, let me try...
+ 4
@Burey thats enough I think. Thank you so much.
+ 4
@burey a great thanks
+ 1
bookmarked
+ 1
how do we actully save data?