{"id":26193,"date":"2021-06-11T16:32:00","date_gmt":"2021-06-11T13:32:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=26193"},"modified":"2021-10-17T18:20:29","modified_gmt":"2021-10-17T15:20:29","slug":"kuidas-uhendada-firebase-i-reaalajas-andmebaas-oma-veebisaidi-vormiga","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/kuidas-uhendada-firebase-i-reaalajas-andmebaas-oma-veebisaidi-vormiga\/","title":{"rendered":"Kuidas \u00fchendada Firebase&#8217;i reaalajas andmebaas oma veebisaidi vormiga"},"content":{"rendered":"<p>Kas soovite oma veebisaidi vormide andmeid Firebase&#8217;i salvestada? Kui jah, siis olete \u00f5iges kohas. Selles artiklis n\u00e4itan teile, kuidas \u00fchendada Firebase&#8217;i reaalajas andmebaas vormiga ja salvestada selle andmed Firebase&#8217;i.<\/p>\n<p>Firebase&#8217;i reaalajas andmebaas on pilves hostitud NoSQL-i andmebaas. Firebase&#8217;is salvestatakse andmed JSON-vormingus ja s\u00fcnkroonitakse reaalajas k\u00f5igi \u00fchendatud klientidega, mis on loodud iOS-i, Androidi ja JavaScripti SDK-de abil. Kui me \u00fctleme reaalajas, t\u00e4hendab see andmete vahetamist rakenduste ja andmebaasi vahel reaalajas (viivitusi pole). Firebase&#8217;i funktsioonide kohta leiate lisateavet nende <a href=\"https:\/\/firebase.google.com\/docs\/database\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dokumentatsioonist<\/a>.<\/p>\n<p>Selle \u00f5petuse jaoks koostan lihtsa kontaktivormi ja salvestan vormiandmed Firebase&#8217;i reaalajas andmebaasi. Vormilt andmete saatmiseks Firebase&#8217;i kasutan JavaScripti SDK-d.<\/p>\n<h3>Firebase&#8217;i seadistamine<\/h3>\n<p>Alustamiseks <a href=\"https:\/\/console.firebase.google.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">minge Firebase&#8217;i konsooli<\/a> ja looge uus projekt. Kasutaja saab valida ka olemasoleva projekti. Kui olete uue projekti loonud, suunate teid lehele, kust saate Firebase&#8217;i JavaScripti koodi. Kl\u00f5psake koodiikoonil, mis avab h\u00fcpikakna.<\/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=\"Kuidas \u00fchendada Firebase&#039;i reaalajas andmebaas oma veebisaidi vormiga\" ><\/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=\"Kuidas \u00fchendada Firebase&#039;i reaalajas andmebaas oma veebisaidi vormiga\" ><\/a><\/p>\n<p>Kopeerige h\u00fcpikaknas n\u00e4idatud kood, mida on vaja j\u00e4rgmistes toimingutes. Kl\u00f5psake vasakpoolses men\u00fc\u00fcs valikul Andmebaas ja seej\u00e4rel jaotises Reaalajas andmebaas k\u00e4sul Loo andmebaas.<\/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=\"Kuidas \u00fchendada Firebase&#039;i reaalajas andmebaas oma veebisaidi vormiga\" ><\/a><\/p>\n<p>See avab h\u00fcpikakna, valib testimisre\u017eiimi ja l\u00f5puks kl\u00f5psake nuppu &#8216;Luba&#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=\"Kuidas \u00fchendada Firebase&#039;i reaalajas andmebaas oma veebisaidi vormiga\" ><\/a><\/p>\n<p>Suunate j\u00e4rgmisele ekraanile, kus n\u00e4ete oma reaalajas andmebaasi. Praegu pole andmeid, nii et teie andmebaas on t\u00fchi.<\/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=\"Kuidas \u00fchendada Firebase&#039;i reaalajas andmebaas oma veebisaidi vormiga\" ><\/a><\/p>\n<h3>\u00dchendage Firebase&#8217;i reaalajas andmebaas oma veebisaidi vormiga<\/h3>\n<p>Firebase&#8217;i seadistamine on meil valmis. J\u00e4rgmine asi, mida tuleb teha, on vormi loomine ja vormiandmete salvestamine Firebase&#8217;i. Ehitame Bootstrapi peale lihtsa kontaktivormi. Looge fail index.html ja lisage sellesse allolev kood.<\/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>\u00dclaltoodud koodi lisasin Firebase JS-faili, enne <code>main.js<\/code>mida kopeerisin enne, pluss JS of Realtime Database. Looge <code>main.js<\/code>kausta &#8216;js&#8217; fail. Sellel JS-failil on Firebase&#8217;iga suhtlemiseks tegelik loogika. Lisage Firebase&#8217;ist kopeeritud kood <code>main.js<\/code>faili \u00fclaosas .<\/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>P\u00e4rast seda looge kogu, kuhu teie vormiandmed salvestatakse. Kogule v\u00f5ite anda mis tahes nime. Minu puhul loon kollektsiooni nimega &#8216;contactformmessages&#8217;.<\/p>\n<pre><code>\/\/ Reference messages collection\nvar messagesRef = firebase.database().ref('contactformmessages');<\/code><\/pre>\n<p>L\u00f5puks v\u00f5tame k\u00f5ik vormiv\u00e4\u00e4rtused ja edastame need vormi esitamisel Firebase&#8217;ile j\u00e4rgmisel viisil.<\/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>Proovige n\u00fc\u00fcd esitada n\u00e4ivv\u00e4\u00e4rtustega vorm ja minge oma Firebase&#8217;i reaalajas andmebaasi, peaksite n\u00e4gema oma andmeid andmebaasi salvestatud. See n\u00e4eb v\u00e4lja nagu allpool.<\/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=\"Kuidas \u00fchendada Firebase&#039;i reaalajas andmebaas oma veebisaidi vormiga\" ><\/a><\/p>\n<h3>Andmete lugemine Firebase&#8217;i reaalajas andmebaasist<\/h3>\n<p>Te peate \u00f5ppima andmete kirjutamise kohta Firebase&#8217;i reaalajas andmebaasi. V\u00f5ite ka seda Firebase&#8217;ist lugeda. Firebase&#8217;ist andmete lugemine on lihtne ja n\u00f5uab vaid m\u00f5nda JavaScripti koodi rida. Oleme loonud s\u00f5numite kogu as <code>messagesRef<\/code>. Selle muutuja abil saate andmeid lugeda j\u00e4rgmiselt.<\/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>Loodetavasti \u00f5ppisite Firebase&#8217;i \u00fchendamise kohta veebisaidi vormiga. Palun jagage oma m\u00f5tteid ja ettepanekuid allpool olevas kommentaaride jaotises.<\/p>\n<h4>seotud artiklid<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/laraveli-rakenduse-varundamine\/\" title=\"Laraveli rakenduse varundamine\">Laraveli rakenduse varundamine<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/?p=24040\" title=\"Kuidas WordPressi varukoopia Dropboxi automaatselt salvestada\">Kuidas WordPressi varukoopia Dropboxi automaatselt salvestada<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/staatilise-veebisaidi-juurutamine-firebase-i-hostimisse-tasuta\/\" title=\"Staatilise veebisaidi juurutamine Firebase&#039;i hostimisse tasuta\">Staatilise veebisaidi juurutamine Firebase&#8217;i hostimisse tasuta<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Selles artiklis uurime, kuidas \u00fchendada veebisaidi vorm Firebase&#8217;i reaalajas andmebaasiga. Seda tehes salvestatakse meie vormiandmed Firebase&#8217;i<\/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":[246],"tags":[842],"class_list":["post-26193","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-5","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/26193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/comments?post=26193"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/26193\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media\/20261"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media?parent=26193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/categories?post=26193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/tags?post=26193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}