Başlarken ile React Native

App Center SDK'sı modüler bir mimari kullandığı için hizmetlerin herhangi birini veya hepsini kullanabilirsiniz.

App Center Analytics ve App Center Kilitlenmelerini kullanmak için uygulamanıza App Center React Native SDK'App Center başlayın.

1. Önkoşullar

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

• 0.34 veya React Native çalışan React Native bir proje kullanıyorsanız.
• Android Sürüm 5.0/API düzey 21 veya sonraki sürümler ya da iOS sürüm 9.0 veya üzerinde çalışan cihazları hedeflemektedir.
• iOS'ta Kilitlenme Raporlama işlevi sağlayan başka bir kitaplık kullanmazsanız.
• iOS için SDK'yı kullanmanın varsayılan yolu CocoaPods gerektirir. (CocoaPods'u yüklememişsinizdir, bunun için CocoaPods Başlarken izleyin). Yine de SDK'yı el ile bağlamanız mümkündür.

2. Uygulama Gizli App Center almak için App Center portalında oluşturun

App Center portalında zaten App Center bu adımı atlayabilirsiniz.

1. appcenter.ms.
2. Kaydol veya oturum açın ve portalın sağ üst köşesindeki Yeni ekle'ye tıklayın ve açılan menüden Yeni uygulama ekle'yi seçin.
3. Uygulamanıza bir ad ve isteğe bağlı bir açıklama girin.
4. Uygun işletim sistemi (Android veya iOS) ve platform olarak React Native'ı seçin.
5. Sağ alttaki Add new app (Yeni uygulama ekle) düğmesine basın.

Bir uygulama oluşturduktan sonra Uygulama Gizli Ayarlar Portal'App Center edinebilirsiniz. Uygulama sayfasının sağ üst köşesinde Ayarlar üç dikey noktaya tıklayın ve App Copy app secret Secret'inizi almak için öğesini seçin.

3. App Center SDK modüllerini ekleme

SDK'nın varsayılan tümleştirmesi iOS için CocoaPods kullanır. Uygulamanıza CocoaPods'u kullanmıyorsanız iOS uygulamanıza React Native SDK'yı el ile tümleştirmelisiniz.

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

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

yerine tercih yarn npm ederseniz, aşağıdaki komutu kullanarak aşağıdaki komutu App Center:

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 kuruluma gerek olmayan bir değer sağlar ve neredeyse tüm uygulamaya ekleme yapmak mantıklıdır. appcenter, birden çok hizmet App Center api'leriiçin genel amaçlı hizmet sağlar.

3.1 SDK'yı React Native 0.60 için tümleştirin

3.1.1 iOS React Native tümleştirin

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

2. Aşağıdaki içeriğe sahip yeni bir dosya AppCenter-Config.plist oluşturun ve değerini uygulama gizli {APP_SECRET_VALUE} değeriyle değiştirin. Bu dosyayı Xcode projesine eklemeyi unutmayın (Xcode'da uygulamaya sağ tıklayın ve Dosyaları ... dosyasına ekle'ye <AppName> 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>
   

3. Uygulamanın AppDelegate.m dosyasını, sdk'yı başlatma kodunu içerecek şekilde değiştirme:

   • Bu satırları veya bildiriminin üst kısmında içeri aktarma bölümüne #if DEBUG ekleyin #ifdef FB_SONARKIT_ENABLED (varsa):

   #import <AppCenterReactNative.h>
   #import <AppCenterReactNativeAnalytics.h>
   #import <AppCenterReactNativeCrashes.h>
   

   • Bu satırları yöntemine didFinishLaunchingWithOptions ekleyin

   [AppCenterReactNative register];
   [AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
   [AppCenterReactNativeCrashes registerWithAutomaticProcessing];
   

3.1.2 Android React Native tümleştirin

1. içinde aşağıdaki içerikle appcenter-config.json adıyla yeni bir dosya oluşturun ve android/app/src/main/assets/ değerini uygulama gizli gizli {APP_SECRET_VALUE} 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şturulacak

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

   <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.2 0,60'dan React Native SDK'yı otomatik olarak tümleştirin

1. react-native link React Native eklentilerini uygulama uygulamasına bağlama.

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

   iOS için, CocoaPods'tan iOS 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 çalıştırmayı yeniden react-native link deneyin.

   Not

   App Center SDK, bağlama işlemi sırasında modüller App Center sahteleri otomatik olarak ayarlamaz. Uygulamanıza Jest test çerçevesini kullanıyorsanız ve Jest ile test yaparken App Center SDK'sı neden olduğu hatalarla karşılanı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 otomatik olup olmadığı veya Javascript yöntemleri tarafından tetiklenmiş olması, uygulama yeniden başlatıldıktan sonra kilitlenmeler her zaman işlenir. Kilitlenmeler uygulamanın kilitlenmesi sırasında işlenemez.

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

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

3.3 [yalnızca iOS] React-native bağlantısı veya CocoaPods React Native SDK'yı el ile tümleştirin

CocoaPods kullanmak istemiyorsanız bu tümleştirmeyi kullanın. Yukarıda açıklandığı gibi SDK'yı CocoaPods aracılığıyla tümleştirmenizi kesinlikle öneririz. Yine de, iOS yerel SDK'sı el ile tümleştirilebilir.

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

2. Gerekli iOS köprüsü için tek bir çerçeve içeren AppCenterReactNativeShared adlı React Native bulunur.

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

4. Her bir hizmet için farklı çerçeveler içeren AppCenter-SDK-Apple/iOS adlı bir App Center görüyorsunuz. Farklı modüller arasında paylaşılan kodu içerdiği için adlı AppCenter çerçeve 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 dizinin içinde bulunur (genellikle Vendor olarak anilir). Bu nedenle projeniz kitaplıklar için bir alt dizinle düzenlenmse şimdi (projenizin ios dizininde) bir Vendor alt dizini oluşturun.
   • Diskte dosya yapınızı taklit etmek için Xcode projenizin içinde Vendor adlı bir grup oluşturun.

6. Bulıcı'yı açın ve önceden sıkıştırması açılmamış AppCenter-SDK-Apple/iOS ve AppCenterReactNativeShared klasörlerini projenizin, içinde yer almak istediğiniz konumdaki klasörüne kopyalayın.

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

   • Gezgin'in Project (⌘+1) olduğundan emin olun.
   • AppCenter.framework, AppCenterAnalytics.framework, AppCenterCrashes.framework ve AppCenterReactNativeShared.framework dosyalarını Bulıcıdan (önceki adımda yer alan konumda) sürükleyip Xcode'un Project Gezgini'ne bırakın. SDK'yı başlatmak için AppCenter.framework ve AppCenterReactNativeShared.framework dosyaları gereklidir, aksi takdirde diğer modüller çalışmaz ve uygulama derlemez.
   • Bir iletişim kutusu görüntülenir, uygulama hedefinizin işaretli olduğundan emin olun ve ardından Son'a tıklayın.

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

   • Gezgin'in Project (⌘+1) olduğundan emin olun.

   • Her AppCenter React Native eklentisi için kaynak kodunu içeren klasöre gidin. Yollar sırasıyla şu şekilde olur:

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

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

9. AppCenter kitaplıkları ve React Native bağlama. 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'dan üst bilgileri bulmak için Üst Bilgi Arama Yollarını React Native projelerini kullanın. Proje ayarlarınızı açın ve Üst Ayarlar Yolları bölümündeki Derleme Ve Derleme sekmesi 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

11. Uygulamanın AppDelegate.m dosyasını, sdk'yı başlatma kodunu içerecek şekilde değiştirme:

    • Bu satırları veya bildiriminin üzerine (varsa) içeri aktarma bölümüne ekleyin #if DEBUG #ifdef FB_SONARKIT_ENABLED :

    #import <AppCenterReactNative/AppCenterReactNative.h>
    #import <AppCenterReactNativeAnalytics/AppCenterReactNativeAnalytics.h>
    #import <AppCenterReactNativeCrashes/AppCenterReactNativeCrashes.h>
    

    • Bu satırları didFinishLaunchingWithOptions yönteme ekleyin

    [AppCenterReactNative register];
    [AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
    [AppCenterReactNativeCrashes registerWithAutomaticProcessing];
    

12. Aşağıdaki içeriğe sahip adlı yeni bir dosya oluşturun AppCenter-Config.plist ve {APP_SECRET_VALUE} uygulama gizli değeri ile değiştirin. Bu dosyayı XCode projesine eklemeyi unutmayın (XCode 'da uygulamaya sağ tıklayın ve Dosya Ekle <App Name> ... öğesine 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>
    

13. React Native 0,60 ve üzeri için oto bağlamayı devre dışı bırakın:

    • Her bir App Center paketindeki node_modules klasörü içinde react-native.config.js açın ve şu dependency.platforms.ios şekilde ayarlayın null :

    module.exports = {
      dependency: {
        platforms: {
          ios: null,
          ...
        }
      }
    };
    

14. App Center React Native eklentileri projelerinden React Native üst bilgileri bulmak için üst bilgi arama yollarını değiştirin:

    • Project gezginin göründüğünden emin olun (⌘ + 1).
    • adım 8 ' de kitaplıklar grubuna eklediğiniz her appcenter React Native eklentileri projesi için:
      • üst bilgi arama yolları bölümünde projeyi seçin ve derleme Ayarlar sekmesinde bir seçeneğe sahip üstbilgi dosyaları için yeni konumlar ekleyin recursive :${SRCROOT}/../../../ios/Pods/Headers

3,4 [yalnızca Android] yanıt verme yerel bağlantısı olmadan SDK 'yı 0,60 ' den daha düşük React Native için el ile tümleştirin

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

1. Android/Settings. Gradle dosyasını açın ve aşağıdaki satırları ekleyin. Projenizde istediğiniz bağımlılıkları ekleyin. Her SDK modülünün bu bölüme ayrı bir bağımlılık olarak eklenmesi gerekir. App Center analizlerini 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')
   

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

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

3. Uygulamanın Mainapplication. Java dosyasını, SDK 'nın başlangıç 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önteme AppCenter paketleri ekleyin List<ReactPackage> getPackages()

   @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)
     );
   }
   

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

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

5. Aşağıdaki içerikle ' de AppCenter-config. JSON adlı yeni bir dosya oluşturun android/app/src/main/assets/ ve bunu APP_SECRET_VALUE uygulamanızın gizli değeri ile değiştirin.

   {
       "app_secret": "APP_SECRET_VALUE"
   }
   

3,5 cihaz hakkında yanlış bilgi almayı önlemek için otomatik yedekleme kullanıyorsanız, sonraki adımları izleyin:

a. Android/App/src/Main/res/XML klasöründe appcenter_backup_rule.xml dosya oluşturun.

b. Projenin AndroidManifest.xml dosyasını açın. android:fullBackupContentÖzniteliğini <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 'Yı başlatın

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

4,1 uygulamanızı komut satırından oluşturma ve çalıştırma

İOS uygulamanızı aşağıdaki komutla oluşturup başlatabilirsiniz:

react-native run-ios

Android uygulamanızı aşağıdaki komutla oluşturup başlatabilirsiniz:

react-native run-android

4,2 uygulamanızı Xcode veya Android Studio oluşturma ve çalıştırma

İOS için, projenizin ios/{appname}.xcworkspace veya ios/{appname}.xcodeproj dosyayı Xcode 'da açın ve buradan oluşturun.

Android için Android Studio 'de Android projenizi içeri aktarın ve buradan oluşturun.

Portalda SDK 'nın otomatik olarak topladığı analiz ve kilitlenme verilerini görselleştirmeye hazırsınız. Gerekli ek kurulum yok. App Center neler yapabileceğini öğrenmek için API kılavuzları ve izlenecek yollar için analiz ve kilitlenmeler bölümüne bakın.