Flutter性能监控插件apptics_flutter的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter性能监控插件apptics_flutter的使用

apptics_flutter 是一个用于Apptics性能监控的Flutter库。它封装了Apptics原生iOS和Android SDK，支持功能如应用内更新、事件跟踪、屏幕和会话等。

Android初始化步骤

  1. 注册应用并下载 apptics-config.json 文件： 登录Apptics控制台，注册你的应用，并下载 apptics-config.json 文件。

  2. 将 apptics-config.json 文件放置在项目的根目录： 将下载的 apptics-config.json 文件放在Android Studio项目的 app/ 目录下（即应用模块的根目录）。

  3. 在项目级 build.gradle 中添加 apptics-plugin 类路径和Zoho Maven URL：

    buildscript {
    repositories {
        maven {
            url "https://maven.zohodl.com/"
        }
    }
    dependencies {
        classpath 'com.zoho.apptics:apptics-plugin:0.2.3'
    }
}
allprojects {
    repositories {
        maven {
            url "https://maven.zohodl.com/"
        }
    }
}

  4. 确保最低SDK版本为23： 在Android环境中，Apptics支持从最低SDK版本23开始。

Apple平台初始化步骤

  1. 注册应用并下载 apptics-config.plist 文件： 登录Apptics控制台，注册你的应用，并下载 apptics-config.plist 文件。

  2. 将 apptics-config.plist 文件移动到Xcode项目的根文件夹并添加到主目标： 下载后，将 apptics-config.plist 文件移动到Xcode项目的根文件夹，并将其添加到主目标中。

  3. 添加预构建脚本：

    • 通过podfile添加Run Script：

      source 'https://github.com/CocoaPods/Specs.git'
target 'MAIN TARGET' do

  # 预构建脚本将注册应用版本，上传dSYM文件到服务器，并将Apptics特定信息添加到主info.plist，以便SDK使用。
  script_phase :name => 'Apptics pre build', :script => 'sh "./Pods/Apptics-SDK/scripts/run" --upload-symbols-for-configurations="Release, Appstore"', :execution_position => :before_compile

end

    • 手动添加Run Script：

      • 在项目导航器中，选择你的项目。
      • 选择你要修改的目标。
      • 点击“Build Phases”标签。点击“+”按钮，然后从弹出菜单中选择“New Run Script Phase”，并将其重命名为“Apptics pre build”。
      • 点击新添加的Run Script阶段旁边的三角形展开。
      • 在Shell文本框中，输入以下脚本：
        sh "./Pods/Apptics-SDK/scripts/run" --upload-symbols-for-configurations="Release, Appstore"

重要提示

  • 添加预构建脚本是必需的。
  • 在预构建脚本中，我们上传dSYM到服务器（可选），注册应用与Apptics服务器，并将应用版本的必要信息添加到 apptics-config.plist 文件中，该文件由SDK用于发送数据到Apptics服务器。
  • 始终确保“Copy Bundle Resources”在“Compile Sources”之下，“Apptics pre build”在“Compile Sources”之上。

构建脚本使用

run --upload-symbols-for-configurations="Release, Appstore" --config-file-path="YOUR_PATH/apptics-config.plist" --app-group-identifier="group.com.company.application [Optional]"
  • --config-file-path：如果你未将配置文件添加到项目根目录，请传递你的配置文件路径。
  • --app-group-identifier：如果你已启用应用组标识符，请传递。
  • --upload-symbols-for-configurations：一个可选参数，用于传递配置名称（debug, release或自定义名称），这些配置将在CI, CT和CD过程中通过App Store提交过程自动上传dSYMs，无需任何提示。

创建AppticsFlutter实例

import 'package:apptics_flutter/apptics_flutter.dart';

class _YourClassState extends State<YourClass> {
  // 初始化AppticsFlutter
  // _appticsFlutterPlugin可以用来跟踪事件、屏幕、用户和控制跟踪设置。
  final _appticsFlutterPlugin = AppticsFlutter();
}

事件跟踪

_appticsFlutterPlugin.addEvent("eventName", "eventGroupName") // 不带属性
(or)
_appticsFlutterPlugin.addEvent("eventName", "eventGroupName", properties: {"propKey": "propValue"}) // 带属性

屏幕跟踪

// 当屏幕出现时调用
_appticsFlutterPlugin.screenAttached("screenName")

// 当屏幕消失时调用
_appticsFlutterPlugin.screenDetached("screenName")

跟踪用户

// 将用户ID与其他统计信息（事件、屏幕等）关联起来
_appticsFlutterPlugin.setUser("userid")

跟踪设置

Apptics提供了7种跟踪状态来控制使用和崩溃跟踪。

// 更改跟踪设置以仅跟踪崩溃并关联用户ID
_appticsFlutterPlugin.setTrackingState(TrackingState.OnlyCrashTrackingWithPII);

// 获取当前跟踪状态
_appticsFlutterPlugin.getTrackingState();

应用内评分

使用AppticsInAppRating实例

import 'package:apptics_flutter/rateus/apptics_in_app_rating.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 检查并显示新的评分弹窗
    AppticsInAppRating.instance.checkForRatingPop(context);

    // 返回你的小部件
  }
}

启用反馈选项

AppticsInAppRating.instance.checkForRatingPop(context, isFeedbackEnabled: true);

自定义UI

import 'package:apptics_flutter/rateus/apptics_in_app_rating.dart';

await AppticsInAppRating.instance.getCriteriaId();

发送统计数据

AppticsInAppRating.instance.sentStats(criteriaId: criteriaId, popupAction: PopupAction.LATER_CLICKED);

店铺内应用评分API

import 'package:apptics_flutter/rateus/apptics_in_app_rating.dart';

AppticsInAppRating.instance.setShowStoreAlertOnFulFillingCriteria(true);

远程配置

import 'package:apptics_flutter/remoteconfig/apptics_remote_config.dart';

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  getRemoteConfigData(BuildContext context) async {
    // 使用以下方法获取参数值
    String? stringValue = await AppticsRemoteConfig.instance.getStringValue('color');
    if (stringValue != null) {
      print("stringValue $stringValue");
      showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text(stringValue),
            alignment: Alignment.center,
          );
        },
      );
    } else {
      print("No data available");
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    getRemoteConfigData(context);
    // 返回你的小部件
  }
}

设置自定义条件标准

AppticsRemoteConfig.instance.setCustomConditionValue("ConditionKey", "Criteria");

应用内更新

显示弹窗

import 'package:apptics_flutter/appupdate/apptics_in_app_update.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 检查并显示更新弹窗
    AppticsInAppUpdates.instance.checkAndUpdateAlert(context);

    // 返回你的小部件
  }
}

构建自己的流程

AppticsInAppUpdates.instance.getInAppUpdateData(context)

Apptics崩溃跟踪

致命崩溃

import 'package:apptics_flutter/crash_tracker/apptics_crash_tracker.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 启用自动崩溃跟踪
    AppticsCrashTracker.instance.autoCrashTracker();

    // 返回你的小部件
  }
}

获取最后一次崩溃信息

import 'package:apptics_flutter/crash_tracker/apptics_crash_tracker.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 可靠地获取最后一次崩溃信息作为字符串
    String? lastCrash = AppticsCrashTracker.instance.getLastCrashInfo();

    // 返回你的小部件
  }
}

显示同意弹窗以发送上次会话崩溃信息

import 'package:apptics_flutter/crash_tracker/apptics_crash_tracker.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 显示同意弹窗以允许发送上次会话崩溃信息
    AppticsCrashTracker.instance.showLastSessionCrashedPopup();

    // 返回你的小部件
  }
}

非致命崩溃

import 'package:apptics_flutter/crash_tracker/apptics_crash_tracker.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    try {
      int k = (1 / 0) as int;
    } catch (e, s) {
      // 记录非致命异常
      AppticsCrashTracker.instance.sendNonFatalException(e, s);
    }

    // 返回你的小部件
  }
}

设置自定义属性

import 'package:apptics_flutter/crash_tracker/apptics_crash_tracker.dart';

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

  setCustomProperties() async {
    Map<String, dynamic> _portaInfoMap = {
      "name": "ABCD",
      "domains": ["Data Science", "Mobile", "Web"],
    };

    // 实现以下方法以设置自定义属性。你可以传递参数 [map]。
    await AppticsCrashTracker.instance.setCrashCustomProperty(_portaInfoMap);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    setCustomProperties();
    // 返回你的小部件
  }
}

Apptics反馈

打开反馈屏幕

import 'package:apptics_flutter/feedback/apptics_feedback.dart';

AppticsFeedback.instance.openFeedback(); // 打开Apptics反馈屏幕

报告错误并附上截图注释

import 'package:apptics_flutter/feedback/apptics_feedback.dart';

AppticsFeedback.instance.reportBug(); // 打开Apptics反馈屏幕

示例代码

import 'package:apptics_flutter/feedback/apptics_feedback.dart';
import 'package:flutter/material.dart';

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

  reportBug() async {
    AppticsFeedback.instance.reportBug(); // 报告错误
  }

  openFeedback() async {
    AppticsFeedback.instance.openFeedback(); // 打开Apptics反馈屏幕
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 你的应用界面
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Apptics反馈示例")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () async {
                  // 当按钮被按下时调用反馈方法
                  openFeedback();
                },
                child: const Text("发送反馈"),
              ),
              ElevatedButton(
                onPressed: () async {
                  // 当按钮被按下时调用报告错误方法
                  reportBug();
                },
                child: const Text("报告错误"),
              )
            ]
          ),
        ),
      ),
    );
  }
}

启用/禁用摇一摇反馈

启用摇一摇反馈

import 'package:apptics_flutter/feedback/apptics_feedback.dart';

AppticsFeedback.instance.enableShakeForFeedback();

禁用摇一摇反馈

import 'package:apptics_flutter/feedback/apptics_feedback.dart';

AppticsFeedback.instance.disableShakeForFeedback();

检查是否启用了摇一摇反馈

import 'package:apptics_flutter/feedback/apptics_feedback.dart';

AppticsFeedback.instance.isShakeForFeedbackEnabled();

示例代码

import 'package:apptics_flutter/feedback/apptics_feedback.dart';
import 'package:flutter/material.dart';

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

  enableShakeForFeedback() async {
    AppticsFeedback.instance.enableShakeForFeedback(); // 启用摇一摇反馈
  }

  disableShakeForFeedback() async {
    AppticsFeedback.instance.disableShakeForFeedback(); // 禁用摇一摇反馈
  }

  checkShakeForFeedbackStatus() async {
    bool? isEnabled = await AppticsFeedback.instance.isShakeForFeedbackEnabled(); // 检查摇一摇反馈状态
    print("ShakeForFeedback Status: $isEnabled");
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 你的应用界面
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Apptics反馈示例")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () async {
                  // 当按钮被按下时调用启用方法
                  enableShakeForFeedback();
                },
                child: const Text("启用摇一摇反馈"),
              ),
              ElevatedButton(
                onPressed: () async {
                  // 当按钮被按下时调用禁用方法
                  disableShakeForFeedback();
                },
                child: const Text("禁用摇一摇反馈"),
              ),
              ElevatedButton(
                onPressed: () async {
                  // 当按钮被按下时调用检查方法
                  checkShakeForFeedbackStatus();
                },
                child: const Text("检查摇一摇反馈状态"),
              )
            ]
          ),
        ),
      ),
    );
  }
}

启用/禁用匿名用户警报

启用匿名用户警报

import 'package:apptics_flutter/feedback/apptics_feedback.dart';

AppticsFeedback.instance.enableAnonymousUserAlert();

禁用匿名用户警报

import 'package:apptics_flutter/feedback/apptics_feedback.dart';

AppticsFeedback.instance.disableAnonymousUserAlert();

示例代码

import 'package:apptics_flutter/feedback/apptics_feedback.dart';
import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {

  [@override](/user/override)
  void initState() {
    super.initState();
    disableAnonymousUserAlert(); // 初始化时禁用匿名用户警报。
  }

  // 禁用匿名用户警报的方法
  Future<void> disableAnonymousUserAlert() async {
    await AppticsFeedback.instance.disableAnonymousUserAlert();
  }

  // 启用匿名用户警报的方法
  Future<void> enableAnonymousUserAlert() async {
    await AppticsFeedback.instance.enableAnonymousUserAlert();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Apptics反馈示例")),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              // 当按钮被按下时调用启用方法
              enableAnonymousUserAlert();
            },
            child: const Text("启用匿名用户警报"),
          ),
        ),
      ),
    );
  }
}

检查是否启用了匿名用户警报

import 'package:apptics_flutter/feedback/apptics_feedback.dart';

AppticsFeedback.instance.isAnonymousUserAlertEnabled();

程序化发送反馈

import 'package:apptics_flutter/feedback/apptics_feedback.dart';

AppticsFeedback.instance.sendFeedback(
  "Great application",
  true, true,
  guestMailId: "user@example.com",
  attachmentsUri: [Uri.parse('file://screenshot.png')]
);

示例代码

import 'package:apptics_flutter/feedback/apptics_feedback.dart';
import 'package:flutter/material.dart';

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

  sendFeedback() async {
    AppticsFeedback.instance.sendFeedback(
      "Great application",
      true, true,
      guestMailId: "user@example.com",
      attachmentsUri: [Uri.parse('file://screenshot.png')]
    );
  }

  sendBugReport() async {
    AppticsFeedback.instance.sendBugReport(
      "Great app, but I found a bug!",
      true, true,
      guestMailId: "user@example.com",
      attachmentsUri: [Uri.parse('file://screenshot.png')]
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 你的应用界面
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Apptics反馈示例")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () async {
                  // 当按钮被按下时调用发送反馈方法
                  sendFeedback();
                },
                child: const Text("发送反馈"),
              ),
              ElevatedButton(
                onPressed: () async {
                  // 当按钮被按下时调用报告错误方法
                  sendBugReport();
                },
                child: const Text("发送报告"),
              )
            ]
          ),
        ),
      ),
    );
  }
}

Apptics反馈日志

示例代码

import 'package:apptics_flutter/feedback/apptics_log_type.dart';
import 'package:apptics_flutter/feedback/apptics_feedback.dart';
import 'package:apptics_flutter/feedback/apptics_logs.dart';
import 'package:flutter/material.dart';

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

  sendBugReport() async {
    AppticsFeedback.instance.sendBugReport(
      "Great app, but I found a bug!",
      true, true,
      guestMailId: "user@example.com",
      attachmentsUri: [Uri.parse('file://screenshot.png')]
    );
  }

  addLogInfo() async {
    AppticsLogs.instance.writeLog("Log message", Log.debug); // 写入日志
    // 或者
    AppticsLogs.instance.addLogFile(File("path")); // 附加日志文件。

    AppticsLogs.instance.addDiagnosticsInfo("HEADING", "key", "value"); // 添加诊断信息。
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    addLogInfo();

    // 你的应用界面
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Apptics反馈示例")),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              // 当按钮被按下时调用报告错误方法
              sendBugReport();
            },
            child: const Text("发送报告"),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter性能监控插件apptics_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter性能监控插件apptics_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 apptics_flutter 插件进行 Flutter 性能监控的代码示例。apptics_flutter 是一个用于监控 Flutter 应用性能的插件，它可以帮助开发者收集和分析应用的性能数据。

步骤 1: 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 apptics_flutter 依赖：

dependencies:
  flutter:
    sdk: flutter
  apptics_flutter: ^最新版本号  # 请替换为实际的最新版本号

然后运行 flutter pub get 来获取依赖。

步骤 2: 初始化插件

在你的 Flutter 应用的主文件中（通常是 main.dart），初始化 apptics_flutter 插件。

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

void main() {
  // 初始化 Apptics 插件
  AppticsFlutter.initialize(
    apiKey: '你的API密钥',  // 请替换为你的实际 API 密钥
    appName: '你的应用名称',  // 你的应用名称
    appVersion: '1.0.0',  // 你的应用版本
  );

  runApp(MyApp());
}

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 性能监控示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '点击按钮开始性能监控',
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 手动触发性能监控
                AppticsFlutter.trackPerformanceEvent(
                  eventName: 'button_click_performance',
                  extraData: {
                    'details': '用户点击了主按钮',
                  },
                );
              },
              child: Text('开始监控'),
            ),
          ],
        ),
      ),
    );
  }
}

步骤 3: 捕获页面加载时间

你可以使用 AppticsFlutter.trackPageView 方法来捕获页面加载时间。下面是一个示例：

class MySecondPage extends StatefulWidget {
  @override
  _MySecondPageState createState() => _MySecondPageState();
}

class _MySecondPageState extends State<MySecondPage> {
  @override
  void initState() {
    super.initState();
    // 捕获页面加载时间
    Future.delayed(Duration.zero, () {
      AppticsFlutter.trackPageView(
        pageName: 'MySecondPage',
        extraData: {
          'page_type': 'detail',
        },
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第二页'),
      ),
      body: Center(
        child: Text('这是第二页'),
      ),
    );
  }
}

步骤 4: 捕获自定义事件

你还可以捕获自定义事件，例如用户交互或网络请求等。

void _trackCustomEvent() {
  AppticsFlutter.trackCustomEvent(
    eventName: 'custom_event',
    extraData: {
      'event_type': 'user_interaction',
      'interaction_details': '用户执行了某个自定义操作',
    },
  );
}

总结

以上代码展示了如何使用 apptics_flutter 插件进行 Flutter 性能监控。通过初始化插件、捕获页面加载时间和自定义事件，你可以有效地监控和分析你的 Flutter 应用的性能。确保在实际应用中替换 apiKey、appName 和 appVersion 为你的实际值。

回到顶部