0

Olá.

Sou iniciante e por favor, preciso de uma ajuda de vocês. Tenho o seguinte desafio: Fazer um botão de curtir com jquery e gravá-lo no firebase. Imagino que tenha que colocar um ícone ou botão no html com um contador no jquery e de alguma forma, gravar essa contagem no firebase. Alguém tem uma ideia de como posso fazer? Obrigada.

1
  • Você vai de fato fazer um <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 sobre firebase, então ficaria devendo nesse ponto.
    – Wees Smith
    Commented 4/04/2019 às 16:25

1 Resposta 1

0

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

2
  • Solução incrível! Aprendi muito contigo. Agora vou implementar. Obrigada! Commented 5/04/2019 às 19:21
  • Espero que funcione! Qualquer coisa estamos aqui. Boa sorte!
    – Ivan Silva
    Commented 5/04/2019 às 19:27

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .