Flutter后端服务集成插件backendless_sdk的使用

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

Flutter后端服务集成插件backendless_sdk的使用

Backendless SDK for Flutter 是一个Flutter插件，它允许Flutter应用与Backendless后端服务进行集成。以下是如何在Flutter项目中使用这个插件的详细步骤和示例代码。

步骤 1. 注册插件

在您的 pubspec.yaml 文件中添加 backendless_sdk 作为依赖项：

dependencies:
  backendless_sdk: ^7.3.8

步骤 2. 导入 Backendless SDK

在您的 Dart 代码中添加以下导入语句：

import 'package:backendless_sdk/backendless_sdk.dart';

步骤 3. 初始化 Backendless SDK

在您的代码中使用以下调用来初始化 Backendless SDK：

[@override](/user/override)
void initState() {
  super.initState();
  Backendless.initApp(
      applicationId: APPLICATION_ID,
      androidApiKey: ANDROID_API_KEY,
      iosApiKey: IOS_API_KEY,
      jsApiKey: JS_KEY);
}

其中 APPLICATION_ID, ANDROID_API_KEY 和 IOS_API_KEY 需要在 Backendless 控制台中获取：

  1. 登录到 Backendless 账户 并选择您的应用程序。
  2. 点击左侧垂直菜单中的管理图标。
  3. 默认情况下会选择“应用设置”部分，该界面包含每个支持的客户端环境的应用程序 ID 和 API 密钥。
  4. 使用复制图标将值复制到系统剪贴板。

步骤 4. 使用 Backendless APIs

以下是一个示例代码，它将一个对象存储在 Backendless 数据库中：

Backendless.initApp(
  applicationId: APPLICATION_ID,
  androidApiKey: ANDROID_API_KEY,
  iosApiKey: IOS_API_KEY,
  jsApiKey: JS_KEY);

// 创建一个 Map 对象。这将成为数据库表中的一条记录
Map testObject = new Map();

// 向对象添加属性。
// 属性名称 ("foo") 将成为数据库表中的一列
// 属性值 ("bar") 将作为存储记录的值
testObject["foo"] = "bar";

// 将对象保存到数据库。数据库表的名称是 "TestTable"。
Backendless.data.of("TestTable").save(testObject).then(
  (response) => print("Object is saved in Backendless. Please check in the console."));

启用 Web 支持

运行以下命令以启用 Web 支持：

flutter channel dev
flutter upgrade
flutter config --enable-web

启用 Web 支持后，您可以：

创建一个带有 Web 支持的新项目：

flutter create myapp
cd myapp

或通过运行以下命令为现有项目添加 Web 支持：

flutter create .

之后，您可以使用您喜欢的 IDE 或以下命令在 Chrome 浏览器中启动您的应用程序：

flutter run -d chrome

更多信息，请参阅官方文档。

在 Backendless Flutter Web 中入门

按照以下步骤开始使用 Backendless Flutter SDK for Web：

  1. 确保在您的 pubspec.yaml 文件中包含了最新版本的 backendless_sdk 插件。

  2. 打开您的 web/index.html 文件，并在 head 标签末尾引用 Backendless JS 库：

    <head>
  ...
  <script src="https://api.backendless.com/sdk/js/latest/backendless.min.js"></script>
</head>

  3. 初始化 Backendless SDK for Web。使用以下调用：

    [@override](/user/override)
void initState() {
  super.initState();
  Backendless.initApp(
      applicationId: APPLICATION_ID,
      jsApiKey: JS_API_KEY);
}

其中 APPLICATION_ID 和 JS_API_KEY 需要在 Backendless 控制台中获取。

如果您想将 Web 支持添加到现有的移动 Flutter 应用程序中，只需在您的 initApp 方法中指定 jsApiKey 参数即可。

之后，您可以在 Web 应用程序中使用 Backendless SDK，就像在移动应用程序中一样。

示例代码

以下是一个完整的 Flutter 应用程序示例，展示了如何使用 Backendless SDK 存储和检索数据：

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

void main() {
  const String APP_ID = 'APP_ID';
  const String ANDROID_KEY = 'ANDROID_API_KEY';
  const String IOS_KEY = 'IOS_API_KEY';
  const String JS_KEY = 'JS_KEY';

  WidgetsFlutterBinding.ensureInitialized();

  Backendless.initApp(
      applicationId: APP_ID,
      androidApiKey: ANDROID_KEY,
      iosApiKey: IOS_KEY,
      jsApiKey: JS_KEY);

  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  void buttonPressed() async {
    // 创建一个 Map 对象。这将成为数据库表中的一条记录
    Map testObject = new Map();

    // 向对象添加属性。
    // 属性名称 ("foo") 将成为数据库表中的一列
    // 属性值 ("bar") 将作为存储记录的值
    testObject["foo"] = "bar";

    // 将对象保存到数据库。数据库表的名称是 "TestTable"。
    Backendless.data.of("TestTable").save(testObject).then((response) =>
        print("Object is saved in Backendless. Please check in the console."));

    var res = await Backendless.data.of("TestTable").find();
    print(res);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
            child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              child: Text("Press"),
              onPressed: buttonPressed,
            ),
          ],
        )),
      ),
    );
  }
}

此示例显示了一个按钮，按下按钮时会将一个简单的对象保存到 Backendless 数据库中，并打印出结果。希望这对您有所帮助！


更多关于Flutter后端服务集成插件backendless_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter后端服务集成插件backendless_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter项目中集成并使用backendless_sdk插件来与后端服务进行交互，可以按照以下步骤进行。以下是一个简单的代码案例，展示了如何使用backendless_sdk进行用户注册和登录。

1. 添加依赖

首先，在pubspec.yaml文件中添加backendless_sdk依赖：

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

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

2. 配置Backendless

在Flutter项目的入口文件（通常是main.dart）中，配置Backendless服务。你需要提供应用的App ID、API Key和Server URL。

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

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

  // 配置Backendless
  await Backendless.initApp(
    'YOUR_APP_ID',  // 替换为你的App ID
    'YOUR_API_KEY', // 替换为你的API Key
    'YOUR_SERVER_URL' // 替换为你的Server URL
  );

  runApp(MyApp());
}

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

3. 用户注册和登录

接下来，创建一个简单的用户界面，用于用户注册和登录。以下是一个示例，展示了如何使用backendless_sdk进行用户注册和登录。

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

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

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();
  String _email = '';
  String _password = '';
  bool _isLoggingIn = true;

  void _submit() async {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();

      try {
        if (_isLoggingIn) {
          // 登录
          var user = await Backendless.UserService.login(_email, _password);
          print('登录成功: ${user.email}');
        } else {
          // 注册
          var user = await Backendless.UserService.register(
            email: _email,
            password: _password,
          );
          print('注册成功: ${user.email}');
        }

        // 切换登录/注册状态
        setState(() {
          _isLoggingIn = !_isLoggingIn;
        });
      } catch (e) {
        print('错误: $e');
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_isLoggingIn ? '登录' : '注册'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: 'Email'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入Email';
                  }
                  return null;
                },
                onSaved: (value) {
                  _email = value!;
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: '密码'),
                obscureText: true,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入密码';
                  }
                  return null;
                },
                onSaved: (value) {
                  _password = value!;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _submit,
                child: Text(_isLoggingIn ? '登录' : '注册'),
              ),
              SizedBox(height: 10),
              TextButton(
                onPressed: () {
                  setState(() {
                    _isLoggingIn = !_isLoggingIn;
                  });
                },
                child: Text(_isLoggingIn ? '没有账号？注册' : '已有账号？登录'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

4. 运行应用

现在，你可以运行你的Flutter应用，并通过用户界面进行用户注册和登录。

注意事项

  • 确保你的Backendless应用配置正确，包括App ID、API Key和Server URL。
  • 在生产环境中，不要将敏感信息硬编码在客户端代码中，考虑使用环境变量或安全的存储方式。
  • 根据你的应用需求，可能需要处理更多的Backendless服务，如数据存储、文件存储、实时通信等，可以参考Backendless的官方文档获取更多信息。

这个示例展示了如何使用backendless_sdk进行基本的用户注册和登录操作。根据你的具体需求，你可能需要扩展这个示例以包括其他功能。

回到顶部