Saltar al contenido principal
Tutoriales

Cómo crear una aplicación Ionic Capacitor en Xcode Cloud

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

Martin Donadieu

Martin Donadieu

Gerente de contenido

Cómo crear una aplicación Ionic Capacitor en Xcode Cloud

Requisitos previos

Antes de continuar con el tutorial…

  • Asegúrese de usar GitHub
  • Use Capacitor
  • Su aplicación ya está desplegada en Apple Store
  • Desear leer 😆…

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

Importante sobre el precio

Precio Xcode Cloud

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

El servicio es ‘gratis’ Hasta el límite.
Puedes ver en la captura de pantalla el precio y los límites (precios a la fecha de creación del tutorial, pueden sufrir cambios en el futuro).

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

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

Intro

Para hacer que Xcode construya tu aplicación Capacitor, necesitas 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 de manera sencilla.

Post clonar script

This script will be run by Xcode cloud after the clone step

#!/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 un 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 Paso 2 de Xcode

Ve a la pestaña de entornos y elige como se muestra a continuación Mac 12.4 y selecciona la opción correcta Paso 3 de Xcode

Elige tu condición de inicio. Si utilizas la misma compilación que nosotros, te recomiendo utilizar Tag en lugar de rama, para evitar la compilación doble.

Establece tu variable de entorno Paso 4 de Xcode

Conecta tu cuenta de GitHub Paso 5 de Xcode

Paso 6 de Xcode

Habilita y el flujo de trabajo y haz tu primer cambio, deberías ver tu compilación ejecutándose en Xcode.

Procesamiento de compilación

En Xcode Cloud, se facturan minutos según los minutos que has utilizado para ejecutar tu flujo de trabajo de CI/CD. De nuestra experiencia, lleva aproximadamente 10-15 minutos antes de que una compilación pueda ser procesada en la Tienda de Apple.

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

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

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

Si estás utilizando Cómo construir una aplicación Ionic Capacitor en Xcode Cloud para planificar la automatización de CI/CD, conecta con Capgo CI/CD para el flujo de trabajo del producto en Capgo CI/CD, Capgo Builds nativos para el flujo de trabajo del producto en Capgo Construcción Nativa 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 Capacitor

Cuando haya un error en la 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 los cambios nativos siguen en el camino de revisión normal.

Iniciar ahora

Últimas noticias de nuestro Blog

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