Merge pull request #639 from aashay-gaikwad/add-execution-instructions

Add execution instructions

documentation/navigation/multiplatform.md

@@ -251,3 +251,164 @@ On [iOS](#ios), you can design a user interface element to enable back navigatio
 In the example mentioned earlier, we create a Composable component `BackButton` that includes an `ArrowBack` icon. 
 When this button is clicked, it triggers the back event through the `backEvents` `Channel`. 
 
+## Setting up the environment for execution
+
+Setting up the environment for execution
+
+{==
+
+**Warning**
+
+In order to launch the iOS target, you need a Mac with macOS to write and run iOS-specific code on simulated or real devices.
+
+This is an Apple requirement.
+
+The instructions here are tweaked and inspired from the [Compose-Multiplatform-iOS template](https://github.com/JetBrains/compose-multiplatform-ios-android-template).
+
+==}
+
+To work with this project, you need the following:
+
+* A machine running a recent version of macOS
+* [Xcode](https://apps.apple.com/us/app/xcode/id497799835)
+* [Android Studio](https://developer.android.com/studio)
+* [Kotlin Multiplatform Mobile plugin](https://plugins.jetbrains.com/plugin/14936-kotlin-multiplatform-mobile)
+* [CocoaPods dependency manager](https://kotlinlang.org/docs/native-cocoapods.html)
+
+### Check your environment
+
+Before you start, use the [KDoctor](https://github.com/Kotlin/kdoctor) tool to ensure that your development environment is configured correctly:
+
+1. Install KDoctor with [Homebrew](https://brew.sh/):
+
+    ```text
+    brew install kdoctor
+    ```
+
+2. Run KDoctor in your terminal:
+
+    ```text
+    kdoctor
+    ```
+
+   If everything is set up correctly, you'll see valid output:
+
+   ```text
+   Environment diagnose (to see all details, use -v option):
+   [✓] Operation System
+   [✓] Java
+   [✓] Android Studio
+   [✓] Xcode
+   [✓] Cocoapods
+
+   Conclusion:
+     ✓ Your system is ready for Kotlin Multiplatform Mobile development!
+   ```
+
+Otherwise, KDoctor will highlight which parts of your setup still need to be configured and will suggest a way to fix them.
+
+## The project structure
+
+Open the project in Android Studio and switch the view from **Android** to **Project** to see all the files and targets belonging to the project.
+The :demos module contains the sample target [appyx-navigation](https://bumble-tech.github.io/appyx/navigation/).
+
+This module follows the standard compose multiplatform project structure:
+
+### common
+
+This is a Kotlin module that contains the logic common for Android, Desktop, iOS and web applications, that is, the code you share between platforms.
+
+### android
+
+This is a Kotlin module that builds into an Android application. It uses Gradle as the build system.
+The `android` module depends on and uses the `common` module as a regular Android library.
+
+### desktop
+
+This module builds into a Desktop application.
+
+### ios
+
+This is an Xcode project that builds into an iOS application.
+The `:demos:appyx-navigation` module depends on and uses the `:demos:appyx-navigation:common` module as a CocoaPods dependency.
+
+### web
+
+This module builds into a Web app.
+
+## Run your application
+
+### On Android
+
+To run your application on an Android emulator:
+
+1. Ensure you have an Android virtual device available. Otherwise, [create one](https://developer.android.com/studio/run/managing-avds#createavd).
+2. In the list of run configurations, select `demos.appyx-navigation.android`.
+3. Choose your virtual/physical device and click **Run**.
+
+### On iOS
+
+#### Running on a simulator
+
+To run your application on an iOS simulator in Android Studio, modify the `iOS` run configuration:
+
+{==
+
+1. In the list of run configurations, select **Edit Configurations**:
+2. Navigate to **iOS Application** | **iosApp**.
+3. Select the desired `.xcworkspace` file under `XCode project file` which can be found in `/demos/appyx-navigation/iosApp/iosApp.xcworkspace`.
+4. Ensure `Xcode project scheme` is set to `iosApp`.
+5. In the **Execution target** list, select your target device. Click **OK**.
+6. The `iosApp` run configuration is now available. Click **Run** next to your virtual device.
+
+==}
+
+#### Running on a real device
+
+To run the Compose Multiplatform application on a real iOS device. You'll need the following:
+
+* The `TEAM_ID` associated with your [Apple ID](https://support.apple.com/en-us/HT204316)
+* The iOS device registered in Xcode
+
+##### Finding your Team ID
+
+In the terminal, run `kdoctor --team-ids` to find your Team ID.
+KDoctor will list all Team IDs currently configured on your system.
+
+To run the application, set the `TEAM_ID`:
+
+{==
+
+1. In the project, navigate to the `iosApp/Configuration/Config.xcconfig` file.
+2. Set your `TEAM_ID`.
+3. Re-open the project in Android Studio. It should show the registered iOS device in the `iosApp` run configuration.
+
+==}
+
+### On Desktop
+
+To run the application as a JVM target on desktop:
+
+{==
+
+1. In the list of run configurations, select **Edit Configurations**.
+2. Click **Add new configuration** and select **Gradle**.
+3. Set `run` configuration under `Run`.
+4. Select the desired target under `Gradle project` to be executed (for example: `appyx:demos:appyx-navigation:desktop`).
+5. The desktop configuration for the desired target is now available. Click **Run** to execute.
+
+==}
+
+### On Web
+
+To run the application on web:
+
+{==
+
+1. In the list of run configurations, select **Edit Configurations**.
+2. Click **Add new configuration** and select **Gradle**.
+3. Set `jsBrowserDevelopmentRun` under `Run`.
+4. Select the desired target under `Gradle project` to be executed (for example: `appyx:demos:appyx-navigation:web`).
+5. The web configuration for the desired target is now available. Click **Run** to execute.
+
+==}