• ホームページ
  • 記事
  • 全般的
  • リアルタイムのマルチプラットフォームモバイルアプリケーションの構築：IonicFrameworkとFirebaseを使用した例

リアルタイムのマルチプラットフォームモバイルアプリケーションの構築：IonicFrameworkとFirebaseを使用した例

公開: 2022-03-11

スマートフォンアプリケーションを作成するときに企業が直面する主な問題の1つは、さまざまなプラットフォーム間でネイティブアプリケーションを構築するための乗法コストです。 精通したフロントエンド開発者は、この問題の解決に役立つことを約束するいくつかのハイブリッドプラットフォームの開発に注目していますが、Ionic FrameworkとFirebaseは動的なデュオであり、JavaScriptとHTML5を使用してリアルタイムのスマートフォンアプリケーションを構築する際に驚くほどの柔軟性を提供します。 。

このチュートリアルでは、これらのマルチプラットフォームモバイル開発ツールの機能を紹介し、IonicとFirebaseの例もいくつか提供します。

IonicとFirebaseを組み合わせると、優れたマルチプラットフォーム開発ソリューションになります。

（注：この記事は、AngularJSフレームワークの基本にある程度精通していることを前提としています。これは、その背景がない人のためのAngularJSに関するすばらしい紹介記事です。）

Ionicフレームワークの紹介

Ionic Frameworkは、次の3つの主要コンポーネントで構成されています。

  1. モバイルUI用に設計および最適化されたSASSベースのUIフレームワーク。
  2. スケーラブルで高速なアプリケーションを迅速に構築するために使用されるAngularJSフロントエンドJavaScriptフレームワーク。
  3. CSS、HTML、およびJavaScriptを使用するネイティブモバイルアプリケーション用のコンパイラ（CordovaまたはPhoneGap）。

Ionicフレームワークには、すぐに使用できる便利なCSSコンポーネントも多数含まれています。

学習曲線を簡素化し、開発者を迅速に立ち上げて実行するのに役立つ広範なドキュメント、例、およびスタータービデオを提供してくれた、Ionicに敬意を表します。

Firebaseの紹介

Firebaseは、サービスとしてのバックエンドスキーマレスデータシステムであり、カスタムコードを記述しなくても、リアルタイムのデータ同期を提供します。 Firebaseを使用すると、バックエンド開発の多くが廃止され、マルチプラットフォームの開発時間が大幅に短縮されます。

主な機能と利点は次のとおりです。

  1. コードを変更せずにデータを変更します。 すべてのデータ変更は、バックエンドコードの変更を必要とせずに、すぐにクライアントに公開されます。
  2. たくさんのアダプター。 すべての一般的なJavaScriptフレームワーク、およびモバイルプラットフォームSDK用の優れたサポートとドキュメントを備えたアダプターがあります。 （この記事では、FirebaseのAngularJSバインディングであるAngularFireを使用しました。）
  3. 認証のしやすさ。 Firebaseでの認証は、認証方法に関係なく、単一のメソッド呼び出しと同じくらい簡単です。 シンプルなメールとパスワード、Google、Facebook、Twitter、またはGithubベースのログインをサポートします。
  4. オフラインが有効になっています。 すべてのFirebaseデータはオフライン対応であるため、アプリケーションは切断モードで完全に（またはほぼ完全に）機能することができます。 接続が復元されると、アプリケーションは自動的に同期されます。
  5. 構成ダッシュボード。 Firebaseの多く（セキュリティルールなど）は、Firebaseの直感的なダッシュボードインターフェイスを介して簡単に構成できます。
  6. JSON中心。 Firebaseでは、すべてのデータがJSONオブジェクトの形式で保存および取得されます。

Firebaseは、フロントエンドコードをホストするためのクラウドサービスも提供します。これにより、導入とメンテナンスにかなりの時間を費やすことができます。

また、Firebaseがこの10月にGoogleに買収されたことで、注目度と認知度が大幅に向上したことも注目に値します。

簡単な使用例：経費の追跡

ルームメイトはしばしば費用を分担し、必要なときにお互いに頼ります。 それで、ルームメイトが彼らの費用を追跡するのを手伝って、彼らが月末に和解するのを手伝いましょう。

さらに面白くするために、リアルタイムの更新を提供するマルチプラットフォームのモバイルアプリケーションを構築して、発生した経費をそれぞれ監視できるようにしましょう。

このIonicとFirebaseの例は、スムーズなマルチプラットフォームアプリ開発を示しています。

何を構築するかを決定し、ツールを紹介したので、始めましょう。

IonicとFirebaseの使用を開始する

最初に行う必要があるのは、Ionicをインストールすることです。 Ionicスタートガイドページに記載されているインストール手順に従ってください。 （IonicはNodeJSに依存しているため、マシンにまだインストールしていない場合は、手順でそれもインストールする必要があることに注意してください）。

AngularFireの5分間のチュートリアルは、Firebaseに慣れるための最適な場所です。 そして、あなたが「いじくり回す」または私のような触覚学習者である場合は、GitHubから私の実装を引き出して、コードで遊んでみることをお勧めします。

マルチプラットフォームアプリのコーディング

このチュートリアルでは、Ionicインストールの一部として提供されているサンプルtabsアプリをアプリのベースとして使用します。 （サンプルアプリは、コマンドionic start myApp tabsを使用して実行できます。）

お気に入りのIDE（私はWebstormを使用しています）でサンプルtabsアプリを開き、ルームメイトアプリを構築するためにそれを変更してみましょう。

IonicとFirebaseアプリの例では、次の3つの画面が必要です。

Ionic/Firebase画面1Ionic/Firebase画面2Ionic/Firebase画面3

これらの画面を作成する前に、サンプルアプリでデフォルトで提供されている「友達の詳細画面」を次のように削除しましょう。

  1. www/templates/friend-detail.htmlファイルを削除します。
  2. www/js/app.jsで、 friend-detail.htmlの状態を削除（またはコメントアウト）します。
  3. www/js/controllers.jsで、削除した状態で参照されているFriendDetailCtrlコントローラーを削除します。

次に、画面下部のタブセレクターのアイコンとテキストを次のように変更します。

Ionicフレームワークのこのサンプルコードを使用して、アイコンとタブテキストを変更します。

これは、 www/templates/tabs.htmlで次の変更を行うだけで簡単に実行できます。

 <ion-tabs class="tabs-icon-top"> <!-- My Tab --> <ion-tab title="My Expense" icon="icon ion-log-in" href="#/tab/dash"> <ion-nav-view name="tab-dash"></ion-nav-view> </ion-tab> <!-- Friends Tab --> <ion-tab title="Roomie's" icon="icon ion-log-out" href="#/tab/friends"> <ion-nav-view name="tab-friends"></ion-nav-view> </ion-tab> <!-- Account --> <ion-tab title="Account" icon="icon ion-ios7-gear" href="#/tab/account"> <ion-nav-view name="tab-account"></ion-nav-view> </ion-tab> </ion-tabs>

データをFirebaseに接続する前に、リストを作成し、 www/templates/tab-dash.htmlに次のコードを追加して、 expensesという配列にバインドしましょう。

 <ion-view title="My Expenses"> <ion-content> <ion-list> <ion-item ng-repeat="expense in expenses|filter:user.password.email" type="item-text-wrap"> {{expense.label}} <span class="badge badge-balanced">{{expense.cost}}</span> </ion-item> </ion-list> <div class="card assertive"> <div class="item item-text-wrap"> Total Spent <span class="badge badge-positive">{{getTotal()}}</span> </div> </div> </ion-content> <ion-footer-bar> <input ng-model='label' type='text' placeholder='Type a new expense...' /> <input ng-model='cost' type="number" placeholder='$' /> <button class="button icon-left ion-plus" ng-click="addExpense($event)">Add</button> </ion-footer-bar> </ion-view>

また、 www/js/controllers.jsのDashCtrlを拡張して、次のように、 expenses配列、およびaddExpenseメソッドとgetTotalメソッドを含める必要があります。

 .controller('DashCtrl', function($scope) { $scope.expenses = [{ by: 'email', label: 'test', cost: 10 }]; $scope.addExpense = function(e) { $scope.expenses.push({ by: < some email > label: $scope.label, cost: $scope.cost }); $scope.label = ""; $scope.cost = 0; }; $scope.getTotal = function() { var rtnTotal = 0; for (var i = 0; i < $scope.expenses.length; i++) { rtnTotal += $scope.expenses[i].cost; } return rtnTotal; }; })

expenses配列は経費リストに項目を格納するものであり、 addExpense()メソッドはexpenses配列に新しい値を追加し、 getTotal()メソッドは配列内のすべての項目の合計を提供します。

同様の一連の変更をtab-friends.htmlに加える必要があります。 自分でこれを試してみてください。ただし、問題が発生した場合、またはこれが適切に行われたことを確認したい場合は、GitHubの私の実装を参照してください。

Firebaseに接続する

Firebaseアカウントが必要になります。 こちらから無料のFirebase「ハッカープラン」に登録できます。

サインアップすると、 https://<yourfirebase>.firebaseio.comのようなルートURLが届きます。

アプリでFirebaseを有効にするには、アプリに2つの小さなMODが必要です。

まず、次のようにアプリのwww/index.htmlファイルにFirebaseスクリプトを含める必要があります。

 <script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script> <script src='https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js'></script> <script src="js/app.js"></script>

次に、AngularJS 'starter'モジュールのリストに'firebase'を追加して、Firebaseモジュールをアプリケーションに追加する必要があります。

 angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'firebase'])

他のAngularJSモジュールと同様に、Firebaseが有効になりました。

AngularFireの5分間のチュートリアルでは、コントローラーでデータ参照を作成する方法を説明します。 ただし、デモアプリでは、これらの参照を別のサービスに保持することにしました（これにより、ルートURLが変更された場合の保守と更新がはるかに簡単になるため）。 このサービスを作成するには、 www/js/services.jsに以下を追加します。

 .factory('fireBaseData', function($firebase) { var ref = new Firebase("https://luminous-fire-3429.firebaseio.com/"), refExpenses = new Firebase("https://luminous-fire-3429.firebaseio.com/expenses"), refRoomMates = new Firebase("https://luminous-fire-3429.firebaseio.com/room-mates"); return { ref: function() { return ref; }, refExpenses: function() { return refExpenses; }, refRoomMates: function() { return refRoomMates; } } });

上記のコードは、3つの参照URLを追加します。 1つはルート用で、2つはexpensesとroom-matesと名付けたコレクション用です。

Firebaseに新しいコレクションを追加するには、ルートURLの末尾にその名前を追加するだけです。 したがって、必要なexpenses徴収を作成するために必要なのは、次のとおりです。

https://<yourfirebase>.firebaseio.com/expenses

これによりexpensesのコレクションが作成され、オブジェクトの追加を開始できます。

これで、Firebaseからの経費徴収をフックして、以前に作成した「ダミー」の経費配列を置き換えることができます。 これは、 www/js/controllers.jsのDashCtrlを次のように変更することで実行されます。

 .controller('DashCtrl', function($scope, fireBaseData, $firebase) { $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray(); $scope.addExpense = function(e) { $scope.expenses.$add({ by: < someemail > , label: $scope.label, cost: $scope.cost }); $scope.label = ""; $scope.cost = 0; }; $scope.getTotal = function() { var rtnTotal = 0; for (var i = 0; i < $scope.expenses.length; i++) { rtnTotal += $scope.expenses[i].cost; } return rtnTotal; }; })

FriendsCtrlにも同様の変更を加える必要があります。 自分でこれを試してみることを再度お勧めしますが、問題が発生した場合、またはこれが適切に行われたことを確認したい場合は、GitHubの私の実装を参照してください。

2つの異なるクライアントでアプリを実行しているときに機能していることを確認するには、新しい費用を追加して、両方のクライアントのリストに表示されることを確認します。 それがうまくいけば…ウーフー！ これで、IonicアプリをFirebaseに正常に接続できました。

デバイスをシステムに接続し、ionicrunandroidまたはionic emulate iosをionic run androidすることで、さまざまなデバイスでマルチプラットフォームアプリをテストできます。 アプリのテストの詳細については、Ionicのドキュメントを参照してください。

Firebaseによるアカウント管理とセキュリティ

基本的な機能は現在機能していますが、深刻な問題の1つは、アプリが現在完全に安全でないことです。 許可やログインを必要とせずに、世界中があなたの経費を見ることができます。 これは明らかに対処する必要があります。

Firebaseは、「ルール」を使用した強力でありながらシンプルな認証フレームワークを提供します。 Firebaseのルール言語を使用して実行できることはたくさんあります。 （詳細については、Firebaseのセキュリティドキュメントをご覧ください。）

この例では、許可されていないユーザーがデータにアクセスするのをブロックする非常に簡単なルールを作成します。 これを行うには、ルートURLを開き、左側のアクションバーで[セキュリティとルール]をクリックし、以下のコードをルールに貼り付けて、[保存]をクリックします。

 { "rules": { ".read": "auth != null", ".write": "auth != null" } }

ここでアプリケーションを実行すると、データがないことに気付くでしょう。 ブラウザツールを使用してリクエストを検査することもできます。コンソールに、データの表示が許可されていないことを示すメッセージが表示されます。

ユーザーアカウントの作成とログインの有効化

ユーザーに独自のメールとパスワードの組み合わせを作成させるか、既存のGoogle、Facebook、Twitter、またはGithubのログイン資格情報を使用してユーザーを認証できます。 メール/パスワード認証の場合、Firebaseはパスワードの変更やリセットなどのAPIメソッドのフルセットを提供します。Firebaseを使用した認証の詳細については、Firebaseガイドをご覧ください。

デモアプリでは、Firebaseインターフェースを介して2つのユーザーアカウントを作成します。 これは、FirebaseのルートURLに移動し、次の手順を実行することで実行できます。

  1. 左側のアクションバーにある[ログインと認証]をクリックします。
  2. チェックボックスを選択して、電子メールとパスワードの認証を有効にします。
  3. 下にスクロールして、[新しいアカウントの追加フォーム]を見つけます
  4. 「新規ユーザーの追加」を使用してアカウントを追加します。

IonicとFirebaseを使用してマルチプラットフォームアプリケーションを開発する場合は、安全なログインを有効にすることが不可欠です。

ユーザーのログインインターフェイスを有効にするには、最初に次のコードをwww/templates/tab-account.htmlに追加します。

 <ion-view title="Account"> <ion-content> <div class="list" ng-show="showLoginForm"> <label class="item item-input"> <span class="input-label">Email</span><input type="text" ng-model="em"/> </label> <label class="item item-input"> <span class="input-label">Password</span><input type="password" ng-model="pwd"/> </label> <button class="button button-block button-positive" ng-click="login(em, pwd)">Login</button> </div> <div class="card" ng-hide="showLoginForm"> <div class="item item-text-wrap">You are logged in as {{user.password.email}}</div> </div> <button class="button button-stable" ng-click="logout()" ng-hide="showLoginForm">Logout</button> </ion-content> </ion-view>

次に、 www/controller.jsのAccountCtrlに以下を追加します。

 .controller('AccountCtrl', function($scope, fireBaseData) { $scope.showLoginForm = false; //Checking if user is logged in $scope.user = fireBaseData.ref().getAuth(); if (!$scope.user) { $scope.showLoginForm = true; } //Login method $scope.login = function (em, pwd) { fireBaseData.ref().authWithPassword({ email : em, password : pwd },function(error, authData) { if (error === null) { console.log("User ID: " + authData.uid + ", Provider: " + authData.provider); $scope.user = fireBaseData.ref().getAuth(); $scope.showLoginForm = false; $scope.$apply(); } else { console.log("Error authenticating user:", error); } }); }; // Logout method $scope.logout = function () { fireBaseData.ref().unauth(); $scope.showLoginForm = true; }; });

セキュリティの観点から知っておくべき重要なことの1つは、 Firebaseログインはデフォルトで永続的であるということです。 したがって、アプリケーションを起動するたびにユーザーがログインする必要がある場合は、それに応じてFirebaseの設定を変更する必要があります。 これを行うには、ログインが成功した後に1回だけ、次のコードを実行します。

 var r = $firebase(fireBaseData.refRoomMates()).$asArray(); // NOTE: Substitute the email addresses of your two user accounts in the line below r.$add(["[email protected]","[email protected]"]);

ログインに成功した後にアカウントコントローラーにこれを追加するか、ログインに成功した後にブレークポイントを設定してコンソールインスペクターで実行できます。

ユーザーに基づくフィルタリング

ただし、マルチプラットフォームモバイルアプリにはまだ1つの重要な機能がありません。 私たちはあなたの費用をあなたのルームメイトの費用と区別したいと思います。 2つのアカウントを作成したので、ビューのデータをフィルタリングする必要があります。

まず、（a）現在のユーザーのデータを$ scopeに取得し、（b）現在のユーザーの追加費用を節約するために、 www/js/controllers.jsのdashCtrlを変更する必要があります。

 .controller('DashCtrl', function($scope, fireBaseData, $firebase) { $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray(); $scope.user = fireBaseData.ref().getAuth(); // ADD MESSAGE METHOD $scope.addExpense = function(e) { $scope.expenses.$add({ by: $scope.user.password.email, label: $scope.label, cost: $scope.cost }); $scope.label = ""; $scope.cost = 0; }; $scope.getTotal = function () { var rtnTotal = 0; for (var i = 0; i < $scope.expenses.length; i++) { rtnTotal += $scope.expenses[i].cost; } return rtnTotal; }; })

次に、 www/templates/tab-dash.htmlにフィルターを追加して、現在のユーザーの経費のみを表示する必要があります。

 <ion-item ng-repeat="expense in expenses|filter:user.password.email" type="item-text-wrap">

OK、ホーム画面は完璧になりました。 ユーザーは自分の経費のみを表示して追加できます。

最後の最後のステップは、ルームメイト間で完全な経費リストを共有できるようにすることです。 これを行うには、 www/templates/tab-friends.htmlを変更して、次のフィルターを追加します。

 <ion-item ng-repeat="expense in expenses|filter:roomiesEmail" type="item-text-wrap">

次に、 www/controllers.jsのFriendsCtrlを次のように変更します。

 .controller('FriendsCtrl', function($scope, fireBaseData, $firebase) { $scope.user = fireBaseData.ref().getAuth(); $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray(); $scope.roomies = $firebase(fireBaseData.refRoomMates()).$asArray(); $scope.roomies.$loaded().then(function(array) { //array = [[set1_rm1_email, set1_rm2_email], [set2_rm1_email, set2_rm2_email] ...] for (var i = 0; i < array.length; i++) { if (array[i][0] === $scope.user.password.email) { $scope.roomiesEmail = array[i][1]; } else if (array[i][1] === $scope.user.password.email) { $scope.roomiesEmail = array[i][0]; } } $scope.$apply(); // NOTE: For simplicity, this demo only supports the 2-roommate use case }); $scope.addExpense = function(e) { $scope.expenses.$add({ by: $scope.roomiesEmail, label: $scope.label, cost: $scope.cost }); $scope.label = ""; $scope.cost = 0; }; $scope.getTotal = function () { var rtnTotal = 0; for (var i = 0; i < $scope.expenses.length; i++) { rtnTotal += $scope.expenses[i].cost; } return rtnTotal; }; })

それでおしまい！ デバイスとルームメイトのデバイスの両方にアプリをインストール/更新すると、すべての設定が完了します。

要約

私たちの簡単な例は、IonicとFirebaseを使用して、達成できること、そしてそれがどれほど簡単に達成できるかということのほんの一部にすぎません。 これらは、JavaScriptとHTML5を使用してリアルタイムのマルチプラットフォームスマートフォンアプリケーションを構築するための強力なデュオです。

関連： Angular 6チュートリアル：新しいパワーを備えた新機能（Firebaseバックエンドを含むフルスタックの例）