最近才知道Google 很佛心的提供了免費的資料庫Firebase 供大眾使用。

它是JSON 格式的資料庫，不是傳統的關聯式表格，很容易提供網頁或APP 儲存資料， ... SkiptoContent 登入|Register 人生海海 Heaven的足跡首頁»Firebase設定與測試 Firebase設定與測試週一,2017/06/26-03:30heavenchou 重要度:★★文章分類:電腦電腦標籤:React|JavaScript|Firebase 最近才知道Google很佛心的提供了免費的資料庫Firebase供大眾使用。

它是JSON格式的資料庫，不是傳統的關聯式表格，很容易提供網頁或APP儲存資料，有些程式需要把資料或設定放上雲端的，這也是不錯的選擇。

今天做了一些研究，把心得記錄下來。

首先可以到這裡建立專案https://console.firebase.google.com/ 可以看到新增專案的地方，也可以看到舊專案。

按下新增專案，會問你專案名稱及國家。

建立專案後，接著問你應用的類型，我今天是測試在Web使用，所以選了最右邊那一個。

然後就出現一段設定檔，自行貼在html網頁的底端。

先來看資料庫，點選左邊的Database，就可以看到系統設定的空白資料庫。

我們可以直接在網頁上操作資料，如下，我已經加入一些資料了。

以那筆電話為例，在名稱要輸入user/heaven/tel，在值輸入07-1234567，就可以看到如下的結果了。

在實際測試時，要改一下權限，讓大家都可以寫入，方便測試，日後需要嚴格權限時，再來研究如何設定。

按下規則，可以看到權限設定。

先改成如下，再按下發佈即可。

如此一來，大家都可以寫入這個資料庫了，要小心使用。

以上是資料庫的設定，底下利用React寫一個小界面，測試一些操作資料庫的功能。

render(){ return(

FirebaseTest

          key:
          val:
          set           update           push           delete           get

key:{this.state.key}

val:{this.state.val}

      );   } 1.設定資料 set是直接在指定的位置設定資料，如果不小心，可能整個節點都被取代了，要小心。

程式碼： seter_fb=()=>{     firebase.database().ref(this.state.key).set(this.state.val);   } this.state.key就是網頁第一個輸入欄的內容，也就是key的位置。

this.state.val就是網頁第二個輸入欄的內容，也就是val的位置。

測試一下，key輸入data/type，val輸入XML，結果如下：剛執行之後，立刻切到資料庫網頁，不用重整，就可以看到資料變更，而且一開始還有顏色變化，做的很不錯。

其實也可以一次設定一個JSON資料，官方文件有這樣的例子。

functionwriteUserData(userId,name,email,imageUrl){ firebase.database().ref('users/'+userId).set({    username:name,    email:email,    profile_picture:imageUrl }); } 2.更新資料和設定資料set類似，update是更新資料。

如果只是更新部份的JSON，就用update。

若不小心用set，就會把全部節點取代成原本只想更新的部份資料而已。

update_fb=()=>{     firebase.database().ref(this.state.key).update(this.state.vala);   } 3.推送資料 push是推送資料，它會先產生一個唯一的key，然後把資料推出去。

如果要取得唯一的key，可以用push().key取得，如程式示範。

  push_fb=()=>{     varkey=this.state.key;     varData={       "key":key,       "value":this.state.val     }     varindexkey=firebase.database().ref("push").push(Data).key;     this.setState({key:indexkey})   } 按下push，紅色那串就是取回來的key。

綠色就是被push進去的資料。

(節點不一定要用"push"，這是隨意取的) 4.刪除資料在指定節點用.remove()就可以刪除了，懶得試了。

delete_fb=()=>{   firebase.database().ref(this.state.key).remove(); } 5.讀取資料讀取資料有二種，一直是持續監督資料，一種是只讀取一次，這裡只測試讀取一次。

程式如下： geter_fb=()=>{     varself=this;          firebase.database().ref(this.state.key).once('value').then(function(snapshot){       self.setState({val:snapshot.val()});     });   } 看起來有一點麻煩，就是呼叫.once(‘value’).then後面就是callback函數。

傳回是snapshot，利用snapshot.val()就可以取得資料了。

如果這是個JSON資料，可以使用snapshot.val().tel取得內層tel的資料。

知道了這些，基本的使用應該就沒問題了。

網路分享： TweetWidget ShareonFacebook FacebookLike 瀏覽次數：9847 回應發表新回應您的名字：電子郵件：這個欄位的內容會保密，不會公開顯示。

首頁：標題：回應：* Switchtoplaintexteditor自動將網址與電子郵件地址轉變為連結。

自動斷行和分段。

可使用的HTML標籤：

AllowedStyleproperties:background,background-attachment,background-color,background-image,background-position,background-repeat,border,border-bottom,border-bottom-color,border-bottom-style,border-bottom-width,border-collapse,border-color,border-left,border-left-color,border-left-style,border-left-width,border-right,border-right-color,border-right-style,border-right-width,border-spacing,border-style,border-top,border-top-color,border-top-style,border-top-width,border-width,bottom,caption-side,clip,color,direction,empty-cells,font,font-family,font-size,font-size-adjust,font-stretch,font-style,font-variant,font-weight,height,left,letter-spacing,line-height,list-style,list-style-image,list-style-position,list-style-type,margin,margin-bottom,margin-left,margin-right,margin-top,max-height,max-width,min-height,min-width,overflow,padding,padding-bottom,padding-left,padding-right,padding-top,right,table-layout,text-align,text-decoration,text-indent,text-transform,top,unicode-bidi,vertical-align,white-space,width,word-spacing,z-index更多關於格式選項的資訊 CAPTCHA驗證碼只有阿拉伯數字,這是躲廣告用的,麻煩你輸入了. Whatcodeisintheimage?：* Enterthecharactersshownintheimage. Leavethisfieldblank：導覽最新文章 C#使用Skin套件讓程式更美觀(下) C#使用Skin套件讓程式更美觀(中) C#使用Skin套件讓程式更美觀(上) Google雲端硬碟更改檔名變成上傳的陷阱 C#WinForm取得傳入的參數 C#單元測試在VisualStudio上使用GitHub進行版本控制論「慾境的當下即是涅槃」？ HTML標記li底下span指定文字格式的奇怪問題第三世多杰羌佛義雲高背離佛法之處 1of30 ›› more 最新回應此說法有何根據：「不可將古佛降世與賢劫千佛按次第成佛混為一談」？11週2天前學佛行人不可將古佛降世與賢劫千佛按次第成佛混為一談19週2天前謠言止於智者19週2天前有人回應真感動27週5天前有道理，算是一個大bug，除非酒保也被FBI收買了，鬼膽神27週5天前苦諦的苦是一種概念，不是苦受。說世間或五蘊是苦，不是指苦受28週2天前在Win1020H2版本成功安裝新倉頡輸入法32週3天前 RE:請問iOSAPP能用嗎34週5天前大家都見解正確✅真正的修心修行者都清楚明白「第三世多杰羌34週5天前請問iOSAPP能用嗎35週13小時前廣告一下熱門內容今日：BCB5專業版使用內嵌資料庫(二) C#使用Skin套件讓程式更美觀(中) C#使用Skin套件讓程式更美觀(下) C#使用Skin套件讓程式更美觀(上) 在Win10用VMwareWorkstationPlayer12安裝MacOSX10.12Sierra和開發c++程式總體：漢文佛典電子化--CBETA2001年採用的技術、標準暨解決方案解決Win10無法安裝舊字型的問題在Win10中安裝新倉頡輸入法 BCB處理7z壓縮格式 Win10畫面模糊的解決方法耗損CPU資源的SearchIndexer.exe 我對清海法師的看法 DOS命令大全第十四世達賴喇嘛尊者關於轉世的公開聲明揭穿莊圓再度恐嚇騙人的真相最近瀏覽：BCB5專業版使用內嵌資料庫(二) Win10畫面模糊的解決方法 Drupal7-logo.png Drupal7-install-7.png 小心690~692的大陸貨佛法電腦一般 WIKI 佛法標籤雲三法印中道僧團五取蘊五蘊佛教消息佛法幼幼班佛法次第印度佛教思想史四聖諦大小乘彌勒心路歷程意根戒定慧涅槃清淨道論無我神通禪定素食緣起蕭平實藏經目錄輪迴辨正達賴喇嘛阿含阿毗達摩阿羅漢隨佛法師 moretags 電腦標籤雲 .NET Android Apache BCB Binding c# c++ Cocoa DarkUI Drupal Embarcadero Git Mac Perl PHP Storyboard Swift Ubuntu Unicode VMwarePlayer Windows Windows10 Xcode 備份元件單元測試漢字程式網路電子佛典 moretags 一般標籤雲 Heaven TOYOTA 七夕九二共識九龍寺乾女兒二二八人物佛法傾聽兩岸一家親公告公益動動腦工作幻想心情憶當年政治漢字生活故事笑話總統大選自傳蔡英文賽德克巴萊轉貼好文選舉電影音樂 moretags 每月足跡三月2006 (11) 四月2006 (3) 五月2006 (8) 六月2006 (4) 七月2006 (5) 八月2006 (2) 九月2006 (3) 十二月2006 (3) 二月2007 (2) 四月2007 (2) 1 2 3 4 5 6 7 8 9 … 下一頁› 最後一頁» CBETA經錄查詢貼紙收藏區統計資料網站人氣：9,129,978拜訪人數：12,734註冊人數：20發表文章：208統計時間：訪客人數：本日：552本週：44478本月：64911 誰在線上目前共有1個使用者和23位訪客在線上。部落格觀察訪客足跡廣告二下訂閱 Copyright©2021人生海海.本網站由HeavenChou製作，以創用CC姓名與網站標示-非商業性-禁止改作-小改無妨2.5台灣授權條款釋出。 story|aboutseo