Saltar al contenido principal
Tutoriales

Cómo construir una aplicación de Ionic Capacitor en Xcode Cloud

Utilice Xcode Cloud para construir su aplicación de JS Capacitor y evite la necesidad de MacOS.

Créditos del artículo

Martin Donadieu

Escribidor

Valeria

Revisor

Jordan

Editor

Cómo construir una aplicación de Ionic Capacitor en Xcode Cloud

Requisitos previos

Antes de continuar con el tutorial...

  • Asegúrate de utilizar GitHub
  • Utiliza Capacitor
  • Tus aplicaciones ya están desplegadas en la Tienda de Apple
  • Desear leer 😆...

Usar Ionic es opcional, para Cordova podría funcionar, pero no lo he probado.

Importante sobre el precio

Precio de Xcode Cloud

https://developer.apple.com/xcode-cloud/

El servicio es ‘gratuito’ hasta el límite.
También puedes ver en la captura de pantalla el precio y los límites (precios a la fecha de creación de este tutorial, que podrían cambiar en el futuro).

🔴 Una vez advertido de los requisitos y precios, si lo deseas, continuamos…

📣 En el post, asumimos que ya tenemos la aplicación creada en Apple Store

Introducción

Para hacer que Xcode construya tu aplicación Capacitor, debes configurar algunas cosas.

Preparación del paquete

Asegúrate de tener tu comando de compilación en tu package.json script. Luego agrega el sync:ios comando como se muestra a continuación.

{
  "scripts": {
    "build": "YOUR BUILD COMMAND",
    "sync:ios": "cap sync ios"
  }
}

Este paso hará que el post script funcione simplemente

Script de clonación de post

Este script se ejecutará en Xcode Cloud después del paso de clonación

#!/usr/bin/env bash

set -x

export HOMEBREW_NO_INSTALL_CLEANUP=TRUE
# Install CocoaPods
echo "📦 Install CocoaPods"
brew install cocoapods
brew install node@18
brew link node@18

# Install dependencies
# XCode Cloud is literally broken for 2 months now - https://developer.apple.com/forums/thread/738136?answerId=774510022#774510022
npm config set maxsockets 3
npm ci
# or `pnpm install --frozen-lockfile` or `yarn add --frozen-lockfile` or bun install
npm run build 
# or npm run build
npm run sync:ios

Guarda este archivo en la raíz de tu proyecto y nómbralo ios/App/ci_scripts/ci_post_clone.sh

Luego haz que este archivo sea ejecutable con este comando chmod +x ios/App/ci_scripts/ci_post_clone.sh

Crear flujo de trabajo de Xcode

Abre Xcode (sí, para eliminar Xcode necesitas Xcode)

Y ve a esta pestaña : Paso 1 de Xcode

Haz clic en crear flujo de trabajo, selecciona tu aplicación, haz clic en siguiente como se muestra a continuación.

Paso 2 de Xcode

Haz clic en Editar flujo de trabajo en el lado izquierdo Xcode paso 2

Vaya a la pestaña de entornos y elija como se muestra a continuación Mac 12.4 y verifique la opción correcta Xcode paso 3

Elige tu condición de inicio. Si utiliza la misma compilación que nosotros, le sugiero utilizar Etiqueta en lugar de rama, para evitar la compilación doble.

Establezca su variable de entorno Xcode paso 4

Conecte su cuenta de GitHub Xcode paso 5

Xcode paso 6

Actívela y el flujo de trabajo y cometa su primer cambio, debería ver su compilación en ejecución en Xcode.

Compilación en Proceso

En Xcode Cloud, se le cobran según los minutos que ha utilizado para ejecutar su flujo de trabajo CI/CD. De la experiencia, lleva unos 10–15 minutos antes de que se pueda procesar una compilación en la Tienda de Apple.

Para proyectos privados, el costo estimado por compilación puede llegar a $0.008/min x 5 min = $0.4, o más, dependiendo de la configuración o dependencias de su proyecto.

Para proyectos de código abierto, esto no debería ser un problema en absoluto. Consulte precios.

Sigue adelante desde Cómo construir la aplicación Capacitor de Ionic en Xcode Cloud

Si está utilizando Cómo construir la aplicación Capacitor de Ionic en Xcode Cloud para planificar la automatización de CI/CD, conectarlo con Capgo CI/CD para el flujo de trabajo del producto en Capgo CI/CD, Capgo Compilaciones nativas para el flujo de trabajo del producto en Capgo Compilaciones nativas, Capgo Integraciones para el flujo de trabajo del producto en Capgo Integraciones, Integración CI/CD para el detalle de implementación en Integración CI/CD, y GitHub Integración de Acciones para el detalle de implementación en GitHub Integración de Acciones.

Actualizaciones en vivo para aplicaciones de Capacitor

Cuando haya un error de capa web en vivo, envíe la corrección a través de Capgo en lugar de esperar días para la aprobación de la tienda de aplicaciones. Los usuarios obtienen la actualización en segundo plano mientras que los cambios nativos siguen en el camino de revisión normal.

soporte humano de Martin

Iniciar ahora

Últimas noticias de nuestro Blog

Capgo te da las mejores perspectivas que necesitas para crear una aplicación móvil verdaderamente profesional.