React Native kullanmaya başlama
Ö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.
- appcenter.ms gidin.
- 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.
- Uygulamanız için bir ad ve isteğe bağlı bir açıklama girin.
- Uygun işletim sistemini (Android veya iOS) seçin ve platform olarak React Native seçin.
- 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 npm
ettiğ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
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>
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
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 link
yeniden 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.
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ştirinYOUR_APP_SECRET
.Projenin
ios/{YourAppName}/AppCenter-Config.plist
dosyasını düzenleyin ve yer tutucu değerini App Center projenizin uygulama gizli dizisiyle değiştirinYOUR_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).
3.3 [yalnızca iOS] React-native bağlantısı veya CocoaPods olmadan React Native için SDK'yi el ile tümleştirme
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.
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.
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.
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.
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.[İ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.
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.
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.
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.
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
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
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];
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.
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
null
ayarlayındependency.platforms.ios
:
module.exports = { dependency: { platforms: { ios: null, ... } } };
- Her App Center paketindeki node_modules klasörünün içinde react-native.config.js açın ve olarak
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
- 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
3.4 [Yalnızca Android] React-native bağlantısı olmadan 0,60'tan düşük React Native için SDK'yi el ile tümleştirme
Komutu olmadan react-native link
tümleştirme adımları.
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.
Projenin uygulama düzeyi build.gradle dosyasını (
android/app/build.gradle
) açın ve aşağıdaki satırları bölümedependencies
ekleyin:dependencies { implementation project(':appcenter-crashes') implementation project(':appcenter-analytics') implementation project(':appcenter') ... }
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) ); }
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>
aşağıdaki içeriğe sahip appcenter-config.json
android/app/src/main/assets/
adlı yeni bir dosya oluşturun ve değerini uygulama gizli dizi değerinizle değiştirinAPP_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 xcodeproj
dosyada 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.