Firebase-概要

Firebaseの公式ドキュメントによると-

'__Firebaseは、データストレージ、ユーザー認証、静的ホスティングなどを含むアプリのバックエンドを強化できます。並外れたユーザーエクスペリエンスの作成に焦点を当てます。残りは私たちが処理します。 Android、iOS、およびJavaScript SDKを使用して、クロスプラットフォームのネイティブモバイルおよびWebアプリを構築します。サーバーサイドライブラリまたはREST APIを使用して、Firebaseを既存のバックエンドに接続することもできます。_

Firebaseの機能

リアルタイムデータベース-FirebaseはJSONデータをサポートし、それに接続するすべてのユーザーは変更のたびにライブアップデートを受け取ります。
認証-匿名、パスワード、またはさまざまなソーシャル認証を使用できます。
ホスティング-アプリケーションは、Firebaseサーバーへの安全な接続を介して展開できます。

Firebaseの利点

シンプルで使いやすいです。複雑な構成は必要ありません。
データはリアルタイムです。つまり、すべての変更が接続されたクライアントを自動的に更新します。
Firebaseはシンプルなコントロールダッシュボードを提供します。
選択できる便利なサービスがいくつかあります。

Firebaseの制限

Firebaseの無料プランは、50接続と100 MBのストレージに制限されています。

次の章では、Firebaseの環境設定について説明します。

Firebase-環境設定

この章では、Firebaseを既存のアプリケーションに追加する方法を示します。 NodeJS が必要です。まだお持ちでない場合は、次の表のリンクを確認してください。

Sr.No.	Software & Description
1	NodeJS and NPM NodeJSは、Firebase開発に必要なプラットフォームです。リンク：/nodejs/nodejs_environment_setup [NodeJS Environment Setup]を確認してください。

ステップ1-Firebaseアカウントを作成する

Firebaseアカウントはhttps://www.firebase.com/[こちら]で作成できます。

ステップ2-Firebaseアプリを作成する

ダッシュボードページから新しいアプリを作成できます。次の画像は、作成したアプリを示しています。 [アプリの管理]ボタンをクリックして、アプリを入力できます。

Firebase環境のセットアップ

ステップ3a-基本的なHTML/jsアプリを作成する

アプリを配置するフォルダーを作成するだけです。そのフォルダー内に、 indexl および index.js ファイルが必要です。 Firebaseをアプリのヘッダーに追加します。

インデックス

<html>
   <head>
      <script src = "https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
      <script type = "text/javascript" src = "index.js"></script>
   </head>

   <body>

   </body>
</html>

ステップ3b-NPMまたはBowerを使用する

既存のアプリを使用する場合は、Firebase NPMまたはBowersパッケージを使用できます。アプリのルートフォルダーから次のコマンドのいずれかを実行します。

npm install firebase --save

bower install firebase

Firebase-データ

FirebaseデータはJSONオブジェクトを表しています。 Firebaseダッシュボードからアプリを開く場合、 + 記号をクリックして、データを手動で追加できます。

単純なデータ構造を作成します。以下の画像を確認できます。

Firebase Data Simple

前の章では、Firebaseをアプリに接続しました。これで、Firebaseをコンソールに記録できます。

console.log(firebase)

Firebase Data Log

プレーヤーのコレクションへの参照を作成できます。

var ref = firebase.database().ref('players');

console.log(ref);

コンソールで次の結果を確認できます。

Firebase Data Players Log

Firebase-配列

この章では、Firebaseの配列表現について説明します。前の章と同じデータを使用します。

Firebase Arrays Simple

次のJSONツリーをプレーヤーのコレクションに送信することにより、このデータを作成できます。

['john', 'amanda']

これは、Firebaseが配列を直接サポートしていないため、キー名として整数を持つオブジェクトのリストを作成するためです。

配列を使用しない理由は、Firebaseがリアルタイムデータベースとして機能し、数人のユーザーが同時に配列を操作すると、配列インデックスが絶えず変化するため、結果が問題になる可能性があるためです。

Firebaseによる処理方法では、キー（インデックス）は常に同じままです。 john を削除しても、 amanda にはキー（インデックス）1が残っています。

Firebase Arrays Changed

Firebase-データの書き込み

この章では、Firebaseにデータを保存する方法を示します。

Set

*set* メソッドは、指定されたパスにデータを書き込むか、置き換えます。 プレーヤーのコレクションへの参照を作成し、2人のプレーヤーを設定しましょう。

var playersRef = firebase.database().ref("players/");

playersRef.set ({
   John: {
      number: 1,
      age: 30
   },

   Amanda: {
      number: 2,
      age: 20
   }
});

次の結果が表示されます。

Firebase Write Data Set

更新

同様の方法でFirebaseデータを更新できます。 players/john パスの使用方法に注目してください。

var johnRef = firebase.database().ref("players/John");

johnRef.update ({
   "number": 10
});

アプリを更新すると、Firebaseデータが更新されていることがわかります。

Firebase Write Data Update

Firebase-リストデータの書き込み

最後の章では、Firebaseでデータを書き込む方法を示しました。データの一意の識別子が必要な場合があります。データに一意の識別子を作成する場合は、setメソッドの代わりにpushメソッドを使用する必要があります。

プッシュ方式

push（）*メソッドは、データがプッシュされるときに一意のIDを作成します。前の章から一意のIDを使用してプレーヤーを作成する場合、以下のコードスニペットを使用できます。

var ref = new Firebase('https://tutorialsfirebase.firebaseio.com');

var playersRef = ref.child("players");
playersRef.push ({
   name: "John",
   number: 1,
   age: 30
});

playersRef.push ({
   name: "Amanda",
   number: 2,
   age: 20
});

これで、データの見た目が変わります。名前は、他のプロパティと同様に名前と値のペアになります。

Firebase Write List Data Push

キーメソッド

key（）*メソッドを使用して、Firebaseから任意のキーを取得できます。たとえば、コレクション名を取得する場合、次のスニペットを使用できます。

var ref = new Firebase('https://tutorialsfirebase.firebaseio.com');

var playersRef = ref.child("players");

var playersKey = playersRef.key();
console.log(playersKey);

コンソールは、コレクション名（プレイヤー）を記録します。

Firebase Write List Data Key

これについては、次の章で詳しく説明します。

Firebase-トランザクションデータの書き込み

トランザクションデータは、データベースからデータを返し、それを使用して計算を行い、保存する必要がある場合に使用されます。

プレイヤーリスト内にプレイヤーが1人いるとします。

Firebase Write Transactional Data Start

プロパティを取得し、1歳を追加してFirebaseに返します。

*amandaRef* はコレクションから年齢を取得しているため、トランザクションメソッドを使用できます。 現在の年齢を取得し、1年を追加してコレクションを更新します。

var ref = new Firebase('https://tutorialsfirebase.firebaseio.com');

var amandaAgeRef = ref.child("players").child("-KGb1Ls-gEErWbAMMnZC").child('age');

amandaAgeRef.transaction(function(currentAge) {
   return currentAge + 1;
});

このコードを実行すると、年齢の値が 21 に更新されていることがわかります。

Firebase Write Transactional Data Update

Firebase-データの読み取り

この章では、Firebaseデータの読み取り方法を示します。次の画像は、読み取りたいデータを示しています。

Firebase Read Data DB

on（）メソッドを使用してデータを取得できます。このメソッドは、イベントタイプを *"値" として取得し、データの*スナップショット*を取得します。スナップショットに* val（）*メソッドを追加すると、データのJavaScript表現が取得されます。

例

次の例を考えてみましょう。

var ref = firebase.database().ref();

ref.on("value", function(snapshot) {
   console.log(snapshot.val());
}, function (error) {
   console.log("Error: " + error.code);
});

次のコードを実行すると、コンソールにデータが表示されます。

Firebase Read Data Log

次の章では、データの読み取りに使用できる他のイベントタイプについて説明します。

Firebase-イベントタイプ

Firebaseは、データを読み取るためのいくつかの異なるイベントタイプを提供します。最も一般的に使用されるもののいくつかを以下に説明します。

値

最初のイベントタイプは*値*です。前の章で、値の使用方法を示しました。このイベントタイプは、データが変更されるたびにトリガーされ、子を含むすべてのデータを取得します。

child_added

このイベントタイプは、すべてのプレーヤーに対して1回、新しいプレーヤーがデータに追加されるたびにトリガーされます。リストから追加されたプレーヤーと前のプレーヤーにアクセスできるため、リストデータの読み取りに役立ちます。

例

次の例を考えてみましょう。

var playersRef = firebase.database().ref("players/");

playersRef.on("child_added", function(data, prevChildKey) {
   var newPlayer = data.val();
   console.log("name: " + newPlayer.name);
   console.log("age: " + newPlayer.age);
   console.log("number: " + newPlayer.number);
   console.log("Previous Player: " + prevChildKey);
});

次の結果が得られます。

イベントタイプ子追加ログ

Bobという名前の新しいプレーヤーを追加すると、更新されたデータが取得されます。

イベントタイプ子追加更新ログ

child_changed

このイベントタイプは、データが変更されたときにトリガーされます。

例

次の例を考えてみましょう。

var playersRef = firebase.database().ref("players/");

playersRef.on("child_changed", function(data) {
   var player = data.val();
   console.log("The updated player name is " + player.name);
});

Firebaseで Bob を Maria に変更して、更新を取得できます。

イベントタイプ子変更ログ

child_removed

削除されたデータにアクセスしたい場合は、 child_removed イベントタイプを使用できます。

例

var playersRef = firebase.database().ref("players/");

playersRef.on("child_removed", function(data) {
   var deletedPlayer = data.val();
   console.log(deletedPlayer.name + " has been deleted");
});

これで、FirebaseからMariaを削除して通知を取得できます。

イベントタイプ子削除ログ

Firebase-コールバックの切り離し

この章では、Firebaseでコールバックをデタッチする方法を示します。

イベントタイプのコールバックを切断する

*value* イベントタイプの関数のコールバックをデタッチしたいとしましょう。

例

var playersRef = firebase.database().ref("players/");

ref.on("value", function(data) {
   console.log(data.val());
}, function (error) {
   console.log("Error: " + error.code);
});

off（）メソッドを使用する必要があります。これにより、 *value イベントタイプのコールバックがすべて削除されます。

playersRef.off("value");

すべてのコールバックを切り離す

すべてのコールバックをデタッチしたいときは、次を使用できます-

playersRef.off();

Firebase-クエリ

Firebaseは、データを順序付けるさまざまな方法を提供します。この章では、簡単なクエリの例を示します。前の章と同じデータを使用します。

Firebaseクエリデータ

子供による注文

データを名前順に並べ替えるには、次のコードを使用できます。

例

次の例を考えてみましょう。

var playersRef = firebase.database().ref("players/");

playersRef.orderByChild("name").on("child_added", function(data) {
   console.log(data.val().name);
});

名前はアルファベット順に表示されます。

Firebase Queries Order By Child

キーで注文

同様の方法でキーごとにデータを注文できます。

例

次の例を考えてみましょう。

var playersRef = firebase.database().ref("players/");

playersRef.orderByKey().on("child_added", function(data) {
   console.log(data.key);
});

出力は次のようになります。

Firebaseクエリキー順

値順

データを値で並べ替えることもできます。 Firebaseに評価コレクションを追加しましょう。

Firebaseクエリの評価データ

これで、各プレーヤーの値でデータを注文できます。

例

次の例を考えてみましょう。

var ratingRef = firebase.database().ref("ratings/");

ratingRef.orderByValue().on("value", function(data) {

   data.forEach(function(data) {
      console.log("The " + data.key + " rating is " + data.val());
   });

});

出力は次のようになります。

Firebaseクエリ評価ログ

Firebase-データのフィルタリング

Firebaseには、データをフィルタリングするいくつかの方法があります。

最初と最後に制限

最初と最後の制限について理解しましょう。

limitToFirst メソッドは、最初のアイテムから始まる指定された数のアイテムを返します。
limitToLast メソッドは、最後の項目から始まる指定された数の項目を返します。

この例は、これがどのように機能するかを示しています。データベースには2人のプレーヤーしかないため、クエリを1人のプレーヤーに制限します。

例

次の例を考えてみましょう。

var firstPlayerRef = firebase.database().ref("players/").limitToFirst(1);

var lastPlayerRef = firebase.database().ref('players/').limitToLast(1);

firstPlayerRef.on("value", function(data) {
   console.log(data.val());
}, function (error) {
   console.log("Error: " + error.code);
});

lastPlayerRef.on("value", function(data) {
   console.log(data.val());
}, function (error) {
   console.log("Error: " + error.code);
});

コンソールは、最初のクエリから最初のプレーヤーを記録し、2番目のクエリから最後のプレーヤーを記録します。

Firebase Filtering Data Limit to First Last

その他のフィルター

他のFirebaseフィルタリング方法も使用できます。 * startAt（）、 endAt（）、および equalTo（）は、順序付けメソッドと組み合わせることができます。この例では、 orderByChild（）*メソッドと組み合わせます。

例

次の例を考えてみましょう。

var playersRef = firebase.database().ref("players/");

playersRef.orderByChild("name").startAt("Amanda").on("child_added", function(data) {
   console.log("Start at filter: " + data.val().name);
});

playersRef.orderByChild("name").endAt("Amanda").on("child_added", function(data) {
   console.log("End at filter: " + data.val().name);
});

playersRef.orderByChild("name").equalTo("John").on("child_added", function(data) {
   console.log("Equal to filter: " + data.val().name);
});

playersRef.orderByChild("age").startAt(20).on("child_added", function(data) {
   console.log("Age filter: " + data.val().name);
});

最初のクエリは、要素を名前で並べ、 Amanda という名前のプレーヤーからフィルターします。コンソールは両方のプレイヤーを記録します。この名前でクエリを終了しているため、2番目のクエリは「Amanda」を記録します。 3番目は「John」を記録します。これは、その名前のプレーヤーを検索しているためです。

4番目の例は、フィルターを「年齢」値と組み合わせる方法を示しています。文字列の代わりに、年齢が数値で表されるため、* startAt（）*メソッド内で数値を渡します。

Firebase Filtering Data Start End Equal

Firebase-ベストプラクティス

この章では、Firebaseのベストプラクティスについて説明します。

データのネストを避ける

Firebaseからデータを取得すると、すべての子ノードが取得されます。これが、深いネストがベストプラクティスとは言われない理由です。

データの非正規化

深いネスト機能が必要な場合は、いくつかの異なるコレクションを追加することを検討してください。データの複製を追加し、必要なものを取得するために複数のリクエストを使用する必要がある場合でも。

Firebase-メール認証

この章では、Firebase Email/Password認証の使用方法を示します。

ユーザーを作成

ユーザーを認証するには、* createUserWithEmailAndPassword（email、password）*メソッドを使用できます。

例

次の例を考えてみましょう。

var email = "myemail@email.com";
var password = "mypassword";

firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
   console.log(error.code);
   console.log(error.message);
});

Firebaseダッシュボードを確認して、ユーザーが作成されたことを確認できます。

Firebaseメール認証ユーザー

サインイン

サインインプロセスはほとんど同じです。 * signInWithEmailAndPassword（email、password）*を使用してユーザーにサインインします。

例

次の例を考えてみましょう。

var email = "myemail@email.com";
var password = "mypassword";

firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
   console.log(error.code);
   console.log(error.message);
});

サインアウト

最後に、* signOut（）*メソッドを使用してユーザーをログアウトできます。

例

次の例を考えてみましょう。

firebase.auth().signOut().then(function() {
   console.log("Logged out!")
}, function(error) {
   console.log(error.code);
   console.log(error.message);
});

Firebase-Google認証

この章では、FirebaseでGoogle認証を設定する方法を示します。

ステップ1-Google認証を有効にする

Firebaseダッシュボードを開き、左側のメニューで[認証]をクリックします。利用可能なメソッドのリストを開くには、タブメニューの[ SIGN_IN_METHODS ]をクリックする必要があります。

これで、リストから Google を選択し、有効にして保存できます。

ステップ2-ボタンを作成する

*indexl* 内に、2つのボタンを追加します。

インデックス

<button onclick = "googleSignin()">Google Signin</button>
<button onclick = "googleSignout()">Google Signout</button>

ステップ3-サインインとサインアウト

このステップでは、サインインおよびサインアウト機能を作成します。 * signInWithPopup（）および signOut（）*メソッドを使用します。

例

次の例を考えてみましょう。

var provider = new firebase.auth.GoogleAuthProvider();

function googleSignin() {
   firebase.auth()

   .signInWithPopup(provider).then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;

      console.log(token)
      console.log(user)
   }).catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;

      console.log(error.code)
      console.log(error.message)
   });
}

function googleSignout() {
   firebase.auth().signOut()

   .then(function() {
      console.log('Signout Succesfull')
   }, function(error) {
      console.log('Signout Failed')
   });
}

ページを更新したら、[Googleサインイン]ボタンをクリックして、Googleポップアップをトリガーできます。サインインが成功すると、開発者コンソールはユーザーにログインします。

Googleサインアウト*ボタンをクリックして、アプリからログアウトすることもできます。コンソールは、ログアウトが成功したことを確認します。

Firebase Google認証ログ

Firebase-Facebook認証

この章では、Firebase Facebook認証でユーザーを認証します。

ステップ1-Facebook認証を有効にする

Firebaseダッシュボードを開き、サイドメニューで[認証]をクリックする必要があります。次に、タブバーで SIGN-IN-METHOD を選択する必要があります。 Facebook認証を有効にし、ステップ2の完了時に App ID と App Secret を追加する必要があるため、これを開いたままにします。

ステップ2-Facebookアプリを作成する

Facebook認証を有効にするには、Facebookアプリを作成する必要があります。このリンクをクリックして開始します。アプリが作成されたら、 App ID と App Secret をFirebaseページにコピーする必要があります。Firebaseページはステップ1で開いたままにします。また、このウィンドウからFacebookアプリに OAuthリダイレクトURI をコピーする必要があります。 Facebookアプリダッシュボードのサイドメニュー内に + Add Product があります。

[* Facebookログイン*]を選択すると、サイドメニューに表示されます。 Firebaseから OAuth Redirect URI をコピーする必要がある入力フィールド Valid OAuth redirect URIs があります。

ステップ3-Facebook SDKへの接続

*indexl* の *body* タグの先頭に次のコードをコピーします。 FacebookダッシュボードのアプリIDに *'APP_ID'* を必ず置き換えてください。

例

次の例を考えてみましょう。

<script>
   window.fbAsyncInit = function() {
      FB.init ({
         appId      : 'APP_ID',
         xfbml      : true,
         version    : 'v2.6'
      });
   };

   (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
   } (document, 'script', 'facebook-jssdk'));

</script>

ステップ4-ボタンを作成する

最初の3つのステップですべてを設定しました。ログインとログアウト用の2つのボタンを作成できるようになりました。

インデックス

<button onclick = "facebookSignin()">Facebook Signin</button>
<button onclick = "facebookSignout()">Facebook Signout</button>

ステップ5-認証関数の作成

これが最後のステップです。 index.js を開き、次のコードをコピーします。

index.js

var provider = new firebase.auth.FacebookAuthProvider();

function facebookSignin() {
   firebase.auth().signInWithPopup(provider)

   .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;

      console.log(token)
      console.log(user)
   }).catch(function(error) {
      console.log(error.code);
      console.log(error.message);
   });
}

function facebookSignout() {
   firebase.auth().signOut()

   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed')
   });
}

Firebase-Twitter認証

この章では、Twitter認証の使用方法について説明します。

ステップ1-Twitterアプリを作成する

このhttps://apps.twitter.com [link]でTwitterアプリを作成できます。アプリが作成されたら、キーとアクセストークン*をクリックして、 APIキー*と* APIシークレット*を見つけます。これは手順2で必要になります。

ステップ2-Twitter認証を有効にする

Firebaseダッシュボードのサイドメニューで、[認証]をクリックする必要があります。次に、 SIGN-IN-METHOD タブを開きます。 Twitterをクリックして有効にします。手順1から* APIキー*および* APIシークレット*を追加する必要があります。

次に、*コールバックURL *をコピーして、Twitterアプリに貼り付ける必要があります。 [設定]タブをクリックすると、TwitterアプリのコールバックURLを見つけることができます。

ステップ3-ボタンを追加する

このステップでは、 indexl の body タグ内に2つのボタンを追加します。

インデックス

<button onclick = "twitterSignin()">Twitter Signin</button>
<button onclick = "twitterSignout()">Twitter Signout</button>

ステップ4-認証機能

これで、Twitter認証用の関数を作成できます。

index.js

var provider = new firebase.auth.TwitterAuthProvider();

function twitterSignin() {
   firebase.auth().signInWithPopup(provider)

  .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;

      console.log(token)
      console.log(user)
   }).catch(function(error) {
      console.log(error.code)
      console.log(error.message)
   });
}

function twitterSignout() {
   firebase.auth().signOut()

   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed!')
   });
}

アプリを起動すると、2つのボタンをクリックしてサインインまたはサインアウトできます。コンソールは、認証が成功したことを確認します。

Firebase Twitter認証ログ

Firebase-Github認証

この章では、GitHub APIを使用してユーザーを認証する方法を示します。

ステップ1-GitHub認証を有効にする

Firebaseダッシュボードを開き、サイドメニューの[認証]をクリックしてから、タブバーの[サインイン方法]をクリックします。 GitHub認証を有効にして、 Callback URL をコピーする必要があります。これは手順2で必要になります。ステップ2を完了したら*クライアントID *と*クライアントシークレット*を追加する必要があるため、このタブは開いたままにしておくことができます。

ステップ2-Githubアプリを作成する

このhttps://github.com/settings/developers[link]に従ってGitHubアプリを作成してください。 Firebaseから Callback URL を Authorization callback URL フィールドにコピーする必要があります。アプリを作成したら、 Client Key と Client Secret をGitHubアプリからFirebaseにコピーする必要があります。

ステップ3-ボタンを作成する

*body* タグに2つのボタンを追加します。

インデックス

<button onclick = "githubSignin()">Github Signin</button>
<button onclick = "githubSignout()">Github Signout</button>

ステップ4-認証関数の作成

*index.js* ファイル内にサインインおよびサインアウト用の関数を作成します。

index.js

var provider = new firebase.auth.GithubAuthProvider();

function githubSignin() {
   firebase.auth().signInWithPopup(provider)

   .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;

      console.log(token)
      console.log(user)
   }).catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;

      console.log(error.code)
      console.log(error.message)
   });
}

function githubSignout(){
   firebase.auth().signOut()

   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed')
   });
}

これで、ボタンをクリックして認証をトリガーできます。コンソールに認証が成功したことが表示されます。

Firebase Github認証ログ

Firebase-匿名認証

この章では、ユーザーを匿名で認証します。

ステップ1-匿名認証を有効にする

これは、以前の章と同じプロセスです。 Firebaseダッシュボードを開いて、サイドメニューから Auth をクリックし、タブバー内で SIGN-IN-METHOD をクリックする必要があります。匿名認証を有効にする必要があります。

ステップ2-サインイン機能

この認証には* signInAnonymously（）*メソッドを使用できます。

例

次の例を考えてみましょう。

firebase.auth().signInAnonymously()
.then(function() {
   console.log('Logged in as Anonymous!')

   }).catch(function(error) {
   var errorCode = error.code;
   var errorMessage = error.message;
   console.log(errorCode);
   console.log(errorMessage);
});

Firebase-オフライン機能

この章では、Firebaseの接続状態を処理する方法を示します。

接続を確認する

次のコードを使用して、接続値を確認できます。

index.js

var connectedRef = firebase.database().ref(".info/connected");

connectedRef.on("value", function(snap) {
   if (snap.val() === true) {
      alert("connected");
   } else {
      alert("not connected");
   }
});

アプリを実行すると、接続に関するポップアップが表示されます。

Firebase Offline Popup

上記の機能を使用すると、接続状態を追跡し、それに応じてアプリを更新できます。

Firebase-セキュリティ

Firebaseのセキュリティは、JSONのようなオブジェクトをセキュリティルール内に設定することで処理されます。セキュリティルールは、サイドメニューの[データベース]をクリックし、タブバーの[ルール]をクリックすると見つかります。

この章では、Firebaseデータを保護する方法を示す簡単な例をいくつか紹介します。

読み書き

Firebaseセキュリティルール内で定義されている次のコードスニペットは、同じ uid で認証されたユーザーの /users/'$ uid'/ への書き込みアクセスを許可しますが、誰でも読むことができます。

例

次の例を考えてみましょう。

{
   "rules": {
      "users": {

         "$uid": {
            ".write": "$uid === auth.uid",
            ".read": true
         }

      }
   }
}

検証

次の例を使用して、データを文字列に適用できます。

例

{
   "rules": {

      "foo": {
         ".validate": "newData.isString()"
      }

   }
}

この章では、Firebaseセキュリティルールの表面のみを取り上げました。重要なことは、これらのルールがどのように機能するかを理解することです。そのため、アプリ内でルールを組み合わせることができます。

Firebase-展開

この章では、Firebaseサーバーでアプリをホストする方法を示します。

始める前に、テキストを indexl 本文タグに追加してみましょう。この例では、次のテキストを追加します。

<h1>WELCOME TO FIREBASE TUTORIALS APP</h1>

ステップ1-Firebaseツールをインストールする

コマンドプロンプト*ウィンドウでfirebaseツールをグローバルにインストールする必要があります。

npm install -g firebase-tools

ステップ2-Firebaseアプリを初期化する

まず、*コマンドプロンプト*でFirebaseにログインする必要があります。

firebase login

コマンドプロンプト*でアプリのルートフォルダーを開き、次のコマンドを実行します。

firebase init

このコマンドはアプリを初期化します。

注意-デフォルト設定を使用した場合、 public フォルダが作成され、このフォルダ内の indexl がアプリの開始点になります。回避策として、パブリックフォルダー内にアプリファイルをコピーできます。

ステップ3-Firebaseアプリを展開する

これがこの章の最後のステップです。 *コマンドプロンプト*から次のコマンドを実行して、アプリをデプロイします。

firebase deploy

このステップの後、コンソールはアプリのFirebase URLを記録します。この例では、https://tutorialsfirebase.firebaseapp.com/[https://tutorialsfirebase.firebaseapp.com]と呼ばれます。ブラウザでこのリンクを実行して、アプリを表示できます。

Firebase Deploying

Firebase-quick-guide

Firebase-概要

Firebaseの機能

Firebaseの利点

Firebaseの制限

Firebase-環境設定

ステップ1-Firebaseアカウントを作成する

ステップ2-Firebaseアプリを作成する

ステップ3a-基本的なHTML/jsアプリを作成する

インデックス

ステップ3b-NPMまたはBowerを使用する

Firebase-データ

Firebase-配列

Firebase-データの書き込み

Set

更新

Firebase-リストデータの書き込み

プッシュ方式

キーメソッド

Firebase-トランザクションデータの書き込み

Firebase-データの読み取り

例

Firebase-イベントタイプ

値

child_added

例

child_changed

例

child_removed

例

Firebase-コールバックの切り離し

イベントタイプのコールバックを切断する

例

すべてのコールバックを切り離す

Firebase-クエリ

子供による注文

例

キーで注文

例

値順

例

Firebase-データのフィルタリング

最初と最後に制限

例

その他のフィルター

例

Firebase-ベストプラクティス

データのネストを避ける

データの非正規化

Firebase-メール認証

ユーザーを作成

例

サインイン

例

サインアウト

例

Firebase-Google認証

ステップ1-Google認証を有効にする

ステップ2-ボタンを作成する

インデックス

ステップ3-サインインとサインアウト

例

Firebase-Facebook認証

ステップ1-Facebook認証を有効にする

ステップ2-Facebookアプリを作成する

ステップ3-Facebook SDKへの接続

例

ステップ4-ボタンを作成する

インデックス

ステップ5-認証関数の作成

index.js

Firebase-Twitter認証

ステップ1-Twitterアプリを作成する

ステップ2-Twitter認証を有効にする

ステップ3-ボタンを追加する

インデックス

ステップ4-認証機能

index.js

Firebase-Github認証

ステップ1-GitHub認証を有効にする