Saltare al contenuto principale
Guida

Come costruire un'app Ionic Capacitor in Xcode Cloud

Utilizza Xcode Cloud per costruire la tua app Capacitor JS e evita di utilizzare MacOS.

Martin Donadieu

Martin Donadieu

Content Marketer

Come costruire un'app Ionic Capacitor in Xcode Cloud

Requisiti

Prima di continuare con la guida…

  • Assicurati di utilizzare GitHub
  • Utilizza Capacitor
  • La tua app è già distribuita su Apple Store
  • Desidero leggere 😆…

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

Importante per il prezzo

Prezzo Xcode Cloud

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

Il servizio è 'gratuito' finché non raggiungi il limite.
Puoi vederlo nello screenshot i prezzi e i limiti (prezzi validi alla creazione del tutorial, potrebbero subire cambiamenti in futuro)

🔴 Una volta avvertito dei requisiti e dei prezzi, se ti va, continuiamo…

📣 In questo post, supponiamo di avere già creato l'applicazione su Apple Store

Introduzione

Per far costruire Xcode il tuo applicativo Capacitor, hai bisogno di 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 mostrato 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 root del tuo progetto e denominalo ios/App/ci_scripts/ci_post_clone.sh

Poi esegui questo file con il comando chmod +x ios/App/ci_scripts/ci_post_clone.sh

Creazione di un workflow di Xcode

Apre Xcode (sì, per rimuovere Xcode avrai bisogno di Xcode)

E vai in questa scheda : Passo Xcode 1

Clicca su crea workflow, seleziona la tua app, clicca successivamente come mostrato di seguito.

Passo Xcode 2

Clicca su Modifica workflow sulla sinistra Passo Xcode 2

Vai nella scheda ambienti e scegli come mostrato di seguito Mac 12.4 e verifica l'opzione corretta Passo Xcode 3

Scegli la tua condizione di avvio. 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 Passo Xcode 4

Collega il tuo account GitHub Passo 5 di Xcode

Passo 6 di Xcode

Poi abilita il flusso di lavoro e committa la tua prima modifica, dovresti vedere il tuo build in esecuzione in Xcode.

Elaborazione di costruzione

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

Per i progetti privati, il costo stimato per il build 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 i progetti Open-source, questo non dovrebbe essere un problema per niente. Vedi Prenotazioni.

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

Se stai utilizzando Come costruire l'app Ionic Capacitor in Xcode Cloud per pianificare l'automazione del flusso di lavoro CI/CD, connettilo con Capgo CI/CD per il flusso di lavoro del prodotto in Capgo CI/CD, Capgo Costruzioni 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 i dettagli di implementazione in CI/CD Integration, e GitHub Azioni di integrazione per i dettagli di implementazione in GitHub Azioni di integrazione.

Aggiornamenti in tempo reale per le app 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.

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

Contesto: Pagina/area: Sito web di marketing Capgo. Ruolo: Descrizione di supporto o meta descrizione. Visto in: componente GetStarted.astro. Preservare i termini di prodotto/marca e i termini di sviluppatore esattamente. Chiave del messaggio `instant_updates_for_capacitor_apps_description` (Descrizione degli aggiornamenti in tempo reale per le app di Capacitor).

Sostegno umano da parte di Martin

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