【Flutter/Dart】Firebaseの導入

目次

概要

基本的にFirebaseの公式ドキュメントに則る。
アプリを開発するが、サーバーを持っていない人が多いだろう。そもそも、勉強がてらサーバー契約をする人も多いとは思えない。
しかし、Firebaseを使用するとメール機能やストレージやDBなど、サーバーを契約しなくてもサーバーを使用したような機能を実装できる。

現場でもFirebaseを使用することも多いうえ、サーバー契約は自分独自の環境。人から求められるエンジニアになるには公開されているツールを使用するのがいいだろう。

今回は、その導入部分を記載していく。

実装方法

Firebase CLIを用意する

前提として、Googleアカウント作成と、Firebaseにログインできていること。
Firebase CLI リファレンスを元に準備していく。
以下はMacのやり方を記載してく。それ以外の方々はリファレンスを参照。

まず、Firebase CLI をインストールする。

$ curl -sL https://firebase.tools | bash

次に、Firebase CLI にログインしてテストする。

$ firebase login

そうすると以下のように聞かれる。

i  Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? (Y/n)

ここで「Y」を入力するとGoogleアカウントを選択する画面へ遷移し、そのまま次へ進む。
そうすると以下の画面が表示されて成功したことを確認。

きちんと連携できているか確認しよう。
以下のコマンドを叩いて、Firebaseのコンソールに表示されているプロジェクト一覧が表示されていればOKだ！

$ firebase projects:list
✔ Preparing the list of your Firebase projects
┌──────────────────────┬───────────────────┬────────────────┬──────────────────────┐
│ Project Display Name │ Project ID        │ Project Number │ Resource Location ID │
├──────────────────────┼───────────────────┼────────────────┼──────────────────────┤
│ FlutterDemo          │ flutterdemo-274fc │ 954342238067   │ [Not specified]      │
└──────────────────────┴───────────────────┴────────────────┴──────────────────────┘

1 project(s) total.

今後、Firebase CLIを最新版にする場合は以下のコマンドを叩こう

$ curl -sL https://firebase.tools | upgrade=true bash

必要なコマンドライン ツールをインストールする

FlutterFire CLIをインストールする。

$ dart pub global activate flutterfire_cli

ただ、もし以下のような警告が出てくるなら以下の対処が必要。
つまりはパスが通っていないということだ。

$ dart pub global activate flutterfire_cli

Package flutterfire_cli is currently active at version 0.2.7.
The package flutterfire_cli is already activated at newest available version.
To recompile executables, first run `dart pub global deactivate flutterfire_cli`.
Installed executable flutterfire.
Warning: Pub installs executables into $HOME/.pub-cache/bin, which is not on your path.
You can fix that by adding this to your shell's config file (.bashrc, .bash_profile, etc.):

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

Activated flutterfire_cli 0.2.7.

この場合、開発の環境によるが、僕の場合は.bash_profileファイルにパスの情報が書かれているので、このファイルに「export PATH=”$PATH”:”$HOME/.pub-cache/bin”」を追加する。（パスは「~/.bash_profile」）

追加したら一旦ターミナルを再起動して再度FlutterFire CLIをインストールする。

Firebase を使用するようにアプリを構成する

次に、Flutterのプロジェクトファイルがあるディレクトリまで移動し、以下のコマンドを叩く。

FlutterDemo: [ユーザー名]$ flutterfire configure

そうすると、新しくプロジェクトを作成するか聞かれる。
今回はすでにFlutterDemoというプロジェクトを作成しているので、flutterdemo-274fc (FlutterDemo)を選択する。

i Found 1 Firebase projects.                                                                                 
? Select a Firebase project to configure your Flutter application with ›                                     
❯ flutterdemo-274fc (FlutterDemo)                                                                            
  <create a new project>

次は対象となるプラットフォームを聞かれる。
スマホ向けに作っているので、AndroidとiOSにチェックを入れてEnterを押す。（スペースでチェックのON/OFFの切り替えができる。）

✔ Select a Firebase project to configure your Flutter application with · flutterdemo-274fc (FlutterDemo)     
? Which platforms should your configuration support (use arrow keys & space to select)? ›                    
✔ android                                                                                                    
✔ ios                                                                                                        
  macos                                                                                                      
  web

途中以下のように聞かれた。Firebaseを適用するためにgradleファイルを更新するが続けて問題ないか？と聞かれているので、Enter（yes）を押下して続ける。

? The files android/build.gradle & android/app/build.gradle will be updated to apply Firebase configuration a
✔ The files android/build.gradle & android/app/build.gradle will be updated to apply Firebase configuration 
and gradle build plugins. Do you want to continue? yes

結果、「Platform  Firebase App Id」というものが発行された。

アプリで Firebase を初期化する

以下もFluttermのプロジェクトファイル内でのコマンドが前提になっている。

以下のコマンドを叩いてコア プラグインをインストールする。

$ flutter pub add firebase_core

Flutter アプリの Firebase 構成を最新にする。

$ flutterfire configure

そしたら以下のように聞かれた。

i Found 1 Firebase projects.                                                                                 
? Select a Firebase project to configure your Flutter application with ›                                     
❯ flutterdemo-274fc (FlutterDemo)                                                                            
  <create a new project>

ここはさっきと同じ、これから実装するFlutterDemoを選択。続くプラットフォームもAndroidとiOSを選択。

次にlib/main.dartに以下のimport文を追加する。

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

そして、処理の最初の部分に以下のコードを追加する。
この部分では、構成ファイルによってエクスポートされたDefaultFirebaseOptionsオブジェクトを使用してFirebaseを初期化する。

void main() async{
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const ProviderScope(child: MyApp()));
}

以下のコマンドでFlutterアプリをビルドする。

$ flutter run

あとは必要なプラグインをインストールするコマンドを叩くだけ。
プラグイン一覧

今回はここまで。
お疲れ様です。

参考ページ