Flutter客户端开发插件ff_flutter_client_sdk的使用

简介

使用本指南来了解如何使用我们的功能标志（FF）插件 ff_flutter_client_sdk 开发 Flutter 应用程序。本指南将概述如何开始使用该插件，并提供一个完整的代码示例供您尝试。

此示例不包括配置选项，有关深入步骤和配置插件的详细信息，例如禁用流式处理或使用我们的中继代理，请参阅 Flutter SDK 参考文档。

功能标志

需求

要使用版本 2 的 SDK，请确保您已安装以下内容：

安装 Flutter SDK >= 2.10.4
最低 Dart SDK 版本为 2.12
对于 iOS 应用，请安装 Xcode
对于 Android 应用，请安装 Android Studio 或者仅通过命令行使用的 Android SDK

要使用版本 1 的 SDK，请确保您已安装以下内容：

安装 Flutter SDK >= 2.10.4
最低 Dart SDK 版本为 2.7
对于 iOS 应用，请安装 Xcode
对于 Android 应用，请安装 Android Studio 或者仅通过命令行使用的 Android SDK

您可以使用 flutter doctor 来验证是否已安装所有必要的前提条件：

flutter doctor

要跟随我们的测试代码示例，请确保您已执行以下操作：

在 Harness 平台上创建一个功能标志。
创建一个 [服务器/客户端] SDK 密钥并复制它。

安装SDK

添加依赖项

首先，在您的 pubspec.yaml 文件中添加 ff_flutter_client_sdk 依赖项：

ff_flutter_client_sdk: ^2.1.0

导入必要的包

在添加依赖项后，将必要的包导入到您的 Dart 文件中：

import 'package:ff_flutter_client_sdk/CfClient.dart';  
import 'package:ff_flutter_client_sdk/CfConfiguration.dart';  
import 'package:ff_flutter_client_sdk/CfTarget.dart';

Android 应用程序的发布模式

在发布模式下，Flutter 会应用优化，这可能会影响原生 Android 代码的行为，包括我们 Flutter Android 插件中使用的代码。

请在您的 ProGuard 配置中添加以下规则，以确保在运行 Android 应用程序时正常工作：

-keep class io.harness.cfsdk.** { *; }

Flutter Web SDK 安装

如果您正在针对 Flutter Web 应用程序，请执行以下步骤：

按照上述步骤设置 SDK。
此外，通过在您的网页 <head> 部分添加以下脚本来嵌入我们的 JavaScript SDK：

<script src="https://sdk.ff.harness.io/1.19.2/sdk.client-iife.js"></script>

这将安装我们的功能标志 JavaScript SDK 并使其可供您的应用程序使用。请确保定期升级 JavaScript SDK 版本以获取最新更新。对于最新的 JavaScript SDK 更新，请关注：

代码示例

以下是您可以用来测试在 Harness 平台上创建的功能标志 harnessappdemodarkmode 的完整代码示例。当您运行代码时，它将执行以下操作：

连接到 FF 服务。
每隔 10 秒报告一次标志值，直到连接关闭。每次在 Harness 平台上打开或关闭 harnessappdemodarkmode 标志时，更新后的值将被报告。
关闭 SDK。

要使用此示例，请将其复制到您的项目中，并将您的 SDK 密钥输入到 FF_API_KEY 字段中。

// @dart=2.12.0
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:ff_flutter_client_sdk/CfClient.dart';

// 用于身份验证的 SDK API 密钥。在安装应用程序时通过设置 FF_API_KEY 进行配置
// 例如：
const apiKey = String.fromEnvironment('FF_API_KEY', defaultValue: '');

// 标志名称
const flagName = String.fromEnvironment('FF_FLAG_NAME', defaultValue: 'harnessappdemodarkmode');

void main() => runApp(MyApp());

// 一个简单的 StatelessWidget，从 FF 服务获取最新值。
// 每次收到更新时，都会更新标志的值。
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Harness Flutter SDK Getting Started', home: FlagState());
  }
}

class FlagState extends StatefulWidget {
  @override
  _FlagState createState() => _FlagState();
}

class _FlagState extends State<FlagState> {
  bool _flagValue = false;

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

    // 创建 SDK 的默认配置。我们可以使用它来禁用流式处理，
    // 更改客户端连接的 URL 等
    var conf = CfConfigurationBuilder().build();

    // 创建目标（不同的目标根据规则可以得到不同的结果。这包括一个自定义属性 'location'）
    var target = CfTargetBuilder().setIdentifier("fluttersdk").setName("FlutterSDK").build();

    // 初始化功能标志客户端的默认实例
    CfClient.getInstance().initialize(apiKey, conf, target)
        .then((value){
      if (value.success) {
        print("Successfully initialized client");

        // 评估标志并设置初始状态
        CfClient.getInstance().boolVariation(flagName, false).then((value) {
          print("$flagName: $value");
          setState(() {
            _flagValue = value;
          });
        });

        // 设置事件处理器
        CfClient.getInstance().registerEventsListener((data, eventType) {
          print("received event: ${eventType.toString()} with Data: ${data.toString()}");
          switch (eventType) {
            case EventType.EVALUATION_CHANGE:
              String flag = (data as EvaluationResponse).flag;
              dynamic value = (data as EvaluationResponse).value;
              // 如果更改涉及我们关心的标志，则更新状态
              if ( flag == flagName ) {
                setState(() {
                  _flagValue = value.toLowerCase() == 'true';
                });
              }
              break;
          }
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Harness Flutter SDK Getting Started'),
      ),
      body: Container(
        child: Center(
          child: new Text("${flagName} : ${_flagValue}", style: TextStyle(fontSize: 25)),
        ),
      ),
    );
  }
}

运行示例

首先，在 .env 文件中提供您的 API 密钥：

FF_API_KEY=your_api_key_here

然后，您可以使用 Android Studio 运行 getting started 示例。

您也可以通过以下步骤使用 Flutter CLI 运行 getting started 示例：

前提条件

确保 Flutter 已在您的机器上安装。
决定您是要针对 Android 模拟器、iOS 模拟器还是浏览器。

设置和选择目标

验证设备/模拟器

列出可用设备/模拟器：

flutter devices

输出将列出您的设备，例如：

2 connected devices:
sdk gphone64 x86 64 (mobile) • emulator-5554                        • android-x64    • Android 12 (API 32) (emulator)
iPhone 13 (mobile)           • 425E99F8-702F-4E15-8BBE-B792BF15ED88 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-5 (simulator)

Android 模拟器

启动 Android 模拟器：

$ANDROID_SDK/emulator/emulator @Pixel_4.4_API_32

替换 @Pixel_4.4_API_32 为您自己的模拟器设备 ID。

在 Android 模拟器上运行 Flutter 应用程序：

flutter run -d emulator-5554

iOS 模拟器

打开 iOS 模拟器：

open -a simulator

在 iOS 模拟器上运行 Flutter 应用程序：

flutter run -d 425E99F8-702F-4E15-8BBE-B792BF15ED88

Web 示例

如果针对浏览器，请使用：

flutter run -d chrome --hot

构建项目

使用 SDK API 密钥和上面提到的设备 ID，您可以构建并安装应用程序：

cd examples/getting_started
export FF_API_KEY=<your_api_key>

flutter pub get
flutter run --dart-define=FF_API_KEY=$FF_API_KEY -d <device_id>

更多关于Flutter客户端开发插件ff_flutter_client_sdk的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

gougou168 1楼

更多关于Flutter客户端开发插件ff_flutter_client_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在Flutter客户端开发中，使用ff_flutter_client_sdk插件可以极大地简化与后端服务的集成。以下是一个基本的代码案例，展示了如何在Flutter项目中安装和使用ff_flutter_client_sdk插件。

1. 添加依赖

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

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

然后运行flutter pub get来安装依赖。

2. 导入插件

在你的Dart文件中导入插件。

import 'package:ff_flutter_client_sdk/ff_flutter_client_sdk.dart';

3. 初始化SDK

在使用SDK之前，你需要进行初始化。这通常涉及到设置一些必要的配置，如API端点、认证信息等。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化ff_flutter_client_sdk
  await FFClient.init(
    baseUrl: 'https://your-backend-api-endpoint.com',
    headers: {
      'Authorization': 'Bearer your_access_token',  // 如果需要认证
      // 其他必要的请求头
    },
  );

  runApp(MyApp());
}

4. 使用SDK进行API调用

假设ff_flutter_client_sdk提供了一个getUser方法来获取用户信息，你可以这样调用它：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  User? user;
  String? errorMessage;

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

  Future<void> _fetchUserData() async {
    try {
      // 调用getUser方法，假设它返回一个User对象
      user = await FFClient.getUser();
    } catch (e) {
      errorMessage = e.toString();
    }

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Client SDK Demo'),
        ),
        body: Center(
          child: user != null
              ? Text('User: ${user!.name}')
              : errorMessage != null
                  ? Text('Error: $errorMessage')
                  : CircularProgressIndicator(),
        ),
      ),
    );
  }
}

// 假设User类定义如下
class User {
  String? name;
  // 其他属性...

  User({this.name});

  @override
  String toString() => 'User{name: $name}';
}

注意事项

错误处理：在实际应用中，你应该添加更详细的错误处理逻辑，以便更好地处理网络错误、认证失败等情况。
安全性：不要在代码中硬编码敏感信息，如API密钥或访问令牌。考虑使用环境变量或安全存储来管理这些信息。
依赖版本：确保你使用的是ff_flutter_client_sdk的最新稳定版本，以便获得最新的功能和安全更新。

以上代码提供了一个基本的框架，展示了如何在Flutter项目中集成和使用ff_flutter_client_sdk插件。根据你的具体需求，你可能需要调整API调用和数据处理逻辑。

Flutter客户端开发插件ff_flutter_client_sdk的使用

Flutter客户端开发插件ff_flutter_client_sdk的使用

目录

简介

需求

安装SDK

添加依赖项

导入必要的包

Android 应用程序的发布模式

Flutter Web SDK 安装

代码示例

运行示例

前提条件

设置和选择目标

验证设备/模拟器

Android 模拟器

iOS 模拟器

Web 示例

构建项目

1. 添加依赖

2. 导入插件

3. 初始化SDK

4. 使用SDK进行API调用

注意事项