2023-06-30

【Flutter】Masamuneで超速アプリ開発②「Firestoreへの簡単接続」

こんにちは。広瀬マサルです。

Flutterでアプリケーションを安定して高速に開発することのできるMasamuneフレームワークを紹介しました。

その魅力と使い方を知っていただくためにこれから数回に分けて紹介記事を書きたいと思います。

Masamuneフレームワークを使いこなすことで超高速・安定・高品質なアプリを開発することができるでしょう。

前回は「プロジェクトの作成」についてお話しました。

第2回は「Firestoreへの簡単接続」です。

Firestoreの作成

まずはFirestoreを利用できるようにしましょう。

Firebaseのコンソールからプロジェクト作成を行います。

https://console.firebase.google.comhttps://console.firebase.google.com
title

ここで一緒に作成されるプロジェクトIDを覚えておきます。

今回はmasamune-testで作成します。

image block

GoogleAnalyiticsはご自由にどうぞ。

image block

プロジェクトが作られます。

image block

Firestoreを新しく作成します。

image block

モードはTestModeにしておきます。

image block

リージョンを指定してください。

ここで指定したリージョンは覚えておきます。

ここではasia-northeast1を指定します。

image block

Firestoreが作成されました。

image block

FlutterプロジェクトでのFirebase設定

前回作成したFlutterプロジェクトに戻りFirebaseの設定を反映させます。

katana.yamlを開きます。

project_idに先程作成したFirebaseプロジェクトIDを記述しfirestoreenabletrueに設定します。

# katana.yaml

# This section contains information related to Firebase.
# Firebase関連の情報を記載します。
firebase:
  # Set the Firebase project ID.
  # FirebaseのプロジェクトIDを設定します。
  project_id: masamune-test

  # Enable Firebase Firestore.
  # Firebase Firestoreを有効にします。
  firestore:
    enable: true # false -> true
    overwrite_rule: false

  # Enable Firebase Authentication.
  # Firebase Authenticationを有効にします。
  authentication:
    enable: false

ターミナルを開きFirebaseのプロジェクトを作成したアカウントにログインします。

※違うアカウントにログインしていたときは一旦ログアウトして再度ログインしてください。

firebase login

最後にkatana applyのコマンドを実行します。

katana apply

これによりFirebaseプロジェクト内にプラットフォームに対応した設定が作成され、自動でFirebaseに接続するための設定がFlutterプロジェクト内に作成されます。

アダプターの入れ替え

main.dartを書き換えます。

modelAdapterLocalModelAdapterからFirestoreModelAdapterDefaultFirebaseOptions.currentPlatformを指定して入れ替えます。

import 'firebase_options.dart'; // 追加

~~~~~

final modelAdapter = FirestoreModelAdapter(
  options: DefaultFirebaseOptions.currentPlatform,
);
// final modelAdapter = LocalModelAdapter();
// final modelAdapter = RuntimeModelAdapter();

デバッグしてみるとカウンターアプリが立ち上がります。

image block

カウントアップしてみるとFirestoreに保存されているデータが変更されてるのがわかります。

image block

前回、データモデルでModelCounterの型のフィールドを利用していることを説明しました。

ModelCounterFirestoreModelAdapterで利用する場合、値を増減すると内部でFieldValue.incrementが利用されます。

そのため、多数のユーザーが同じフィールドにアクセスした場合でも不整合なく値を増減することができます。

おわりに

わずか数行の変更で簡単にFirestoreへと接続することができました。

このようにMasamuneフレームワークはDart外の設定もコマンド一発で簡単に設定することができ、Dart内もアダプターを入れ替えることで簡単に設定を切り替えることが可能です。

次回から実際のアプリ開発を進めていこうと思います。お楽しみに!

Masamuneフレームワークはこちらにソースを公開しています。issueやPullRequestをお待ちしてます!

また仕事の依頼等ございましたら、私のTwitterWebサイトで直接ご連絡をお願いいたします!

FlutterやUnityを使ったアプリ開発やアプリの紹介。制作した楽曲・映像の紹介。画像や映像素材の配布。仕事の受注なども行っています。
https://mathru.nethttps://mathru.net
title

GitHub Sponsors

スポンサーを随時募集してます。ご支援お待ちしております!

Developed the katana/masamune framework, which has dramatically improved the overall efficiency of Flutter-based application development.
https://github.comhttps://github.com
title
【Flutter】Masamuneで超速アプリ開発③「メモ帳アプリ作成 - メモの表示」

Development Flutter Dart pub Plugins Masamune

◀︎ Next
【Flutter】Masamuneで超速アプリ開発①「プロジェクトの作成」

Development Flutter Dart pub Plugins Masamune

▶︎ Previous