chore(android-core): add quickstart page to restructured android-core…

… docs part of: MOB-1581
dyte-io · Apr 15, 2024 · 8b14ee4 · 8b14ee4
1 parent b6a4a61
commit 8b14ee4
Showing 1 changed file with 177 additions and 76 deletions.
diff --git a/docs/android-core-new/quickstart.mdx b/docs/android-core-new/quickstart.mdx
@@ -1,6 +1,6 @@
 ---
 tags:
-  - web-core
+  - android-core
   - quickstart
   - setup
 slug: /
@@ -9,132 +9,233 @@ sidebar_position: 2
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import { WebCoreCDNInstallation } from '@site/src/components/LatestInstallation';
+import { MavenLatestInstallation } from '@site/src/components/LatestInstallation';
 
 # Quickstart
 
 This quickstart shows how to use Dyte's core SDKs to add live video and audio to
-your JavaScript based applications.
+your Android applications.
+
+To get started quickly, you can use our sample code. You can clone and run a sample application from the Android Core samples, 
+available in both [Kotlin](https://github.com/dyte-io/android-samples/tree/main/samples/android-core-sample-kotlin) and [Java](https://github.com/dyte-io/android-samples/tree/main/samples/android-core-sample-java).
 
 ## Objective
 
 You'll learn how to:
 
-- Install the Dyte SDK
-- Initialize Dyte Client
-- Connect to the meeting
-- Go live!
+- [Install the Dyte SDK](#step-1-install-the-sdk)
+- [Initialize the SDK](#step-2-initialize-the-sdk)
+- [Configure a Dyte meeting](#step-3-configure-a-dyte-meeting)
+- [Initialize the Dyte meeting](#step-4-initialize-the-dyte-meeting)
+- [Go live with your Dyte meeting](#step-5-go-live-with-your-dyte-meeting)
 
 ## Before Getting Started
 
-- Make sure you've read the [Getting Started with Dyte](/getting-started) topic
-  and completed the following steps:
+Make sure you've read the [Getting Started with Dyte](/getting-started) topic and completed the following steps:
 
-  - Create a [Dyte Developer Account](https://dev.dyte.io/)
-  - Create a [Dyte Meeting](/api/?v=v2#/operations/create_meeting)
-  - [Add Participant](/api/?v=v2#/operations/add_participant) to the meeting
+- Create a [Dyte Developer Account](https://dev.dyte.io/)
+- Create a [Dyte Meeting](/api/?v=v2#/operations/create_meeting)
+- [Add Participant](/api/?v=v2#/operations/add_participant) to the meeting
+- Install [Android Studio](https://developer.android.com/studio)
 
 ## Step 1: Install the SDK
 
-You can install the package using CDN, npm or Yarn.
-
-<Tabs
-  groupId="node-pm"
-  defaultValue="npm"
-  values={[
-    { label: "npm", value: "npm" },
-    { label: "yarn", value: "yarn" },
-    { label: "CDN", value: "CDN" },
-  ]}
->
-  <TabItem value="npm">
-Install the SDK using npm.
-
-```shell
-npm install @dytesdk/web-core
+To install the SDK, add the `core-android` dependency to your app's `build.gradle` file:
+
+<MavenLatestInstallation pkg="core-android" />
+
+:::tip Note
+If your app targets lower versions of Android (Android API \<= 24), please enable core desugaring in your app's build.gradle file as follows.
+
+```
+android {
+  // other configurations
+  compileOptions {
+    // other configurations
+    isCoreLibraryDesugaringEnabled = true
+  }
+}
+
+dependencies {
+   // other dependencies
+   coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:2.0.4")
+}
 ```
 
-[![npm version](https://badge.fury.io/js/@dytesdk%2Fweb-core.svg)](https://badge.fury.io/js/@dytesdk%2Fweb-core)
+:::
+
+## Step 2: Initialize the SDK
+
+The `DyteMobileClient` is the main class of the SDK. It is the entry point and
+the only class required to initialize Dyte SDK.
+
+<Tabs groupId="android-core-quickstart">
+  <TabItem value="kotlin" label="Kotlin" default>
+
+```kotlin
+val dyteClient = DyteMeetingBuilder.build(activity)
+```
 
   </TabItem>
-  <TabItem value="yarn">
-Install the SDK using yarn.
 
-```shell
-yarn add @dytesdk/web-core
+  <TabItem value="java" label="Java">
+
+```java
+DyteMobileClient dyteClient = DyteMeetingBuilder.build(activity);
 ```
 
-[![npm version](https://badge.fury.io/js/@dytesdk%2Fweb-core.svg)](https://badge.fury.io/js/@dytesdk%2Fweb-core)
+  </TabItem>
+</Tabs>
+
+## Step 3: Configure a Dyte meeting
+
+Configure the following properties in the `DyteMeetingInfoV2` class. You must pass a valid participant `authToken` obtained from 
+the [Add Participant](/api/?v=v2#/operations/add_participant) API.
+
+| Name          | Description |
+|---------------|----------------------------------------------------------------------------------------|
+| `authToken`   | After you've created the meeting, add each participant to the meeting using the [Add Participant API](/api?v=v2#/operations/add_participant) The API response contains the `authToken`. |
+| `enableAudio` | Set whether to join the meeting with your Mic ON (`true`) or OFF (`false`). |
+| `enableVideo` | Set whether to join the meeting with your Camera ON (`true`) or OFF (`false`).|
+| `baseUrl`     | Base URL of the dyte's enviorment you have created the meeting on.|
+
+<Tabs groupId="android-core-quickstart">
+  <TabItem value="kotlin" label="Kotlin" default>
+
+```kotlin
+val meetingInfo =
+      DyteMeetingInfoV2(
+        authToken = AUTH_TOKEN,
+        enableAudio = true,
+        enableVideo = true,
+        baseUrl = "dyte.io"
+      )
+```
 
   </TabItem>
-  <TabItem value="CDN">
-Add the following script tag in the head of your HTML file.
-
-  <WebCoreCDNInstallation />
+
+  <TabItem value="java" label="Java">
+
+```java
+DyteMeetingInfoV2 meetingInfo = new DyteMeetingInfoV2(
+          MeetingConfig.AUTH_TOKEN, // auth_token
+          true,   // enableAudio
+          true,   // enableVideo
+          "dyte.io" // baseUrl
+          );
+```
+
   </TabItem>
 </Tabs>
 
-## Step 2: Initialize the SDK
+## Step 4: Initialize the Dyte meeting
 
-1. Initialize the Dyte client.
-2. Call the `init()` method and pass the authToken.
+To initialize the meeting, call the `init()` method on the `dyteClient` object with the `meetingInfo` argument. This establishes 
+a connection with the Dyte meeting server.
 
-|             |                                                                                                                                                                                   |
-| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `authToken` | After you've created the meeting, add each participant to the meeting using the [Add Participant API](/api#/operations/add_participant). The API response contains the authToken. |
+<Tabs groupId="android-core-quickstart">
+  <TabItem value="kotlin" label="Kotlin" default>
 
-```js
-const meeting = await DyteClient.init({
-  authToken,
-});
+```kotlin
+dyteClient.init(meetingInfo, {
+    // init complete
+  }, {
+    // init failed
+  }
+)
 ```
 
-## Step 3: Connect to the meeting
+  </TabItem>
+
+  <TabItem value="java" label="Java">
+
+```java
+dyteClient.init(meetingInfo, () -> {
+        // init complete
+        return null;
+      }, () -> {
+        // init failed
+        return null;
+      });
+```
 
-Now, you have established the connection with the Dyte meeting server
-successfully. Next step is to join the room.
+  </TabItem>
+</Tabs>
 
-### Join the room
+## Step 5: Go live with your Dyte meeting!
 
-To join the meeting room, call join() method on the DyteClient instance as
-shown below.
+Now, you have established the connection with the Dyte meeting server successfully. Next step is to join the room.
 
-```js
-await meeting.join();
-```
+### Join the room
 
-:::info
+To join the meeting room, call `joinRoom()` method on the `dyteClient` instance as shown below.
 
-Once the join room process completes roomJoined event is emitted on meeting.self
-namespace.
+<Tabs groupId="android-core-quickstart">
+  <TabItem value="kotlin" label="Kotlin" default>
 
-If you want to perform any actions, such as enabling audio, video, or starting
-and stopping recording, you can do so after the roomJoined event is fired.
+```kotlin
+dyteClient.joinRoom({
+    // join complete
+  }, {
+    // join failed
+  }
+)
+```
 
-For example:
+  </TabItem>
 
-```js
-meeting.self.on('roomJoined', () => {
-  console.log('User has joined the room', meeting.self.roomJoined);
-  // run my actions.
-});
+  <TabItem value="java" label="Java">
 
-await meeting.join();
+```java
+dyteClient.join(() -> {
+        // join complete
+        return null;
+      }, () -> {
+        // join failed
+        return null;
+      });
 ```
 
-:::
+  </TabItem>
+</Tabs>
 
 ### Leave the room
 
 Once the meeting is over, you can leave the meeting room.
 
-To leave the meeting room, call `leaveRoom()` method on the dyteClient as shown
-below.
+To leave the meeting room, call `leaveRoom()` method on the `dyteClient` as shown below.
+
+<Tabs groupId="android-core-quickstart">
+  <TabItem value="kotlin" label="Kotlin" default>
+
+```kotlin
+dyteClient.leaveRoom({
+  // leave completed
+}, {
+  // leave failed
+})
+```
 
-```js
-await meeting.leaveRoom();
+  </TabItem>
+  <TabItem value="java" label="Java">
+
+```java
+dyteClient.leave(() -> {
+        // leave complete
+        return null;
+      }, () -> {
+        // leave failed
+        return null;
+      });
 ```
 
+  </TabItem>
+</Tabs>
+
 <head>
-  <title>Web Core Quickstart</title>
-</head>
+  <title>Android Core Quickstart</title>
+  <meta
+    name="description"
+    content="Explore Dyte's Android Core documentation, focusing on core functionalities for building rich video chat applications on Android."
+  />
+</head>