ionic-framework
Testowanie aplikacji jonowej w przeglądarce

Uwagi

cd src
mkdir mocks 
cd mocks 
touch camera-mock.ts 

export class CameraMock {
    getPicture(params) {
        return new Promise((resolve, reject) => {
            resolve("BASE_64_IMAGE_DATA");
        });
    }
}

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 {}

Testowanie w przeglądarce

Użyj ionic serve do uruchomienia lokalnego serwera programistycznego do tworzenia aplikacji i testowania. Jest to przydatne zarówno do testowania przeglądarki pulpitu, jak i do testowania w przeglądarce urządzenia podłączonej do tej samej sieci. Dodatkowo to polecenie uruchamia LiveReload, który służy do monitorowania zmian w systemie plików. Po zapisaniu pliku przeglądarka jest odświeżana automatycznie. Spójrz na dokumentację Sass, jeśli chcesz również, aby ionic serve oglądała pliki Sass projektu.

$ ionic serve [options]

W przeglądarce Chrome możesz sprawdzać urządzenia (AVD lub telefony komórkowe), wpisz następujące polecenie w pasku adresu przeglądarki Chrome.

chrome://inspect/#devices  

LiveReload

Domyślnie LiveReload będzie sprawdzał zmiany w twoim katalogu www/ , z wyłączeniem www/lib/ . Aby to zmienić, można określić watchPatterns właściwość w ionic.project plik znajduje się w katalogu głównym projektu do oglądania (lub nie oglądać) do konkretnych zmian.

{
  "name": "myApp",
  "app_id": "",
  "watchPatterns": [
    "www/js/*",
    "!www/css/**/*"
  ]
}

Aby zapoznać się ze składnią wzorców globowania , sprawdź wzorce globowania na stronie Grunt.

Uwaga:

$ ionic setup sass

doda watchPatterns z wartościami domyślnymi do pliku ionic.project , który można następnie edytować, oprócz właściwości gulpStartupTasks zgodnie z opisem w dokumentacji Sass .

Ionic Lab

Ionic Lab http://ionicframework.com/img/blog/lab.png

Ionic Lab to funkcja dodana do ionic serve która ułatwia testowanie aplikacji w ramce telefonu oraz na platformach iOS i Android obok siebie. Aby go użyć, po prostu uruchom

$ ionic serve --lab

Przeczytaj pełną informację o wydaniu, aby poznać wszystkie szczegóły!

Określanie adresu IP do użycia

Powiedz, że chcesz określić adres, z którym będzie się łączyć Twoja przeglądarka, na przykład w celu przetestowania lub użytkowników zewnętrznych. Podaj adres za pomocą argumentu --address .

$ ionic serve --address 68.54.96.105

Usługi proxy

Polecenie serve może dodać niektóre serwery proxy do serwera http. Te proxy są przydatne, jeśli tworzysz w przeglądarce i musisz wykonywać połączenia z zewnętrznym interfejsem API. Za pomocą tej funkcji można przesyłać żądania proxy do zewnętrznego interfejsu API za pośrednictwem jonowego serwera http, zapobiegając wystąpieniu No 'Access-Control-Allow-Origin' header is present on the requested resource błędzie No 'Access-Control-Allow-Origin' header is present on the requested resource .

W pliku ionic.project możesz dodać właściwość z tablicą serwerów proxy, które chcesz dodać. Serwery proxy są obiektami o dwóch właściwościach:

• path : ciąg znaków, który zostanie dopasowany do początku adresu URL żądania przychodzącego.
• proxyUrl : ciąg z adresem URL miejsca, w którym powinno być kierowane żądanie proxy.

{
  "name": "appname",
  "email": "",
  "app_id": "",
  "proxies": [
    {
      "path": "/v1",
      "proxyUrl": "https://api.instagram.com/v1"
    }
  ]
}

Korzystając z powyższej konfiguracji, możesz teraz wysyłać żądania do lokalnego serwera pod http://localhost:8100/v1 aby przekazywać żądania proxy do https://api.instagram.com/v1

Na przykład:

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;
  })

})

Aby uzyskać więcej pomocy, zobacz także tę treść .

Flagi / opcje wiersza poleceń

[--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