iOSおよびAndroidアプリ用にFlutterを使用してFirebaseを設定する方法

投稿日: 2022-04-20 2022-04-20
タグ: Flutter

Firebase は、アプリ内で認証、データベース、クラウド機能、広告、その他の無数の機能を使用したい人にとって、優れたバックエンドソリューションです。

この記事では、Flutterを使用してiOSおよびAndroidプラットフォーム用のFirebaseプロジェクトを作成します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Firebaseを使用するためのGoogleアカウント。
iOS向けの開発にはXCodeが必要です。
Flutterをダウンロードしてインストールするには。
AndroidStudioおよびVisualStudioCodeをダウンロードしてインストールするには。
コードエディタ用のプラグインをインストールすることをお勧めします。 AndroidStudio用にインストールされたFlutterおよびDartプラグイン。 VisualStudioCode用にインストールされたFlutter拡張機能。

このチュートリアルは、Flutter v2.0.6、Android SDK v31.0.2、およびAndroidStudiov4.1で検証されました。

新しいFlutterプロジェクトの作成

このチュートリアルでは、サンプルのFlutterアプリを作成する必要があります。

Flutter用に環境を設定したら、次のコマンドを実行して新しいアプリケーションを作成できます。

flutter create flutterfirebaseexample

新しいプロジェクトディレクトリに移動します。

cd flutterfirebaseexample

flutter createを使用すると、ボタンがクリックされた回数を表示するデモアプリケーションが作成されます。

Flutterプロジェクトが稼働しているので、Firebaseを追加できます。

新しいFirebaseプロジェクトの作成

まず、Googleアカウントでログインして、Firebaseプロジェクトを管理します。 Firebaseダッシュボード内から、新しいプロジェクトの作成ボタンを選択し、名前を付けます。

Screenshot of the Firebase page for Step 1 of creating a new project - providing a project name.

次に、GoogleAnalyticsを有効にするオプションが表示されます。このチュートリアルではGoogleAnalyticsは必要ありませんが、プロジェクトに追加することもできます。

Screenshot of the Firebase page for Step 2 of creating a new project - adding Google Analytics.

Google Analyticsを使用する場合は、プロジェクトを作成する前に利用規約を確認して同意する必要があります。

続行を押すと、プロジェクトが作成され、リソースがプロビジョニングされます。次に、新しいプロジェクトのダッシュボードに移動します。

Androidサポートの追加

アプリの登録

FlutterアプリケーションにAndroidサポートを追加するには、ダッシュボードからAndroidロゴを選択します。これにより、次の画面が表示されます。

Screenshot of the page for adding Firebase to your Android app. Fields for Android package name and app nickname are filled out.

ここで最も重要なことは、ここで選択したAndroidパッケージ名をアプリケーション内のパッケージ名と一致させることです。

構造は、少なくとも2つのセグメントで構成されます。一般的なパターンは、ドメイン名、会社名、およびアプリケーション名を使用することです。

com.example.flutterfirebaseexample

名前を決めたら、コードエディタでandroid/app/build.gradleを開き、Androidパッケージ名と一致するようにapplicationIdを更新します。

android / app / build.gradle

...
defaultConfig {
    // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
    applicationId 'com.example.flutterfirebaseexample'
    ...
}
...

この段階では、アプリのニックネームとデバッグ署名キーをスキップできます。 アプリの登録を選択して続行します。

構成ファイルのダウンロード

次のステップは、Firebase構成ファイルをFlutterプロジェクトに追加することです。これは、Firebaseが使用するAPIキーやその他の重要な情報が含まれているため重要です。

このページからDownloadgoogle-services.jsonを選択します。

Screenshot of the Firebase page with a Download config file button.

次に、google-services.jsonファイルをFlutterプロジェクト内のandroid/appディレクトリに移動します。

FirebaseSDKの追加

次に、Gradle構成を更新して、Googleサービスプラグインを含める必要があります。

コードエディタでandroid/build.gradleを開き、次のように変更します。

android / buiild.gradle

buildscript {
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
  }
  dependencies {
    ...
    // Add this line
    classpath 'com.google.gms:google-services:4.3.6'
  }
}

allprojects {
  ...
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
    ...
  }
}

最後に、android/app/build.gradleのアプリレベルファイルを更新して、次のものを含めます。

android / app / build.gradle

apply plugin: 'com.android.application'
// Add this line
apply plugin: 'com.google.gms.google-services'

dependencies {
  // Import the Firebase BoM
  implementation platform('com.google.firebase:firebase-bom:28.0.0')

  // Add the dependencies for any other desired Firebase products
  // https://firebase.google.com/docs/android/setup#available-libraries
}

このアップデートでは、基本的にGoogleサービスプラグインを適用するとともに、アナリティクスなどの他のFlutterFirebaseプラグインをアクティブ化する方法を検討しています。

ここから、Androidデバイスまたはシミュレーターでアプリケーションを実行します。すべてが正常に機能している場合は、ダッシュボードに次のメッセージが表示されます。

Screenshot of the Firebase page with a congratulation message for successfully adding Firebase to your app.

次は、iOSサポートを追加しましょう！

iOSサポートの追加

iOS向けのFirebaseサポートを追加するには、同様の一連の手順に従う必要があります。

ダッシュボードに戻り、アプリの追加を選択してから、iOSアイコンを選択してセットアッププロセスに移動します。

アプリの登録

もう一度、「iOSバンドルID」を追加する必要があります。一貫性を保つために「Androidパッケージ名」を使用することができます。

Screenshot of the Firebase page for registering the app and providing an iOS Bundle ID.

次に、iOSプロジェクトをXcodeのios/Runner/Runner.xcodeprojで開き、 General の下のバンドル識別子を変更して、これが一致することを確認する必要があります。

Screenshot of the project in Xcode with the iOS bundle ID added to the Bundler Identifier field.

アプリの登録をクリックして次の画面に移動します。

構成ファイルのダウンロード

このステップでは、構成ファイルをダウンロードして、これをXcodeプロジェクトに追加する必要があります。

Screenshot of the Firebase page with a Download config file button.

GoogleService-Info.plistをダウンロードし、これをRunner内のXcodeプロジェクトのルートに移動します。

Screenshot of the project in Xcode with the GoogleService-Info.plist file in the Runner directory.

このファイルをXcode内で移動して、適切なファイル参照を作成してください。

Firebase SDKをインストールして初期化コードを追加するための追加の手順がありますが、このチュートリアルでは必要ありません。

それでおしまい！

結論

この記事では、Firebaseで使用するFlutterアプリケーションを設定して準備する方法を学びました。

Flutterは、FlutterFireライブラリセットを使用してFirebaseを公式にサポートしています。

今後の記事では、Cloud Firestore、認証、分析などのFirebase機能をFlutterで使用する方法について説明します。

Flutterについて詳しく知りたい場合は、Flutterトピックページで演習とプログラミングプロジェクトを確認してください。

getdocs

13036