Migrar desde App Center a Capgo

Resumen de la Migración

• Capgo es un servicio que ayuda a los equipos de desarrollo a enviar aplicaciones en vivo a aplicaciones desplegadas.
• Capacitor JS aplicaciones escritas en jQuery Mobile, Framework 7, Sencha, KendoUI, Ionic o incluso su propia solución personalizada pueden ser migradas. No se requiere una aplicación Ionic existente..
• Colt Ofrece servicios equivalentes para App Center Build (construye aplicaciones Android/iOS). Para servicios de Prueba, Diagnósticos y Análiticas.

Nota

Si su aplicación sigue utilizando Cordova, es necesario Capacitor migrar a Capgo

antes de migrar a Capacitor.

Desarrollado por el equipo de Ionic como sucesor espiritual a Cordova, Capacitor permite que el desarrollo se acerque a las herramientas y capacidades nativas con el objetivo de proporcionar una experiencia de usuario aún mejor y rendimiento. Afortunadamente, el proceso de migración es fácil y la mayoría de los plugins de Cordova son compatibles con __CAPGO_KEEP_0__..

About Capgo

Capgo, handles updating apps over time. Development teams can focus completely on the unique features of their app and outsource the complicated app delivery process to Capgo.

Capgo completa las lagunas entre la entrega web y móvil.

Capgo Requisitos previos

De manera similar a App Center, Capgo soporta aplicaciones alojadas en repositorios de Git en Azure DevOps, Bitbucket, GitHub, y GitLab.

Instale Capgo CLI

Nota

Tenga Node y NPM instalados en su computadora, antes de proceder. Siempre utilice la versión LTS actualizada __CAPGO_KEEP_0__ no utilice versiones antiguas. Capgo do not older versions.

y __CAPGO_KEEP_0__ archivos de configuración package.json Capacitor

nota

Antes de empezar, te recomiendo hacer cambios en una rama Git fresca.

Dado que Capgo se creó para automatizar aplicaciones capacitor, requiere un archivo que tu aplicación puede no tener. Primero, crea un capacitor.config.json archivo. La forma más fácil de crearlo es ejecutar en la raíz de tu aplicación:

npm install @capacitor/core

Luego, inicia Capacitor utilizando el cuestionario de CLI:

npx cap init

El CLI te hará algunas preguntas, empezando con el nombre de tu aplicación, y el ID de paquete que deseas utilizar para tu aplicación.

Finalmente, haz un commit de los nuevos archivos en tu proyecto:

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

Migrar el Code

Ahora que tienes los nuevos archivos requeridos __CAPGO_KEEP_0__ Migrar el Capgo los archivos en su lugar, puede dirigir su atención a la aplicación real. Capgo espera que toda la aplicación construida esté dentro de un directorio llamado dist.

Si su aplicación construida code no está en un dist directorios, cambie este valor en el archivo de configuración de Capacitor.

Aquí está lo que la estructura de directorios de la aplicación debería ser:

Configuración de Capgo

Con su aplicación lista para Capgo integración, es hora de registrarse y obtener su clave API para subir su primera versión. Comience registrándose para una cuenta de API. signing up for a Capgo account.

Una vez que estás conectado a Capgo, navega a la página de Cuenta, luego haz clic en el botón API y luego haz clic en el botón ‘escribir’ para copiarlo a la pestaña de recortes.

Instala el Capgo SDK

Desde una línea de comandos, directamente en la raíz de la carpeta de tu aplicación Capacitor, ejecuta el siguiente comando:

npm i @capgo/capacitor-updater && npx cap sync Para instalar el plugin en tu aplicación Capacitor.

Y luego agrega a tu aplicación este code en lugar de CodePush:

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

CapacitorUpdater.notifyAppReady()

Esto le dirá al plugin nativo que la instalación ha tenido éxito.

Actualizaciones en vivo (Alternativa a CodePush)

La característica de Actualizaciones en vivo funciona utilizando el __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ instalado Capgo SDK Inicia sesión en __CAPGO_KEEP_0__ CLOUD

Login to Capgo CLOUD

Instala el __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ all apikey presente en tu cuenta para iniciar sesión con el CLI:

npx @capgo/cli@latest login YOURKEY

Agregar tu primera aplicación

Comencemos creando la aplicación en Capgo Cloud con el CLI.

npx @capgo/cli@latest app add

Esta orden utilizará todas las variables definidas en el archivo de configuración Capacitor para crear la aplicación.

Subir tu primer paquete

Ejecuta la orden para construir tu code y enviarlo a Capgo con:

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

Por defecto, el nombre de la versión será el que se encuentra en tu package.json archivo.

Revisa en Capgo si la construcción está presente.

Puedes incluso probarlo con mi aplicación móvil de sandbox.

Hacer canal predeterminado

Después de enviar tu aplicación a Capgo, necesitas hacer que tu canal default para que las aplicaciones puedan recibir actualizaciones de Capgo.

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

Configurar aplicación para validar actualizaciones

Agrega esta configuración a tu archivo JavaScript principal.

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

CapacitorUpdater.notifyAppReady()

Luego haz un npm run build && npx cap copy para actualizar tu aplicación.

Recibir una Actualización en Vivo en un Dispositivo

Para que tu aplicación reciba una actualización en vivo desde Deploy, necesitarás ejecutar la aplicación en un dispositivo o un emulador. La forma más fácil de hacer esto es simplemente usar el siguiente comando para lanzar tu aplicación local en un emulador o un dispositivo conectado a tu computadora.

npx cap run [ios | android]

Abre la aplicación, ponla en segundo plano y abríla de nuevo, deberías ver en los registros que la aplicación realizó la actualización.

¡Felicidades! 🎉 Has desplegado con éxito tu primer Live Update. Esto es solo el comienzo de lo que puedes hacer con Live Updates. Para aprender más, consulta la documentación completa de Live Updates.

Eliminar Dependencias de App Center

Ahora que hemos integrado los servicios de Capgo, debes eliminar cualquier referencia a App Center. Además de ser una buena práctica eliminar servicios no utilizados code/, eliminar el SDK debería reducir el tamaño de tus aplicaciones.

Primero, abre una terminal y desinstala los plugins de App Center:

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

A continuación, abre config.xml y elimina los siguientes preference valores. Se parecerán 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" />

Si estabas utilizando App Center Analytics en tu aplicación, elimina los siguientes preferences elementos: APPCENTER_ANALYTICS_ENABLE_IN_JS y APPCENTER_CRASHES_ALWAYS_SEND.

Elimina los siguientes <access /> elementos:

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

Elimine la referencia a CodePush en el CSP meta etiqueta en el index.html archivo (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 *" />

Finally, within your app, remove any code references to App Center services, such as codePush.sync();.

Pasos siguientes

Ha migrado desde App Center a Capgo, utilizando las actualizaciones en vivo. Esto es solo el comienzo de lo que puede utilizar Capgo para. Explora el resto de los servicios que incluyen Canal (múltiples entornos) y sobrescritura. Integración de Cloud CLI, utilice Capgo dentro de su plataforma de CI/CD de elección (como GitHub Action, GitLab, Jenkins, etc.).

Enviar actualización de la aplicación de manera automática

Si su code está alojado en GitHub, puede configurar la compilación y liberación automática en unos pocos pasos, gracias a las acciones de GitHub.

He escrito un segundo artículo para que puedas hacerlo.

Créditos

Muchas gracias a Ionic, esta artículo se basa en este artículo reescrito con chat-gpt-3 y adaptado.