实战丨如何把 Flutter 云端一体化做到极致？

1. 背景

云开发CloudBase 提供了强大的一站式后端服务，并且和微信团队合作推出了「小程序·云开发」，服务了超过 50 万开发者。

我们还想把云开发和 Flutter 结合，实现一套极致的 Flutter 云端一体化工作流。此前，已经做过了一些探索：

• 实现云开发的 Flutter SDK

  Flutter客户端可以使用云开发 Flutter SDK，调用云函数、云数据库和云存储等后端资源。However, 云函数不支持 dart 运行时，所以只有 baas 能力，没有 faas 能力。

• 在 Serverless 云应用内部署 dart server

  Serverless 云应用的底层是容器，可以支持任何语言，因此可以部署 dart server 云应用，完善了云端的开发能力。However，这里还需要开发者理解容器服务，编写 dockfile，还需要对 dart server 进行框架选型，有一定的研发门槛。

为了把云端一体化做到极致，我们又做了 CloudBase Framework -- 一体化的应用开发部署工具，可以一键创建并部署 dart server 应用，并且支持声明式的创建云资源。

CloudBase Framework 已经在 Github 开源，欢迎大家给项目点个 Star

2. CloudBase Framework For Flutter 能做什么 ？

2.1 快速创建并部署 dart server

借助 CloudBase Framework，只需要几行命令，就能开发一个免运维、自动扩缩容、高性能的 dart server 应用。

# 安装 CLI 工具
npm install -g @cloudbase/cli

# 登录 CloudBase
cloudbase login

# 初始化 dart server 应用
cloudbase init --template dart

# 进入 dart server 应用根目录
cd dartapp

# 部署 dart server 到云上
cloudbase framework:deploy

部署成功

访问服务：https://test-docker-117e45.service.tcloudbase.com/dartapp

2.2 开发简单的 API 接口

在创建的 dart server 应用内，打开 lib/channel.dart 文件，在 entryPoint() 函数里开发你的 API 接口。

@override
Controller get entryPoint {
  final router = Router();

  router.route("/example").linkFunction((request) async {
    return Response.ok({"key": "value"});
  });

  return router;
}

重新部署应用后，请求子路径 /example

2.3 开箱即用的云数据库

我们在 dart server 应用里集成了云数据库，只需要简单修改代码，就可以调用数据库。

通过 Flutter SDK 也可以在客户端调用同一个云数据库

在 lib/channel.dart 文件的 prepare() 函数里初始化云数据库。

@override
Future prepare() async {
  /// 其他初始化代码
  ...

  /// 初始化云数据库
  database = CloudBaseDatabase(CloudBaseCore.init({
    /// 云开发环境 ID
    'env': 'your-env-id',

    /// 腾讯云 API 固定密钥对
    /// 获取路径: https://console.cloud.tencent.com/cam/capi
    'secretId': 'your-secretId',

    /// 同上
    'secretKey': 'your-secretKey'
  }));
}

在 entryPoint() 函数里开发一个数据库接口。

@override
Controller get entryPoint {
  final router = Router();

  /// 在请求里使用云数据库
  /// 云数据库详细文档请参考: https://docs.cloudbase.net/api-reference/flutter/database.html
  router.route("/user").linkFunction((request) async {
    try {
      /// 在 dart server 部署过程中已经声明式的创建了 user 集合
      final res = await database.collection('user').count();

      /// 处理错误
      if (res.code != null) {
        return Response.serverError(
            body: {"code": res.code, "message": res.message});
      }

      /// 回包
      return Response.ok({"user_count": res.total});
    } catch (err) {
      return Response.serverError(body: err);
    }
  });

  return router;
}

重新部署应用后，请求子路径 /user

2.4 声明式创建云资源

在应用的配置文件 cloudbaserc.json 里，声明两个插件：server 和 db。所以在一键部署的过程中，既创建了dart server应用，也创建了应用依赖的数据库集合 user 。

{
  "envId": "env-123",
  "framework": {
    "name": "aqueduct-starter",
    "plugins": {
      "server": {
        "use": "@cloudbase/framework-plugin-dart",
        "inputs": {
          "serviceName": "dartapp",
          "servicePath": "/dartapp",
          "localPath": "./"
        }
      },
      "db": {
        "use": "@cloudbase/framework-plugin-database",
        "inputs": {
          "collections": [
            {
              "collectionName": "user",
              "description": "用户集合",
              "aclTag": "PRIVATE"
            }
          ]
        }
      }
    }
  }
}

2.5 更多

• 通过模板变量和模式切换，可以快速部署同一个应用到多个环境（体验、预发、生产）
• 通过 Coding CI/CD 进行审批发布

更多可看技术文档https://cloudbase.net

3. CloudBase Framework 带来的好处

3.1 降本增效

Flutter 开发者可以使用 CloudBase Framework 开发 API 接口服务，完成前后端业务的闭环，并且具备免运维、自动扩缩容的能力。

Flutter 云端一体化的研发成本 = 传统模式的研发成本 - 运维成本 - 前后端联调成本 - 空闲资源成本

3.2 云原生

「 Flutter x CloudBase Framework 」 是按照云原生的思路打造的解决方案，是面向未来的解决方案，正是客户端同学上云的最佳实践。

4. CloudBase Framework 的愿景

4.1 成为 Flutter 开发工作流的一部分

目前借助 CloudBase Framework 可以快速开发并上线 dart server 应用，Flutter 开发者可以自己完成前后端业务的闭环。

后续，希望可以和 Flutter 客户端工程有更深入的集成，成为 Flutter 开发工作流的一部分。

4.2 助力更多团队上云

CloudBase Framework 是云开发的一体化开发部署工具，可以帮忙开发者快速构建云上应用，后续将持续优化体验，支持更多功能，助力更多团队上云。

目前腾讯内部已有多个团队在使用 CLoudBase Framework x Flutter 开发模式，研发效率提升了 100%

5. 写在最后

5.1 开源贡献

CloudBase Framework 项目已经在 Github 开源，欢迎各位开发者为 CloudBase Framework 共享一份力量，让这个项目能够更好的帮助开发者提升开发效率

https://github.com/TencentCloudBase/cloudbase-framework

（也欢迎给项目点个 Star，支持我们做得更好 ~ ）