ionic-framework
ブラウザでのイオンアプリケーションのテスト
サーチ…
備考
Camera、Vibrationなどのネイティブデバイスの機能のテスト(多くはIonic Nativeのドキュメントにあります)は、ブラウザでは実行できません。これは、IonicがデバイスのネイティブAndroid、iOS、およびWindows Mobile APIにアクセスできるようにするプラットフォームであるCordovaは、ブラウザ上で実行できないという事実に固有の制限です。
この問題を回避するには、ネイティブプラグインの機能を嘲笑してください。
例
Camera
Pluginをモックする方法の例を次に示します。
プロジェクトのルートフォルダにオプションのフォルダを作成してください。
cd src
mkdir mocks
cd mocks
touch camera-mock.ts
camera-mock.tsを開き、以下のコードをコピーして貼り付けてください:
export class CameraMock {
getPicture(params) {
return new Promise((resolve, reject) => {
resolve("BASE_64_IMAGE_DATA");
});
}
}
次に、 src/app.module.ts
を開き、モッククラス "
import { CameraMock } from "../mocks/camera-mock";
次にそれをモジュールプロバイダ配列に追加します。
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
CameraMock,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
これで、インポート後にどのコンポーネントでも使用できます。
ブラウザでのテスト
ionic serve
を使用して、アプリケーションの開発とテストのためのローカル開発サーバーを起動します。これは、デスクトップブラウザのテストと、同じネットワークに接続されているデバイスブラウザ内でのテストの両方に役立ちます。さらに、このコマンドは、ファイルシステムの変更を監視するために使用されるLiveReloadを開始します。ファイルを保存するとすぐに、ブラウザは自動的に更新されます。 ionic serve
にプロジェクトのSassファイルを見たい場合は、 Sass docsを見てください。
$ ionic serve [options]
クロムブラウザの場合、デバイス(AVDまたはMobiles)を調べるには、chromeブラウザのアドレスバーに次のコマンドを入力します。
chrome://inspect/#devices
LiveReload
デフォルトでは、LiveReloadは、あなたの変更を監視しますwww/
を除く、ディレクトリwww/lib/
。これを変更するには、プロジェクトルートにあるionic.project
ファイルのwatchPatterns
プロパティを指定して、特定の変更を監視する(または監視しない)ことができます。
{
"name": "myApp",
"app_id": "",
"watchPatterns": [
"www/js/*",
"!www/css/**/*"
]
}
グロブパターンの構文については、Gruntウェブサイトのグロブニングパターンを参照してください。
注意:
$ ionic setup sass
ionic.project
ファイルにデフォルト値のwatchPatterns
プロパティを追加します。 ionic.project
ファイルは、 Sassのドキュメントに記載されているgulpStartupTasks
プロパティに加えて編集できます 。
イオニックラボ
Ionic Lab http://ionicframework.com/img/blog/lab.png
Ionic Labは、iOSとAndroidプラットフォームを並行して使用して、携帯電話のフレームでアプリを簡単にテストできるようにする、 ionic serve
上にある機能です。それを使用するには、
$ ionic serve --lab
すべての詳細については、 完全リリースの発表をお読みください!
使用するIPアドレスの指定
あなたのブラウザが接続するアドレスを指定したいとしましょう。たとえば、テストや外部ユーザーです。 --address
引き数を指定してアドレスを指定します。
$ ionic serve --address 68.54.96.105
サービスプロキシ
serve
コマンドは、httpサーバにいくつかのプロキシを追加できます。これらのプロキシは、ブラウザで開発しており、外部APIを呼び出す必要がある場合に便利です。この機能を使用するNo 'Access-Control-Allow-Origin' header is present on the requested resource
エラーにNo 'Access-Control-Allow-Origin' header is present on the requested resource
、イオンhttpサーバーを介して外部APIにプロキシ要求をプロキシできます。
ionic.project
ファイルでは、追加するプロキシの配列を持つプロパティを追加できます。プロキシは2つのプロパティを持つオブジェクトです。
-
path
:着信リクエストURLの先頭と一致する文字列。 -
proxyUrl
:プロキシされたリクエストを送信するURLの文字列。
{
"name": "appname",
"email": "",
"app_id": "",
"proxies": [
{
"path": "/v1",
"proxyUrl": "https://api.instagram.com/v1"
}
]
}
上記の設定を使用すると、 http://localhost:8100/v1
ローカルサーバーにリクエストを送信して、 https://api.instagram.com/v1
http://localhost:8100/v1
へのリクエストをプロキシアウトできるようになりhttps://api.instagram.com/v1
例えば:
angular.module('starter.controllers', [])
.constant('InstagramApiUrl', '')
// .constant('InstagramApiUrl','https://api.instagram.com')
//In production, make this the real URL
.controller('FeedCtrl', function($scope, $http, InstagramApiUrl) {
$scope.feed = null;
$http.get(InstagramApiUrl + '/v1/media/search?client_id=1&lat=48&lng=2.294351').then(function(data) {
console.log('data ' , data)
$scope.feed = data;
})
})
詳細については、 この要点も参照してください。
コマンドラインフラグ/オプション
[--consolelogs|-c] ...... Print app console logs to Ionic CLI
[--serverlogs|-s] ....... Print dev server logs to Ionic CLI
[--port|-p] ............. Dev server HTTP port (8100 default)
[--livereload-port|-i] .. Live Reload port (35729 default)
[--nobrowser|-b] ........ Disable launching a browser
[--nolivereload|-r] ..... Do not start live reload
[--noproxy|-x] .......... Do not add proxies