Cùng với sự phát triển của smartphone, các ứng dụng di động ngày càng trở nên phổ biến, từ ứng dụng ngân hàng, giải trí, quản lý doanh nghiệp đến nhiều lĩnh vực khác. Các nhà phát triển mobile luôn tìm kiếm những giải pháp để nâng cao trải nghiệm người dùng trên ứng dụng, và Deep Linking là một phương pháp hiệu quả giúp đạt được mục tiêu này. Để triển khai Deep Linking, các developer thường sử dụng Branch.io, một nền tảng phổ biến cho phép quản lý và tạo các Deep Link. Trong bài viết này, chúng ta sẽ tìm hiểu các bước cấu hình Branch.io để triển khai Deep Linking.

Deep linking là gì?

Deep Link là một siêu liên kết (hyperlink) thường được sử dụng trong các ứng dụng di động để điều hướng người dùng trực tiếp đến một màn hình hoặc nội dung cụ thể. Deep Link giúp người dùng nhanh chóng tìm thấy nội dung phù hợp nhất, đồng thời nâng cao trải nghiệm người dùng và mang lại khả năng hoạt động liền mạch cho ứng dụng.

Điều này khác với các liên kết thông thường, vốn chỉ đưa người dùng đến trang chủ của ứng dụng hoặc một website chung. Deep Link là cơ chế đưa người dùng trực tiếp đến một màn hình hoặc chức năng cụ thể bên trong ứng dụng di động.

Nhận biết các loại Deep Link

Có nhiều loại Deep Link, nhưng chúng ta có thể chia thành 2 loại chính: Basic Deep Link và Deferred Deep Link.  

Basic Deep Link: là một loại Deep Link được sử dụng trong các ứng dụng di động để đưa người dùng trực tiếp đến một màn hình/tính năng/nội dung cụ thể bên trong ứng dụng. Basic Deep Link thường có dạng đơn giản và chỉ cần chứa các thông tin cần thiết để điều hướng người dùng đến đúng vị trí trong ứng dụng di động. 

Deferred Deep Link: cũng đưa người dùng đến một nội dung cụ thể trong ứng dụng di động. Tuy nhiên, nó có khả năng xử lý thêm dữ liệu trước khi điều hướng người dùng đến nội dung đó. 

Cách thiết lập Branch.io để triển khai Deep Linking trong dự án React Native

Dưới đây là 5 bước để thiết lập Deep Link trong dự án React Native bằng Branch. Tuy nhiên, trước khi thực hiện các bước này, bạn cần tạo tài khoản Branch.io.

1. Cấu hình Branch.io

Trong bước này, bạn có thể tham khảo tài liệu hướng dẫn của Branch để iOS và Android cấu hình.

2. Cài đặt Branch.io để triển khai Deep Linking

    yarn add react-native-branch

Lưu ý: Module react-native-branch yêu cầu phiên bản React Native từ 0.60 trở lên.

Ứng dụng iOS với CocoaPods

Bước 1: Thêm đoạn mã sau vào Podfile.

    platform :ios, '11.0'

    target 'APP_NAME' do
      # if swift
      use_frameworks!

      pod 'react-native-branch', path: '../node_modules/react-native-branch'
    end

Bước 2: Chạy lệnh pod install để tạo lại Pods project với các dependency mới.

3. Cấu hình ứng dụng trên Branch Dashboard

Cấu hình iOS

Bước 1: Cấu hình Bundle Identifier

  • Tìm Bundle Identifier của project trong Xcode, tại tab Signing & Capabilities.
  • Quay lại trang Configuration trên Branch Dashboard, sau đó chọn Add New Bundle ID.

Bước 2: Cấu hình Associated Domains

  • Trong Branch Dashboard, truy cập Link Domain.
  • Mở Xcode, tìm tab Signing & Capabilities và thêm các domain vào project.

Bước 3: c. Cấu hình file Info.plist

<plist version="1.0">
	<dict>
		<key>branch_universal_link_domains</key>
		<array>
			<string>example.app.link</string> <!-- REPLACE `example.app.link` with your `app.link` domain -->
			<string>example-alternate.app.link</string> <!-- REPLACE `example-alternate.app.link` with your `-alternate` domain (required for proper functioning of App Links and Deepviews) -->
			<string>example.test-app.link</string> <!-- REPLACE `example.test-app.link` with your `test-app.link` domain -->
		</array>
		<key>CFBundleURLTypes</key>
		<array>
			<dict>
				<key>CFBundleTypeRole</key>
				<string>Editor</string>
				<key>CFBundleURLSchemes</key>
				<array>
					<string>branchsters</string>
				</array>
				<key>CFBundleURLName</key>
				<string>io.Branch.Branchsters</string>
			</dict>
		</array>
		<key>branch_key</key>
		<dict>
			<key>live</key>
			<string>key_live_aaa000AAA</string> <!-- REPLACE `BranchKey` with the value from your Branch Dashboard -->
			<key>test</key>
			<string>key_test_bbb000BBB</string> <!-- REPLACE `BranchKey.test` with the value from your Branch Dashboard -->
		</dict>
	</dict>
</plist>

Bước 4: Thêm file branch.json vào project.

  • Tạo một file trống có tên branch.json.
  • Thêm file branch.json vào Xcode.

Cấu hình Android

Bước 1: Thêm các dependencies

  • Thêm Maven vào file build.gradle.
allprojects {
    repositories {
       maven { url 'https://maven.google.com/' } 
    }
}
  • Thêm các implementation vào file app/build.gradle.
    implementation "com.google.android.gms:play-services-ads-identifier:18.0.1"
    implementation "com.android.installreferrer:installreferrer:2.2"

Bước 2: Configure AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest
	xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.android">
	<uses-permission android:name="android.permission.INTERNET" />
	<uses-permission android:name="com.google.android.gms.permission.AD_ID"/>
	<application
      		android:allowBackup="true"
      		android:name="com.example.android.CustomApplicationClass"
      		android:icon="@mipmap/ic_launcher"
      		android:label="@string/app_name"
      		android:supportsRtl="true"
      		android:theme="@style/AppTheme">
		<!-- Launcher Activity to handle incoming Branch intents -->
		<activity
        		android:name=".LauncherActivity"
        		android:launchMode="singleTask"
        		android:label="@string/app_name"
        		android:theme="@style/AppTheme.NoActionBar"
        		android:exported="true">

			<intent-filter>
				<action android:name="android.intent.action.MAIN" />
				<category android:name="android.intent.category.LAUNCHER" />
			</intent-filter>

			<!-- Branch URI Scheme -->
			<intent-filter>
				<!-- If utilizing $deeplink_path please explicitly declare your hosts, or utilize a wildcard(*) -->
				<!-- REPLACE `android:scheme` with your Android URI scheme -->
				<data android:scheme="yourapp" android:host="open" />
				<action android:name="android.intent.action.VIEW" />
				<category android:name="android.intent.category.DEFAULT" />
				<category android:name="android.intent.category.BROWSABLE" />
			</intent-filter>

			<!-- Branch App Links - Live App -->
			<intent-filter android:autoVerify="true">
				<action android:name="android.intent.action.VIEW" />
				<category android:name="android.intent.category.DEFAULT" />
				<category android:name="android.intent.category.BROWSABLE" />
				<!-- REPLACE `android:host` with your `app.link` domain -->
				<data android:scheme="https" android:host="example.app.link" />
				<!-- REPLACE `android:host` with your `-alternate` domain (required for proper functioning of App Links and Deepviews) -->
				<data android:scheme="https" android:host="example-alternate.app.link" />
			</intent-filter>

			<!-- Branch App Links - Test App -->
			<intent-filter android:autoVerify="true">
				<action android:name="android.intent.action.VIEW" />
				<category android:name="android.intent.category.DEFAULT" />
				<category android:name="android.intent.category.BROWSABLE" />
				<data android:scheme="https" android:host="example.test-app.link" />
				<!-- REPLACE `android:host` with your `-alternate` domain (required for proper functioning of App Links and Deepviews) -->
				<data android:scheme="https" android:host="example-alternate.test-app.link" />
			</intent-filter>
		</activity>

		<!-- Branch init -->
		<!-- REPLACE `BranchKey` with the value from your Branch Dashboard -->
		<meta-data android:name="io.branch.sdk.BranchKey" android:value="key_live_XXX" />
		<!-- REPLACE `BranchKey.test` with the value from your Branch Dashboard -->
		<meta-data android:name="io.branch.sdk.BranchKey.test" android:value="key_test_XXX" />
		<!-- Set to `true` to use `BranchKey.test` -->
		<meta-data android:name="io.branch.sdk.TestMode" android:value="false" />

	</application>
</manifest>

Bước 3: Thêm file branch.json vào project.

  • Tạo một file trống có tên branch.json.
  • Thêm file này vào thư mục src/main/assets của ứng dụng.

4. Khởi tạo Branch.io để triển khai Deep Linking

For IOS

Gắn Branch vào file AppDelegate.

#import "AppDelegate.h"
#import <RNBranch/RNBranch.h>
  
@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // [RNBranch useTestInstance];
    [RNBranch initSessionWithLaunchOptions:launchOptions isReferrable:YES];
    NSURL *jsCodeLocation;
    //...
}

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  [RNBranch application:app openURL:url options:options];
  return YES;
}

- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
  [RNBranch continueUserActivity:userActivity];
  return YES;
}

@end

For Android

  • Thêm Branch vào file MainApplication.kt.
import io.branch.rnbranch.*

// ...

override fun onCreate() {
    super.onCreate()
    RNBranchModule.getAutoInstance(this)

    SoLoader.init(this, false)
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
        // If you opted-in for the New Architecture, we load the native entry point for this app
        load()
    }
  
    RNBranchModule.enableLogging();
  
    ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
}

// ...
  • Thêm Branch vào file MainApplication.kt.
import io.branch.rnbranch.*
import android.content.Intent

// ...

override fun onStart() {
    super.onStart()
    RNBranchModule.initSession(getIntent().getData(), this)
}

override fun onNewIntent(intent: Intent?) {
    super.onNewIntent(intent)
    setIntent(intent)
    RNBranchModule.reInitSession(this)
}

// ...

5. Kiểm tra tích hợp Branch

Đảm bảo trạng thái của cả Android SDK và iOS SDK đều đạt 100% trên Branch Dashboard

Hướng dẫn kiểm tra tích hợp Branch trên iOS SDK

Thêm đoạn mã validateSDKIntegration() sau vào file AppDelegate.

[[Branch getInstance] validateSDKIntegration];

Hàm này đảm bảo rằng Branch.io keys, package name, URI schemes, Universal Links và link domain được cấu hình trên Branch khớp với các thiết lập trong ứng dụng của bạn.

Kiểm tra log trong Xcode và đảm bảo rằng tất cả các SDK checks đều đạt yêu cầu.

  • Kiểm tra tính chính xác của URI scheme … Đạt
  • Kiểm tra tính chính xác của bundle identifier … Đạt
  • Kiểm tra tính chính xác của iOS Team ID … Đạt

Lưu ý: Đừng quên xóa hàm này trước khi release ứng dụng.

Hướng dẫn kiểm tra tích hợp Branch trên android SDK

Thêm các đoạn mã bên dưới vào file MainActivity.

import io.branch.referral.validators.IntegrationValidator

...

override fun onStart() {
    super.onStart()
    RNBranchModule.initSession(getIntent().getData(), this)
    IntegrationValidator.validate(this) <--- this code --->
  }

Hàm này đảm bảo rằng Branch keys, package name, URI schemes, Universal Links và link domain được cấu hình trên Branch khớp với các thiết lập trong ứng dụng của bạn.

Kiểm tra logcat của ADB và đảm bảo rằng tất cả các SDK checks đều đạt yêu cầu.

  • Kiểm tra việc khởi tạo Branch instance … Đạt
  • Kiểm tra Branch keys … Đạt
  • Kiểm tra package name của ứng dụng … Đạt
  • Đang kiểm tra cấu hình deep link dựa trên URI trong Android Manifest… Đạt
  • Xác minh cấu hình deep link dựa trên URI với bảng điều khiển Branch. … Đạt.
  • Xác minh ý định (intent) nhận URI scheme. … Đạt
  • Đang kiểm tra AndroidManifest để tìm cấu hình AppLink… Đạt.
  • Đang xác minh các miền liên kết tùy chỉnh được hỗ trợ. … Đạt
  • Đang xác minh việc tích hợp các miền liên kết mặc định. … Đạt
  • Đang xác minh việc tích hợp các tên miền liên kết thay thế. … Đạt.

Đó là tất cả các bước để liên kết sâu với cấu hình Branch.io, tôi hy vọng các bạn có thể làm theo hướng dẫn này và xây dựng thành công các liên kết sâu cho dự án React Native của riêng mình. Trong trường hợp bạn có một dự án ứng dụng di động khó khăn, bạn có thể tìm hiểu thêm về mobile app development service và hãy liên hệ. Chúng tôi rất vui khi được hỗ trợ bạn!