概要
firebaseを使用したデータ操作方法(登録、更新、削除、取得)を説明します。
準備
プロジェクト追加(firebase)
下記のページからコンソール画面を開きます。
https://firebase.google.com/?hl=ja
アプリケーション追加(firebase)
パッケージ名を入力する箇所があるので、
app配下の「build.gradle」をを開き、パッケージ名を貼り付けます。
JSONファイルをダウンロードし、「app」配下に配置します。
記載されている通り、
- プロジェクト配下の「build.gradle」
- app配下の「build.gradle」
それぞれを変更します。
Database作成
データを更新できるように設定を変更します。
allow read, write: if false;
↓
allow read, write: if true;
「pubspec.yaml」の「dependencies」に、下記の2行を追加します。
firebase_core: ^0.3.4
cloud_firestore: ^0.9.13
「\app\build.gradle」に
multiDexEnabled true
を追加します。
この設定をしないと、実行時に下記のエラーが表示されます。
FAILURE: Build failed with an exception.
このエラーは、
Androidアプリのビルドシステムの都合で、
メソッド数が65536を超えるとビルドできないという制約があるために起こるそうです。
プログラミング
以下の通りファイルを作成します。
・\lib\entity\User.dart
/**
* ユーザクラス
*/
class User {
String name;
// コンストラクタ
User();
// コンストラクタ
User.fromMap(Map<String, dynamic> map) {
this.name = map[UserField.name];
}
// Firestore用のMapに変換
Map<String, dynamic> toMap() {
return {
UserField.name: this.name,
};
}
}
/**
* フィールド名
*/
class UserField {
static const name = "name";
}
class UserDocument {
String documentId;
User user;
UserDocument(this.documentId, this.user);
}
・\lib\entity\UserDatastore.dart
import 'User.dart';
import 'package:cloud_firestore/cloud_firestore.dart'; //
class UserDatastore {
static String getCollectionPath() {
return "users";
}
static String getDocumentPath(String documentId) {
return "users/$documentId";
}
/**
* 登録
*/
static String registration(User user) {
final newDocument = Firestore.instance.collection(getCollectionPath()).document();
newDocument.setData(user.toMap());
return newDocument.documentID;
}
/**
* 取得
*/
static Future<User> findById(String documentId) async {
final snapshot = await Firestore.instance.document(getDocumentPath(documentId)).get();
if (snapshot.exists) {
return User.fromMap(snapshot.data);
} else {
throw Error();
}
}
/**
* 削除
*/
static void delete(String documentId) {
Firestore.instance.document(getDocumentPath(documentId)).delete();
}
/**
* 更新
*/
static void update(String documentId, User user) {
Firestore.instance
.document(getDocumentPath(documentId))
.setData(user.toMap());
}
}
・\lib\main.dart
import 'package:flutter/material.dart';
import './entity/User.dart';
import './entity/UserDatastore.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
State createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
UserDocument userDocument;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter Firestore Example"),
),
body: Column(
children: <Widget>[
Text(userDocument == null
? "No user"
: "User Name: ${userDocument.user.name}"),
FlatButton(
child: Text("「nameA」で登録"),
onPressed: () {
final user = User();
user.name = "nameA";
// 登録したデータを保持
final documentId = UserDatastore.registration(user);
setState(() {
userDocument = UserDocument(documentId, user);
});
},
),
FlatButton(
child: Text("取得"),
onPressed: () async {
final user = await UserDatastore.findById(userDocument.documentId);
setState(() {
userDocument = UserDocument(userDocument.documentId, user);
});
},
),
FlatButton(
child: Text("「nameB」で更新"),
onPressed: () {
setState(() {
userDocument.user.name = "nameB";
});
UserDatastore.update(
userDocument.documentId, userDocument.user
);
},
),
FlatButton(
child: Text("削除"),
onPressed: () {
UserDatastore.delete(userDocument.documentId);
// 削除したデータを保持状態から外す
setState(() {
userDocument = null;
});
},
),
],
),
),
);
}
}
動作確認
実際に画面を操作して、動作を確認していきます。
登録
「nameAで登録」ボタンをタップ後、firebaseに登録されることを確認します。
取得
firebase上でmameを「テスト」に変更し「取得」ボタンをタップすると、
上段の名前が「テスト」に変わることが確認できます。
更新
「nameBで更新」ボタンをタップ後、firebaseの登録内容が変わることが確認できます。