Flutter用户反馈集成插件mopinion_flutter_integration_plugin的使用

Mopinion Native SDK for Flutter

使用Mopinion Flutter插件将我们的原生iOS和Android SDK集成到Flutter应用程序中。

Native SDKs readme’s

• Android Native SDK
• iOS Native SDK

安装

1. 编辑flutter目录下的pubspec.yml文件，添加Mopinion插件依赖：

   dependencies:
   
     ...
   
     mopinion_flutter_integration_plugin: ^${latestVersion}
   

2. 运行以下命令获取包：

   flutter pub get
   

原生设置

Android

1. 使用Android Studio打开Android项目。

2. 确保你的MainActivity.kt继承自FlutterFragmentActivity：

   import io.flutter.embedding.android.FlutterFragmentActivity
   
   class MainActivity: FlutterFragmentActivity() {
     // Your code...
   }
   

3. 确保app/build.gradle中的最小SDK版本为21：

   defaultConfig {
      minSdkVersion 21
   }
   

4. 在项目的build.gradle中包含Jitpack仓库：

   maven {
     url 'https://www.jitpack.io'
   }
   

5. 同步Gradle。

6. 确保应用主题扩展自MaterialComponent主题。请参考Android Native SDK readme step 4获取更多信息。

iOS

安装iOS版Mopinion SDK以使其成为Flutter插件可用资源。

1. 打开终端中的ios文件夹并运行pod install命令。
2. 设置iOS部署目标为11.0或更高版本。

Flutter实现

要使用Mopinion SDK for Flutter并开始收集有价值的用户反馈，请遵循以下步骤：

导入插件

导入插件类：

import 'package:mopinion_flutter_integration_plugin/mopinion_flutter_integration_plugin.dart';

初始化SDK

通过调用以下方法初始化SDK：

MopinionFlutterIntegrationPlugin.initSdk("YOUR_DEPLOYMENT_ID", enableLogging: true);

参数enableLogging是一个布尔值，用于激活SDK中的日志记录。建议尽早初始化SDK，例如在initState方法中进行初始化：

@override
void initState() {
  super.initState();
  initialize();
}

Future<void> initialize() async {
  try {
    await MopinionFlutterIntegrationPlugin.initSdk("YOUR_DEPLOYMENT_ID", true);
  } catch (error) {
    print(error.toString());
  }
}

调用事件

为了显示表单，可以调用以下函数：

MopinionFlutterIntegrationPlugin.event("EVENT_NAME");

MopinionFlutterIntegrationPlugin.event("EVENT_NAME")函数还会流式传输一个表单状态来显示表单处于哪个状态。要监听该回调，可以调用MopinionFlutterIntegrationPlugin.eventsData()函数，它返回一个Stream。示例用法如下：

MopinionFlutterIntegrationPlugin.eventsData().listen(_setFormStateStatus);

void _setFormStateStatus(MopinionFormState state) {
  setState(() => _state = state);
}

表单状态回调将是一个名为MopinionFormState的枚举，以下是可能的表单状态：

• Loading
• NotLoading
• FormOpened
• FormSent
• FormCanceled
• FormClosed
• Error
• HasNotBeenShown

更多关于表单状态的信息可以在每个Native SDK的README中找到：

• iOS: Callback variants of the event method
• Android: Implementing Form State callbacks

注意：这些表单状态目前仅在Android SDK中可用。

添加元数据

在Mopinion SDK中添加元数据很容易，只需调用以下函数即可：

await MopinionFlutterIntegrationPlugin.data(map);

此函数接收一个Map<String, String>变量，其中包含你想要在事件中设置的元数据。示例用法如下：

Map<String, String> map = {
        "age": "29",
        "name": "Manuel"
};
await MopinionFlutterIntegrationPlugin.data(map);
await MopinionFlutterIntegrationPlugin.event(yourEvent);

按键删除元数据

当需要从提供给SDK的元数据Map<String, String>中删除某个键的数据时，只需传递键值即可：

MopinionFlutterIntegrationPlugin.removeMetaData("name");

这将删除元数据Map中的键name。

删除所有元数据

如果需要删除所有元数据，则更简单，只需调用：

MopinionFlutterIntegrationPlugin.removeAllMetaData();

所有元数据都将被删除。

示例代码

以下是一个完整的示例demo，展示了如何在Flutter应用中集成和使用Mopinion Flutter插件：

import 'dart:async';
import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:mopinion_flutter_integration_plugin/mopinion_flutter_integration_plugin.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _state = MopinionFormState.hasNotBeenShown;
  late final StreamSubscription<MopinionFormState> _streamSubscription;

  @override
  void initState() {
    super.initState();
    _initialize();
  }

  @override
  void dispose() {
    _streamSubscription.cancel();
    super.dispose();
  }

  Future<void> _initialize() async {
    try {
      MopinionFlutterIntegrationPlugin.initSdk("YOUR_DEPLOYMENT_KEY",
          enableLogging: true);
      _streamSubscription = MopinionFlutterIntegrationPlugin.eventsData()
          .listen(_setFormStateText);
    } catch (error) {
      log(error.toString());
    }
  }

  Future<void> _launchEvent(String eventName) async {
    try {
      await MopinionFlutterIntegrationPlugin.event(eventName);
    } catch (error) {
      log(error.toString());
    }
  }

  void _setFormStateText(MopinionFormState state) {
    setState(() => _state = state);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Example app Mopinion Flutter Integration Plugin"),
      ),
      body: Center(
        child: Text(
          _state.toString(),
          style: Theme.of(context).textTheme.bodyLarge,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _launchEvent("EVENT_NAME"),
        tooltip: 'Launch form',
        child: const Icon(Icons.rocket_launch),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

这段代码展示了如何初始化SDK、监听表单状态以及触发事件等操作。希望这个示例对你有所帮助！