Natuurlijk! Hier is een overzicht van hoe je je Capacitor-app kunt integreren in een moderne CI/CD pipeline met automatisering voor build, test en deployment op iOS en Android, specifiek afgestemd op jouw omgeving (macOS, Node.js 16, Ionic CLI, Capacitor 5.0, GitHub Actions). 1. **Algemene opzet van de CI/CD pipeline** Gebruik GitHub Actions om geautomatiseerde workflows te definiëren in je repository. Je kunt verschillende workflows maken voor build, testen en deployment. 2. **Build en test automatisering** - **Installatie en setup:** Gebruik een actie om jouw Node.js omgeving klaar te maken, bijvoorbeeld: ```yaml - uses: actions/setup-node@v3 with: node-version: '16' ``` - **Dependencies installeren:** ```yaml - run: npm install ``` - **Unit tests uitvoeren:** Als je bijvoorbeeld Jest of een andere testtool gebruikt: ```yaml - run: npm test ``` - **Capacitor synchroniseren en bouwen:** ```yaml - run: npx cap sync - run: npm run build # Zorg dat je build script klaarstaat in package.json ``` 3. **Platform-specifieke build en deployment** Omdat je op macOS werkt en iOS en Android wilt ondersteunen, kun je de volgende aanpak gebruiken: ### iOS (via Xcode en Fastlane) - **Xcode build en archive:** Gebruik een self-hosted runner of een Mac in de cloud (zoals GitHub-hosted Mac runners) om Xcode-commando's uit te voeren. - **Fastlane integratie:** Automatiser de build, signering en upload naar App Store Connect met Fastlane. **Voorbeeld Workflow:** ```yaml jobs: ios: runs-on: macos-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: '16' - run: npm install - run: npx cap sync ios - run: npm run build - run: bundle install # indien je bundler gebruikt - run: bundle exec fastlane ios beta ``` - **Fastlane configuratie:** Maak een `Fastfile` met lanes voor build, signering en upload. ### Android (via Gradle) - **Android build:** Gebruik een Android SDK image of self-hosted runner. ```yaml jobs: android: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: '16' - run: npm install - run: npx cap sync android - run: npm run build - uses: android-actions/setup-android@v2 with: api-level: 33 build-tools: '33.0.0' - run: ./gradlew assembleRelease - name: Sign APK run: ./gradlew assembleRelease -Pandroid.injected.signing.store.file=keystore.jks -Pandroid.injected.signing.store.password=xxx -Pandroid.injected.signing.key.alias=xxx -Pandroid.injected.signing.key.password=xxx - # upload naar Play Store via Fastlane of Gradle Play Publisher ``` - **Automatisering publiceren:** Gebruik Fastlane of Gradle Play Publisher voor automatische upload naar Google Play. 4. **Platform-specifieke releases beheren** - **Versiebeheer:** Gebruik semantische versies en tags in GitHub om releases te markeren. - **Conditional workflows:** Gebruik `if`-condities in je workflows om bijvoorbeeld alleen iOS te bouwen bij bepaalde branches of tags: ```yaml if: github.ref == 'refs/heads/main' ``` - **Automatisering met Fastlane:** Fastlane kan ook releases beheren, automatisch versie-updates en release notes genereren. 5. **Extra tips** - **Secrets en beveiliging:** Beveilig API-keys, signing certificates, en wachtwoorden via GitHub Secrets. - **Caching:** Gebruik caching voor npm, Gradle en CocoaPods om builds sneller te maken. - **Self-hosted runners:** Overweeg een Mac mini of MacStadium voor iOS build taken. --- Door deze aanpak te implementeren, automatiseer je het volledige proces van build, test en deployment voor je Capacitor-app op zowel iOS als Android, binnen jouw GitHub Actions omgeving.

Hier is een uitgebreide handleiding voor het integreren van je Capacitor-app in een moderne CI/CD pipeline: ## CI/CD Pipeline Structuur voor Capacitor ### 1. GitHub Actions Workflow Configuratie Maak een `.github/workflows/cicd.yml` bestand: ```yaml name: Capacitor CI/CD on: push: branches: [ main, develop ] pull_request: branches: [ main ] jobs: test-and-build: runs-on: macos-latest steps: - name: Checkout code uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '16' cache: 'npm' - name: Install dependencies run: npm ci - name: Run tests run: npm test - name: Build web app run: npm run build - name: Install Capacitor run: | npm install @capacitor/core @capacitor/cli npx cap sync android-build: needs: test-and-build runs-on: macos-latest steps: - name: Checkout code uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '16' - name: Install dependencies and build run: | npm ci npm run build npx cap sync - name: Setup Java uses: actions/setup-java@v3 with: distribution: 'temurin' java-version: '17' - name: Setup Android SDK uses: android-actions/setup-android@v2 - name: Build Android APK run: | cd android ./gradlew assembleDebug - name: Upload Android artifact uses: actions/upload-artifact@v3 with: name: android-apk path: android/app/build/outputs/apk/debug/app-debug.apk ios-build: needs: test-and-build runs-on: macos-latest steps: - name: Checkout code uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '16' - name: Install dependencies and build run: | npm ci npm run build npx cap sync - name: Install CocoaPods run: | cd ios/App pod install - name: Build iOS app run: | xcodebuild -workspace ios/App/App.xcworkspace \ -scheme App \ -configuration Debug \ -destination 'generic/platform=iOS' \ -archivePath build/App.xcarchive archive ``` ### 2. Capacitor Configuratie Optimalisatie `capacitor.config.ts`: ```typescript import { CapacitorConfig } from '@capacitor/cli'; const config: CapacitorConfig = { appId: 'com.jouwbedrijf.app', appName: 'Jouw App', webDir: 'www', server: { androidScheme: 'https' }, plugins: { // Plugin configuraties } }; export default config; ``` ### 3. Package.json Scripts ```json { "scripts": { "build": "ionic build", "test": "jest", "test:ci": "jest --ci --coverage", "lint": "eslint . --ext .ts,.tsx", "cap:sync": "npx cap sync", "cap:android": "npx cap open android", "cap:ios": "npx cap open ios", "build:android": "npm run build && npx cap sync android && cd android && ./gradlew assembleRelease", "build:ios": "npm run build && npx cap sync ios && cd ios/App && xcodebuild -workspace App.xcworkspace -scheme App -configuration Release archive" } } ``` ### 4. Geavanceerde CI/CD Features #### Environment Variabelen Maak `.github/workflows/variables.yml`: ```yaml env: NODE_VERSION: '16' ANDROID_COMPILE_SDK: '33' ANDROID_BUILD_TOOLS: '33.0.0' ANDROID_SDK_TOOLS: '8512546' ``` #### Geautomatiseerde Versioning ```yaml - name: Bump version run: | npm version patch --no-git-tag-version git config user.name "GitHub Actions" git config user.email "actions@github.com" git add package.json git commit -m "CI: Bump version" git push ``` ### 5. Platform-specifieke Release Management #### Android Release Workflow: ```yaml android-release: needs: test-and-build runs-on: macos-latest if: github.ref == 'refs/heads/main' steps: # ... vorige stappen - name: Build Release APK run: | cd android ./gradlew assembleRelease - name: Sign APK uses: r0adkll/sign-android-release@v1 with: releaseDirectory: android/app/build/outputs/apk/release signingKeyBase64: ${{ secrets.ANDROID_SIGNING_KEY }} alias: ${{ secrets.ANDROID_KEY_ALIAS }} keyStorePassword: ${{ secrets.ANDROID_KEY_STORE_PASSWORD }} keyPassword: ${{ secrets.ANDROID_KEY_PASSWORD }} - name: Upload to Play Store uses: r0adkll/upload-google-play@v1 with: serviceAccountJsonPlainText: ${{ secrets.GOOGLE_PLAY_SERVICE_ACCOUNT }} packageName: com.jouwbedrijf.app releaseFiles: android/app/build/outputs/apk/release/app-release-signed.apk track: internal ``` #### iOS Release Workflow: ```yaml ios-release: needs: test-and-build runs-on: macos-latest if: github.ref == 'refs/heads/main' steps: # ... vorige stappen - name: Install Apple certificate and provisioning profile uses: apple-actions/import-codesign-certs@v1 with: p12-file-base64: ${{ secrets.IOS_P12 }} p12-password: ${{ secrets.IOS_P12_PASSWORD }} - name: Build and archive iOS app run: | xcodebuild -workspace ios/App/App.xcworkspace \ -scheme App \ -configuration Release \ -destination 'generic/platform=iOS' \ -archivePath build/App.xcarchive \ archive - name: Export IPA run: | xcodebuild -exportArchive \ -archivePath build/App.xcarchive \ -exportOptionsPlist ExportOptions.plist \ -exportPath build - name: Upload to TestFlight uses: apple-actions/upload-testflight-build@v1 with: app-path: build/App.ipa issuer-id: ${{ secrets.APPSTORE_ISSUER_ID }} api-key-id: ${{ secrets.APPSTORE_API_KEY_ID }} api-private-key: ${{ secrets.APPSTORE_API_PRIVATE_KEY }} ``` ### 6. Aanvullende Tools en Configuraties #### Code Quality: - **ESLint** voor code kwaliteit - **Prettier** voor code formatting - **Husky** voor git hooks - **Jest** voor testing #### Monitoring: - **Sentry** voor error tracking - **Fastlane** voor geautomatiseerde deployment - **App Center** voor distributie ### 7. Security Best Practices ```yaml - name: Security scan uses: actions/dependency-review-action@v3 - name: Run SAST uses: github/codeql-action/analyze@v2 ``` ### 8. Cache Optimalisatie ```yaml - name: Cache node modules uses: actions/cache@v3 with: path: ~/.npm key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} restore-keys: | ${{ runner.os }}-node- - name: Cache Android uses: actions/cache@v3 with: path: | ~/.gradle/caches ~/.gradle/wrapper key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }} ``` Deze setup zorgt voor een volledig geautomatiseerde CI/CD pipeline die build, test en deploy processen afhandelt voor zowel iOS als Android. Pas de configuraties aan naar jouw specifieke projectbehoeften en security vereisten.