{"id":29259,"date":"2021-06-11T16:39:00","date_gmt":"2021-06-11T13:39:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29259"},"modified":"2021-10-17T16:20:14","modified_gmt":"2021-10-17T13:20:14","slug":"como-conectar-firebase-realtime-database-al-formulario-de-su-sitio-web","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-conectar-firebase-realtime-database-al-formulario-de-su-sitio-web\/","title":{"rendered":"C\u00f3mo conectar Firebase Realtime Database al formulario de su sitio web"},"content":{"rendered":"<p>\u00bfEst\u00e1 buscando almacenar los datos de los formularios de su sitio web en Firebase? Si es as\u00ed, entonces est\u00e1s en el lugar correcto. En este art\u00edculo, le muestro c\u00f3mo conectar la base de datos en tiempo real de Firebase con el formulario y almacenar sus datos en Firebase.<\/p>\n<p>La base de datos en tiempo real de Firebase es una base de datos NoSQL alojada en la nube. En Firebase, los datos se almacenan como JSON y se sincronizan en tiempo real con todos los clientes conectados creados con SDK de iOS, Android y JavaScript. Cuando decimos en tiempo real, significa que los datos se intercambian entre las aplicaciones y la base de datos en tiempo real (sin retrasos). Puedes leer m\u00e1s sobre las funciones de Firebase en su <a href=\"https:\/\/firebase.google.com\/docs\/database\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">documentaci\u00f3n<\/a>.<\/p>\n<p>Para este tutorial, crear\u00e9 un formulario de contacto simple y almacenar\u00e9 los datos del formulario en la base de datos en tiempo real de Firebase. Para enviar datos desde el formulario a Firebase, usar\u00e9 el SDK de JavaScript.<\/p>\n<h3>Configuraci\u00f3n de Firebase<\/h3>\n<p>Para comenzar, dir\u00edjase a <a href=\"https:\/\/console.firebase.google.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Firebase Console<\/a> y cree un nuevo proyecto. El usuario tambi\u00e9n puede elegir un proyecto existente. Una vez que cree un nuevo proyecto, lo redireccionar\u00e1 a una p\u00e1gina donde obtendr\u00e1 el c\u00f3digo JavaScript de Firebase. Haga clic en un icono de c\u00f3digo que abrir\u00e1 una ventana emergente.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d4836b9a0.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d4836b9a0.png\" alt=\"C\u00f3mo conectar Firebase Realtime Database al formulario de su sitio web\" ><\/a><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d484e50de.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d484e50de.png\" alt=\"C\u00f3mo conectar Firebase Realtime Database al formulario de su sitio web\" ><\/a><\/p>\n<p>Copie el c\u00f3digo que se muestra en la ventana emergente que requiere en los siguientes pasos. En el men\u00fa del lado izquierdo, haga clic en &#8216;Base de datos&#8217; y luego en &#8216;Crear base de datos&#8217; en la secci\u00f3n Base de datos en tiempo real.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d485e1c3f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d485e1c3f.png\" alt=\"C\u00f3mo conectar Firebase Realtime Database al formulario de su sitio web\" ><\/a><\/p>\n<p>Se abrir\u00e1 una ventana emergente, elegir\u00e1 el modo de prueba y, finalmente, haga clic en el bot\u00f3n &#8216;Habilitar&#8217;.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d485e1c3f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d485e1c3f.png\" alt=\"C\u00f3mo conectar Firebase Realtime Database al formulario de su sitio web\" ><\/a><\/p>\n<p>Lo redireccionar\u00e1 a la siguiente pantalla donde ver\u00e1 su base de datos en tiempo real. En este momento no hay datos, por lo que su base de datos est\u00e1 vac\u00eda.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d485e1c3f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d485e1c3f.png\" alt=\"C\u00f3mo conectar Firebase Realtime Database al formulario de su sitio web\" ><\/a><\/p>\n<h3>Conecte Firebase Realtime Database al formulario de su sitio web<\/h3>\n<p>Hemos terminado con la configuraci\u00f3n de Firebase. Lo siguiente que debe hacer es crear un formulario y almacenar los datos del formulario en Firebase. Construyamos un formulario de contacto simple sobre Bootstrap. Cree un archivo index.html y agregue el siguiente c\u00f3digo en \u00e9l.<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;meta charset=\"UTF-8\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;title&gt;Firebase&lt;\/title&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.0\/css\/bootstrap.min.css\" integrity=\"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk\" crossorigin=\"anonymous\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"container\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h2&gt;Contact Form&lt;\/h2&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"alert alert-success success-message\" style=\"display:none;\"&gt;Form submitted successfully.&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;form id=\"contactForm\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label for=\"exampleFullName\"&gt;Full Name&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"text\" class=\"form-control fullname\" id=\"exampleFullName\" placeholder=\"Enter Full Name\" required&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label for=\"exampleEmail\"&gt;Email&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"email\" class=\"form-control email\" id=\"exampleEmail\" placeholder=\"Enter Email\" required&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label for=\"exampleSubject\"&gt;Subject&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"text\" class=\"form-control subject\" id=\"exampleSubject\" placeholder=\"Enter Subject\" required&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label for=\"exampleMessage\"&gt;Message&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;textarea class=\"form-control message\" id=\"exampleMessage\" placeholder=\"Enter Message\" cols=\"30\" rows=\"10\" required&gt;&lt;\/textarea&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button type=\"submit\" class=\"btn btn-primary\"&gt;Submit&lt;\/button&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/form&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"&gt;&lt;\/script&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/www.gstatic.com\/firebasejs\/7.15.5\/firebase-app.js\"&gt;&lt;\/script&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/www.gstatic.com\/firebasejs\/7.15.5\/firebase-database.js\"&gt;&lt;\/script&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"js\/main.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>En el c\u00f3digo anterior, inclu\u00ed un archivo Firebase JS antes del <code>main.js<\/code>cual copi\u00e9 antes m\u00e1s el JS de Realtime Database. Cree un <code>main.js<\/code>archivo en la carpeta &#8216;js&#8217;. Este archivo JS tendr\u00e1 l\u00f3gica real para interactuar con Firebase. Agrega el c\u00f3digo copiado de Firebase en la parte superior del <code>main.js<\/code>archivo.<\/p>\n<pre><code>\/\/ 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<p>Despu\u00e9s de esto, cree una colecci\u00f3n en la que se almacenar\u00edan los datos de su formulario. Puedes darle cualquier nombre a la colecci\u00f3n. En mi caso, creo una colecci\u00f3n llamada &#8216;contactformmessages&#8217;.<\/p>\n<pre><code>\/\/ Reference messages collection\nvar messagesRef = firebase.database().ref('contactformmessages');<\/code><\/pre>\n<p>Finalmente, tomaremos todos los valores del formulario y los pasaremos a Firebase en el env\u00edo del formulario de la siguiente manera.<\/p>\n<pre><code>$('#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<p>Ahora, intente enviar un formulario con valores ficticios y dir\u00edjase a su base de datos en tiempo real de Firebase, deber\u00eda ver sus datos almacenados en la base de datos. Se ver\u00e1 a continuaci\u00f3n.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d485e1c3f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d485e1c3f.png\" alt=\"C\u00f3mo conectar Firebase Realtime Database al formulario de su sitio web\" ><\/a><\/p>\n<h3>Leer datos de Firebase Realtime Database<\/h3>\n<p>Debes aprender a escribir datos en Realtime Database de Firebase. Tambi\u00e9n puede querer leerlo desde Firebase. Leer datos de Firebase es f\u00e1cil y solo requiere unas pocas l\u00edneas de c\u00f3digo JavaScript. Hemos creado una colecci\u00f3n de mensajes como <code>messagesRef<\/code>. Con esta variable, puede leer los datos de la siguiente manera.<\/p>\n<pre><code>messagesRef.once('value').then((snapshot) =&gt; {\n\u00a0\u00a0\u00a0\u00a0Object.keys(snapshot.val()).forEach((key) =&gt; {\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<p>Espero que hayas aprendido a conectar Firebase al formulario del sitio web. Comparta sus pensamientos y sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n<h4>Art\u00edculos relacionados<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/como-realizar-una-copia-de-seguridad-de-la-aplicacion-laravel\/\" title=\"C\u00f3mo realizar una copia de seguridad de la aplicaci\u00f3n Laravel\">C\u00f3mo realizar una copia de seguridad de la aplicaci\u00f3n Laravel<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/como-almacenar-la-copia-de-seguridad-de-wordpress-en-dropbox-automaticamente\/\" title=\"C\u00f3mo almacenar la copia de seguridad de WordPress en Dropbox autom\u00e1ticamente\">C\u00f3mo almacenar la copia de seguridad de WordPress en Dropbox autom\u00e1ticamente<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/implemente-un-sitio-web-estatico-en-firebase-hosting-de-forma-gratuita\/\" title=\"Implemente un sitio web est\u00e1tico en Firebase Hosting de forma gratuita\">Implemente un sitio web est\u00e1tico en Firebase Hosting de forma gratuita<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo, estudiamos c\u00f3mo conectar el formulario del sitio web con Firebase Realtime Database. Al hacerlo, los datos de nuestro formulario se almacenar\u00e1n en Firebase<\/p>\n","protected":false},"author":1,"featured_media":20261,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[243],"tags":[849],"class_list":["post-29259","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/29259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=29259"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/29259\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/20261"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=29259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=29259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=29259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}