まつまる どうも、まつまるです。あ～お腹すいた。
この記事ではColud Firestoreを使うための準備がメインです。
前提
Flutterの環境構築は済んでいる
Googleアカウントを持っている
Flutterの環境構築は済んでいる
Googleアカウントを持っている
基本は公式サイトの通りに説明していきます。
ステップ１：Firebaseプロジェクトを作成する
まずはFirebaseのサイトに飛びましょう。
■
■
使ってみるをクリック
使ってみるをクリック
■
■
プロジェクトを作成
■
■プロジェクト名を入力
■
■
適当な名前をつけて、Firebaseの規約に同意したら続行！
適当な名前をつけて、Firebaseの規約に同意したら続行！
■
■
特に変更しなくてOK
特に変更しなくてOK
■
■
Googleアナリティクスアカウントがあれば選択する。無ければ作成しましょう。
Googleアナリティクスアカウントがあれば選択する。無ければ作成しましょう。
■
■
この画面がでればOK
この画面がでればOK
■
■
これでFirebaseプロジェクトが立ち上がりました。
これでFirebaseプロジェクトが立ち上がりました。
ステップ２：アプリをFirebaseに登録する
iOSとandoridで手順が変わってくるので、必要に応じて設定しましょう。（Flutterやっているならどっちも必要だよね）
iOSバージョン
■
■
iOSをクリック
iOSをクリック
■
■
次はiOSバンドルIDを入力します。バンドルIDを確認するためにandroid studioを開きましょう。
次はiOSバンドルIDを入力します。バンドルIDを確認するためにandroid studioを開きましょう。
■
■
android studioで作成しているプロジェクトからiosディレクトリを右クリックしてXcodeを開く。
android studioで作成しているプロジェクトからiosディレクトリを右クリックしてXcodeを開く。
■
■
Xcodeを開たら、RunnerのGeneralにBundle Identifierをコピー。
Xcodeを開たら、RunnerのGeneralにBundle Identifierをコピー。
■
■
Firebaseの画面に戻って貼り付ける。アプリのニックネームはなんでも良いです。App Store IDは省略。アプリ登録をクリック。
Firebaseの画面に戻って貼り付ける。アプリのニックネームはなんでも良いです。App Store IDは省略。アプリ登録をクリック。
■
■
登録できたらGoogleService-Info.plist ファイルをダウンロードしてXcode プロジェクトに移動。
登録できたらGoogleService-Info.plist ファイルをダウンロードしてXcode プロジェクトに移動。
■
■
Xcodeを開いて、Runner配下に先ほどダウンロードしたファイルをドラック&ドロップしましょう。
Xcodeを開いて、Runner配下に先ほどダウンロードしたファイルをドラック&ドロップしましょう。
■
■
終われば、”次へ”をクリックしましょう。
終われば、”次へ”をクリックしましょう。
■
■
Firebase SDKの設定はスキップするので、この画面が出てきたら何もせずに”次へ”をクリックしましょう。
Firebase SDKの設定はスキップするので、この画面が出てきたら何もせずに”次へ”をクリックしましょう。
■
■
ここも何もせず”次へ”をクリック。
ここも何もせず”次へ”をクリック。
■
■
コンソールに進んで、次のステップに行きましょう。
コンソールに進んで、次のステップに行きましょう。
androidバージョン
■
■
アプリを追加
アプリを追加
■
■
andoridを選択
andoridを選択
■
■
パッケージ名はandroid studioで確認します。
パッケージ名はandroid studioで確認します。
■
■android studioで⌘＋shift＋Oで検索画面が出てくるのでManifest.xmlのmainを開いてください。
■
■開いたところのpackage名をコピーしましょう。
■
■
入力してアプリを登録
入力してアプリを登録
■
■次はダウンロードした google-services.json ファイルを Android アプリモジュールのルートディレクトリに移動
■
■Firebase 構成ファイルを追加する
■
■ルートレベル（プロジェクトレベル）の Gradle ファイル（android/build.gradle）に、Google サービスの Gradle プラグインを含めるためのルールを追加classpath ‘com.google.gms:google-services:4.3.5’
■
■モジュール（アプリレベル）の Gradle ファイル（通常は android/app/build.gradle）で、Google サービスの Gradle プラグインを適用
apply plugin: ‘com.google.gms.google-services’
apply plugin: ‘com.google.gms.google-services’
app/build.gradleに
multiDexEnabled true
implementation "androidx.multidex:multidex:2.0.1"
を追加。
参考にしたのはこちら
ステップ３：Cloud Firestoreのデータベースを作成
■
■データベースの作成をクリック。
■
■まずはテストモードで開始します
■
■ロケーションはひとまずnam5にしておきます。
■
■無事にデータベースを作成できたらこんな画面になります。
■
■コレクションを開始して、データベースに適当なドキュメントを作っていきたいと思います。コレクションIDはitemにします。名前はなんでもいいです。
■
■フィールドと値にデータを任意で入力します。
■
■ドキュメントIDは自動IDをクリックしたら勝手に作ってくれます。入力したら保存しましょう。
■
■
ちゃんと追加されていますね。
ちゃんと追加されていますね。
ステップ４：FlutterFire プラグインを追加する
①エミュレータまたはデバイス上で、アプリが実行されていないことを確認します。
②Flutter アプリのルート ディレクトリから、pubspec.yaml ファイルを開きます。
③pubspec.yamlにfirebase_core: ^1.0.0を追加。
④アプリで使用するFirebaseプロダクトを追加。今回はcloud_firestore: ^1.0.0を使って、テキストを保存してみます。以下のようにコピペすればOKです。
⑤pub getをクリックしてパッケージをゲットしましょう。
準備がだいぶ長かったですが、これでひとまず準備完了です。
