ionic-framework
Ionische app testen in een browser
Zoeken…
Opmerkingen
Het testen van native apparaatfuncties zoals Camera, Vibration en anderen, waarvan er veel te vinden zijn in de documentatie van Ionic Native , kan niet worden gedaan in de browser. Dit is een inherente beperking van het feit dat Cordova, het platform waarvan Ionic afhankelijk is om toegang te krijgen tot native Android-, iOS- en Windows Mobile API's van een apparaat, niet op de browser kan worden uitgevoerd.
Men kan dit probleem omzeilen door de functionaliteit van de native plug-in te bespotten.
Voorbeeld
Hier is een voorbeeld van hoe u de Camera plug-in kunt bespotten:
Ga je gang en maak een optionele map in de hoofdmap van je project.
cd src
mkdir mocks
cd mocks
touch camera-mock.ts
Open camera-mock.ts en kopieer en plak de volgende code:
export class CameraMock {
getPicture(params) {
return new Promise((resolve, reject) => {
resolve("BASE_64_IMAGE_DATA");
});
}
}
Open vervolgens src/app.module.ts en importeer de src/app.module.ts "
import { CameraMock } from "../mocks/camera-mock";
Voeg het vervolgens toe aan de array van moduleproviders:
@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 {}
Nu kunt u het in elk component gebruiken na het importeren.
Testen in een browser
Gebruik ionic serve om een lokale ontwikkelingsserver te starten voor app-ontwikkeling en testen. Dit is handig voor het testen van zowel de desktopbrowser als voor het testen in een apparaatbrowser die op hetzelfde netwerk is aangesloten. Bovendien start deze opdracht LiveReload die wordt gebruikt om wijzigingen in het bestandssysteem te controleren. Zodra u een bestand opslaat, wordt de browser automatisch vernieuwd. Bekijk de Sass-documenten als u ook wilt dat ionic serve de Sass-bestanden van het project bekijkt.
$ ionic serve [options]
Voor Chrome-browser kunt u apparaten (AVD of Mobiles) inspecteren, typ de volgende opdracht in de adresbalk van Chrome-browser.
chrome://inspect/#devices
LiveReload
LiveReload let standaard op wijzigingen in uw www/ directory, exclusief www/lib/ . Om dit te wijzigen, kunt u een eigenschap watchPatterns opgeven in het bestand ionic.project in uw projectwortel om te kijken (of niet te kijken) voor specifieke wijzigingen.
{
"name": "myApp",
"app_id": "",
"watchPatterns": [
"www/js/*",
"!www/css/**/*"
]
}
Voor een referentie over de syntaxis van glob patronen, bekijk globpatronen op de Grunt-website.
Notitie:
$ ionic setup sass
zal een watchPatterns met de standaardwaarden aan uw ionic.project bestand toevoegen dat u vervolgens kunt bewerken, naast de eigenschap gulpStartupTasks zoals beschreven in de Sass-documentatie .
Ionic Lab
Ionic Lab http://ionicframework.com/img/blog/lab.png
Ionic Lab is een functie bovenop ionic serve waarmee u uw app eenvoudig in een telefoonframe en met iOS- en Android-platforms naast elkaar kunt testen. Om het te gebruiken, voer je gewoon uit
$ ionic serve --lab
Lees de volledige release-aankondiging voor alle details!
Een te gebruiken IP-adres opgeven
Stel dat u wilt opgeven met welk adres uw browser verbinding maakt, bijvoorbeeld voor testen of externe gebruikers. Geef het adres op met het argument --address .
$ ionic serve --address 68.54.96.105
Service-volmachten
De opdracht serve kan enkele proxy's toevoegen aan de http-server. Deze proxy's zijn handig als u zich in de browser ontwikkelt en een externe API moet gebruiken. Met deze functie kunt u een proxyaanvraag indienen bij de externe API via de ionische http-server om te voorkomen dat de No 'Access-Control-Allow-Origin' header is present on the requested resource bronfout.
In het bestand ionic.project kunt u een eigenschap toevoegen met een reeks proxy's die u wilt toevoegen. De proxy's zijn object met twee eigenschappen:
-
path: tekenreeks die wordt vergeleken met het begin van de inkomende verzoek-URL. -
proxyUrl: een tekenreeks met de URL van waar het proxy-verzoek moet komen.
{
"name": "appname",
"email": "",
"app_id": "",
"proxies": [
{
"path": "/v1",
"proxyUrl": "https://api.instagram.com/v1"
}
]
}
Met behulp van de bovenstaande configuratie kunt u nu verzoeken indienen bij uw lokale server op http://localhost:8100/v1 om proxy-outverzoeken te laten https://api.instagram.com/v1 bij https://api.instagram.com/v1
Bijvoorbeeld:
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;
})
})
Zie ook deze samenvatting voor meer hulp.
Opdrachtregelvlaggen / opties
[--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