Zum Hauptinhalt springen
Tutorial

Wie man eine Ionic Capacitor-App in Xcode Cloud erstellt

Verwenden Sie Xcode Cloud, um Ihre Capacitor-JS-Anwendung zu erstellen und die Notwendigkeit eines MacOS-Systems zu umgehen.

Martin Donadieu

Martin Donadieu

Content Marketer

Wie man eine Ionic Capacitor App in Xcode Cloud erstellt

Voraussetzungen

Bevor Sie mit dem Tutorial fortfahren…

  • Stellen Sie sicher, dass Sie GitHub verwenden
  • Verwenden Sie Capacitor
  • Ihre App ist bereits auf dem Apple Store veröffentlicht
  • Wunsch, zu lesen 😆…

Mit Ionic ist optional, für Cordova könnte es funktionieren, aber ich habe es nicht ausprobiert.

Wichtig bezüglich des Preises

Preis Xcode Cloud

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

Der Service ist ‘frei’ bis zum Limit.
Sie können im Screenshot den Preis und die Limits (Preise zum Zeitpunkt der Erstellung des Tutorials, sie könnten sich in Zukunft ändern) sehen.

🔴 Einmal gewarnt über Anforderungen und Preise, wenn Sie möchten, gehen wir weiter…

📣 In dem Beitrag nehmen wir an, dass wir das App erstellt haben in Apple Store

Einführung

Um Xcode Ihren Capacitor-App zu bauen, müssen Sie ein paar Dinge einrichten.

Paketvorbereitung

Stellen Sie sicher, dass Sie Ihren Build-Befehl in Ihrem package.json Skript. Dann fügen Sie das sync:ios Kommando wie unten angegeben ein.

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

Dieser Schritt macht das Post-Script-Work einfach

Post-Klon-Skript

Dieses Skript wird nach dem Klon-Schritt von Xcode Cloud ausgeführt

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

Speichern Sie dieses File im Root Ihres Projekts und nennen Sie es ios/App/ci_scripts/ci_post_clone.sh

Dann machen Sie dieses File mit diesem Kommando ausführbar chmod +x ios/App/ci_scripts/ci_post_clone.sh

Erstellen Sie ein Xcode-Workflow

Öffnen Sie Xcode (ja, um Xcode zu entfernen benötigen Sie Xcode)

Und gehen Sie auf diese Registerkarte : Xcode-Schritt 1

Klicken Sie auf 'Workflow erstellen', wählen Sie Ihr App, klicken Sie auf 'Weiter' wie unten.

Xcode Schritt 2

Klicken Sie auf "Bearbeiten" in der linken Spalte Xcode Schritt 2

Gehen Sie zur Umgebungsseite und wählen Sie wie unten Mac 12.4 und überprüfen Sie die richtige Option Xcode Schritt 3

Wählen Sie Ihre Startbedingung. Wenn Sie denselben Build wie wir verwenden, empfehlen wir Ihnen, Tag anstelle von Branch zu verwenden, um doppelte Builds zu vermeiden.

Setzen Sie Ihre Umgebungsvariable Xcode Schritt 4

Verbinden Sie Ihr GitHub-Konto Xcode Schritt 5

Xcode Schritt 6

Aktivieren Sie dann die Workflow-Option und committen Sie Ihre erste Änderung, Sie sollten Ihren Build in Xcode laufen sehen.

Buildverarbeitung

In Xcode Cloud, Sie werden auf der Grundlage der Minuten abgerechnet, die Sie für die Ausführung Ihres CI/CD-Workflows verwendet haben. Aus Erfahrung dauert es etwa 10-15 Minuten, bevor ein Build im Apple Store verarbeitet werden kann. Für private Projekte kann die geschätzte Kosten pro Build bis zu

$0,008/min x 5 min = $0,4 , oder mehr, je nach Konfiguration oder Abhängigkeiten Ihres Projekts.Für Open-Source-Projekte sollte dies kein Problem sein. Siehe

Preise Fortsetzen Sie von Wie man eine Ionic __CAPGO_KEEP_0__ App in Xcode Cloud erstellt.

Keep going from How to build Ionic Capacitor app in Xcode Cloud

Wie man eine Ionic __CAPGO_KEEP_0__ App in Xcode Cloud erstellt How to build Ionic Capacitor app in Xcode Cloud um die CI/CD-Automatisierung zu planen, mit ihr zu verbinden Capgo CI/CD für den Produktworkflow in Capgo CI/CD, Capgo Native Builds für den Produktworkflow in Capgo Native Builds, Capgo Integrations für den Produktworkflow in Capgo Integrations, CI/CD-Integration für die Implementierungsdetails in CI/CD-Integration, und GitHub Actions-Integration für die Implementierungsdetails in GitHub Actions-Integration.

Live Updates für Capacitor-Apps

Wenn ein Web-Schicht-Bug live ist, liefern Sie die Reparatur über Capgo anstatt Tage auf die Genehmigung der App-Stores zu warten. Die Benutzer erhalten die Aktualisierung im Hintergrund, während native Änderungen im normalen Review-Verfahren bleiben.

Los geht's jetzt

Neuestes aus unserem Blog

Capgo bietet Ihnen die besten Einblicke, die Sie benötigen, um eine wirklich professionelle mobile App zu erstellen.