Web'de Remote Config'i kullanmaya başlama

Uygulamanızda parametreleri tanımlamak ve buluttaki değerlerini güncellemek için Firebase Remote Config hizmetini kullanabilirsiniz. Böylece uygulama güncellemesi yayınlamadan uygulamanızın görünümünü ve davranışını değiştirebilirsiniz. Bu kılavuzda, başlangıç adımları açıklanmakta ve bazı örnek kodlar verilmektedir. Bu kodların tümü, firebase/quickstart-js GitHub deposundan klonlanabilir veya indirilebilir.

1. adım: Remote Config SDK'sını ekleyin ve başlatın

1. Henüz yapmadıysanız Firebase JS SDK'sını yükleyin ve Firebase'i başlatın.

2. Remote Config JS SDK'sını ekleyin ve Remote Config'yi başlatın:

import { initializeApp } from "firebase/app";
import { getRemoteConfig } from "firebase/remote-config";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Remote Config and get a reference to the service
const remoteConfig = getRemoteConfig(app);

import firebase from "firebase/compat/app";
import "firebase/compat/remote-config";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Remote Config and get a reference to the service
const remoteConfig = firebase.remoteConfig();

Bu nesne, uygulama içi varsayılan parametre değerlerini depolamak, güncellenmiş parametre değerlerini Remote Config arka ucundan almak ve alınan değerlerin uygulamanızda ne zaman kullanılabilir hale getirileceğini kontrol etmek için kullanılır.

2. adım: Minimum getirme aralığını ayarlayın

Geliştirme sırasında, nispeten düşük bir minimum getirme aralığı ayarlamanız önerilir. Daha fazla bilgi için Kısıtlama bölümüne bakın.

// The default and recommended production fetch interval for Remote Config is 12 hours
remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
rc_set_minimum_fetch_time.js

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
index.js

3. adım: Uygulama içi varsayılan parametre değerlerini ayarlama

Uygulama içi varsayılan parametre değerlerini Remote Config nesnesinde ayarlayabilirsiniz. Böylece uygulamanız, Remote Config arka ucuna bağlanmadan önce amaçlandığı gibi davranır ve arka uçta herhangi bir değer ayarlanmamışsa varsayılan değerler kullanılabilir.

remoteConfig.defaultConfig = {
  "welcome_message": "Welcome"
};
rc_set_default_values.js

remoteConfig.defaultConfig = {
  "welcome_message": "Welcome"
};
index.js

Remote Config arka uç parametre değerlerini zaten yapılandırdıysanız tüm varsayılan değerleri içeren oluşturulmuş bir JSON dosyasını indirip uygulama paketinize ekleyebilirsiniz:

curl --compressed -D headers -H "Authorization: Bearer token" -X GET https://firebaseremoteconfig.googleapis.com/v1/projects/my-project-id/remoteConfig:downloadDefaults?format=JSON -o remote_config_defaults.json

gcloud auth print-access-token

Aşağıdaki örneklerde, uygulamanızda varsayılan değerleri içe aktarmanın ve ayarlamanın iki farklı yolu gösterilmektedir. İlk örnekte, uygulama paketinizde bulunan varsayılanlar dosyasına HTTP isteği gönderecek olan fetch kullanılmaktadır:

  const rcDefaultsFile = await fetch('remote_config_defaults.json');
  const rcDefaultsJson = await rcDefaultsFile.json();
  remoteConfig.defaultConfig = rcDefaultsJson;
  

Bir sonraki örnekte, derleme sırasında değerleri uygulamanızda derleyen require kullanılmaktadır:

  let rcDefaults = require('./remote_config_defaults.json');
  remoteConfig.defaultConfig = rcDefaults;

4. adım: Uygulamanızda kullanmak için parametre değerleri edinin

Artık Remote Config nesnesinden parametre değerlerini alabilirsiniz. Daha sonra arka uçta değerler ayarlar, bunları getirir ve etkinleştirirseniz bu değerler uygulamanız tarafından kullanılabilir.Bu değerleri almak için parametre anahtarını bağımsız değişken olarak sağlayarak getValue() yöntemini çağırın.

import { getValue } from "firebase/remote-config";

const val = getValue(remoteConfig, "welcome_messsage");
rc_get_values.js

const val = remoteConfig.getValue("welcome_messsage");
index.js

5. adım: Parametre değerlerini ayarlayın

Firebase konsolunu veya Remote Config arka uç API'lerini kullanarak, istediğiniz koşullu mantığa veya kullanıcı hedeflemeye göre uygulama içi değerleri geçersiz kılan yeni sunucu tarafı varsayılan değerleri oluşturabilirsiniz. Bu bölümde, bu değerleri oluşturmak için Firebase konsolunda uygulamanız gereken adımlar açıklanmaktadır.

1. Firebase konsolunda DevOps ve Etkileşim > Remote Config > Parametreler sayfasına gidin.

2. Uygulamanızda tanımladığınız parametrelerle aynı adlara sahip parametreler tanımlayın. Her parametre için varsayılan bir değer (sonuçta uygulama içi varsayılan değeri geçersiz kılar) ve koşullu değerler ayarlayabilirsiniz. Daha fazla bilgi edinmek için Remote Config Parametreleri ve Koşulları başlıklı makaleyi inceleyin.

3. Özel sinyal koşulları kullanıyorsanız özellikleri ve değerlerini tanımlayın. Aşağıdaki örnekte, özel sinyal koşulunun nasıl tanımlanacağı gösterilmektedir.

     let customSignals = {
        "city": "Tokyo",
        "preferred_event_category": "sports"
     }
   
     setCustomSignals(config, customSignals);

6. adım: Değerleri getirin ve etkinleştirin

1. Remote Config arka ucundan parametre değerlerini getirmek için fetchConfig() yöntemini çağırın. Arka uçta ayarladığınız tüm değerler getirilerek Remote Config nesnesinde önbelleğe alınır.
2. Alınan parametre değerlerini uygulamanızda kullanılabilir hale getirmek için activate() yöntemini çağırın.

Değerleri tek bir çağrıda getirip etkinleştirmek istediğiniz durumlarda, bu örnekte gösterildiği gibi fetchAndActivate() kullanın:

import { fetchAndActivate } from "firebase/remote-config";

fetchAndActivate(remoteConfig)
  .then(() => {
    // ...
  })
  .catch((err) => {
    // ...
  });
rc_fetch_config_callback.js

remoteConfig.fetchAndActivate()
  .then(() => {
    // ...
  })
  .catch((err) => {
    // ...
  });
index.js

Bu güncellenmiş parametre değerleri uygulamanızın davranışını ve görünümünü etkilediğinden, getirilen değerleri kullanıcınız için sorunsuz bir deneyim sağlayacak bir zamanda (ör. kullanıcının uygulamanızı bir sonraki açışında) etkinleştirmeniz gerekir. Daha fazla bilgi ve örnek için Remote Config yükleme stratejileri başlıklı makaleyi inceleyin.

7. adım: Güncellemeleri anlık olarak dinleyin

Parametre değerlerini aldıktan sonra Remote Config arka ucundan gelen güncellemeleri dinlemek için gerçek zamanlı Remote Config özelliğini kullanabilirsiniz. Gerçek zamanlı Remote Config, güncellemeler kullanıma sunulduğunda bağlı cihazlara sinyal gönderir ve yeni bir Remote Config sürümü yayınladıktan sonra değişiklikleri otomatik olarak getirir.

1. Uygulamanızda, güncellemeleri dinlemeye başlamak ve yeni parametre değerlerini otomatik olarak almak için onConfigUpdate kullanın. Güncellenen yapılandırmayı etkinleştirmek için next geri çağırma işlevini uygulayın.

     onConfigUpdate(remoteConfig, {
        next: (configUpdate) => {
           console.log("Updated keys:", configUpdate.getUpdatedKeys());
           if (configUpdate.getUpdatedKeys().has("welcome_message")) {
              activate(remoteConfig).then(() => {
              showWelcomeMessage();
              });
           }
        },
        error: (error) => {
           console.log("Config update error:", error);
        },
        complete: () => {
           console.log("Listening stopped.");
        }
     });

2. Remote Config uygulamanızın yeni bir sürümünü yayınladığınızda, uygulamanızı çalıştıran ve değişiklikleri dinleyen cihazlar tamamlama işleyicisini çağırır.

Kısıtlama

Bir uygulama kısa bir süre içinde çok fazla getirme işlemi yaparsa getirme çağrıları kısıtlanabilir. Bu gibi durumlarda SDK, FETCH_THROTTLE hatası verir. Bu hatayı yakalamanız ve eksponansiyel geri yükleme modunda yeniden denemeniz, sonraki getirme istekleri arasında daha uzun aralıklar beklemeniz önerilir.

Uygulama geliştirme sırasında, uygulamanızı geliştirip test ederken hızlı bir şekilde yineleme yapabilmek için önbelleği çok sık (saatte birçok kez) yenilemek isteyebilirsiniz. Çok sayıda geliştiricinin yer aldığı bir projede hızlı yineleme yapabilmek için uygulamanıza geçici olarak düşük minimum getirme aralığına (Settings.minimumFetchIntervalMillis) sahip bir özellik ekleyebilirsiniz.

Remote Config için varsayılan ve önerilen üretim getirme aralığı 12 saattir. Bu, gerçekte kaç getirme çağrısı yapıldığına bakılmaksızın yapılandırmaların 12 saatlik bir zaman aralığında arka uçtan bir kereden fazla getirilmeyeceği anlamına gelir. Özellikle, minimum getirme aralığı aşağıdaki sırayla belirlenir:

1. Settings.minimumFetchIntervalMillis içindeki parametre.
2. Varsayılan değer 12 saattir.