Geekly Articles each Day

iOSおよびAndroid用PhoneGapアプリケーション開発インフラストラクチャ

今日は、PhoneGap / Cordovaに基づいたクロスプラットフォームモバイルアプリケーションの開発における経験についてお話します。 このプロジェクトでは、HTML5、CSS3、Angular.jsなどのテクノロジーを使用しています。 Gruntは、日常的なタスクの実行を簡素化および高速化するタスクマネージャーとして使用されます。 すべてのアセンブリは、開発プロセス中にローカルでコンパイルされます。


ソース：build.phonegap.com

テストフェーズの準備が整ったら、 PhoneGap Buildを使用してコンパイルし、 Ubertestersにアップロードします。これは、接続されているすべてのデバイスで迅速かつ効率的にテストできるモバイルアプリケーション配布サービスです。 このアプリケーションは、最低限iOS 6およびAndroid 4.1（87.5％の市場シェア ）をサポートしています。

ローカルアセンブリのセットアップとプロジェクト構造


アプリケーションのローカルテストを行うには、PhoneGap / Cordovaのツールをインストールする必要があります。 NodeJSが既にインストールされていることを確認し、コマンドプロンプトまたはCygwinを開いて、次を実行することが重要です。

npm install -g phonegap

インストールが完了したら、空のプロジェクトを作成して、必要なプラットフォーム用にコンパイルできます。

 phonegap create my-app cd my-app phonegap platform add android phonegap run android

注意：phonegap = cordova。 コマンドを書くとき、phonegapの代わりにcordovaを使用できます。

 cordova run android

iOS向けのビルドは、Mac OS Xでのみ実行できます（Appleライセンス契約の条項に従って）。WindowsでiOS向けのビルドを実行する方法はありません。

AndroidプラットフォームにはSDKツールが必要です。 リンクからダウンロードできます（ページの下部にあるSDK SDK Onlyパッケージ）。 インストール直後に、Android 5.0（APIレベル21）が正常にインストールされたことをAndroid SDKマネージャーで確認する必要があります。 Android 5.0は、ローカルビルドのPhonegap / Cordovaの現在のバージョンのターゲットとして使用されます。

アプリケーション構造


ファイルとフォルダー

•プラットフォーム-使用されるプラットフォームごとに個別のコードが含まれ、アセンブリが実行されるたびにコンパイルされます。
•プラグインは、アプリケーションで使用されるプラグインです。 プラグインについては、以下で詳しく説明します。
•www-Web Viewシステムコンポーネントを使用してHTML5 / Angular.js、PhoneGap / Cordovaに基づくWebアプリケーションを表示します。
•config.xml-ファイルは、ローカルアセンブリ中にプロジェクトのルートフォルダーに配置する必要があります。 PhoneGap Buildには、/ wwwにあるconfig.xmlファイルが必要です。 設定ファイルは、PhoneGapベースのプロジェクトの重要な部分です。 アプリケーションリソースへのリンクが含まれ、必要な権限を設定し、各プラットフォームのパラメーター（たとえば、ステータスバーの動作）を構成します。 アプリケーション（バンドル）IDと発行者情報もconfig.xmlで指定する必要があります。

プラグイン


プラグインは、アプリケーションにネイティブコードを自動的に埋め込み、Cordova Web Viewからネイティブメソッドを管理できるようにするパッケージです。 PhoneGap / Cordova APIのすべての基本機能は、通常のWebアプリケーションでは利用できないデバイスとプラットフォームの機能と機能へのアクセスを提供するプラグインを使用して実装されます：iOSのQRコード、NFC、プッシュ通知、さらにはTouch IDをスキャンします。

PhoneGapプラグインのレジストリがあります。 PhoneGap Buildと互換性のあるプラグインを使用することが非常に重要です。そうしないと、アセンブリがローカルでのみ可能になります。
ローカルアセンブリ中にプロジェクトにプラグインを追加するには、プロジェクトルートフォルダーからplugin addコマンドを使用します。 このコマンドの引数は、プラグインコードを含むGitリポジトリのURLです。

 cordova plugin add https://github.com/phonegap-build/PushPlugin.git

PhoneGap Buildには、各プラグインのconfig.xmlファイルにIDが必要です（少し依存関係があります）。 特定のバージョンを指定する必要はありませんが、さまざまなプラグインアセンブリに互換性がない可能性があり、突然表示されるエラーの原因を見つけるのに時間がかかるため、望ましいです。 プラグインページの例 ：

 <gap:plugin name="com.phonegap.plugins.pushplugin" version="2.4.0" />

関連する.jsファイルをHTMLページにインポートする必要があります。

 <script type="text/javascript" charset="utf-8" src="PushNotification.js"></script>

すべてのプラグインには通常、GitHubにドキュメントがあります（常に詳細ではありませんが）。
純粋なJavaScriptではなくAngular.jsフレームワークを使用しているため、プラグインを「ラップ」するには追加のコンポーネントが必要です。 ngCordovaと呼ばれます。

ngCordova

ngCordovaは、PhoneGap / Cordovaモバイルアプリケーションの作成、テスト、およびアセンブリを簡素化するCordova APIに基づいた60を超えるAngular.js拡張機能のコレクションです。 このプロジェクトは、 Ionic Frameworkチームによってサポートおよび開発されています 。 ngCordovaは、最も一般的で頻繁に使用されるPhoneGap / Cordovaプラグイン用のシンプルなAngular.jsラッパーを提供し、数行のコードで写真の撮影、QRコードのスキャン、ファイルのアップロード、フラッシュの有効化、現在の場所の取得などを可能にします。

ローカルアセンブリの場合、次のコマンドを使用してプラグインを追加する必要があります。

 cordova plugin add https://github.com/phonegap-build/PushPlugin.git

PhoneGap Buildには、config.xmlのプラグインIDへのリンクが必要です。

 <gap:plugin name="com.phonegap.plugins.pushplugin" version="2.4.0" />

ng-cordova.jsはngCordova パッケージからインポートされます 。スクリプトタグは、angular.jsのインポート後に配置する必要があります。そうしないと、プロジェクトに関連しないエラーが表示されます。

 <script src="scripts/angular.js"></script> <script src="scripts/ng-cordova.js"></script>

モジュールにngCordova依存関係を追加することを忘れないことが重要です。

 angular.module('application', [ 'ngCordova' ])

各ngCordovaラッパーには独自のドキュメントがあります 。 プロジェクトでは、プッシュ通知用のプラグインとQRスキャナーが使用され、テストされました。 QRコードスキャナー（バーコードスキャナー）は問題なく統合されており、「すぐに使用可能」と言うこともできますが、ドキュメントの不足によりプッシュプラグインのセットアップにかなり時間がかかりました-GitHubの膨大な問題リストから情報を収集する必要がありました'e。

Android向けのプッシュ通知（Google Cloud Messaging）

ngCordova プラグインページで簡単なドキュメントを入手できます。

重要！ サーバーから送信されるプッシュ通知のペイロード部分は特定の形式に従う必要があります。そうしないと、システムトレイでの通知の自動表示に問題が生じる可能性があります。

データオブジェクトには「メッセージ」フィールド（通知テキストとして）と「タイトル」フィールド（存在しない場合、通知タイトルは空になります）が必要であることがわかりました。 uriフィールドは、通知が開かれたときに実行されるアクションを示すために必要です。

 { "data": { "message": "New message. You have 5 unread messages", "title": "Your Application", "uri": "http://www.yourapp.com/messages" } }

また、ユーザーが通知（バックグラウンドからフォアグラウンドへの遷移）を開いた場合と同様に、アプリケーションがフォアグラウンドにあるとき、notificationReceivedリスナーがトリガーされることに注意することも重要です。 プッシュ通知はバックグラウンドで自動的に表示され、システムの再起動後も引き続き通知されます。

Uriは、スイッチケースリスナー構造の「メッセージ」状態で受信できます。
 $rootScope.$on('$cordovaPush:notificationReceived', function(event, notification) { console.log(notification); switch (notification.event) { case 'registered': if (notification.regid.length > 0) { registerOnServer(notification.regid); } break; case 'message': console.log('message!'); utils.goToApiUrl(notification.payload.uri); break; case 'error': console.log('GCM error: ' + notification.msg); break; default: console.log('An unknown GCM event has occurred: ' + notification.event); break; } });


iOSでのプッシュ通知

ngCordova プラグインページで簡単なドキュメントを入手できます。

アプリケーションの開発時には、Apple Push Notification（APNS）の送信を担当するバックエンド部分の準備ができていませんでした。 テストとデバッグに一時的なソリューションを使用することにしました。 Node Push Serverが最初に選択されました（一部のPhonegap / Cordovaマニュアルに推奨事項があったため）が、テスト中にiOSのプッシュ通知のカスタムフィールドのサポートがないことが判明しました（バッジ、アラート、サウンドのみがサポートされています） 、特定のページを開くにはuriを渡す必要があります）、フォーマットの問題により、iOS 6およびiOS 7では正しく動作しません（アイコンのカウンターは表示されません）。

市場にはいくつかの一般的なソリューションがありますが、iOSでのテスト通知にParse.comプラットフォームを選択しました。 開発とテストのプロセスには、無料プランの条件で十分です。
通知を設定するには、まず登録して設定に移動し、[設定]セクションに移動してから、[プッシュ]セクションに移動して、プッシュ通知の処理を有効にし、必要な証明書 （* .p12）をアップロードします。 Apple Push Notification Serviceの仕組みについては、 こちらをご覧ください 。

ngCordovaドキュメントに基づくサンプルコード
 function registerInCordova() { var iosConfig = { "badge": true, "sound": true, "alert": true, }; var authHeader = { headers: { 'X-Parse-Application-Id': 'YOUR_APPLICATION_ID', 'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY', 'Content-Type': 'application/json' } }; $cordovaPush.register(iosConfig).then(function(deviceToken) { // Success -- send deviceToken to server, and store for future use console.log("deviceToken: " + deviceToken); $http.post("https://api.parse.com/1/installations", { "deviceType": "ios", "deviceToken": deviceToken, "channels": ["ALL"] }); }, function(err) { console.log("Registration error: " + err); }); } </spoiler>     'YOUR_APPLICATION_ID'  'YOUR_REST_API_KEY'     “Settings” -> “Keys”.  listener' ,     foreground    background'  foreground (   push ). <spoiler title=" listener'"> <source lang="javascript"> function registerForegroundListener() { $rootScope.$on('$cordovaPush:notificationReceived', function(event, notification) { console.log("Notification: " + JSON.stringify(notification)); if (notification.sound) { var snd = new Media(event.sound); snd.play(); } if (notification.badge) { $cordovaPush.setBadgeNumber(notification.badge).then(function(result) { console.log("Badge set successfully"); }, function(err) { console.log("Error on badge setting: " + err); }); } if (notification.uri) { utils.goToApiUrl(notification.uri); } }); }

登録されたすべてのデバイスにParse.com経由でプッシュ通知を送信するには、HTTP POSTリクエストを実行する必要があります
 curl -X POST \ -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \ -H "X-Parse-REST-API-Key: YOUR_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "channels": [ "" ], "data": { "alert": "New Messages", "badge": 3, "uri": "api/messages" } }' \ https://api.parse.com/1/push


Phonegapビルド


-PhoneGap Buildとは何ですか？
PhoneGap Buildは、PhoneGap / Cordovaに基づいて構築された無料のクラウドサービスで、クロスプラットフォームモバイルアプリケーションを構築できます。

-なぜPhoneGap Buildが必要なのですか？
PhoneGap Buildを使用すると、SDKツールをインストールすることなく、iOS、Android、Windows Phoneを同時にビルドできます（もちろん、これには多少のunningがあります-テスト用に送信する前に、少なくともAndroidでローカルにビルドすることをお勧めします） 。 しかし、もっと重要なのは、このサービスを使用すると、MacなしでクラウドでiOS向けにビルドできることです。

PhoneGap Buildには独自のREST APIがあり 、これを使用してプロジェクトの作成と更新を自動化し、iOS、Android、およびWindows Phoneのビルドを起動できます（プラットフォームを選択できます）。 GitHubを使用する場合、リポジトリでコミットするたびに自動アセンブリ用にサービスを構成できます。 REST APIを使用すると、ヘッダーでユーザー名とパスワードを渡す代わりに、トークンを使用してサーバーへのすべてのHTTP要求を承認できます。

PhoneGap Buildを使用するには、設定を行う必要があります。
-登録後、「新しいアプリの作成」に進みます。 zipで圧縮されたwwwフォルダーのコンテンツをロードする必要があります。config.xmlは内部にある必要があります。 プライベートGitHubリポジトリへのアクセスは、アカウントの有料バージョンでのみ利用可能です。
-次に、アカウント設定に移動します：右隅のアイコンをクリックし、「アカウントの編集」->「署名キー」、必要な証明書とキーを追加します（* .p12証明書とプロファイルがない場合、iOSのアセンブリは中断され、Androidのアセンブリは完了します） AdHocモードでは、キーが欠落している場合）。

PhoneGap Buildを使用して、必要なすべてのプラットフォームのインストールパッケージが生成された後、配布パッケージに手動でダウンロードできます。 HockeyApp、TestFlight、TestFairyなどの代替オプションが多数ありますが、次にUbertestersを見て、Ubertesters Upload APIを統合する機能を使用してアセンブリと配布を自動化する方法を学習します。

Ubersters


-なぜUbertestersですか？
この記事では、このサービスの機能と利点について説明します 。

Ubertestersは、すべての主要なプラットフォーム（Phonegap / Cordovaを含む）にSDKを提供しています。 既に説明したように、Upload APIを使用すると、継続的な統合を使用して配布を自動化できます。

Upload APIへのアクセスを開くには、 プロファイルページに移動する必要があります。
ドキュメントはこちらから入手できます 。

インストールパッケージ（ipa / apk）はcurlを使用してダウンロードできます
 curl -X POST http://beta.ubertesters.com/api/client/upload_build.json -H "X-UbertestersApiKey:PERSONAL_API_KEY" -F "file=@upload.ipa" -F "title=build title" -F "notes=build notes" -F "status=in_progress" -F "stop_previous=true"

テスターと開発者のチームのデバイスへの自動配布を有効にするには、デフォルトの配布グループを作成する必要があります：「管理」->「配布グループ」->「配布グループの追加」、「デフォルトグループ」チェックボックスを選択します。 このケースでは2つのプラットフォームがサポートされているため、各プロジェクト（iOSおよびAndroid）の操作を完了することを忘れないでください。

タスクの自動化


PhoneGap / Cordova上のアプリケーションのビルドプロセスを自動化する方法はいくつかあります。 Grunt 、 Ant 、 Mavenをタスクマネージャーとして使用し、 Jenkins CIまたはTeam Cityを継続的な統合環境として使用できます。

グラント構成

Gruntには、package.json（依存関係と基本設定を定義する）とgruntfile.js（タスク構成）の2つのファイルが必要です。
最初にgrunt-cliをインストールする必要があります。

 npm install -g grunt-cli

package.jsonには次の設定を使用できます
 { "name": "Your application", "version":"1.0.0", "description": "Your App", "main": "index.html", "author": "", "licenses": "", "devDependencies": { "form-data": "^0.2.0", "fs": "0.0.2", "grunt": "0.4.5", "grunt-contrib-compress": "0.9.1", "grunt-http": "^1.6.0", "grunt-magikarp": "^0.2.5", "grunt-modify-json": "^0.1.1", "grunt-xmlpoke": "^0.8.0", "needle": "", "read": "~1.0.4" } }

package.jsonで定義された依存関係は、npmインストールで満たすことができます
必要なモジュールはすべて/ node_modulesにインストールされます
ただし、grunt-phonegap-buildを手動でインストールする必要もあります。

 npm install grunt-phonegap-build

Gruntfile.jsの例は Dropboxで入手できます。

使用する前にいくつかのパラメーターを設定する必要があります。

次に、タスクマネージャーGruntがプロジェクトで使用するすべてのタスクを、スクリプトでの使用順に検討します。

Gruntタスクリスト

1） http：phonegap_build_version

HTTP GETリクエストを使用して、PhoneGap Buildから現在のバージョンを取得します。

 http://build.phonegap.com/api/v1/apps/' + PHONEGAP_API_ID + '?auth_token=' + PHONEGAP_TOKEN

PhoneGap Build Read APIのメソッドとドキュメントはこちらから入手できます 。

2） readCurrentVersion

http：phonegap_build_versionの結果はJSON形式で返され、指定されたパスに保存されます。

 ubertesters_response/phonegap_app.json

現時点では、スクリプトにバグがあります。phonegap_app.jsonは、開始する前に手動で作成する必要があります（空のJSONファイルを作成するだけです）。 現在のバージョンは、modify_jsonにパラメーターとして渡されます。

3） modify_json

package.jsonの現在のバージョンの値を更新します。

4） マジカルプ

Magikarpは、package.jsonの現在のバージョンをインクリメントします。 オプションが利用可能です：メジャー、マイナー、ビルド。

5） readNextVersion

package.jsonからの増分バージョンがxmlpokeに渡されます。

6） xmlpoke

www / config.xmlファイルのバージョンを変更します。

7） 圧縮

wwwフォルダー（フォルダー自体ではなく、これは重要です！）の内容を圧縮し、不要なファイルを削除します。 圧縮されたzipファイルは、指定されたパスtarget / phonegapp.zipに保存されます

8） phonegap-build：デバッグ

現時点では、デバッグとリリースに違いはありません（Androidのリリースキーはまだ生成されていません）。 圧縮されたzipファイルはPhoneGap Buildサービスに送信されます。 タスクは、ビルド（ios / android）およびインストールパッケージ（ipa / apk）の保存後にのみ完了します。
PhoneGap Build Write APIのメソッドとメソッドはこちらから入手できます 。

9） http：ubertesters_ios

このタスクは、Upload APIを使用してipaビルドをUbertestersにアップロードします。 ここにREST APIがあれば、任意のモバイルアプリ配布サービスを使用できます。

10） http：ubertesters_android

同じタスクですが、Android APK向けです。

11） 利益！

Gruntは、「grunt」コマンドを使用してローカルに起動するか、構成済みのビルドサーバー（この場合はTeamCity）で起動します。 また、各コミットでビルドおよび配布プロセスを呼び出すようにTeamCityを構成することもできます。

このようにして、モバイルアプリケーションを構築およびテストするときに継続的な統合を使用することで、多くの時間を節約できます。

便利なリンク


Phonegapビルドの自動化
iOS用のモバイルアプリケーション配布サービス。 パート3：Ubertesters

Source: https://habr.com/ru/post/J257749/

More articles:


All Articles