0
Hello.
I am a beginner and please need a help from you. I have the following challenge: Make a Like button with jquery and save it to firebase. I imagine you have to put an icon or button in html with a counter in jquery and somehow record that count in firebase. Does anyone have an idea how to do it? Thank you.
0
Hello, Ya Oliveira!
The code I will post will be very basic, it serves as an example.
1 - Let’s start by creating a page html
<!DOCTYPE html>
<html lang="pt" dir="ltr">
<head>
<meta charset="utf-8">
<title>Teste</title>
</head>
<body>
<<button type="button" id="id_do_seu_botao"></button>
</body>
</html>
2 - Access the Firebase website, create and configure your account, following these steps:
2.1 - Go to the console
2.2 - Add Project
2.3 - Add a new app (click the tag icon)
2.3 - Copy the javascript code shown
3 - Now paste the copied code into the item 2.3 stage 2 in the archive html stage 1
<!DOCTYPE html>
<html lang="pt" dir="ltr">
<head>
<meta charset="utf-8">
<title>Teste</title>
</head>
<body>
<<button type="button" name="button"></button>
</body>
</html>
<script src="https://www.gstatic.com/firebasejs/5.9.2/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "valor_ilustrativo",
authDomain: "valor_ilustrativo",
databaseURL: "valor_ilustrativo",
projectId: "valor_ilustrativo",
storageBucket: "valor_ilustrativo",
messagingSenderId: "valor_ilustrativo"
};
firebase.initializeApp(config);
</script>
4 - It is also necessary to add the jQuery to the project and implement the logic of counting
<!DOCTYPE html>
<html lang="pt" dir="ltr">
<head>
<meta charset="utf-8">
<title>Teste</title>
</head>
<body>
<<button type="button" name="button"></button>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js">
<script src="https://www.gstatic.com/firebasejs/5.9.2/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "valor_ilustrativo",
authDomain: "valor_ilustrativo",
databaseURL: "valor_ilustrativo",
projectId: "valor_ilustrativo",
storageBucket: "valor_ilustrativo",
messagingSenderId: "valor_ilustrativo"
};
firebase.initializeApp(config);
var database = firebase.database();
// Adicionando o evento de click no botão
$( "#id_do_seu_botao" ).on( "click", function( event ) {
database.ref("like/amount").on('value', function(snapshot) {
like(snapshot.val());
});
});
function like(amount) {
database.ref('like').set({ amount + 1});
}
</script>
Basically, you need to recover the current amount in the database and add up one more drive. This all occurs at the moment of click. It is clear that this logic can be improved, such as processing the recovery of the saved quantity via Cloud Functions and increment it by leaving to the page the function only to trigger the button/call to the Database, but this does not fit here. This code is for exemplification purposes only.
Use it for study, and in addition, study the documentation of the technologies you want to use. See:
https://firebase.google.com/docs/database/web/read-and-write?hl=pt-br
Amazing solution! I learned a lot from you. Now I’m going to implement. Thank you!
I hope it works! Anything we are here. Good luck!
Browser other questions tagged html jquery firebase firebase-database
You are not signed in. Login or sign up in order to post.
You will indeed make one
<button>that will send the action to the database, which in turn will add+1to the value that already exists there. I never studied aboutfirebase, then you would owe at this point.– Wees Smith