0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

FlutterでのCloud FireStore導入手順

Last updated at Posted at 2024-07-21

■Node.jsインストール
サーバサイドで動作するJavascript環境
npm(Node Package Manager)を同梱している
(今回はnpmを使ってfirebase-toolsをインストールするためにNode.jsをインストールする)

用途例)

  • webサーバ構築
  • api作成
  • DBの連携

image.png

■firebase-toolsインストール
Firebaseをコマンドラインから操作するためのコマンド

ターミナルで以下を実行

npm install -g firebase-tools

-> "npm error Error: EACCES: permission denied"が発生したのでsudoで再実行

■Firebaseアカウント、プロジェクトの作成
https://firebase.google.com/?hl=ja

image.png

image.png

image.png

image.png

image.png

Flutterを選択

image.png

以下、「Firebase CLIをインストールしてログインする」を行う
(Flutter SDKはインストール済みなのでスキップ)

image.png

以下コマンドをプロジェクトのターミナルで打ち、ログイン

firebase login

image.png

image.png

↑の指示通り、以下コマンドを実行

dart pub global activate flutterfire_cli

パスを通すよう指示が出るので、以下を~/.zshrcに追加

export PATH="$PATH":"$HOME/.pub-cache/bin"

zshを読み込み直す必要があるため、

source ~/.zshrc

2つ目の指示コマンドを実行

flutterfire configure --project=flutter-todo-7dd9a

以下聞かれる

Which Android application id (or package name) do you want to use for this configuration, e.g. 'com.example.app'? 

android/app/build.gradleにある

applicationId="〜〜〜"

の値を入力

メモ:Androidのapplication IDに対するiOSのbundle IDは以下を見れば確認できる

ios/Runner.xcodeproj/project.pbxprojにある

PRODUCT_BUNDLE_IDENTIFIER = 〜〜〜;

成功すると、Firebaseと通信するための以下設定ファイルが追加される
(firebase_coreとcloud_firestoreのパッケージがないため、エラーになっている。後ほどPub getする)

lib/firebase_option.dart

先に進み、Clud Firestoreを選択

image.png

image.png

image.png

firebase_coreとcloud_firestoreをPub get

■動作確認時のエラー

INSTALL_FAILED_INSUFFICIENT_STORAGE

というエラーが出た場合、エミュレータを落として、以下のWipe Dataを実行

image.png

[cloud_firestore/permission-denied] The caller does not have permission to execute the specified operation.

というエラーが出た場合、以下のようにルールを変更
https://qiita.com/yuuki-h/items/7a63ad3d315d95bb7e4d

<変更前>
image.png

<変更後>

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.time < timestamp.date(2025, 12, 12);
    }
  }
}

■補足
上記で設定済みのデータベースを別アプリで使いたい場合、

2つ目の指示コマンドを実行

flutterfire configure --project=flutter-todo-7dd9a

の部分を実行する。

アプリ実行時に以下のエラーが出た。

Execution failed for task ':app:processDebugGoogleServices'.
> No matching client found for package name 'com.xx.xx'

https://qiita.com/teruis/items/5c278c27b4cf5a4b338e
こちらに記載の方法で解決。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?