Create Remote Config quickstart in Compose (#1450)

* Added compose

Added compose as an option to use Firebase

* Added Firebase Config

Added Firebase Config functionality

* Added initial PR changes

Added initial PR changes that Rosário  had mentioned.

* Updated MainAppView

Combined the text and button into the parent composable function

* move Firebase logic to RemoteConfigViewModel

* Updated imports

Updated the MainComposeActivity.kt to remove the wildcard imports and replaced with the appropriate ones

* Corrected exceeded max line length error

Corrected exceeded max line length error by putting the comment under the code. Corrected build.gradle code to have proper syntax

* Updated MainComposeAcitvity.kt

Updated MainComposeAcitvity.kt to correct lint error

* create RemoteConfigViewModel.Factory to inject VM dependencies

A couples of things happened here:
- Renamed `fetchConfig()` to `fetchRemoteConfig()`
- Created ViewModel Factory to help inject VM dependencies
- Moved FirebaseRemoteConfig initialization to the ViewModel (The UI now calls these methods when the screen is created, through a DisposableEffect)
- The default value from the XML file is now shown when the screen is first shown

* use the same ViewModel in the Kotlin+XML Activity

* use Coroutines to fetch remote config instead of OnCompleteListener

* add all caps and loading phrase parameters

* delete snippets from java MainActivity

* chore: update ktlint version

* Updated MainComposeActivity

Restructured the UI by implementing Scaffold

* Added right imports

Added scaffold and fillMaxWidth imports. Currently having issues with the Scaffold and the experimental wanting it to use wildcard statements

* Migrated from Material 3 to Material 2

Migrated the code from Material 3 to 2. Also updated Gradle file to use Compose 1.3

* Added snackbar

Added snackbar when config button is pressed.

* androidx.compose.material.Text --> Text

---------

Co-authored-by: rosariopf <[email protected]>

Author: millandavid

build.gradle

@@ -60,7 +60,11 @@ configurations {
 }
 
 dependencies {
-    ktlint "com.github.shyiko:ktlint:0.31.0"
+    ktlint ("com.pinterest:ktlint:0.48.2") {
+        attributes {
+            attribute(Bundling.BUNDLING_ATTRIBUTE, getObjects().named(Bundling, Bundling.EXTERNAL))
+        }
+    }
 }
 
 task("ktlint", type: JavaExec, group: "verification") {
@@ -75,7 +79,7 @@ task("ktlint", type: JavaExec, group: "verification") {
 
     description = "Check Kotlin code style."
     classpath = configurations.ktlint
-    main = "com.github.shyiko.ktlint.Main"
+    mainClass.set("com.pinterest.ktlint.Main")
     args = [
         "--format",
         "--android",

config/app/build.gradle

@@ -12,23 +12,42 @@ android {
 
     defaultConfig {
         applicationId "com.google.samples.quickstart.config"
-        minSdkVersion 19
+        minSdkVersion 21
         targetSdkVersion 33
         versionCode 1
         versionName "1.0"
 
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+        vectorDrawables {
+            useSupportLibrary = true
+        }
     }
 
     buildTypes {
         release {
-            minifyEnabled true
+            minifyEnabled = true
             proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
         }
     }
 
     buildFeatures {
         viewBinding = true
+        compose = true
+    }
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+    kotlinOptions {
+        jvmTarget = '1.8'
+    }
+    composeOptions {
+        kotlinCompilerExtensionVersion '1.3.2'
+    }
+    packagingOptions {
+        resources {
+            excludes += '/META-INF/{AL2.0,LGPL2.1}'
+        }
     }
 }
 
@@ -37,6 +56,7 @@ dependencies {
     implementation project(":internal:chooserx")
 
     implementation 'com.google.android.material:material:1.7.0'
+    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1'
 
     // Import the Firebase BoM (see: https://firebase.google.com/docs/android/learn-more#bom)
     implementation platform('com.google.firebase:firebase-bom:31.1.0')
@@ -50,9 +70,21 @@ dependencies {
     // For an optimal experience using Remote Config, add the Firebase SDK
     // for Google Analytics. This is recommended, but not required.
     implementation 'com.google.firebase:firebase-analytics'
+    implementation 'androidx.compose.material:material:1.3.1'
+
+    debugImplementation "androidx.fragment:fragment-testing:1.5.4"
+    // Jetpack Compose
+    implementation "androidx.compose.ui:ui:$compose_version"
+    implementation "androidx.compose.material:material:$compose_version"
+    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
+    implementation 'androidx.activity:activity-compose:1.5.1'
+    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'
+    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
 
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.0'
-    androidTestImplementation 'androidx.test:rules:1.5.0'
-    androidTestImplementation 'androidx.test:runner:1.5.1'
-    androidTestImplementation 'androidx.test.ext:junit:1.1.4'
+    androidTestImplementation 'androidx.test:rules:1.4.0'
+    androidTestImplementation 'androidx.test:runner:1.4.0'
+    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
+    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
+    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"
 }

config/app/src/main/AndroidManifest.xml

@@ -5,20 +5,23 @@
         android:allowBackup="true"
         android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"
-        android:theme="@style/AppTheme" >
-
+        android:theme="@style/AppTheme">
+        <activity
+            android:name=".kotlin.MainComposeActivity"
+            android:exported="false"
+            android:label="@string/app_name"
+            android:theme="@style/AppTheme">
+        </activity>
         <activity
             android:name=".java.MainActivity"
             android:label="@string/app_name" />
-
         <activity
             android:name=".kotlin.MainActivity"
             android:label="@string/app_name" />
-
         <activity
             android:name=".EntryChoiceActivity"
-            android:label="@string/app_name"
-            android:exported="true">
+            android:exported="true"
+            android:label="@string/app_name">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
 
@@ -27,4 +30,4 @@
         </activity>
     </application>
 
-</manifest>
+</manifest>

config/app/src/main/java/com/google/samples/quickstart/config/EntryChoiceActivity.kt

@@ -8,18 +8,30 @@ class EntryChoiceActivity : BaseEntryChoiceActivity() {
 
     override fun getChoices(): List<Choice> {
         return listOf(
-                Choice(
-                        "Java",
-                        "Run the Firebase Remote Config quickstart written in Java.",
-                        Intent(
-                            this,
-                            com.google.samples.quickstart.config.java.MainActivity::class.java)),
-                Choice(
-                        "Kotlin",
-                        "Run the Firebase Remote Config quickstart written in Kotlin.",
-                        Intent(
-                            this,
-                            com.google.samples.quickstart.config.kotlin.MainActivity::class.java))
+            Choice(
+                "Java",
+                "Run the Firebase Remote Config quickstart written in Java.",
+                Intent(
+                    this,
+                    com.google.samples.quickstart.config.java.MainActivity::class.java
+                )
+            ),
+            Choice(
+                "Kotlin",
+                "Run the Firebase Remote Config quickstart written in Kotlin.",
+                Intent(
+                    this,
+                    com.google.samples.quickstart.config.kotlin.MainActivity::class.java
+                )
+            ),
+            Choice(
+                "Compose",
+                "Run the Firebase Remote Config quickstart written in Compose.",
+                Intent(
+                    this,
+                    com.google.samples.quickstart.config.kotlin.MainComposeActivity::class.java
+                )
+            )
         )
     }
 }

config/app/src/main/java/com/google/samples/quickstart/config/java/MainActivity.java

@@ -65,27 +65,21 @@ public void onClick(View v) {
         });
 
         // Get Remote Config instance.
-        // [START get_remote_config_instance]
         mFirebaseRemoteConfig = FirebaseRemoteConfig.getInstance();
-        // [END get_remote_config_instance]
 
         // Create a Remote Config Setting to enable developer mode, which you can use to increase
         // the number of fetches available per hour during development. Also use Remote Config
         // Setting to set the minimum fetch interval.
-        // [START enable_dev_mode]
         FirebaseRemoteConfigSettings configSettings = new FirebaseRemoteConfigSettings.Builder()
                 .setMinimumFetchIntervalInSeconds(3600)
                 .build();
         mFirebaseRemoteConfig.setConfigSettingsAsync(configSettings);
-        // [END enable_dev_mode]
 
         // Set default Remote Config parameter values. An app uses the in-app default values, and
         // when you need to adjust those defaults, you set an updated value for only the values you
         // want to change in the Firebase console. See Best Practices in the README for more
         // information.
-        // [START set_default_values]
         mFirebaseRemoteConfig.setDefaultsAsync(R.xml.remote_config_defaults);
-        // [END set_default_values]
 
         fetchWelcome();
     }
@@ -96,7 +90,6 @@ public void onClick(View v) {
     private void fetchWelcome() {
         mWelcomeTextView.setText(mFirebaseRemoteConfig.getString(LOADING_PHRASE_CONFIG_KEY));
 
-        // [START fetch_config_with_callback]
         mFirebaseRemoteConfig.fetchAndActivate()
                 .addOnCompleteListener(this, new OnCompleteListener<Boolean>() {
                     @Override
@@ -114,24 +107,19 @@ public void onComplete(@NonNull Task<Boolean> task) {
                         displayWelcomeMessage();
                     }
                 });
-        // [END fetch_config_with_callback]
     }
 
     /**
      * Display a welcome message in all caps if welcome_message_caps is set to true. Otherwise,
      * display a welcome message as fetched from welcome_message.
      */
-     // [START display_welcome_message]
     private void displayWelcomeMessage() {
-        // [START get_config_values]
         String welcomeMessage = mFirebaseRemoteConfig.getString(WELCOME_MESSAGE_KEY);
-        // [END get_config_values]
         if (mFirebaseRemoteConfig.getBoolean(WELCOME_MESSAGE_CAPS_KEY)) {
             mWelcomeTextView.setAllCaps(true);
         } else {
             mWelcomeTextView.setAllCaps(false);
         }
         mWelcomeTextView.setText(welcomeMessage);
     }
-    // [END display_welcome_message]
 }

config/app/src/main/java/com/google/samples/quickstart/config/kotlin/MainActivity.kt

@@ -1,99 +1,38 @@
 package com.google.samples.quickstart.config.kotlin
 
 import android.os.Bundle
-import android.util.Log
-import android.widget.Toast
+import androidx.activity.viewModels
 import androidx.appcompat.app.AppCompatActivity
-import com.google.firebase.ktx.Firebase
-import com.google.firebase.remoteconfig.FirebaseRemoteConfig
-import com.google.firebase.remoteconfig.ktx.get
-import com.google.firebase.remoteconfig.ktx.remoteConfig
-import com.google.firebase.remoteconfig.ktx.remoteConfigSettings
+import androidx.lifecycle.lifecycleScope
 import com.google.samples.quickstart.config.R
 import com.google.samples.quickstart.config.databinding.ActivityMainBinding
+import kotlinx.coroutines.launch
 
 class MainActivity : AppCompatActivity() {
-
-    private lateinit var remoteConfig: FirebaseRemoteConfig
     private lateinit var binding: ActivityMainBinding
+    private val viewModel: RemoteConfigViewModel by viewModels { RemoteConfigViewModel.Factory }
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         binding = ActivityMainBinding.inflate(layoutInflater)
         setContentView(binding.root)
 
-        binding.fetchButton.setOnClickListener { fetchWelcome() }
-
-        // Get Remote Config instance.
-        // [START get_remote_config_instance]
-        remoteConfig = Firebase.remoteConfig
-        // [END get_remote_config_instance]
+        binding.fetchButton.setOnClickListener { viewModel.fetchRemoteConfig() }
 
-        // Create a Remote Config Setting to enable developer mode, which you can use to increase
-        // the number of fetches available per hour during development. Also use Remote Config
-        // Setting to set the minimum fetch interval.
-        // [START enable_dev_mode]
-        val configSettings = remoteConfigSettings {
-            minimumFetchIntervalInSeconds = 3600
-        }
-        remoteConfig.setConfigSettingsAsync(configSettings)
-        // [END enable_dev_mode]
+        viewModel.enableDeveloperMode()
 
-        // Set default Remote Config parameter values. An app uses the in-app default values, and
-        // when you need to adjust those defaults, you set an updated value for only the values you
-        // want to change in the Firebase console. See Best Practices in the README for more
-        // information.
-        // [START set_default_values]
-        remoteConfig.setDefaultsAsync(R.xml.remote_config_defaults)
-        // [END set_default_values]
+        viewModel.setDefaultValues(R.xml.remote_config_defaults)
 
-        fetchWelcome()
-    }
-
-    /**
-     * Fetch a welcome message from the Remote Config service, and then activate it.
-     */
-    private fun fetchWelcome() {
-        binding.welcomeTextView.text = remoteConfig[LOADING_PHRASE_CONFIG_KEY].asString()
-
-        // [START fetch_config_with_callback]
-        remoteConfig.fetchAndActivate()
-                .addOnCompleteListener(this) { task ->
-                    if (task.isSuccessful) {
-                        val updated = task.result
-                        Log.d(TAG, "Config params updated: $updated")
-                        Toast.makeText(this, "Fetch and activate succeeded",
-                                Toast.LENGTH_SHORT).show()
-                    } else {
-                        Toast.makeText(this, "Fetch failed",
-                                Toast.LENGTH_SHORT).show()
-                    }
-                    displayWelcomeMessage()
-                }
-        // [END fetch_config_with_callback]
-    }
-
-    /**
-     * Display a welcome message in all caps if welcome_message_caps is set to true. Otherwise,
-     * display a welcome message as fetched from welcome_message.
-     */
-    // [START display_welcome_message]
-    private fun displayWelcomeMessage() {
-        // [START get_config_values]
-        val welcomeMessage = remoteConfig[WELCOME_MESSAGE_KEY].asString()
-        // [END get_config_values]
-        binding.welcomeTextView.isAllCaps = remoteConfig[WELCOME_MESSAGE_CAPS_KEY].asBoolean()
-        binding.welcomeTextView.text = welcomeMessage
-    }
-
-    companion object {
-
-        private const val TAG = "MainActivity"
+        lifecycleScope.launch {
+            viewModel.welcomeMessage.collect { welcomeMessage ->
+                binding.welcomeTextView.text = welcomeMessage
+            }
+        }
 
-        // Remote Config keys
-        private const val LOADING_PHRASE_CONFIG_KEY = "loading_phrase"
-        private const val WELCOME_MESSAGE_KEY = "welcome_message"
-        private const val WELCOME_MESSAGE_CAPS_KEY = "welcome_message_caps"
+        lifecycleScope.launch {
+            viewModel.allCaps.collect { isWelcomeAllCaps ->
+                binding.welcomeTextView.isAllCaps = isWelcomeAllCaps
+            }
+        }
     }
-    // [END display_welcome_message]
 }