Share
Een van de sterke punten van Ionic is de dienstverlening die het biedt bovenop het framework. Dit omvat services voor het verifiëren van gebruikers van uw app, pushmeldingen en analyses. In deze serie leren we over die services door apps te maken die hiervan gebruikmaken.
In deze post gaan we Ionic Deploy bekijken. Met deze service kunt u wijzigingen in uw Ionic-app publiceren zonder dat u deze opnieuw hoeft te compileren en opnieuw moet indienen bij de app store. Dit is erg handig voor het snel pushen van bugfixes, kleine updates en andere cosmetische wijzigingen aan de app. Met de functie "Kanalen implementeren" kunt u ook A / B-tests uitvoeren door verschillende codewijzigingen in verschillende implementatiekanalen te introduceren.
Niet alle wijzigingen die u in uw app wilt aanbrengen, kunnen echter worden gepusht met Ionic Deploy. Alleen wijzigingen in uw HTML, CSS, JavaScript en items onder uw www map kan op deze manier worden gepusht. Binaire wijzigingen zoals updates van de Cordova-platformversie, Cordova-plug-ins (bestaande bijwerken of nieuwe toevoegen) en app-items zoals het pictogram en het startscherm kunnen niet worden gepusht met Ionic Deploy.
In uw Ionic-app kunt u code hebben die controleert op beschikbare implementaties (updates). Standaard zal het controleren op implementaties in de productie kanaal. Maar u kunt ook andere kanalen opgeven om updates van te ontvangen.
U kunt vervolgens uw wijzigingen pushen met behulp van de ionische upload commando. Hiermee worden uw wijzigingen in Ionic Cloud geüpload. Nadat ze zijn geüpload, kun je kiezen naar welk kanaal je wilt distribueren en of je dit nu of op een later tijdstip wilt implementeren.
Als je implementeert naar een kanaal dat je app bewaakt, wordt de code in je app geactiveerd om uit te voeren. Die code is vervolgens verantwoordelijk voor het downloaden van de update, het extraheren ervan en het opnieuw laden van de app om de wijzigingen toe te passen.
In dit bericht gebruik je de opdrachtregel om de wijzigingen door te voeren en te testen of de implementatie werkt zoals verwacht. Om de dingen eenvoudig te houden, zullen de wijzigingen die we gaan introduceren voornamelijk naar de gebruikersinterface gaan. Voor elke implementatie gaan we het versienummer wijzigen dat wordt weergegeven voor de app. We gaan ook de afbeelding wijzigen die in de app wordt weergegeven om aan te geven dat items ook kunnen worden bijgewerkt.
Nu dat je een idee hebt van hoe Ionic Deploy werkt en wat je gaat bouwen, is het tijd om je handen vuil te maken door daadwerkelijk een app te maken die gebruik maakt van Ionic Deploy. Begin met het opstarten van een nieuwe Ionische app:
ionische start --v2 deployApp-tabbladen
Met de bovenstaande opdracht maakt u een nieuwe app met behulp van de tabsjabloon. Navigeer binnen de deployApp directory zodra het klaar is met installeren:
cd deployApp
Vervolgens moet u de installeren @ Ionogene / cloud-hoekige pakket. Dit is de JavaScript-bibliotheek voor de Ionic Cloud-service. Hiermee kunnen we via JavaScript-code communiceren met de Ionic Deploy-service en andere Ionic-services.
npm install @ ionic / cloud-angle - save
Als dat klaar is met installeren, kun je nu een nieuwe Ionic-app initialiseren op basis van deze app. Voordat u dit doet, moet u ervoor zorgen dat u al een Ionic-account hebt. Het opdrachtregelhulpprogramma vraagt u om u aan te melden met uw Ionic-account als u dit nog niet hebt gedaan.
ionisch io init
Hiermee maak je een nieuwe app met de naam "deployApp" (of hoe je je app ook hebt genoemd toen je een nieuwe Ionic-app opstartte) onder het dashboard van je Ionische apps.
Nadat je hebt gecontroleerd of de app wordt vermeld op je Ionic-dashboard, ga je terug naar de terminal en installeer je de plug-in Deploy:
cordova plugin add ionic-plugin-deploy --save
Merk op dat deze plugin degene is die daadwerkelijk het zware werk doet. De @ Ionogene / cloud-hoekige package stelt eenvoudig de API's beschikbaar die nodig zijn om eenvoudig met de Ionic-services in een Ionic-app te werken.
Nu u alle benodigde instellingen hebt gedaan, is het tijd om de code toe te voegen voor het controleren en toepassen van updates. Maar voordat je dat doet, dien je eerst de app via je browser:
ionische serveren
Hiermee kunt u controleren of de code die u hebt toegevoegd werkt of niet. Op deze manier kunt u de nodige correcties aanbrengen zodra u een foutmelding krijgt.
Open de src / app / app.module.ts het dossier. Onder de splashscreen importeer en importeer de services die nodig zijn voor het werken met Ionic Cloud:
importeer SplashScreen vanuit '@ ionic-native / splash-screen'; // voeg het volgende toe: importeer CloudSettings, CloudModule uit '@ ionic / cloud-angular';
Voeg vervolgens de APP_ID van je Ionische app. U vindt dit op uw Ionic app-dashboard, direct onder de naam van de app.
const cloudSettings: CloudSettings = 'core': 'app_id': 'YOUR IONIC APP ID';
Zodra je dat hebt toegevoegd, kun je het nu opnemen als een van de modules van de app:
@ NgModule (aangiften: [// ...], import: [BrowserModule, IonicModule.forRoot (MyApp), CloudModule.forRoot (cloudSettings) // <-- add this ], );
Open vervolgens de src / app / app.component.ts het dossier. Direct onder de TabsPage import, onder meer het volgende:
importeer TabsPage uit '... / pages / tabs / tabs'; // voeg deze toe: import AlertController, LoadingController van 'ionic-angular'; importeer Implementeren vanuit '@ ionic / cloud-angular'; // importeer de Deploy-service van @ ionic / cloud-angle package
In de constructor (), voeg de services toe die we eerder hebben geïmporteerd:
constructor (platform: Platform, statusbalk: StatusBar, splashScreen: SplashScreen, public deploy: deploy, private alertCtrl: AlertController, private loadingCtrl: LoadingController) // ...
Aangezien we de app nog steeds aan het ontwikkelen zijn, stelt u het implementatiekanaal in op dev:
this.deploy.channel = 'dev';
Later, als u naar het productiekanaal wilt overschakelen, kunt u deze regel gewoon verwijderen als productie is het standaardkanaal voor implementaties. Als u een ander kanaal hebt gemaakt, kunt u hier ook de naam opnemen.
U hebt toegang tot een reeks snapshots die eerder door de app zijn gedownload. De snapshots variabele is een array met de ID's van elk van de snapshots.
Accentsconagua
this.deploy.getSnapshots (). then ((snapshots) => console.log ('nu snapshots ophalen ...'); console.log (snapshots););We zullen niet echt snapshots gebruiken voor deze app, maar het is goed om te weten dat de app dit soort informatie opslaat voor later gebruik. In het onderstaande voorbeeld gaan we door de lijst met oude snapshots en verwijderen we elke foto om ruimte vrij te maken op het apparaat.
snapshots.forEach ((snapshot_id) => this.deploy.getMetadata (snapshot_id) .then ((metadata) => // doe iets met metadata) / // verwijder snapshot this.deploy.deleteSnapshot (snapshot_id); );
Gebruik de. Om te controleren op updates controleren() methode. Dit retourneert een Booleaanse waarde die aangeeft of een nieuwe momentopname beschikbaar is of niet. Standaard zal de nieuwste deploy een nieuwe snapshot maken. Dus alleen de nieuwste implementatie wordt toegepast als u twee updates achter elkaar pusht.
this.deploy.check (). then ((snapshotAvailable: boolean) => // ...);
Als een momentopname beschikbaar is om te downloaden, kunt u hierover meer informatie krijgen door te bellen naar getMetaData () methode. Deze metadata kunnen worden toegevoegd aan een implementatie via het Ionic-app-dashboard. Key-waardeparen kunnen hier worden toegevoegd en elk ervan wordt beschikbaar als een eigenschap voor de metadata voorwerp. Later zullen we metadata gebruiken om de berichten in de app aan te passen telkens wanneer een nieuwe update beschikbaar komt.
if (snapshotAvailable) // download metadata this.deploy.getMetadata (). then ((metadata) => console.log ('nu metadata ophalen ...'); console.log (metadata);); Laat vervolgens een bevestigingsbericht zien om de gebruiker te laten beslissen of hij of zij de update wil downloaden of niet:
let alert = this.alertCtrl.create (title: 'Version' + metadata.version + 'is available', message: 'Wilt u deze update downloaden?', buttons: [text: 'No', rol: 'annuleren', handler: () => // doe wat dingen (voeg bijvoorbeeld een analysecode toe om te tellen hoeveel gebruikers de update niet hebben toegepast), text: 'Yes', handler: () => // ga verder met het downloaden van de update]); alert.present ();
U zou zich zorgen kunnen maken dat dit de gebruiker zou irriteren als ze de prompt blijven ontvangen om hun app bij te werken als ze "Nee" blijven antwoorden. Vaker dan dat, echter, is dit eigenlijk een goede zaak. Er mag geen reden zijn voor een gebruiker om een update te weigeren als deze zijn of haar ervaring zal verbeteren.
Wanneer de gebruiker hiermee instemt, kunt u doorgaan en de update downloaden. Dit kan enige tijd duren, afhankelijk van uw internetverbinding en uw apparaat. Zodra de update is gedownload, laat u een lader zien om de aandacht van de gebruiker te trekken terwijl deze wordt uitgepakt. Nadat de app is uitgepakt, laadt u de app opnieuw en verbergt u de lader.
this.deploy.download (). then (() => // download is klaar console.log ('download voltooid!'); // show loader laat laden = this.loadingCtrl.create (content: 'Now reloading de app ... '); loading.present (); // extraheer de update this.deploy.extract (). then (() => console.log (' extract completed! '); this.deploy.load ( ); // herlaad de app om de wijzigingen console.log ('herladen voltooid!') toe te passen; loading.dismiss ();););Bekijk de bijgewerkte versie app.components.ts bestand zou eruit moeten zien na al die veranderingen.
Nu de code voor het controleren van de implementaties is toegevoegd, kunnen we de app bouwen en op een apparaat installeren. De rest van de wijzigingen die we gaan introduceren, zal voornamelijk worden doorgevoerd via de Ionic Deploy-service.
Ga je gang en voeg het Android-platform toe aan je Ionische project en bouw het .apk bestand met de volgende opdrachten:
ionisch platform add android ionic build android
Dit zal een maken android-debug.apk bestand in de platforms / android / build / uitgangen / APK map. Kopieer het naar uw apparaat en installeer het.
Nu is het tijd voor ons om enkele wijzigingen aan te brengen in de app. Om het uit te proberen, maakt u enkele kleine wijzigingen in de app-gebruikersinterface. En nu kunt u de wijzigingen uploaden:
ionische upload
Zodra het klaar is met uploaden, wordt een nieuw item weergegeven in uw Recente activiteit. Klik op de Bewerk link van dat bericht. Hiermee kun je een notitie, versie-informatie en metadata toevoegen aan die specifieke release. Het is altijd een goed idee om een notitie toe te voegen, zodat je weet waar die specifieke release over gaat. Zodra u dit hebt gedaan, klikt u op de metadata tab en voeg het volgende toe:
Klik vervolgens op de Opslaan knop om uw wijzigingen vast te leggen. Klik ten slotte op de Inzetten om de release te implementeren. Zodra de app de wijziging oppikt, worden de metagegevens die u hebt opgegeven ook beschikbaar.
Je kunt zien dat het nu het versienummer van de release laat zien:
Soms push je een update met Ionic Deploy, maar herbouw en verzend je die pakketten ook naar de gebundelde app in de App Store. Maar pas op, want Ionic weet niet dat uw app al die update bevat en uw app zal de gebruiker vragen om de nieuwste updates te downloaden wanneer uw app voor de eerste keer wordt uitgevoerd.
De versie-indeling kan dit helpen voorkomen. Met de versie-indeling kunt u de versie van de app opgeven die de updates kan ontvangen:
U kunt versie-informatie toevoegen door op de BEWERK koppelen aan een specifieke release en vervolgens naar de versiebeheer tab. Hier kunt u de versies (iOS of Android) opgeven die u wilt targeten.
Wat Ionic doet, is deze versie vergelijken met de versie die u in uw hebt opgegeven config.xml het dossier:
Als de app-versie valt tussen de minimum en maximum opgegeven, wordt de release opgehaald. En als de app-versie gelijk is aan de gelijkwaardig versiewaarde wordt de release genegeerd. Dus voor de bovenstaande screenshot, als de versie aangegeven in de config.xml bestand is 0.0.1, de release wordt genegeerd door de app.
De volgende verandering die we gaan maken is om een afbeelding te tonen.
Het eerste dat je moet doen is een afbeelding vinden. Zet het in de src / assets / img map en koppel deze vanuit de src / pages / home / home.html het dossier:
Huis 
Versie 4
Upload uw wijzigingen als een nieuwe release voor Ionic Deploy.
ionische upload
Ga na het uploaden naar het Ionic-app-dashboard en werk de release bij met een notitie en het bijbehorende bericht versie in de metadata. Sla de wijzigingen op en implementeer deze.
Het openen van de app zou nu deze nieuwe versie moeten oppikken en bij het updaten zou de wijziging in de gebruikersinterface worden toegepast.
Standaard heeft Ionic Deploy drie kanalen die u kunt inzetten om: dev, regie, en productie. Maar je kunt ook nieuwe kanalen maken voor je app om updates te beluisteren. U kunt dat doen door te klikken op het tandwielpictogram op de Ionic Deploy tab op uw app-dashboard:
Dit is handig voor zaken als A / B-testen, dus u kunt specifieke wijzigingen alleen naar specifieke gebruikers pushen.
Vergeet niet om uw code bij te werken om dat specifieke implementatiekanaal te gebruiken:
this.deploy.channel = 'mij';
Als je iets hebt gepusht dat je niet had moeten doen, zou je de rollback-functie kunnen gebruiken. Met deze functie kunt u een eerdere release terugsturen naar uw gebruikers.
Merk op dat je gebroken code niet kunt herstellen door terug te rollen! Als u bijvoorbeeld een syntaxisfout in uw JavaScript-code heeft, wordt de hele app verbroken en wordt de code voor het controleren op updates nooit uitgevoerd. Om dit soort fouten op te lossen, kun je alleen een nieuwe versie in de app store vrijgeven.
U kunt terugdraaien door op de. Te klikken Ga terug naar hier koppeling op een bepaalde deploy.
Dit zal je vragen om te bevestigen of je wilt terugdraaien of niet. Eenmaal bevestigd, wordt deze automatisch ingesteld als de huidige release. Dus de code voor het ophalen van nieuwe releases zal het herkennen als de nieuwste release en zal gebruikers vragen om bij te werken. Gerolde versies hebben een oranje verversingspictogram.
U kunt ook een specifieke release implementeren door op de knop te klikken Inzetten link naast de release die u wilt implementeren.
U kunt de inzet van app-updates op Ionic Deploy automatiseren met Git-hooks. Met Git hooks kun je scripts uitvoeren voor of na specifieke Git-evenementen zoals commit, push en receive. In dit geval zullen we de pre-push haak om onze wijzigingen in Ionic Cloud te uploaden vlak voor de git push commando doet zijn ding.
Begin met het hernoemen van het monster pre-push script naar de echte naam herkend door Git:
mv .git / hooks / pre-push.sample .git / hooks / pre-push
Open het bestand in uw teksteditor en vervang de inhoud door het volgende:
#! / bin / sh echo pusht nu veranderingen in Ionic implementeert ionische upload
Breng nu je wijzigingen aan en push ze naar een remote repo:
git add. git commit -m "make some changes ..." git push origin master
Vlak voor de git push commando wordt uitgevoerd, ionische upload zal worden uitgevoerd.
U kunt de release ook automatisch implementeren als u wilt:
#! / bin / sh echo pusht nu wijzigingen in Ionic implementeert ionische upload --deploy dev
Dit zal echter niet werken voor ons voorbeeld, omdat u geen metadata kunt specificeren!
Als u het implementatieproces verder wilt nemen, raad ik u aan de HTTP-API voor Ionic Deploy te bekijken. Hiermee kunt u op uw Continuous Integration-server wijzigingen in uw app programmatisch implementeren. Hiermee kunt u ook de versienummers en metagegevens van uw implementaties bijwerken. Dit alles kan automatisch worden gedaan zonder ooit het Ionic-app-dashboard te raken.
Dat is het! In deze tutorial heb je geleerd over Ionic Deploy en hoe je het kunt gebruiken om updates naar je Ionische app te pushen. Dit is een krachtige functie waarmee u een robuust versiebeheer en updatesysteem kunt bouwen in uw app.
Blijf op de hoogte voor meer inhoud op Ionic en op cloud-diensten zoals Ionic Deploy! Als je een complete introductie wilt om te beginnen met de ontwikkeling van Ionic 2-apps, bekijk dan onze cursus hier op Envato Tuts+.
En bekijk enkele van onze andere berichten over Ionische en cross-platform mobiele app-ontwikkeling.
