Pindah ke konten utama
CD Automatis

Build IOS otomatis dengan Capacitor menggunakan Codemagic

Bagaimana cara mengatur pipeline CI/CD untuk aplikasi IOS Ionic Anda menggunakan Codemagic dan Codemagic dalam 5 menit (2024)

Automatic Capacitor IOS build with Codemagic

Automatic __CAPGO_KEEP_0__ Build IOS Otomatis dengan Codemagic

Prerequisites

Sebelum melanjutkan dengan tutorial…

  • Sebelum melanjutkan dengan tutorial…
  • Anggota program pengembang iOS.

Perlu diingat tentang harga

Harga Aksi Codemagic

https://codemagic.io/pricing/

Pelayanan ini adalah ‘gratis’ sampai 500 menit macOS M1 / bulan, tergantung pada mesin yang dipilih.
Kami akan menggunakan sebuah MacOS M1 mesin, Anda dapat melihat dalam tangkapan layar harga dan batasan (harga pada saat pembuatan tutorial, mereka mungkin mengalami perubahan di masa depan)

🔴 Setelah diingatkan tentang persyaratan dan harga, jika Anda suka, kita melanjutkan…

📣 Dalam postingan ini kita asumsikan bahwa kita telah memiliki aplikasi yang dibuat di iTunes connect, kita memiliki sertifikat dari ekosistem Apple, segalanya akan diatur oleh Codemagic!

Mari kita mulai menjelajahi…

Langkah-langkah untuk diikuti dalam postingan ini

  1. Menggunakan App Store Connect API dengan Codemagic
  2. Persyaratan
  3. Membuat Kunci App Store Connect API
  4. Menggunakan Kunci App Store Connect API
  5. Salin File Fastlane
  6. Konfigurasi Codemagic

1. Menggunakan App Store Connect API dengan Codemagic

Starting February 2021, two-factor authentication or two-step verification is required for all users to sign in to App Store Connect. This extra layer of security for your Apple ID helps ensure that you’re the only person who can access your account.
From Dukungan Apple

Mulai dengan match memerlukan Anda untuk membatalkan sertifikat yang sudah ada. Tapi jangan khawatir, Anda akan mendapatkan yang baru secara langsung.

Persyaratan

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

  1. ID Penerbit.
  2. ID Kunci.
  3. File Kunci atau Konten Kunci.

Membuat Kunci App Store Connect API

Untuk menghasilkan kunci, Anda harus memiliki izin Admin di App Store Connect. Jika Anda tidak memiliki izin tersebut, Anda dapat mengarahkan orang yang relevan ke artikel ini dan mengikuti instruksi berikut.

1 — Masuk ke App Store Connect.

2 — Pilih Pengguna dan Akses.

 Akses Pengguna App Store Connect

3 — Pilih tab Kunci API.

Kunci API App Store Connect

4 — Klik Generate Kunci API atau tombol (+) Tambah.

Kunci API App Store Connect membuat

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

Kunci API App Store Connect membuat nama

6 — Klik Generate.

Akses kunci API tidak dapat dibatasi pada aplikasi tertentu.

Nama kunci baru, ID kunci, tautan download, dan informasi lainnya muncul di halaman.

Unduh Kunci App Store Connect

Temukan informasi yang diperlukan tiga di bawah ini: <1> ID Masalah.
<2> ID Kunci.
<3> Klik &quot;Unduh Kunci API&quot; untuk mengunduh kunci pribadi API Anda. Tautan download hanya muncul jika kunci pribadi belum diunduh. Apple tidak menyimpan salinan kunci pribadi. Jadi, Anda hanya dapat mengunduhnya sekali.

🔴 Simpan kunci pribadi Anda di tempat yang aman. Anda tidak boleh berbagi kunci, menyimpan kunci di code repository, atau termasuk kunci di code sisi klien.

Menambahkan Kunci API App Store Connect ke Codemagic

  1. Buka pengaturan Tim Codemagic Anda. Pilih Integrasi Tim Buka tim Pilih code identitas tanda tangan Pilih code identitas tanda tangan Dan unggah sertifikat. Unggah sertifikat.

  2. Klik tombol. Tambah kunci. Tombol.

  3. Masukkan . App Store Connect API key name Ini adalah nama yang dapat dibaca manusia untuk kunci ini yang akan digunakan untuk mengacu ke kunci ini kemudian di pengaturan aplikasi.

  4. Masukkan . Issuer ID dan Key ID Nilai.

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

  6. Klik Simpan.

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

2. Buat sertifikat dan profil pengaturan

Sertifikat

Buka XCode dan pergi ke Pengaturan &gt; Akun &gt; ID Apple &gt; Tim dan pilih tim Anda.

Code identitas tanda tangan

Klik pada Kelola sertifikat &gt; + dan pilih Distribusi Apple.

Distribusi Apple

Lalu Anda dapat membuat sertifikat baru.

Lalu Anda perlu pergi ke keychain untuk mendownload sertifikat sebagai .p12 file.

Untuk melakukan itu, Anda perlu pergi ke keychain dan beralih ke login keychain kemudian tab Sertifikat Saya.

Sertifikat Saya

Setelah itu Anda dapat memilih sertifikat yang ingin Anda download. (Cari berdasarkan tanggal sertifikat)

Kemudian klik kanan pada sertifikat dan pilih Export.

Pilih format file Pengaturan Informasi Pribadi (.p12).

Format ini akan mengunduh sertifikat sebagai .p12 file.

Profil Pengaturan

Terbuka Pengembang Apple dan pilih tim yang tepat.

Kemudian buat profil baru, dengan mengklik pada +

Buat Profil Baru

Dan pilih Pengaturan App Store.

Pilih Pengaturan App Store

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

Pilih Aplikasi yang Tepat

Pilih sertifikat yang tepat yang telah Anda buat sebelumnya (caril tanggal kadaluarsa, harus sama hari dan bulan dengan hari ini) dan klik pada Teruskan.

Pilih sertifikat yang tepat

Masukkan akhirnya nama profil dan klik pada Generasi.

Nama profil akan digunakan untuk mengidentifikasi profil di Codemagic.

Generasi profil

Anda dapat mengunduh profil sebagai .mobileprovision file.

Mengunduh profil

Menambahkan sertifikat tanda tangan Code

Codemagic memungkinkan Anda untuk mengunggah sertifikat tanda tangan code sebagai arsip PKCS#12 yang berisi baik sertifikat dan kunci pribadi yang diperlukan untuk menggunakan sertifikat tersebut. Ketika mengunggah, Codemagic akan meminta Anda untuk menyediakan kata sandi sertifikat (jika sertifikat dilindungi kata sandi) bersama dengan kode unik Nama Referensi, yang dapat digunakan kemudian dalam codemagic.yaml konfigurasi untuk mengambil file spesifik.

  • Upload Sertifikat
  • Generate Sertifikat Baru
  • Dapatkan dari Portal Pengembang
  1. Buka pengaturan Tim Codemagic Anda, pergi ke pengaturan codemagic.yaml &gt; Code identitas tanda tangan.
  2. Buka Sertifikat iOS tab.
  3. Upload file sertifikat dengan mengklik pada Pilih file .p12 atau .pem atau dengan menariknya ke dalam frame yang ditunjuk.
  4. Masukkan Sandi sertifikat dan pilih Nama referensi.
  5. Klik Tambahkan sertifikat

Menambahkan profil pengembangan

Codemagic memungkinkan Anda untuk mengunggah profil pengembangan ke aplikasi atau mengambil profil dari Portal Pengembang Apple.

The profile’s type, team, bundle id, and expiration date are displayed for each profile added to Code signing identities. Furthermore, Codemagic will let you know whether a matching code signing certificate is available in Code signing identities (a green checkmark in the Certificate 3. Mengatur Codemagic

Konfigurasi rahasia Codemagic

Konfigurasi Rahasia Codemagic

4. Konfigurasi file aliran Codemagic ENV Buat file bernama __CAPGO_KEEP_1__ di root proyek Anda dan tambahkan kode berikut.

Konfigurasi file aliran Codemagic ke-4

Buat file bernama codemagic.yml di root proyek Anda dan tambahkan yang 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

Ini aliran kerja harus diaktifkan secara manual atau setelah setiap GitHub tagJika Anda memerlukan otomatisasi tag, silakan referensi ke Automatic build dan rilis dengan aksi GitHub pertama.

Kemudian alur kerja ini akan menarik dependensi NodeJS Anda, menginstalnya dan membangun aplikasi JavaScript Anda.

Setiap kali Anda mengirimkan tag baru, rilis akan dibangun di TestFlight.

Aplikasi Anda tidak perlu menggunakan Ionic, hanya dasar Capacitor yang wajib, dapat memiliki modul Cordova lama, tetapi Capacitor plugin JavaScript lebih disarankan.

5. Aktifkan alur kerja

Aktifkan alur kerja

Push komit baru ke cabang main atau development mengaktifkan alur kerja.

untuk mengaktifkan alur kerja.

Setelah beberapa menit, konstruksi harus tersedia di dashboard App Store Connect Anda.

Dashboard Testflight

Mulai secara manual

Kamu bisa memulai alur kerja secara manual.

Pilih aplikasi yang ingin kamu bangun terlebih dahulu, kemudian klik pada Mulai Build Baru.

Pilih Aplikasi

Pilih cabang yang ingin Anda bangun.

Pilih cabang

Pilih cabang Mulai Build Baru.

Dan klik pada kemudian pergi ke daftar konstruksi.

Daftar build

Dan klik pada build untuk melihat hasilnya.

Hasil build

Kamu bisa mengdeploy dari mesin lokal.

Ya, kamu bisa, dan itu sangat mudah.

You can use Xcode to build and sign your app, as always.

Thanks

Blog ini didasarkan pada artikel berikut:

Keep going from Automatic Capacitor IOS build with Codemagic

Jika Anda menggunakan Automatic Capacitor Build IOS Otomatis dengan Codemagic untuk merencanakan otomatisasi CI/CD, hubungkannya dengan Capgo CI/CD untuk alur kerja produk di Capgo CI/CD, Capgo Build Nativ untuk alur kerja produk di Capgo Build Nativ, Capgo Integrasi untuk alur kerja produk di Capgo Integrasi, Integrasi CI/CD untuk detail implementasi di Integrasi CI/CD, dan GitHub Aksi Integrasi untuk detail implementasi di GitHub Integrasi Aksi.

Update langsung untuk aplikasi Capacitor

Ketika ada bug layer web yang hidup, kirimkan perbaikan melalui Capgo daripada menunggu hari-hari untuk persetujuan toko aplikasi. Pengguna mendapatkan update di latar belakang sementara perubahan native tetap dalam jalur review normal.

Terbaru dari Blog Kami

Capgo memberikan Anda wawasan terbaik untuk membuat aplikasi seluler profesional.