Migration von App Center zu Capgo

Migrationsübersicht

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

Hinweis

Falls deine App noch Cordova nutzt, musst du zuerst zu Capacitor migrieren migrieren, bevor du zu Capgo migrierst.

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

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

Über Capgo

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

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

Capgo Voraussetzungen

Wie App Center Capgo unterstützt es Apps, die in Git-Repositories auf Azure DevOps, Bitbucket, GitHub und GitLab gehostet werden.

Capgo CLI installieren

Hinweis

Stelle sicher, dass Node und NPM auf deinem Computer installiert sind, bevor du fortfährst. Verwende immer die aktuelle LTS-Version Capgo statt älterer Versionen.

Erstellen package.json und Capacitor-Konfigurationsdateien

Hinweis

Bevor du beginnst, empfehle ich, die Änderungen auf einem neuen Git-Branch vorzunehmen.

Seit Capgo wurde erstellt, um capacitor-Apps zu automatisieren. Es benötigt eine Datei, die deine App möglicherweise nicht hat. Erstelle zuerst eine capacitor.config.json Datei. Der einfachste Weg, sie zu erstellen, ist, im Root-Verzeichnis deiner App Folgendes auszuführen:

npm install @capacitor/core

Initialisiere anschließend Capacitor mit dem CLI-Fragebogen:

npx cap init

Der CLI stellt dir einige Fragen, beginnend mit dem Namen deiner App und der Paket-ID, die du für deine App verwenden möchtest.

Schließlich die neuen Dateien in deinem Projekt committen:

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

Migriere den Code

Da du jetzt die neuen erforderlichen Capgo die Dateien an Ort und Stelle sind, können wir uns der eigentlichen App zuwenden. Capgo erwartet, dass sich die gesamte gebaute App in einem Verzeichnis namens dist.

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

So sollte die Verzeichnisstruktur der App aussehen:

Capgo-Konfiguration

Sobald deine App bereit für die Capgo Integration ist, ist es Zeit, dich zu registrieren und deinen API-Key zu holen, um deine erste Version hochzuladen! 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 die 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 anschließend code als Ersatz für CodePush zu deiner App 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 lauschen. Wenn ein Web-Build einem Channel Destination zugewiesen wird, wird dieses Update auf die Geräte der Nutzer deployed, deren Binaries so konfiguriert sind, dass sie auf das angegebene Channel Destination lauschen.

Login bei Capgo CLOUD

Zuerst verwendest du all API-Key in Ihrem Konto vorhanden, um sich mit CLI anzumelden:

npx @capgo/cli@latest login YOURKEY

Erste App hinzufügen

Beginnen wir damit, die App in Capgo Cloud mit CLI zu erstellen.

npx @capgo/cli@latest app add

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

Lade dein erstes Bundle hoch

Führe folgenden Befehl aus, um dein code zu builden und es an Capgo zu senden:

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

Standardmäßig entspricht der Versionsname dem in deiner package.json Datei.

Check-in Capgo falls der Build vorhanden ist.

Du kannst es sogar mit meiner Mobile Sandbox-App.

Channel als Standard festlegen

Nachdem du deine App an Capgo gesendet hast, musst du deinen Channel default damit Apps Updates von Capgo erhalten.

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

App konfigurieren, um Updates zu validieren

Füge diese Konfiguration in deine Haupt-JavaScript-Datei ein.

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

CapacitorUpdater.notifyAppReady()

Dann führe eine 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 von 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 auf einem mit deinem Computer verbundenen Gerät zu starten.

npx cap run [ios | android]

Öffne die App, schicke sie in den Hintergrund und öffne sie erneut; in den Logs solltest du sehen, dass die App das Update ausgeführt hat.

Glückwunsch! 🎉 Du hast dein erstes Live Update erfolgreich bereitgestellt. Das ist erst der Anfang von dem, was du mit Live Updates machen kannst. Um mehr zu erfahren, lies die vollständige Live Updates-Dokumentation.

App Center-Abhängigkeiten entfernen

Nachdem wir die Services von Capgo integriert haben, solltest du alle Verweise auf App Center entfernen. Neben der Best Practice, ungenutzte code/Services zu löschen, sollte das Entfernen von SDK auch die Größe deiner Apps reduzieren.

Öffne zuerst ein Terminal und deinstalliere dann 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 genutzt hast, entferne die folgenden preferences Elemente: APPCENTER_ANALYTICS_ENABLE_IN_JS und APPCENTER_CRASHES_ALWAYS_SEND.

Entferne Folgendes <access /> Elemente:

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

Entferne den Verweis auf CodePush 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 *" />

Schließlich entferne in deiner App alle code-Verweise auf App Center-Dienste, wie z. B. codePush.sync();.

Nächste Schritte

Du bist von App Center zu Capgo migriert und nutzt Live Updates. Das ist erst der Anfang dessen, was du mit Capgo machen kannst. Entdecke den Rest des Services, einschließlich Channel (mehrere Umgebungen) und Override. Cloud-CLI-Integration, nutze Capgo in deiner bevorzugten CI/CD-Plattform (wie GitHub Action, GitLab, Jenkins und mehr).

App-Update automatisch senden

Wenn dein code auf GitHub gehostet wird, kannst du dank GitHub-Actions in wenigen weiteren Schritten einen automatischen Build- und Release-Prozess einrichten.

Ich habe einen zweiten Artikel geschrieben, damit du das tun kannst.

Danksagungen

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

Weiter mit Migration von App Center zu Capgo

Wenn du es nutzt Migration von App Center zu Capgo um Migration und Enterprise-Betrieb zu planen, verbinde 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 Beratung für den Produkt-Workflow in Capgo Consulting und Capgo Premium-Support für den Produkt-Workflow in Capgo Premium Support.