Olá, Ya Oliveira!
O código que vou postar será bem básico, ele serve apenas a título de exemplo.
1 - Vamos começar criando uma página 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 - Acesse o site do Firebase, crie e configure sua conta, siguindo essas etapas:
2.1 - Vá ao console
2.2 - Adicionar Projeto
2.3 - Adicione um novo app (clique no ícone da tag)
2.3 - Copie o código javascript mostrado
3 - Agora cole o código copiado no item 2.3 da etapa 2 no arquivo html
da etapa 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 - É preciso também adicionar o jQuery
ao projeto e implemente a lógica da contagem
<!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>
Basicamente, você precisa recuperar a quantidade atual no banco de dados e somar mais uma unidade. Isso tudo ocorre no momento do clique. É evidente que essa lógica pode ser melhorada, como por exemplo, processar a recuperação da quantidade salva via Cloud Functions
e incrementá-la deixando à página a função apenas de acionar o botão/chamada ao Database, mas isso não cabe aqui. Esse código é apenas para fins de exemplificação.
Use-o para estudo, e além dele, estude também a documentação das tecnologias que deseja utilizar. Veja:
https://jquery.com/
https://firebase.google.com/docs/database/web/read-and-write?hl=pt-br
<button>
que vai enviar a ação para o banco de dados, que por sua vez vai somar+1
ao valor que já existe lá. Nunca estudei sobrefirebase
, então ficaria devendo nesse ponto.