ionic-framework
Testare l'app Ionic in un browser
Ricerca…
Osservazioni
Il test delle funzionalità del dispositivo nativo come fotocamera, vibrazione e altri, molti dei quali si trovano nella documentazione di Ionic Native , non può essere fatto nel browser. Questo è un limite intrinseco del fatto che Cordova, la piattaforma su cui Ionic dipende da essere in grado di accedere alle API native Android, iOS e Windows Mobile di un dispositivo, non può essere eseguita sul browser.
Uno può aggirare questo problema prendendo in giro la funzionalità del plugin nativo.
Esempio
Ecco un esempio su come prendere in giro il plugin Camera :
Vai avanti e crea una cartella opzionale nella cartella principale del progetto.
cd src
mkdir mocks
cd mocks
touch camera-mock.ts
Apri camera-mock.ts e copia incolla il seguente codice:
export class CameraMock {
getPicture(params) {
return new Promise((resolve, reject) => {
resolve("BASE_64_IMAGE_DATA");
});
}
}
Quindi apri src/app.module.ts e importa la classe di simulazione "
import { CameraMock } from "../mocks/camera-mock";
Quindi aggiungilo all'array dei provider di moduli:
@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 {}
Ora puoi usarlo in qualsiasi componente dopo averlo importato.
Test in un browser
Utilizzare ionic serve per avviare un server di sviluppo locale per lo sviluppo e il test delle app. Questo è utile sia per i test del browser desktop, sia per testare all'interno di un browser del dispositivo che è connesso alla stessa rete. Inoltre, questo comando avvia LiveReload che viene utilizzato per monitorare le modifiche nel file system. Non appena si salva un file, il browser viene aggiornato automaticamente. Dai un'occhiata ai documenti di Sass se vuoi anche avere un ionic serve guardare i file Sass del progetto.
$ ionic serve [options]
Per browser Chrome puoi controllare i dispositivi (AVD o cellulari), digitare il comando seguente nella barra degli indirizzi del browser Chrome.
chrome://inspect/#devices
LiveReload
Per impostazione predefinita, LiveReload controllerà le modifiche nella tua www/ directory, escluso www/lib/ . Per cambiare questo, puoi specificare una proprietà watchPatterns nel file ionic.project che si trova nella root del progetto per guardare (o non guardare) le modifiche specifiche.
{
"name": "myApp",
"app_id": "",
"watchPatterns": [
"www/js/*",
"!www/css/**/*"
]
}
Per un riferimento sulla sintassi del pattern glob, controlla i pattern globbing sul sito web di Grunt.
Nota:
$ ionic setup sass
aggiungerà watchPatterns correttamente con i valori predefiniti al file ionic.project che è possibile modificare, oltre alla proprietà gulpStartupTasks come descritto nella documentazione di Sass .
Ionic Lab
Ionic Lab http://ionicframework.com/img/blog/lab.png
Ionic Lab è una funzione al servizio di ionic serve che semplifica il test della tua app in una cornice del telefono e con piattaforme iOS e Android affiancate. Per usarlo, basta correre
$ ionic serve --lab
Leggi l' annuncio di rilascio completo per tutti i dettagli!
Specifica di un indirizzo IP da utilizzare
Supponi di voler specificare a quale indirizzo si connetterà il tuo browser, ad esempio per testare o utenti esterni. Specificare l'indirizzo con l'argomento --address .
$ ionic serve --address 68.54.96.105
Proxy di servizio
Il comando serve può aggiungere alcuni proxy al server http. Questi proxy sono utili se stai sviluppando nel browser e devi effettuare chiamate a un'API esterna. Con questa funzione è possibile inoltrare la richiesta al API esterno tramite il server http ionico, impedendo che l' No 'Access-Control-Allow-Origin' header is present on the requested resource sull'errore di No 'Access-Control-Allow-Origin' header is present on the requested resource .
Nel file ionic.project è possibile aggiungere una proprietà con una serie di proxy che si desidera aggiungere. I proxy sono oggetti con due proprietà:
-
path: stringa che verrà confrontata con l'inizio dell'URL della richiesta in entrata. -
proxyUrl: una stringa con l'url di dove deve andare la richiesta proxy.
{
"name": "appname",
"email": "",
"app_id": "",
"proxies": [
{
"path": "/v1",
"proxyUrl": "https://api.instagram.com/v1"
}
]
}
Utilizzando la configurazione di cui sopra, ora puoi effettuare richieste al tuo server locale su http://localhost:8100/v1 per fare in modo che le richieste proxy vengano inviate a https://api.instagram.com/v1
Per esempio:
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;
})
})
Vedi anche questo succo per ulteriore aiuto.
Flag / opzioni della riga di comando
[--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
