Passer au contenu principal
Tutoriel

Comment créer une application Ionic Capacitor dans Xcode Cloud

Utilisez Xcode Cloud pour construire votre application Capacitor JS et évitez la nécessité d'un MacOS.

Martin Donadieu

Martin Donadieu

Spécialiste du contenu

Comment créer une application Ionic Capacitor dans Xcode Cloud

Prérequis

Avant de continuer avec la tutrice…

  • Assurez-vous d'utiliser GitHub
  • Utilisez Capacitor
  • Votre application est déjà déployée sur l'App Store
  • Désir de lire 😆…

L'utilisation d'Ionic est facultative, pour Cordova cela pourrait fonctionner, mais je n'ai pas essayé.

Informations importantes sur le prix

Prix Xcode Cloud

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

Le service est ‘gratuit’ jusqu'à la limite.
Vous pouvez voir dans l'écran de capture d'écran le prix et les limites (tarifs valables à la création de ce tutoriel, ils pourraient subir des changements à l'avenir)

🔴 Une fois averti des exigences et des prix, si vous le souhaitez, nous continuons…

📣 Dans l'article, on suppose que nous avons l'application créée dans l'Apple Store

Intro

Pour faire construire Xcode votre Capacitor application, vous devez configurer quelques choses.

Préparation du package

Assurez-vous d'avoir votre commande de build dans votre package.json script. Ensuite, ajoutez le sync:ios __CAPGO_KEEP_0__ comme ci-dessous.

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

Cette étape fera fonctionner simplement le script post-clonage.

Script de clonage post

Ce script sera exécuté par Xcode Cloud après l'étape de clonage.

#!/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 dans le répertoire racine de votre projet et nommez-le ios/App/ci_scripts/ci_post_clone.sh

Ensuite, faites de ce fichier un exécutable avec la commande suivante : chmod +x ios/App/ci_scripts/ci_post_clone.sh

Créer un flux de travail Xcode

Ouvrez Xcode (oui, pour supprimer Xcode, vous avez besoin de Xcode)

Et allez dans cette onglet : Étape Xcode 1

Cliquez sur Créer un flux de travail, sélectionnez votre application, cliquez sur Suivant comme ci-dessous.

Étape Xcode 2

Cliquez sur Éditer le workflow sur le côté gauche Étape Xcode 2

Allez dans l'onglet Environnements et choisissez comme ci-dessous Mac 12.4 et vérifiez l'option appropriée Étape Xcode 3

Choisissez votre condition de démarrage. Si vous utilisez la même build que nous, je vous conseille d'utiliser Tag au lieu de branch, pour éviter la double build.

Définissez votre variable d'environnement Étape Xcode 4

Connectez votre compte GitHub Étape Xcode 5

Étape Xcode 6

Activez ensuite le workflow et commitez votre première modification, vous devriez voir votre build s'exécuter dans Xcode.

Traitement de Build

Dans Xcode Cloud, Vous êtes facturés en fonction des minutes que vous avez utilisées pour exécuter votre flux de CI/CD. D'expérience, il faut environ 10-15 minutes avant que le build ne soit traité dans l'App Store. Pour les projets privés, le coût estimé par build peut aller jusqu'à

$0.008/min x 5 mins = $0.4 ou plus, en fonction de la configuration ou des dépendances de votre projet.Pour les projets Open-source, ce ne devrait pas être un problème du tout. Voir

tarification Continuez de la section.

Comment construire une application Ionic Capacitor dans Xcode Cloud

Si vous utilisez Comment construire une application Ionic Capacitor dans Xcode Cloud plan l'automatisation de CI/CD, la connecter à Capgo CI/CD pour le flux de travail du produit dans Capgo CI/CD, Capgo Builds natifs pour le flux de travail du produit dans Capgo Builds natifs, Capgo Intégrations pour le flux de travail du produit dans Capgo Intégrations, Intégration de CI/CD pour le détail d'implémentation dans Intégration de CI/CD, et GitHub Intégration d'Actions pour le détail d'implémentation dans GitHub Intégration d'Actions.

Mises à jour en temps réel pour les applications Capacitor

Lorsqu'un bug de la couche web est en ligne, expédiez la correction par le biais de Capgo au lieu d'attendre des jours pour l'approbation de la boutique d'applications. Les utilisateurs reçoivent la mise à jour en arrière-plan tandis que les changements natifs restent dans la voie de revue normale.

Commencez dès maintenant

Dernières actualités de notre Blog

Capgo vous donne les meilleures informations dont vous avez besoin pour créer une application mobile vraiment professionnelle.