React Native, mobil uygulamalar oluşturmak için en popüler JavaScript tabanlı çerçevelerden biridir. Hem iOS hem de Android üzerinde çalışan platformlar arası uygulamaların oluşturulmasını sağlayarak toplam uygulama geliştirme için gereken genel karmaşıklığı ve zamanı azaltır.

Ancak, bir React Native uygulaması oluşturmak ve dağıtmak için geliştiricinin önce sertifikaları imzalaması, sürümü derlemesi ve güncellemesi ve ardından derlemeyi iOS için App Store ve Android için Google Play için uygun platforma göndermesi gerekir.

Bu makalede, bu sıkıcı görevleri otomatikleştirmek için GitHub Eylemlerinden ve fastlane'den nasıl yararlanılacağını göstereceğiz.

Bu gönderi, React Native ile oluşturulmuş iOS ve Android uygulamalarının oluşturulmasını, test edilmesini ve dağıtımını otomatikleştirmenize yardımcı olacaktır.

İçindekiler

hızlı şerit nedir?

fastlane, iOS ve Android geliştiricilerinin zaman alan işlemleri otomatikleştirmesine yardımcı olan bir çözümdür. Bu platform, bir geliştiricinin günlük işlerinin hızından veya çevikliğinden ödün vermeden sürekli dağıtım yoluyla yüksek kaliteli uygulamalar sunmaya yardımcı olur.

fastlane, Ruby komut satırı yardımcı programına ek olarak yerel Gradle (Android) ve Xcode (iOS) eklentileri sunar. App Store ve Google Play'e kaydolma, mağazalara uygulama yayınlama, beta yazılımı dağıtma, Firebase Crashlytics ve daha fazlası gibi görevleri yönetir. Halihazırda sahip olduğunuz herhangi bir CI sistemi fastlane ile de çalışacaktır.

hızlı şeridi ayarlama

Başlamadan önce yerel olarak yüklenmesi gereken birkaç sistem gereksinimi vardır.

fastlane resmi olarak macOS'ta çalışacak şekilde desteklenmektedir; Linux ve Windows, fastlane tarafından yalnızca kısmen desteklenir, çünkü Xcode gibi araçlar yalnızca macOS'ta çalışır.

Fastlane, macOS için Homebrew ile kurulabilir:

 demlemek fastlane yükleyin

Veya macOS, Linux ve Windows için RubyGems ile:

 sudo gem install fastlane # Ruby'nin zaten kurulu olduğundan emin olun

Bir React Native projesine fastlane eklemenin iki yolu vardır:

  1. Android ve iOS için fastlane init komutunu ilgili klasörlerinde ayrı ayrı kullanın; fastlane, platformu otomatik olarak algılayacak, gerekli bilgileri isteyecek ve platformu yapılandıracaktır.
  2. React Native projesinin kökünde bir fastlane klasörü oluşturun ve buna bir Fastfile dosyası ekleyin. Ardından, iOS ve Android için manuel olarak yapılandırın

Bu makalede ikinci yaklaşımı kullanacağız.

Android için fastlane'i yapılandırma

Android için fastlane'i yapılandırarak başlayalım.

Daha önce belirtildiği gibi, projenin kökünde bir fastlane klasörü oluşturacağız ve klasöre bir Fastfile dosyası ekleyeceğiz. Aynı Fastfile dosyasını iOS ve Android için kullanacağız.

Başka bir şey yapmadan önce Git şubesini kontrol edip temizleyelim. Biri beta testi, diğeri de son sürüm için olmak üzere Android dağıtımı için iki şerit oluşturacağız.

İlk olarak, şöyle bir Android platformu tanımlayacağız:

 platform: android yapmak 
    desc "Android beta sürümü"
    şerit: beta yapmak 
        increment_version_code('app_project_dir': './andriod/app')
        gradle(görev: 'temiz', proje_dizini: './andriod')
        gradle(görev: 'paket', paket_tipi: 'Yayın', proje_dir: './andriod')
        tedarik(iz: 'beta', abb: './andriod/app/build/outputs/apk/app-beta-release.apk')
    son
    desc "Android üretimi için sürüm"
    şerit: serbest bırakma
        increment_version_code(app_project_dir: './android/app')
        increment_version_name(app_project_dir: './android/app', bump_type: 'patch')
        gradle(görev: 'temiz', proje_dizini: './android/')
        gradle(görev: 'paket', paket_tipi: 'Yayın', proje_dir: './andriod', özellikler: {
            "android.injected.signing.store.file" => ENV['ANDROID_KEYSTORE_FILE'],
            "android.injected.signing.store.password" => ENV['ANDROID_KEYSTORE_PASSWORD'],
            "android.injected.signing.key.alias" => ENV['ANDROID_KEYSTORE_ALIAS'],
            "android.injected.signing.key.password" => ENV['ANDROID_KEYSTORE_PASSWORD']
        })
        arz(iz: 'üretim', aab: './android/app/build/outputs/bundle/release/app_release.aab', release_status: 'taslak')
    son
son

Ardından, beta sürümü için bir dağıtım şeridi oluşturacağız ve gerçekleştirilecek bir dizi eylem ekleyeceğiz.

Bir sonraki adımda yapıyı temizlemek için Gradle'ı kullanacağız. Ardından, bir APK veya AAB oluşturmak için Gradle paketini çalıştıracağız.

Son bir adım olarak, CI yardımcı programı kaynağını kullanarak meta verileri, ekran görüntüsünü, ikili dosyaları ve uygulama paketini Google Play'e göndereceğiz.

Android uygulama sürümü dağıtım hattı, daha sonra beta hattıyla aynı şekilde oluşturulacak; bu noktada, sürüm için Anahtar Deposu ve Google kimlik bilgilerini ekleyeceğiz.

Not, fastlane'in tedarik aracı yalnızca Android uygulamanızı en az bir kez Google Play'de başarıyla yayınladıysanız çalışır.

iOS için fastlane'i yapılandırma

Şimdi, iOS için fastlane'i yapılandıralım. Başlamadan önce, fastlane ile iOS uygulama dağıtımı için Xcode ve macOS önkoşullardır.

Biri TestFlight ve diğeri App Store sürümü için olmak üzere iOS dağıtımı için iki şerit oluşturacağız.

 platform: ios yapmak 
    private_lane :update_version yap
        app_store_version = get_app_store_version_number(bundle_id: 'rnFastlane')
        plist_version = get_version_number_from_plist(xcodeproj: './ios/rnFastlane.xcodeproj')
        if Gem::Version.new(plist_version.to_f) == Gem::Version.new(app_store_version.to_f)
            increment_version_number_in_plist(xcodeproj: './ios/rnFastlane.xcodeproj', bump_type: 'küçük')
        başka
            increment_version_number_in_plist(xcodeproj: './ios/rnFastlane.xcodeproj', bump_type: 'yama')
        son
    son
    private_lane :testflight_build yapmak 
        increment_build_number_in_plist(xcodeproj: './ios/rnFastlane.xcodeproj', hedef: 'rnFastlane')
        spor salonu(şema: 'rnFastlane', çalışma alanı: './ios/rnFastlane.xcworkspace')
    son
    private_lane :distribution_build yapmak
        increment_build_number_in_plist(xcodeproj: './ios/rnFastlane.xcodeproj', hedef: 'rnFastlane')
        create_keychain(
            isim: ENV['KEYCHAIN_NAME'],
            şifre: ENV['KEYCHAIN_PASSWORD'],
            default_keychain: doğru,
            kilidini aç: doğru,
            zaman aşımı: 3600,
            add_to_search_list: doğru)

        kibrit(
            tür: 'uygulama mağazası',
            keychain_name: ENV["KEYCHAIN_NAME"],
            keychain_password: ENV["KEYCHAIN_PASSWORD"],
            salt okunur: doğru,
            sığ_klon: doğru,
            ayrıntılı: yanlış)    
        Jimnastik(
            şema: 'rnFastlane', 
            çalışma alanı: './ios/rnFastlane.xcworkspace',
            export_method: 'geçici',
            çıktı_dizini: "./build", 
            yapılandırma: 'Yayın',
            çıktı_adı: "rnFastlane.ipa"
            temiz: doğru
            export_options: {
                yöntem: 'uygulama mağazası',
                provizyon Profilleri: {
                    'rnFastlane' => ENV["sigh_#{options[:app_identifier]}_app-store_profile-name"],
                }
            })
    son
    desc "iOS beta sürümü"
    şerit: beta yapmak
        testflight_build
        upload_to_testflight(kullanıcı adı: ENV['APP_STORE_EMAIL'] app_identifier: 'rnFastlane')
        commit_version_bump(mesaj: 'çarpma oluşturma')
        push_to_git_remote
    son
    desc "iOS üretimi için sürüm"
    şerit: serbest bırak
        dağıtım_build
        teslim etmek
        commit_version_bump(mesaj: 'çarpma oluşturma')
        push_to_git_remote
    son
son

Sürüm numarasını artırın

Bir sonraki adım, güncelleme sürümü için özel bir şerit eklemektir.

kullanacağız
App Store ve plist dosyasından sürümü almak için get_app_store_version_number ve get_version_number_from_plist eklenti yöntemi. Bu, increment_version_number_in_plist yöntemini kullanarak küçük ve yama tümsek türleri için sürüm numarasının artırılmasını sağlar.

Sertifika ve ön hazırlık profilleri ayarlayın

Şimdi, sertifikayı ayarlamak ve dosyaları sağlamak için match kullanacağız. match , iOS uygulamaları için fastlane'e dahildir, kod imzalama için kullanılır. match ile tüm geliştirme ekibi tek bir kod imzalama kimliği kullanabilir.

match eklemeden önce, sertifikaları depolamak için özel bir GitHub deposu oluşturmamız gerekecek. Ardından, aşağıdaki komutla match kurabiliriz:

 hızlı kulvar eşleşmesi

Özel Repo

Ardından, sertifikaları depolamak için yukarıda gösterildiği gibi özel bir repo eklememiz gerekecek. fastlane klasörünün altında bir Matchfile oluşturulur. match kurulumu tamamlandıktan sonra, geliştirme ve App Store için sertifikalar ve profiller oluşturabiliriz.

 fastlane maç uygulama mağazası 
# uygulama mağazası için
 fastlane maç geliştirme
# Geliştirme için

Yukarıdaki komut yürütüldüğünde, sertifikaları özel depoya ekleyecektir.

iOS uygulamasını oluşturun

Başka bir fastlane özelliği olan gym , iOS IPA uygulamasını oluşturmak için kullanılacak. gym ayrıca beta yazılımının dağıtımını ve dağıtımını otomatikleştirmeye yardımcı olacaktır.

Yapıyı yükleyin

Şimdi yapımızı yükleme zamanı. TestFlight yüklemesi için upload_to_testflight işlevini kullanacağız ve App Store gönderimi için deliver edeceğiz. Teslimat hizmeti, deliver bir parçasıdır; Meta verileri ve IPA'yı App Store'a yüklemek için kullanılır.

GitHub Actions ile iş akışlarını otomatikleştirme

GitHub Eylemleri, bulutta iş akışları oluşturmayı ve çalıştırmayı kolaylaştıran yeni bir GitHub özelliğidir . Android ve iOS dağıtımları için oluşturma ve yayınlama iş akışını otomatikleştirmek için GitHub Eylemlerini ayarlayacağız.

İlk olarak, iOS ve Android için iki ayrı iş akışı ekleyeceğiz. Projenin kök seviyesinde bir .github klasörü oluşturacağız; bu klasörün altında, workflows adlı başka bir klasör oluşturacağız. Ardından, .github > workflows klasörüne iOS sürümü için ios_release.yml ve Android sürümü için android_release.yml dosyasını ekleyeceğiz.

 mkdir .github && cd .github && mkdir iş akışları && cd iş akışları && dokunmatik andriod_release.yml && ios_release.yml'e dokunun

GitHub Eylemleri iş akışlarını tanımlama

GitHub Eylemleri iş akışlarını şu şekilde tanımlayacağız:

 üzerinde:
  itmek:
    etiketler:
      - 'android*'

Android sürümü için derleme, yukarıda tanımlandığı gibi bir android anahtar sözcüğünü içeren bir etiket eklediğimizde başlayacaktır. İşte bir örnek:

 git tag -a 'sürümler' -m "andriod sürümü"

Biri beta sürümü ve diğeri Google Play sürümü için olmak üzere Android sürümü iş akışları için iki iş tanımlanmıştır.

Ardından, GitHub Eylemleri iş akışlarını çalıştırmak için bir Ubuntu sanal makinesinin en son sürümünü tanımlayacağız.

 ad: Android sürümünü derleyin ve dağıtın
üzerinde:
  itmek:
    etiketler:
      - 'android*'
Meslekler:
  testFlight-build:
    isim: android-beta-build
    çalışır durumda: ubuntu-en son
    strateji:
      matris:
        düğüm sürümü: [12.x]
    adımlar:
      - kullanır: eylemler/kurulum-düğüm@v1
        ile birlikte:
          düğüm sürümü: ${{ matrix.node sürümü }}
      - ad: Git deposuna ödeme yapın
        kullanır: eylemler/checkout@v2
      - ad: Bağımlılıkları yükle
        çalıştırın: |
          iplik yükleme
      - isim: Fastlane'i kurun
        kullanır: eylemler/kurulum-ruby@v1
        ile birlikte:
          yakut sürümü: 2.6
      - isim: npm bağımlılıklarını kurun
        çalıştırın: |
          iplik yükleme
      - isim: Fastlane'i kurun
        çalıştırın: |
          paket yükleme
          paket güncelleme hızlı şeridi
      - isim: Derleyin ve TestFlight'a yükleyin
        çalıştırın: |
          paket yürütme fastlane android beta
          ortam: 
             ANDROID_KEYSTORE_FILE: ${{ secrets.ANDROID_KEYSTORE_FILE }}
             ANDROID_KEYSTORE_PASSWORD: ${{ secrets.ANDROID_KEYSTORE_PASSWORD }}
             ANDROID_KEYSTORE_ALIAS: ${{ secrets.ANDROID_KEYSTORE_ALIAS }}
             ANDROID_KEYSTORE_PASSWORD: ${{ secrets.ANDROID_KEYSTORE_PASSWORD }}
  yayın oluşturma:
    ad: Android sürümü-build
    çalışır durumda: ubuntu-en son
    strateji:
      matris:
        düğüm sürümü: [12.x]
    adımlar:
      - kullanır: eylemler/kurulum-düğüm@v1
        ile birlikte:
          düğüm sürümü: ${{ matrix.node sürümü }}
      - ad: Git deposuna ödeme yapın
        kullanır: eylemler/checkout@v2
      - ad: Bağımlılıkları yükle
        çalıştırın: |
          iplik yükleme
      - isim: Fastlane'i kurun
        kullanır: eylemler/kurulum-ruby@v1
        ile birlikte:
          yakut sürümü: 2.6
      - isim: npm bağımlılıklarını kurun
        çalıştırın: |
          iplik yükleme
      - isim: Fastlane'i kurun
        çalıştırın: |
          paket yükleme
          paket güncelleme hızlı şeridi
      - ad: sürüm oluşturma
        çalıştırın: |
          paket exec fastlane android sürümü
          ortam: 
             ANDROID_KEYSTORE_FILE: ${{ secrets.ANDROID_KEYSTORE_FILE }}
             ANDROID_KEYSTORE_PASSWORD: ${{ secrets.ANDROID_KEYSTORE_PASSWORD }}
             ANDROID_KEYSTORE_ALIAS: ${{ secrets.ANDROID_KEYSTORE_ALIAS }}
             ANDROID_KEYSTORE_PASSWORD: ${{ secrets.ANDROID_KEYSTORE_PASSWORD }}

Yukarıdaki kodda, GitHub pazarı tarafından sağlanan veya topluluk tarafından desteklenen önceden tanımlanmış eylemler olan bir dizi adımı tanımlıyoruz.

Yukarıdaki kodda gösterildiği gibi npm bağımlılıklarını kurmak, gerekli Node.js sürümünü eklemek ve fastlane kurmak için sonraki olaylar serisine adımları ekliyoruz.

Son olarak, beta ve yayın işleri için fastlane derlemesini çalıştırıyoruz. Ayrıca, derleme iş akışı sırasında gereken ortam değişkenini tanımlamak için GitHub Eylemleri Sırlarını kullanırız.

Github Eylemleri için gizli diziler oluşturma ve saklama

Şifrelenmiş sırlar, hassas bilgileri saklamamıza izin verir. Ortam değişkenlerimizi, anahtarımızı ve şifrelerimizi GitHub deposuna şifreli sırlar olarak ekleyebiliriz. Deponun sırları, depoya yerleştirilen tüm iş akışları tarafından erişilebilir olacaktır.

Sırları eklemek için deponun Ayarlar menüsüne gidin. Sırlar > Eylemler bölümü (sol gezinme) altında, yeni sırrı eklemek için Yeni depo sırrı düğmesini (sağ üstte) tıklayın.

Yüklemeden önce uygulamanızı doğru bir şekilde imzalamak için prosedür boyunca Android ve iOS uygulamaları için gizli diziler eklemek gerekir.

Eylem Sırları

iOS iş akışlarını tanımlama

Daha önce de belirtildiği gibi, .github > workflows klasörü altında ayrı bir ios release.yml dosyası oluşturarak iOS ve Android sürümlerini ayırıyoruz. iOS sürümü için derleme, ios anahtar kelimeleri içeren bir etiket eklediğimizde başlayacaktır.

İşte bir örnek:

 git tag -a 'sürümler' -m "ios sürümü"

iOS sürümü için iki iş belirleyeceğiz: biri TestFlight sürümü için ve diğeri App Store sürümü için.

Ardından, iOS dağıtımları için GitHub Eylemleri iş akışlarını çalıştırmak için macos'un macos-latest sanal makinesinin en son sürümünü tanımlayacağız.

 ad: iOS sürümünü derleyin ve dağıtın
üzerinde:
  itmek:
    etiketler:
      - 'ios*'
Meslekler:
  testFlight-build:
    isim: iOS-testFlight-build
    çalışır durumda: macos-en son
    strateji:
      matris:
        düğüm sürümü: [12.x]
    adımlar:
      - kullanır: eylemler/kurulum-düğüm@v1
        ile birlikte:
          düğüm sürümü: ${{ matrix.node sürümü }}
      - ad: Git deposuna ödeme yapın
        kullanır: eylemler/checkout@v2
      - ad: Bağımlılıkları yükle
        çalıştırın: |
          iplik yükleme
      - isim: Fastlane'i kurun
        kullanır: eylemler/kurulum-ruby@v1
        ile birlikte:
          yakut sürümü: 2.6
      - isim: npm bağımlılıklarını kurun
        çalıştırın: |
          iplik yükleme
      - isim: Fastlane'i kurun
        çalıştırın: |
          paket yükleme
          paket güncelleme hızlı şeridi
      - isim: Derleyin ve TestFlight'a yükleyin
        çalıştırın: |
          paket yürütme fastlane ios beta
          ortam: 
             APPLE_ID: ${{ secrets.APPLE_ID }}
             APP_STORE_EMAIL: ${{ secrets.APP_STORE_EMAIL }}
             APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
             IOS_DISTRIBUTION_CERTS_GITHUB_URL: ${{ secrets.IOS_DISTRIBUTION_CERTS_GITHUB_URL }}
             MATCH_PASSWORD: ${{ secrets.MATCH_PASSWORD }}
  yayın oluşturma:
    isim: iOS-testFlight-build
    çalışır durumda: macos-en son
    strateji:
      matris:
        düğüm sürümü: [12.x]
    adımlar:
      - kullanır: eylemler/kurulum-düğüm@v1
        ile birlikte:
          düğüm sürümü: ${{ matrix.node sürümü }}
      - ad: Git deposuna ödeme yapın
        kullanır: eylemler/checkout@v2
      - ad: Bağımlılıkları yükle
        çalıştırın: |
          iplik yükleme
      - isim: Fastlane'i kurun
        kullanır: eylemler/kurulum-ruby@v1
        ile birlikte:
          yakut sürümü: 2.6
      - isim: npm bağımlılıklarını kurun
        çalıştırın: |
          iplik yükleme
      - isim: Fastlane'i kurun
        çalıştırın: |
          paket yükleme
          paket güncelleme hızlı şeridi
      - isim: Derleyin ve TestFlight'a yükleyin
        çalıştırın: |
          paket yürütme fastlane ios beta
          ortam: 
             APPLE_ID: ${{ secrets.APPLE_ID }}
             APP_STORE_EMAIL: ${{ secrets.APP_STORE_EMAIL }}
             APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
             IOS_DISTRIBUTION_CERTS_GITHUB_URL: ${{ secrets.IOS_DISTRIBUTION_CERTS_GITHUB_URL }}
             MATCH_PASSWORD: ${{ secrets.MATCH_PASSWORD }}

Şimdi, yukarıdaki kodda gösterildiği gibi, npm bağımlılıklarını kurmak, gerekli Node.js sürümünü eklemek ve bir sonraki olay dizisinde fastlane kurmak için bir dizi adım tanımlıyoruz.

Son olarak, TestFlight sürümü için fastlane derlemesini çalıştırıyoruz. Derleme iş akışı sırasında gereken ortam değişkenini tanımlamak için GitHub Eylemleri Sırlarını kullanırız.

Çözüm

Bu yazımızda React Native projelerinde fastlane kurulumunun nasıl yapıldığını gösterdik. Fastlane ve GitHub Actions'ın birlikte kullanılması, iOS ve Android uygulamaları için derleme ve yayınlama işlemlerini basitleştirir ve derleme, test etme ve yayınlama dağıtımları için dağıtım hattını iyileştirir.

fastlane ve GitHub Actions hakkında daha fazla bilgi edinmek için resmi belgelere bakın.

Fastlane sonrası: React Native uygulamalarını oluşturun, test edin ve gönderin ilk olarak LogRocket Blog'da göründü.