Vitor Ricardo

Conectando NodeJS no Firebase do Zero – Parte 4

Finalmente chegamos a ultima parte do nosso tutorial do Conectando NodeJS no Firebase do Zero. Nessa última parte, iremos criar uma página HTML com Javascript puro, sem frameworks, simplesmente para receber as informações do firebase em realtime. Aproveitaremos para incluir um formulário que fará uma requisição na nossa API para criar um novo filme. Bora lá!

Primeiro, vamos criar um arquivo chamado index.html, ele pode ficar em qualquer lugar. Dentro desse arquivo, adicione primeiramente o seguinte código:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Connect To Firebase</title>

    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase.js"></script>
  </head>
  <body>
    <div id="divMovies">
    </div>
  </body>
</html>

Agora, precisamos configurar a conexão com o Firebase, para isso, precisamos criar um aplicativo que permita o acesso de terceiros ao Firebase, então, vá até as configurações do seu projeto, e crie uma nova aplicação web:

Será gerado um código que servirá para a página HTML se autenticar ao se comunicar com o banco realtime. Veja um exemplo abaixo do código gerado:

<script>
  var firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

Vale ressaltar que os valores de cada chave estarão preenchidos, agora, copie esse código abaixo da tag body do HTML, e dentro do script, adicione:

const divMovies = document.getElementById('divMovies');

  var moviesRef = firebase.database().ref('movies');
  moviesRef.on('value', function(snapshot) {
    createMovies(snapshot.val());
  });

  function createMovies (movies) {
    divMovies.innerHTML = ''
    for (var [key, value] of Object.entries(movies)) {
        divMovies.innerHTML += `<div style='width: 30%; margin: auto; display: inline-block; border: 1px solid; padding: 10px'><p><b>Name</b>: ${value.name}</p><p><b>Year</b>: ${value.year}</p><p><b>Stars</b>: ${value.stars}</p><p><b>Synopsis</b>: ${value.synopsis}</p></div>`
    }
  }

Nessa etapa, já é para o documento estar puxando os dados do banco em tempo real. Agora, vamos criar o formulário para se adicionar um novo filme direto do site, em cima da DIV movie, adicione o seguinte código:

<div style="margin: 30px">
  <div style='margin-top: 20px'>
    <input type="text" id='name' style='width: 400px' placeholder="Name" />
  </div>
  <div style='margin-top: 20px'>
    <input type="number" id='year' placeholder="Year" />
  </div>
  <div style='margin-top: 20px'>
    <input type="number" id='stars' placeholder="Stars" />
  </div>
  <div style='margin-top: 20px'>
    <textarea id="synopsis" rows="10" cols="100" placeholder="Synopsis"></textarea>
  </div>
  <div>
    <button type="submit" onclick='postNewMovie()'>Add</button>
  </div>
</div>

Agora, embaixo da função createMovies, adicione o método:

function postNewMovie() {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", 'http://localhost:3000/api/movie/create', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({
        name: document.getElementById('name').value,
        year: document.getElementById('year').value,
        stars: document.getElementById('stars').value,
        synopsis: document.getElementById('synopsis').value
    }));
 }

Nossa programação está pronta, basta preencher as informações e enviar a requisição, segue abaixo a demonstração:

Dica:
Treine agora criando novos caminhos no banco, criando requisições para o update e delete, adicione novos parâmetros, se divirta!

Acesse o projeto completo no github: Clique aqui

Conclusão

Finalmente concluímos nossa conexão do NodeJS com o Firebase do zero. Foi demonstrado passo a passo como se fazer, todos os segredinhos que as vezes perdemos horas para descobrir quando não se tem nenhum conhecimento. Espero que tenham gostado!

1 thought on “Conectando NodeJS no Firebase do Zero – Parte 4

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *