Resumen de migración
- Capgo es un servicio que ayuda a los equipos de desarrollo a enviar Live Update a las apps desplegadas.
- Las apps JS de Capacitor escritas en jQuery Mobile, Framework 7, Sencha, KendoUI, Ionic o incluso tu propia solución personalizada se pueden migrar. No es necesaria una app de Ionic existente..
- Colt ofrece servicios equivalentes para App Center Build (build de apps Android/iOS). Para los servicios 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 al tooling y las capacidades nativas con el objetivo de ofrecer una experiencia de usuario y un rendimiento aún mejores.
Por suerte, el proceso de migración es fácil y la mayoría de los plugins de Cordova son retrocompatibles con Capacitor. Empieza la migración aquí.
Sobre Capgo
Capgo gestiona la actualización de las apps a lo largo del tiempo. Los equipos de desarrollo pueden centrarse por completo en las funciones únicas de su app y delegar el complejo proceso de entrega de apps a Capgo.
Capgo cubre el hueco entre la entrega web y el móvil.
Prerrequisitos de Capgo
Al igual que App Center, Capgo soporta aplicaciones alojadas en repositorios Git en Azure DevOps, Bitbucket, GitHub y GitLab.
Instalar Capgo CLI
nota
Tienes que tener Node y NPM instalados en tu equipo antes de continuar. Usa siempre la versión LTS actual Capgo, no versiones anteriores.
Crear package.json y archivos de configuración de Capacitor
nota
Antes de empezar, te recomiendo hacer los cambios en una rama nueva de Git.
Desde Capgo se creó para automatizar apps de capacitor, pero requiere un archivo que puede que 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/coreLuego, inicializa Capacitor con el cuestionario de CLI:
npx cap initEl CLI te hará algunas preguntas, empezando por el nombre de tu app y el package ID que quieras usar para ella.
Por último, haz commit de los nuevos archivos en tu proyecto:
git add .git commit -m "added package json and capacitor config" && git pushMigra el Code
Ahora que ya tienes lo nuevo que se requiere Capgo con los archivos listos, podemos centrarnos en la app propiamente dicha. 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. Comienza por crear una cuenta de Capgo.
Una vez que inicies sesión en Capgo, ve a la página Account y haz clic en la clave API y después en la clave ‘write’ para copiarla al portapapeles.
Instala el SDK de Capgo
Desde la terminal, directamente en la raíz de la carpeta de tu app de Capacitor, ejecuta el siguiente comando:
npm i @capgo/capacitor-updater && npx cap sync
Para instalar el plugin en tu app de Capacitor.
Y luego añade este code a tu app como reemplazo del 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 función 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 Web build 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 el CLI:
npx @capgo/cli@latest login YOURKEYAñade tu primera app
Empecemos por crear la app en Capgo Cloud con el 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 hacer el build de tu code y enviarlo a Capgo con:
npx @capgo/cli@latest bundle upload --channel productionPor defecto, el nombre de la versión será el de tu package.json archivo.
Comprueba en Capgo si el build está presente.
Incluso puedes probarlo con mi app móvil de sandbox.
Establecer canal como predeterminado
Una vez que hayas enviado tu app a Capgo, debes configurar tu canal default para que las apps reciban actualizaciones de Capgo.
npx @capgo/cli@latest channel set production -s defaultConfigura la app para validar actualizaciones
Añade 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 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, ponla en segundo plano y ábrela de nuevo; deberías ver en los logs que la app hizo 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 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-pushDespué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 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 *" />Por último, dentro de tu app, elimina cualquier referencia code a los servicios de App Center, como codePush.sync();.
Próximos pasos
Has migrado de App Center a Capgo, usando Live Updates. Esto es solo el comienzo de lo que puedes hacer con Capgo. Explora el resto del servicio: incluye Channel (múltiples entornos) y override. Para la integración de Cloud CLI, usa Capgo dentro de tu plataforma de CI/CD preferida (como GitHub Action, GitLab, Jenkins y más).
Envío automático de actualización de app
Si tu code está alojado en GitHub, puedes configurar el build y el release automáticos en unos pocos pasos más gracias a las acciones de GitHub.
He creado un segundo artículo para que puedas hacerlo.
Créditos
Muchas gracias a Ionic, este artículo se basa en este artículo reescrito con chat-gpt-3 y adaptado.
Continúa desde Migración de App Center a Capgo
Si estás usando Migración de App Center a Capgo para planificar la migración y las operaciones enterprise, conéctalo con Capgo Enterprise para el flujo de trabajo del producto en Capgo Enterprise, Alternativas a plugins de Ionic Enterprise para el flujo de trabajo del producto en Alternativas de Plugins de Ionic Enterprise, Alternativas a Capgo para el flujo de trabajo del producto en Capgo Alternatives, Consultoría de Capgo para el flujo de trabajo del producto en Capgo Consulting, y Soporte Premium de Capgo para el flujo de trabajo del producto en Capgo Premium Support.
