一、概述
1. 案例介绍
Astro低代码开发平台核心定位：华为云推出的全场景可视化应用开发平台，通过拖拽组件、模板化设计和自动化流程，大幅降低开发门槛，助力快速构建Web、移动端、大屏等应用。
本案例开发一个针对个人对健身的建议咨询，如今时过境迁，很多人都是亚健康的状态，对自己的身体可能有时候能感觉到没有那么友好，没有以前精力那么充沛，想去锻炼，想去健身，但是无从下手。该案例针对的就是这一类人群，让健身不再困难，让身体不再亚健康！
华为开发者空间，是为全球开发者打造的专属开发者空间，致力于为每位开发者提供一台云主机、一套开发工具和云上存储空间，汇聚昇腾、鸿蒙、鲲鹏、GaussDB、欧拉等华为各项根技术的开发工具资源，并提供配套案例指导开发者从开发编码到应用调测，基于华为根技术生态高效便捷的知识学习、技术体验、应用创新。
2. 适用对象
- 企业
- 个人开发者
- 高校学生
3. 案例时间
本案例总时长预计90分钟。
4. 案例流程
说明：
- 领取华为开发者空间，登录华为开发者空间-低代码应用开发平台；
- 新建低代码应用，进入Astro轻应用服务控制台主页，开发应用。
5. 资源总览
本案例预计花费0元。
| 资源名称 | 规格 | 单价（元） | 时长（分钟） |
|---|---|---|---|
| 华为开发者空间 - 低代码应用开发平台 | 系统标配 | 免费 | 90 |
二、环境准备
1. 配置大模型
参考案例《Versatile Agent中自定义接入大模型配置华为云Maas指导》中的“一、 领取”章节内容，领取华为开发者空间百万token代金券福利，购买ModelArts Studio DeepSeek-V3 轻量体验包（¥3.50）。开通商用模型服务，最后获取API Key的参数值。
到这里华为云MaaS提供的免费DeepSeek Tokens就领取完成啦！记录对应的API地址、模型名称、API Key留作下面步骤使用。
2. 创建低代码应用
华为开发者空间-Astro低代码开发是华为云推出的一款可视化应用开发平台，旨在通过"拖拽式"组件和模板化设计，降低开发门槛，提升企业数字化应用构建效率。平台主要特点包括：
- 可视化开发：通过图形化界面和预置组件，无需编写复杂代码即可快速搭建应用；
- 全场景支持：覆盖Web、移动端、大屏等多终端应用开发；
- 高效集成：内置连接器可快速对接华为云及其他主流企业系统；
- 智能辅助：提供AI辅助开发能力，如智能表单生成、流程自动化等；
-
企业级能力：具备权限管理、数据安全、高可用等企业所需特性。
-
登录华为开发者空间-Astro低代码开发平台。 在左侧菜单列表选择华为开发者空间 -> 开发平台 -> Astro 低代码开发，进入华为开发者空间-低代码应用开发平台。
第一次进入的时候会弹出一个框让你填写命名空间！ 注：命名空间为租户数据唯一标识，为免重复，首次创建或使用工程时需定义命名空间。请务必慎重，一旦定义，不可修改，推荐使用公司前缀。本案例中使用xiaoxia作为命名空间。 在右侧弹出的新建空白应用配置页签中，配置应用名称填Test，标签填“健身计划”。 这些都可以自定义，有助于自己分辨项目即可。
- 点击右下角确认按钮，平台会自动打开一个新的页面：Astro轻应用服务控制台。
注：在点击确认后，在 Astro 轻应用管理页会同时新增一条刚才创建的名称为 xiaoxia__Test 的应用，点击编辑同样可以进入 Astro 轻应用服务控制台。
至此，环境安装完成了，接下来我们就可以对咱们的项目进行开发。
3. 项目开发
- 添加调查表记录对象 首先我们的第一件事，就是先创建好对象！！ 这个很重要，开发之前一定要确定好数据结构，尽量避免边开发边设计数据结构，因为后续步骤如果页面绑定了模型、数据源之后再重新修改对象的话就需要重新解绑所有的东西再创建模型再重新绑定！
点击左侧栏【数据】 -> 【对象】旁边的 "+"号 ->【创建新对象】 【对象名称】以及【唯一标识】可以自定义，推荐跟笔者一样，因为后续用到的时候如果自定义如果分不清的话就会很麻烦，后续笔者也会根据标题提醒。
创建好新对象之后，点击新对象旁边的笔触小按钮，对对象进行操作。
然后点击添加，给对象添加字段。
接下来，按照上述方式依次添加如下字段，可以自行增加或者减少： 显示名称 – 唯一标识 – 字段类型 当前身高 – now_height – 数字 当前体重 – now_weight – 数字 当前体脂 – now_body_fat – 数字 性别 – sex – 文本 健身的目的 – purpose – 文本区 每天花费时间 – time – 文本 目标体重 – target_weight – 数字 目标体脂 – target_body_fat – 数字 建议 – suggestion – 文本区
注意！！由于【健身的目的】我们页面中是打算用一个多选框来进行选择，请务必把字段【purpose】设置成 “文本区”，不要设置成 “文本”！
- 添加全局结构体 点击左侧侧边栏中【数据】 -> 【结构体】旁边的【+】号进行添加新的结构体。
【名称】跟【唯一标识】可以自定义，笔者这里用【Message】为例，后续如果用到的话，笔者依旧会提醒，注意即可。 然后点击【结构】->【结构体】旁边的笔触按钮对结构体进行修改。
点击【添加】，给结构体添加详情。
按图下添加即可。 名称可以自定义，后续用到笔者会提。
保存成功之后就可以去开发页面啦！
4. 开发页面
- 点击左侧菜单栏 -> 【界面】 -> 【页面】旁边的【+】号按钮添加页面。 标签名称尽量保持一致，亦可以自定义，后续用到笔者会说明。
第一步，先直接把表单拖拽到页面中，拖拽进去之后会弹出一个向导，直接取消即可。
然后点击【表单】 -> 右边的侧边栏 -> 【数据绑定】右边的小设置按钮 来绑定数据源。
点击【新增模型】 -> 填写【模型名称】 -> 来源选择【对象】。
选择 3.1 创建的对象，并且把字段全部勾选，然后下一步，然后直接确定即可。
创建完模型之后直接勾选，将其绑定在该表单上。
绑定之后我们选择【只绑定模型】，然后我们自己来构建页面，因为如果选择【绑定并生成表单】的话，他生成只有一些【Input】标签，我们依然需要重新布局，相比重头开始会更加的麻烦！
这个表单就相当于我们的容器，我们接下来所有的组件都放在该表单中。 我们把标题拖拽到表单中。
标题的内容、样式等等都可以自定义，根据自己的喜好来即可。 如果需要多语言，可以点击旁边的“地球”按钮来设置多语言！
然后添加图片，同理把图片拖拽到表单中，注意不要拖拽到外层页面了。 添加图片前要记得把图片上传，或者直接给链接，样式也是可以自己喜欢就好。
再给页面添加一个二级标题，让页面看起来更加的丰富多彩。
根据您提供的信息，利用DeepSeek为您专属生成健身打卡计划，请务必认真填写。
然后我们在一行中添加两个【数字】输入框。 分别对应【当前身高】、【当前体重】（因为我们之前设置的字段【身高】、【体重】都是数字类型，如果填的是【文本】类型的话就选择输入框即可！） 先拖一个【输数字入框】，然后再拖另外一个【数字输入框】，在先前数字输入框的旁边，即可让他们处于同一行。
页面操作非常的简单，样式自己调试也快捷方便，如果想学习到更多的知识，建议可以尝试着自己去设置，自己去玩一下。
接下来添加【健身目的】复选按钮。 里边的内容可以自己想自己填写，包括按钮的选项，必填错误信息，样式等等…
然后可以添加一个分隔行。 笔者这里是添加一个【Markdown卡片】，然后内容填写 --- 即可分隔。
最后再添加一个【提交】按钮以及两个【数字输入框】来让用户填写【目标体重】以及【目标体脂】即可！
5. 绑定数据源
单击需要绑定数据源的组件 -> 右边侧边栏【数据绑定】 -> 小设置按钮 一个个的给他们绑定好数据源。 比如说：
当前身高 -> xiaoxia_now_height__CST 当前体重 -> xiaoxia_now_weight__CST 只需要一一对应即可，对应之前创建对象中的命名噢！
【suggestion】暂时不需要绑定，这是Page2需要用到的。
注意，之前创建对象的时候说到的，需要优先确定好数据结构，已经创建好对象，然后现在再绑定！ 如果一个个绑定好数据源之后，再修改对象的话，需要重新一个个解绑，然后删除模型，再重新创建模型，再重新绑定！
根据3.3重新创建一个【Page2】，并且里边的多行输入框数据绑定的是 xiaoxia__suggestion__CST。
6. 集成MaaS云平台
首先我们来创建连接器实例。 右边侧边栏【集成】->【连接器实例】->【大模型（ MaaS 云平台 ）】 ->【+】号按钮。
注意，【模型名称】以及【APIKey】皆由【1.配置大模型】中领取的，请对内容进行复制！不要手动输入！ 创建成功之后，点击【测试】，随便输入什么东西进行测试即可。
如果报错，请检查填写的【apiKey】以及【模型名称】是否正确！！！
接下来我们添加逻辑。 点击左侧侧边栏【逻辑】->【编排】->【新建编排】。
然后点屏幕上的【元数据】 ->【基本信息】->【全局上下文】-> 添加变量以及对象变量。
添加一个【input】变量、 一个【output】变量。 【input】变量类型为【文本】 【ouput】变量类型为【任意】。
然后添加【对象变量】。
全局结构体选择的是之前创建的全局结构体，命名跟笔者不一样也不用慌。
添加所需图元： 点击画布上的开始图元，点击参数，将刚才创建的变量分别拖进入参和出参：
选择左侧赋值图元，拖入界面，并将开始图元与赋值图元连接：
选择赋值图元，点击赋值按钮，将变量赋值，第一行为刚才的全局结构体变量名称“messages[0].role”，我们将值设置为"user"(要用英文双引号)，第二行为全局结构体变量名称“messages[0].content”，变量值可直接将变量中的input拖入：
左侧选择连接器-自定义连接器，选择前面步骤我们创建的连接器。将其拖拽进页面，并将赋值图元与连接图元连接：
选择连接器按钮，将连接器的入参message为对象变量message拖拽入，输出参数result为变量output拖拽：
设置好之后保存，并且进行测试：
进入到测试页面之后输入参数一定要正确！！！ 双引号不要忘了 而且 注意是英文的双引号！！！！
如果出现图下，则证明逻辑没有问题，就已经集成成功啦！
7. 完善页面事件
给【Page1】中的按钮 添加点击事件。
// 表单校验
var _form = context.$component.form;
var validFlag = _form.formValidateUnPromise();
if (!validFlag) return false;
const modelName = 'test'
const namespace = 'xiaoxia__'
const suffix = '__CST'
const model = $model.ref(modelName)
const getDataByName = (name) => formData[`${namespace + name + suffix}`]
const formData = model.getData();
const formDataCopy = {...formData}
const text = `本人性别${getDataByName('sex')}，当前身高为：${getDataByName('now_height')} cm，当前体重为：${getDataByName('now_weight')} kg，当前体脂为：${getDataByName('now_body_fat')} %，健身的目的：${getDataByName('purpose').join('，')}，每天愿意花的时间为：${getDataByName('time')}，健身后目标的体重为：${getDataByName('target_weight')} kg，健身后目标的体脂为：${getDataByName('target_body_fat')} %，请你根据以上的信息给我一个健身的建议！请你保证你的建议合理，谢谢你的帮助！`
var _flow = context.flow("xiaoxia__ds");
// 调用AI服务获取建议
try {
// 提示信息
context.$message.info("信息分析中，正在生成建议。。。。。。");
const resp = await _flow.run({ input: text });
const reader = resp.body.getReader();
const decoder = new TextDecoder();
let buffer = '';
let msg = '';
while (true) {
const { done, value } = await reader.read();
if (done) break;
buffer += decoder.decode(value);
const lines = buffer.split('\n');
// 保留最后一行（可能不完整）
buffer = lines.pop() || '';
for (const line of lines) {
if (!line.trim()) continue;
try {
const jsonStr = line.startsWith('data: ') ? line.substring(6) : line;
if (jsonStr.trim() === '[DONE]') continue;
const obj = JSON.parse(jsonStr);
const newMsg = obj?.choices[0]?.delta?.content || '';
if (newMsg) msg += newMsg;
} catch (err) {
console.warn('解析JSON失败，保留到下一轮处理:', err.message);
buffer = line + '\n' + buffer;
}
}
}
// 最终保存结果
formDataCopy.xiaoxia__suggestion__CST = msg;
formDataCopy[namespace + 'purpose' + suffix] = formData[namespace + 'purpose' + suffix].join(',')
model.setData(formDataCopy);
// 提交数据
const saveResult = await model.save();
if (saveResult.resCode == 0) {
const recordId = saveResult.result[0]?.id;
if (recordId) {
context.$page.loadStdPage('xiaoxia__Page2', "recordId=" + recordId);
// 成功消息
context.$message.success('生成成功');
}
}
} catch (error) {
context.$message.error('AI 服务调用失败：', error);
}
注意参数： const modelName = ‘test’ const namespace = ‘xiaoxia__’ const suffix = ‘__CST’ var _flow = context.flow(“xiaoxia__ds”); formDataCopy.xiaoxia__suggestion__CST = msg; formDataCopy[namespace + ‘purpose’ + suffix] = formData[namespace + ‘purpose’ + suffix].join(‘,’) 注意替换里边的 modelName namespace 字段名等参数（ 如果是你自定义的话 ）
然后到 Page2 点击导航栏中的页面 -> 事件 -> 加载 旁边的 ‘+’ 按钮 添加加载事件
// var a = 1;
// console.log('test', a);
function parseJSON(str) {
var flag = false;
try {
JSON.parse(str);
flag = true
} catch (err) {
flag = false;
}
return flag;
}
var recordId = context.$page.params.recordId;
if (!recordId) return;
try {
// 获取data model = model_1实例的数据
var _object = context.object('xiaoxia__testForm__CST');
// 查询满足条件数据
var _condition = {
conjunction: 'AND',
conditions: [{
field: 'id',
operator: 'eq',
value: recordId
}]
};
const res = await _object.query(_condition);
if (res.resCode !== '0' || !res.result || res.result.length === 0) return;
const data = res.result[0];
// 解析JSON字符串字段
Object.keys(data).forEach(item => {
if (data[item] && parseJSON(data[item])) {
try {
const parsed = JSON.parse(data[item]);
data[item] = parsed;
} catch (e) {
// 不是有效JSON，保持原值
}
}
});
$model.ref("test").setData(data);
} catch (err) {
console.error("数据查询或处理失败:", err);
}
注意参数！！！ var _object = context.object(‘xiaoxia__testForm__CST’); 这里填的是你之前创建对象的时候那个对象名！！！！ 如果跟笔者一样的话可以不需要改！
事件添加完成之后保存回到 Page1 进行测试！
8. 测试
点击预览之后进到我们开发的页面，填写必填数据，如果有未填的话，到最后提交的时候会校验的！ 填完之后点击提交：
信息分析中，正在生成建议…… 等待一小段时间之后就会跳转到Page2，跳转之后就能看到 AI 的数据：
至此案例已经全部完成！！
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
