Share
Uno dei punti di forza di Ionic è nei servizi che offre in cima alla struttura. Questo include servizi per l'autenticazione degli utenti della tua app, notifiche push e analisi. In questa serie, stiamo imparando a conoscere questi servizi creando app che li utilizzano.
In questo post, daremo un'occhiata a Ionic Deploy. Questo servizio ti consente di pubblicare modifiche alla tua app Ionic senza la necessità di ricompilarla e inviarla nuovamente all'app store. Questo è molto utile per spingere rapidamente correzioni di bug, aggiornamenti minori e altre modifiche estetiche all'app. Con la funzione "Distribuisci canali", puoi anche eseguire test A / B introducendo modifiche di codice diverse a diversi canali di distribuzione.
Tuttavia, non tutte le modifiche che si desidera introdurre nella propria app possono essere trasferite tramite Ionic Deploy. Solo modifiche al tuo codice HTML, CSS, JavaScript e risorse sotto il tuo www directory può essere spinto in questo modo. Modifiche binarie come gli aggiornamenti alla versione della piattaforma Cordova, i plugin Cordova (aggiornando quelli esistenti o aggiungendone di nuovi) e le risorse delle app come l'icona e la schermata iniziale non possono essere trasferiti utilizzando Ionic Deploy.
Nella tua app Ionic, puoi avere un codice che controllerà le distribuzioni disponibili (aggiornamenti). Per impostazione predefinita, controllerà le distribuzioni nel file produzione canale. Ma puoi anche specificare altri canali da cui ricevere aggiornamenti.
È quindi possibile inviare le modifiche utilizzando il caricamento ionico comando. Questo caricherà le tue modifiche su Ionic Cloud. Una volta caricati, puoi scegliere su quale canale desideri essere distribuito e se distribuirlo ora o in un secondo momento.
La distribuzione su un canale monitorato dalla tua app attiverà il codice nella tua app da eseguire. Il codice è quindi responsabile del download dell'aggiornamento, dell'estrazione e del ricaricamento dell'applicazione per applicare le modifiche.
In questo post, utilizzerai la riga di comando per applicare le modifiche e verificare se la distribuzione funziona come previsto. Per semplificare le cose, le modifiche che introdurremo riguarderanno principalmente l'interfaccia utente. Per ogni distribuzione, cambieremo il numero di versione visualizzato per l'app. Stiamo anche andando a modificare l'immagine visualizzata sull'app per mostrare che le risorse possono essere aggiornate pure.
Ora che hai un'idea di come Ionic Deploy funziona e di ciò che creerai, è tempo di sporcarti le mani creando effettivamente un'app che utilizza Ionic Deploy. Inizia eseguendo il bootstrap di una nuova app Ionic:
ionic start --v2 deployApp tabs
Il comando precedente creerà una nuova app utilizzando il modello di schede. Navigare all'interno del deployApp directory una volta completata l'installazione:
cd deployApp
Quindi, è necessario installare il @ Ionico / cloud-angolare pacchetto. Questa è la libreria JavaScript per il servizio Ionic Cloud. Ci consente di interagire con il servizio Ionic Deploy e altri servizi ionici tramite codice JavaScript.
npm install @ ionic / cloud-angular --save
Una volta completata l'installazione, è ora possibile inizializzare una nuova app Ionic basata su questa app. Prima di farlo, assicurati di avere già un account Ionic. Lo strumento della riga di comando ti chiederà di accedere con il tuo account Ionic se non lo hai già fatto.
ionico io init
Questo creerà una nuova app chiamata "deployApp" (o qualsiasi altra cosa tu abbia chiamato la tua app quando avvii una nuova app Ionic sotto la tua dashboard delle app Ionic.
Una volta verificato che l'app è presente nella tua dashboard Ionic, torna al terminale e installa il plug-in Deploy:
plugin cordova aggiungere ionico-plugin-deploy --save
Si noti che questo plugin è quello che effettivamente fa il sollevamento pesi. Il @ Ionico / cloud-angolare pacchetto espone semplicemente le API necessarie per lavorare facilmente con i servizi Ionic all'interno di un'app Ionic.
Ora che hai completato tutte le impostazioni necessarie, è il momento di aggiungere il codice per verificare e applicare gli aggiornamenti. Ma prima di farlo, prima di tutto servi l'app tramite il tuo browser:
servire ionico
Questo ti permette di verificare se il codice che hai aggiunto funzioni o meno. In questo modo puoi apportare le correzioni necessarie non appena vedi un errore.
Apri il src / app / app.module.ts file. Sotto il SplashScreen importare, importare i servizi necessari per lavorare con Ionic Cloud:
import SplashScreen da '@ ionic-native / splash-screen'; // aggiungi quanto segue: import CloudSettings, CloudModule da '@ ionic / cloud-angular';
Quindi, aggiungi il APP_ID della tua app Ionic. Puoi trovarlo nella dashboard dell'app Ionic, proprio sotto il nome dell'app.
const cloudSettings: CloudSettings = 'core': 'app_id': 'IL TUO ID APP IONIC';
Dopo averlo aggiunto, puoi ora includerlo come uno dei moduli dell'app:
@NgModule (dichiarazioni: [// ...], importa: [BrowserModule, IonicModule.forRoot (MyApp), CloudModule.forRoot (cloudSettings) // <-- add this ], );
Quindi, apri il src / app / app.component.ts file. Proprio sotto il TabsPage importare, includere quanto segue:
importare TabsPage da '... / pages / tabs / tabs'; // aggiungi questi: import AlertController, LoadingController da 'ionic-angular'; importare Deploy da '@ ionic / cloud-angular'; // importa il servizio Deploy dal pacchetto @ ionic / cloud-angular
Nel costruttore(), aggiungi i servizi che abbiamo importato in precedenza:
costruttore (piattaforma: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public deploy: Deploy, private alertCtrl: AlertController, private loadingCtrl: LoadingController) // ...
Poiché stiamo ancora sviluppando l'app, imposta il canale di implementazione su dev:
this.deploy.channel = 'dev';
In seguito, se desideri passare al canale di produzione, puoi semplicemente rimuovere questa riga come produzione è il canale predefinito per le distribuzioni. Se hai creato un altro canale, puoi anche includere il suo nome qui.
È possibile accedere a una serie di istantanee che sono state precedentemente scaricate dall'app. Il istantanee variabile è una matrice che contiene gli ID di ciascuna istantanea.
Accentsconagua
this.deploy.getSnapshots (). then ((snapshots) => console.log ('ora sta ottenendo istantanee ...'); console.log (istantanee););Non utilizzeremo realmente le istantanee per questa app, ma è bene sapere che l'app sta memorizzando questo tipo di informazioni per un uso futuro. Nell'esempio seguente, esamineremo l'elenco delle vecchie istantanee e cancelleremo ciascuna per liberare spazio sul dispositivo.
snapshots.forEach ((snapshot_id) => this.deploy.getMetadata (snapshot_id) .then ((metadata) => // fa qualcosa con i metadati); // elimina lo snapshot this.deploy.deleteSnapshot (snapshot_id); );
Per verificare la presenza di aggiornamenti, utilizzare il dai un'occhiata() metodo. Questo restituisce un valore booleano che ti dice se una nuova istantanea è disponibile o meno. Per impostazione predefinita, l'ultima implementazione creerà una nuova istantanea. Pertanto, verrà applicata solo la distribuzione più recente se si apportano due aggiornamenti consecutivi.
this.deploy.check (). then ((snapshotAvailable: boolean) => // ...);
Se un'istantanea è disponibile per il download, è possibile ottenere ulteriori informazioni a riguardo chiamando il getMetaData () metodo. Questi metadati possono essere aggiunti a una distribuzione tramite il dashboard dell'app Ionic. Le coppie valore-chiave possono essere aggiunte qui e ciascuna di esse diventa disponibile come proprietà per il metadati oggetto. Successivamente, utilizzeremo i metadati per personalizzare i messaggi visualizzati nell'app ogni volta che un nuovo aggiornamento diventa disponibile.
if (snapshotAvailable) // get metadata this.deploy.getMetadata (). then ((metadata) => console.log ('now getting metadata ...'); console.log (metadata);); Successivamente, mostra un messaggio di avviso di conferma per consentire all'utente di decidere se scaricare o meno l'aggiornamento:
let alert = this.alertCtrl.create (title: 'Versione' + metadata.version + 'è disponibile', messaggio: 'Vuoi scaricare questo aggiornamento?', pulsanti: [text: 'No', ruolo: 'cancel', handler: () => // fai alcune cose (ad esempio aggiungi codice analitico per contare quanti utenti non hanno applicato l'aggiornamento), text: 'Yes', handler: () => // procedere con il download dell'aggiornamento]); alert.present ();
Potresti essere preoccupato che questo possa infastidire l'utente se continua a ricevere la richiesta di aggiornare la propria app se continua a rispondere "No". Più spesso che no, però, questa è in realtà una buona cosa. Non ci dovrebbe essere alcun motivo per cui un utente rifiuta un aggiornamento se migliorerà la sua esperienza.
Quando l'utente è d'accordo, puoi andare avanti e scaricare l'aggiornamento. Questo potrebbe richiedere del tempo a seconda della tua connessione Internet e del tuo dispositivo. Una volta scaricato l'aggiornamento, mostra un caricatore per attirare l'attenzione dell'utente mentre estrae. Una volta estratto, ricarica l'app e nascondi il caricatore.
this.deploy.download (). then (() => // il download è fatto console.log ('download completato!'); // mostra loader let loading = this.loadingCtrl.create (content: 'Now reloading l'app ... '); loading.present (); // estrae l'aggiornamento this.deploy.extract (). then (() => console.log (' Estrai completato! '); this.deploy.load ( // ricarica l'app per applicare le modifiche a console.log ('reload completed!'); loading.dismiss ();););Dai un'occhiata a ciò che è aggiornato app.components.ts il file dovrebbe apparire come dopo tutti quei cambiamenti.
Ora che viene aggiunto il codice per il controllo dei deployment, possiamo costruire l'app e installarla su un dispositivo. Il resto delle modifiche che introdurremo verrà principalmente trasferito attraverso il servizio Ionic Deploy.
Vai avanti e aggiungi la piattaforma Android al tuo progetto Ionic e costruisci il .apk file con i seguenti comandi:
piattaforma ionica aggiungere Android Android costruire ionico
Questo creerà un Android-debug.apk file all'interno del piattaforme / android / costruire / uscite / apk cartella. Copia sul tuo dispositivo e installalo.
Ora è il momento per noi di apportare alcune modifiche all'app. Per provarlo, apporta alcune modifiche minori all'interfaccia utente dell'app. E ora puoi caricare le modifiche:
caricamento ionico
Una volta completato il caricamento, una nuova voce verrà elencata nel tuo Attività Recente. Clicca il modificare link di quella voce. Ciò ti consentirà di aggiungere una nota, le informazioni sulla versione e i metadati a quella versione specifica. È sempre una buona idea aggiungere una nota in modo da sapere di cosa tratta questa specifica versione. Dopo averlo fatto, fai clic su Metadati scheda e aggiungere il seguente:
Quindi fare clic sul Salvare pulsante per confermare le modifiche. Infine, fai clic su schierare pulsante per distribuire la versione. Una volta che l'app riceve la modifica, i metadati che hai fornito diventano disponibili.
Puoi vedere che ora mostra il numero di versione della versione:
A volte è possibile eseguire un aggiornamento con Ionic Deploy, ma anche ricostruire e spedire tali pacchetti all'app in bundle nell'App Store. Attenzione, perché Ionic non sa che la tua app contiene già quell'aggiornamento e la tua app chiederà all'utente di scaricare gli ultimi aggiornamenti la prima volta che viene eseguita l'app.
La funzione di versione può aiutare a prevenire questo. Con la funzione di versione, puoi specificare la versione dell'app che può ricevere gli aggiornamenti:
È possibile aggiungere informazioni sulla versione facendo clic sul MODIFICARE link su una versione specifica, e poi andare al VERSIONING scheda. Da lì, puoi specificare le versioni (iOS o Android) che desideri utilizzare come target.
Quello che fa Ionic è confrontare questa versione con quella che hai specificato nel tuo config.xml file:
Se la versione dell'app cade tra il minimo e massimo specificato, la versione viene prelevata. E se la versione dell'app è uguale a equivalente valore della versione, la versione viene ignorata. Quindi per lo screenshot qui sopra, se la versione indicata nel config.xml il file è 0.0.1, la versione verrà ignorata dall'app.
Il prossimo cambiamento che faremo è mostrare un'immagine.
La prima cosa che devi fare è trovare un'immagine. Inseriscilo nel src / attività / img cartella e collegarlo dal src / pages / home / home.html file:
Casa 
Versione 4
Carica le modifiche come nuova release su Ionic Deploy.
caricamento ionico
Una volta caricato, vai alla dashboard dell'app Ionic e aggiorna il rilascio con una nota e il corrispondente versione nei metadati. Salva le modifiche e distribuiscile.
L'apertura dell'app dovrebbe ora raccogliere questa nuova versione e l'aggiornamento applicherà le modifiche all'interfaccia utente.
Per impostazione predefinita, Ionic Deploy dispone di tre canali che è possibile distribuire su: dev, messa in scena, e produzione. Ma puoi anche creare nuovi canali per la tua app per ascoltare gli aggiornamenti. Puoi farlo facendo clic sull'icona dell'ingranaggio sul Distribuzione ionica scheda nella dashboard dell'app:
Questo è utile per cose come test A / B, quindi puoi inviare modifiche specifiche solo a determinati utenti.
Non dimenticare di aggiornare il tuo codice per utilizzare quel canale di distribuzione specifico:
this.deploy.channel = 'me';
Se hai inserito qualcosa che non dovresti avere, puoi utilizzare la funzione di rollback. Con questa funzione, puoi inviare una versione precedente ai tuoi utenti.
Tieni presente che non è possibile correggere il codice danneggiato eseguendo il rollback! Ad esempio, se si verifica un errore di sintassi nel codice JavaScript, si interromperà l'intera app e il codice per il controllo degli aggiornamenti non verrà mai eseguito. Per correggere questi tipi di errori, l'unica cosa che puoi fare è rilasciare una nuova versione sull'app store.
Puoi eseguire il rollback cliccando su Tornare a qui collegamento su una data distribuzione.
Questo ti chiederà di confermare se vuoi eseguire il rollback o meno. Una volta confermato, verrà automaticamente impostato come versione corrente. Quindi il codice per il rilevamento di nuove versioni lo riconoscerà come l'ultima versione e richiederà l'aggiornamento degli utenti. Le versioni aggiornate avranno un'icona di aggiornamento arancione.
È inoltre possibile distribuire una versione specifica facendo clic sul schierare collegamento accanto alla versione che si desidera distribuire.
È possibile automatizzare la distribuzione degli aggiornamenti delle app su Ionic Deploy con ganci Git. Gli hook Git ti consentono di eseguire script prima o dopo specifici eventi Git come commit, push e receive. In questo caso useremo il pre-push gancio per caricare le nostre modifiche su Ionic Cloud subito prima del spingere comando fa la sua cosa.
Iniziare rinominando il campione pre-push script per il nome effettivo riconosciuto da Git:
mv .git / hooks / pre-push.sample .git / hooks / pre-push
Apri il file nel tuo editor di testo e sostituiscilo con il seguente:
#! / bin / sh echo ora sta premendo le modifiche su Ionic deploy upload ionico
Ora invia le modifiche e trasferiscile a un repository remoto:
aggiungi git. git commit -m "apporta alcune modifiche ..." git push origin master
Subito prima del spingere il comando è eseguito, caricamento ionico sarà eseguito.
Puoi anche distribuire automaticamente la versione se desideri:
#! / bin / sh echo ora sta premendo le modifiche su Ionic deploy ionic upload --deploy dev
Tuttavia, ciò non funzionerà per il nostro esempio, poiché non è possibile specificare i metadati!
Se si desidera eseguire ulteriormente il processo di distribuzione, si consiglia di controllare l'API HTTP per Ionic Deploy. Ciò consente di distribuire in modo programmatico le modifiche all'app dal server di Continuous Integration. Ti consente di aggiornare anche i numeri di versione e i metadati sulle distribuzioni. Tutto questo può essere fatto automaticamente e senza mai toccare la dashboard dell'app Ionic.
Questo è tutto! In questo tutorial hai imparato a conoscere Ionic Deploy e come puoi utilizzarlo per inviare aggiornamenti alla tua app Ionic. Questa è una potente funzione che ti consente di creare un robusto sistema di controllo delle versioni e degli aggiornamenti nella tua app.
Restate sintonizzati per ulteriori contenuti su Ionic e sui servizi cloud come Ionic Deploy! Se vuoi un'introduzione completa per iniziare con lo sviluppo di app di Ionic 2, consulta il nostro corso qui su Envato Tuts+.
E dai un'occhiata ad alcuni dei nostri altri post sullo sviluppo di app per dispositivi mobili Ionic e cross-platform.
