Firebaseを使用してAngularJSアプリケーションを作成する

この記事では、データウェアハウスとしてのAngularJSとFirebaseの組み合わせについてお話したいと思います。



Habr上のAngularJSについてはたくさん書かれていますが、Firebaseについてはかなり書かれています。 したがって、私はこのギャップを埋めることにしました。 Firebaseとは何ですか？



Firebaseは、データをリアルタイムで保存および同期するためのAPI（このデータが保存されているサーバー）を提供する強力なサービスです。 また、すぐに使用できるように、さまざまなプラットフォームとフレームワークのユーザー認証とサポートがあります。 詳細については、 公式ウェブサイトをご覧ください 。



Firebaseは、AngularJS- AngularFire用の優れたライブラリも提供します。



AngularJSとFirebaseとの優れた双方向データバインディングを使用して、3方向のデータ同期を取得できます。 ただし、最初にまず最初に。

はじめに

まず、無料のアカウントを作成する必要があります。 これは、リンクwww.firebase.com/signupをクリックして実行できます。 登録後、一意のURLを受け取ります。これは、将来、データの保存と同期に使用されます。



次のステップは、プロジェクトにスクリプトを追加することです。 AngularFireを使用するには、次のファイルを含める必要があります。

<!-- AngularJS --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <!-- Firebase --> <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script> <!-- AngularFire --> <script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

FirebaseとAngularFireも、bowerを使用してインストールできます。

 bower install firebase angularfire
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

必要なスクリプトを接続したら、Firebaseを依存関係としてAngularJSプロジェクトに追加できます。



まず、モジュールに依存関係を追加する必要があります。

 var app = angular.module("sampleApp", ["firebase"]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、コントローラー、ディレクティブ、およびサービスで使用できます。

 app.controller("SampleCtrl", ["$scope", "$firebase", function($scope, $firebase) { var ref = new Firebase("https://<your-firebase>.firebaseio.com/"); // create an AngularFire reference to the data var sync = $firebase(ref); // download the data into a local object $scope.data = sync.$asObject(); } ]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

三角バインディング

AngularJSは、JavaScriptモデルとDOM間の双方向メロンバインディングで知られています。 FarebaseをAngularJSと組み合わせて使用​​すると、いわゆる「スリーウェイバインディング」を整理できます。これにより、JavaScript、DOM、Firebaseモデルの変更をリアルタイムで同期できます。



これを行うには、$ asObject（）メソッドを使用して同期オブジェクトを作成し、$ bindTo（）メソッドを使用して$スコープの変数にバインドします。 サンプルコードを次に示します。

 var app = angular.module("sampleApp", ["firebase"]); app.controller("SampleCtrl", function($scope, $firebase) { var ref = new Firebase("https://<your-firebase>.firebaseio.com/data"); var sync = $firebase(ref); // download the data into a local object var syncObject = sync.$asObject(); // synchronize the object with a three-way data binding // click on `index.html` above to see it used in the DOM! syncObject.$bindTo($scope, "data"); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コレクションを操作する

3方向のデータバインディングは、単純なキー/値オブジェクトでうまく機能しますが、コレクション（配列）を操作する必要がある場合にタスクが発生することがよくあります。 このために、$ asArray（）メソッドを使用できます。



サーバーからコレクションを取得するには、$ asArrayメソッドを呼び出します。このメソッドは読み取り専用で、$スコープに追加します。

 var app = angular.module("sampleApp", ["firebase"]); app.controller("SampleCtrl", function($scope, $firebase) { var ref = new Firebase("https://<your-firebase>.firebaseio.com/messages"); var sync = $firebase(ref); // create a synchronized array for use in our HTML code $scope.messages = sync.$asArray(); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

配列がサーバーとクライアントと同時に同期されるという事実を考えると、その変更はデータの整合性を損なう可能性があります（間違ったレコードを管理することによりデータを損傷します）。したがって、push（）およびsplice（）メソッドを使用して変更できません。



これを行うために、AngularFireは配列を操作するための一連のメソッドを提供しています（$ add、$ save、$ remove）。 データ配列の同期の例を次に示します。

 var app = angular.module("sampleApp", ["firebase"]); app.controller("SampleCtrl", function($scope, $firebase) { var ref = new Firebase("https://<your-firebase>.firebaseio.com/messages"); var sync = $firebase(ref); $scope.messages = sync.$asArray(); $scope.addMessage = function(text) { $scope.messages.$add({text: text}); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

認証を追加する

Firebaseは、ユーザーデータ管理ソリューションと完全なクライアント側認証を提供する認証サービスを提供します。 Firebaseは、すぐに使用できるEメールとパスワードを使用した匿名認証、および一般的なOAuthプロバイダー（Facebook、Github、Google、Twitter）を使用した認証をサポートしています。



AngularFireライブラリは、$ firebaseAuthというサービスを提供します。これは、Firebaseライブラリが提供する認証方法のラッパーです。 このサービスは、依存関係としてサービス、コントローラー、およびディレクティブに追加できます。 Facebookを使用した認証の例を次に示します。

 app.controller("SampleCtrl", ["$scope", "$firebaseAuth", function($scope, $firebaseAuth) { var ref = new Firebase("https://<your-firebase>.firebaseio.com/"); var auth = $firebaseAuth(ref); auth.$authWithOAuthPopup("facebook").then(function(authData) { console.log("Logged in as:", authData.uid); }).catch(function(error) { console.error("Authentication failed: ", error); }); } ]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

認証の詳細については、 公式Webサイトを参照してください 。

次は？

現在、Firebaseをデータウェアハウスとして使用するプロジェクトに取り組んでいます。 次の記事では、このサービスを実際のプロジェクトにどのように適用したか、およびその結果についてお話したいと思います。