{"id":327,"date":"2019-11-20T03:24:16","date_gmt":"2019-11-20T03:24:16","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/embryo\/?page_id=327"},"modified":"2019-11-20T03:55:10","modified_gmt":"2019-11-20T03:55:10","slug":"firebase-connectivity","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/embryo\/firebase-connectivity\/","title":{"rendered":"Firebase Connectivity"},"content":{"rendered":"\n<p>To add the built-in database features to the firebase database, or to connect the project\u2019s custom database then follow the below steps to fulfill your requirements.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>You can see the firebase data format in  <code>src > assets > data > product.json<\/code>\u00a0the file. <\/p><\/blockquote>\n\n\n\n<p><strong>Step1.<\/strong> To add Firebase to your app, you\u2019ll need a Firebase project, Firebase SDK and a short snippet of initialization code that has a few details about your project.<\/p>\n\n\n\n<p><strong>Step2.<\/strong> Firebase uses Json Format data and you have to add\/ create your database which you can access under\u00a0<code>Develop > Database<\/code>\u00a0. Also, you can do changes in   <code>src > assets > data > product.json<\/code>\u00a0file according to your products and import this file from firebase > develop > database > Realtime database dropdown > Import JSON under more icon.<\/p>\n\n\n\n<p><strong>Step3.<\/strong> After you are done copy the initialization code snippet, we will use this code in the next step. \u2013 To get the initialization code go to Project Overview > Project Settings and click on the &lt;\/> icon to access your code.<\/p>\n\n\n\n<p><strong>Step4.<\/strong> Open the file in  <code>src > firebase > index.js<\/code>\u00a0 and search for the var config &amp; paste the code inside it.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Initialize Firebase \nvar config = { \n   apiKey: \u2019&lt;your-key>\u2019, \n   authDomain: \u2019&lt;your-project-authdomain>\u2019, \n   databaseURL: \u2019&lt;your-database-URL>\u2019, \n   projectId: \u2019&lt;your-project-id>\u2019, \n   storageBucket: \u2019&lt;your-storage-bucket>\u2019, \n   messagingSenderId: \u2019&lt;your-messaging-sender-id>\u2019 \n};<\/pre>\n\n\n\n<p><strong>Step5.<\/strong> And Import firebase in the file where you can get data. <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ firebase \nimport firebase from \u2019..\/..\/firebase\u2019; \nimport \u2019firebase\/database\u2019;\n\n...\n\ngetBannerData() { \n   const bannerRef = firebase.database().ref(\u2018banner_two\u2019); \n   bannerRef.on(\u2018value\u2019, (snapshot) => { \n     let banner = snapshot.val(); \n     this.setState({ banner: banner }); \n   }); \n}<\/pre>\n\n\n\n<p><\/p>\n<div class=\"pld-like-dislike-wrap pld-template-1\">\n    <div class=\"pld-like-wrap  pld-common-wrap\">\n    <a href=\"javascript:void(0);\" class=\"pld-like-trigger pld-like-dislike-trigger \" title=\"\" data-post-id=\"327\" data-trigger-type=\"like\" data-restriction=\"cookie\" data-ip-check=\"0\" data-user-check=\"1\">\n                        <i class=\"fas fa-thumbs-up\"><\/i>\n                    <\/a>\n    <span class=\"pld-like-count-wrap pld-count-wrap\">    <\/span>\n<\/div><div class=\"pld-dislike-wrap  pld-common-wrap\">\n    <a href=\"javascript:void(0);\" class=\"pld-dislike-trigger pld-like-dislike-trigger \" title=\"\" data-post-id=\"327\" data-trigger-type=\"dislike\" data-ip-check=\"0\" data-restriction=\"cookie\" data-user-check=\"1\">\n                        <i class=\"fas fa-thumbs-down\"><\/i>\n                    <\/a>\n    <span class=\"pld-dislike-count-wrap pld-count-wrap\"><\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>To add the built-in database features to the firebase database, or to connect the project\u2019s custom database then follow the below steps to fulfill your requirements. You can see the firebase data format in src > assets > data > product.json\u00a0the file. Step1. To add Firebase to your app, you\u2019ll need a Firebase project, Firebase [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":18,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/327"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/comments?post=327"}],"version-history":[{"count":11,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/327\/revisions"}],"predecessor-version":[{"id":340,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/327\/revisions\/340"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/media?parent=327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}