Migración de App Center a Capgo

Resumen de la migración

• Capgo es un servicio que ayuda a los equipos de desarrollo a enviar Live Update a las apps desplegadas.
• Puedes migrar apps JS de Capacitor escritas en jQuery Mobile, Framework 7, Sencha, KendoUI, Ionic o incluso tu propia solución personalizada. No es necesaria una app de Ionic existente..
• Colt ofrece servicios equivalentes a App Center Build (build de apps Android/iOS). Para servicios de Test, Diagnostics y Analytics.

Nota

Si tu app aún usa Cordova, es necesario migrar a Capacitor primero antes de migrar a Capgo.

Creado por el equipo de Ionic como sucesor espiritual de Cordova, Capacitor permite que el desarrollo se acerque a las herramientas y capacidades nativas para ofrecer una mejor experiencia de usuario y rendimiento.

Afortunadamente, el proceso de migración es sencillo y la mayoría de los plugins de Cordova son compatibles con Capacitor. Empieza la migración aquí.

Sobre Capgo

Capgo gestiona la actualización de apps con el tiempo. Los equipos de desarrollo pueden centrarse en las funciones únicas de su app y delegar el complejo proceso de entrega a Capgo.

Capgo cierra la brecha entre la web y el móvil.

Prerrequisitos de Capgo

Al igual que App Center, Capgo es compatible con apps alojadas en repositorios Git en Azure DevOps, Bitbucket, GitHub y GitLab.

Instalar Capgo CLI

nota

Debes tener Node y NPM instalados en tu equipo antes de continuar. Usa siempre la versión LTS actual Capgo no admite versiones antiguas.

Crear package.json y archivos de configuración de Capacitor

nota

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

Como Capgo se creó para automatizar apps de capacitor, requiere un archivo que quizás tu app no tenga. Primero, crea un capacitor.config.json archivo. La forma más fácil de crearlo es ejecutando esto en la raíz de tu app:

npm install @capacitor/core

Luego, inicializa Capacitor usando el cuestionario de CLI:

npx cap init

El CLI te hará algunas preguntas, empezando por el nombre de tu app y el package ID que quieras usar.

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

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

Migra el Code

Ahora que ya tienes los nuevos archivos requeridos Capgo con los archivos listos, podemos centrarnos en la aplicación en sí. Capgo espera que toda la app compilada esté dentro de un directorio llamado dist.

Si tu code compilado no está en un dist directorio, cambia este valor en el archivo de configuración de Capacitor.

Así es como debería verse la estructura de directorios de la app:

Configuración de Capgo

Con tu app lista para la Capgo integración, ¡es hora de registrarte y obtener tu clave de API para subir tu primera versión! Empieza por crear una cuenta de Capgo.

Una vez que inicies sesión en Capgo, ve a la página de Account, haz clic en la clave API y luego en la clave ‘write’ para copiarla al portapapeles.

Instala el Capgo SDK

Desde la terminal, directamente en la raíz de la carpeta de tu app Capacitor, ejecuta el siguiente comando:

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

Y luego añade este code a tu app como reemplazo de CodePush:

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

CapacitorUpdater.notifyAppReady()

Esto le indicará al plugin nativo que la instalación fue exitosa.

Desplegar Live Updates (Alternativa a CodePush)

La funcionalidad de Live Update funciona utilizando el Capgo SDK en tu aplicación nativa para escuchar un Deploy Channel Destination específico. Cuando se asigna un build web a un Channel Destination, esa actualización se desplegará en los dispositivos de los usuarios que ejecuten binarios configurados para escuchar dicho Channel Destination.

Inicia sesión en Capgo CLOUD

Primero, usa el all apikey presente en tu cuenta para iniciar sesión con CLI:

npx @capgo/cli@latest login YOURKEY

Añade tu primera app

Let’s get started by first creating the app in Capgo Cloud with the CLI.

npx @capgo/cli@latest app add

Este comando usará todas las variables definidas en el archivo de config de Capacitor para crear la app.

Sube tu primer bundle

Ejecuta el comando para buildear 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 de tu package.json archivo.

Check in Capgo si el build está presente.

Incluso puedes probarlo con mi app sandbox móvil.

Establecer canal por defecto

Una vez que hayas enviado tu app a Capgo, tendrás que configurar tu channel default para que las apps reciban actualizaciones de Capgo.

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

Configura la app para validar actualizaciones

Añade esta configuración a tu archivo JavaScript principal.

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

CapacitorUpdater.notifyAppReady()

Luego ejecuta un npm run build && npx cap copy para actualizar tu app.

Recibir un Live Update en un dispositivo

Para que tu aplicación reciba un live update desde Deploy, deberás ejecutar la app en un dispositivo o emulador. La forma más fácil es usar el siguiente comando para lanzar tu app local en un emulador o en un dispositivo conectado a tu ordenador.

npx cap run [ios | android]

Abre la app, pásala a segundo plano y ábrela de nuevo; deberías ver en los logs que la app realizó la actualización.

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

Eliminar dependencias de App Center

Ahora que hemos integrado los servicios de Capgo, deberías eliminar cualquier referencia a App Center. Además de ser una buena práctica eliminar code/servicios sin usar, quitar SDK debería reducir el tamaño de tus apps.

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

Después, abre config.xml y elimina los siguientes preference valores. Se verán algo así:

    <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 usabas App Center Analytics en tu app, elimina los siguientes preferences elementos: APPCENTER_ANALYTICS_ENABLE_IN_JS y APPCENTER_CRASHES_ALWAYS_SEND.

Elimina lo siguiente <access /> elementos:

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

Elimina la referencia a CodePush en la etiqueta CSP meta 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 *" />

Por último, dentro de tu app, elimina cualquier referencia de code a los servicios de App Center, como codePush.sync();.

Próximos pasos

Has migrado de App Center a Capgo, utilizando Live Updates. Esto es solo el comienzo de lo que puedes hacer con Capgo. Explora el resto del servicio, que incluye Channel (múltiples entornos) y override. Para la integración con la nube de CLI, usa Capgo dentro de tu plataforma de CI/CD preferida (como GitHub Action, GitLab, Jenkins y más).

Envío automático de actualizaciones de la app

Si tu code está alojado en GitHub, puedes configurar el build y release automáticos en unos pocos pasos gracias a las actions de GitHub.

He escrito un segundo artículo para ayudarte con eso.

Créditos

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

Continúa con Migrar de App Center a Capgo

Si estás usando Migrar de App Center a Capgo para planificar la migración y las operaciones empresariales, conéctalo con Capgo Enterprise para el flujo de trabajo del producto en Capgo Enterprise, Alternativas a los plugins de Ionic Enterprise para el flujo de trabajo de producto en Alternativas a Plugins de Ionic Enterprise, Alternativas a Capgo para el flujo de trabajo del producto en Alternativas a Capgo, Consultoría de Capgo para el flujo de trabajo de producto en Capgo Consulting, y Soporte Premium de Capgo para el flujo de trabajo del producto en Capgo Premium Support.