Improve documentation for URLs configuration

docs/tutorials/application-client/android.md

@@ -39,16 +39,26 @@ The application will initiate as a native Android program. Once the application
 
 <div class="grid-container">
 
-<div class="grid-50"><p style="text-align: center;"><a class="glightbox" href="/assets/images/application-clients/join-android.png" data-type="image" data-width="100%" data-height="auto" data-desc-position="bottom"><img src="/assets/images/application-clients/join-android.png" loading="lazy" style="width: 50%;"/></a></p></div>
-
-<div class="grid-50"><p style="text-align: center;"><a class="glightbox" href="/assets/images/application-clients/room-android.png" data-type="image" data-width="100%" data-height="auto" data-desc-position="bottom"><img src="/assets/images/application-clients/room-android.png" loading="lazy" style="width: 50%;"/></a></p></div>
+<div class="grid-100"><p style="text-align: center;"><a class="glightbox" href="/assets/images/application-clients/configure-urls-android.png" data-type="image" data-width="100%" data-height="auto" data-desc-position="bottom"><img src="/assets/images/application-clients/configure-urls-android.png" loading="lazy" style="width: 25%;"/></a></p></div>
 
 </div>
 
+This screen allows you to configure the URLs of the application server and the LiveKit server. You need to set them up for requesting tokens to your application server and connecting to the LiveKit server.
+
 !!! info "Connecting real Android device to application server running in you local network"
 
     One advantage of [running OpenVidu locally](#run-openvidu-locally) is that you can test your application client in a real Android device and be able to reach the application server very easily without worrying about SSL certificates if they are both running in the same local network. For more information, see section [Accessing your app from other devices in your network](/openvidu-vs-livekit/#accessing-your-app-from-other-devices-in-your-network){target="_blank"}.
 
+Once you have configured the URLs, you can join a video call room by providing a room name and a user name. After joining the room, you will be able to see your own video and audio tracks, as well as the video and audio tracks of the other participants in the room.
+
+<div class="grid-container">
+
+<div class="grid-50"><p style="text-align: center;"><a class="glightbox" href="/assets/images/application-clients/join-android.png" data-type="image" data-width="100%" data-height="auto" data-desc-position="bottom"><img src="/assets/images/application-clients/join-android.png" loading="lazy" style="width: 50%;"/></a></p></div>
+
+<div class="grid-50"><p style="text-align: center;"><a class="glightbox" href="/assets/images/application-clients/room-android.png" data-type="image" data-width="100%" data-height="auto" data-desc-position="bottom"><img src="/assets/images/application-clients/room-android.png" loading="lazy" style="width: 50%;"/></a></p></div>
+
+</div>
+
 ## Understanding the code
 
 This Android project has been generated with Android Studio. You may come across various configuration files and other items that are not essential for this tutorial. Our focus will be on the key files located within the `app/src/main/java` directory:
@@ -140,14 +150,14 @@ private fun requestNeededPermissions(onHasPermissions: () -> Unit) {
 
 ### Configuring URLs
 
-The `Urls.kt` file defines an object that contains the following URLs:
+The `Urls.kt` file defines an object that contains the following URLs required for the application:
 
 -   `applicationServerUrl`: The URL of the application server. This variable is used to make requests to the server to obtain a token for joining the video call room.
 -   `livekitUrl`: The URL of the LiveKit server. This variable is used to connect to the LiveKit server and interact with the video call room.
 
-You should configure these variables with the correct URLs depending on your deployment. In case you are [running OpenVidu locally](#run-openvidu-locally), you can set the `applicationServerUrl` to [`https://xxx-yyy-zzz-www.openvidu-local.dev:6443`](https://xxx-yyy-zzz-www.openvidu-local.dev:5443){target="\_blank"} and the `livekitUrl` to [`wss://xxx-yyy-zzz-www.openvidu-local.dev:7443`](wss://xxx-yyy-zzz-www.openvidu-local.dev:5443){target="\_blank"}, where `xxx-yyy-zzz-www` part of the domain is the LAN private IP address of the machine running OpenVidu, with dashes (-) instead of dots (.).
+You should configure these URLs according to your deployment settings. In case you are [running OpenVidu locally](#run-openvidu-locally), you can set the `applicationServerUrl` to [`https://xxx-yyy-zzz-www.openvidu-local.dev:6443`](https://xxx-yyy-zzz-www.openvidu-local.dev:5443){target="\_blank"} and the `livekitUrl` to [`wss://xxx-yyy-zzz-www.openvidu-local.dev:7443`](wss://xxx-yyy-zzz-www.openvidu-local.dev:5443){target="\_blank"}, where `xxx-yyy-zzz-www` part of the domain is the LAN private IP address of the machine running OpenVidu, with dashes (-) instead of dots (.).
 
-If you leave them empty, the user will be prompted to enter the URLs when the application starts. This is done in the `ConfigureUrlsActivity.kt` file:
+If these URLs are left empty, the user will be prompted to enter the URLs when the application starts. This configuration is managed in the `ConfigureUrlsActivity.kt` file:
 
 <div class="grid-container">
 
@@ -157,7 +167,7 @@ If you leave them empty, the user will be prompted to enter the URLs when the ap
 
 When the user clicks the `Save` button, the `onSaveUrls()` method is called, which saves the URLs in the `Urls` object and finishes the activity, returning to the MainActivity:
 
-```kotlin title="<a href='https://github.com/OpenVidu/openvidu-livekit-tutorials/blob/master/application-client/openvidu-android/app/src/main/java/io/openvidu/android/ConfigureUrlsActivity.kt#L21-L32' target='_blank'>ConfigureUrlsActivity.kt</a>" linenums="21"
+```kotlin title="<a href='https://github.com/OpenVidu/openvidu-livekit-tutorials/blob/master/application-client/openvidu-android/app/src/main/java/io/openvidu/android/ConfigureUrlsActivity.kt#L24-L35' target='_blank'>ConfigureUrlsActivity.kt</a>" linenums="24"
 private fun onSaveUrls() {
     val serverUrl = binding.serverUrl.text.toString()
     val livekitUrl = binding.livekitUrl.text.toString()

docs/tutorials/application-client/angular.md

@@ -85,8 +85,8 @@ type TrackInfo = { // (1)!
     participantIdentity: string;
 };
 
-// For local development, leave these variables empty
-// For production, configure them with correct URLs depending on your deployment
+// When running OpenVidu locally, leave these variables empty
+// For other deployment type, configure them with correct URLs depending on your deployment
 var APPLICATION_SERVER_URL = ''; // (2)!
 var LIVEKIT_URL = ''; // (3)!
 
@@ -112,7 +112,7 @@ export class AppComponent implements OnDestroy {
     }
 
     configureUrls() {
-        // If APPLICATION_SERVER_URL is not configured, use default value from local development
+        // If APPLICATION_SERVER_URL is not configured, use default value from OpenVidu Local deployment
         if (!APPLICATION_SERVER_URL) {
             if (window.location.hostname === 'localhost') {
                 APPLICATION_SERVER_URL = 'http://localhost:6080/';
@@ -121,7 +121,7 @@ export class AppComponent implements OnDestroy {
             }
         }
 
-        // If LIVEKIT_URL is not configured, use default value from local development
+        // If LIVEKIT_URL is not configured, use default value from OpenVidu Local deployment
         if (!LIVEKIT_URL) {
             if (window.location.hostname === 'localhost') {
                 LIVEKIT_URL = 'ws://localhost:7880/';

docs/tutorials/application-client/ionic.md

@@ -113,6 +113,16 @@ To run the client application tutorial, you need [Node](https://nodejs.org/en/do
 
         <div class="grid-container">
 
+        <div class="grid-100"><p style="text-align: center;"><a class="glightbox" href="/assets/images/application-clients/configure-urls-ionic.png" data-type="image" data-width="100%" data-height="auto" data-desc-position="bottom"><img src="/assets/images/application-clients/configure-urls-ionic.png" loading="lazy" style="width: 25%;"/></a></p></div>
+
+        </div>
+
+        This screen allows you to configure the URLs of the application server and the LiveKit server. You need to set them up for requesting tokens to your application server and connecting to the LiveKit server.
+
+        Once you have configured the URLs, you can join a video call room by providing a room name and a user name. After joining the room, you will be able to see your own video and audio tracks, as well as the video and audio tracks of the other participants in the room.
+
+        <div class="grid-container">
+
         <div class="grid-50"><p style="text-align: center;"><a class="glightbox" href="/assets/images/application-clients/join-ionic-device.png" data-type="image" data-width="100%" data-height="auto" data-desc-position="bottom"><img src="/assets/images/application-clients/join-ionic-device.png" loading="lazy" style="width: 50%;"/></a></p></div>
 
         <div class="grid-50"><p style="text-align: center;"><a class="glightbox" href="/assets/images/application-clients/room-ionic-device.png" data-type="image" data-width="100%" data-height="auto" data-desc-position="bottom"><img src="/assets/images/application-clients/room-ionic-device.png" loading="lazy" style="width: 50%;"/></a></p></div>
@@ -143,8 +153,8 @@ type TrackInfo = { // (1)!
     participantIdentity: string;
 };
 
-// For local development launching app in web browser, leave these variables empty
-// For production or when launching app in a mobile device, configure them with correct URLs
+// When running OpenVidu locally and launching app in web browser, leave these variables empty
+// For other deployment type or when launching app in a mobile device, configure them with correct URLs
 // If you leave them empty when launching app in a mobile device, the user will be prompted to enter the URLs
 var APPLICATION_SERVER_URL = ''; // (2)!
 var LIVEKIT_URL = ''; // (3)!
@@ -179,8 +189,8 @@ export class AppComponent implements OnDestroy {
     });
 
     urlsForm = new FormGroup({ // (6)!
-        serverUrl: new FormControl('', Validators.required),
-        livekitUrl: new FormControl('', Validators.required),
+        serverUrl: new FormControl(APPLICATION_SERVER_URL, Validators.required),
+        livekitUrl: new FormControl(LIVEKIT_URL, Validators.required),
     });
 
     room = signal<Room | undefined>(undefined); // (7)!
@@ -209,7 +219,7 @@ export class AppComponent implements OnDestroy {
             }
         } else {
             // If APPLICATION_SERVER_URL is not configured and app is not launched in a mobile device,
-            // use default value from local development
+            // use default value from OpenVidu Local deployment
             if (!APPLICATION_SERVER_URL) {
                 if (window.location.hostname === 'localhost') {
                     APPLICATION_SERVER_URL = 'http://localhost:6080/';
@@ -219,7 +229,7 @@ export class AppComponent implements OnDestroy {
             }
 
             // If LIVEKIT_URL is not configured and app is not launched in a mobile device,
-            // use default value from local development
+            // use default value from OpenVidu Local deployment
             if (!LIVEKIT_URL) {
                 if (window.location.hostname === 'localhost') {
                     LIVEKIT_URL = 'ws://localhost:7880/';
@@ -257,9 +267,9 @@ The `app.component.ts` file defines the following variables:
 
 ### Configuring URLs
 
-For local development launching the app in a web browser, leave `APPLICATION_SERVER_URL` and `LIVEKIT_URL` variables empty. The function `configureUrls()` will automatically configure them with default values. However, for production or when launching the app in a mobile device, you should configure these variables with the correct URLs depending on your deployment.
+When [running OpenVidu locally](#run-openvidu-locally) and launching the app in a web browser, leave `APPLICATION_SERVER_URL` and `LIVEKIT_URL` variables empty. The function `configureUrls()` will automatically configure them with default values. However, for other deployment type or when launching the app in a mobile device, you should configure these variables with the correct URLs depending on your deployment.
 
-In case you are [running OpenVidu locally](#run-openvidu-locally), you can set the `applicationServerUrl` to [`https://xxx-yyy-zzz-www.openvidu-local.dev:6443`](https://xxx-yyy-zzz-www.openvidu-local.dev:5443){target="\_blank"} and the `livekitUrl` to [`wss://xxx-yyy-zzz-www.openvidu-local.dev:7443`](wss://xxx-yyy-zzz-www.openvidu-local.dev:5443){target="\_blank"}, where `xxx-yyy-zzz-www` part of the domain is the LAN private IP address of the machine running OpenVidu, with dashes (-) instead of dots (.).
+In case you are [running OpenVidu locally](#run-openvidu-locally) and launching the app in a mobile device, you can set the `applicationServerUrl` to [`https://xxx-yyy-zzz-www.openvidu-local.dev:6443`](https://xxx-yyy-zzz-www.openvidu-local.dev:5443){target="\_blank"} and the `livekitUrl` to [`wss://xxx-yyy-zzz-www.openvidu-local.dev:7443`](wss://xxx-yyy-zzz-www.openvidu-local.dev:5443){target="\_blank"}, where `xxx-yyy-zzz-www` part of the domain is the LAN private IP address of the machine running OpenVidu, with dashes (-) instead of dots (.).
 
 If you leave them empty and app is launched in a mobile device, the user will be prompted to enter the URLs when the application starts:
 

docs/tutorials/application-client/javascript.md

@@ -78,8 +78,8 @@ Then, you can use the `LivekitClient` object in your JavaScript code by referenc
 Now let's see the code of the `app.js` file:
 
 ```javascript title="<a href='https://github.com/OpenVidu/openvidu-livekit-tutorials/blob/master/application-client/openvidu-js/src/app.js#L1-L28' target='_blank'>app.js</a>" linenums="1"
-// For local development, leave these variables empty
-// For production, configure them with correct URLs depending on your deployment
+// When running OpenVidu locally, leave these variables empty
+// For other deployment type, configure them with correct URLs depending on your deployment
 var APPLICATION_SERVER_URL = ""; // (1)!
 var LIVEKIT_URL = ""; // (2)!
 configureUrls();
@@ -88,7 +88,7 @@ const LivekitClient = window.LivekitClient; // (3)!
 var room; // (4)!
 
 function configureUrls() {
-    // If APPLICATION_SERVER_URL is not configured, use default value from local development
+    // If APPLICATION_SERVER_URL is not configured, use default value from OpenVidu Local deployment
     if (!APPLICATION_SERVER_URL) {
         if (window.location.hostname === "localhost") {
             APPLICATION_SERVER_URL = "http://localhost:6080/";
@@ -97,7 +97,7 @@ function configureUrls() {
         }
     }
 
-    // If LIVEKIT_URL is not configured, use default value from local development
+    // If LIVEKIT_URL is not configured, use default value from OpenVidu Local deployment
     if (!LIVEKIT_URL) {
         if (window.location.hostname === "localhost") {
             LIVEKIT_URL = "ws://localhost:7880/";

docs/tutorials/application-client/react.md

@@ -84,14 +84,14 @@ type TrackInfo = { // (1)!
     participantIdentity: string;
 };
 
-// For local development, leave these variables empty
-// For production, configure them with correct URLs depending on your deployment
+// When running OpenVidu locally, leave these variables empty
+// For other deployment type, configure them with correct URLs depending on your deployment
 let APPLICATION_SERVER_URL = ""; // (2)!
 let LIVEKIT_URL = ""; // (3)!
 configureUrls();
 
 function configureUrls() {
-    // If APPLICATION_SERVER_URL is not configured, use default value from local development
+    // If APPLICATION_SERVER_URL is not configured, use default value from OpenVidu Local deployment
     if (!APPLICATION_SERVER_URL) {
         if (window.location.hostname === "localhost") {
             APPLICATION_SERVER_URL = "http://localhost:6080/";
@@ -100,7 +100,7 @@ function configureUrls() {
         }
     }
 
-    // If LIVEKIT_URL is not configured, use default value from local development
+    // If LIVEKIT_URL is not configured, use default value from OpenVidu Local deployment
     if (!LIVEKIT_URL) {
         if (window.location.hostname === "localhost") {
             LIVEKIT_URL = "ws://localhost:7880/";

docs/tutorials/application-client/vue.md

@@ -85,14 +85,14 @@ type TrackInfo = {
     participantIdentity: string;
 };
 
-// For local development, leave these variables empty
-// For production, configure them with correct URLs depending on your deployment
+// When running OpenVidu locally, leave these variables empty
+// For other deployment type, configure them with correct URLs depending on your deployment
 let APPLICATION_SERVER_URL = ""; // (2)!
 let LIVEKIT_URL = ""; // (3)!
 configureUrls();
 
 function configureUrls() {
-    // If APPLICATION_SERVER_URL is not configured, use default value from local development
+    // If APPLICATION_SERVER_URL is not configured, use default value from OpenVidu Local deployment
     if (!APPLICATION_SERVER_URL) {
         if (window.location.hostname === "localhost") {
             APPLICATION_SERVER_URL = "http://localhost:6080/";
@@ -101,7 +101,7 @@ function configureUrls() {
         }
     }
 
-    // If LIVEKIT_URL is not configured, use default value from local development
+    // If LIVEKIT_URL is not configured, use default value from OpenVidu Local deployment
     if (!LIVEKIT_URL) {
         if (window.location.hostname === "localhost") {
             LIVEKIT_URL = "ws://localhost:7880/";

docs/tutorials/shared/configure-urls.md

@@ -1,3 +1,3 @@
 !!! warning "Configure the URLs"
 
-	For local development, leave `APPLICATION_SERVER_URL` and `LIVEKIT_URL` variables empty. The function `configureUrls()` will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.
+	When [running OpenVidu locally](#run-openvidu-locally), leave `APPLICATION_SERVER_URL` and `LIVEKIT_URL` variables empty. The function `configureUrls()` will automatically configure them with default values. However, for other deployment type, you should configure these variables with the correct URLs depending on your deployment.

mkdocs.yml

@@ -14,8 +14,8 @@ nav:
       - Vue: tutorials/application-client/vue.md
       - Electron: tutorials/application-client/electron.md
       - Ionic: tutorials/application-client/ionic.md
-      - iOS: tutorials/application-client/ios.md
       - Android: tutorials/application-client/android.md
+      - iOS: tutorials/application-client/ios.md
   - Application Server:
       - tutorials/application-server/index.md
       - Node.js: tutorials/application-server/node.md