Build iOS Capacitor otomatis dengan Codemagic

Continuous Delivery untuk iOS menggunakan Codemagic

Prerequisites

Sebelum lanjut ke tutorial ini…

• Keanggotaan iOS Developer Program.
• Ingin baca-baca dulu 😆…

Info penting soal harga

https://codemagic.io/pricing/

Layanan ini ‘gratis’ hingga 500 menit macOS M1 / bulan, tergantung mesin yang dipilih.
Kita akan menggunakan macOS M1 mesin, Anda bisa melihat harga dan batasnya di screenshot (harga saat tutorial dibuat, bisa berubah di masa mendatang)

🔴 Setelah tahu persyaratan dan harganya, kalau Anda mau, kita lanjut…

📣 Pada artikel ini, kami mengasumsikan aplikasi sudah dibuat di iTunes Connect, sertifikat ekosistem Apple sudah kita miliki, dan semuanya akan disiapkan oleh Codemagic!

Mari kita mulai 🤿

Langkah-langkah dalam postingan ini

1. Menggunakan API App Store Connect dengan Codemagic
2. Persyaratan
3. Membuat App Store Connect API Key
4. Menggunakan App Store Connect API Key
5. Salin file Fastlane
6. Konfigurasikan Codemagic

1. Menggunakan API App Store Connect dengan Codemagic

Mulai Februari 2021, autentikasi dua faktor atau verifikasi dua langkah wajib bagi semua pengguna untuk login ke App Store Connect. Lapisan keamanan tambahan untuk Apple ID ini memastikan hanya Anda yang dapat mengakses akun tersebut.
Dari Dukungan Apple

Memulai dengan match mengharuskan Anda mencabut sertifikat yang sudah ada. Tapi jangan khawatir, Anda akan langsung mendapatkan yang baru.

Persyaratan

Untuk bisa menggunakan App Store Connect API, Codemagic memerlukan tiga hal.

1. ID Issuer.
2. ID Kunci.
3. File Key atau isi Key.

Membuat App Store Connect API Key

Untuk membuat key, Anda harus memiliki izin Admin di App Store Connect. Jika tidak punya izin tersebut, Anda bisa mengarahkan orang yang relevan ke artikel ini dan mengikuti instruksi berikut.

1 — Login ke App Store Connect.

2 — Pilih Pengguna dan Akses.

3 — Pilih tab API Keys.

4 — Klik Generate API Key atau tombol Add (+).

5 — Masukkan nama untuk kunci dan pilih tingkat akses. Kami merekomendasikan memilih App Manager hak akses, baca selengkapnya tentang izin peran Apple Developer Program di sini

6 — Klik Generate.

Akses kunci API tidak dapat dibatasi ke aplikasi tertentu.

Nama kunci baru, ID kunci, link download, dan info lainnya akan muncul di halaman.

Ambil ketiga informasi penting di sini: <1> Issue ID.
<2> Key ID.
<3> Klik “Download API Key” untuk download private key API Anda. Link download hanya muncul jika private key belum pernah di-download. Apple tidak menyimpan salinan private key tersebut. Jadi, Anda hanya bisa men-download-nya satu kali.

🔴 Simpan private key Anda di tempat yang aman. Jangan pernah membagikan kunci Anda, menyimpan kunci di repositori code, atau menyertakan kunci dalam code client-side.

Menambahkan kunci API App Store Connect ke Codemagic

1. Buka pengaturan Team Codemagic Anda, Pilih code signing identities Lalu upload sertifikatnya

2. Klik Tambah key tombol.

3. Masukkan App Store Connect API key name. Ini adalah nama yang mudah dibaca untuk key yang nanti akan dipakai untuk merujuk key tersebut di pengaturan aplikasi.

4. Masukkan Issuer ID dan Key ID nilai.

5. Klik pada Pilih file .p8 atau seret file untuk mengunggah kunci App Store Connect API yang diunduh sebelumnya.

6. Klik Simpan.

Sekarang kita bisa mengelola Codemagic dengan kunci App Store Connect API, bagus!

2. Buat sertifikat dan provisioning profile

Sertifikat

Buka XCode dan pergi ke Pengaturan > Akun > Apple ID > Tim dan pilih tim Anda.

Klik pada Kelola sertifikat > + dan pilih Distribusi Apple.

Lalu Anda bisa membuat sertifikat baru.

Lalu, buka Keychain untuk mengunduh sertifikat sebagai .p12 Anda.

Untuk melakukannya, Anda perlu masuk ke keychain dan beralih ke login Keychain, lalu tab Sertifikat Saya.

Lalu, pilih sertifikat yang ingin Anda download. (Perhatikan tanggal sertifikat)

Lalu klik kanan pada sertifikat dan pilih Ekspor.

Pilih format file Pertukaran Informasi Pribadi (.p12).

Ini akan mengunduh sertifikat sebagai .p12 Anda.

Profil provisioning

Buka Apple Developer dan pilih tim yang sesuai.

Lalu buat profil baru dengan klik +

Dan pilih App Store Connect.

Kemudian Anda perlu memilih aplikasi yang tepat, berhati-hatilah karena Anda tidak bisa menggunakan wildcard atau proses signing akan gagal.

Pilih sertifikat yang benar yang Anda buat sebelumnya (perhatikan tanggal kedaluwarsa, harus sama hari dan bulan dengan hari ini) lalu klik Lanjutkan.

Terakhir, masukkan nama profil dan klik Generate.

Nama ini akan digunakan untuk mengidentifikasi profil di Codemagic.

Anda dapat download profil sebagai .mobileprovision Anda.

Menambahkan sertifikat signing Code

Codemagic memungkinkan Anda mengunggah code sertifikat penandatanganan sebagai arsip PKCS#12 yang berisi sertifikat dan private key yang diperlukan untuk menggunakannya. Saat mengunggah, Codemagic akan meminta Anda menyediakan kata sandi sertifikat (jika sertifikat dilindungi kata sandi) beserta Nama referensi unik, yang kemudian dapat digunakan dalam codemagic.yaml konfigurasi untuk mengambil file tertentu.

• Unggah sertifikat
• Buat sertifikat baru
• Ambil dari Developer Portal

1. Buka pengaturan Tim Codemagic Anda, lalu masuk ke pengaturan codemagic.yaml > identitas signing Code.
2. Buka Sertifikat iOS tab.
3. Upload file sertifikat dengan mengklik Pilih file .p12 atau .pem atau seret ke dalam bingkai yang ditunjukkan.
4. Masukkan Kata sandi sertifikat dan pilih Nama referensi unik.
5. Klik Tambahkan sertifikat

Menambahkan provisioning profile

Codemagic memungkinkan Anda mengunggah provisioning profile untuk aplikasi atau mengambil profile dari Apple Developer Portal.

Tipe, tim, bundle id, dan tanggal kedaluwarsa profile ditampilkan untuk setiap profile yang ditambahkan ke identitas penandatanganan Code. Selain itu, Codemagic akan memberi tahu Anda apakah sertifikat penandatanganan code yang cocok tersedia di identitas penandatanganan Code (tanda centang hijau di Sertifikat field) atau tidak.

3. Setup Codemagic

Konfigurasi secrets Codemagic

Pernah bertanya-tanya dari mana nilai ENV berasal? Nah, ini bukan rahasia lagi – nilainya diambil dari secret proyek Anda. 🤦

4. Konfigurasi file workflow Codemagic

Buat file bernama codemagic.yml di root proyek Anda dan tambahkan berikut.

workflows:
  ionic-capacitor-ios-workflow:
    name: Capacitor iOS Workflow
    max_build_duration: 120
    instance_type: mac_mini_m1
    integrations:
      app_store_connect: CodeMagic
    environment:
      ios_signing:
        distribution_type: app_store
        bundle_identifier: YOUR_BUNDLE_IDENTIFIER
      vars:
        XCODE_WORKSPACE: ios/App/App.xcworkspace
        XCODE_SCHEME: App
        APP_STORE_APP_ID: YOUR_APP_STORE_APP_ID
      node: v20.14.0
      xcode: 15.4
      cocoapods: default
    triggering:
      events:
        - tag
      tag_patterns:
        - pattern: '*'
          include: true
    scripts:
      - name: Install dependencies
        script: |
          npm install
      - name: Cocoapods installation
        script: |
          cd ios/App && pod install
      - name: Update dependencies and copy web assets to native project
        script: |
          npm run build
          npx cap sync ios
      - name: Set up code signing settings on Xcode project
        script: |
          xcode-project use-profiles
      - name: Increment build number
        script: |
          cd $CM_BUILD_DIR/ios/App
          LATEST_BUILD_NUMBER=$(app-store-connect get-latest-app-store-build-number "$APP_ID")
          agvtool new-version -all $(($LATEST_BUILD_NUMBER + 1))
      - name: Build ipa for distribution
        script: |
          xcode-project build-ipa \
            --workspace "$XCODE_WORKSPACE" \
            --scheme "$XCODE_SCHEME"
    artifacts:
      - build/ios/ipa/*.ipa
      - /tmp/xcodebuild_logs/*.log
      - $HOME/Library/Developer/Xcode/DerivedData/**/Build/**/*.app
      - $HOME/Library/Developer/Xcode/DerivedData/**/Build/**/*.dSYM
    publishing:
      email:
        recipients:
          - YOUR_EMAIL
        notify:
          success: true # To not receive a notification when a build succeeds
          failure: false # To not receive a notification when a build fails
      app_store_connect:
        auth: integration
        # Configuration related to TestFlight (optional)
        # Note: This action is performed during post-processing.
        submit_to_testflight: true
        # Configuration related to App Store (optional)
        # Note: This action is performed during post-processing.
        submit_to_app_store: false

Workflow ini harus dipicu secara manual atau setelah setiap GitHub tag, jika Anda perlu mengotomatiskan tag, silakan lihat Build dan release otomatis dengan GitHub actions pertama.

Kemudian workflow ini akan mengambil deps NodeJS Anda, menginstalnya, dan mem-build aplikasi JavaScript Anda.

Setiap kali Anda mengirim tag baru, release akan dibangun di TestFlight.

Aplikasi Anda tidak perlu menggunakan Ionic, hanya Capacitor base yang wajib, bisa memiliki modul Cordova lama, tetapi Capacitor JS plugin sebaiknya digunakan.

5. Jalankan workflow

Trigger workflow

Push commit baru ke branch main atau development untuk trigger workflow.

Setelah beberapa menit, build seharusnya sudah tersedia di dashboard App Store Connect Anda.

Mulai manual

Anda dapat memulai workflow secara manual.

Pertama pilih aplikasi yang ingin di-build, lalu klik Mulai build baru.

Lalu pilih branch yang ingin di-build.

Dan klik pada Mulai build baru.

Lalu buka daftar build

Dan klik build untuk melihat hasilnya.

Bisa deploy dari mesin lokal

Ya, bisa, dan sangat mudah.

Anda tetap bisa menggunakan Xcode untuk build dan sign aplikasi seperti biasa.

Terima kasih

Blog ini berdasarkan artikel-artikel berikut:

• Continuous delivery untuk iOS menggunakan Codemagic dan GitHub actions
• Dokumentasi Codemagic
• Pesan GitHub ini dari @mrogunlana

Lanjutkan dari Automatic Capacitor IOS build dengan Codemagic

Jika Anda menggunakan Build iOS Capacitor otomatis dengan Codemagic untuk merencanakan otomatisasi CI/CD, hubungkan dengan CI/CD Capgo untuk workflow produk di Capgo CI/CD, Capgo Native Build untuk workflow produk di Capgo Native Builds, Integrasi Capgo untuk alur kerja produk di Integrasi Capgo, Integrasi CI/CD untuk detail implementasi di Integrasi CI/CD, dan Integrasi GitHub Actions untuk detail implementasi di Integrasi GitHub Actions.