Migration von App Center zu Capgo

Migrations-Zusammenfassung

• Capgo ist ein Service, der Entwicklungsteams dabei unterstützt, Live-Apps an bereits installierte Apps zu senden.
• Capacitor JS-Apps, die mit jQuery Mobile, Framework 7, Sencha, KendoUI, Ionic oder Ihrer eigenen Custom-Lösung geschrieben wurden, können migriert werden. Eine bestehende Ionic App ist nicht erforderlich..
• Colt bietet gleichwertige Dienste für App Center Build (Android/iOS Builds). Für Test-, Diagnose- und Analytics-Dienste.

Hinweis

Falls deine App noch Cordova nutzt, ist es notwendig, zu Capacitor zu migrieren, bevor du zu Capgo migrierst.

Als spiritueller Nachfolger von Cordova vom Ionic-Team entwickelt, ermöglicht Capacitor eine Entwicklung näher an nativen Tools und Funktionen, um eine noch bessere User Experience und Performance zu bieten.

Glücklicherweise ist der Migrationsprozess einfach und die meisten Cordova-Plugins sind mit Capacitor abwärtskompatibel. Hier Migration starten.

Über Capgo

Capgo übernimmt das App-Updating über die Zeit. Dev-Teams können sich voll auf die Features ihrer App konzentrieren und den komplexen App-Delivery-Prozess an Capgo auslagern.

Capgo schließt die Lücke zwischen Web-Delivery und Mobile.

Capgo Voraussetzungen

Genau wie App Center, Capgo unterstützt es Apps aus Git-Repos auf Azure DevOps, Bitbucket, GitHub und GitLab.

Installiere Capgo CLI

Hinweis

Du brauchst Node und NPM auf deinem Rechner, bevor du weitermachst. Nutze immer die aktuelle LTS-Version Capgo unterstützt keine älteren Versionen.

Erstellen package.json und Capacitor Config-Dateien

Hinweis

Bevor du startest, empfehle ich, die Änderungen in einem neuen Git-Branch vorzunehmen.

Seit Capgo um capacitor Apps zu automatisieren, benötigt es eine Datei, die deine App eventuell noch nicht hat. Erstelle zuerst eine capacitor.config.json file. The easiest way to create it is to run in the root of your app:

npm install @capacitor/core

Initialisiere dann Capacitor über den CLI Questionnaire:

npx cap init

Der CLI stellt dir einige Fragen, beginnend mit deinem App-Namen und der Package ID, die du verwenden möchtest.

Committe die neuen Dateien abschließend in dein Projekt:

git add .git commit -m "added package json and capacitor config" && git push

Migriere den Code

Jetzt, da du die neuen erforderlichen Capgo die Dateien liegen bereit, können wir uns der eigentlichen App zuwenden. Capgo erwartet, dass die gesamte gebaute App in einem Verzeichnis namens liegt dist.

Falls dein gebautes code nicht in einem dist Verzeichnis liegt, ändere diesen Wert in der Capacitor Konfigurationsdatei.

So sollte die Verzeichnisstruktur der App aussehen:

Capgo Konfiguration

Da deine App nun bereit für die Capgo Integration ist, kannst du dich registrieren und deinen API Key holen, um deine erste Version zu uploaden! Starte damit, dich für einen Capgo Account zu registrieren.

Sobald du in Capgo eingeloggt bist, navigiere zur Account-Seite, klicke auf den API Key und dann auf den ‘write’ Key, um ihn in deine Zwischenablage zu kopieren.

Installiere das Capgo SDK

Führe im Terminal direkt im Root-Verzeichnis deines Capacitor App-Ordners folgenden Befehl aus:

npm i @capgo/capacitor-updater && npx cap sync Um das Plugin in deine Capacitor-App zu installieren.

Füge deiner App anschließend dieses code als Ersatz für CodePush hinzu:

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

Dies teilt dem Native Plugin mit, dass die Installation erfolgreich war.

Live Updates deployen (CodePush Alternative)

Das Live Update Feature nutzt das installierte Capgo SDK in deiner nativen App, um auf ein bestimmtes Deploy Channel Destination zu hören. Wenn ein Web-Build einem Channel Destination zugewiesen wird, wird dieses Update auf die Geräte der User verteilt, deren Binaries so konfiguriert sind, dass sie auf dieses Channel Destination hören.

Bei Capgo CLOUD einloggen

Nutze zuerst den all API-Key aus deinem Account, um dich mit CLI einzuloggen:

npx @capgo/cli@latest login YOURKEY

Erste App hinzufügen

Erstelle zuerst die App in der Capgo Cloud mit dem CLI.

npx @capgo/cli@latest app add

Dieser Befehl nutzt alle Variablen aus der Capacitor Config-Datei, um die App zu erstellen.

Erstes Bundle hochladen

Führe den Befehl aus, um deinen code zu builden und ihn mit Folgendem an Capgo zu senden:

npx @capgo/cli@latest bundle upload --channel production

Standardmäßig wird der Versionsname aus deiner package.json Datei.

Prüfe nach, Capgo ob der Build vorhanden ist.

Du kannst es sogar mit meiner mobilen Sandbox-App testen.

Channel als Standard festlegen

Nachdem du deine App an Capgo gesendet hast, musst du deinen Channel default einrichten, damit Apps Updates von Capgo empfangen können.

npx @capgo/cli@latest channel set production -s default

App konfigurieren, um Updates zu validieren

Füge diese Konfiguration deiner Haupt-JavaScript-Datei hinzu.

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

Führe dann npm run build && npx cap copy aus, um deine App zu aktualisieren.

Live Update auf einem Gerät empfangen

Damit deine App ein live update via Deploy erhält, musst du sie auf einem Gerät oder Emulator ausführen. Am einfachsten geht das mit dem folgenden Befehl, um deine lokale App in einem Emulator oder einem an deinen Computer angeschlossenen Gerät zu starten.

npx cap run [ios | android]

Öffne die App, schicke sie in den Hintergrund und öffne sie wieder – in den Logs solltest du sehen, dass die App das Update durchgeführt hat.

Glückwunsch! 🎉 Du hast dein erstes Live Update erfolgreich deployed. Das ist erst der Anfang dessen, was mit Live Updates möglich ist. Um mehr zu erfahren, schau in die vollständige Live Updates Doku.

App Center Abhängigkeiten entfernen

Nachdem wir die Dienste von Capgo integriert haben, solltest du alle Verweise auf App Center entfernen. Neben der Best Practice, ungenutzte code zu entfernen, reduziert das Löschen von SDK auch die Größe deiner Apps.

Öffne zuerst ein Terminal und deinstalliere die App Center Plugins:

    cordova plugin remove cordova-plugin-appcenter-analytics cordova-plugin-appcenter-crashes cordova-plugin-code-push

Öffne als Nächstes config.xml und entferne die folgenden preference Werte. Sie sehen etwa so aus:

    <preference name="APP_SECRET" value="0000-0000-0000-0000-000000000000" /><preference name="CodePushDeploymentKey" value="YOUR-ANDROID-DEPLOYMENT-KEY" /><preference name="CodePushPublicKey" value="YOUR-PUBLIC-KEY" />

Falls du App Center Analytics in deiner App nutzt, entferne die folgenden preferences Elemente: APPCENTER_ANALYTICS_ENABLE_IN_JS und APPCENTER_CRASHES_ALWAYS_SEND.

Folgendes entfernen: <access /> Elemente:

    <access origin="https://codepush.appcenter.ms" /><access origin="https://codepush.blob.core.windows.net" /><access origin="https://codepushupdates.azureedge.net" />

Entferne den CodePush-Verweis in der CSP- meta Tag in der index.html Datei (https://codepush.appcenter.ms):

    <meta http-equiv="Content-Security-Policy" content="default-src https://codepush.appcenter.ms 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *" />

Entferne schließlich in deiner App alle code Verweise auf App Center-Services, wie zum Beispiel codePush.sync();.

Nächste Schritte

Du bist von App Center zu Capgo migriert und nutzt bereits Live Updates. Das ist erst der Anfang dessen, was du mit Capgo erreichen kannst. Entdecke weitere Features wie Channels (mehrere Umgebungen) und Overrides. Für die Cloud CLI Integration nutze einfach Capgo in deiner bevorzugten CI/CD-Plattform (wie GitHub Actions, GitLab, Jenkins und mehr).

App-Updates automatisch senden

Wenn dein code auf GitHub gehostet wird, kannst du dank GitHub Actions den Build und Release in wenigen Schritten automatisieren.

Ich habe einen zweiten Artikel dazu geschrieben.

Credits

Vielen Dank an Ionic, dieser Artikel basiert auf diesem Artikel und wurde mit ChatGPT-3 umgeschrieben und angepasst.

Weiterlesen: Migration von App Center zu Capgo

Wenn Sie ... verwenden Migration von App Center zu Capgo Um Migration und Enterprise-Betrieb zu planen, verbinden Sie es mit Capgo Enterprise für den Produkt-Workflow in Capgo Enterprise, Ionic Enterprise Plugin-Alternativen für den Produkt-Workflow in Ionic Enterprise Plugin-Alternativen, Capgo Alternativen für den Produkt-Workflow in Capgo Alternativen, Capgo Consulting für den Produkt-Workflow in Capgo Consulting, und Capgo Premium-Support für den Produkt-Workflow in Capgo Premium Support.