Migrare da App Center a Capgo

Riepilogo della Migrazione

• Capgo è un servizio che aiuta le squadre di sviluppo a inviare applicazioni live ai dispositivi già distribuiti.
• Capacitor JS applicazioni scritte in jQuery Mobile, Framework 7, Sencha, KendoUI, Ionic o anche la propria soluzione personalizzata possono essere migrate. Non è richiesta un'app Ionic esistente..
• Colt offre servizi equivalenti per App Center Build (costruisci app Android/iOS). Per i servizi Test, Diagnostica e Analytics.

Nota

Se il tuo app sta ancora utilizzando Cordova, è necessario migrare a Capacitor prima di migrare a Capgo.

Sviluppato dal team Ionic come successore spirituale a Cordova, Capacitor consente lo sviluppo di avvicinarsi alle strumentazioni native e alle capacità con l'obiettivo di fornire un'esperienza utente ancora migliore e prestazioni.

Fortunatamente, il processo di migrazione è facile e la maggior parte dei plugin Cordova sono compatibili con Capacitor in modo retrogrado. Inizia la migrazione qui.

Su Capgo

Capgo, gestisce l'aggiornamento delle app nel tempo. I team di sviluppo possono concentrarsi completamente sulle caratteristiche uniche dell'app e delegare il complesso processo di consegna dell'app a Capgo.

Capgo colma il divario tra la consegna web e mobile.

Capgo Prerequisiti

Come App Center, Capgo supporta le app ospitate nei repository Git su Azure DevOps, Bitbucket, GitHub, e GitLab.

Installa Capgo CLI

nota

Assicurati di avere Node e NPM installati sul tuo computer, prima di procedere. Utilizza sempre la versione LTS corrente. __CAPGO_KEEP_0__ non utilizzare versioni più vecchie. Capgo do not older versions.

e __CAPGO_KEEP_0__ file di configurazione package.json and Capacitor config files

nota

Prima di iniziare, ti consiglio di apportare modifiche su una nuova branch Git.

Dal momento che Capgo è stato creato per automatizzare gli app capacitor, richiede un file che il tuo app potrebbe non avere. In primo luogo, crea un capacitor.config.json file. La cosa più facile per creare è eseguire nella radice del tuo app:

npm install @capacitor/core

Poi, inizializza Capacitor utilizzando il questionario CLI:

npx cap init

Il CLI ti chiederà alcune domande, iniziando con il nome del tuo app, e l'ID del pacchetto che desideri utilizzare per il tuo app.

Infine, commetti i nuovi file nel tuo progetto:

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

Migrare il Code

Ora che hai i nuovi file richiesti __CAPGO_KEEP_0__ Migrare il Capgo I file sono in posizione, potete quindi rivolgere l'attenzione all'applicazione vera e propria. Capgo si aspetta che l'applicazione intera sia all'interno di una directory denominata dist.

Se il tuo code costruito non è in una dist directory, modifica questo valore nel file di configurazione del Capacitor.

Ecco cosa dovrebbe essere la struttura della directory dell'applicazione:

Configurazione del Capgo

Con l'app pronta per Capgo l'integrazione, è ora il momento di iscriversi e ottenere la chiave API per caricare la prima versione! Inizia iscrivendoti a un account API. Inserisci qui il tuo Capgo key.

Una volta che sei loggato in Capgo, naviga alla pagina Account, quindi clicca sul API tasto, quindi clicca sul tasto ‘scrivi’ per copiarlo nella clipboard.

Installa il Capgo SDK

Dalla riga di comando, direttamente nella cartella root del tuo Capacitor app, esegui il seguente comando:

npm i @capgo/capacitor-updater && npx cap sync Per installare il plugin nel tuo Capacitor app.

E poi aggiungi al tuo app questo code al posto di CodePush uno:

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

CapacitorUpdater.notifyAppReady()

Questo ti dirà al plugin nativo che l'installazione è riuscita.

Deploying Live Updates (Alternative a CodePush)

La funzione di Aggiornamento in Tempo Reale funziona utilizzando l'__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Capgo SDK Accedi a __CAPGO_KEEP_0__ CLOUD

Login to Capgo CLOUD

__CAPGO_KEEP_0__ all chiave API presente nel tuo account per accedere con il CLI:

npx @capgo/cli@latest login YOURKEY

Aggiungi la tua prima app

Iniziamo creando l'app in Capgo Cloud con il CLI.

npx @capgo/cli@latest app add

Questo comando utilizzerà tutte le variabili definite nel file di configurazione Capacitor per creare l'app.

Carica la tua prima bundle

Esegui il comando per costruire il tuo code e inviarlo a Capgo con:

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

Di default, il nome della versione sarà quello presente nel tuo package.json file.

Controlla in Capgo se la build è presente.

Puoi anche testarlo con il mio app di sandbox mobile.

Imposta il canale predefinito

Dopo aver inviato il tuo app a Capgo, hai bisogno di impostare il tuo canale default per consentire agli app di ricevere aggiornamenti da Capgo.

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

Configura l'app per validare gli aggiornamenti

Aggiungi questa configurazione al tuo file JavaScript principale.

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

CapacitorUpdater.notifyAppReady()

Poi fai un npm run build && npx cap copy per aggiornare il tuo app.

Ricevi un Aggiornamento in Tempo Reale su un Dispositivo

Perché il tuo'applicazione riceva un aggiornamento in tempo reale da Deploy, avrai bisogno di eseguire l'app sul dispositivo o su un emulatore. La cosa più facile da fare è semplicemente utilizzare il seguente comando per avviare l'app locale in un emulatore o in un dispositivo collegato al tuo computer.

npx cap run [ios | android]

Apri l'app, mettila in background e aprila nuovamente, dovresti vedere nei log che l'app ha fatto l'aggiornamento.

Congratulazioni! 🎉 Hai avuto successo nel deployare il tuo primo Live Update. Questo è solo l'inizio di tutto ciò che puoi fare con gli aggiornamenti in tempo reale. Per imparare di più, visualizza il contenuto completo Documentazione degli aggiornamenti in tempo reale.

Elimina le dipendenze di App Center

Ora che abbiamo integrato i servizi di Capgo, dovresti eliminare qualsiasi riferimento a App Center. Oltre a essere una buona pratica eliminare le dipendenze non utilizzate code/servizi, l'eliminazione dei SDK dovrebbe ridurre le dimensioni dei tuoi app

Prima, apri un terminale e disinstalla i plugin di App Center:

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

Successivamente, apri config.xml e elimina i seguenti preference valori. Saranno simili a:

    <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" />

Se stai utilizzando App Center Analytics nel tuo app, elimina i seguenti preferences elementi: APPCENTER_ANALYTICS_ENABLE_IN_JS e APPCENTER_CRASHES_ALWAYS_SEND.

Elimina i seguenti <access /> elementi:

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

Elimina la riferenza a CodePush nel CSP meta tag nel index.html file (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 *" />

Infine, all'interno della tua app, elimina qualsiasi riferimento a code alle servizi di App Center, come ad esempio codePush.sync();.

Passaggi successivi

Hai migrato da App Center a Capgo, utilizzando gli aggiornamenti in tempo reale. Questo è solo l'inizio di tutto ciò che puoi fare con Capgo. Esplora il resto del servizio, che include il canale (ambiente multipli) e l'override. Integrazione Cloud CLI , utilizza Capgo all'interno della tua piattaforma CI/CD di scelta (ad esempio GitHub Action, GitLab, Jenkins e altro)

Invia automaticamente l'aggiornamento dell'app

Se il tuo code è ospitato su GitHub, puoi configurare l'invio automatico e la rilascio in pochi passaggi, grazie alle azioni di GitHub

Ho scritto un secondo articolo per consentirtelo di farlo.

Crediti

Grazie mille a Ionic, questo articolo si basa su questo articolo riescritto con chat-gpt-3 e adattato.