目次
概要
基本的に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
あとは必要なプラグインをインストールするコマンドを叩くだけ。
プラグイン一覧
今回はここまで。
お疲れ様です。