Aller au contenu principal
Tutoriel

Comment compiler une application Ionic Capacitor avec Xcode Cloud

Utilisez Xcode Cloud pour compiler votre application JS Capacitor sans avoir besoin de macOS.

Comment compiler une app Ionic Capacitor dans Xcode Cloud Capgo illustration du blog

Prerequisites

Avant de poursuivre le tutoriel…

  • Assurez-vous d’utiliser GitHub
  • Utiliser Capacitor
  • Votre app est déjà déployée sur l’App Store
  • Envie de lire 😆…

L’utilisation d’Ionic est facultative. Avec Cordova, ça peut fonctionner, mais je ne l’ai pas testé.

Note importante sur le prix

Tarifs Xcode Cloud

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

Le service est «gratuit’ jusqu’à la limite.
Vous pouvez voir les prix et les limites sur la capture d’écran (prix au moment de la création du tutoriel, susceptibles d’évoluer à l’avenir)

🔴 Une fois les prérequis et les tarifs présentés, si vous le souhaitez, nous continuons…

📣 Dans cet article, nous partons du principe que l’application a déjà été créée sur l’App Store

Intro

Pour que Xcode compile votre application Capacitor, vous devez configurer quelques éléments.

Préparation du package

Assurez-vous d'avoir votre commande de build dans votre package.json script. Ajoutez ensuite la sync:ios commande comme ci-dessous.

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

Cette étape permettra simplement au post-script de fonctionner

Script post-clone

Ce script sera exécuté par Xcode Cloud après l'étape de 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

Enregistrez ce fichier à la racine de votre projet et nommez-le ios/App/ci_scripts/ci_post_clone.sh

Rendez ensuite ce fichier exécutable avec cette commande chmod +x ios/App/ci_scripts/ci_post_clone.sh

Créer un workflow Xcode

Ouvrez Xcode (oui, pour supprimer Xcode, il vous faut Xcode)

Puis allez dans cet onglet : Xcode étape 1

Cliquez sur Create workflow, sélectionnez votre app, puis cliquez sur Next comme ci-dessous.

Xcode étape 2

Cliquez sur Edit workflow à gauche Xcode étape 2

Allez dans l'onglet Environments, choisissez Mac 12.4 comme ci-dessous et cochez l'option correspondante Xcode étape 3

Choisissez votre condition de démarrage. Si vous utilisez le même build que nous, je vous conseille Tag plutôt que branch, pour éviter un double build.

Configurez votre variable d'env Xcode étape 4

Connectez votre compte GitHub Étape 5 dans Xcode

Étape 6 dans Xcode

Activez ensuite le workflow et committez votre première modification : vous devriez voir votre build se lancer dans Xcode.

Traitement du build

Dans Xcode Cloud, la facturation se fait selon les minutes que vous utilisez pour exécuter votre workflow CI/CD. D’après notre expérience, il faut environ 10 à 15 minutes avant qu’un build puisse être traité dans l’App Store.

Pour les projets privés, le coût estimé par build peut atteindre 0,008 $/min x 5 min = 0,40 $, ou plus, selon la configuration ou les dépendances de votre projet.

Pour les projets open source, cela ne devrait poser aucun problème. Voir tarifs.

Continuer à partir de « Comment compiler une application Ionic Capacitor avec Xcode Cloud »

Si vous utilisez Comment compiler une application Ionic Capacitor avec Xcode Cloud pour planifier l'automatisation CI/CD, et le connecter avec CI/CD Capgo pour le workflow produit dans le CI/CD de Capgo, Capgo Native Build pour le workflow produit dans les Native Builds de Capgo, Intégrations Capgo pour le workflow produit dans les intégrations de Capgo, Intégration CI/CD pour le détail d'implémentation dans l'intégration CI/CD, et Intégration GitHub Actions pour les détails d'implémentation de l'intégration GitHub Actions.

Live updates pour les apps Capacitor

Lorsqu'un bug de la couche web est en ligne, déployez le correctif via Capgo au lieu d'attendre des jours l'approbation des stores. Les utilisateurs reçoivent la mise à jour en arrière-plan, tandis que les changements natifs suivent le circuit de validation habituel.

Les derniers articles du blog

Capgo vous offre les meilleures informations pour créer une application mobile vraiment professionnelle.