Firebase Crashコース

このフロントエンド開発者ガイドは、ファイアーベースの謎を解き放ちます。 Firebaseの能力、その利点、実用的な例を探ります。しかし、最初に、短い歴史...

8年前、Andrew LeeとJames Tamplinは、リアルタイムのチャットスタートアップであるEnvolveを立ち上げました。 Ricky MartinやLimp Bizkitなどの有名人のユーザーに支えられた成功は、その使いやすさと迅速なメッセージ配信に由来しています。 Envolveはシンプルなチャットウィジェットでした。ページに追加されたスクリプトタグがすべてを処理しました。チャットメッセージ用の事前に構築されたデータベースとサーバーを効果的に提供しました。

Envolveが成長するにつれて、驚くべきトレンドが明らかになりました。開発者は、チャットだけでなく、さまざまな目的のために（しばしば目に見えない）ウィジェットを使用していました。ゲーム、ハイスコア、アプリの設定など。彼らは、複雑なバックエンド開発の必要性をバイパスして、シームレスなデータ同期のためにウィジェットのリアルタイム機能を活用しました。

このエピファニーは、ファイアーベースの作成につながりました。創設者は、開発者がアプリケーションを迅速に構築および拡大するためのプラットフォームを想定し、バックエンドインフラストラクチャの負担を排除し、フロントエンドに集中できるようにしました。

ファイアーベースの理解

Firebaseは単なるデータベースですか？完全ではありません。当初はリアルタイムのクラウドデータベースでしたが、Firebaseは、開発者向けのインフラストラクチャとマーケティング担当者向けのツールを含む包括的なプラットフォームに進化しました。現在、それぞれがアプリケーション開発の特定の側面をサポートし、アプリのパフォーマンスとユーザーの動作に関する貴重な洞察を提供するように設計された19の統合製品を誇っています。これらの製品は、個別にまたは集合的に使用して、完全なバックエンドソリューションを形成できます。

Firebaseの多様な製品を垣間見ることができます。

• ホスティング： GitHub PullリクエストごとにWebサイトの更新を簡単に展開します。
• Firestore：サーバー管理なしのオフラインでさえ、リアルタイムデータベース機能。
• AUTH：さまざまなプロバイダーを使用したユーザー認証と管理。
• ストレージ：ユーザー生成コンテンツ（画像、ビデオなど）のセキュアストレージ。
• クラウド関数：イベント（データ作成、ユーザーサインアップなど）によってトリガーされるサーバーレス関数。
• 拡張機能：ユーザーインターフェイスを使用した事前に構築された機能（たとえば、ストライプ支払い、翻訳サービス）。
• Google Analytics：包括的なユーザーアクティビティの追跡と分析。
• リモート構成：機能フラグとA/Bテスト用の動的キー値ストア。
• パフォーマンス監視：詳細なパフォーマンスメトリックとカスタムトレース。
• クラウドメッセージング：クロスプラットフォームプッシュ通知。

これは、Firebaseの機能のほんの一部です。すべてのサービスを利用する必要はありません。プロジェクトに関連するツールを選択することは完全に受け入れられます。実際のアプリケーションを掘り下げましょう。

次のセクションでは、Firebaseのセットアップをガイドし、埋め込まれた例を使用してその機能を実証します。これは、ステップバイステップのチュートリアルではなく、高レベルの概要です。詳細なチュートリアルについては、コメントを残してください！

Firebaseのセットアップ

このセクションは、デモアプリを独自のFireBaseバックエンドと統合する予定がある場合に重要です。 Firebaseプロジェクトに精通している場合は、これをスキップしてください。

FireBaseはクラウドベースで、初期アカウントのセットアップが必要です。ただし、ローカルエミュレーターを使用して開発がオフラインで発生する可能性があります。このガイドでは、Codepenを使用して、クラウド接続が必要です。このプロセスには、Firebaseプロジェクトの作成と、フロントエンド統合に必要な構成を取得することが含まれます。

Firebaseプロジェクトの作成

FireBaseコンソールに移動します。とりあえずGoogleアナリティクスのセットアップをスキップできます。

Web Firebaseアプリの作成

新しいWebアプリを作成し、名前を割り当てます。 FireBaseプロジェクトには、複数のアプリを含めることができます。作成後、構成オブジェクトを受け取ります。

 firebaseconfig = {
  Apikey：「あなたのキー」、
  authdomain：「your-domain.firebaseapp.com」、
  ProjectID：「あなたのプロジェクト」、
  StorageBucket： "your-projectid.appspot.com"、
  Messagingsenderid：「あなたのセンダー様」、
  appid：「あなたのappid」、
  測定ID：「Your-MeasurementID」
};

この構成は、フロントエンドをFireBaseに接続します。フロントエンドコードにこれらのプロパティを含めることは安全です。セキュリティメカニズムについては後で説明します。

次に、このアプリをコードで表現しましょう。このアプリは、FireBaseサービス全体で共有ロジックと認証のためのコンテナとして機能します。 CDNのFireBaseライブラリを使用します（ただし、モジュールバンドラーもサポートされています）。

 //このペンは、codepenの「外部スクリプトの追加」オプションを介してFirebaseを追加します
// https://www.gstatic.com/firebasejs/8.2.10/firebase-app.js
// https://www.gstatic.com/firebasejs/8.2.10/firebase-auth.js

// FireBaseコンソールでプロジェクトを作成します
//（console.firebase.google.com）
firebaseconfig = {
  Apikey：「あなたのキー」、
  authdomain：「your-domain.firebaseapp.com」、
  ProjectID：「あなたのプロジェクト」、
  StorageBucket： "your-projectid.appspot.com"、
  Messagingsenderid：「あなたのセンダー様」、
  appid：「あなたのappid」、
  測定ID：「Your-MeasurementID」
};

// FireBaseアプリを作成します
firebaseapp = firebase.initializeapp（firebaseconfig）;
//認証インスタンス
console.log（firebaseapp.auth（））;

次に、必要なFireBaseサービスを有効にします。

認証プロバイダーを有効にします

この例では、ユーザーのサインインとデータセキュリティの認証を利用しています。当初、認証プロバイダーはセキュリティ上の理由で無効になります。 [認証]タブでGoogleおよび匿名のサインインメソッドを有効にします。テスト目的でCodePenを認定ドメインとして追加することを忘れないでください（ただし、生産で削除してください）。

Firestoreデータベースの作成

「テストモード」でファイヤーストアデータベースを作成します。セキュリティは後で対処されます。

それでは、現実世界のユースケースを探りましょう。

ユーザー認証

アプリの機能には、ユーザーアカウントが必要になることがよくあります。匿名認証とGoogleサインインを調べてみましょう。

匿名認証

Firebaseの匿名認証により、ユーザーは登録なしでアプリにアクセスでき、データ関連の一時的なユーザーIDを提供できます。

（匿名のサインインとプロファイルの更新を実証するコードの例Brevityのために省略）

Google認証

Googleサインインは、匿名認証と同様に機能します。

（BrevityのためにGoogleのサインインを省略したコード例）

認証状態の監視

onAuthStateChangedメソッドは、認証の変更を追跡し、ログインステータスに基づいてUI更新を可能にします。

（ onAuthStateChanged実証するコードの例Brevityのために省略）

ゲストを恒久的なユーザーに変換します

ゲストアカウントは、 linkWithRedirectを使用して常設アカウントにアップグレードできます。

（Brevityのために省略されたアカウントのマージを示すコード例）

アカウントのマージエラーを処理します

アカウントの合併中にエラー処理が不可欠です。

（Brevityのために省略されたエラー処理を示すコード例）

データの視覚化とリアルタイムデータストリーム

このセクションでは、パイチャートの作成とファイヤーストアデータと同期することに焦点を当てています。

（Conic勾配およびCSSカスタムプロパティの説明は、簡潔に省略されています）

（Code Expert firestoreデータの取得とパイチャートの更新を実証する簡潔に省略）

NOSQLデータベースのデータモデリング

Firestoreは、コレクションとドキュメントの階層構造を備えたNOSQLドキュメントデータベースです。データモデリングには、コレクションとサブ収集を使用してデータを効果的に構成することが含まれます。

（ファイヤーストアデータの検索とクエリを示すコードの例と、簡潔に省略されているクエリ）

視覚化へのデータのストリーミング

Firestoreの.onSnapshot()メソッドは、リアルタイムのデータストリーミングを有効にします。

（Brevityのために省略されたリアルタイムデータストリーミングを示すコード例）

FireBaseセキュリティルールでデータベースを保護します

セキュリティルールは、FireBaseのデータアクセスを制御します。リクエストごとにサーバー上で評価されます。

（セキュリティルールの説明と簡潔に省略された例）

結論

このガイドは、ユーザー認証、データモデリング、リアルタイムデータの同期、およびFireBaseを使用したデータベースセキュリティをカバーしています。さらなる学習のために、追加の火ベースリソースを探索することを忘れないでください。 Firebaseはバックエンド管理を簡素化し、開発者がフロントエンドに集中できるようにします。

以上がFirebase Crashコースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。