feat(onboarding): Android snippet (#8281)

frontend/src/component/onboarding/dialog/SdkConnected.tsx

@@ -19,7 +19,6 @@ const SpacedContainer = styled('div')(({ theme }) => ({
 interface ISdkConnectedProps {
     sdk: Sdk;
 }
-
 export const SdkConnected: FC<ISdkConnectedProps> = ({ sdk }) => {
     const { uiConfig } = useUiConfig();
 
@@ -42,30 +41,31 @@ export const SdkConnected: FC<ISdkConnectedProps> = ({ sdk }) => {
                 <Stepper active={2} steps={3} />
                 <Badge color='secondary'>3/3 - Test connection</Badge>
             </StepperBox>
-            <Box sx={{ mt: 2 }}>
-                <SectionHeader>Production settings</SectionHeader>
-                <Typography variant='body2'>
-                    We updated the Unleash code snippet to be production-ready.
-                    We recommend applying the following new settings to avoid
-                    exposing the API key and to follow best practices.
-                </Typography>
-                <Markdown components={{ code: CodeRenderer }}>
-                    {productionSnippet}
-                </Markdown>
-            </Box>
-            <Box>
-                <SectionHeader>Additional resources</SectionHeader>
-                <Typography variant='body2'>
-                    Now that we’ve validated the connection, you might want to
-                    look into more advanced use cases and examples:
-                </Typography>
-                <Markdown components={{ code: CodeRenderer }}>
-                    {otherResourcesSnippet}
-                </Markdown>
-            </Box>
+            {productionSnippet?.trim() ? (
+                <Box sx={{ mt: 2 }}>
+                    <SectionHeader>Production settings</SectionHeader>
+                    <Typography variant='body2'>
+                        In order to validate the connection, we changed some
+                        settings that you might want to revert. We recommend the
+                        following default settings.
+                    </Typography>
+                    <Markdown components={{ code: CodeRenderer }}>
+                        {productionSnippet}
+                    </Markdown>
+                </Box>
+            ) : null}
+            {otherResourcesSnippet?.trim() ? (
+                <Box>
+                    <SectionHeader>Additional resources</SectionHeader>
+                    <Typography variant='body2'>
+                        Now that we’ve validated the connection, you might want
+                        to look into more advanced use cases and examples:
+                    </Typography>
+                    <Markdown components={{ code: CodeRenderer }}>
+                        {otherResourcesSnippet}
+                    </Markdown>
+                </Box>
+            ) : null}
         </SpacedContainer>
     );
 };
-
-// Use a default export for lazy-loading
-export default SdkConnected;

frontend/src/component/onboarding/dialog/snippets/android.md

@@ -1,21 +1,65 @@
 1\. Install the SDK
-```gradle
-implementation("io.getunleash:unleash-android:\${unleash.sdk.version}")
 
-// Enable required permissions
+```gradle
+implementation("io.getunleash:unleash-android:1")
+```
+
+2\. Enable required [permissions](https://developer.android.com/guide/topics/manifest/uses-permission-element)
+
+```xml
 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 ```
 
-2\. Initialize Unleash
+2\. Initialize Unleash in your application
+
 ```kotlin
-val unleash = DefaultUnleash(
-    androidContext = applicationContext, // Reference to your Android application context
-    unleashConfig = UnleashConfig.newBuilder(appName = "unleash-onboarding-android")
-        .proxyUrl("<YOUR_API_URL>")
-        .clientKey("<YOUR_API_TOKEN>")
-        .pollingStrategy.interval(3000)
-        .metricsStrategy.interval(3000)
-        .build()
-)
+class MyApplication: Application() {
+    val unleash: Unleash by lazy {
+        val instance = DefaultUnleash(
+            androidContext = this,
+            unleashConfig = UnleashConfig.newBuilder(appName = "unleash-onboarding-android")
+                .proxyUrl("<YOUR_API_URL>")
+                .clientKey("<YOUR_API_TOKEN>")
+                .build()
+        )
+        instance.start()
+        instance
+    }
+
+    override fun onTerminate() {
+        super.onTerminate()
+        unleash.close()
+    }
+}
 ```
+
+3\. Check flag status
+
+```kotlin
+class MainActivity : ComponentActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        val unleashInstance = (application as MyApplication).unleash
+
+        setContent {
+            var flagStatus by remember { mutableStateOf("loading") }
+            LaunchedEffect(Unit) {
+                while (isActive) {
+                    val isFlagEnabled = unleashInstance.isEnabled("<YOUR_FLAG>")
+                    flagStatus = if (isFlagEnabled) "enabled" else "disabled"
+                    delay(3000L)
+                }
+            }
+
+            Text(text = "Flag is $flagStatus!")
+        }
+
+    }
+}
+```
+
+---
+---
+- [SDK repository with documentation and example](https://github.com/Unleash/unleash-android)
+- [Android SDK basic example](hhttps://github.com/Unleash/unleash-sdk-examples/tree/main/Android)

frontend/src/component/onboarding/dialog/snippets/nodejs.md

@@ -20,6 +20,10 @@ setInterval(() => {
 ```
 
 ---
+### Production settings
+
+In order to validate the connection, we changed some settings that you might want to revert. We recommend the following default settings.
+
 ```js
 const { initialize } = require('unleash-client');
 
@@ -31,6 +35,10 @@ const unleash = initialize({
 ```
 
 ---
+### Additional resources
+
+Now that we’ve validated the connection, you might want to look into more advanced use cases and examples:
+
 - [SDK repository with documentation](https://github.com/Unleash/unleash-client-node)
 - [Node.js SDK example with CodeSandbox](https://github.com/Unleash/unleash-sdk-examples/tree/main/NodeJS)
 - [Node.js SDK tutorial](https://dev.to/reeshee/how-to-implement-feature-flags-in-nodejs-using-unleash-3907)