Aracılığıyla paylaş

React Native ile Çalışmaya Başlama

Önemli

Visual Studio App Center, 30 Haziran 2026'ya kadar desteklenmeye devam edecek Analiz ve Tanılama özellikleri dışında 31 Mart 2025'te kullanımdan kaldırılmıştır. 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 Çökme İzleyicisi'ni kullanmak için uygulamanıza App Center React Native SDK’sını kurarak 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 sonraki bir sürümde çalışan cihazları hedefliıyorsunuz.
  • iOS'ta kilitlenme raporlama işlevi 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 Kullanmaya Başlama'yı izleyin). Yine de SDK'yı el ile bağlamak mümkündür.

2. Uygulama Sırrını almak için Uygulamanızı App Center Portalı'nda oluşturmak için

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 yazan 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'i 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öşesinde üç dikey noktalı simgeye tıklayın ve seçerek Uygulama Gizli Kodunuzu alın.

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 React Native SDK'sını iOS uygulamanız için 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 Crashes eklemek için aşağıdaki satırı girin:

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

yarn yerine npm tercih ederseniz, 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 hizmetleri için modülleri eklersiniz. appcenter-analytics ve appcenter-crashes , ek kurulum gerektirmeden değer sağladığı için neredeyse her uygulamaya ekleme yapmak mantıklıdır. appcenter , birden çok hizmet için yararlı olan genel amaçlı App Center API'leri sağlar.

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

App Center SDK'sını React Native ile kullanmanın iki yolu vardır: iOS için AppCenter-Config.plist ve Android için appcenter-config.json konfigürasyonu yapmak veya appSecret'i bağımsız değişken olarak kabul eden yerel başlangıç işlevlerini çağırmak.

3.1.1 React Native iOS'i 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çeneğini Ayarlama 1: Yapılandırma AppCenter-Config.plist

  1. Yeni bir dosya oluşturun ve adını AppCenter-Config.plist olarak belirleyin. İlgili dosyanın içeriğini aşağıdaki şekilde yapın ve {APP_SECRET_VALUE} değerini uygulamanızın gizli anahtarı ile değiştirin. Bu dosyayı Xcode projesine eklemeyi unutmayın (Xcode'da uygulamaya sağ tıklayın ve AppName<...dosyası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>

  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 aktarımları 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çeneğini Ayarlama 2: 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 aktarımları 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 React Native Android'i 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çeneğini Ayarlama 1: appcenter-config.json Yapılandırma

Aşağıdaki içeriğe sahip appcenter-config.json adında android/app/src/main/assets/ konumunda yeni bir dosya oluşturun, ardından {APP_SECRET_VALUE} öğesini uygulama gizli değeriyle değiştirin.

{
    "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çeneğini Ayarlama 2: Kodda yapılandırma

App Center Analytics ve App Center Kilitlenmelerini 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 düşük React Native için SDK'yi otomatik olarak tümleştirme

Uyarı

React modülleriniz Podfile'ınızın içinde göreli yol kullanılarak bağlıysa 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})

    Aşağıdaki komutu çalıştırın:

    pod repo update

    react-native link çalıştırmayı yeniden deneyin.

    Uyarı

    App Center SDK, bağlama işlemi sırasında App Center modülleri için mock'ları 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ımdaki 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",
]

    Uyarı

    Kilitlenmelerin işlenmesinin otomatik veya Javascript yöntemleriyle tetiklenmesi farketmeksizin, kilitlenmeler uygulamanın yeniden başlatılmasından sonra her zaman işlenir. Uygulama çöktüğünde, çökmeler işlenemez.

  2. Projenin android/app/src/main/assets/appcenter-config.json kısmını düzenleyin ve YOUR_APP_SECRET yer tutucusunu, App Center projenizin uygulama gizli anahtarıyla değiştirin.

  3. Projenin ios/{YourAppName}/AppCenter-Config.plist dosyasını düzenleyin ve YOUR_APP_SECRET yer tutucu değerini App Center projenizin uygulama gizli dizisiyle değiştirin. AppCenter-Config.plist zaten varsa ancak Xcode projenizin 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.

Uyarı

En son App Center React Native SDK'sı, en son App Center iOS SDK'sına bağlı olmayabilir, çünkü iOS SDK React Native sdk'sının öncesinde güncelleştirilip yayınlanır.

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ı] 3. taraf kitaplıkları için bir alt dizin oluşturun.

    • En iyi uygulama olarak, 3. taraf kitaplıklar genellikle bir alt dizinde bulunur (genellikle Satıcı olarak adlandırılır), 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çılmış 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. Yollar sırasıyla olacak

      • /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ı SDK'nın başlatılması için kod içerecek şekilde değiştirin:

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

  2. AppCenter-Config.plist adlı yeni bir dosya oluşturun, aşağıdaki içeriği ekleyin ve {APP_SECRET_VALUE} değerini uygulama gizli anahtarı değerinizle değiştirin. 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>

Uyarı

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'yi açın ve dependency.platforms.ios'ü null olarak ayarlayın.
    module.exports = {
  dependency: {
    platforms: {
      ios: null,
      ...
    }
  }
};

  2. App Center React Native eklenti projelerinden React Native üst bilgilerini 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 Derleme Ayarları sekmesindeki Üst Bilgi Arama Yolları bölümünde, üst bilgi dosyaları için yeni konumlar recursive seçeneğiyle ekleyin:${SRCROOT}/../../../ios/Pods/Headers

react-native link komutu olmadan 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 Çökme Durumlarını 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')

Uyarı

jCenter desteğinin sona ermesi nedeniyle tüm derlemelerimiz Maven Central deposuna taşındı. Lütfen jCenter'den 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ı SDK'nın başlatılması için kod 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.json adında android/app/src/main/assets/ konumunda yeni bir dosya oluşturun, ardından APP_SECRET_VALUE öğesini uygulama gizli değeriyle değiştirin.

    {
    "app_secret": "APP_SECRET_VALUE"
}

Uyarı

Uygulama Sırrınızı kaynak koduna yerleştirmek önerilmez.

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

Uyarı

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

Uyarı

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"

ç. appcenter_backup_rule.xml dosyasına aşağıdaki yedekleme kurallarını 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 komutla iOS uygulamanızı derleyip başlatabilirsiniz:

react-native run-ios

Tavsiye

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

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

react-native run-android

Tavsiye

Android öykünücüde veya Android cihazda başlatmak için cihaz kimliğini react-native run-android --deviceId "myDeviceId" (deviceId komutundan adb devices) belirtmeniz yeterlidir.

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

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

Uyarı

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

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.