20210427のAndroidに関する記事は1件です。

【全手順】Firebase × Flutter をサクッと紐付けよう

〜目次〜 1. Firebeseの登録   1-1. アカウント作成   1-2. Firebaseプロジェクトの追加 2. Flutterプロジェクトの作成 3. iosの紐付け   3-1. Info.plistの作成   3-2. iosアプリにFirebaseを追加 4. Androidの紐付け   4-1. jsonファイルの作成   4-2. AndroidアプリにFirebaseを追加 5. 終わりに 1. Firebeseの登録 1-1. アカウント作成 Firebase公式ページにアクセスし、[使ってみる]をクリック Googleアカウントを求められるので、ご自身のアカウントを登録 1-2. Firebaseプロジェクトの追加 私の場合いくつかのプロジェクトが既にありますので、画面はご自身のものとは異なります。 プロジェクト名は、半角英数のみ使用可能 アナリティクスが不要な方は、オフにして下さい。 アナリティクスとは、ユーザーのアクセス経路、数、時間等を確認できるものと思って下さい。 アナリティクスアカウントの作成をして、各項目を完了させて下さい。 2. Flutterプロジェクトの作成 Android Studioで新しくプロジェクトを作成して下さい。 今回はApplicationの作成で進めていきます。 プロジェクト名は、Firebaseのプロジェクト名と同じにしておくと分かり易いです。 Package nameは後で紐付けの際に必要になります。 確認できますので、覚えておかなくても大丈夫です。 3. iosの紐付け 3-1. Info.plistの作成 Finderから AndroidStudioProject > ios > Runner.xcworkspaceを選択して開きます。 xcodeが開くと左上部のRunnerを表示させ、Bundle Identifierをコピー Firebaseの画面に戻り、ペーストしアプリを追加します。 GoogleService-Info.plistをクリックしてダウンロードを開始 これでplistの作成ができました。 3-2. iosアプリにFirebaseを追加 plistが作成されているので、FinderからxcodeのRunnerフォルダにドラッグして追加 確認画面が出ますので、チェックボックスを埋めて完了して下さい。 Firebaseの画面に戻り[次へ]をクリック 何度か[次へ]を続けて、[コンソールへ戻る]のボタンをクリックしてコンソールに移動します。 2-3. ここまでを簡単に説明します (私なりに頑張って説明してみます!) AndroidStudioで作成したPackageを使って、xcodeからアプリ連携IDみたいなもの(Bundle Identifier)を取得 ↓ 取得したアプリ連携IDをFirebaseに登録すると、アプリ構成ファイルみたいなもの(GoogleService-Info.plist)が作成される ↓ その構成ファイルをxcodeに戻してやるとiosとFirebaseが紐づく。 AndroidStudio > xcode > Firebase > xcode です! 4. Androidの紐付け 4-1. jsonファイルの作成 コンソールでAndroidのアイコンをクリック xcodeに移動して、Android > app > build.gradle(ゾウさん)を開いて下さい。 そこにapplicationIDがあるのでコピー Firebaseに戻りコピーしたものを、パッケージ名のところにペーストし[アプリを登録]をクリック iosの時はplistでしたが、今回はjsonファイルをダウンロード 4-2. AndroidアプリにFirebaseを追加  AndroidStudioに移動して、Finderからjsonファイルをドラッグ ドラッグ先はAndroid直下のappフォルダ search for referencesにチェックを入れて[Refactor]をクリック search for referencesにチェックを入れておくと、コードベース全体で特定のコード要素が参照されている場所を検索することができます。 Project画面にGoogle-services.jsonが追加されていることが確認できると思います。 これでFirebaseとFlutter [ios] [Android] の紐付けは完了です。 5. 終わりに 最後まで読んで頂きありがとうございました。 まだまだ初学者ですので、もっと良い記述の方法があればご指摘お願い致します!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む