iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 26
0
Mobile Development

30天用React native製作app!!系列 第 26

[蚊子的Day26]排行榜的製作-Firebase的使用~React Native

  • 分享至 

  • xImage
  •  

我因為要製作使用者們完成任務速度的排行榜,所以需要使用到Firebase。

Firebase簡介

Firebase是一個提供後台雲端服務的公司,在2014年被Google收購,所以只要有Google帳戶就可使用。Firebase提供了多種服務,包含Database(資料儲存)、File Systems(檔案儲存)、Authentication(帳戶認證)、Cloud Functions(雲端程式)等常用服務。

開始使用Firebase

1.開啟Firebase網頁(https://firebase.google.com/),點選主控台(記得要先登入Google帳戶喔)
https://ithelp.ithome.com.tw/upload/images/20200926/20129575vXyH5RXfYe.png

2.新增一個專案,跟著步驟走即可建立好
https://ithelp.ithome.com.tw/upload/images/20200926/20129575BHxWfNFcPf.png
https://ithelp.ithome.com.tw/upload/images/20200926/20129575gsIHOhmmBe.png

3.接下來註冊一個網頁的應用程式(因為React Native使用的是javascript語言,所以用網頁應用程式即可)
https://ithelp.ithome.com.tw/upload/images/20200926/20129575LTExRh2oPq.png
https://ithelp.ithome.com.tw/upload/images/20200926/20129575yxgQwByFFb.png

4.應用程式註冊完後會產生一組代碼,這組代碼之後程式會需要用到(基於資安問題我先把代碼都抹掉了)
https://ithelp.ithome.com.tw/upload/images/20200926/20129575pU6bAxH575.png

5.啟用即時資料庫(Realtime Database)功能
https://ithelp.ithome.com.tw/upload/images/20200926/20129575BwFnS78VZ2.png

6.即時資料庫啟用後會跳出個視窗,點選以測試模式啟動
https://ithelp.ithome.com.tw/upload/images/20200926/20129575okn3W5dg3y.png

7.之後就會進入到資料庫的頁面
https://ithelp.ithome.com.tw/upload/images/20200926/20129575K0qsPLbOZ8.png

8.點選規則去修改存取權限,不修改的話App資料會無法上傳的
原始是長這樣:
https://ithelp.ithome.com.tw/upload/images/20200926/20129575NFF3REz3R9.png
要將read和write都修改成true才行:
https://ithelp.ithome.com.tw/upload/images/20200926/201295759b8xqe6FPY.png
*小提示:
"ccimfreshmengo": { ".indexOn": "timeStamp" }這裡的意思是將ccimfreshmengo這個專案裡的Database按照timeStamp的順序排列(ccimfreshmengo是我專案的名字)。

Firebase網頁方面的設定大概就到這邊,下篇開始講React Native內要如何設定~


上一篇
[蚊子的Day25]淡入動畫~React Native
下一篇
[蚊子的Day27]Firebase使用-App端的設定~React Native
系列文
30天用React native製作app!!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言