Flutter: firebaseと連携しよう

プログラミング
スポンサーリンク




こんにちは、おみです。

最近は、Flutterを使用してアプリ開発の勉強をしているのですが、そんな時に、firebaseというサービスを発見しました。

→firebaseとは…

Googleが運営している、mBaaS/BaaS。

主にサーバサイドで提供する機能を利用することができるため、サーバサイドの開発にかかるコストを削減することができる。

詳しくは公式ページ

 

すごくないですか?

認証機能やDB、さらには機械学習など、様々な機能を基本無料で利用することができます。

サーバサイドの面倒な問題を大量に片付けてくれそうなので、使わない手はないですよね??

ということで今回はまず、flutterとfirebaseを連携する方法について、解説していきたいと思います。

 

 

スポンサーリンク

開発環境

Android Studio: 4.0.1

flutter: 47.1.2

dart: 193.7361

 

下準備

とりあえず下記のものを用意しておきましょう。

  • googleアカウント
  • 連携したいflutterプロジェクト

 

やってみよう

firebaseにログインする

まずは下記のリンクをクリックし、googleアカウントでログインしましょう

firebase-ログインページ

 

 

プロジェクトを作成する

ログインしたら、ログインボタンの隣のコンソールへ移動をクリックし、開いたページのプロジェクトを追加をクリックします。

 

画面の手順に従って、プロジェクトを作成します。

1ページ目

↓flutterのプロジェクトと同じような名前をつけましょう

 

2ページ目

 

3ページ目

 

flutterとfirebaseを連携する

ここからは、AndroidとiOSでやり方が違います。

FlutterはAndroidもiOSも両方使えるのが強みなので、とりあえず両方連携させておきましょう。

Android

連携を行うには、flutterプロジェクトのパッケージ名が必要になります。

AndroidStudioでプロジェクトを開き、

[プロジェクト名]/android/app/src/main/AndroidManifest.xml

を参照し、パッケージ名を取得します。

 

「Androidはこちら」をクリックし、アプリを登録します。

 

 

設定ファイルをダウンロードし、

[プロジェクト名]/android/app/

に格納します。

 

次の2つのファイルに追記します。

① [プロジェクト名]/android/build.gradle

② [プロジェクト名]/android/app/build.gradle

 

buildscript {
    ...

    dependencies {
        classpath'com.google.gms:googleservices:4.0.1'
        ...
    }
}

 

applyplugin:'com.google.gms.googleservices'
...

dependencies {
    implementation'com.google.firebase:firebasecore:16.0.1'
    ...

}

 

最後に、このステップをスキップするをクリックして、完了です。

 

 

iOS

連携を行うには、iOSハンドルIDが必要になります。

ターミナルにコマンドを入力し、プロジェクトをxcodeで開きます。

$ cd [プロジェクトのルートディレクトリのパス]

$ open ios/Runner.xcworkspace

 

Runner → RunnerのBundle IdentifierがiOSハンドルIDなので、メモしておきます。

 

「iOSはこちら」をクリックし、アプリを登録します。

 

設定ファイルをダウンロードし、

xcodeのRunner直下に格納します。

 

最後にターミナルにコマンドを入力し、設定を行います。

$cd ios
$brew install cocoapods
$podsetup

 

 

これで完了です。

次は、実際に使ってみようと思います。

 

 

コメント

  1. […] Flutter: firebaseと連携しようこんにちは、Eviです。 最近は、Flutterを使用して… […]

タイトルとURLをコピーしました