Automatic Capacitor IOS build with Codemagic

Entrega Continua para iOS utilizando Codemagic

Requisitos previos

Antes de continuar con el tutorial…

• Miembro del programa de desarrolladores de iOS.
• Deseo de leer 😆…

Importante sobre el precio

https://codemagic.io/pricing/

El servicio es ‘gratuito’ hasta 500 minutos de macOS M1 al mes, dependiendo de la máquina elegida.
Vamos a utilizar una máquina de macOS M1 puedes ver en la captura su precio y límites (precios a la creación de este tutorial, pueden cambiar en el futuro)

🔴 Una vez advertido de los requisitos y precios, si te gusta, continuamos…

📣 En el post asumimos que tenemos la aplicación creada en iTunes connect, tenemos los certificados del ecosistema de Apple, todo estará configurado por Codemagic!

¡Vamos a sumergirnos!

Pasos a seguir en el post

1. Usando App Store Connect API con Codemagic
2. Requisitos
3. Crear una clave de App Store Connect API
4. Usar una clave de App Store Connect API
5. Copiar archivos de Fastlane
6. Configurar Codemagic

1. Usando App Store Connect API con Codemagic

Desde febrero de 2021, se requiere autenticación en dos factores o verificación en dos pasos para todos los usuarios para iniciar sesión en App Store Connect. Esta capa adicional de seguridad para tu ID de Apple ayuda a asegurarte de que eres la única persona que puede acceder a tu cuenta.
Desde Soporte de Apple

Empezar con match requiere que revoces tus certificados existentes. Pero no te preocupes, tendrás el nuevo directamente.

Requisitos

Para poder utilizar App Store Connect API, Codemagic necesita tres cosas.

1. ID del emisor.
2. ID de clave.
3. Archivo de clave o contenido de clave.

Crear una clave de App Store Connect API

Para generar claves, debes tener permiso de administrador en App Store Connect. Si no tienes ese permiso, puedes dirigir a la persona relevante a este artículo y seguir las siguientes instrucciones.

1 — Inicia sesión en App Store Connect.

2 — Seleccionar Usuarios y Acceso.

3 — Selecciona la pestaña de API Claves.

4 — Haz clic en Generar API Clave o en el botón (+) de agregar.

5 — Ingresa el nombre para la clave y selecciona un nivel de acceso. Recomendamos elegir App Manager derechos de acceso, lee más sobre los permisos del rol del programa de desarrollador de Apple aquí

6 — Haz clic en Generar.

Una clave API no puede tener acceso limitado a aplicaciones específicas.

El nombre de la nueva clave, el ID de la clave, un enlace de descarga y otra información aparecen en la página.

Obtén aquí toda la información necesaria: <1> ID de la solicitud.
<2> ID de la clave.
<3> Haz clic en "Descargar clave API" para descargar tu clave API privada. El enlace de descarga aparece solo si la clave privada no se ha descargado aún. Apple no almacena una copia de la clave privada. Por lo tanto, solo puedes descargarla una vez.

🔴 Almacena tu clave privada en un lugar seguro. Nunca compartas tus claves, almacena claves en un repositorio code o incluye claves en el lado del cliente code.

Agregar la clave de App Store Connect API a Codemagic

1. Abre tus configuraciones de equipo de Codemagic Selecciona identidades de firma code Y subir el certificado

2. Haga clic en el Agregar clave botón.

3. Introduzca el App Store Connect API key nameEste es un nombre legible para humanos para la clave que se utilizará para referirse a la clave más tarde en los ajustes de la aplicación.

4. Introduzca el Issuer ID y Key ID contexto: Página/área: Sitio web de marketing de Capgo. Rol: Etiqueta de IU corta o elemento de navegación. Visto en: página trust.astro. Clave de mensaje `y` (Y).

5. valores. Elige un archivo .p8 o arrastra el archivo para subir la clave App Store Connect API descargada anteriormente.

6. Haz clic Guardar.

Ahora podemos gestionar Codemagic con la clave App Store Connect API, ¡genial!

2. Crea certificados y perfiles de configuración

Certificados

Abre XCode y ve a Ajustes &gt; Cuentas &gt; ID de Apple > Equipos y selecciona tu equipo.

Haz clic en Gestiona certificados > + y selecciona Distribución de Apple.

Entonces puedes crear un nuevo certificado.

Luego debes ir a la caja de llaves para descargar el certificado como un .p12 archivo.

Para hacerlo, debes ir a la caja de llaves, cambiar a la caja de llaves de inicio de sesión y luego la pestaña Mis certificados.

Luego puedes seleccionar el certificado que deseas descargar. (Busca por la fecha del certificado)

Y luego haz clic derecho en el certificado y selecciona Exportar.

Elige el formato de archivo Información personal intercambiable (.p12).

Descargará el certificado como un .p12 archivo.

Perfiles de provisión

Abrir Desarrollador de Apple y seleccione el equipo correcto.

Entonces, cree un nuevo perfil, haciendo clic en +

Y seleccione App Store Connect.

Entonces, debe seleccionar la aplicación correcta, tenga cuidado, ya que no puede utilizar wildcards de lo contrario el firmado fallará.

Selecciona el certificado correcto que creaste antes (busca la fecha de vencimiento, debe ser el mismo día y mes que hoy) y haz clic en Continúa.

Finalmente, ingresa el nombre del perfil y haz clic en Genera.

El nombre se utilizará para identificar el perfil en Codemagic.

Puedes descargar el perfil como un .mobileprovision archivo.

Agregar el certificado de firma Code

Codemagic te permite subir los certificados de firma code como archivos PKCS#12 que contienen tanto el certificado como la clave privada, necesarias para utilizarlo. Cuando subas, Codemagic te pedirá que proporciones la contraseña del certificado (si el certificado está protegido por contraseña) junto con un nombre de referencia único Nombre de referencia, que luego se puede utilizar en la codemagic.yaml configuración para obtener el archivo específico.

• Subir certificado
• Generar nuevo certificado
• Obtener desde el Portal de Desarrolladores

1. Abre tus ajustes de equipo de Codemagic, ve a ajustes de codemagic.yaml &gt; identidades de firma Code.
2. Abre certificados de iOS pestaña.
3. Subir el archivo del certificado haciendo clic en Elegir un archivo .p12 o .pem o arrastrarlo y soltarlo en el marco indicado.
4. Introduzca la contraseña del certificado y elija un nombre de referencia.
5. Haga clic en Agregar certificado

Agregar el perfil de provisión

El Codemagic te permite subir un perfil de provisión para utilizarlo en la aplicación o para obtener un perfil desde el Portal del Desarrollador de Apple.

El tipo de perfil, equipo, identificador de paquete y fecha de vencimiento se muestran para cada perfil agregado a las identidades de firma Code. Además, el Codemagic te informará si está disponible una certificación de firma code en las identidades de firma Code (un marcador de verificación verde en el campo). Certificado 3. Configuración de Codemagic

Configuración de secretos de Codemagic

¿Te has preguntado alguna vez de dónde provienen los valores de los?

Pues ya no es un secreto – provienen de tu proyecto secreto. ENV 4. Configuración del archivo de flujo de trabajo de Codemagic

Crear un archivo llamado

en la raíz de tu proyecto y agregar lo siguiente. codemagic.yml Este flujo de trabajo debe activarse manualmente o después de cada __CAPGO_KEEP_0__

workflows:
  ionic-capacitor-ios-workflow:
    name: Capacitor iOS Workflow
    max_build_duration: 120
    instance_type: mac_mini_m1
    integrations:
      app_store_connect: CodeMagic
    environment:
      ios_signing:
        distribution_type: app_store
        bundle_identifier: YOUR_BUNDLE_IDENTIFIER
      vars:
        XCODE_WORKSPACE: ios/App/App.xcworkspace
        XCODE_SCHEME: App
        APP_STORE_APP_ID: YOUR_APP_STORE_APP_ID
      node: v20.14.0
      xcode: 15.4
      cocoapods: default
    triggering:
      events:
        - tag
      tag_patterns:
        - pattern: '*'
          include: true
    scripts:
      - name: Install dependencies
        script: |
          npm install
      - name: Cocoapods installation
        script: |
          cd ios/App && pod install
      - name: Update dependencies and copy web assets to native project
        script: |
          npm run build
          npx cap sync ios
      - name: Set up code signing settings on Xcode project
        script: |
          xcode-project use-profiles
      - name: Increment build number
        script: |
          cd $CM_BUILD_DIR/ios/App
          LATEST_BUILD_NUMBER=$(app-store-connect get-latest-app-store-build-number "$APP_ID")
          agvtool new-version -all $(($LATEST_BUILD_NUMBER + 1))
      - name: Build ipa for distribution
        script: |
          xcode-project build-ipa \
            --workspace "$XCODE_WORKSPACE" \
            --scheme "$XCODE_SCHEME"
    artifacts:
      - build/ios/ipa/*.ipa
      - /tmp/xcodebuild_logs/*.log
      - $HOME/Library/Developer/Xcode/DerivedData/**/Build/**/*.app
      - $HOME/Library/Developer/Xcode/DerivedData/**/Build/**/*.dSYM
    publishing:
      email:
        recipients:
          - YOUR_EMAIL
        notify:
          success: true # To not receive a notification when a build succeeds
          failure: false # To not receive a notification when a build fails
      app_store_connect:
        auth: integration
        # Configuration related to TestFlight (optional)
        # Note: This action is performed during post-processing.
        submit_to_testflight: true
        # Configuration related to App Store (optional)
        # Note: This action is performed during post-processing.
        submit_to_app_store: false

This workflow should be triggered manually or after each GitHub etiquetasi necesita automatizar etiquetas, por favor, consulte automatico de construcción y lanzamiento con acciones de GitHub primero.

Después, este flujo de trabajo extraerá sus dependencias de NodeJS, las instalará y construirá su aplicación de JavaScript.

Cada vez que envíe una nueva etiqueta, se construirá una versión en TestFlight.

No es necesario que su aplicación utilice Ionic, solo es necesario que tenga la base de Capacitor como requisito, puede tener módulos de Cordova antiguos, pero se recomienda utilizar el plugin de JavaScript de Capacitor

5. Desencadenar flujo de trabajo

Desencadenar el flujo de trabajo

Envíe los nuevos commits a la rama main o development contexto: Fragmento de texto HTML de una cadena de Capgo UI más larga (clave de padre `alternatives_cta_questions`). Página/área: Comparación de alternativas de actualización en vivo de Capacitor. Papel: Parágrafo de marketing o legal largo. Visto en: página alternatives.astro. Preservar términos de producto y marca de Capgo exactamente. Clave de mensaje `alternatives_cta_questions` (Preguntas de CTA de alternativas). | Fragmento de texto HTML de una cadena de Capgo UI más larga (clave de padre `appflow_cta_questions`). Página/área: Comparación y migración de marketing de Appflow. Papel: Parágrafo de marketing o legal largo. Visto en: página ionic-appflow.astro. Preservar términos de producto y marca de Capgo exactamente. Clave de mensaje `appflow_cta_questions` (Preguntas de CTA de Appflow). | Fragmento de texto HTML de una cadena de Capgo UI más larga (clave de padre `capwesome_cta_questions`). Página/área: Comparación de Capawesome. Papel: Parágrafo de marketing o legal largo. Visto en: página capwesome.astro. Preservar términos de producto y marca de Capgo exactamente. Clave de mensaje `capwesome_cta_questions` (Preguntas de CTA de Capwesome). | Página/área: Página de servicios de consultoría. Papel: Título o subtítulo de sección. Visto en: página consulting.astro. Preservar términos de producto y marca de Capgo exactamente. Clave de mensaje `consulting_faq_subtitle` (Título de subtítulo de FAQ de consultoría). | Página/área: Comparación y migración de marketing de Appflow. Papel: Etiqueta de UI corta o elemento de navegación. Visto en: página ionic-appflow.astro, página ionic-enterprise-plugins.astro, página soluciones/ionic-enterprise-plugins.astro. Clave de mensaje `appflow_plugins_or` (O plugins de Appflow).

Después de unos minutos, el build debería estar disponible en tu panel de App Store Connect.

Iniciar manualmente

Puedes iniciar el flujo de trabajo manualmente.

Primero selecciona la aplicación que deseas construir, luego haz clic en context: Página/área: Capgo Builder / producto de construcción nativa en la nube. Rol: Etiqueta de navegación o elemento UI corto. Mensaje clave `native_build_builder_credit_first` (Crédito del constructor de construcción nativa Primero)..

Seleccionar aplicación

Seleccionar rama Y haz clic en.

Entonces ve a la lista de construcción

Y haz clic en la construcción para ver el resultado.

Puedes desplegar desde la máquina local

Sí, puedes, y es sencillo.

Puedes utilizar Xcode para construir y firmar tu aplicación, como siempre.

Gracias

Este blog se basa en los siguientes artículos:

• Entrega continua para IOS utilizando Codemagic y GitHub acciones
• Documentación de Codemagic
• Este GitHub mensaje de @mrogunlana

Keep going from Automatic Capacitor IOS build with Codemagic

Si estás utilizando Automatic Capacitor IOS build with Codemagic para planificar la automatización de CI/CD, conecta con Capgo CI/CD for the product workflow in Capgo CI/CD, Capgo Native Builds for the product workflow in Capgo Native Builds, Capgo Integrations for the product workflow in Capgo Integrations, Integración de CI/CD para los detalles de implementación en la Integración de CI/CD, y GitHub Acciones de Integración para los detalles de implementación en GitHub Acciones de Integración.