Étape 28 — Build iOS (exception Mac)

Cette étape nécessite un Mac avec Xcode

Élèves sur Windows ou Linux : sautez cette étape. Xcode n'existe que sur macOS — il n'y a aucun contournement officiel.

Vous avez déjà votre app Android fonctionnelle depuis l'étape E27, passez directement à E29 (Adaptations UI mobile).

Temps estimé

Environ 1h30 (dont 30-45 min de premier téléchargement Xcode/CocoaPods/pods). Les fois suivantes : 5-10 min.

Pré-requis (à installer AVANT de commencer)

1. L'étape E27 terminée

Capacitor doit déjà être installé, capacitor.config.ts créé, src/plugins/axios.js doit pointer vers Vercel, et npm run build doit fonctionner. Cette étape ajoute uniquement la plateforme iOS au projet existant.

2. Xcode

Téléchargez depuis le Mac App Store (gratuit, ~10 Go). Lancez Xcode une première fois et acceptez la licence quand elle apparaît. Connectez-vous avec un compte Apple quelconque (gratuit).

3. Outils en ligne de commande Xcode

Dans un terminal :

xcode-select --install

Si le message dit qu'ils sont déjà installés, parfait.

4. CocoaPods (PAS inclus avec Xcode 15+)

# Méthode recommandée (pas de sudo)
brew install cocoapods

# Vérifier
pod --version    # → 1.15.0 ou supérieur

Si vous n'avez pas Homebrew, installez-le depuis brew.sh.

Sans CocoaPods, l'étape §1 (npx cap add ios) plantera

L'erreur ressemble à pod: command not found ou Unable to find a specification for.... Installez CocoaPods d'abord.

Tâches

1. Ajouter la plateforme iOS

npx cap add ios

Cette commande :

1. Crée le dossier ios/App/ contenant un projet Xcode complet
2. Copie le contenu de dist/ dans ios/App/App/public/
3. Lance pod install pour installer les dépendances natives (CocoaPods)

Premier pod install long

La première installation des pods télécharge ~500 Mo de spécifications CocoaPods. Comptez 5-10 minutes la première fois (très silencieux dans le terminal). Si vous voyez Setting up CocoaPods master repo, c'est normal, laissez tourner.

2. Ouvrir le projet dans Xcode

npx cap open ios
# → ouvre ios/App/App.xcworkspace dans Xcode

Ouvrez bien .xcworkspace, PAS .xcodeproj

Si vous double-cliquez sur App.xcodeproj (généré par Xcode), CocoaPods ne sera pas chargé et l'app crashera au lancement. Toujours App.xcworkspace.

3. Lancer dans le simulateur iPhone

Dans Xcode :

1. En haut, à côté du bouton Play, sélectionner un simulateur (par exemple iPhone 15 Pro)
2. Cliquer sur Play (▶) ou faire Cmd + R
3. Attendre que le simulateur démarre et que le build se termine

Premier build = 5-10 minutes

La compilation Swift + indexing prend du temps la première fois. N'interrompez pas Xcode même s'il semble figé. Les builds suivants prennent 10-30 secondes.

4. L'app Pokédex apparaît et la liste se charge depuis Vercel

Recharger l'app après modification du code Vue

npm run build && npx cap copy ios

Puis relancer dans Xcode (Cmd + R). Pas besoin de re-faire cap add ou pod install.

4. Synchroniser après ajout d'un plugin

Quand vous ajoutez un nouveau plugin Capacitor (par exemple @capacitor/camera), il faut faire :

npm install @capacitor/camera
npx cap sync

cap sync = cap copy + mise à jour des dépendances natives (pods iOS, gradle Android).

Tests à effectuer

• Le simulateur iPhone démarre sans erreur Xcode
• L'app s'ouvre et affiche le titre "Pokédex"
• La liste de Pokémon se charge (depuis Vercel, donc nécessite internet)
• Les images des Pokémon s'affichent
• La recherche par nom fonctionne
• Vous pouvez cliquer sur un Pokémon pour voir sa fiche détail

Erreurs courantes

Message d'erreur	Cause	Solution
pod: command not found	CocoaPods absent	brew install cocoapods
xcode-select: error: tool 'xcodebuild' requires Xcode	Outils ligne de commande mal pointés	sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
No such module 'Capacitor' au build	Ouverture de .xcodeproj au lieu de .xcworkspace	Fermer Xcode, ouvrir App.xcworkspace
Page blanche dans le simulateur	Bundle dist/ absent ou pas synchronisé	npm run build && npx cap copy ios
signing requires a development team	Pas de compte Apple configuré	Xcode → Signing & Capabilities → Team → choisir n'importe quel compte personnel (gratuit)

Pièges connus

iOS Simulator vs device physique

Le simulateur partage le réseau du Mac : localhost fonctionne. Sur un iPhone physique, localhost ne marchera pas — d'où l'intérêt d'utiliser l'API Vercel dès maintenant.

Cache WebView

Si vous modifiez le code et que vous ne voyez pas le changement dans le simulateur, faites Device → Erase All Content and Settings dans le menu Simulator. La WebView garde un cache agressif.

Commit

git add -A
git commit -m "feat(mobile): ajout plateforme iOS via Capacitor"

Suite

L'app marche sur iOS et Android (vous avez les deux maintenant), mais l'interface ressemble encore à la version desktop sur les deux plateformes. Passez à l'étape 29 pour adapter le UI : bottom navigation, safe areas iOS (notch), status bar native.