# Get Started - Android

## Quick Start

TapTalk.io helps you to implement real-time chat with any type of your client app with speed and efficiency. Our Android SDK provides you with various methods to initialize, configure, and build the chat from the client-side - no server-side implementation is required because our reliable infra management service is delivered with the SDK. This page presents a brief overview of the SDK’s structure and abilities, then lets you go through the preliminary steps of implementing the SDK in your own app.

## Configure and Initialize TapTalk.io Android SDK

#### **Step 1: Create a new application from your dashboard**

**1.** Login to [TapTalk.io Dashboard](https://taptalk.io/), then choose **Development** -> **Apps**

![](https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MHKsq4vOlouRa03adbb%2F-MHKvQJYwokZj2SvRd6U%2F08a4ad0-Screenly_-_9.0_Development_-_Apps_-_Empty_State2x.png?alt=media\&token=6f629f44-d932-400f-984d-2fb1a1f0e408)

**2**. Click **New App** Button, input **App Name** and choose **Platform**, and then click **Create New App** Button.

![](https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MHKsq4vOlouRa03adbb%2F-MHKxC_cD1-kv3lPxiSk%2F58201a8-Screenly_-_9.1.0_Development_-_Apps_-_New_App_-_Empty_State2x.png?alt=media\&token=ab2fe069-a0b6-4d22-86d3-fdd8e51c235f)

![](https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MHKsq4vOlouRa03adbb%2F-MHKxGJV7RBtqLBu8UwT%2Ff2a1418-Screenly_-_9.1.1_Development_-_Apps_-_New_App_-_Filled2x.png?alt=media\&token=5b628aa3-05ec-47e9-98ef-dbc2c23de5bc)

**3.** A pop-up dialog will be shown with provided **App Key ID** & **App Key Secret**

![](https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MHKsq4vOlouRa03adbb%2F-MHKxQLyhxLOunGM05hx%2Ff869a40-Screenly_-_9.1.3_Development_-_Apps_-_New_App_-_Your_App_Key_-_Dismiss2x.png?alt=media\&token=b7bfb1cb-65ff-47e6-beda-69011f5addb8)

{% hint style="warning" %}
**Note:** Please remember to save your **App Key ID** & your **App Key Secret** because it will only be shown once and will be used in TapTalk.io initialization
{% endhint %}

#### Step 2: Install TapTalk.io SDK

To start, open your Android project and add the following repositories to your **top-level** build.gradle file.Project build.gradle

{% code title="build.gradle (project)" %}

```javascript
allprojects {
   repositories {
      ...
      maven { url "https://jitpack.io" }
      maven { url "https://s3.amazonaws.com/repo.commonsware.com" }
      jcenter()
   }
}
```

{% endcode %}

Then add the following dependency to your **app-level** build.gradle:

{% code title="build.gradle (:app)" %}

```javascript
dependencies {
    implementation 'com.github.taptalk-io:taptalk.io-android:2.18.3'
}
```

{% endcode %}

{% hint style="info" %}
You can check a more updated version release notes of the SDK [here](https://github.com/taptalk-io/taptalk.io-android/releases).
{% endhint %}

In the app build.gradle file, make sure that your project is using the supported Java version like below.

{% code title="build.gradle (:app)" %}

```javascript
android {
    
    ...

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_17
        targetCompatibility JavaVersion.VERSION_17
    }
}
```

{% endcode %}

#### Step 3: Initialize TapTalk.io in your Application class.

In order to use TapTalk.io, you must first initialize a TapTalk instance by passing the `APP_ID`, `APP_SECRET`, `APP_ICON`, `APP_BASE_URL`, and `IMPLEMENTATION_TYPE` assigned to your application to the `init` method as a parameter. Generally, initialization is implemented in the **Application** class in your project.

{% hint style="warning" %}
**Note:** To get **BASE\_URL** you can follow our documentation on [how to get Base URL](https://docs.taptalk.io/powertalk-chat-sdk-documentation/powertalk-server-api/base-url) on TapTalk.io
{% endhint %}

{% tabs %}
{% tab title="Java" %}

```java
import io.taptalk.TapTalk.Helper.TapTalk;
import io.taptalk.TapTalk.Listener.TapListener;
import io.taptalk.TapTalk.Model.TAPMessageModel;

public class MainApplication extends Application implements ReactApplication {

    ...

    @Override
    public void onCreate() {
        super.onCreate();
        
        ...
        
        TapTalk.init(
            CONTEXT, 
            APP_KEY_ID, 
            APP_KEY_SECRET,            
            APP_ICON, 
            APP_NAME, 
            APP_BASE_URL,            
            IMPLEMENTATION_TYPE, 
            new TapListener() {
                @Override
                public void onInitializationCompleted(String instanceKey) {
                    super.onInitializationCompleted(instanceKey);
                }

                @Override
                public void onTapTalkRefreshTokenExpired() {
                    super.onTapTalkRefreshTokenExpired();
                }

                @Override
                public void onTapTalkUnreadChatRoomBadgeCountUpdated(int unreadCount) {
                    super.onTapTalkUnreadChatRoomBadgeCountUpdated(unreadCount);
                }
            
                @Override
                public void onNotificationReceived(TAPMessageModel message) {
                    super.onNotificationReceived(message);
                }

                @Override
                public void onUserLogout() {
                    super.onUserLogout();
                }
            
                @Override
                public void onTaskRootChatRoomClosed(Activity activity) {
                    super.onTaskRootChatRoomClosed(activity);
                }
            }
        );
    }
    
    ...
    
}

```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
**Parameters**\
**CONTEXT**: (Context) application context\
**APP\_KEY\_ID**: (String) application key ID\
**APP\_KEY\_SECRET**: (String) application key Secret\
**APP\_ICON**: (int) drawable resource ID\
**APP\_NAME**: (String) your application name\
**APP\_BASE\_URL**: (String) base API URL\
**IMPLEMENTATION\_TYPE**: (enum) found in TapTalkImplentationType, more detailed information below\
**tapListener**: (TapListener) an interface to detect TapTalk Android SDK's delegates and callbacks
{% endhint %}

{% hint style="info" %}
**IMPLEMENTATION\_TYPE**\
TapTalkImplementationType consists of 3 types which are:\
\&#xNAN;**`TapTalkImplementationTypeUI`**: used for implementation with only TapUI\
\&#xNAN;**`TapTalkImplementationTypeCore`**: used for implementation with only TapCore\
\&#xNAN;**`TapTalkImplementationTypeCombine`**: used for implementation with both of TapCore and TapUI combined
{% endhint %}

{% hint style="info" %}
**Note**: In the [Event Listener](https://docs.taptalk.io/powertalk-chat-sdk-documentation/powertalk-android/event-listener) page, you can find detailed information on the usages of TapTalk Android SDK's delegates and callbacks.
{% endhint %}

#### Step 4: Enable Chat Features

Please follow the steps in [Enable Chat Features](https://docs.taptalk.io/powertalk-chat-sdk-documentation/powertalk-android/enable-chat-features) page to enable TapTalk.io's chat features, such as contact sync and sending media, document, and location messages.

#### Step 5: Authenticate to TapTalk.io

In order to use the abilities of the Android SDK in your client app, a TapTalk instance must be initiated in each client app through user authentication with TapTalk.io server. An authenticated user account allows the instance to communicate and interact with the server. To authenticate your user with the server, follow the instructions in [Authentication page](https://docs.taptalk.io/powertalk-chat-sdk-documentation/powertalk-android/authentication).

## Bridge to React Native

After [initialization ](#step-3-initialize-taptalk.io-in-your-application-class.)and [authentication ](#step-4-authenticate-to-taptalk.io)are completed, continue to the next step by creating an activity class to bridge React Native app to PowerTalk SDK.

#### Step 1: Create PowerTalkWrapper Activity in React Native project folder

Create a new Blank Activity in the android project folder *(android/app/src/main/java/com/yourprojectname/)* and name it as *PowerTalkWrapperActivity.java.* In this example, *w*e will use this activity's context to help the app open PowerTalk SDK's chat view, then close the activity afterwards. 

To open the view, you can simply use the `openRoomList()` method in the **TapUI** class. Creating a user interface won't be necessary, because TapTalk.io have provided an integrated user interface to be used in your application. To use TapTalk.io's chat interface, simply initialize our **TapUI** method and you are good to go. For more information about TapUI and TapCore, please see [TapUI and TapCore page](https://docs.taptalk.io/powertalk-chat-sdk-documentation/powertalk-android/tapui-and-tapcore).

{% tabs %}
{% tab title="Java" %}
{% code title="PowerTalkWrapperActivity.java" %}

```java
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import io.taptalk.TapTalk.Helper.TapTalk;
import io.taptalk.TapTalk.Manager.TapUI;

public class PowerTalkWrapperActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_power_talk_wrapper);

        if (TapTalk.isAuthenticated()) {
            // Show room list if authentication is completed
            TapUI.getInstance().openRoomList(this);
        }
        else {
            // Authentication is required
        }
        finish();
    }
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="info" %}
**Note**: For more information about Room List View for TapUI, please see [Room List section.](https://docs.taptalk.io/powertalk-chat-sdk-documentation/powertalk-android/room-list)
{% endhint %}

Once the activity is added, we will create a java module file that contains a react method to open PowerTalk chat list view from your React Native app.

#### Step 2: Create Java Module file in React Native project folder

Create a new Java class inside the android project folder *(android/app/src/main/java/com/yourprojectname/)* . We will name this file *PowerTalkStarterModule.java*. This class will inherit `ReactContextBaseJavaModule`*.*

In this class, create a react method named `navigateToPowerTalk()` to open PowerTalk chat view from the previously created activity. Annotating this method with `@ReactMethod` will enable the method to be invoked from JavaScript of a React Native app.

{% tabs %}
{% tab title="Java" %}
{% code title="PowerTalkStarterModule.java" %}

```java
import android.content.Intent;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import org.jetbrains.annotations.NotNull;

class PowerTalkStarterModule extends ReactContextBaseJavaModule {

    PowerTalkStarterModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @NotNull
    @Override
    public String getName() {
        return "PowerTalkStarter";
    }

    @ReactMethod
    void navigateToPowerTalk() {
        Intent intent = new Intent(getReactApplicationContext(), PowerTalkWrapperActivity.class);
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        getReactApplicationContext().startActivity(intent);
    }
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="info" %}
A class inheriting `ReactContextBaseJavaModule` requires that a function called`getName()` is always implemented.
{% endhint %}

{% hint style="info" %}
**`FLAG_ACTIVITY_NEW_TASK`** is required to be added to the `intent`'s flags if we are to open a new activity from a non-activity context (In this case, *React Application Context*).
{% endhint %}

#### Step 3: Register the module

Next step is to register the module we just created. To continue, create another Java class in the android project folder that inherits `ReactPackage`. We will name this file `PowerTalkStarterPackage`.

 Override the `createNativeModules()` function and add the `PowerTalkStarterModule` object to modules array. 

{% tabs %}
{% tab title="Java" %}
{% code title="PowerTalkStarterPackage.java" %}

```java
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import org.jetbrains.annotations.NotNull;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class PowerTalkStarterPackage implements ReactPackage {

    @NotNull
    @Override
    public List<ViewManager> createViewManagers(@NotNull ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @NotNull
    @Override
    public List<NativeModule> createNativeModules(@NotNull ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new PowerTalkStarterModule(reactContext));

        return modules;
    }
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

#### Step 4: Provide the package in MainApplication.java

We will need to provide the `PowerTalkStarterPackage` in the `getPackages()` method of the *MainApplication.java* file.

{% tabs %}
{% tab title="Java" %}
{% code title="MainApplication.java" %}

```java
public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost =
            new ReactNativeHost(this) {
                
                ...
                
                @Override
                protected List<ReactPackage> getPackages() {
                    @SuppressWarnings("UnnecessaryLocalVariable")
                    List<ReactPackage> packages = new PackageList(this).getPackages();
                    
                    ...
                    
                    // Add package
                    packages.add(new PowerTalkStarterPackage());
                    
                    return packages;
                }
            };
            
    ...     
          
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

#### Step 5. Open PowerTalk Chat View

Once the module set up is done, you can find a place in your application where you would like to add a call to the native module’s `navigateToPowerTalk()` method to open PowerTalk chat view.&#x20;

&#x20;In order to access your native module from JavaScript you need to first import `NativeModules` from React Native:

```javascript
import { NativeModules } from 'react-native';
```

You can then invoke the native method `navigateToPowerTalk()` to open PowerTalk chat view. Here we will be using a button's  `onPress()` method as an example.

```javascript
<Button
    onPress={() => NativeModules.PowerTalkStarter.navigateToPowerTalk()}
    title='Launch PowerTalk'
/>
```

{% hint style="info" %}
**Note**: You can check a more complete implementation guide in the [PowerTalk Android](https://docs.taptalk.io/powertalk-chat-sdk-documentation/powertalk-android) section.
{% endhint %}