Saltare al contenuto principale
Tutorial

Come costruire un'app Ionic Capacitor in Xcode Cloud

Usa Xcode Cloud per costruire la tua app Capacitor JS e evita di avere bisogno di MacOS.

Martin Donadieu

Martin Donadieu

Content Marketer

Come costruire un'app Ionic Capacitor in Xcode Cloud

Prerequisiti

Prima di continuare con il tutorial…

  • Assicurati di utilizzare GitHub
  • Utilizza Capacitor
  • Il tuo app è già distribuito su Apple Store
  • Desiderio di leggere 😆…

L'utilizzo di Ionic è facoltativo, per Cordova potrebbe funzionare, ma non l'ho provato.

Importante per il prezzo

Prezzo Xcode Cloud

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

Il servizio è 'gratuito' fino al limite.
Puoi vedere nello screenshot il prezzo e i limiti (prezzi alla data della creazione del tutorial, potrebbero subire cambiamenti in futuro)

🔴 Una volta informati sui requisiti e sui prezzi, se lo desiderate, continuiamo…

📣 Nel post, supponiamo di avere l'app creata nell'Apple Store

Intro

Per far costruire Xcode il tuo Capacitor app, è necessario configurare alcune cose.

Preparazione del Pacchetto

Assicurati di avere la tua istruzione di costruzione nel tuo package.json script. Aggiungi poi il sync:ios command come riportato di seguito.

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

Questo passaggio farà funzionare semplicemente lo script post.

Post clone script

Questo script verrà eseguito da Xcode cloud dopo lo step di clone

#!/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

Salva questo file nella radice del tuo progetto e denominalo ios/App/ci_scripts/ci_post_clone.sh

Poi rendi questo file eseguibile con questo comando chmod +x ios/App/ci_scripts/ci_post_clone.sh

Crea un flusso di lavoro Xcode

Apri Xcode (sì, per rimuovere Xcode hai bisogno di Xcode)

E vai a questa scheda : Passo Xcode 1

Clicca su crea flusso di lavoro, seleziona la tua app, clicca su next come di seguito

Passo Xcode 2

Clicca su Modifica flusso di lavoro sulla sinistra Passo Xcode 2

Vai alla scheda ambienti e scegli come di seguito Mac 12.4 e seleziona l'opzione corretta Passaggio Xcode 3

Scegli la tua condizione di partenza. Se utilizzi la stessa build di noi, ti consiglio di utilizzare Tag invece di branch, per evitare la doppia build.

Imposta la tua variabile di ambiente Passaggio Xcode 4

Collega il tuo account GitHub Passaggio Xcode 5

Passaggio Xcode 6

Abilita quindi il flusso di lavoro e committa la tua prima modifica, dovresti vedere la tua build in esecuzione in Xcode.

Elaborazione della costruzione

In Xcode Cloud, sei fatturato in base ai minuti hai utilizzato per eseguire il flusso di lavoro di CI/CD. Dall'esperienza, ci vuole circa 10-15 minuti prima che una build possa essere elaborata nella Apple Store.

Per progetti privati, il costo stimato per la costruzione può arrivare fino a $0.008/min x 5 min = $0.4, o più, a seconda della configurazione o delle dipendenze del tuo progetto.

Per progetti Open-source, questo non dovrebbe essere un problema per niente. Vedi tariffe.

Continua da Come costruire un'app Ionic Capacitor in Xcode Cloud

Se stai utilizzando Come costruire un'app Ionic Capacitor in Xcode Cloud per pianificare l'automazione CI/CD, connettilo con Capgo CI/CD per il flusso di lavoro del prodotto in Capgo CI/CD, Capgo Build Native per il flusso di lavoro del prodotto in Capgo Costruzioni native Capgo Integrazioni per il flusso di lavoro del prodotto in Capgo Integrazioni Integrazione CI/CD per la dettagliata implementazione in Integrazione CI/CD, e GitHub Integrazione azioni per la dettagliata implementazione in GitHub Integrazione azioni

Aggiornamenti in tempo reale per le app Capacitor

Quando un bug nel layer web è attivo, invia la correzione attraverso Capgo invece di aspettare giorni per l'approvazione della store. Gli utenti ricevono l'aggiornamento in background mentre le modifiche native rimangono nel normale percorso di revisione.

Inizia subito

Ultimi articoli dal nostro Blog

Capgo ti offre le migliori informazioni che ti servono per creare un'app mobile davvero professionale.