2. 進入 Firebase Console 註冊開啟新專案: https://console.firebase.google.com/
3. 每個專案可以新增多個應用程式, 在專案裏面新增一個程式名稱(每個應用程式將會對應一個 google-services.json 檔案), 程式名稱之前要冠上 domain name, 像是:
com.examle.appName
4. 至 Firebase console 的應用程式專頁, 下載檔案 google-services.json, 把他放到 flutter 專案目錄 /android/app 下面
5. 修改 android 專案底下檔案: /android/build.gradle, 加入 classpath
buildscript {
dependencies {
//...
classpath 'com.google.gms:google-services:4.3.0'
}
}
6. 修改 android/app 應用程式底下檔案: /android/app/build.gradle 設定應用程式名稱, 允許 multiDexEnable, 啟用 com.google.gms.google-service 的 plugin:
android {
defaultConfig {
applicationId "com.example.appName"
multiDexEnabled true
/...
}
//...
}
apply plugin: 'com.google.gms.google-services'
7. 至 Firebase console 的 Database 專頁啟用 Cloud FireStore 資料庫. 專有名詞 Collection 與 Document, 應用起來比較像是在使用檔案(/collection0/document0/collection1/document1/...), 用路徑 collection 與 document 穿插的方式取得所要的文件(Document), 我們不能用傳統資料庫的 Table (資料表)與 Row (紀錄)的概念去理解它, 若用資料夾與檔案的觀點來看, Collection 比較類似目錄裡面的特殊檔案夾 ./ (目前目錄)的角色, Document 則兼俱一般檔案夾與檔案的特色. 在 Database Console 下操作時, 只能在 Collection 裏面放置 Document (Collection 就是Document 的集合). 至於 Document 裏面, 可以加入其他 Document 或是另外插入下層的Collection, 當 Document 裏面插入了下層的Collection, 就能把資料向下擴展, 若是放的是 Document 他就自成一筆資料(Row), 紀錄(record) row data,也就是說可以用不同 Documents 存放不同紀錄, 當然每個 Document 要先配置好欄位 field, 每個欄位可以參考(reference)其他 Document 形成關聯式文件, 經由如此不斷合蹤與連橫, 就能相互串聯成龐大的資料庫, 例如我可以單純定義一個 Collection 作為資料表Table, 例如稱作 Book, Document 不用特別指定名稱, 讓系統自動建立(auto id), 欄位可以定義像是 name, author, price 等等把他敲進資料表順便紀錄 row data, 若要新增多筆資料時就一一建立起不同的 Document. 或是先定義一個 Collection 作為 database, 在裏面建立不同的 Document, 在Document 裏面插入下層 Collection 稱為 Table, 在 Table 裏面再擺放其他 Documen, 該 Document 定義一些欄位 fields, 去紀錄 row data , 隨自個喜好, 只要用 Collection 加 Document 就能組合成想要的資料結構. 總而言之, 可以簡單將 Collection 視為一個節點(node), Document 就是端點(end point),
當端點要往下擴展時就必須先插入一個節點(Collection), 接著在節點(Collection)裏擺進其他端點(
Doctument),成為子端點,根 / 可說是最上層的端點, 但不能放其他文件(Document), 為了往下擴展, 就必需先插入節點(Collection),
擺放不同的節點(Collection),等於往下產生不同的路徑,資料庫最終搜索的目標是端點(Document), 而節點(Collection)就集合了各種端點(Document).
8. 在 Flutter 專案目錄修改 pubspec.yaml , 加入 cloud_firestore 支援:dependencies:
cloud_firestore:
9. 寫個範例程式, 利用 StreamBuilder , 讓他自動跟 Firstore 溝通, 只要一上網就會透過資料庫(Collection)更新頁面資料, 主程式 main.dart 在 lib 底下:
// lib/main.dart
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
void main( ) => runApp(MaterialApp(home: MyApp( ) ) );
class MyApp extends StatefulWidget { @override createState( ) => MyAppState( );}
class MyAppState extends State<MyApp> {
final listWidget = <Widget>[ ];
streamWidget( ) => StreamBuilder(
stream : Firestore.instance.collection('Book').snapshots( ),
builder : (_, snapshot) {
listWidget.clear( );
if (! snapshot.hasData) return Text("Loading ...");
int number = snapshot.data.documents.length; // number of documments
while(number>0) {
final doc = snapshot.data.documents[--number];
listWidget.add(Text("書名${doc['name']}: 作者:${doc['author']}:${doc['price']}元"));
}
return Column(children: listWidget);
}
);
@override build(BuildContext context) => Scaffold(
appBar: AppBar(title: Text('Cloud FireStore Example')),
body : streamWidget( )
);
}
10. , 連結手機, 使用 vscode 開啟 Flutter 上述專案資料夾, 打開終端機, 驗證是否成功, 執行:
flutter pub get
flutter run
p.s. 後續如果要寫不同應用程式, 一種是上 Firebase Console 再新增產生新的 google-services.json, 下載後放入 /android/app 目錄底下, 或是用原先的 google-services.json, 此時必須修改 /android/app/build.gradle 檔案,把裏面 applicationId 改成符合 google-services.json 所設定的名稱就可, 換句話說 google-services.json 對應的是檔案 /android/app/build.gradle 裏面 applicationId 的設定值, 並非程式名稱.
沒有留言:
張貼留言