モバイル

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

スマートフォンアプリケーションを作成するときに企業が直面する主要な問題の1つは、異なるプラットフォーム間でネイティブアプリケーションを構築する。一方精通したフロントエンド開発者この問題への対処を支援することを約束するいくつかのハイブリッドプラットフォームの開発に同調しました、 Ionicフレームワークそして Firebase はダイナミックなデュオであり、JavaScriptとHTML5を使用してリアルタイムのスマートフォンアプリケーションを構築する際に驚くほどの柔軟性を提供します。

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

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

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

Ionicフレームワークの紹介

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

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

Ionicフレームワークにも便利なCSSコンポーネントがたくさんすぐに使用できます。

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

Firebaseの紹介

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

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

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

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

また、注目に値する FirebaseはGoogleに買収されました今年の10月は、注目と可視性が大幅に向上しました。

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

ルームメイトはしばしば費用を分担し、必要なときにお互いに頼ります。それでは、ルームメイトが経費を追跡し、月末に調整できるようにしましょう。

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

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

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

IonicとFirebaseの使用を開始する

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

ザ・ AngularFire5分のチュートリアル Firebaseに慣れるための絶好の場所です。そして、あなたが「いじくり回し」または私のような触覚学習者であるなら、あなたは引っ張りたいと思うかもしれません私の実装 GitHubから、コードで遊んでみましょう。

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

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

オブジェクト指向プログラミング言語は、ソフトウェア開発者によって使用されなくなりました。

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

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

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

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

それでは、アイコン画面下部のタブセレクターのテキストは次のようになります。

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

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

expenses

データをFirebaseに接続する前に、リストを作成してwww/templates/tab-dash.htmlという配列にバインドしましょう。次のコードを {{expense.label}} {{expense.cost}} Total Spent {{getTotal()}} Add に追加します。

DashCtrl

www/js/controllers.jsも拡張する必要がありますexpensesでaddExpenseを含める配列、およびgetTotalメソッドと.controller('DashCtrl', function($scope) { $scope.expenses = [{ by: ‘email’, label: ’test’, cost: 10 }]; $scope.addExpense = function(e) { $scope.expenses.push({ by: 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メソッドは、配列内のすべてのアイテムの合計を提供します。

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

Firebaseに接続する

Firebaseアカウントが必要になります。サインアップできますここに無料のFirebase「ハッカープラン」をご利用いただけます。

サインアップすると、 ルートURL 、www/index.htmlのようになります。

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

まず、Firebaseスクリプトをアプリに含める必要があります'firebase'次のようにファイルします。

'starter'

次に、angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'firebase']) を追加して、Firebaseモジュールをアプリケーションに追加する必要があります。 AngularJSのリストへ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; } } });

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

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

room-mates

上記のコードは、3つの参照URLを追加します。 1つはルート用で、2つは名前を付けたコレクション用ですexpensesおよび https://.firebaseio.com/expenses 。

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

DashCtrl

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

これで、Firebaseからの経費回収をフックして、以前に作成した「ダミー」の経費配列を置き換えることができます。これは、.controller('DashCtrl', function($scope, fireBaseData, $firebase) { $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray(); $scope.addExpense = function(e) { $scope.expenses.$add({ by: , 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で次のように：

API「undefined」が存在しないか、アクセスする権限がありません

ionic run android

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

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

デバイスをシステムに接続して{ 'rules': { '.read': 'auth != null', '.write': 'auth != null' } } を実行することにより、さまざまなデバイスでマルチプラットフォームアプリをテストできます。またはwww/templates/tab-account.html。詳細については、Ionicのドキュメントを参照してください。アプリのテスト。

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

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

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

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

Email Password Login You are logged in as {{user.password.email}} Logout

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

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

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

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

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

ユーザーのログインインターフェースを有効にするには、最初に次のコードをAccountCtrlに追加します。

www/controller.js

次に、以下を.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; }; }); に追加します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] ']); で：

dashCtrl

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

www/js/controllers.js

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

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

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

最初に.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で（a）現在のユーザーのデータを$ scopeに取得し、（b）現在のユーザーの追加費用を節約するために：

www/templates/tab-friends.html

次に、FriendsCtrlにフィルターを追加する必要があります現在のユーザーの費用のみを表示するには：

www/controllers.js

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

最後の最後のステップは、ルームメイト間で完全な経費リストを共有できるようにすることです。これを行うには、.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 を変更しますこのフィルターを追加するには：

次に、

|_+_|

を変更します|_+_|
で次のように：
それでおしまい！デバイスとルームメイトのデバイスの両方にアプリをインストール/更新すると、準備が整います。
 要約
 私たちの簡単な例は、IonicとFirebaseを使用して、達成できること、そしてそれがどれほど簡単に達成できるかという表面をかじり始めただけです。これらは、JavaScriptとHTML5を使用してリアルタイムのマルチプラットフォームスマートフォンアプリケーションを構築するための強力なデュオです。
  関連：  Angular 6チュートリアル：新しいパワーを備えた新機能 （Firebaseバックエンドを含むフルスタックの例）


    
    
    
        
            
                
                    
                        
                             ウェブサイトのパフォーマンスと重要なレンダリングパスの最適化 
                             Webフロントエンド 
                                
                        
                        
                             
                        
                    
                
                
                    
                        
                             
                        
                        
                             起業家精神の新しい波 
                             技術 
                                
                        
                    
                
            
        
    
    
    
    
        

	
		
			
				
					人気の投稿
					
						   
						
							 モバイルWebアプリケーションの開発：いつ、なぜ、そしてどのように 
						
					

						   
						
							 ApeeScapeグローバルメンター：どこでも教育 
						
					

						   
						
							 Javaメモリリークのハンティング 
						
					

						   
						
							 Aho-Corasickアルゴリズムで文字列検索を征服する 
						
					

						   
						
							 スタートアップに参加する前にスクラムマスターが尋ねるべき5つの質問 
						
					
				
			
			
				
					 
					
						   
						
							 ブランド評価の謎を解き明かす 
						
					

						   
						
							 第11章破産：それは何であり、次に何が起こるか？ 
						
					

						   
						
							 アジャイルプロジェクト管理の究極の紹介 
						
					

						   
						
							 Pythonでのモックの概要 
						
					

						   
						
							 WebRTCアプリケーションを構築する1年：スタートアップエンジニアリングの教訓 
						
					
					
				
			
			
				
					人気の投稿
					 node js restapiの例
ランディングページをデザインする方法
複合現実と拡張現実
javascriptは非同期呼び出しが終了するのを待ちます
どの色が人々を感じさせるか
 
							
					
				
			
			
				
					カテゴリー
					 リモートの台頭  ツールとチュートリアル  製品ライフサイクル  ライフスタイル  アジャイル  分散チーム  エンジニアリング管理  収益と成長  革新  設計プロセス 
				
			
		
	




	
		
			© 2021 | 全著作権所有
			 apeescape2.com