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…

📣 Dalam postingan ini, kita asumsikan aplikasi sudah dibuat di iTunes connect, sertifikat ekosistem Apple sudah siap, dan semuanya akan diatur 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 key dan pilih level akses. Kami menyarankan untuk memilih App Manager hak akses, baca selengkapnya tentang role permissions 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 upload kunci API App Store Connect yang sudah diunduh sebelumnya.

6. Klik Simpan.

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

2. Buat sertifikat dan provisioning profile

Sertifikat

Buka Xcode dan buka Pengaturan > Accounts > Apple ID > Tim dan pilih tim Anda.

Klik pada Kelola sertifikat > + dan pilih Distribusi Apple.

Lalu Anda bisa membuat sertifikat baru.

Kemudian Anda perlu membuka keychain untuk mengunduh sertifikat sebagai a .p12 Anda.

Untuk melakukannya, Anda perlu membuka keychain dan beralih ke login keychain dan pilih tab Sertifikat Saya.

Setelah itu, pilih sertifikat yang ingin diunduh. (Cek berdasarkan tanggal sertifikat)

Lalu klik kanan pada sertifikat dan pilih Export.

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 tepat yang sudah Anda buat sebelumnya (perhatikan tanggal kedaluwarsanya, harus sesuai dengan tanggal dan bulan hari ini) lalu klik pada Lanjutkan.

Terakhir, masukkan nama profil lalu klik pada Generate.

Nama ini akan digunakan untuk mengidentifikasi profil di Codemagic.

Anda dapat mengunduh profil sebagai .mobileprovision Anda.

Menambahkan sertifikat signing Code

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

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

1. Buka pengaturan Tim Codemagic Anda, lalu ke pengaturan codemagic.yaml > identitas signing Code.
2. Buka Sertifikat iOS tab.
3. Upload file sertifikat dengan klik Pilih file .p12 atau .pem atau drag ke area yang tersedia.
4. Masukkan Password sertifikat dan pilih Nama referensi.
5. Klik Tambah sertifikat

Menambahkan provisioning profile

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

Tipe profile, team, bundle id, dan tanggal kedaluwarsa akan ditampilkan untuk setiap profile yang ditambahkan ke Code signing identities. Selain itu, Codemagic akan memberi tahu apakah code signing certificate yang cocok tersedia di Code signing identities (ditandai centang hijau di Sertifikat kolom tersebut) atau tidak.

3. Setup Codemagic

Konfigurasi Codemagic secrets

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 project Anda dan tambahkan kode 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, rilis akan dibangun di TestFlight.

App Anda tidak wajib menggunakan Ionic, hanya basis Capacitor yang wajib, bisa menggunakan modul Cordova lama, namun Capacitor JS plugin lebih disarankan.

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 menjalankan workflow secara manual.

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

Kemudian pilih branch yang ingin di-build.

Dan klik pada Mulai build baru.

Lalu buka daftar build Anda

Dan klik build tersebut 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 dengan Automatic Capacitor IOS build menggunakan 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.