{"id":28470,"date":"2021-06-11T16:46:00","date_gmt":"2021-06-11T13:46:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28470"},"modified":"2021-10-18T04:00:44","modified_gmt":"2021-10-18T01:00:44","slug":"como-conectar-o-firebase-realtime-database-ao-formulario-do-seu-site","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-conectar-o-firebase-realtime-database-ao-formulario-do-seu-site\/","title":{"rendered":"Como conectar o Firebase Realtime Database ao formul\u00e1rio do seu site"},"content":{"rendered":"

Voc\u00ea deseja armazenar os dados de formul\u00e1rios do seu site no Firebase? Se sim, ent\u00e3o voc\u00ea est\u00e1 no lugar certo. Neste artigo, mostrarei como conectar o banco de dados em tempo real do Firebase ao formul\u00e1rio e armazenar seus dados no Firebase.<\/p>\n

O banco de dados Firebase realtime \u00e9 um banco de dados NoSQL hospedado na nuvem. No Firebase, os dados s\u00e3o armazenados como JSON e sincronizados em tempo real com todos os clientes conectados criados com iOS, Android e SDKs de JavaScript. Quando dizemos tempo real, isso significa dados trocados entre aplicativos e banco de dados em tempo real (sem atrasos). Voc\u00ea pode ler mais sobre os recursos do Firebase na documenta\u00e7\u00e3o<\/a>.<\/p>\n

Para este tutorial, vou criar um formul\u00e1rio de contato simples e armazenar os dados do formul\u00e1rio no banco de dados em tempo real do Firebase. Para enviar dados do formul\u00e1rio para o Firebase, usarei o SDK do JavaScript.<\/p>\n

Configura\u00e7\u00e3o do Firebase<\/h3>\n

Para come\u00e7ar, acesse o Firebase console<\/a> e crie um novo projeto. O usu\u00e1rio tamb\u00e9m pode escolher um projeto existente. Depois de criar um novo projeto, voc\u00ea redirecionar\u00e1 para uma p\u00e1gina onde obteria o c\u00f3digo JavaScript do Firebase. Clique em um \u00edcone de c\u00f3digo que abrir\u00e1 um pop-up.<\/p>\n

\"Como<\/a>\"Como<\/a><\/p>\n

Copie o c\u00f3digo mostrado no pop-up que ser\u00e1 necess\u00e1rio nas pr\u00f3ximas etapas. No menu do lado esquerdo, clique em ‘Banco de dados’ e depois em ‘Criar banco de dados’ na se\u00e7\u00e3o Banco de dados em tempo real.<\/p>\n

\"Como<\/a><\/p>\n

Ele ir\u00e1 abrir um pop-up, escolher o modo de teste e, finalmente, clicar no bot\u00e3o ‘Ativar’.<\/p>\n

\"Como<\/a><\/p>\n

Voc\u00ea ser\u00e1 redirecionado para a pr\u00f3xima tela, onde ver\u00e1 seu banco de dados em tempo real. No momento n\u00e3o h\u00e1 dados, ent\u00e3o seu banco de dados est\u00e1 vazio.<\/p>\n

\"Como<\/a><\/p>\n

Conecte o Firebase Realtime Database ao formul\u00e1rio do seu site<\/h3>\n

Conclu\u00edmos a configura\u00e7\u00e3o do Firebase. A pr\u00f3xima coisa que precisa fazer \u00e9 criar um formul\u00e1rio e armazenar os dados do formul\u00e1rio no Firebase. Vamos construir um formul\u00e1rio de contato simples em cima do Bootstrap. Crie um arquivo index.html e adicione o c\u00f3digo abaixo nele.<\/p>\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Firebase<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.0\/css\/bootstrap.min.css\" integrity=\"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk\" crossorigin=\"anonymous\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2>Contact Form<\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"alert alert-success success-message\" style=\"display:none;\">Form submitted successfully.<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<form id=\"contactForm\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleFullName\">Full Name<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" class=\"form-control fullname\" id=\"exampleFullName\" placeholder=\"Enter Full Name\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleEmail\">Email<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"email\" class=\"form-control email\" id=\"exampleEmail\" placeholder=\"Enter Email\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleSubject\">Subject<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" class=\"form-control subject\" id=\"exampleSubject\" placeholder=\"Enter Subject\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleMessage\">Message<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<textarea class=\"form-control message\" id=\"exampleMessage\" placeholder=\"Enter Message\" cols=\"30\" rows=\"10\" required><\/textarea>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button type=\"submit\" class=\"btn btn-primary\">Submit<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/form>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/www.gstatic.com\/firebasejs\/7.15.5\/firebase-app.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/www.gstatic.com\/firebasejs\/7.15.5\/firebase-database.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"js\/main.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
No c\u00f3digo acima, inclu\u00ed um arquivo Firebase JS, antes do main.js<\/code>qual copiei, mais o JS do Realtime Database. Crie um main.js<\/code>arquivo na pasta ‘js’. Este arquivo JS ter\u00e1 l\u00f3gica real para interagir com o Firebase. Adicione o c\u00f3digo copiado do Firebase na parte superior do main.js<\/code>arquivo.<\/p>\n
\/\/ Paste the code from Firebase\nvar config = {\n\u00a0\u00a0\u00a0\u00a0apiKey: \"YOUR_API_KEY\",\n\u00a0\u00a0\u00a0\u00a0authDomain: \"Your_AuthDomain\",\n\u00a0\u00a0\u00a0\u00a0databaseURL: \"YOUR_DATABAE_URL\",\n\u00a0\u00a0\u00a0\u00a0projectId: \"YOUR_PROJECT_ID\",\n\u00a0\u00a0\u00a0\u00a0storageBucket: \"YOUR_STORAGE_BUCKET\",\n\u00a0\u00a0\u00a0\u00a0messagingSenderId: \"YOUR_SENDER_ID\",\n\u00a0\u00a0\u00a0\u00a0appId: \"YOUR_APP_ID\"\n};\nfirebase.initializeApp(config);<\/code><\/pre>\n
Depois disso, crie uma cole\u00e7\u00e3o sob a qual os dados do formul\u00e1rio seriam armazenados. Voc\u00ea pode dar qualquer nome \u00e0 cole\u00e7\u00e3o. No meu caso, crio uma cole\u00e7\u00e3o chamada ‘contactformmessages’.<\/p>\n
\/\/ Reference messages collection\nvar messagesRef = firebase.database().ref('contactformmessages');<\/code><\/pre>\n
Por fim, pegaremos todos os valores do formul\u00e1rio e os passaremos ao Firebase no envio do formul\u00e1rio da seguinte maneira.<\/p>\n
$('#contactForm').submit(function(e) {\n\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0var newMessageRef = messagesRef.push();\n\u00a0\u00a0\u00a0\u00a0newMessageRef.set({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name: $('.fullname').val(),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0email: $('.email').val(),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0subject: $('.subject').val(),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0message: $('.message').val()\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$('.success-message').show();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$('#contactForm')[0].reset();\n});<\/code><\/pre>\n
Agora, tente enviar um formul\u00e1rio com valores fict\u00edcios e v\u00e1 para o banco de dados em tempo real do Firebase, voc\u00ea ver\u00e1 seus dados armazenados no banco de dados. Ser\u00e1 semelhante a abaixo.<\/p>\n
\"Como<\/a><\/p>\n
Ler dados do Firebase Realtime Database<\/h3>\n
Voc\u00ea aprendeu a gravar dados no Realtime Database do Firebase. Voc\u00ea tamb\u00e9m pode ler no Firebase. Ler dados do Firebase \u00e9 f\u00e1cil e requer apenas algumas linhas de c\u00f3digo JavaScript. Criamos uma cole\u00e7\u00e3o de mensagens como messagesRef<\/code>. Usando esta vari\u00e1vel, voc\u00ea pode ler os dados da seguinte maneira.<\/p>\n
messagesRef.once('value').then((snapshot) => {\n\u00a0\u00a0\u00a0\u00a0Object.keys(snapshot.val()).forEach((key) => {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(`Name: ${snapshot.val()[key].name}`);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(`Email: ${snapshot.val()[key].email}`);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(`Subject: ${snapshot.val()[key].subject}`);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(`Message: ${snapshot.val()[key].message}`);\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
Espero que voc\u00ea tenha aprendido como conectar o Firebase ao formul\u00e1rio do site. Por favor, compartilhe seus pensamentos e sugest\u00f5es na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n