If you have miss, check out the
Was this helpful? Use firebase to save website feedback [Part 1]
to set up and run your free cloud storage database from google firebase, a simple solution whit some limitations. Instead of complex backend I decide to use this service to decrease resources (time and money are valuable) for my project.
Lets see how website feedback will actually will look like
Integration cloud database
Ok, wets continue our integration. We will extend the copied js code from preview post whit the CDN includes of the firebase libraries. Also I`am using bootstrap and font awesome in this code snipped, I hope this will not bother you.<body>...<div class="card">
<div class="card-body">
<p class="lead">Was this helpful?
<a class="btn btn-outline-dark px-4 ml-4" onclick="fbCounterIncrease('like')">
<i class="far fa-thumbs-up"></i> <span id="span_like">0</span></a>
<a class="btn btn-outline-dark px-4 ml-2" onclick="fbCounterIncrease('dislike')">
<i class="far fa-thumbs-down"></i> <span id="span_dislike">0</span></a>
</p>
</div>
</div>...<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js"></script><script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-analytics.js"></script>
<script>
var firebaseConfig = {
apiKey: "?",
authDomain: "?",
databaseURL: "?",
projectId: "?",
storageBucket: "?",
messagingSenderId: "?",
appId: "?",
measurementId: "?"
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();// listen
const counterLike = firebase.database().ref("like");
counterLike.on("value", (snapshot) => {
document.getElementById("span_like").textContent = snapshot.val();
});
const counterDislike = firebase.database().ref("dislike");
counterDislike.on("value", (snapshot) => {
document.getElementById("span_dislike").textContent = snapshot.val();
});
// update
function fbCounterIncrease(type) {
if (type == 'like') {
counterLike.transaction(val => val + 1, (err) => {
if (err) {
alert(err);
}
});
} else if (type == 'dislike') {
counterDislike.transaction(val => val + 1, (err) => {
if (err) {
alert(err);
}
});
}
};</script></body>
And we are done, if you run your code you have to see Yes 0 / No 0. If everything is working as expected the is something that maybe you want to consider: you need to make some kind of button disabling after click, or the user can increase the values as many times as he want for booth options :)
If you have miss it, here is the Was this helpful? Use firebase to save website feedback [Part 1] part one of this series.
No comments:
Post a Comment