Flutter消息管理插件mbmessages的使用

MBMessages 是一个插件库，用于在应用内显示消息和管理推送通知。通过此库，您可以展示在 MBurger 仪表板上设置的消息，并且可以配置和管理与您的 MBurger 项目相关的推送通知。

MBMessages 依赖于以下包：

• mburger
• mpush
• device_info
• http
• path
• path_provider
• shared_preferences

安装

您可以通过 pub 来安装 MBAudience SDK。在 pubspec.yaml 文件中添加以下内容：

dependencies:
  mbmessages: ^2.0.0

然后从命令行运行以下命令来安装包：

$ flutter pub get

初始化

要初始化 SDK，您需要将 MBMessages 添加到 MBurger 的插件数组中：

MBManager.shared.apiToken = 'YOUR_API_TOKEN';
MBManager.shared.plugins = [MBMessages()];

为了正确显示应用内消息，您需要将主小部件嵌入到 MBMessagesBuilder 中：

[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    ...
    home: MBMessagesBuilder(
      child: Scaffold(
        ...
      ),
    ),
  );
}

为什么？因为 MBMessages 使用 showDialog 函数来呈现应用内消息，而该函数需要一个 BuildContext。将主 Scaffold 嵌入到 MBMessagesBuilder 中可以让 SDK 知道始终使用哪个上下文来显示应用内消息。

初始化MBMessages带参数

您可以在初始化 MBMessages 插件时设置一些参数：

MBMessages messagesPlugin = MBMessages(
  messagesDelay: 1,
  automaticallyCheckMessagesAtStartup: true,
  debug: false,
  themeForMessage: (context, message) => MBInAppMessageTheme(),
  onButtonPressed: (button) => _buttonPressed(button),
);

参数说明：

• messagesDelay: 消息获取后显示的时间间隔。
• automaticallyCheckMessagesAtStartup: 是否在启动时自动检查消息，默认为 true。
• debug: 如果设置为 true，则服务器返回的所有消息都会被显示；如果设置为 false，则每个安装的应用只会显示一次消息，默认为 false。
• themeForMessage: 提供应用内消息的主题（颜色和字体）。
• onButtonPressed: 当应用内消息按钮被按下时调用的回调。

样式化应用内消息

如果您想指定消息显示的字体和颜色，可以使用 themeForMessage 函数并提供特定消息的主题。对于每条消息，您可以指定以下属性：

• backgroundColor: 背景颜色
• titleStyle: 消息标题的文本样式
• bodyStyle: 消息正文的文本样式
• closeButtonColor: 关闭按钮的颜色
• closeButtonBackgroundColor: 关闭按钮的背景颜色
• button1BackgroundColor: 第一个按钮的背景颜色
• button1TextStyle: 第一个按钮的文本样式
• button2BackgroundColor: 第二个按钮的背景颜色
• button2BorderColor: 第二个按钮的边框颜色
• button2TextStyle: 第二个按钮的文本样式

示例：

...

MBManager.shared.plugins = [
  MBMessages(
    themeForMessage: (message) => _themeForMessage(message),
  ),
];

...

MBInAppMessageTheme _themeForMessage(MBInAppMessage message) {
  if (message.style == MBInAppMessageStyle.bannerTop) {
    return MBInAppMessageTheme(
      titleStyle: TextStyle(
        fontWeight: FontWeight.bold,
        color: Colors.blue,
      ),
    );
  } else {
    return MBInAppMessageTheme(
      titleStyle: TextStyle(
        fontWeight: FontWeight.normal,
        color: Colors.red,
      ),
    );
  }
}

推送通知

通过此插件，您还可以管理 MBurger 的推送通知部分。这是一个围绕 MPush 构建的包装器，因此您应该参阅 MPush 文档 来理解概念并开始推送集成。为了使用 MBMessages 而不是 MPush，您需要进行以下更改：

设置推送令牌：

MBMessages.pushToken = "YOUR_PUSH_TOKEN";

配置回调和 Android 原生接口：

MBMessages.configurePush(
  onNotificationArrival: (notification) {
    print("Notification arrived: $notification");
  },
  onNotificationTap: (notification) {
    print("Notification tapped: $notification");
  },
  androidNotificationsSettings: MPAndroidNotificationsSettings(
    channelId: 'messages_example',
    channelName: 'mbmessages',
    channelDescription: 'mbmessages',
    icon: '@mipmap/icon_notif',
  ),
);

为了配置 Android 部分，您需要传递一个 MPAndroidNotificationsSettings 到配置部分，它有两个参数：

• channelId: 通道 ID
• channelName: 通道名称
• channelDescription: 通道描述
• icon: 通知默认图标，在示例应用程序中，图标位于 res 文件夹中作为 mipmap，因此地址为 @mipmap/icon_notif，如果是 drawable，则使用 @drawable/icon_notif。

请求令牌

要请求一个通知令牌，您需要执行以下操作：

1. 设置一个回调，当令牌从 APNS/FCM 正确接收时会被调用：

MBMessages.onToken = (token) {
  print("Token retrieved: $token");
}

1. 使用 MPush 请求令牌：

MBMessages.requestToken();

注册到主题

一旦您有了通知令牌，您可以注册设备以接收推送通知并注册到主题：

MBMessages.onToken = (token) async {
  print("Token received $token");
  await MBMessages.registerDevice(token).catchError(
    (error) => print(error),
  );
  await MBMessages.registerToTopic(MPTopic(code: 'Topic')).catchError(
    (error) => print(error),
  );
  print('Registered');
};

主题是 MPTopic 类的实例，具有三个属性：

• code: 主题的 ID
• [可选] title: 在仪表板上显示的主题可读标题，如果不设置，则等于 code。
• [可选] single: 如果此主题代表单个设备或一组设备，默认为 false。

MBurger主题

MBurger 有两个默认主题，您应该使用它们以确保参与平台的正确功能：

• MBMessages.projectPushTopic(): 这个主题表示为此项目注册的所有设备。
• MBMessages.devicePushTopic(): 这个主题表示当前设备。

await MBMessages.registerToTopics(
  [
    await MBMessages.projectPushTopic(),
    await MBMessages.devicePushTopic(),
    MPTopic(code: 'Topic'),
  ],
);

启动通知

如果应用程序是从通知启动的，您可以像这样检索通知的数据，如果没有从通知启动，则为 null：

Map<String, dynamic> launchNotification = await MBMessages.launchNotification();
print(launchNotification);

消息指标

使用 MBMessages 可以收集有关用户和推送的通知信息，这些信息将在 MBurger 仪表板上显示。如前一节所述，为了使这些数据正常工作，您必须告诉 MBMessages 有一个推送到达。如果您没有看到正确的数据，请确保已正确遵循 MPush 文档中描述的设置步骤。

自动化

如果消息启用了自动化，它们将被忽略并由 MBAutomation SDK 管理。因此，请确保正确包含和配置自动化 SDK。

示例代码

import 'package:flutter/material.dart';

import 'package:mbmessages/mbmessages.dart';
import 'package:mburger/mburger.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    MBManager.shared.apiToken = 'YOUR_API_TOKEN';
    MBManager.shared.plugins = [
      MBMessages(
        onButtonPressed: (button) {
          debugPrint(button.toString());
        },
      ),
    ];

    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MBMessagesBuilder(
        child: Scaffold(
          appBar: AppBar(
            title: const Text('MBMessages example app'),
          ),
          body: Center(
            child: TextButton(
              child: const Text(
                'Configure push notifications',
              ),
              onPressed: () => _configurePushNotifications(),
            ),
          ),
        ),
      ),
    );
  }

  Future<void> _configurePushNotifications() async {
    MBMessages.pushToken = 'YOUR_PUSH_API_KEY';
    MBMessages.onToken = (token) async {
      debugPrint("Token received $token");
      await MBMessages.registerDevice(token).catchError(
        (error) => debugPrint(error),
      );
      await MBMessages.registerToTopics(
        [
          await MBMessages.projectPushTopic(),
          await MBMessages.devicePushTopic(),
          const MPTopic(code: 'Topic'),
        ],
      ).catchError(
        (error) => debugPrint(error),
      );
      debugPrint('Registered');
    };

    MBMessages.configurePush(
      onNotificationArrival: (notification) {
        debugPrint("Notification arrived: $notification");
      },
      onNotificationTap: (notification) {
        debugPrint("Notification tapped: $notification");
      },
      androidNotificationsSettings: const MPAndroidNotificationsSettings(
        channelId: 'mpush_example',
        channelName: 'mpush',
        channelDescription: 'mpush',
        icon: '@mipmap/icon_notif',
      ),
    );

    MBMessages.requestToken();

    Map<String, dynamic>? launchNotification =
        await MBMessages.launchNotification();
    debugPrint(launchNotification.toString());
  }
}