寻求Zendesk Chat API与NativeScript移动端应用集成方案

我刚好在几个月前搞定了NativeScript项目接入Zendesk Chat的需求——当时确实没找到专用的Chat插件，只能靠双平台原生库桥接来实现，下面是我踩过坑后整理的实操步骤，应该能帮到你：

前置准备 #

• 先去Zendesk后台拿到你的Chat账户密钥（iOS叫accountKey，Android是zendeskChatAccountKey）
• 确保你的NativeScript项目用的是@nativescript/core的稳定版，避免版本兼容问题

iOS 端集成步骤 #

1. 安装Zendesk Chat iOS SDK #

NativeScript支持CocoaPods，直接在项目根目录的Podfile（没有的话新建一个）里加：

pod 'ZendeskChatSDK'

然后到platforms/ios目录下跑pod install，或者直接用ns run ios，NativeScript会自动帮你处理依赖安装。

2. 写iOS原生桥接类 #

我当时在app/platforms/ios下建了两个文件：ZendeskChatManager.h和ZendeskChatManager.m，用来封装Zendesk的原生方法：

ZendeskChatManager.h

#import <Foundation/Foundation.h>
#import <ZendeskChatSDK/ZendeskChatSDK.h>

@interface ZendeskChatManager : NSObject
+ (void)initializeChatWithAccountKey:(NSString *)accountKey;
+ (void)openChat;
@end

ZendeskChatManager.m

#import "ZendeskChatManager.h"

@implementation ZendeskChatManager

+ (void)initializeChatWithAccountKey:(NSString *)accountKey {
    // 初始化Zendesk Chat
    [ZDKChat initializeWithAccountKey:accountKey];
}

+ (void)openChat {
    // 配置聊天参数（可以加预填用户信息、主题等）
    ZDKChatConfiguration *config = [[ZDKChatConfiguration alloc] init];
    // 比如预填邮箱：config.preChatData = [[ZDKPreChatData alloc] initWithEmail:@"user@example.com" name:@"用户名" phone:@"123456"];
    
    // 打开聊天界面
    [[ZDKChat sharedInstance] startChatWithConfiguration:config];
}

@end

3. NativeScript端封装调用 #

在项目里建个zendesk-chat.service.ts，把原生方法封装成TS方法，方便业务代码调用：

import { isIOS } from "@nativescript/core";

export class ZendeskChatService {
    private static _initialized = false;

    static initialize(accountKey: string) {
        if (isIOS && !this._initialized) {
            // 获取原生类
            const ZendeskChatManager = NSClassFromString("ZendeskChatManager");
            ZendeskChatManager.initializeChatWithAccountKey(accountKey);
            this._initialized = true;
        }
    }

    static openChat() {
        if (isIOS) {
            const ZendeskChatManager = NSClassFromString("ZendeskChatManager");
            ZendeskChatManager.openChat();
        }
    }
}

Android 端集成步骤 #

1. 添加Android SDK依赖 #

在app/App_Resources/Android/app.gradle的dependencies块里加上Zendesk Chat的依赖：

implementation 'com.zendesk:chat:5.3.0' // 可以去Zendesk官网查最新版本号

2. 写Android原生桥接类 #

在app/platforms/android/src/main/java/com/你的项目包名/下建一个ZendeskChatManager.java（记得替换成你自己的包名）：

package com.yourprojectpackage;

import android.app.Activity;
import com.zendesk.chat.Chat;
import com.zendesk.chat.ChatConfiguration;
import com.zendesk.chat.ChatEngine;

public class ZendeskChatManager {
    private static ChatEngine chatEngine;

    // 初始化Chat
    public static void initializeChat(Activity activity, String accountKey) {
        Chat.INSTANCE.init(activity, accountKey);
        chatEngine = Chat.INSTANCE.engine();
    }

    // 打开聊天界面
    public static void openChat(Activity activity) {
        if (chatEngine != null) {
            ChatConfiguration config = new ChatConfiguration.Builder().build();
            // 同样可以加预填信息：config.withPreChatFormEnabled(true).withPreChatData(new PreChatData.Builder().email("user@example.com").build());
            
            chatEngine.startChat(activity, config);
        }
    }
}

3. 更新NativeScript的服务类 #

把Android的调用逻辑加到之前的zendesk-chat.service.ts里：

import { isIOS, isAndroid, Application } from "@nativescript/core";

export class ZendeskChatService {
    private static _initialized = false;

    static initialize(accountKey: string) {
        if (isIOS && !this._initialized) {
            const ZendeskChatManager = NSClassFromString("ZendeskChatManager");
            ZendeskChatManager.initializeChatWithAccountKey(accountKey);
            this._initialized = true;
        } else if (isAndroid && !this._initialized) {
            // 获取当前Activity
            const currentActivity = Application.android.foregroundActivity || Application.android.startActivity;
            // 替换成你的包名对应的类
            const ZendeskChatManager = com.yourprojectpackage.ZendeskChatManager;
            ZendeskChatManager.initializeChat(currentActivity, accountKey);
            this._initialized = true;
        }
    }

    static openChat() {
        if (isIOS) {
            const ZendeskChatManager = NSClassFromString("ZendeskChatManager");
            ZendeskChatManager.openChat();
        } else if (isAndroid) {
            const currentActivity = Application.android.foregroundActivity || Application.android.startActivity;
            const ZendeskChatManager = com.yourprojectpackage.ZendeskChatManager;
            ZendeskChatManager.openChat(currentActivity);
        }
    }
}

实际使用示例 #

在应用启动的时候初始化（比如app.component.ts的ngOnInit里，或者main.ts中）：

import { ZendeskChatService } from "./zendesk-chat.service";

// 替换成你的Zendesk Chat账户密钥
ZendeskChatService.initialize("你的AccountKey");

然后在需要打开聊天的按钮点击事件里调用：

function handleOpenChat() {
    ZendeskChatService.openChat();
}

一些注意事项 #

• iOS端记得在Info.plist里加网络权限，要是需要上传图片/拍照，还要加对应的权限描述（比如NSCameraUsageDescription、NSPhotoLibraryUsageDescription）
• Android端要确保AndroidManifest.xml里有<uses-permission android:name="android.permission.INTERNET" />权限
• 要是需要自定义聊天界面或者配置更多参数，直接去看Zendesk官方的原生SDK文档，照着改桥接类里的配置就行

内容的提问来源于stack exchange，提问作者dpdragnev