美文网首页
将 Stipop Stickers 集成到 Sendbird A

将 Stipop Stickers 集成到 Sendbird A

作者: 小城哇哇 | 来源:发表于2022-09-16 10:22 被阅读0次

天我们将讨论 Sendbird，它是流行的聊天 SDK 之一，它具有内置的聊天 UI 工具包和语音/视频通话功能。它使我们的生活更轻松，同时将聊天功能集成到我们现有的应用程序中。它通过交付收据、离线消息传递、翻译、审核工具和分析来帮助构建现代聊天应用程序和消息传递体验。

在本文中，我们会将 Sendbird 聊天 SDK 集成到 android 应用程序中，然后集成 Stipop 贴纸以获得流畅的聊天体验🤞。

先决条件👇

  • Android SDK（API 16 或更高版本）

  • Sendbird Android SDK

  • Java 8

  • AndroidX

  • Gradle 4.0.1 或更高版本

获取 SendbirdApp 密钥🗝️

在安装 Sendbird 聊天 SDK 之前让大家知道，您需要在 Sendbird Dashboard 上创建一个 Sendbird 应用程序，其中包含聊天服务所需的所有内容，包括用户、呼叫和频道。

接下来，在初始化 Chat SDK 时，您将需要 Sendbird 应用程序的应用程序 ID。

好吧，与其从头开始构建它，我们宁愿克隆 Sendbird 示例存储库，然后将 Stipop 贴纸集成到 Android 应用程序中。酷吧😎🤘。所以，事不宜迟，让我们开始开发聊天应用程序🙌

编码部分😈

我们将使用 Stream SDK 开始开发 Android 聊天应用程序。让我们使用内置的聊天 SDK 克隆 Sendbird 示例存储库。

git clone https://github.com/6vedant/StipopSendbirdAndroid.git

现在，导航到 Android Studio 并打开项目并清理/重建项目。我们对存储库的 uikit-custom-sample 模块感兴趣。成功重建项目后，导航到 build.gradle（示例项目级别），然后添加以下代码片段。

buildscript {
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.0.1'
    }
}

allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }
        maven { url "https://repo.sendbird.com/public/maven" }
    }
}

之后同步项目并重建 gradle。同样，我们现在必须向build.gradle（示例应用程序级别）添加更多 Sendbird 和 Stipop 的依赖项，并重新构建项目以使用项目中的类。

apply plugin: 'com.android.application'

android {
    ...

    dataBinding {
        enabled = true
    }

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    ...

}

dependencies {
    implementation 'com.sendbird.sdk:uikit:LATEST_VERSION'
// Stipop
 implementation 'com.github.stipop-development:stipop-android-sdk:0.3.0'

    ...

}

我希望在这部分之前一切都清楚，因为这是至关重要的。考虑到继续下一部分。

创建登录页面

在进入聊天室之前，我们将首先创建 LoginActivity.java 以启用用户身份验证。此外，对于 UI，我们将需要两个 EditText 来输入聊天用户的userID和userName。

EditText etUserId = findViewById(R.id.etUserId);
EditText etNickname = findViewById(R.id.etNickname);

当用户单击登录按钮时，他将能够将 android 应用程序连接到 SendBirdUIKit。

SendBirdUIKit.connect((user, e) -> {
   WaitingDialog.dismiss();
   PushUtils.registerPushHandler(new MyFirebaseMessagingService());
   Intent intent = new Intent(LoginActivity.this, HomeActivity.class);
   startActivity(intent);
   finish();
});

要从 Sendbird 聊天后端注销用户，我们将触发disconnect()SendBirdUIKit 的功能。

SendBirdUIKit.disconnect(() -> {
   WaitingDialog.dismiss();
   PreferenceUtils.clearAll();
   startActivity(new Intent(HomeActivity.this, LoginActivity.class));
   finish();
});

因此，是时候运行应用程序并测试登录屏幕是否按预期工作了。用户成功登录后，它应该重定向到HomeActivity屏幕。好吧，就是这样——

创建聊天屏幕

我们现在将继续创建聊天屏幕，请导航到包含聊天室的 CustomChannelFragment.java，供用户为群组频道交换消息。
CustomChannelFragment是ChannelFragment具有内置聊天室 UI 的子类。

最后，现在我们将在 Group 频道中集成 Stipop 贴纸。类似的程序也适用于 Open Channel 聊天室。

public ChannelFragment build() {
   ChannelFragment fragment = this.customFragment != null ? this.customFragment : new ChannelFragment();
   fragment.setArguments(this.bundle);
   fragment.setHeaderLeftButtonListener(this.headerLeftButtonListener);
   fragment.setHeaderRightButtonListener(this.headerRightButtonListener);
   fragment.setMessageListAdapter(this.adapter);
   fragment.setItemClickListener(this.itemClickListener);
   fragment.setItemLongClickListener(this.itemLongClickListener);
   fragment.setInputLeftButtonListener(this.inputLeftButtonListener);
   fragment.setMessageListParams(this.params);
   fragment.setEmojiReactionClickListener(this.emojiReactionClickListener);
   fragment.setEmojiReactionLongClickListener(this.emojiReactionLongClickListener);
   fragment.setEmojiReactionMoreButtonClickListener(this.emojiReactionMoreButtonClickListener);
   fragment.setOnProfileClickListener(this.profileClickListener);
   fragment.setLoadingDialogHandler(this.loadingDialogHandler);
   fragment.setOnInputTextChangedListener(this.inputTextChangedListener);
   fragment.setOnEditModeTextChangedListener(this.editModeTextChangedListener);
   return fragment;
}

它sendUserMessage()使用 as 输入参数调用父类的方法userMessage来发送消息。

protected void sendUserMessage(@NonNull UserMessageParams params) {
   if (this.viewModel != null) {
       CustomParamsHandler cutsomHandler = SendBirdUIKit.getCustomParamsHandler();
       if (cutsomHandler != null) {
           cutsomHandler.onBeforeSendUserMessage(params);
       }

       this.onBeforeSendUserMessage(params);
       this.viewModel.sendUserMessage(params);
   }

}

好吧，ChannelFragment也可以使用其他方法，例如：编辑现有消息、删除消息、重新发送消息等。

protected void updateUserMessage(long messageId, @NonNull UserMessageParams params) {
 if (this.viewModel != null) {
       CustomParamsHandler cutsomHandler = SendBirdUIKit.getCustomParamsHandler();
       if (cutsomHandler != null) {
           cutsomHandler.onBeforeUpdateUserMessage(params);
       }

       this.onBeforeUpdateUserMessage(params);
       this.viewModel.updateUserMessage(messageId, params);
   }

}
protected void deleteMessage(@NonNull BaseMessage message) {
   if (this.viewModel != null) {
       this.viewModel.deleteMessage(message);
   }
}

protected void resendMessage(@NonNull BaseMessage message) {
   if (this.viewModel != null) {
       if (message.isResendable()) {
           this.viewModel.resendMessage(message);
       } else {
           this.toastError(string.sb_text_error_not_possible_resend_message);
       }
   }

}

哇 到目前为止 我们 已经 顺利 完成 了 , 口袋 里 还 有 一些 技巧 , 然后 我 将 向 你 展示 魔法 . 你知道接下来会发生什么——开发已经完成，所以是时候进行测试了，因为你永远不会太确定。

让我们运行应用程序

我们现在准备测试 Sendbird Android 应用程序的聊天功能。

惊人的 ！！一切顺利，没有问题，因此我向大家宣布，我们能够成功运行 Sendbird 聊天应用程序，我们现在可以发送一些消息来测试聊天功能。很不错的公告😅。

现在，让我们从我最喜欢的部分开始，我可以蒙着眼睛做😉 Stipop 贴纸的整合。

获取 Stipop API 配置

像往常一样，我们需要将 Stipop SDK 集成到我们现有的 Sendbird android 聊天应用程序的 API 密钥。然后，登录到Stipop Dashboard并创建一个免费帐户。

成功登录后，创建一个应用程序名称，区域等。您现在可以看到 API Key。请Stipop.json在android设置下下载文件，如下图所示。

然后将Stipop.json文件粘贴到 uikit-sample/src/main/assets 文件夹中并重建项目。

uikit-sample 项目同步成功后，创建一个类GlobalApplication.java并添加 Stipop 的配置。

public class GlobalApplication extends BaseApplication {
   static GlobalApplication instance;

   @Override
   public void onCreate() {
       super.onCreate();
       instance = this;
       Stipop.Companion.configure(this, aBoolean -> null);
   }
}

现在我们将导航到该AndroidManifest.xml文件并添加以下代码片段以包含应用程序名称和tools:replace属性。

<application
   android:name=".GlobalApplication"
   android:allowBackup="true"
 android:icon="@mipmap/ic_launcher"
   android:label="@string/app_name"
   android:roundIcon="@mipmap/ic_launcher"
   android:supportsRtl="false"
   android:resizeableActivity="false"
   android:theme="@style/AppTheme"
   tools:replace="android:theme,android:allowBackup,android:roundIcon,android:supportsRtl"
   tools:ignore="GoogleAppIndexingWarning">

请导航到CustomChannelFragment.java课程并在其中添加以下片段，onCreateView以在消息输入框布局中显示 Stipop 图像（笑脸😊）。

StipopImageView stipopIV = new StipopImageView(view.getContext());
stipopIV.setId(View.generateViewId());
stipopIV.setImageResource(R.mipmap.ic_sticker_normal);
stipopIV.setMaxWidth(24);
stipopIV.setMaxHeight(24);

Stipop.Companion.connect(getActivity(), stipopIV, SendBird.getCurrentUser().getUserId(), "en", "US", this);

stipopIV.setOnClickListener((v) -> {
   Stipop.Companion.showKeyboard();
});

现在，我们需要将 Stipop 图像按钮添加到现有的聊天布局中，因此我们无需将其添加到 XML 布局中，而是以编程方式将其添加到 java 类中。

ConstraintLayout constraintLayout = view.findViewById(R.id.inputPanel);

assert constraintLayout != null;

constraintLayout.addView(stipopIV);

AppCompatEditText textField = view.findViewById(R.id.etInputText);

assert textField != null;

ConstraintSet constraintSet = new ConstraintSet();

constraintSet.clone(constraintLayout);

我们仍然需要调整 Stipop 图像按钮的大小，单击该按钮将显示贴纸键盘。

constraintSet.connect(stipopIV.getId(), ConstraintSet.RIGHT, R.id.etInputText, ConstraintSet.RIGHT, margin);
constraintSet.connect(stipopIV.getId(), ConstraintSet.TOP, R.id.etInputText, ConstraintSet.TOP, 0);
constraintSet.connect(stipopIV.getId(), ConstraintSet.BOTTOM, R.id.etInputText, ConstraintSet.BOTTOM, 0);

constraintSet.applyTo(constraintLayout);

前端更改后，我们将在其中实现StipopDelegate接口CustomChannelFragment并覆盖必要的 Stipop 方法。

public class CustomChannelFragment extends ChannelFragment implements StipopDelegate {
@Override
public boolean canDownload(@NonNull SPPackage spPackage) {
   return true;
}

@Override
public boolean onStickerSelected(@NonNull SPSticker spSticker) {
   final UserMessageParams userMessageParams = new UserMessageParams(spSticker.getStickerImg());
   userMessageParams.setCustomType("sticker");
   sendUserMessage(userMessageParams);
   return true;
}

该onStickerSelected()方法将获取用户选择的贴纸的 URL。然后它将在userMessageParams对象中附加贴纸 url 并调用该sendUserMessagse方法。

我们完成了🤩🤩

最后，我们都准备好在 Sendbird Android 应用程序中测试 Stipop 贴纸了。不需要手指交叉，因为我知道它会起作用😎😎。

👊Bingo！！我们已成功将 Stipop 贴纸集成到 Sendbird Android 聊天应用程序中。您还可以发送一些示例贴纸来探索更多关于 Stipop 贴纸的信息。集成 Stipop SDK 很容易，因为它带有内置的贴纸键盘和贴纸搜索选项，这使其成为任何视频或图像编辑应用程序的绝佳补充。如果您正在构建使用贴纸的前端应用程序，您绝对应该尝试使用 Stipop SDK/API。

感谢大家阅读。

祝大家编码愉快🎯🎯。

相关文章

网友评论

      本文标题：将 Stipop Stickers 集成到 Sendbird A

      本文链接：https://www.haomeiwen.com/subject/snkjortx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|将 Stipop Stickers 集成到 Sendbird A|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！