フラッターのためのFirebaseのセットアップ方法

イントロ

こんにちは、そして、歓迎、私はフラッターでFireBaseプロジェクトを準備する方法に関する短い記事です.あなたがそれを感じるならば、TOCを通してスキップするために、自由に感じてください.

コーディング・ラウンジ 設定

FireBaseを設定する前にフラッタープロジェクトを最初に作成しましょう.端末を開き、お好みのディレクトリにフラッタプロジェクトを作成しましょう.
注意: Linux OSを使用しています.

flutter create flutter_firebase_connection

cd flutter_firebase_connection/

# open in vs code
code .

Firebaseプロジェクトを作成する

Firebase にFireBaseプロジェクトを作成してください.あなたがFireBaseプロジェクトを決して作成しなかったならば、Googleによってこのconsoleから指示に従ってください.

コードラボ ファイアウォールのインストール

我々は開発のための パッケージに依存します.FlutterFireパッケージの設定はFlutterFireで行うことができます.しかし、Flutterfire CLIは、FlutterFire CLIに頼ります.FireBaseアカウントにインストールしてログインする手順に従ってください.いいえ、FireBaseを初期化する必要があります、我々は後でFlutterFire CLI構成の後にそれをします.

ファイアベース 依存関係のインストール

FireBase CLIインストール後、プロジェクトをFireBaseプロジェクトにリンクする前に、いくつかの依存関係をインストールします.端末で:

# Root of the flutter project
# Firebase core
flutter pub add firebase_core

# Firebase Auth
flutter pub add firebase_auth

# Firebase Firestore
flutter pub add cloud_firestore

# Firebase Cloud Functions
flutter pub add cloud_functions

# Firebase Storage
flutter pub add firebase_storage

Firebaseコア、Firebase Auth、FireBaseのクラウド機能、およびFlubaseストレージパッケージをフラッターにインストールしました.

をインストールして設定する

端末にフラッタCLIをインストールして設定しましょう

# Install Firebase CLI
dart pub global activate flutterfire_cli

# On the root of your project
# configur cli
flutterfire configure

設定プロセス中:

場合は、リストから右のプロジェクトを選択するように求められます.

また、プロジェクトのアプリを選択するよう求められます.AndroidとIOSだけを選んだ.スペースバーを選択/選択解除できます.

あなたはIOSのバンドルIDを提供するように求められます.私は、ちょうどアンドロイド:comと同じものを与えました.例.アプリ.

今、我々はフラッターの火のインストールと構成で行われ、次に、我々はそれを初期化する必要があります.

ファイアベース初期設定

メインで.プロジェクトのDARTファイルはfirebaseを初期化しましょう.

// Import 
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
import 'package:flutter/material.dart';

void main() async {
  //  concrete binding for applications based on the Widgets framewor
  WidgetsFlutterBinding.ensureInitialized();
// Initialize Firebase
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  runApp(const MyApp());
}

FireBaseバックエンドを設定する

多くのバックエンドコードを書くならば、あなたはセキュリティときれいなコードのためにフラッタフロントエンドとFireBaseバックエンド側を切り離すべきです.それで、クラウドとエミュレータの両方に別々にFireBaseを設定しましょう.
リマインダ:設定を開始する前に、作成したプロジェクトのFireBaseコンソールからFirestoreデータベース(テストモードで)を作成してください.それ以外の場合は、データベースが作成されていないというプロセス中にエラーが発生します.

# On the root of your project
firebase init

あなたは異なるFirebase製品から選ぶよう頼まれます.Firestore、Firebaseストレージ、クラウド機能、およびエミュレータを選択します.

次に、FireBaseプロジェクトを選択します.我々はすでに1つを作成して以来、既存のものから右のプロジェクトを選んだ.

だけで、そこに提供されているすべてのファイルオプションを入力してください.

FireBase関数に使用する言語を選択します.JSを選びます.

インラインとインストールの両方を選択します.

プロセス中に

、エミュレータの設定にプロンプトが表示されます.ここでは、認証、firestore、ストレージ、および関数のエミュレータの4つの製品を選択してください.

ちょうどEnterキーを押してデフォルトのポートを選択します.

エミュレータUIを有効にする「Y」を入力します.

キーを押して残りの部分を入力します.

今、我々はすべての必需品を設定しました.まだ待機している、我々はまだFabbaseのエミュレータスイートにフラッタープロジェクトをリンクしていない.

FireBaseエミュレータスイートをFlutterプロジェクトに接続します。

エミュレータに接続するには、もう一度メインに変更を加える必要があります.ダートファイル.
インポートが必要な場合は、すでに依存していません.

import 'dart:io' show Platform; // Its required for emulator 
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:cloud_functions/cloud_functions.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_storage/firebase_storage.dart';

グローバルBoolean Useエミュレータを作成します.

// Outside of any class or methods, before main()
const bool _useEmulator = true;

必要な設定をエミュレータに接続する関数を作成します.

// Outside of main, preferably at the end of the file
// Settings for firebase emulator connection
Future _connectToEmulator() async {
  // Provide url to the emulator, localhost might not work on android emulator.
  final host = Platform.isAndroid ? '22.0.4.08' : 'localhost'; //#1
  // Provide port for all the local emulator prodcuts
  // #2
  const authPort = 9099;
  const firestorePort = 8080;
  const functionsPort = 5001;
  const storagePort = 9199;

  // Just to make sure we're running locally
  print("I am running on emulator");

  // Instruct all the relevant firebase products to use the firebase emulator
  // # 3
  await FirebaseAuth.instance.useAuthEmulator(host, authPort);
  FirebaseFirestore.instance.useFirestoreEmulator(host, firestorePort);
  FirebaseFunctions.instance.useFunctionsEmulator(host, functionsPort);
  FirebaseStorage.instance.useStorageEmulator(host, storagePort);
}

vitalsを通しましょう.

Androidエミュレータで動作しているときは、実際にはlocalhostではありません.だから、エラーを与えることができるので、プラットフォームをチェックし、正しいURLを提供します.

各ファイヤーベースの製品は、そのポートで実行されます.それで、正しいポートを提供してください.FireBase内のすべての製品のポートを見つけることができます.JSONファイル.

は、実行中のすべての製品にFireBaseエミュレータを使用するよう指示します.

ここで、firebaseを初期化した後にmain ()メソッドでこの関数を呼び出す必要があります.

// Set app to run on firebase emulator
  if (_useEmulator) {
    await _connectToEmulator();
  }

最終コード

私たちは今エミュレータを使用するように設定しています.主な最終形態.ダーツは

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
import 'dart:io' show Platform; // Its required for emulator
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:cloud_functions/cloud_functions.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_storage/firebase_storage.dart';

// Outside of any class or methods, before main()
const bool _useEmulator = true;

void main() async {
  //  concrete binding for applications based on the Widgets framewor
  WidgetsFlutterBinding.ensureInitialized();
// Initialize Firebase
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
// Set app to run on firebase emulator
  if (_useEmulator) {
    await _connectToEmulator();
  }
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('App bar'),
        ),
        body: const Center(
          child: Text("Flutter Fireabse Connection App"),
        ));
  }
}

// Settings for firebase emulator connection
Future _connectToEmulator() async {
  // Provide url to the emulator, localhost might not work on android emulator.
  final host = Platform.isAndroid ? '22.0.4.08' : 'localhost'; //#1
  // Provide port for all the local emulator prodcuts
  // #2
  const authPort = 9099;
  const firestorePort = 8080;
  const functionsPort = 5001;
  const storagePort = 9199;

  // Just to make sure we're running locally
  print("I am running on emulator");

  // Instruct all the relevant firebase products to use the firebase emulator
  // # 3
  await FirebaseAuth.instance.useAuthEmulator(host, authPort);
  FirebaseFirestore.instance.useFirestoreEmulator(host, firestorePort);
  FirebaseFunctions.instance.useFunctionsEmulator(host, functionsPort);
  FirebaseStorage.instance.useStorageEmulator(host, storagePort);
}

Firebaseエミュレータを実行する

// On terminal
firebase emulators:start

Androidエミュレータを実行するときは、「エミュレータで実行中」のメッセージが表示されるはずです.

エラー：FireStoreエミュレータを起動できませんでした。

いくつかの時点で誤ってポートを閉じることを忘れたとき、ポートが既に取られているというエラーが出ます.それを修正するために、我々は港を殺さなければなりません.

# Provide the port that has been given in an error message like 8080
npx kill-port 8080

さて、アクティブポートが終了したら、エミュレータを再び起動できます.

概要

この非常に短いシリーズでは、我々はFireBaseプロジェクトに我々のアプリを接続するために移動しました.手順をたどりましょう.

FirebaseプロジェクトとFirestore DBを作成しました.

は、Firebase CLIとFlutterFire CLI

をインストールしました

ファイアストア、機能、ストレージ、および認証パッケージをインストールしました.

それから、

はFirebase Initの上でこれらのFirebase製品をクラウドFirebaseプロジェクトに接続しました.

初期化中の

では、Firebaseエミュレータもインストールし、すべての設定を行いました.

は、私たちのためのローカルエミュレータ接続を扱う簡単で簡単な機能を書きました.

現在、ポートが利用できないエラー問題を解決する方法を知っています.

サポートを示す

これは接続です.さて、あなたの開発を進めることができます.万事うまくいってもらいたい.これはKhadkaのコーディングラウンジからのNibesh Khadkaです.好き、共有、コメントをサポートし、将来のブログに購読を確認してください.