Flutter云服务集成插件cloudwise_flutter_plugin的使用

cloudwise_flutter_plugin 是由 Cloudwise 提供的官方 Flutter 插件，它允许开发者轻松地在 Android 和 iOS 应用中收集数据。本文将介绍如何使用该插件，并提供一个完整的示例 Demo。

功能概述

通过 cloudwise_flutter_plugin，你可以：

• 收集应用的 HTTP 请求数据
• 监控应用崩溃情况
• 自定义用户信息和设备信息
• 监控 WebView 页面

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 项目中集成 cloudwise_flutter_plugin。

主要步骤

1. 初始化插件：在应用启动时初始化插件。
2. 设置用户信息：可以为每个用户设置自定义信息。
3. 配置监控选项：选择需要监控的功能（如网络请求、UI、崩溃等）。
4. 启动应用：使用插件提供的方法启动应用。

完整示例代码

import 'package:example/constant/tsb_const.dart';
import 'package:example/widget/c_app_bar.dart';
import 'package:example/widget/c_item_view.dart';
import 'crash/crash_page.dart';
import 'crash/flutter_crash_page.dart';
import 'custom/custom_page.dart';
import 'custom/custom_event.dart';
import 'http/dio_page.dart';
import 'http/http_page.dart';
import 'http/http_client_page.dart';
import 'image/image_page.dart';
import '/setting/setting_page.dart';

import 'package:flutter/material.dart';
import 'h5/h5_page.dart';
import 'h5/webview_page.dart';
import 'package:cloudwise_flutter_plugin/cloudwise_flutter_plugin.dart';

void main() async {
  // 确保Flutter框架已初始化
  WidgetsFlutterBinding.ensureInitialized();

  // 获取存储的值，如果不存在则使用默认值
  String dataDomain = TSBConst.dataDomain;
  String appKey = TSBConst.appKey;

  String customUserId = 'test_11';
  String customVersion = '2.7.5';
  String customDeviceId = 'cloudWise_device_id_1111';

  // 设置自定义用户信息
  CloudwiseImpl().setCustomUserInfo(customUserId, {});

  // 创建配置对象
  var configuration = Configuration(
    isDebug: true,
    datadomain: dataDomain,
    appkey: appKey,
  );

  // 设置应用版本号
  if (customVersion.isNotEmpty) {
    configuration.setAppVersion(customVersion);
  }

  // 设置自定义设备ID
  if (customDeviceId.isNotEmpty) {
    CloudwiseImpl().setCustomDeviceId(customDeviceId);
  }

  // 配置监控类型
  configuration.setStartOption(monitorTypeUI | monitorTypeNetwork | monitorTypeCrash);

  // 启动应用
  CloudwiseImpl().start(const MyApp(), configuration: configuration);
}

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

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  final List<Map<String, String>> items = [
    {'title': 'HTTP Request', 'route': '/Http'},
    {'title': 'Crash Page', 'route': '/Crash'},
    {'title': 'Webview Page', 'route': '/H5Page'},
    {'title': 'Custom Page', 'route': '/Custom'},
    {'title': 'Image Page', 'route': '/ImagePage'},
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        '/main': (context) => const MainWeight(),
        '/Http': (context) => const Http(),
        '/DioPage': (context) => const DioPage(),
        '/HttpClientPage': (context) => const HttpClientPage(),
        '/H5Page': (context) => const H5Page(),
        '/WebviewPage': (context, {arguments}) =>
            WebViewExample(ModalRoute.of(context)!.settings.arguments.toString()),
        '/Crash': (context) => const Crash(),
        '/FlutterCrashPage': (context) => const FlutterCrashPage(),
        '/Custom': (context) => const Custom(),
        '/CustomEvent': (context) => const CustomEvent(),
        '/CustomUserInfo': (context) => const CustomEvent(),
        '/ImagePage': (context) => const ImagePage(),
      },
      onUnknownRoute: (RouteSettings settings) {
        String? name = settings.name;
        if (kDebugMode) {
          print("未匹配到路由：$name");
        }
        return null;
      },
      navigatorObservers: [CloudwiseRouteObserver()],
      home: const MainWeight(),
    );
  }
}

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

  @override
  State<StatefulWidget> createState() => _MainWeightState();
}

class _MainWeightState extends State<MainWeight> {
  int _currentIndex = 0;

  final List<Widget> _pages = [MainPage(), const SettingPage()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            label: 'Function',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
      ),
    );
  }
}

class MainPage extends StatelessWidget {
  final List<Map<String, String>> items = [
    {'title': 'HTTP Request', 'route': '/Http'},
    {'title': 'Crash Page', 'route': '/Crash'},
    {'title': 'Webview Page', 'route': '/H5Page'},
    {'title': 'Custom Page', 'route': '/Custom'},
    {'title': 'Image Page', 'route': '/ImagePage'},
  ];

  MainPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const CAppBar(
        text: "Function",
        isBack: false,
      ),
      body: ListView.separated(
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item = items[index];
          return ListBody(
            children: [
              CItemView(
                height: 60,
                viewType: ItemViewType.typeJumpArrow,
                text: item['title']!,
                onTap: () {
                  Navigator.of(context).pushNamed(item['route']!);
                },
              )
            ],
          );
        },
        separatorBuilder: (context, index) => const Divider(
          height: 0,
          color: Colors.transparent,
        ),
      ),
    );
  }
}

关键点解析

1. 初始化插件：

   WidgetsFlutterBinding.ensureInitialized();
   

2. 设置自定义用户信息：

   CloudwiseImpl().setCustomUserInfo(customUserId, {});
   

3. 创建并配置监控选项：

   var configuration = Configuration(isDebug: true, datadomain: dataDomain, appkey: appKey);
   configuration.setStartOption(monitorTypeUI | monitorTypeNetwork | monitorTypeCrash);
   

4. 启动应用：

   CloudwiseImpl().start(const MyApp(), configuration: configuration);