Erste Schritte mit Ionic Services: Bereitstellen

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

Eine der Stärken von Ionic sind die Services, die es zusätzlich zum Framework anbietet. Dazu gehören Dienste zur Authentifizierung von Benutzern Ihrer App, Push-Benachrichtigungen und Analysen. In dieser Serie lernen wir diese Dienste kennen, indem wir Apps erstellen, die sie verwenden.

In diesem Beitrag werfen wir einen Blick auf Ionic Deploy. Mit diesem Dienst können Sie Änderungen an Ihrer Ionic-App veröffentlichen, ohne sie neu kompilieren und erneut an den App Store senden zu müssen. Dies ist sehr nützlich, um schnell Fehlerkorrekturen, kleinere Updates und andere kosmetische Änderungen an der App zu veröffentlichen. Mit der Funktion "Kanäle bereitstellen" können Sie auch A/B-Tests durchführen, indem Sie verschiedene Codeänderungen an verschiedenen Bereitstellungskanälen vornehmen.

Nicht alle Änderungen, die Sie an Ihrer App vornehmen möchten, können jedoch mit Ionic Deploy gepusht werden. Nur Änderungen an Ihrem HTML-, CSS-, JavaScript- und Assets in Ihrem www-Verzeichnis können auf diese Weise übertragen werden. Binäre Änderungen wie Updates der Cordova-Plattformversion, Cordova-Plugins (entweder Aktualisierung vorhandener oder Hinzufügen neuer) und App-Assets wie das Symbol und der Begrüßungsbildschirm können mit Ionic Deploy nicht übertragen werden.

Wie es funktioniert

In Ihrer Ionic-App können Sie Code verwenden, der nach verfügbaren Bereitstellungen(Updates) sucht. Standardmäßig wird nach Bereitstellungen im production-Kanal gesucht. Sie können aber auch andere Kanäle angeben, von denen Updates empfangen werden sollen.

Anschließend können Sie Ihre Änderungen mit dem ionic upload-Befehl übertragen. Dadurch werden Ihre Änderungen in die Ionic Cloud hochgeladen. Nach dem Hochladen können Sie auswählen, auf welchem Kanal Sie die Bereitstellung durchführen möchten und ob Sie jetzt oder zu einem späteren Zeitpunkt bereitstellen möchten.

Die Bereitstellung auf einem von Ihrer App überwachten Kanal löst die Ausführung des Codes in Ihrer App aus. Dieser Code ist dann dafür verantwortlich, das Update herunterzuladen, zu extrahieren und die App neu zu laden, um die Änderungen zu übernehmen.

Was Sie bauen werden

In diesem Beitrag verwenden Sie die Befehlszeile, um die Änderungen zu übertragen und zu testen, ob die Bereitstellung wie erwartet funktioniert. Der Einfachheit halber betreffen die Änderungen, die wir einführen werden, hauptsächlich die Benutzeroberfläche. Bei jeder Bereitstellung ändern wir die für die App angezeigte Versionsnummer. Wir werden auch das in der App angezeigte Bild ändern, um zu zeigen, dass auch Assets aktualisiert werden können.

Einrichten

Nachdem Sie nun eine Vorstellung davon haben, wie Ionic Deploy funktioniert und was Sie erstellen werden, ist es an der Zeit, sich die Hände schmutzig zu machen, indem Sie tatsächlich eine App erstellen, die Ionic Deploy verwendet. Beginnen Sie mit dem Bootstrapping einer neuen Ionic-App:

ionic start --v2 deployApp tabs

Der obige Befehl erstellt eine neue App mithilfe der Registerkartenvorlage. Navigieren Sie nach Abschluss der Installation im Verzeichnis deployApp:

cd deployApp

Danach müssen Sie das Paket @ionic/cloud-angular installieren. Das ist die JavaScript-Bibliothek für den Ionic Cloud-Dienst. Sie ermöglicht uns die Interaktion mit dem Ionic Deploy-Dienst und anderen Ionic-Diensten über JavaScript-Code.

npm install @ionic/cloud-angular --save

Sobald die Installation abgeschlossen ist, können Sie jetzt eine neue Ionic-App basierend auf dieser App initialisieren. Stellen Sie vorher sicher, dass Sie bereits über ein Ionic-Konto verfügen. Das Befehlszeilentool fordert Sie auf, sich mit Ihrem Ionic-Konto anzumelden, falls Sie dies noch nicht getan haben.

ionic io init

Dadurch wird eine neue App namens "deployApp" (oder wie auch immer Sie Ihre App beim Bootstrapping einer neuen Ionic-App genannt haben) unter Ihrem Ionic-Apps-Dashboard erstellt.

Sobald Sie überprüft haben, dass die App in Ihrem Ionic-Dashboard aufgeführt ist, kehren Sie zum Terminal zurück und installieren Sie das Deploy-Plugin:

cordova plugin add ionic-plugin-deploy --save

Beachten Sie, dass dieses Plugin dasjenige ist, das tatsächlich die schwere Arbeit erledigt. Das @ionic/cloud-angular-Paket stellt einfach die APIs bereit, die für die einfache Arbeit mit den Ionic-Diensten in einer Ionic-App erforderlich sind.

Arbeiten mit Bereitstellungen

Nachdem Sie alle erforderlichen Einstellungen vorgenommen haben, ist es an der Zeit, den Code zum Überprüfen und Anwenden von Updates hinzuzufügen. Aber bevor Sie das tun, stellen Sie die App zuerst über Ihren Browser bereit:

ionic serve

Auf diese Weise können Sie überprüfen, ob der von Ihnen hinzugefügte Code funktioniert oder nicht. Auf diese Weise können Sie die notwendigen Korrekturen vornehmen, sobald Sie einen Fehler sehen.

Öffnen Sie die Datei src/app/app.module.ts. Importieren Sie unter dem SplashScreen-Import die Dienste, die für die Arbeit mit Ionic Cloud erforderlich sind:

import { SplashScreen } from '@ionic-native/splash-screen';

// add the following:
import { CloudSettings, CloudModule } from '@ionic/cloud-angular';

Fügen Sie als Nächstes die app_id Ihrer Ionic-App hinzu. Sie finden diese auf Ihrem Ionic-App-Dashboard direkt unter dem Namen der App.

const cloudSettings: CloudSettings = {
  'core': {
    'app_id': 'YOUR IONIC APP ID'
  }
};

Sobald Sie das hinzugefügt haben, können Sie es jetzt als eines der Module der App einschließen:

@NgModule({
    declarations: [
        //...
    ],
    imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp),
        CloudModule.forRoot(cloudSettings) // <-- add this
    ],
});

Öffnen Sie als Nächstes die Datei src/app/app.component.ts. Fügen Sie direkt unter dem TabsPage-Import Folgendes hinzu:

import { TabsPage } from '../pages/tabs/tabs';

// add these:
import { AlertController, LoadingController } from 'ionic-angular';
import { Deploy } from '@ionic/cloud-angular'; // import the Deploy service from @ionic/cloud-angular package

Fügen Sie im constructor() die zuvor importierten Dienste hinzu:

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public deploy: Deploy, private alertCtrl: AlertController, private loadingCtrl: LoadingController){
    //...
}

Einstellen des Bereitstellungskanals

Da wir die App noch entwickeln, legen Sie den Bereitstellungskanal auf dev fest:

this.deploy.channel = 'dev';

Wenn Sie später zum Produktionskanal wechseln möchten, können Sie diese Zeile einfach entfernen, da production der Standardkanal für Bereitstellungen ist. Wenn Sie einen anderen Kanal erstellt haben, können Sie hier auch seinen Namen angeben.

Arbeiten mit Schnappschüssen

Sie können auf eine Reihe von Snapshots zugreifen, die zuvor von der App heruntergeladen wurden. Die Variable snapshots ist ein Array, das die IDs der einzelnen Snapshots enthält.

this.deploy.getSnapshots().then((snapshots) => {
    console.log('now getting snapshots...');
    console.log(snapshots);
});

Wir werden keine Snapshots für diese App verwenden, aber es ist gut zu wissen, dass die App diese Art von Informationen für die spätere Verwendung speichert. Im folgenden Beispiel gehen wir die Liste der alten Snapshots durch und löschen jeden, um Speicherplatz auf dem Gerät freizugeben.

snapshots.forEach((snapshot_id) => {
    this.deploy.getMetadata(snapshot_id).then((metadata) => {
      // do something with metadata
    });
    // delete snapshot
    this.deploy.deleteSnapshot(snapshot_id);
});

Nach Updates suchen

Um nach Updates zu suchen, verwenden Sie die Methode check(). Dies gibt einen booleschen Wert zurück, der Ihnen mitteilt, ob ein neuer Snapshot verfügbar ist oder nicht. Standardmäßig erstellt die neueste Bereitstellung einen neuen Snapshot. Es wird also nur die neueste Bereitstellung angewendet, wenn Sie zwei Updates nacheinander per Push übertragen haben.

this.deploy.check().then((snapshotAvailable: boolean) => {
    // ...
});

Wenn ein Snapshot zum Download zur Verfügung steht, können Sie durch Aufrufen der Methode getMetaData() zusätzliche Informationen darüber abrufen. Diese Metadaten können über das Ionic-App-Dashboard zu einer Bereitstellung hinzugefügt werden. Hier können Schlüssel-Wert-Paare hinzugefügt werden, die jeweils als Eigenschaft für das metadata-Objekt verfügbar sind. Später werden wir Metadaten verwenden, um die in der App angezeigten Nachrichten jedes Mal anzupassen, wenn ein neues Update verfügbar ist.

if (snapshotAvailable) {
    // get metadata
    this.deploy.getMetadata().then((metadata) => {
        console.log('now getting metadata..');
        console.log(metadata);
    });
}

Zeigen Sie als Nächstes eine Bestätigungsmeldung an, damit der Benutzer entscheiden kann, ob er das Update herunterladen möchte oder nicht:

let alert = this.alertCtrl.create({
    title: 'Version ' + metadata.version + ' is available',
    message: 'Do you want to download this update?',
    buttons: [
      {
        text: 'No',
        role: 'cancel',
        handler: () => {
          // do some stuff (e.g. add analytics code for counting how many users didn't apply the update)
        }
      },
      {
        text: 'Yes',
        handler: () => {          
            // proceed with downloading the update
        }
      }
    ]
});

alert.present();

Sie könnten befürchten, dass dies den Benutzer verärgern würde, wenn er weiterhin die Aufforderung zum Aktualisieren seiner App erhält, wenn er weiterhin mit "Nein" antwortet. Meistens ist dies jedoch eine gute Sache. Es sollte keinen Grund für einen Benutzer geben, ein Update abzulehnen, wenn es seine Erfahrung verbessert.

Herunterladen und Anwenden von Updates

Wenn der Benutzer zustimmt, können Sie das Update herunterladen. Dies kann je nach Internetverbindung und Gerät eine Weile dauern. Sobald das Update heruntergeladen wurde, zeigen Sie einen Loader an, um die Aufmerksamkeit des Benutzers auf sich zu ziehen, während es extrahiert wird. Laden Sie die App nach dem Extrahieren neu und blenden Sie den Loader aus.

this.deploy.download().then(() => {
    // download is done
    console.log('download completed!');
    // show loader
    let loading = this.loadingCtrl.create({
      content: 'Now reloading the app...'
    });

    loading.present();
    
    // extract the update
    this.deploy.extract().then(() => {
      console.log('extract completed!');
      this.deploy.load(); // reload the app to apply the changes

      console.log('reload completed!');
      loading.dismiss();
    });
});

Sehen Sie sich an, wie die aktualisierte Datei app.components.ts nach all diesen Änderungen aussehen sollte.

Installieren der App auf dem Gerät

Nachdem der Code zum Überprüfen von Bereitstellungen hinzugefügt wurde, können wir die App erstellen und auf einem Gerät installieren. Die restlichen Änderungen, die wir einführen werden, werden hauptsächlich über den Ionic Deploy-Dienst übertragen.

Fahren Sie fort und fügen Sie die Android-Plattform zu Ihrem Ionic-Projekt hinzu und erstellen Sie die .apk-Datei mit den folgenden Befehlen:

ionic platform add android
ionic build android

Dadurch wird eine android-debug.apk-Datei im Ordner platform/android/build/outputs/apk erstellt. Kopieren Sie es auf Ihr Gerät und installieren Sie es.

Änderungen vorantreiben

Jetzt ist es an der Zeit, dass wir einige Änderungen an der App vornehmen. Um es auszuprobieren, nehmen Sie einfach einige geringfügige Änderungen an der Benutzeroberfläche der App vor. Und jetzt können Sie die Änderungen hochladen:

ionic upload

Hinzufügen von Metadaten

Nach dem Hochladen wird ein neuer Eintrag in Ihrer letzten Aktivität aufgeführt. Klicken Sie auf den Link Bearbeiten dieses Eintrags. Auf diese Weise können Sie dieser bestimmten Version eine Notiz, Versionsinformationen und Metadaten hinzufügen. Es ist immer eine gute Idee, eine Notiz hinzuzufügen, damit Sie wissen, worum es bei dieser bestimmten Version geht. Klicken Sie anschließend auf die Registerkarte Metadaten und fügen Sie Folgendes hinzu:

Klicken Sie dann auf die Schaltfläche Speichern, um Ihre Änderungen zu übernehmen. Klicken Sie abschließend auf die Schaltfläche Bereitstellen, um die Version bereitzustellen. Sobald die App die Änderung übernimmt, werden auch die von Ihnen bereitgestellten Metadaten verfügbar.

Sie können sehen, dass jetzt die Versionsnummer der Version angezeigt wird:

Versionierung

Manchmal werden Sie ein Update mit Ionic Deploy veröffentlichen, aber auch diese Pakete neu erstellen und an die gebündelte App im App Store senden. Passen Sie jedoch auf, denn Ionic weiß nicht, dass Ihre App dieses Update bereits enthält, und Ihre App fordert den Benutzer auf, die neuesten Updates herunterzuladen, wenn Ihre App zum ersten Mal ausgeführt wird.

Die Versionierungsfunktion kann helfen, dies zu verhindern. Mit der Versionierungsfunktion können Sie die Version der App angeben, die die Updates erhalten kann:

Minimum: Wird nur bereitgestellt, wenn die aktuelle App-Version höher oder gleich dieser Version ist.
Maximum: Wird nur bereitgestellt, wenn die aktuelle App-Version gleich oder niedriger als diese Version ist.
Äquivalent: Führen Sie keine Bereitstellung durch, wenn die aktuelle App-Version dieser Version entspricht.

Sie können Versionsinformationen hinzufügen, indem Sie bei einer bestimmten Version auf den Link BEARBEITEN klicken und dann zur Registerkarte VERSIONIERUNG gehen. Von dort aus können Sie die Versionen (entweder iOS oder Android) angeben, auf die Sie abzielen möchten.

Ionic vergleicht diese Version mit der, die Sie in Ihrer Datei config.xml angegeben haben:

Wenn die App-Version zwischen dem angegebenen minimum und maximum liegt, wird die Freigabe abgeholt. Und wenn die App-Version dem entsprechenden Versionswert entspricht, wird die Version ignoriert. Für den obigen Screenshot wird die Version von der App ignoriert, wenn die in der Datei config.xml angegebene Version 0.0.1 lautet.

Asset-Updates

Die nächste Änderung, die wir vornehmen werden, besteht darin, ein Bild anzuzeigen.

Das erste, was Sie tun müssen, ist ein Bild zu finden. Legen Sie es in den Ordner src/assets/img und verknüpfen Sie es aus der Datei src/pages/home/home.html:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
  <img src="assets/img/lightning.png" />
  <ion-card-content>
    <ion-card-title>
      Version 4
    </ion-card-title>
  </ion-card-content>
</ion-card>
</ion-content>

Laden Sie Ihre Änderungen als neue Version in Ionic Deploy hoch.

ionic upload

Gehen Sie nach dem Hochladen zu Ihrem Ionic-App-Dashboard und aktualisieren Sie die Version mit einem Hinweis und der entsprechenden version in den Metadaten. Speichern Sie die Änderungen und stellen Sie sie bereit.

Das Öffnen der App sollte nun diese neue Version aufnehmen, und das Aktualisieren würde die Änderungen an der Benutzeroberfläche übernehmen.

Kanäle bereitstellen

Standardmäßig verfügt Ionic Deploy über drei Kanäle, die Sie bereitstellen können: dev, staging und production. Sie können aber auch neue Kanäle für Ihre App erstellen, um auf Updates zu hören. Sie können dies tun, indem Sie auf das Zahnradsymbol auf der Registerkarte Ionic Deploy in Ihrem App-Dashboard klicken:

Dies ist beispielsweise für A/B-Tests nützlich, sodass Sie bestimmte Änderungen nur an bestimmte Benutzer weitergeben können.

Vergessen Sie nicht, Ihren Code zu aktualisieren, um diesen spezifischen Bereitstellungskanal zu verwenden:

this.deploy.channel = 'me';

Rollback

Wenn Sie etwas verschoben haben, das Sie nicht haben sollten, können Sie die Rollback-Funktion verwenden. Mit dieser Funktion können Sie eine frühere Version an Ihre Benutzer zurückgeben.

Beachten Sie, dass Sie fehlerhaften Code nicht durch Rollback reparieren können! Wenn Sie beispielsweise einen Syntaxfehler in Ihrem JavaScript-Code haben, wird die gesamte App beschädigt und der Code zum Suchen nach Updates wird nie ausgeführt. Um solche Fehler zu beheben, können Sie nur eine neue Version im App Store veröffentlichen.

Sie können ein Rollback durchführen, indem Sie bei einer bestimmten Bereitstellung auf den Link Rollback to here klicken.

Sie werden aufgefordert, zu bestätigen, ob Sie einen Rollback durchführen möchten oder nicht. Nach der Bestätigung wird es automatisch als aktuelle Version festgelegt. Daher erkennt der Code zum Abrufen neuer Versionen diese als neueste Version und fordert die Benutzer auf, ein Update durchzuführen. Rollback-Versionen haben ein orangefarbenes Aktualisierungssymbol.

Sie können auch eine bestimmte Version bereitstellen, indem Sie auf den Link Bereitstellen neben der Version klicken, die Sie bereitstellen möchten.

Verwenden von Git-Hooks

Sie können die Bereitstellung von App-Updates auf Ionic Deploy mit Git-Hooks automatisieren. Mit Git-Hooks können Sie Skripte vor oder nach bestimmten Git-Ereignissen wie Commit, Push und Receive ausführen. In diesem Fall verwenden wir den pre-push-Hook, um unsere Änderungen in die Ionic Cloud hochzuladen, kurz bevor der Befehl git push seine Arbeit tut.

Benennen Sie zunächst das Beispiel-pre-push-Skript in den tatsächlichen von Git erkannten Namen um:

mv .git/hooks/pre-push.sample .git/hooks/pre-push

Öffnen Sie die Datei in Ihrem Texteditor und ersetzen Sie ihren Inhalt durch Folgendes:

#!/bin/sh

echo now pushing changes to Ionic deploy
ionic upload

Übertragen Sie nun Ihre Änderungen und übertragen Sie sie in ein Remote-Repository:

git add .
git commit -m "make some changes..."
git push origin master

Kurz bevor der Befehl git push ausgeführt wird, wird der ionic upload ausgeführt.

Sie können die Version auch automatisch bereitstellen, wenn Sie möchten:

#!/bin/sh

echo now pushing changes to Ionic deploy
ionic upload --deploy dev

Dies funktioniert in unserem Beispiel jedoch nicht, da Sie keine Metadaten angeben können!

Wenn Sie den Bereitstellungsprozess weiterführen möchten, empfehle ich Ihnen, sich die HTTP-API für Ionic Deploy anzusehen. Auf diese Weise können Sie von Ihrem Continuous Integration-Server aus programmgesteuert Änderungen an Ihrer App bereitstellen. Es ermöglicht Ihnen auch, die Versionsnummern und Metadaten Ihrer Bereitstellungen zu aktualisieren. All dies kann automatisch und ohne Berührung des Dashboards der Ionic-App erfolgen.

Abschluss

Das ist es! In diesem Tutorial haben Sie Ionic Deploy kennengelernt und erfahren, wie Sie damit Updates an Ihre Ionic-App senden können. Dies ist eine leistungsstarke Funktion, mit der Sie ein robustes Versionsverwaltungs- und Aktualisierungssystem in Ihre App einbauen können.

Bleiben Sie dran für weitere Inhalte zu Ionic und zu Cloud-Diensten wie Ionic Deploy! Wenn Sie eine vollständige Einführung in die Entwicklung von Ionic 2-Apps erhalten möchten, sehen Sie sich unseren Kurs hier auf Envato Tuts+ an.

Ionic

Erste Schritte mit Ionic 2

Reginald Dawson

Sehen Sie sich auch einige unserer anderen Beiträge zur Entwicklung von Ionic- und plattformübergreifenden mobilen Apps an.