React Native kullanmaya başlama

  • Makale

Önemli

Visual Studio App Center 31 Mart 2025'te kullanımdan kaldırılıyor. Tamamen kullanımdan kaldırılana kadar Visual Studio App Center'ı kullanmaya devam edebilirsiniz ancak geçiş yapmayı düşünebileceğiniz birkaç önerilen alternatif vardır.

Destek zaman çizelgeleri ve alternatifleri hakkında daha fazla bilgi edinin.

App Center SDK'sı modüler bir mimari kullanır, böylece hizmetlerin herhangi birini veya tümünü kullanabilirsiniz.

App Center Analytics ve App Center Kilitlenmelerini kullanmak için uygulamanızda App Center React Native SDK'sını ayarlamaya başlayalım.

1. Önkoşullar

Başlamadan önce aşağıdaki önkoşulların karşılandığından emin olun:

  • React Native 0.34 veya üzerini çalıştıran bir React Native projesi kullanıyorsunuz.
  • Android Sürüm 5.0/API düzeyi 21 veya üzeri ya da iOS sürüm 9.0 veya üzeri üzerinde çalışan cihazları hedefliyorsunuz.
  • iOS'ta Kilitlenme Raporlama işlevselliği sağlayan başka bir kitaplık kullanmıyorsunuz.
  • iOS için, SDK'yı kullanmanın varsayılan yolu CocoaPods gerektirir. (CocoaPods'u yüklemediyseniz CocoaPods'u kullanmaya başlama bölümüne bakın). Yine de SDK'yı el ile bağlamak mümkündür.

2. Uygulama Gizli Dizisini almak için uygulamanızı App Center Portalı'nda oluşturun

Uygulamanızı App Center portalında zaten oluşturduysanız bu adımı atlayabilirsiniz.

  1. appcenter.ms gidin.
  2. Kaydolun veya oturum açın ve portalın sağ üst köşesindeki Yeni ekle ifadesinin yer aldığı mavi düğmeye basın ve açılan menüden Yeni uygulama ekle'yi seçin.
  3. Uygulamanız için bir ad ve isteğe bağlı bir açıklama girin.
  4. Uygun işletim sistemini (Android veya iOS) seçin ve platform olarak React Native seçin.
  5. Sağ alttaki Yeni uygulama ekle yazan düğmeye basın.

Bir uygulama oluşturduktan sonra Uygulama Gizli Dizisi'ni App Center Portalı'nın Ayarlar sayfasından edinebilirsiniz. Ayarlar sayfasının sağ üst köşesindeki üç dikey noktaya tıklayın ve Uygulama Gizli Dizinizi almak için seçinCopy app secret.

3. App Center SDK modüllerini ekleme

SDK'nın varsayılan tümleştirmesinde iOS için CocoaPods kullanılır. Uygulamanızda CocoaPods kullanmıyorsanız, iOS uygulamanız için React Native SDK'sını el ile tümleştirmeniz gerekir.

Bir Terminal açın ve React Native projenizin köküne gidin, ardından uygulamaya App Center Analytics ve Kilitlenmeler eklemek için aşağıdaki satırı girin:

npm install appcenter appcenter-analytics appcenter-crashes --save-exact

tercih npmettiğiniz yarn durumlarda App Center'ı yüklemek için aşağıdaki komutu kullanın:

yarn add appcenter appcenter-analytics appcenter-crashes --exact

App Center SDK'sı modüler bir yaklaşım kullanır ve burada yalnızca kullanmak istediğiniz App Center hizmetlerine yönelik modülleri eklersiniz. appcenter-analytics ve appcenter-crash'ler , ek kurulum gerekmeyen bir değer sağladığı için hemen her uygulamaya eklemek mantıklıdır. appcenter , birden çok hizmet için yararlı olan genel amaçlı App Center API'leri sağlar.

3.1 SDK'yi React Native 0.60 için otomatik olarak tümleştirme

App Center SDK'sını AppCenter-Config.plist React Native ile kullanmak iki şekilde yapılabilir: Android için iOS ve appcenter-config.json için yapılandırma veya appSecret'i bağımsız değişken olarak kabul eden yerel başlangıç işlevlerini çağırma.

3.1.1 iOS React Native Tümleştirme

CocoaPods bağımlılıklarını yüklemek için iOS dizininden komutunu çalıştırın pod install --repo-update .

3.1.1.1 AppSecret Seçenek 1'i Ayarlama: Yapılandırma AppCenter-Config.plist

  1. Adı aşağıdaki içeriğe AppCenter-Config.plist sahip yeni bir dosya oluşturun ve değerini uygulama gizli dizisi değerinizle değiştirin {APP_SECRET_VALUE} . Bu dosyayı Xcode projesine eklemeyi unutmayın (Xcode'da uygulamaya sağ tıklayın ve AppName'e> dosya ekle...'ye <tıklayın).

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "https://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
    <key>AppSecret</key>
    <string>{APP_SECRET_VALUE}</string>
    </dict>
</plist>

  2. Uygulamanın AppDelegate.m veya AppDelegate.mm dosyasını SDK'nın başlatılması için kod içerecek şekilde değiştirin.

    • Aşağıdaki içeri aktarmaları ekleyin:
    #import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
    • Yöntemine application:didFinishLaunchingWithOptions: şu satırları ekleyin:
    [AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];
3.1.1.2 AppSecret Seçenek 2'yi Ayarlama: Kodda yapılandırma

Uygulamanın AppDelegate.m veya AppDelegate.mm dosyasını SDK'nın başlatılması için kod içerecek şekilde değiştirin.

  • Aşağıdaki içeri aktarmaları ekleyin:
#import <AppCenterReactNativeShared/AppCenterReactNativeShared.h>
#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
  • Yöntemine application:didFinishLaunchingWithOptions: şu satırları ekleyin:
[AppCenterReactNativeShared setStartAutomatically:YES];
[AppCenterReactNativeShared setAppSecret:@"{Your App Secret}"];
[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

3.1.2 Android React Native Tümleştirme

Uygulamanın res/values/strings.xml aşağıdaki satırları içerecek şekilde değiştirin:

<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>
3.1.2.1 AppSecret Seçenek 1'i Ayarlama: appcenter-config.json Yapılandırma

aşağıdaki içerikle appcenter-config.jsonandroid/app/src/main/assets/ adlı yeni bir dosya oluşturun ve değerini uygulama gizli anahtarı değerinizle değiştirin {APP_SECRET_VALUE} .

{
    "app_secret": "{APP_SECRET_VALUE}"
}

Not: Assets adlı klasör yoksa , "project_root/android/app/src/main/assets" altında oluşturulmalıdır.

3.1.2.2 AppSecret Seçenek 2'yi Ayarlama: Kodda yapılandırma

App Center Analytics ve App Center Kilitlenmeleri'ni kullanmak için uygulamanızın ana etkinlik sınıfının onCreate-callback öğesine aşağıdaki satırı ekleyin:

AppCenter.start(getApplication(), "{Your App Secret}", Analytics.class, Crashes.class);

AppCenter.start(application, "{Your App Secret}", Analytics::class.java, Crashes::class.java)

3.2 0,60'tan daha düşük React Native için SDK'yi otomatik olarak tümleştirme

Not

Podfile içinde göreli yol kullanılarak bağlanmış React modülleriniz varsa ancak projede başvurulmuyorsa, bağlama betiği App Center'ı statik pod sürümleri kullanarak bağladığından başarısız olur. Bağlama betiğini zaten çalıştırdıysanız React Native sorun giderme bölümündeki adımları izlemeniz veya kendiniz bağlamanız gerekir

  1. react-native link komutunu kullanarak eklentileri React Native uygulamasına bağlayın.

    react-native link appcenter
react-native link appcenter-analytics
react-native link appcenter-crashes

    iOS için, aşağıdaki gibi bir hata görürseniz CocoaPods'taniOS ve macOS için App Center SDK'sını indirmeyi dener:

    Added code to initialize iOS App Center SDK in ios/reactnativesample/AppDelegate.m
Analyzing dependencies [!] Unable to find a specification for AppCenterReactNativeShared (~> {version})

    Şu komutu çalıştırın:

    pod repo update

    Ardından komutunu çalıştırmayı react-native linkyeniden deneyin.

    Not

    App Center SDK,bağlama işlemi sırasında App Center modülleri için sahteleri otomatik olarak ayarlamaz. Uygulamanızda Jest test çerçevesi kullanıyorsanız ve Testleri Jest ile çalıştırırken App Center SDK'sının neden olduğu hatalarla karşılaşıyorsanız, package.json dosyasının jest bölümüne aşağıdakileri ekleyin (yalnızca kullanımda olan modülleri dahil edin):

    "setupFiles": [
   "<rootDir>/node_modules/appcenter/test/AppCenterMock.js",
   "<rootDir>/node_modules/appcenter-analytics/test/AppCenterAnalyticsMock.js",
   "<rootDir>/node_modules/appcenter-crashes/test/AppCenterCrashesMock.js",
]

    Not

    Kilitlenmelerin işlenmesinin javascript yöntemleri tarafından otomatik veya tetiklenmesi farketmeksizin, kilitlenmeler her zaman uygulamanın yeniden başlatılmasından sonra işlenir. Uygulama kilitlendiği sırada kilitlenmeler işlenemez.

  2. Projenin projelerini android/app/src/main/assets/appcenter-config.json düzenleyin ve yer tutucu değerini App Center projenizin uygulama gizli dizisiyle değiştirin YOUR_APP_SECRET .

  3. Projenin ios/{YourAppName}/AppCenter-Config.plist dosyasını düzenleyin ve yer tutucu değerini App Center projenizin uygulama gizli dizisiyle değiştirin YOUR_APP_SECRET . AppCenter-Config.plist zaten varsa ancak Xcode projenizin bir parçası değilse, bunu Xcode projesine el ile eklemeniz gerekir (XCode'da uygulamaya sağ tıklayın ve Uygulama Adına> dosya ekle...'ye <tıklayın).

CocoaPods kullanmak istemiyorsanız bu tümleştirmeyi yapın. Yukarıda açıklandığı gibi SDK'nın CocoaPods aracılığıyla tümleştirilmesini kesinlikle öneririz. Bununla birlikte, iOS yerel SDK'sını el ile tümleştirmek de mümkündür.

Not

En son App Center React Native SDK'sı, iOS SDK'sı React Native önce güncelleştirilip yayımlandığından, en son App Center iOS SDK'sine bağlı olmayabilir.

Sonuç olarak, React Native SDK'sının hangi iOS SDK sürümüne bağlı olduğunu bilmeniz gerekir.

  1. Zip dosyası olarak sağlanan React Native çerçeveleri için App Center SDK'sını indirin ve sıkıştırmasını açın.

  2. Gerekli React Native iOS köprüsü için tek bir çerçeve içeren AppCenterReactNativeShared adlı bir klasör görürsünüz.

  3. Zip dosyası olarak sağlanan iOS çerçeveleri için ilgili App Center SDK'sını indirin ve sıkıştırmasını açın.

  4. Her App Center hizmeti için farklı çerçeveler içeren AppCenter-SDK-Apple/iOS adlı bir klasör görürsünüz. Adlı AppCenter çerçeve, farklı modüller arasında paylaşılan kodu içerdiğinden projede gereklidir.

  5. [İsteğe bağlı] Üçüncü taraf kitaplıkları için bir alt dizin oluşturun.

    • En iyi uygulama olarak, 3. taraf kitaplıkları genellikle bir alt dizinde (genellikle Satıcı olarak adlandırılır) bulunur. Bu nedenle, projenizi kitaplıklar için bir alt dizinle düzenlemediyseniz, şimdi bir Vendor alt dizini oluşturun (projenizin ios dizini altında).
    • Diskte dosya yapınızı taklit etmek için Xcode projenizde Vendor adlı bir grup oluşturun.

  6. Finder'ı açın ve daha önce sıkıştırması açılan AppCenter-SDK-Apple/iOS ve AppCenterReactNativeShared klasörlerini projenizin klasörünün bulunmasını istediğiniz konuma kopyalayın.

  7. SDK çerçevelerini Xcode'da projeye ekleyin:

    • Proje Gezgini'nin görünür olduğundan emin olun (⌘+1).
    • AppCenter.framework, AppCenterAnalytics.framework, AppCenterCrashes.framework ve AppCenterReactNativeShared.framework dosyalarını Bulucu'dan (önceki adımdaki konumda) Xcode'un Proje Gezgini'ne sürükleyip bırakın. SDK'yı başlatmak, projenize eklendiklerinden emin olmak için AppCenter.framework ve AppCenterReactNativeShared.framework dosyaları gereklidir, aksi takdirde diğer modüller çalışmaz ve uygulamanız derlenmez.
    • Bir iletişim kutusu görüntülenir, uygulama hedefinizin işaretli olduğundan emin olun ve son'a tıklayın.

  8. AppCenter React Native eklenti projelerini uygulamanızın projesine bağlayın:

    • Proje Gezgini'nin görünür olduğundan emin olun (⌘+1).

    • Her AppCenter React Native eklentisi için kaynak kodu içeren klasöre gidin. Sırasıyla yollar

      • /node_modules/appcenter/ios
      • /node_modules/appcenter-analytics/ios
      • /node_modules/appcenter-crashes/ios

    • Dosyaları Bulucu'dan Xcode'un Proje Gezgini'ne sürükleyip bırakın .xcodeproj . Genellikle Kitaplıklar grubu altında.

  9. AppCenter React Native eklentileri için kitaplıkları bağlayın. Proje ayarlarınızı açın ve Bağlı Çerçeveler ve Kitaplıklar bölümündeki Genel sekmesinin altında, önceki adımda eklenen hedef kitaplıklara başvuran yeni öğeler ekleyin:

    • libAppCenterReactNative.a
    • libAppCenterReactNativeAnalytics.a
    • libAppCenterReactNativeCrashes.a

  10. AppCenter React Native eklenti projelerindeki üst bilgileri bulmak için Üst Bilgi Arama Yollarını değiştirin. Proje ayarlarınızı açın ve Üst Bilgi Arama Yolları bölümündeki Derleme Ayarları sekmesinin altında üst bilgi dosyaları için yeni konumlar ekleyin:

  • $(SRCROOT)/../node_modules/appcenter/ios/AppCenterReactNative
  • $(SRCROOT)/../node_modules/appcenter-analytics/ios/AppCenterReactNativeAnalytics
  • $(SRCROOT)/../node_modules/appcenter-crashes/ios/AppCenterReactNativeCrashes

  1. Uygulamanın AppDelegate.m veya AppDelegate.mm dosyasını başlangıç SDK'sı için kod içerecek şekilde değiştirin:

    • Aşağıdaki içeri aktarmaları ekleyin:
    #import <AppCenterReactNative/AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics/AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes/AppCenterReactNativeCrashes.h>
    • Bu satırları yöntemine application:didFinishLaunchingWithOptions: ekleyin
    [AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

  2. Adı aşağıdaki içeriğe AppCenter-Config.plist sahip yeni bir dosya oluşturun ve değerini uygulama gizli dizisi değerinizle değiştirin {APP_SECRET_VALUE} . Bu dosyayı XCode projesine eklemeyi unutmayın (XCode'da uygulamaya sağ tıklayın ve Uygulama Adına> dosya ekle...'ye <tıklayın).

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "https://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
    <key>AppSecret</key>
    <string>{APP_SECRET_VALUE}</string>
    </dict>
</plist>

Not

Sonraki iki adım yalnızca React Native 0.60 ve üzerini kullanan uygulamalar içindir.

  1. React Native 0.60 ve üzeri için otomatik bağlantıyı devre dışı bırakın:

    • Her App Center paketindeki node_modules klasörünün içinde react-native.config.js açın ve olarak nullayarlayındependency.platforms.ios:
    module.exports = {
  dependency: {
    platforms: {
      ios: null,
      ...
    }
  }
};

  2. App Center React Native eklentileri projelerinden React Native üst bilgileri bulmak için Üst Bilgi Arama Yollarını değiştirin:

    • Proje Gezgini'nin görünür olduğundan emin olun (⌘+1).
    • 8. adımda Kitaplıklar grubuna eklediğiniz her AppCenter React Native eklentisi projesi için:
      • Projeyi seçin ve Üst Bilgi Arama Yolları bölümündeki Derleme Ayarları sekmesinin altında, üst bilgi dosyaları için yeni konumlar ekleyin ve şu recursive seçeneği kullanın:${SRCROOT}/../../../ios/Pods/Headers

Komutu olmadan react-native link tümleştirme adımları.

  1. android/settings.gradle dosyasını açın ve aşağıdaki satırları ekleyin. Projenize istediğiniz bağımlılıkları ekleyin. Her SDK modülünün bu bölümde ayrı bir bağımlılık olarak eklenmesi gerekir. App Center Analytics ve Kilitlenmeleri kullanmak istiyorsanız aşağıdaki satırları ekleyin:

      include ':appcenter-crashes'
  project(':appcenter-crashes').projectDir = new File(rootProject.projectDir, '../node_modules/appcenter-crashes/android')
  include ':appcenter-analytics'
  project(':appcenter-analytics').projectDir = new File(rootProject.projectDir, '../node_modules/appcenter-analytics/android')
  include ':appcenter'
  project(':appcenter').projectDir = new File(rootProject.projectDir, '../node_modules/appcenter/android')

Not

jCenter desteğinin sona ermesi nedeniyle tüm derlemelerimiz Maven Central deposuna taşındı. Lütfen jCenter'dan Maven Central'a geçişle ilgili bu kılavuzu izleyin.

  1. Projenin uygulama düzeyi build.gradle dosyasını (android/app/build.gradle) açın ve aşağıdaki satırları bölüme dependencies ekleyin:

    dependencies {
    implementation project(':appcenter-crashes')
    implementation project(':appcenter-analytics')
    implementation project(':appcenter')
    ...
}

  2. Uygulamanın MainApplication.java dosyasını, başlatma SDK'sı kodunu içerecek şekilde değiştirin:

    • Bu satırları içeri aktarma bölümüne ekleyin
    import com.microsoft.appcenter.reactnative.crashes.AppCenterReactNativeCrashesPackage;
import com.microsoft.appcenter.reactnative.analytics.AppCenterReactNativeAnalyticsPackage;
import com.microsoft.appcenter.reactnative.appcenter.AppCenterReactNativePackage;
    • yöntemine List<ReactPackage> getPackages() AppCenter paketleri ekleme
    @Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
        new AppCenterReactNativeCrashesPackage(MainApplication.this, getResources().getString(R.string.appCenterCrashes_whenToSendCrashes)),
        new AppCenterReactNativeAnalyticsPackage(MainApplication.this, getResources().getString(R.string.appCenterAnalytics_whenToEnableAnalytics)),
        new AppCenterReactNativePackage(MainApplication.this)
  );
}

  3. strings.xml dosyasını (android/app/src/main/res/values) açın ve etiketlerin içine <resources></resources> aşağıdaki satırları ekleyin:

    <string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>
<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>

  4. aşağıdaki içeriğe sahip appcenter-config.jsonandroid/app/src/main/assets/ adlı yeni bir dosya oluşturun ve değerini uygulama gizli dizi değerinizle değiştirin APP_SECRET_VALUE .

    {
    "app_secret": "APP_SECRET_VALUE"
}

Uyarı

Uygulama Gizli Dizinizi kaynak koduna eklemeniz önerilmez.

3.5 Cihaz hakkında yanlış bilgi almaktan kaçınmak için otomatik yedekleme kullanıyorsanız, sonraki adımları izleyin:

Not

Android 6.0 (API düzeyi 23) veya üzerini hedefleyen uygulamalarda Otomatik Yedekleme otomatik olarak etkinleştirilir. 

Not

Yedekleme kuralı içeren özel bir dosyanız zaten varsa üçüncü adıma geçin.

a. android/app/src/main/res/xml klasöründe appcenter_backup_rule.xml dosyası oluşturun.

b. Projenin AndroidManifest.xml dosyasını açın. özniteliğini android:fullBackupContent<application> öğesine ekleyin. appcenter_backup_rule.xml kaynak dosyasına işaret etmelidir.

android:fullBackupContent="@xml/appcenter_backup_rule"

c. aşağıdaki yedekleme kurallarını appcenter_backup_rule.xml dosyasına ekleyin:

<full-backup-content xmlns:tools="http://schemas.android.com/tools">
    <exclude domain="sharedpref" path="AppCenter.xml"/>
    <exclude domain="database" path="com.microsoft.appcenter.persistence"/>
    <exclude domain="database" path="com.microsoft.appcenter.persistence-journal"/>
    <exclude domain="file" path="error" tools:ignore="FullBackupContent"/>
    <exclude domain="file" path="appcenter" tools:ignore="FullBackupContent"/>
</full-backup-content>

4. SDK'yi başlatın

Artık uygulamanızı komut satırından veya Xcode/Android Studio'dan derleyebilir ve başlatabilirsiniz.

4.1 Uygulamanızı komut satırından derleme ve çalıştırma

Aşağıdaki komutu kullanarak iOS uygulamanızı derleyip başlatabilirsiniz:

react-native run-ios

İpucu

içinde iOS cihaz adını belirterek bir iOS simülatöründe veya iOS cihazındareact-native run-ios --device "myDeviceName"başlatabilirsiniz.

Aşağıdaki komutu kullanarak Android uygulamanızı derleyip başlatabilirsiniz:

react-native run-android

İpucu

Cihaz kimliğini (deviceId komutundanadb devices) belirterek bir android öykünücüsunda veya Android cihazında react-native run-android --deviceId "myDeviceId" başlatabilirsiniz.

4.2 Xcode veya Android Studio'dan uygulamanızı derleme ve çalıştırma

iOS için projenizin ios/{appname}.xcworkspace veya ios/{appname}.xcodeproj dosyanızı Xcode'da açın ve oradan derleyin.

Not

App Center'ı aracılığıyla otomatik react-native link olarak bağladıysanız (3.1. adımda olduğu gibi), projenin ios/{appname}.xcworkspace dosyasını Xcode'da açmanız gerekir. App Center CocoaPods bağımlılıkları yalnızca ile xcworkspace çalışmadığından ve xcodeprojdosyada ios/{appname}.xcodeproj App Center CocoaPods bağımlılıkları bağlı olmaz.

Android için Android projenizi Android Studio'da içeri aktarıp oradan derleyin.

SDK'nın otomatik olarak topladığı portalda Analytics ve Crashes verilerini görselleştirmeye hazırsınız. Ek kurulum gerekmez. App Center'ın neler yapabileceğini öğrenmek için API kılavuzları ve izlenecek yollar için Analiz ve Kilitlenmeler bölümüne bakın.