Rumah __CAPGO_KEEP_0__
[CI/CD]

Membuat Otomatis Capacitor IOS dengan Codemagic

Cara Mengatur Pipa CI/CD untuk Aplikasi IOS Ionic Anda menggunakan Codemagic dan 5 menit (2024)

Kredit Artikel

Martin Donadieu

Penulis

Valeria

Pengulas

Jordan

Editor

Membuat Otomatis Capacitor IOS dengan Codemagic

Pengiriman Terus-menerus untuk iOS menggunakan Codemagic

Prasyarat

Sebelum melanjutkan dengan tutorial…

  • Anggota program pengembang iOS.
  • Kepada siapa yang ingin membaca 😆…

Perlu diingat tentang harga

Harga Aksi Codemagic

https://codemagic.io/pricing/

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

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

📣 Dalam artikel ini, kita asumsikan bahwa kita telah memiliki aplikasi yang dibuat di iTunes Connect, kita memiliki sertifikat dari ekosistem Apple, semua akan diatur oleh Codemagic!

Mari kita mulai menjelajahi…

Langkah-langkah yang perlu diikuti dalam artikel 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. Mengcopy File Fastlane
  6. Mengatur Codemagic

1. Menggunakan App Store Connect API dengan Codemagic

Mulai Februari 2021, verifikasi dua faktor atau verifikasi dua langkah diperlukan untuk semua pengguna untuk masuk ke App Store Connect. Layer keamanan tambahan untuk ID Apple Anda membantu memastikan bahwa Anda adalah satu-satunya orang yang dapat mengakses akun Anda.
Dari Bantuan Apple

Mengawali dengan match memerlukan Anda untuk membatalkan sertifikat yang ada. Tapi jangan khawatir, Anda akan memiliki yang baru secara langsung.

Persyaratan

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

  1. ID Issuer.
  2. ID Kunci.
  3. File kunci atau Konten kunci.

Menambahkan Kunci API App Store Connect

Membuat 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 yang di bawah.

1 — Masuk ke App Store Connect.

2 — Pilih Akses Pengguna App Store Connect.

Akses pengguna App Store Connect

3 — Pilih tab Kunci API.

Kunci API App Store Connect

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

Kunci API App Store Connect membuat

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

Nama API App Store Connect membuat nama

6 — Klik Generate.

Kunci API tidak dapat memiliki akses yang terbatas pada aplikasi tertentu.

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

Unduh kunci App Store Connect

Ambil semua informasi yang diperlukan di sini: <1> ID Masalah.
<2> ID Kunci.
<3> Klik "Unduh Kunci API" 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 sisi klien code.

Menambahkan kunci App Store Connect API ke Codemagic

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

  2. Klik tombol Tambah kunci . Ini adalah nama yang dapat dibaca manusia untuk kunci yang akan digunakan untuk mengacu pada kunci kemudian di pengaturan aplikasi.

  3. Tombol Tambah kunci App Store Connect API key nameMasukkan . Ini adalah nama yang dapat dibaca manusia untuk kunci yang akan digunakan untuk mengacu pada kunci kemudian di pengaturan aplikasi.

  4. Masukkan nilai Issuer ID dan Key ID nilai-nilai.

  5. Klik pada Pilih file .p8 atau drag file ke unggah kunci App Store Connect API yang telah didownload sebelumnya.

  6. Klik Simpan.

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

2. Buat sertifikat dan profil pengaturan

Sertifikat

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

Identitas tanda tangan Code

Klik pada Pengelola sertifikat > + dan pilih Distribusi Apple.

Distribusi Apple

Maka Anda dapat membuat sertifikat baru.

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

Untuk melakukan hal ini, Anda perlu pergi ke keychain, pilih keychain login, kemudian tab Sertifikat Saya Sertifikat Saya Maka Anda dapat memilih sertifikat yang ingin Anda download. (Cari berdasarkan tanggal sertifikat).

pilih

Distribusi Apple

Dan kemudian klik kanan pada sertifikat dan pilih Export.

Pilih format file Informasi Pribadi Tukar (.p12).

File tersebut akan diunduh sebagai .p12 file.

Profil Pengaturan

Buka Pengembang Apple dan pilih tim yang tepat.

Kemudian buat profil baru, dengan mengklik pada +

Buat profil baru

Pilih dan Pilih App Store Connect.

Pilih App Store Connect

Pilih aplikasi yang tepat, perhatikan karena Anda tidak bisa menggunakan wildcard, jika tidak proses signing akan gagal.

Pilih aplikasi yang tepat

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

Pilih sertifikat yang tepat

Terakhir masukkan nama profil dan klik pada Generasi.

Nama profil akan digunakan untuk mengidentifikasi profil di Codemagic.

Generasi profil

Kamu dapat mengunduh profil sebagai .mobileprovision file.

Unduh profil

Menggunakan sertifikat tanda tangan Code

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

  • Unggah sertifikat
  • Generasi sertifikat baru
  • Dapatkan dari Portal Pengembang
  1. Buka pengaturan Tim Codemagic kamu, pergi ke pengaturan file codemagic.yaml > identitas tanda tangan Code.
  2. Buka sertifikat iOS tab.
  3. Unggah 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 untuk digunakan pada aplikasi atau untuk mengambil profil dari Portal Pengembang Apple.

Jenis profil, tim, ID aplikasi, dan tanggal kedaluwarsa profil yang ditambahkan ke identitas tanda tangan Code ditampilkan. Selain itu, Codemagic akan memberitahu Anda apakah ada sertifikat tanda tangan code yang sesuai tersedia di identitas tanda tangan Code (tanda centang hijau di bidang) Sertifikat 3. Konfigurasi Codemagic

Konfigurasi rahasia Codemagic

Pernah bertanya-tanya dari mana nilai dari bidang

berasal? Nah, itu tidak lagi rahasia – itu dari rahasia proyek Anda. ENV Perlu diingat bahwa rahasia proyek Anda harus disimpan di dalam rahasia Codemagic.

4. Konfigurasi file aliran Codemagic

Buatlah sebuah file bernama codemagic.yml di root direktori proyek 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

This workflow should be triggered manually or after each GitHub tagJika Anda ingin mengaktifkan otomatisasi tag, silakan lihat Automatic build and release with GitHub actions aksi terlebih dahulu.

Lalu aliran ini akan menarik dependensi NodeJS, menginstalnya, dan membangun aplikasi JavaScript Anda.

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

Your App doesn’t need to use Ionic, only Capacitor base is mandatory, it can have old Cordova module, but Capacitor JS plugin should be preferred.

adalah wajib, aplikasi dapat memiliki modul Cordova yang lama, tetapi plugin JavaScript yang lebih baru harus dipilih.

Mulai alur kerja

Push perubahan baru ke cabang main atau development Mulai alur kerja secara manual

Mulai dengan komit

Saat ini, proses build akan tersedia di dashboard App Store Connect Anda setelah beberapa menit.

Dashboard Testflight

Pilih aplikasi yang ingin Anda bangun terlebih dahulu, kemudian klik pada

Mulai build baru

Pilih aplikasi Mulai alur kerja secara manual..

Mulai dengan komit __CAPGO_KEEP_0__.

Pilih cabang yang ingin Anda bangun.

Pilih Cabang

Dan klik pada Mulai Bangun Baru.

Pilih daftar bangun Anda.

Daftar Bangun

Dan klik pada bangun untuk melihat hasilnya.

Hasil Bangun

Apakah Anda bisa mendeploy dari mesin lokal.

Ya, Anda bisa, dan itu sangat mudah.

Anda bisa menggunakan Xcode untuk membangun dan menandatangani aplikasi Anda, seperti biasa.

Saya berterima kasih

Artikel ini berdasarkan pada artikel berikut:

Keep going from Automatic Capacitor IOS build with Codemagic

Jika Anda menggunakan Automatic Capacitor IOS build with Codemagic untuk merencanakan otomatisasi CI/CD, hubungkannya dengan Capgo CI/CD untuk alur kerja produk di Capgo CI/CD Capgo Pembangunan Asli untuk alur kerja produk di Capgo Pembangunan Asli Integrasi Capgo untuk alur kerja produk di Capgo Integrasi Pengintegrasian CI/CD untuk detail implementasi di Pengintegrasian CI/CD, dan Pengintegrasian Aksi GitHub untuk detail implementasi di Pengintegrasian Aksi GitHub

[Mengupdate aplikasi Capacitor secara langsung]

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

dukungan manusia dari Martin

Dapatkan Mulai Sekarang

Terbaru dari Blog Kami

Capgo memberikan Anda wawasan terbaik yang Anda butuhkan untuk membuat aplikasi mobile profesional yang sebenarnya.