Lompat ke Konten Utama
Pengujian Kontinu

Pembangunan Otomatis Capacitor IOS dengan Codemagic

Cara mengatur pipeline pengujian kontinu untuk aplikasi IOS Ionic Anda menggunakan Codemagic dan Codemagic dalam 5 menit (2024)

Martin Donadieu

Martin Donadieu

Spesialis Konten

Pembangunan Otomatis Capacitor IOS dengan Codemagic

Pengiriman Terus Menerus untuk iOS menggunakan Codemagic

Prasyarat

Sebelum melanjutkan dengan tutorial…

  • Anggota program pengembang iOS.
  • Ingin membaca 😆…

Hal yang penting tentang harga

Harga Codemagic Action

https://codemagic.io/pricing/

Jasa ini adalah ‘gratis’ hingga 500 menit macOS M1 per bulan, tergantung pada mesin yang dipilih.
Kami akan menggunakan sebuah mesin macOS M1 mesin ini, 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, semua akan diatur oleh Codemagic!

Mari kita masuk ke dalamnya 🤿

Langkah-langkah yang harus 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

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 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 ID Penerbit.

  1. ID Kunci.
  2. File Kunci atau Konten Kunci.
  3. Membuat Kunci App Store Connect __CAPGO_KEEP_0__

Creating an App Store Connect API Key

1 — Masuk ke

App Store Connect untuk menggunakan App Store Connect __CAPGO_KEEP_0__.

2 — Pilih Pengguna dan Akses.

Akses Pengguna App Store Connect

3 — Pilih tab API Kunci.

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 Program Pengembang Apple di sini Kunci App Store Connect __CAPGO_KEEP_0__ membuat nama

App Store Connect API keys create name

7 — Masukkan nama untuk kunci dan pilih tingkat akses. Kami merekomendasikan memilih

Kunci API tidak dapat dibatasi aksesnya hanya untuk aplikasi tertentu.

Informasi nama kunci, ID kunci, tautan download, dan lain-lain muncul di halaman.

Unduh Kunci App Store Connect

Ambil tiga informasi yang diperlukan di sini: 1. ID Masalah.
2. ID Kunci.
<3> Click “Download API Key” to download your API private key. The download link appears only if the private key has not yet been downloaded. Apple does not keep a copy of the private key. So, you can download it only once.

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

Menambahkan Kunci App Store Connect API 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 . Ini adalah nama yang dapat dibaca manusia untuk kunci yang akan digunakan untuk mengacu ke kunci kemudian dalam pengaturan aplikasi.

  3. Masukkan App Store Connect API key namedan

  4. nilai-nilai. Issuer ID Klik pada Key ID untuk menambahkan

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

  6. Klik Simpan.

Sekarang kita dapat mengelola Codemagic dengan menggunakan 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.

Code identitas tanda tangan

Klik pada Kelola sertifikat > + 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 hal ini, Anda perlu pergi ke keychain dan beralih ke login __CAPGO_KEEP_0__ dan kemudian tab Sertifikat Saya.

Sertifikat Saya

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

Dan kemudian klik kanan pada sertifikat dan pilih Export.

Pilih format file Informasi Pribadi Tukar (.p12).

Itu akan mengunduh sertifikat sebagai .p12 file.

Profil Pengaturan

Buka Apple Developer dan pilih tim yang tepat.

Kemudian buat profil baru, dengan mengklik pada +

Buat Profil Baru

Dan pilih App Store Connect.

Pilih App Store Connect

Kemudian Anda harus memilih aplikasi yang tepat, berhati-hatilah karena Anda tidak dapat menggunakan wildcard lainnya, 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 Lanjutkan.

Pilih sertifikat yang tepat

Masukkan akhirnya nama profil dan klik pada Generate.

Nama tersebut akan digunakan untuk mengidentifikasi profil di Codemagic.

Buat profil

Anda dapat mengunduh profil sebagai .mobileprovision file.

Unduh 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 nama referensi unik , yang kemudian dapat digunakan dalamkonfigurasi untuk mengambil file yang spesifik. codemagic.yaml Generate

  • Muat sertifikat
  • Buat sertifikat baru
  • Ambil dari Portal Pengembang
  1. Buka pengaturan Tim Codemagic Anda, kemudian pilih pengaturan codemagic.yaml > Code identitas tanda tangan.
  2. Buka sertifikat iOS tab.
  3. Muat file sertifikat dengan mengklik pada Pilih file .p12 atau .pem atau dengan menariknya ke dalam frame yang ditunjuk.
  4. Masukkan Kata sandi sertifikat dan pilih nama referensi Nama referensi.
  5. Klik Tambahkan sertifikat

Mengambahkan profil pengaturan

Codemagic memungkinkan Anda untuk mengunggah profil pengaturan untuk digunakan pada aplikasi atau untuk mengambil profil dari Portal Pengembang Apple.

Tipe 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

Setup Codemagic

Konfigurasi Rahasia Codemagic

Pernahkah Anda bertanya-tanya dari mana nilai-nilai ENV berasal? Nah, rahasia itu tidak lagi rahasia – itu berasal dari rahasia proyek Anda. 🤦

4. Konfigurasi File Alur Codemagic

Buat sebuah file bernama codemagic.yml di root 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 tag, jika Anda ingin otomatisasi tag, silakan lihat Automatic build and release with GitHub actions aksi pertama.

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

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

Aplikasi Anda tidak perlu menggunakan Ionic, hanya dasar Capacitor yang wajib, tetapi Capacitor plugin JavaScript harus dipilih.

5. Aktifkan alur kerja

Aktifkan alur kerja

Push perubahan kode ke cabang main atau development untuk mengaktifkan alur kerja.

Dimulai dengan commit

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

Dashboard Testflight

Mulai secara manual

Anda dapat mengaktifkan alur kerja secara manual.

Pilih terlebih dahulu aplikasi yang ingin Anda buat, kemudian klik pada Mulai build baru.

Pilih aplikasi

Lalu pilih cabang yang ingin Anda build.

Pilih cabang

Dan klik pada Mulai build baru.

Lalu pergi ke daftar build

Daftar build

Dan klik pada build untuk melihat hasilnya.

Hasil build

Dapat mengdeploy dari mesin lokal

Ya, kamu bisa, dan itu sangat mudah.

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

Terima kasih

Blog ini didasarkan pada artikel berikut:

Pembaruan langsung untuk aplikasi Capacitor

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

Mulai Sekarang

Terbaru dari Blog Kami

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