Saltar al contenido principal
Guía

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

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

Martin Donadieu

Martin Donadieu

Gerente de Contenido

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

Requisitos previos

Antes de continuar con el tutorial...

  • Asegúrese de utilizar GitHub
  • Utilice Capacitor
  • Su aplicación ya está desplegada 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 Xcode Cloud

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

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

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

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

Introducción

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

Script de post clonación

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 un flujo de trabajo de Xcode

Abra Xcode (sí, para eliminar Xcode necesita Xcode)

Y vaya a esta pestaña : Paso Xcode 1

Haga clic en crear flujo de trabajo, seleccione su aplicación, haga clic en siguiente como se muestra a continuación.

Paso Xcode 2

Haga clic en Editar flujo de trabajo en el lado izquierdo Paso Xcode 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 Paso Xcode 3

Elige tu condición de inicio. Si utiliza el mismo build que nosotros, le recomendamos usar Etiqueta en lugar de rama, para evitar la construcción doble.

Establezca su variable de entorno Paso Xcode 4

Conecta tu cuenta de GitHub Paso 5 de Xcode

Paso 6 de Xcode

Activa el flujo de trabajo y haz tu primer cambio, deberías ver tu compilación en ejecución 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, tarda unos 10-15 minutos antes de que una compilación pueda ser procesada 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 tu proyecto.

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

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

Si estás utilizando Cómo construir una aplicación de 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 Builds Nativos, Capgo Integraciones for the product workflow in Capgo Integrations, para el flujo de trabajo del producto en __CAPGO_KEEP_0__ Integraciones, para los detalles de implementación en la Integración CI/CD, y GitHub Integración de Acciones para los detalles de implementación en GitHub Integración de Acciones.

Actualizaciones en vivo para aplicaciones de Capacitor

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

Cuando un bug en la capa web está vivo, envíe la corrección a través de __CAPGO_KEEP_0__ 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.

Contenido del contexto: Página/área: Sitio web de marketing de Capgo. Rol: Oración de descripción de soporte o descripción meta. Visto en: componente GetStarted.astro. Preservar términos de producto/marca y términos de desarrollador exactamente. Clave de mensaje `instant_updates_for_capacitor_apps_description` (Descripción de Actualizaciones Instantáneas Para Aplicaciones de Capacitor).

Apoyo humano de Martin

Capgo gives you the best insights you need to create a truly professional mobile app.