Ionic4とAngularでFirebaseを設定する方法

GoogleFirebaseは私の人生の愛です。 これはnoSQLであり、Googleの優れたUXチームのおかげでオンラインで簡単にアクセスできます。 Firebaseは、分析、認証、データベース、メッセージング、クラッシュレポートなどの機能を提供するため、すばやく移動してユーザーに集中できます。

まだ興味がありますか？ 設定方法を示して、FirebaseとIonic4の使用を開始しましょう。

新しいプロジェクトの開始

コマンドラインでionic startを実行して、Angularを使用する新しいIonic4プロジェクトを開始します。

$ ionic start alligator_firebase --type=angular

新しいIonic4プロジェクトの構築中に、 FirebaseConsoleに向かいましょう。 Googleアカウントにログインしていない場合は、今すぐログインしてください。

これは簡単な部分です。 白と青の「プロジェクトの追加」ボタンをクリックし、「プロジェクト名」の下に素晴らしい新しいプロジェクトの名前を入力します。 「ワニ」と一緒に行きます。

「プロジェクトの作成」をクリックします。 ロードしたら、新しいプロジェクトに進みます。

構成ルールの取得

これで、プロジェクトのタイトルが左上隅に書かれた青いページが表示されます。

プロジェクトタイトルの下にあるHTMLdivタグアイコンをクリックします。 以下のようなコードスニペットを含むポップアップが表示されます。

<script src="https://www.gstatic.com/firebasejs/5.9.4/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "djlsjdflkasjlfk__339201",
    authDomain: "alligator-9930.firebaseapp.com",
    databaseURL: "https://alligator-9930.firebaseio.com",
    projectId: "alligator-9930",
    storageBucket: "alligator-9930.appspot.com",
    messagingSenderId: "20948309483"
  };
  firebase.initializeApp(config);
</script>

上記で強調表示されているコードに対応するyourFirebaseプロジェクトの部分をコピーします。

AngularFirebaseの依存関係をインストールする

新しいIonic4プロジェクトにFirebaseを追加する前に、AnglelarFire2がインストールされていることを確認してください。 これを行うには、CLIで次のコマンドを実行します。

$ npm install @angular/fire

構成ルールのIonicへの転送

構成ルールができたので、それらをIonic4アプリのいくつかのファイルに貼り付ける必要があります。 cdを開始したIonic4アプリに移動し、environmentにあるファイルenvironment.prod.ts（本番環境ファイル）に移動します。フォルダ。

以前にコピーした構成クレデンシャルを追加します。

export const environment = {
  production: true,
  firebase: {
    apiKey: "your_apiKey",
    authDomain: "your_authDomain",
    databaseURL: "your_databaseURL",
    projectId: "your_projectID",
    storageBucket: "your_storageBucket",
    messagingSenderId: "your_messagingSenderId"
  }
};

次に、同じフォルダにあるenvironment.tsに移動します。

export const environment = {
  production: false,
  firebase: {
    apiKey: "your_apiKey",
    authDomain: "your_authDomain",
    databaseURL: "your_databaseURL",
    projectId: "your_projectId",
    storageBucket: "your_storageBucket",
    messagingSenderId: "your_messagingSenderId"
  }
};

最後に、ルートモジュールファイル（ app.module.ts ）を見つけます。 新しくインストールした@angle / fire モジュールと、以下の強調表示されたコードスニペットのようなenvironment.tsファイルをインポートします。

// ...

// firebase imports, omit what you don't need for your app
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireStorageModule } from '@angular/fire/storage';
// environment
import { environment } from '../environments/environment';