使用 CloudBase AI ToolKit 通过低代码方式开发 H5 应用的第一手体验

笔者近日在腾讯云社区上闲逛，看到了 AI 代码远征季的征文活动。因为平日对 AI 辅助编程就很感兴趣，于是第一时间动手进行了体验。

腾讯云为 CloudBase 这个专为 AI 开发打造的一站式应用开发工具，赋予了新能力 ——「CloudBase AI ToolKit」。

它能完美兼容主流 AI 编程工具，像 Cursor、CodeBuddy、Trae、WinSurf 等都不在话下。

最厉害的是，它会自动为你生成可以直接部署的完整的网站前后端应用和手机小程序，轻轻一点，就能快速发布到腾讯云开发平台，方便快捷。

首先大家需要移步腾讯云开发 CloudBase 官网，免费申请开通一个环境。

购买时长选择开发期，就可以 0 元带走这个云开发环境了：

CloudBase 帮助文档如下。

笔者想开发一个 HTML5 应用，所以点击文档里的开发 Web 应用：

文档提示我，首先要安装 TCB cli 即 command line interface：

https://docs.cloudbase.net/quick-start/install-cli

按照文档说明，将 cli 安装到本地，执行命令行 cloudbase --version 看到版本号输出，说明 cli 安装成功了。

HTML5 应用属于 web 开发，大家按照官方这个文档操作即可。

我们打开 tcb 控制台，点击左侧导航栏里的 AI Builder，然后向其发布指令。

显示当前访问用户的IP地址详细信息

接着 TCB AI Builder 就开始帮我拆解这个需求：

要实现显示当前访问用户的 IP 地址详细信息的功能，我们需要以下步骤：

• 获取用户 IP 地址：可以通过云函数或前端 API 获取用户的 IP 地址。
• 查询 IP 地址详细信息：使用第三方 API（如 IP Geolocation API）来获取 IP 地址的详细信息（如地理位置、ISP 等）。
• 显示详细信息：将获取的信息展示在页面上。

随即 TCB AI Builder 就帮我生成好了能够直接预览的 HTML 代码：

点击应用预览，可以看到应用的界面，完成度还是比较高的：

点击发布按钮，就可以一键将生成好的 HTML 应用，发布到腾讯云后台上。这里根据实际需要选择发布为正式版或体验版。

注意发布到云后台之后，如果需要启用匿名登录，需要按照官网文档的说明，将域名添加到【环境】-【安全配置】-【WEB安全域名】列表中，否则将被识别为非法来源。

然后将下面这段 SDK 代码，粘贴到 html 文件中：

<script src="https://static.cloudbase.net/cloudbase-js-sdk/2.17.5/cloudbase.full.js"></script>
<script>
  const app = cloudbase.init({
    env: 'zixi-test-0gt2il9x88ff977e' // 您的环境id
  })
</script>

最后就能实现匿名登录了。

下面是我的 HTML 部署到 TCB 云后台的 url：

https://zixi-test-0gt2il9x88ff977e-1256235118.tcloudbaseapp.com/app-9ptaglj5/production/ipinfo

点击之后，可以直接匿名访问了。

CloudBase AI ToolKit 强大的能力确实进一步降低了编程的门槛，使得更多的用户能够利用 AI 提高自己的工作效率。

欢迎大家访问腾讯的 AI ToolKit GitHub 地址，获得更多信息：

https://github.com/TencentCloudBase/CloudBase-AI-ToolKit